stitch-loop - SKILL

---

name: stitch-loop
description: Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern
allowed-tools:

• “stitch*😗”
• “chrome*😗”
• “Read”
• “Write”
• “Bash”
  risk: critical
  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以提取：

• 来自pagefrontmatter 字段的页面名称
• 来自 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（见下方模式）
   • 生成每个屏幕后，再次调用[prefix]:get_project，用每个屏幕的完整元数据（id、sourceScreen、dimensions、canvas position）更新.stitch/metadata.json中的screens映射
3. 生成屏幕：调用[prefix]: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— 下载前在 URL 后追加=w{width}，其中{width}是屏幕元数据中的width值（Google CDN 默认提供低分辨率缩略图）。保存为.stitch/designs/{page}.png

步骤 4：集成到网站

1. 将生成的 HTML 从.stitch/designs/{page}.html移动到site/public/{page}.html
2. 修复任何资源路径，使其相对于 public 文件夹
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 frontmatter 写入接力棒：

--- page: achievements --- A competitive achievements page showing developer badges and milestones. **DESIGN SYSTEM (REQUIRED):** [Copy the entire design system block from .stitch/DESIGN.md] **Page Structure:** 1. Header with title and navigation 2. Badge grid showing unlocked/locked states 3. Progress bars for milestone tracking

文件结构参考

project/ ├── .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 标识符，以便未来的迭代可以引用它们进行编辑或变体。创建项目或生成屏幕后，通过调用[prefix]:get_project填充它。

{"name":"projects/6139132077804554844","projectId":"6139132077804554844","title":"My App","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"}}

字段	描述
name	完整资源名称（projects/{id}）
projectId	Stitch 项目 ID（来自create_project或get_project）
title	人类可读的项目标题
designTheme	设计系统令牌：颜色模式、字体、圆角、自定义颜色、饱和度
deviceType	目标设备：MOBILE、DESKTOP、TABLET
screens	页面名称 → 屏幕对象的映射。每个屏幕包含id、sourceScreen（MCP 调用的资源路径）、画布位置（x、y）和尺寸（width、height）
metadata.userRole	用户在项目上的角色（OWNER、EDITOR、VIEWER）

编排选项

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

方法	工作原理
CI/CD	GitHub Actions 在.stitch/next-prompt.md更改时触发
人在环中	开发者在每次迭代后审查再继续
代理链	一个代理分派给另一个（例如 Jules API）
手动	开发者使用同一仓库重复运行代理

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

设计系统集成

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

1. 首次设置：使用design-md技能从现有的 Stitch 屏幕生成.stitch/DESIGN.md
2. 每次迭代：将第 6 节（“Design System Notes for Stitch Generation”）复制到你的接力棒提示中
3. 一致性：所有生成的页面将共享相同的视觉语言

常见陷阱

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

故障排查

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

限制

• 仅当任务明确匹配上述范围时使用本技能。
• 不要将输出视为针对特定环境验证、测试或专家审查的替代品。
• 如果缺少所需输入、权限、安全边界或成功标准，请停下来并要求澄清。