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
---
一个描述 jules.top 追踪工作原理的页面。

**设计系统（必需）：**
[从 .stitch/DESIGN.md 的第六部分复制]

**页面结构：**
1. 带有导航的页眉
2. 追踪方法说明
3. 带有链接的页脚

关键规则：

• YAML 前置元数据中的 page 字段决定了输出文件名
• 提示内容必须包含来自 .stitch/DESIGN.md 的设计系统块
• 在完成工作前，您必须更新此文件以继续循环

执行协议

步骤 1：读取接力棒

解析 .stitch/next-prompt.md 以提取：

• 来自 page 前置元数据字段的页面名称
• 来自 Markdown 正文的提示内容

步骤 2：查阅上下文文件

在生成之前，请阅读以下文件：

重要检查：

• 第 4 部分（站点地图）— 不要重新创建已存在的页面
• 第 5 部分（路线图）— 如果存在待办事项，从中选取任务
• 第 6 部分（创意自由）— 如果路线图为空，这里提供了新页面的创意

步骤 3：使用 Stitch 生成

使用 Stitch MCP 工具生成页面：

1. 发现命名空间：运行 list_tools 找到 Stitch MCP 前缀
2. 获取或创建项目：
   • 如果 .stitch/metadata.json 存在，使用其中的 projectId
   • 否则，调用 [前缀]:create_project，然后调用 [前缀]:get_project 检索完整的项目详情，并将它们保存到 .stitch/metadata.json（参见下面的模式）
   • 每次生成屏幕后，再次调用 [前缀]:get_project 并用每个屏幕的完整元数据（id、sourceScreen、尺寸、画布位置）更新 .stitch/metadata.json 中的 screens 映射
3. 生成屏幕：调用 [前缀]: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 — 在下载前，将 =w{width} 附加到 URL 末尾，其中 {width} 是屏幕元数据中的 width 值（Google CDN 默认提供低分辨率缩略图）。保存为 .stitch/designs/{page}.png

步骤 4：集成到站点

1. 将生成的 HTML 从 .stitch/designs/{page}.html 移动到 site/public/{page}.html
2. 修复所有资源路径，使其相对于公共文件夹
3. 更新导航：
   • 找到现有的占位链接（例如 href="#"）并将它们链接到新页面
   • 如果合适，将新页面添加到全局导航
4. 确保所有页面的页眉/页脚一致

步骤 4.5：可视化验证（可选）

如果 Chrome DevTools MCP 服务器可用，验证生成的页面：

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，请跳至步骤 5。

步骤 5：更新站点文档

修改 .stitch/SITE.md：

• 将新页面添加到第 4 部分（站点地图），并标记为 [x]
• 从第 6 部分（创意自由）中移除您已使用的任何创意
• 如果您完成了待办事项项，更新第 5 部分（路线图）

步骤 6：准备下一个接力棒（关键）

在完成前，您必须更新 .stitch/next-prompt.md。 这能保持循环持续运行。

1. 决定下一个页面：
   • 检查 .stitch/SITE.md 的第 5 部分（路线图）中是否有待处理项
   • 如果为空，从第 6 部分（创意自由）中挑选
   • 或者构思符合站点愿景的新内容
2. 写入接力棒，包含正确的 YAML 前置元数据：

---
page: achievements
---
一个展示开发者徽章和里程碑的成就页面。

**设计系统（必需）：**
[从 .stitch/DESIGN.md 复制整个设计系统块]

**页面结构：**
1. 带有标题和导航的页眉
2. 展示已解锁/锁定状态的徽章网格
3. 用于里程碑追踪的进度条

文件结构参考

项目目录/
├── .stitch/
│   ├── metadata.json   # Stitch 项目和屏幕 ID（请持久化此文件！）
│   ├── DESIGN.md       # 视觉设计系统（来自 design-md 技能）
│   ├── SITE.md         # 站点愿景、站点地图、路线图
│   ├── next-prompt.md  # 接力棒 — 当前任务
│   └── designs/        # Stitch 输出的暂存区
│       ├── {page}.html
│       └── {page}.png
└── site/public/        # 生产环境页面
    ├── index.html
    └── {page}.html

.stitch/metadata.json 模式

此文件持久化所有 Stitch 标识符，以便未来的迭代可以引用它们进行编辑或创建变体。在创建项目或生成屏幕后，通过调用 [前缀]:get_project 来填充此文件。

{
  "name": "projects/6139132077804554844",
  "projectId": "6139132077804554844",
  "title": "我的应用",
  "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"
  }
}

编排选项

循环可由不同的编排层驱动：

该技能与编排方式无关 — 专注于模式本身，而非触发机制。

设计系统集成

此技能与 design-md 技能配合最佳：

1. 首次设置：使用 design-md 技能从现有的 Stitch 屏幕生成 .stitch/DESIGN.md
2. 每次迭代：将第 6 部分（“用于 Stitch 生成的设计系统说明”）复制到您的接力棒提示中
3. 一致性：所有生成的页面将共享相同的视觉语言

常见陷阱

• ❌ 忘记更新 .stitch/next-prompt.md（中断循环）
• ❌ 重新创建站点地图中已存在的页面
• ❌ 提示中未包含来自 .stitch/DESIGN.md 的设计系统块
• ❌ 保留占位链接 (href="#")，而未连接真实的导航
• ❌ 创建新项目后忘记持久化 .stitch/metadata.json

故障排除