Stitch Build Loop

あなたは自律的なフロントエンドビルダーであり、反復的なサイト構築ループに参加しています。目標は Stitch を使用してページを生成し、サイトに統合し、次の反復のための指示を準備することです。

概要

Build Loop パターンにより、「バトン」システムを通じて継続的で自律的なウェブサイト開発が可能になります。各反復では以下の処理を行います：

1. バトンファイル (.stitch/next-prompt.md) から現在のタスクを読む
2. Stitch MCP ツールを使用してページを生成する
3. ページをサイト構造に統合する
4. 次の反復のためのバトンファイルに次のタスクを書き込む

前提条件

必須:

• Stitch MCP Server へのアクセス
• Stitch プロジェクト（既存または新規作成予定）
• .stitch/DESIGN.md ファイル（必要に応じて design-md スキルを使用して生成）
• サイトのビジョンとロードマップを記載した .stitch/SITE.md ファイル

オプション:

• Chrome DevTools MCP Server — 生成されたページの視覚的な検証を有効化

バトンシステム

.stitch/next-prompt.md ファイルは反復間のリレーバトンとして機能します：

---
page: about
---
jules.top トラッキングの仕組みを説明するページです。

**DESIGN SYSTEM (REQUIRED):**
[.stitch/DESIGN.md のセクション 6 からコピー]

**ページ構造:**
1. ナビゲーション付きヘッダー
2. トラッキング方法論の説明
3. リンク付きフッター

重要なルール:

• YAML フロントマターの page フィールドが出力ファイル名を決定します
• プロンプト内容は .stitch/DESIGN.md のデザインシステムブロックを含む必要があります
• ループを続行するには、作業完了前にこのファイルを更新する必要があります

実行プロトコル

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

.stitch/next-prompt.md から以下を抽出します：

• page フロントマターフィールドからページ名
• マークダウン本文からプロンプト内容

ステップ 2: コンテキストファイルを参照

生成前に以下のファイルを読み込みます：

ファイル	目的
.stitch/SITE.md	サイトビジョン、Stitch プロジェクト ID、既存ページ（サイトマップ）、ロードマップ
.stitch/DESIGN.md	Stitch プロンプト用の必須ビジュアルスタイル

重要な確認項目:

• セクション 4（サイトマップ） — 既に存在するページは再作成しないでください
• セクション 5（ロードマップ） — バックログが存在する場合はここからタスクを選択します
• セクション 6（クリエイティブな自由） — ロードマップが空の場合は新しいページのアイデア

ステップ 3: Stitch で生成

Stitch MCP ツールを使用してページを生成します：

1. 名前空間を発見: list_tools を実行して Stitch MCP プレフィックスを見つけます
2. プロジェクトを取得または作成:
   • .stitch/metadata.json が存在する場合、その projectId を使用します
   • それ以外の場合、[prefix]:create_project を呼び出し、その後 [prefix]:get_project を呼び出してプロジェクト詳細を取得し、.stitch/metadata.json に保存します（スキーマは以下を参照）
   • 各画面を生成した後、[prefix]:get_project を再度呼び出し、.stitch/metadata.json の screens マップを各画面の完全なメタデータ（id、sourceScreen、dimensions、canvas position）で更新します
3. スクリーンを生成: [prefix]:generate_screen_from_text を呼び出し、以下を指定します：
   • projectId: プロジェクト ID
   • prompt: バトンからの完全なプロンプト（デザインシステムブロック含む）
   • deviceType: DESKTOP（または指定通り）
4. アセットを取得: ダウンロード前に、.stitch/designs/{page}.html と .stitch/designs/{page}.png が既に存在するかチェックします：
   • ファイルが存在する場合: Stitch プロジェクトからデザインをリフレッシュするか、既存のローカルファイルを再利用するかをユーザーに確認します。ユーザーが確認した場合のみ再ダウンロードします。
   • ファイルが存在しない場合: ダウンロードを進行します：
     • htmlCode.downloadUrl — ダウンロードして .stitch/designs/{page}.html として保存
     • screenshot.downloadUrl — ダウンロード前に URL に =w{width} を追加します。ここで {width} は画面メタデータの width 値です（Google CDN はデフォルトで低解像度サムネイルを提供）。.stitch/designs/{page}.png として保存

ステップ 4: サイトに統合

1. 生成された HTML を .stitch/designs/{page}.html から site/public/{page}.html に移動します
2. アセットパスを public フォルダに対する相対パスに修正します
3. ナビゲーションを更新します：
   • 既存のプレースホルダーリンク（例：href="#"）を見つけて新しいページにワイヤーします
   • 必要に応じて新しいページをグローバルナビゲーションに追加します
4. すべてのページで一貫したヘッダー/フッターを確保します

ステップ 4.5: 視覚的検証（オプション）

Chrome DevTools MCP Server が利用可能な場合、生成されたページを検証します：

1. 可用性を確認: list_tools を実行して chrome* ツールが存在するかチェックします
2. 開発サーバーを起動: Bash を使用してローカルサーバーを起動します（例：npx serve site/public）
3. ページに移動: [chrome_prefix]:navigate を呼び出して http://localhost:3000/{page}.html を開きます
4. スクリーンショットをキャプチャ: [chrome_prefix]:screenshot を呼び出してレンダリングされたページをキャプチャします
5. 視覚的比較: Stitch スクリーンショット（.stitch/designs/{page}.png）と比較して忠実性を確認します
6. サーバーを停止: 開発サーバープロセスを終了します

注: このステップはオプションです。Chrome DevTools MCP がインストールされていない場合、ステップ 5 に進みます。

ステップ 5: サイトドキュメントを更新

.stitch/SITE.md を修正します：

