コードベースプロトタイプ

リポジトリを Stitch ワークスペースに接続し、UI プロトタイピングの優先事項と組み合わせると、Stitch はアプリケーションの実際のルートとコンポーネントを調査し、洗練された UI プロトタイプを Stitch キャンバス上で直接提案します。

ワークスペース機能を使うには、お使いのマシンで stitch enable loop を一度実行する必要があります。開始するにはリポジトリの接続を参照してください。

/stitch スキルでコードベースプロトタイピングを進める

接続済みのリポジトリ内で /stitch を呼び出すと、コーディングエージェントが複数ルートの検出とプロトタイプのループを代行します。

エージェントはルーター定義を調査して主要なビューを見つけ、ローカルの開発サーバーからライブスナップショットを Stitch キャンバスプロジェクトにキャプチャし、ワークスペースの統合が完了するとすぐに候補ソリューションを提示します。気に入ったソリューションを選ぶと、エージェントがキャンバス上にプロトタイプ画面を生成します。

アプリケーションのルートをキャンバスに配置する

新機能のプロトタイプを生成する前に、Stitch キャンバスプロジェクトには既存ビューの本物のスナップショットと DESIGN.md のトークンが必要です。そうすることで、新しいプロトタイプは汎用テンプレートではなく、実際のプロダクトらしく見えます。

ローカルの開発サーバーから主要ルートをキャプチャし、参照画面としてアップロードします。

stitch capture browser --url "http://localhost:5173/dashboard" -o .stitch/dashboard.html
stitch upload screen .stitch/dashboard.html --route "/dashboard" --title "Dashboard"

stitch capture port --port 5173 --route "/schedule" -o .stitch/schedule.html
stitch upload screen .stitch/schedule.html --route "/schedule" --title "Schedule"

次に、キャンバスプロジェクトがワークスペースにリンクされ、DESIGN.md が同期されていることを確認します。

stitch loop link --project <project-id>
stitch upload design DESIGN.md

UX インサイトと提案ソリューションを確認する

コードベースをアップロードし（stitch upload code .）、UI プロトタイピングの優先事項を有効にすると（stitch create priority --template ui-prototyping）、Stitch はバックグラウンドでルートを分析し、受動的な表示、ワークフローのボトルネック、レイアウトの機会を見つけ出します。

初回のコードベース統合には通常約 15 分かかります。ワークスペースのインサイトはいつでも確認できます。

stitch find insights
stitch get insight <insight-id>

各インサイトは 1 つ以上の候補ソリューションを生み出します。ドメインのメタファー、DESIGN.md のルール、アップロードした参照画面に基づいて調整された Stitch キャンバス用プロンプトを含む、完全な仕様です。

stitch find solutions
stitch get solution <solution-id>

Stitch キャンバスでプロトタイプを生成する

関心のある問題を解決するソリューションを選び、そのデザインプロンプトを取得して、リンクされた Stitch キャンバスプロジェクトで画面を生成します。

stitch generate screen \
  --title "Interactive Schedule Workbench" \
  --device DESKTOP \
  --prompt "<prompt from stitch get solution>"

stitch serve で既存の画面と並べて新しいプロトタイプを localhost でプレビューするか、Stitch キャンバスで直接開きます。

stitch serve
stitch open screen <screen-id>