ループで構築する

stitch-loop スキルは、ウェブサイト全体をページごとに自動生成します。ビジョンとデザインシステムを最初に定義します。残りはスキルが処理します。各ページの生成、ナビゲーションの配線、次のタスクのキューイングまで行います。

バトンループの仕組み

.stitch/next-prompt.md にあるリレーバトンファイルが、生成する現在のページを定義します。各ページを生成した後、スキルはバトンを次のタスクで更新します。これにより、自律的に継続するビルドサイクルが生まれます。

スキルが管理する状態ファイル：

ファイル	目的
`.stitch/next-prompt.md`	現在のタスク（バトン）
`.stitch/SITE.md`	サイトのビジョン、サイトマップ、ロードマップ
`.stitch/DESIGN.md`	視覚的一貫性のためのデザインシステム
`.stitch/metadata.json`	Stitch プロジェクトと画面 ID

ステップ 1：サイトのビジョンを定義する

サイトを説明する .stitch/SITE.md を作成します：

# Site: Artisan Coffee Co.

## Vision
A 5-page portfolio website for a specialty coffee roaster.

## Sitemap
- [ ] index — Landing page with hero and featured blends
- [ ] about — Origin story and roasting philosophy
- [ ] menu — Coffee menu with categories and pricing
- [ ] locations — Store locations with map
- [ ] contact — Contact form and hours

ステップ 2：デザインシステムを確立する

ページを生成する前に視覚的一貫性を設定します。推奨される方法は、プレミアムデザインシステムを生成することです：

PROMPT

Generate a DESIGN.md for an artisanal coffee brand using the taste-design skill. Warm tones, editorial typography, generous whitespace.

または、既存のコードベースから抽出します：

PROMPT

Extract the design system from ./existing-site/src into .stitch/DESIGN.md

ステップ 3：最初のバトンを書く

最初のページ用に .stitch/next-prompt.md を作成します：

---
page: index
---
A warm, editorial landing page for Artisan Coffee Co.

**DESIGN SYSTEM (REQUIRED):**
[Paste from .stitch/DESIGN.md]

**Page Structure:**
1. Header with logo and navigation links to about, menu, locations, contact
2. Hero section with full-width image, headline, and primary CTA
3. Featured blends section with three product cards
4. Testimonial section with customer quote
5. Footer with address, social links, and copyright

ステップ 4：ループを実行する

PROMPT

Read .stitch/next-prompt.md and execute the stitch-loop build cycle.

スキルは Stitch 経由で画面を生成し、HTML とスクリーンショットをダウンロードし、HTML を site/public/ に移動し、サイトマップを更新し、次のバトンを書き込みます。以降の各ページで同じプロンプトを繰り返してください。バトンがサイクルを前進させます。

ナビゲーションと一貫性

スキルはページ間の内部リンクを自動的に接続し、新しいページをグローバルナビゲーションに追加し、一貫したヘッダーとフッターを維持します。

数ページ後にナビゲーションがずれた場合：

PROMPT

Update all page headers to include links to: index, about, menu, locations, contact.

より良い結果を得るためのヒント

再生成より編集を。 ページがほぼ正しいが完全ではない場合、最初からやり直すよりも的を絞った編集の方が多くのコンテキストを保てます。
デザインシステムを確認する。 視覚的なずれは通常、DESIGN.md がプロンプトに含まれていなかったことを意味します。
スクリーンショットを比較する。 複数ページを生成した後、エージェントに視覚的一貫性を比較するよう依頼します。

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

方法	仕組み
手動	同じプロンプトでエージェントを繰り返し実行する
ヒューマンインザループ	続行する前に各ページをレビューする
CI/CD	`.stitch/next-prompt.md` の変更でトリガーする
エージェントチェーン	1 つのエージェントがバトンファイル経由で別のエージェントにディスパッチする