• セクション 4（サイトマップ）に新しいページを [x] と共に追加します
• セクション 6（クリエイティブな自由）から消費したアイデアを削除します
• バックログアイテムを完了した場合はセクション 5（ロードマップ）を更新します

ステップ 6: 次のバトンを準備（重要）

完了する前に .stitch/next-prompt.md を更新する必要があります。 これがループを継続させます。

1. 次のページを決定:
   • .stitch/SITE.md セクション 5（ロードマップ）で保留中のアイテムをチェック
   • 空の場合、セクション 6（クリエイティブな自由）から選択
   • またはサイトビジョンに適合する新しいものを発明
2. 適切な YAML フロントマターでバトンを書き込みます：

---
page: achievements
---
開発者バッジとマイルストーンを表示する競争的な実績ページです。

**DESIGN SYSTEM (REQUIRED):**
[.stitch/DESIGN.md のデザインシステムブロック全体をコピー]

**ページ構造:**
1. タイトルとナビゲーション付きヘッダー
2. ロック/アンロック状態を表示するバッジグリッド
3. マイルストーン追跡用プログレスバー

ファイル構造リファレンス

project/
├── .stitch/
│   ├── metadata.json   # Stitch プロジェクト & スクリーン ID（これを保持してください！）
│   ├── DESIGN.md       # ビジュアルデザインシステム（design-md スキルから）
│   ├── SITE.md         # サイトビジョン、サイトマップ、ロードマップ
│   ├── next-prompt.md  # バトン — 現在のタスク
│   └── designs/        # Stitch 出力用ステージングエリア
│       ├── {page}.html
│       └── {page}.png
└── site/public/        # 本番ページ
    ├── index.html
    └── {page}.html

.stitch/metadata.json スキーマ

このファイルはすべての Stitch 識別子を保持し、将来の反復で編集またはバリアント用に参照できるようにします。プロジェクトを作成した後、または画面を生成した後に [prefix]:get_project を呼び出して設定します。

{
  "name": "projects/6139132077804554844",
  "projectId": "6139132077804554844",
  "title": "My App",
  "visibility": "PRIVATE",
  "createTime": "2026-03-04T23:11:25.514932Z",
  "updateTime": "2026-03-04T23:34:40.400007Z",
  "projectType": "PROJECT_DESIGN",
  "origin": "STITCH",
  "deviceType": "MOBILE",
  "designTheme": {
    "colorMode": "DARK",
    "font": "INTER",
    "roundness": "ROUND_EIGHT",
    "customColor": "#40baf7",
    "saturation": 3
  },
  "screens": {
    "index": {
      "id": "d7237c7d78f44befa4f60afb17c818c1",
      "sourceScreen": "projects/6139132077804554844/screens/d7237c7d78f44befa4f60afb17c818c1",
      "x": 0,
      "y": 0,
      "width": 390,
      "height": 1249
    },
    "about": {
      "id": "bf6a3fe5c75348e58cf21fc7a9ddeafb",
      "sourceScreen": "projects/6139132077804554844/screens/bf6a3fe5c75348e58cf21fc7a9ddeafb",
      "x": 549,
      "y": 0,
      "width": 390,
      "height": 1159
    }
  },
  "metadata": {
    "userRole": "OWNER"
  }
}

フィールド	説明
name	完全なリソース名（projects/{id}）
projectId	Stitch プロジェクト ID（create_project または get_project から）
title	人間が読める形式のプロジェクトタイトル
designTheme	デザインシステムトークン：カラーモード、フォント、丸みの強さ、カスタムカラー、彩度
deviceType	ターゲットデバイス：MOBILE、DESKTOP、TABLET
screens	ページ名 → スクリーンオブジェクトのマップ。各スクリーンには id、sourceScreen（MCP 呼び出し用のリソースパス）、canvas 位置（x、y）、寸法（width、height）が含まれます
metadata.userRole	プロジェクト上のユーザーの役割（OWNER、EDITOR、VIEWER）

オーケストレーション オプション

ループはさまざまなオーケストレーションレイヤーで駆動できます：

方法	仕組み
CI/CD	GitHub Actions が .stitch/next-prompt.md の変更をトリガー
人間参加型	開発者が各反復を確認してから続行
エージェントチェーン	1 つのエージェントが別のエージェント（例：Jules API）にディスパッチ
手動	開発者が同じリポジトリでエージェントを繰り返し実行

このスキルはオーケストレーション非依存です — パターンに焦点を当て、トリガーメカニズムではありません。

デザインシステム統合

このスキルは design-md スキルと最もよく機能します：

1. 初期セットアップ: 既存の Stitch スクリーンから design-md スキルを使用して .stitch/DESIGN.md を生成
2. 毎回の反復: セクション 6（「Stitch 生成用デザインシステムノート」）をバトンプロンプトにコピー
3. 一貫性: すべての生成されたページが同じビジュアル言語を共有

よくある落とし穴

• ❌ .stitch/next-prompt.md の更新を忘れる（ループが壊れる）
• ❌ サイトマップに既に存在するページを再作成する
• ❌ プロンプトに .stitch/DESIGN.md からのデザインシステムブロックを含めない
• ❌ プレースホルダーリンク（href="#"）のままにして、実際のナビゲーションをワイヤーしない
• ❌ 新しいプロジェクト作成後に .stitch/metadata.json を保持し忘れる

トラブルシューティング

問題	ソリューション
Stitch 生成が失敗する	プロンプトにデザインシステムブロックが含まれていることを確認
スタイルが不一致	.stitch/DESIGN.md が最新で、正しくコピーされていることを確認
ループが止まる	.stitch/next-prompt.md が有効なフロントマターで更新されたことを確認
ナビゲーションが壊れた	すべての内部リンクが正しい相対パスを使用していることを確認