循环构建 | 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` 发生变化时触发
智能体链	一个智能体通过接力棒文件调度另一个智能体