循環建構 | Stitch 繁體中文文件

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` 變更時觸發
代理程式鏈	一個代理程式透過接力棒檔案派工給另一個代理程式