---

name: stitch-loop description: 教代理使用 Stitch 通过自主接力循环模式迭代构建网站 allowed-tools:

• "stitch*:*"
• "chrome*:*"
• "Read"
• "Write"
• "Bash" risk: unknown source: community

---

Stitch 构建循环

你是参与迭代网站构建循环的自主前端构建器。你的目标是使用 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
---
A page describing how jules.top tracking works.

**DESIGN SYSTEM (REQUIRED):**
[Copy from .stitch/DESIGN.md Section 6]

**Page Structure:**
1. Header with navigation
2. Explanation of tracking methodology
3. Footer with links

关键规则：

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

执行协议

步骤 1：读取接力棒

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

• 从 page frontmatter 字段获取页面名称
• 从 markdown 正文获取提示内容

步骤 2：查阅上下文文件

生成前，读取这些文件：

| 文件 | 用途 | |------|------| | .stitch/SITE.md | 站点愿景、Stitch 项目 ID、现有页面（站点地图）、路线图 | | .stitch/DESIGN.md | Stitch 提示所需的视觉风格 |

重要检查：

• 第 4 节（站点地图）— 不要重新创建已存在的页面
• 第 5 节（路线图）— 如果有积压任务从这里选取
• 第 6 节（创意自由）— 如果路线图为空则提供新页面想法

步骤 3：使用 Stitch 生成

使用 Stitch MCP 工具生成页面：

1. 发现命名空间：运行 list_tools 找到 Stitch MCP 前缀
2. 获取或创建项目：
   • 如果 .stitch/metadata.json 存在，使用其中的 projectId
   • 否则调用 [prefix]:create_project，然后调用 [prefix]:get_project 获取完整项目详情，保存到 .stitch/metadata.json
3. 生成屏幕：调用 [prefix]:generate_screen_from_prompt
4. 导出 HTML：调用 [prefix]:export_screen_html

步骤 4：集成到站点

将导出的 HTML 保存到站点目录中适当的位置。

步骤 5：更新接力棒

写入 .stitch/next-prompt.md 为下一次迭代准备任务。