stitch-loop

Stitch ビルドループ

制約： ユーザーが「Stitch」と複数ページのサイト構築または反復的なサイト構築について明示的に言及した場合に限り、このスキルを使用します。

あなたは反復的なサイト構築ループで動作する自律型フロントエンドビルダーです。各イテレーションでは、（1）バトンを読み、（2）Stitch MCP でページを生成し、（3）サイトに統合し、（4）次のバトンを書いてループを続行します。

前提条件

• Stitch MCP Server（stitch-setup スキルまたは https://stitch.withgoogle.com/docs/mcp/guide/ を参照）
• DESIGN.md — 既存の画面をもとに stitch-design-system で生成します（一貫性を保つために必須）
• SITE.md — サイトのビジョン、Stitch プロジェクト ID、サイトマップ、ロードマップ（存在しない場合は作成します）

バトンシステム

next-prompt.md はイテレーション間で受け渡すリレーバトンです。次に構築するページをループに伝えます。

バトンの形式

---
page: about
---

**DESIGN SYSTEM (REQUIRED):**
[Paste DESIGN.md Section 6 here verbatim]

**Page request:**
About page with company mission, team section (3 people), and timeline.

ルール：

• page のフロントマター → 出力ファイル名（about.html）
• 本文には DESIGN.md の Section 6 にあるデザインシステムブロックを必ず含めます
• 各イテレーションの最後に必ず next-prompt.md を更新します。これがないとループは停止します

---

実行手順

ステップ 1 — バトンを読む

next-prompt.md を解析します。

• YAML フロントマターから page を抽出します
• デザインシステムブロックを含むプロンプト本文全体を抽出します

ステップ 2 — コンテキストファイルを確認する

ファイル	確認する内容
SITE.md	Stitch プロジェクト ID（Section 2）、サイトマップ（Section 3）、ロードマップ／次のページ（Section 4）、クリエイティブな裁量（Section 5）
DESIGN.md	Section 6 — 現在のプロンプトだけでなく、すべてのプロンプトにコピーします

確認： SITE.md のサイトマップにすでにあるページは再構築しないでください。DESIGN.md のビジュアルスタイルから逸脱しないでください。

ステップ 3 — Stitch で生成する

1. list_tools を実行し、Stitch MCP のプレフィックスを確認します
2. stitch.json が存在する場合は、保存済みの projectId を使用します。新しいプロジェクトは作成しないでください
3. stitch.json が存在しない場合は、create_project を呼び出し、数値 ID を stitch.json に保存します
4. generate_screen_from_text を呼び出します。
   • projectId：数値 ID（projects/ プレフィックスは付けません）
   • prompt：DESIGN SYSTEM ブロックを含むバトンの内容全体
   • deviceType：SITE.md または DESIGN.md の指定に合わせます
5. 数値の projectId と screenId を指定して get_screen を呼び出します
6. HTML をダウンロードします：bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "queue/[page].html"
7. スクリーンショットをダウンロードし、queue/[page].png に保存します

ステップ 4 — サイトに統合する

1. queue/[page].html を site/public/[page].html に移動します
2. アセットのパスを修正します（site/public/ からの相対パスにします）
3. ナビゲーションを設定します。href="#" のプレースホルダーを、既存ページへの実際のパスに置き換えます
4. ヘッダーとフッターがサイト内の他のページと一致していることを確認します

ステップ 4.5 — ビジュアル検証（Chrome DevTools MCP を利用できる場合）

list_tools に chrome* ツールがある場合：

1. ローカルサーバーを起動します：npx serve site/public -p 3000
2. http://localhost:3000/[page].html に移動します
3. スクリーンショットを撮影し、queue/[page].png と比較します
4. サーバーを停止します

ステップ 5 — SITE.md を更新する

• サイトマップに [x] [page].html を追加します
• クリエイティブな裁量のセクションから、使い終えたアイデアを削除します
• バックログ項目が完了した場合はロードマップを更新します

ステップ 6 — 次のバトンを書く（重要）

完了する前に必ず next-prompt.md を更新します。更新しないとループが停止します。

1. 次のページを、サイトマップ → ロードマップ → クリエイティブな裁量、の順に選ぶか、条件に合うページを考案します
2. 次の内容を含む next-prompt.md を作成します。
   • 有効な YAML フロントマター（page: <next-page-name>）
   • DESIGN.md の Section 6 からそのままコピーした **DESIGN SYSTEM (REQUIRED):** ブロック
   • 明確なページの説明

---

ファイル構成

project/
├── next-prompt.md       ← Baton (current task; updated each iteration)
├── stitch.json          ← Stitch project ID (persist between loops!)
├── DESIGN.md            ← From stitch-design-system
├── SITE.md              ← Vision, sitemap, roadmap
├── queue/               ← Staging: [page].html, [page].png
└── site/
    └── public/          ← Production: index.html, about.html, etc.

---

SITE.md のテンプレート

# Site Vision

[One paragraph describing the site's purpose, audience, and overall feeling]

## Stitch Project

- **Project ID (numeric):** [ID from stitch-mcp-create-project]

## Sitemap

- [ ] index.html — Home
- [ ] about.html — About
- [ ] contact.html — Contact

## Roadmap

1. index.html — main landing page
2. about.html — company/team info
3. contact.html — contact form

## Creative freedom

Additional pages or sections not yet planned...

---

よくある落とし穴

• ❌ next-prompt.md の更新を忘れる（ループが停止します）
• ❌ SITE.md のサイトマップにすでに含まれているページを再構築する
• ❌ プロンプトから DESIGN.md のセクション 6 を省く（視覚的な一貫性が崩れます）
• ❌ generate_screen_from_text で数値ではなく projects/ID 形式を使用する
• ❌ 実際のページリンクを設定せず、href="#" のままにする
• ❌ stitch.json を永続化しない（イテレーションごとに新しいプロジェクトが作成されます）

---

トラブルシューティング

問題	解決方法
ページ間でビジュアルスタイルに一貫性がない	DESIGN.md を最新の状態に保ち、必ずセクション 6 を baton にコピーします
次のイテレーションでループが停止する	next-prompt.md に有効なフロントマターがあり、本文が空でないことを確認します
Stitch の生成に失敗する	baton に DESIGN SYSTEM ブロックと具体的なページのリクエストが含まれていることを確認します
ナビゲーションが壊れている	内部リンクには相対パスを使用し、site/public/ の構造を確認します

---

参考資料

• scripts/fetch-stitch.sh — 信頼性の高い GCS HTML ダウンローダー
• stitch-design-system — 既存の画面から DESIGN.md を生成します
• stitch-ui-prompt-architect — 曖昧な baton テキストを構造化されたプロンプトに整えます
• docs/prd-to-stitch-workflow.md — PRD 主導の複数画面ワークフロー