実行中アプリのキャプチャ

既存のページをリデザインするときや、確立されたアプリ内で新機能をプロトタイピングするときは、空白のキャンバスから始めないでください。まず実際に動作している UI を Stitch キャンバスに持ち込み、編集が実際のレイアウトとスタイルの上に積み重なるようにしましょう。

`/stitch` スキルでルートをキャプチャする

/stitch スキルをインストールした状態（stitch agent-skills add）でローカルの開発サーバーを起動し、コーディングエージェントにルートを Stitch プロジェクトへキャプチャするよう依頼します。

PROMPT

/stitch Capture the /checkout and /dashboard routes from my running dev server and upload them to my Stitch Canvas project.

エージェントは実行中の Vite、Next.js、Astro の開発サーバーポートを自動検出し、各ルートのハイドレート済み DOM と 1280x800 の検証用スクリーンショットをキャプチャし、ログインモーダルがページを遮っていないことを確認して、画面を Stitch プロジェクトにアップロードします。

ターミナルからキャプチャしてアップロードする

CLI はキャプチャとアップロードを 2 つの独立したコマンドに分けているため、Stitch に送信する前に、ディスク上にキャプチャされた内容をいつでも確認できます。

クライアントレンダリングアプリをヘッドレス Chrome でキャプチャする

JavaScript のハイドレーション、WebFonts、計算済みスタイルが必要な React、Next.js、Vite、Vue アプリには stitch capture browser を使います。

stitch capture browser \
  --url "http://localhost:3000/checkout" \
  --wait-for "#checkout-root" \
  -o .stitch/checkout.html

-o を渡すと、正規化された HTML ファイル（.stitch/checkout.html）と 1280x800 の検証用スクリーンショット（.stitch/verify-capture.png）の両方が書き出されるので、キャプチャを一目で確認できます。

HTTP 経由、または静的ファイルからキャプチャする

ローカルポート上のサーバーレンダリング HTML や静的ビルドファイルを扱う場合は、stitch capture port または stitch capture file を使います。

stitch capture port --port 5173 --route "/dashboard" -o .stitch/dashboard.html
stitch capture file ./dist/index.html -o .stitch/index.html

コードに触れずにログイン画面を突破する

キャプチャのためにログイン画面を回避する目的で、アプリケーションのソースコードを編集しないでください。stitch capture browser には、認証済みのビューをキャプチャするためのクリーンな方法が 3 つ用意されています。

開いているタブで直接ログインする：ライブのブラウザウィンドウ内でログインするかタブを切り替え、そのアクティブタブを再読み込みせずに固定します：
```
stitch capture browser --page 1 -o .stitch/dashboard.html
```

保存済みの Cookie と localStorage を渡す：--storage に JSON ストレージ状態ファイルを指定します：

stitch capture browser \
  --url "http://localhost:4321/schedule" \
  --storage .stitch/storage.json \
  -o .stitch/schedule.html

スナップショット前にログインスクリプトを実行する：--prepare を渡すと、DOM がキャプチャされる前に小さなセットアップスクリプトを実行します：
```
stitch capture browser \
  --url "http://localhost:4321/login" \
  --prepare .stitch/signin.js \
  --wait-for "#dashboard" \
  -o .stitch/dashboard.html
```

Stitch キャンバスにアップロードする

ローカルの .html スナップショットまたは画像が意図どおりになったら、stitch upload screen で Stitch キャンバスプロジェクトに配置します。

stitch upload screen .stitch/checkout.html \
  --route "/checkout" \
  --title "Checkout"

アプリケーションのルートをアップロードするときは --route を渡すと、Stitch はその画面を /checkout の正規の参照として記録します。アップロード後は stitch open project でプロジェクトを開くか、stitch edit screen で画面の反復を始められます。