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

stitch-loop

前端与建站

查看项目

更新于 10-16 02:04

技能介绍

用途

stitch-loop 是一个自主前端构建循环技能，用于让智能体以迭代方式使用 Stitch 搭建网站。它采用“接力棒（baton）”模式，在多次运行或多个智能体之间传递任务：每一轮读取下一个提示、生成或集成一个页面，并交接下一项任务。适用于需要纪律化自主循环的多步骤前端站点构建。

主要能力

  • 通过接力棒文件 .stitch/next-prompt.md 在迭代之间传递当前任务。
  • 使用 Stitch MCP 工具生成页面，并将页面集成到站点结构中。
  • 维护站点文档：更新 .stitch/SITE.md 中的站点地图、路线图和创意自由区。
  • 持久化 Stitch 项目与屏幕标识到 .stitch/metadata.json，供后续编辑或变体引用。
  • 可选使用 Chrome DevTools MCP Server 对生成页面进行视觉验证。
  • 与 design-md 技能配合，保持所有生成页面共享同一视觉语言。

使用方式

前置条件

必需：

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

可选：

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

接力棒系统

.stitch/next-prompt.md 文件充当迭代之间的接力棒，包含 YAML frontmatter 中的 page 字段（决定输出文件名）和 markdown 正文中的提示内容。提示内容必须包含来自 .stitch/DESIGN.md 的设计系统块。完成工作前必须更新此文件以延续循环。

执行协议

  1. 读取接力棒：解析 .stitch/next-prompt.md，提取 page 字段和提示正文。
  2. 查阅上下文文件：读取 .stitch/SITE.md（站点愿景、Stitch 项目 ID、现有页面、路线图）和 .stitch/DESIGN.md（所需视觉风格）。注意不要重建已存在的页面；若路线图有积压任务则从中选取，否则从创意自由区获取新页面想法。
  3. 使用 Stitch 生成：运行 list_tools 发现 Stitch MCP 前缀；若 .stitch/metadata.json 存在则使用其中的 projectId，否则调用 [prefix]:create_project 创建项目，再调用 [prefix]:get_project 获取完整项目详情并保存到 .stitch/metadata.json；调用 [prefix]:generate_screen_from_text 生成屏幕（传入 projectId、完整提示、deviceType）；生成后再次调用 [prefix]:get_project 更新 metadata.json 中的 screens 映射；下载资源前检查 .stitch/designs/{page}.html 和 .png 是否已存在，若存在则询问用户是否刷新，若不存在则下载 htmlCode.downloadUrl 和 screenshot.downloadUrl（截图 URL 需追加 =w{width} 以获取合适分辨率）。
  4. 集成到站点：将生成的 HTML 从 .stitch/designs/{page}.html 移动到 site/public/{page}.html，修正资源路径为相对于 public 文件夹，更新导航（将占位链接 href="#" 接到新页面，必要时加入全局导航，确保页眉页脚一致）。
  5. 视觉验证（可选）：若 Chrome DevTools MCP 可用，运行 list_tools 检查 chrome* 工具，启动本地服务器（如 npx serve site/public），导航到 http://localhost:3000/{page}.html，截图并与 Stitch 截图对比，最后停止服务器。
  6. 更新站点文档：在 .stitch/SITE.md 第 4 节（站点地图）添加新页面并标记 [x]，从第 6 节移除已使用的想法，若完成积压项则更新第 5 节（路线图）。
  7. 准备下一个接力棒（关键）：完成前必须更新 .stitch/next-prompt.md。检查 SITE.md 第 5 节待办项，若为空则从第 6 节选取或自行构思符合站点愿景的新页面，写入带 YAML frontmatter 的接力棒内容。

文件结构参考

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

metadata.json 结构

该文件持久化所有 Stitch 标识符，以便未来迭代引用它们进行编辑或变体。创建项目或生成屏幕后调用 [prefix]:get_project 填充。字段包括：name（完整资源名 projects/{id}）、projectId、title、designTheme（颜色模式、字体、圆角、自定义颜色、饱和度）、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 以基于接力棒的循环跨运行或跨智能体迭代构建网站。
  • 每一轮读取下一个提示、生成或集成页面并交接下一任务。
  • 需要纪律化自主循环进行多步骤前端站点构建。

限制

  • 仅在任务明确匹配上述范围时使用本技能。
  • 不要将输出视为环境特定验证、测试或专家审查的替代品。
  • 若缺少必需输入、权限、安全边界或成功标准，应停止并请求澄清。
  • 常见陷阱：忘记更新 .stitch/next-prompt.md（中断循环）；重建站点地图中已存在的页面；提示中未包含 .stitch/DESIGN.md 的设计系统块；留下占位链接 href="#" 而非接入真实导航；创建新项目后忘记持久化 .stitch/metadata.json。
  • 故障排查：Stitch 生成失败时检查提示是否包含设计系统块；样式不一致时确保 .stitch/DESIGN.md 最新且正确复制；循环停滞时验证 .stitch/next-prompt.md 已用有效 frontmatter 更新；导航损坏时检查所有内部链接使用正确的相对路径。