SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场stitch-loop

stitch-loop

前端与建站

查看项目

更新于 10-13 21:09

技能介绍

用途

stitch-loop 是一个面向 AI 智能体的自主前端构建循环技能，用于以迭代方式持续构建网站。它让智能体作为自主前端构建者参与一个站点构建循环：生成页面、集成进站点、并为下一轮迭代准备指令。其核心是“Build Loop”模式，通过“接力棒”（baton）系统实现持续、自主的网站开发。

主要能力

每一轮迭代执行以下动作：

  • 从接力棒文件（.stitch/next-prompt.md）读取当前任务；
  • 使用 Stitch MCP 工具生成页面；
  • 将页面集成到站点结构中；
  • 将下一个任务写入接力棒文件，供下一轮迭代使用。

前置条件

必备条件：

  • 可访问 Stitch MCP Server；
  • 一个 Stitch 项目（已有或将创建）；
  • 一个 .stitch/DESIGN.md 文件（如需要，可使用 design-md 技能生成）；
  • 一个 .stitch/SITE.md 文件，记录站点愿景与路线图。

可选：

  • Chrome DevTools MCP Server —— 用于对生成页面进行视觉验证。

接力棒系统

.stitch/next-prompt.md 文件在各轮迭代之间充当接力棒。其内容包括 YAML frontmatter 中的 page 字段（决定输出文件名）、页面提示内容，以及要求从 .stitch/DESIGN.md 第 6 节复制的设计系统块。关键规则：必须在完成工作前更新该文件，以维持循环。

执行协议

第 1 步：读取接力棒。 解析 .stitch/next-prompt.md，提取 page frontmatter 字段中的页面名称，以及 markdown 正文中的提示内容。

第 2 步：查阅上下文文件。 生成前先读取：.stitch/SITE.md（站点愿景、Stitch Project ID、已有页面/站点地图、路线图）和 .stitch/DESIGN.md（Stitch 提示所需的视觉风格）。重要检查：第 4 节（站点地图）——不要重建已存在的页面；第 5 节（路线图）——如有待办，从中选取任务；第 6 节（创作自由）——如路线图为空，从中获取新页面创意。

第 3 步：用 Stitch 生成。 使用 Stitch MCP 工具生成页面：运行 list_tools 发现命名空间，找到 Stitch MCP 前缀；获取或创建项目——如 .stitch/metadata.json 存在则使用其中的 projectId，否则调用 [prefix]:create_project，再调用 [prefix]:get_project 获取完整项目详情并保存到 .stitch/metadata.json；每次生成屏幕后再次调用 [prefix]:get_project，用每个屏幕的完整元数据（id、sourceScreen、尺寸、画布位置）更新 metadata.json 中的 screens 映射；调用 [prefix]:generate_screen_from_text 生成屏幕（参数包括 projectId、来自接力棒的完整提示、deviceType，如 DESKTOP）；在下载前检查 .stitch/designs/{page}.html 和 .stitch/designs/{page}.png 是否已存在，如存在则询问用户是刷新还是复用本地文件，仅确认后重新下载，如不存在则下载 htmlCode.downloadUrl 保存为 .stitch/designs/{page}.html，下载 screenshot.downloadUrl 时需在 URL 后追加 =w{width}（宽度取自屏幕元数据，因 Google CDN 默认提供低分辨率缩略图），保存为 .stitch/designs/{page}.png。

第 4 步：集成到站点。 将生成的 HTML 从 .stitch/designs/{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 截图（.stitch/designs/{page}.png）对比保真度；终止开发服务器进程。如未安装 Chrome DevTools MCP，跳过至第 5 步。

第 5 步：更新站点文档。 修改 .stitch/SITE.md：将新页面以 [x] 加入第 4 节（站点地图）；从第 6 节（创作自由）移除已采用的创意；如完成路线图条目则更新第 5 节（路线图）。

第 6 步：准备下一个接力棒（关键）。 必须在完成前更新 .stitch/next-prompt.md，以保持循环存活。决定下一页：查看 .stitch/SITE.md 第 5 节（路线图）的待办项；如为空，从第 6 节（创作自由）选取；或自行发明符合站点愿景的新内容。用正确的 YAML frontmatter 写入接力棒，提示中需包含从 .stitch/DESIGN.md 复制的完整设计系统块及页面结构。

文件结构参考

project/ 下包含：.stitch/metadata.json（Stitch 项目与屏幕 ID，需持久化）、.stitch/DESIGN.md（视觉设计系统，来自 design-md 技能）、.stitch/SITE.md（站点愿景、站点地图、路线图）、.stitch/next-prompt.md（接力棒，当前任务）、.stitch/designs/（Stitch 输出暂存区，含 {page}.html 与 {page}.png）；以及 site/public/（生产页面，含 index.html 与 {page}.html）。

metadata.json 结构

该文件持久化所有 Stitch 标识符，以便后续迭代引用它们进行编辑或变体。通过在创建项目或生成屏幕后调用 [prefix]:get_project 来填充。字段包括：name（完整资源名 projects/{id}）、projectId（来自 create_project 或 get_project）、title（可读项目标题）、designTheme（设计系统令牌：colorMode、font、roundness、customColor、saturation）、deviceType（目标设备：MOBILE、DESKTOP、TABLET）、screens（页面名 → 屏幕对象映射，含 id、sourceScreen、画布位置 x/y、尺寸 width/height）、metadata.userRole（用户角色：OWNER、EDITOR、VIEWER）。

编排方式

该循环可由不同编排层驱动：CI/CD（GitHub Actions 在 .stitch/next-prompt.md 变更时触发）、人在环（开发者在每轮迭代后审查再继续）、智能体链（一个智能体派发给另一个，如 Jules API）、手动（开发者对同一仓库反复运行智能体）。该技能与编排方式无关——专注于模式本身而非触发机制。

设计系统集成

该技能与 design-md 技能配合最佳：首次设置时用 design-md 技能从现有 Stitch 屏幕生成 .stitch/DESIGN.md；每轮迭代将第 6 节（“Design System Notes for Stitch Generation”）复制进接力棒提示；一致性——所有生成页面共享同一视觉语言。

常见陷阱

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

故障排查

  • Stitch 生成失败：检查提示是否包含设计系统块；
  • 样式不一致：确保 .stitch/DESIGN.md 为最新且复制正确；
  • 循环停滞：确认 .stitch/next-prompt.md 已更新且 frontmatter 有效；
  • 导航损坏：检查所有内部链接使用正确的相对路径。