Stitch 构建循环

你是一名参与迭代式网站构建循环的自主前端构建Agent。你的目标是使用Stitch生成页面，将其集成到网站中，并为下一次迭代准备指令。

概述

构建循环模式通过“接力棒”系统实现持续、自主的网站开发。每次迭代包含以下步骤：

从接力棒文件（
```
next-prompt.md
```
）中读取当前任务
使用Stitch MCP工具生成页面
将页面集成到网站结构中
向下一个迭代的接力棒文件写入新任务

前提条件

必需项：

可访问Stitch MCP Server
一个Stitch项目（已存在或即将创建）
一个
```
DESIGN.md
```
文件（如果需要，可使用
```
design-md
```
技能生成）
一个记录网站愿景和路线图的
```
SITE.md
```
文件

可选项：

Chrome DevTools MCP Server — 支持对生成的页面进行视觉验证

接力棒系统

next-prompt.md

文件充当迭代之间的接力棒：

markdown

---
page: about
---
一个介绍jules.top追踪机制的页面。

**设计系统（必需）：**
[从DESIGN.md第6节复制]

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

关键规则：

YAML前置元数据中的
```
page
```
字段决定输出文件名
提示内容必须包含
```
DESIGN.md
```
中的设计系统块
完成工作前必须更新此文件以维持循环运行

执行协议

步骤1：读取接力棒

解析

next-prompt.md

以提取：

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

步骤2：查阅上下文文件

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

文件	用途
`SITE.md`	网站愿景、Stitch项目ID、现有页面（站点地图）、路线图
`DESIGN.md`	Stitch提示所需的视觉样式

重要检查：

第4节（站点地图）—— 不要重新创建已存在的页面
第5节（路线图）—— 如果有积压任务，从中选择
第6节（创意空间）—— 如果路线图为空，可从中获取新页面的想法

步骤3：使用Stitch生成页面

使用Stitch MCP工具生成页面：

发现命名空间：运行
```
list_tools
```
以找到Stitch MCP的前缀
获取或创建项目：
- 如果
```
stitch.json
```
  已存在，使用其中的
```
projectId
```
- 否则，调用
```
[prefix]:create_project
```
  并将ID保存到
```
stitch.json
```
生成页面：调用
```
[prefix]:generate_screen_from_text
```
，参数包括：
- ```
projectId
```
  ：项目ID
- ```
prompt
```
  ：接力棒中的完整提示（包含设计系统块）
- ```
deviceType
```
  ：
```
DESKTOP
```
  （或按指定值）

获取资源：调用

[prefix]:get_screen

以获取：

```
htmlCode.downloadUrl
```
—— 下载并保存为
```
queue/{page}.html
```
```
screenshot.downloadUrl
```
—— 下载并保存为
```
queue/{page}.png
```

步骤4：集成到网站中

将生成的HTML从

queue/{page}.html

移动到

site/public/{page}.html

修正所有资源路径，使其相对于public文件夹
更新导航：
- 找到现有的占位符链接（例如
```
href="#"
```
  ）并将其连接到新页面
- 如有必要，将新页面添加到全局导航中
确保所有页面的页眉/页脚保持一致

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

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

检查可用性：运行
```
list_tools
```
查看是否存在
```
chrome*
```
工具
启动开发服务器：使用Bash启动本地服务器（例如
```
npx serve site/public
```
）

导航到页面：调用

[chrome_prefix]:navigate

打开

http://localhost:3000/{page}.html

捕获截图：调用
```
[chrome_prefix]:screenshot
```
捕获渲染后的页面
视觉对比：将其与Stitch生成的截图（
```
queue/{page}.png
```
）进行对比，确保一致性
停止服务器：终止开发服务器进程

注意： 此步骤为可选操作。如果未安装Chrome DevTools MCP，请跳至步骤5。

步骤5：更新网站文档

修改

SITE.md

：

将新页面添加到第4节（站点地图），并标记为
```
[x]
```
从第6节（创意空间）中移除已使用的想法
如果完成了积压任务，更新第5节（路线图）

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

完成工作前必须更新
next-prompt.md
，这是维持循环运行的关键。

确定下一个页面：
- 查看
```
SITE.md
```
  第5节（路线图）中的待处理项
- 如果为空，从第6节（创意空间）中选择
- 或者根据网站愿景创造新的内容
编写接力棒，确保包含正确的YAML前置元数据：

markdown

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

**设计系统（必需）：**
[从DESIGN.md中复制完整的设计系统块]

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

文件结构参考

project/
├── next-prompt.md      # 接力棒 — 当前任务
├── stitch.json         # Stitch项目ID（请妥善保存！）
├── DESIGN.md           # 视觉设计系统（来自design-md技能）
├── SITE.md             # 网站愿景、站点地图、路线图
├── queue/              # Stitch输出的暂存区
│   ├── {page}.html
│   └── {page}.png
└── site/public/        # 生产环境页面
    ├── index.html
    └── {page}.html

编排选项

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

方法	工作原理
CI/CD	GitHub Actions在 `next-prompt.md` 变更时触发
人在环中	开发者在继续前审核每次迭代
Agent链	一个Agent调度到另一个Agent（例如Jules API）
手动	开发者在同一个仓库中重复运行Agent

该技能与编排方式无关——重点关注模式，而非触发机制。

设计系统集成

此技能与

design-md

技能配合使用效果最佳：

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

常见陷阱

❌ 忘记更新
```
next-prompt.md
```
（会打破循环）
❌ 重新创建站点地图中已存在的页面
❌ 提示中未包含设计系统块
❌ 保留占位符链接（
```
href="#"
```
）而未连接到真实页面
❌ 创建新项目后未保存
```
stitch.json
```

故障排除

问题	解决方案
Stitch生成失败	检查提示中是否包含设计系统块
样式不一致	确保DESIGN.md是最新的且已正确复制
循环停滞	验证 `next-prompt.md` 是否已更新且包含有效的前置元数据
导航失效	检查所有内部链接是否使用正确的相对路径

stitch-loop

NPX安装

标签

SKILL.md 内容（中文）