stitch-loop

Stitch ビルドループ

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

概要

ビルドループのパターンでは、「バトン」システムを通じて、継続的かつ自律的にウェブサイトを開発できます。各反復では、次の処理を行います。

1. バトンファイル（.stitch/next-prompt.md）から現在のタスクを読み取る
2. Stitch MCP ツールを使ってページを生成する
3. ページをサイト構造に統合する
4. 次の反復に向けて、次のタスクをバトンファイルに書き込む

前提条件

必須：

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

任意：

• Chrome DevTools MCP サーバー — 生成したページのビジュアル検証が可能になります

バトンシステム

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

---
page: about
---
A page describing how jules.top tracking works.

**DESIGN SYSTEM (REQUIRED):**
[Copy from .stitch/DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links

重要なルール：

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

実行プロトコル

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

.stitch/next-prompt.md を解析して、以下を抽出します。

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

ステップ 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 を呼び出し、各画面のメタデータ全体（id、sourceScreen、dimensions、キャンバス上の位置）で .stitch/metadata.json の screens マップを更新します
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. すべてのページでヘッダーとフッターに一貫性があることを確認します

Step 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 がインストールされていない場合は、Step 5 に進んでください。

Step 5: サイトのドキュメントを更新する

.stitch/SITE.md を編集します。

• Section 4（サイトマップ）に新しいページを [x] 付きで追加します
• 使用したアイデアを Section 6（創造の自由）から削除します
• バックログ項目を完了した場合は、Section 5（ロードマップ）を更新します

Step 6: 次のバトンを準備する（重要）

完了する前に、必ず .stitch/next-prompt.md を更新してください。 これによりループが継続します。

1. 次のページを決める：
   • .stitch/SITE.md の Section 5（ロードマップ）で保留中の項目を確認します
   • 空の場合は、Section 6（創造の自由）から選びます
   • または、サイトのビジョンに合う新しいものを考案します
2. 適切な YAML フロントマターを付けてバトンを書く：

---
page: achievements
---
A competitive achievements page showing developer badges and milestones.

**DESIGN SYSTEM (REQUIRED):**
[Copy the entire design system block from .stitch/DESIGN.md]

**Page Structure:**
1. Header with title and navigation
2. Badge grid showing unlocked/locked states
3. Progress bars for milestone tracking

ファイル構成の参照

project/
├── .stitch/
│   ├── metadata.json   # Stitch project & screen IDs (persist this!)
│   ├── DESIGN.md       # Visual design system (from design-md skill)
│   ├── SITE.md         # Site vision, sitemap, roadmap
│   ├── next-prompt.md  # The baton — current task
│   └── designs/        # Staging area for Stitch output
│       ├── {page}.html
│       └── {page}.png
└── site/public/        # Production pages
    ├── 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 呼び出し用のリソースパス）、キャンバス上の位置（x、y）、寸法（width、height）が含まれます
metadata.userRole	プロジェクトにおけるユーザーの役割（OWNER、EDITOR、VIEWER）

オーケストレーションの選択肢

このループは、さまざまなオーケストレーション層を使って進行できます。

方法	仕組み
CI/CD	GitHub Actions が .stitch/next-prompt.md の変更をトリガーに実行されます
Human-in-loop	開発者が各反復を確認してから続行します
Agent chains	あるエージェントが別のエージェントに処理を引き継ぎます（例：Jules API）
Manual	開発者が同じリポジトリでエージェントを繰り返し実行します

このスキルはオーケストレーション方式に依存しません。トリガーの仕組みではなく、パターンに注目してください。

デザインシステムとの統合

このスキルは design-md スキルと組み合わせると最も効果的です。

1. 初回セットアップ：既存の Stitch 画面をもとに、design-md スキルを使って .stitch/DESIGN.md を生成します
2. 各反復：Section 6（「Stitch 生成用のデザインシステムに関するメモ」）をバトンのプロンプトにコピーします
3. 一貫性：生成されたすべてのページで、同じビジュアル言語を共有できます

よくある落とし穴

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

トラブルシューティング

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