需要多轮自主构建 Stitch 网站时…

适用于已接入 Stitch MCP 和项目，希望通过 `.stitch/next-prompt.md` 接力文件持续迭代生成并集成网站页面的场景。

适用场景

解决思路

1. 读取接力棒：解析 `.stitch/next-prompt.md`，从 YAML frontmatter 的 `page` 字段提取页面名，从 markdown 正文提取 prompt 内容。
2. 生成前查阅上下文：读取 `.stitch/SITE.md` 获取站点愿景、Stitch Project ID、已有页面 sitemap 和 roadmap；读取 `.stitch/DESIGN.md` 获取 Stitch prompt 所需视觉风格。
3. 在上下文中检查：查看 `.stitch/SITE.md` Section 4（Sitemap）避免重建已有页面；查看 Section 5（Roadmap）若有 backlog 则从中选任务；查看 Section 6（Creative Freedom）若 roadmap 为空则获取新页面想法。
4. 用 Stitch 生成前发现命名空间：运行 `list_tools` 找到 Stitch MCP 前缀。
5. 获取或创建项目：如果 `.stitch/metadata.json` 存在，使用其中的 `projectId`；否则调用 `[prefix]:create_project`，再调用 `[prefix]:get_project` 获取完整项目详情，并保存到 `.stitch/metadata.json`。
6. 每次生成 screen 后再次调用 `[prefix]:get_project`，更新 `.stitch/metadata.json` 的 `screens` map，为每个 screen 记录完整 metadata（id、sourceScreen、dimensions、canvas position）。
7. 生成 screen：调用 `[prefix]:generate_screen_from_text`，传入 `projectId`、来自 baton 的完整 prompt（包含 design system block）、`deviceType`: `DESKTOP`（或指定值）。
8. 获取资产前检查 `.stitch/designs/{page}.html` 和 `.stitch/designs/{page}.png` 是否已存在：若存在，询问用户是刷新 Stitch 项目中的设计还是复用本地文件，只有用户确认才重新下载；若不存在，则下载。
9. 下载 HTML：将 `htmlCode.downloadUrl` 下载并保存为 `.stitch/designs/{page}.html`。
10. 下载截图：在 `screenshot.downloadUrl` 后追加 `=w{width}`，其中 `{width}` 是 screen metadata 中的 `width` 值（Google CDN 默认提供低分辨率缩略图），保存为 `.stitch/designs/{page}.png`。
11. 集成到站点：把生成的 HTML 从 `.stitch/designs/{page}.html` 移动到 `site/public/{page}.html`。
12. 修正资源路径，使其相对于 public 文件夹。
13. 更新导航：查找已有占位链接（如 `href="#"`）并接到新页面；如果合适，把新页面加入全局导航。
14. 确保所有页面 header/footer 一致。
15. 可选视觉验证：如果 Chrome DevTools MCP Server 可用，运行 `list_tools` 检查是否存在 `chrome*` 工具；用 Bash 启动本地服务器（如 `npx serve site/public`）；调用 `[chrome_prefix]:navigate` 打开 `http://localhost:3000/{page}.html`；调用 `[chrome_prefix]:screenshot` 截取渲染页面；与 Stitch 截图 `.stitch/designs/{page}.png` 比较保真度；终止 dev server 进程。若 Chrome DevTools MCP 未安装，跳到 Step 5。
16. 更新站点文档：修改 `.stitch/SITE.md`，把新页面以 `[x]` 加入 Section 4（Sitemap）；从 Section 6（Creative Freedom）移除已采用的 idea；如果完成了 backlog 项，更新 Section 5（Roadmap）。
17. 准备下一轮接力棒（关键）：完成前必须更新 `.stitch/next-prompt.md` 以保持循环。
18. 决定下一页：检查 `.stitch/SITE.md` Section 5（Roadmap）中的待办项；若为空，从 Section 6（Creative Freedom）选择；或创造符合站点愿景的新页面。
19. 写入 baton：使用正确 YAML frontmatter，包含 `page` 字段，并在 markdown 正文中写入页面说明和从 `.stitch/DESIGN.md` 复制的 design system block。
20. 遵守 baton 关键规则：`page` 字段决定输出文件名；prompt 内容必须包含来自 `.stitch/DESIGN.md` 的 design system block；完成工作前必须更新 `.stitch/next-prompt.md` 以继续循环。
21. 维护文件结构：`.stitch/metadata.json` 持久保存 Stitch project 和 screen IDs；`.stitch/DESIGN.md` 保存视觉设计系统；`.stitch/SITE.md` 保存站点愿景、sitemap、roadmap；`.stitch/next-prompt.md` 是当前任务 baton；`.stitch/designs/{page}.html` 和 `.png` 是 Stitch 输出暂存区；生产页面放在 `site/public/`，包括 `index.html` 和 `{page}.html`。
22. 持久化 `.stitch/metadata.json` schema：通过 `[prefix]:get_project` 填充，包含 `name`（完整资源名 `projects/{id}`）、`projectId`、`title`、`visibility`、`createTime`、`updateTime`、`projectType`、`origin`、`deviceType`、`designTheme`（`colorMode`、`font`、`roundness`、`customColor`、`saturation`）、`screens`（页面名到 screen 对象，含 `id`、`sourceScreen`、`x`、`y`、`width`、`height`）、`metadata.userRole`（`OWNER`、`EDITOR`、`VIEWER`）。
23. 选择编排方式：可由 CI/CD（GitHub Actions 在 `.stitch/next-prompt.md` 变化时触发）、Human-in-loop（开发者每轮审查后继续）、Agent chains（一个 agent 分派给另一个，如 Jules API）或 Manual（开发者用同一 repo 反复运行 agent）驱动；该技能与编排无关，关注模式而非触发机制。
24. 集成设计系统：首次设置时用 `design-md` skill 从已有 Stitch screen 生成 `.stitch/DESIGN.md`；每次迭代把 Section 6（Design System Notes for Stitch Generation）复制到 baton prompt；确保所有生成页面共享同一视觉语言。
25. 避免常见陷阱：不要忘记更新 `.stitch/next-prompt.md`（会断循环）；不要重建 sitemap 中已有页面；不要在 prompt 中漏掉 `.stitch/DESIGN.md` 的 design system block；不要留下占位链接 `href="#"`，要接真实导航；创建新项目后不要忘记持久化 `.stitch/metadata.json`。
26. 故障排除：Stitch 生成失败时检查 prompt 是否包含 design system block；样式不一致时确保 `.stitch/DESIGN.md` 最新并正确复制；循环停滞时验证 `.stitch/next-prompt.md` 已更新且 frontmatter 有效；导航损坏时检查所有内部链接使用正确相对路径。

适用边界 · 注意事项

• 没有 Stitch MCP Server、Stitch 项目或相应访问权限时，不要使用该循环。
• 缺少 `.stitch/DESIGN.md`、`.stitch/SITE.md` 或无法持续更新 `.stitch/next-prompt.md` 时，循环会断裂或产出不一致。
• 只需一次性生成单个页面、不需要自主迭代或无法接受每轮维护 baton 文件时，不必使用该模式。