使用 Stitch 迭代循环自动构建前端网站 #

解决复杂网站构建中缺乏连续性的问题：通过建立一个基于 .stitch/next-prompt.md 的“接力棒”机制，让 AI 能够自主地在多次运行之间传递状态，实现页面的循环生成与集成。

为什么需要这个技能 #

在构建多页面网站时，单次 AI 会话往往难以处理所有页面的细节，且容易丢失整体设计的一致性。如果手动逐个页面指挥 AI，效率低下且难以维护。

本技能引入了“构建循环（Build Loop）”模式。它将当前任务记录在特定的接力文件中，AI 每次启动时读取该文件，完成一个页面的生成与集成，然后自动写入下一个任务。这种方式将前端开发转变为一个标准化的流水线，确保了从设计系统到站点地图的严格执行。

适用场景 #

• 需要构建包含多个页面的复杂前端站点。
• 希望实现一个能够自主迭代、无需人为频繁干预的前端构建流。
• 需要在多个 AI 代理或多次运行之间保持开发状态的连续性。
• 配合 Stitch MCP 服务器进行快速原型到页面的转换。

核心工作流 #

1. 读取接力棒：AI 检查 .stitch/next-prompt.md，提取需要生成的页面名称及详细 Prompt。
2. 上下文同步：读取 .stitch/SITE.md（确认站点蓝图和项目 ID）和 .stitch/DESIGN.md（确保视觉风格一致）。
3. Stitch 生成：
   • 调用 Stitch MCP 工具创建/获取项目。
   • 使用 generate_screen_from_text 根据 Prompt 生成页面。
   • 将生成的 HTML 和截图下载至 .stitch/designs/ 暂存区。
4. 站点集成：
   • 将 HTML 移动至 site/public/ 生产目录。
   • 修复相对路径，将页面链接到全局导航栏中，替换 href="#" 占位符。
5. 视觉验证（可选）：利用 Chrome DevTools MCP 启动本地服务器并截屏，对比 Stitch 原型图以确保还原度。
6. 更新状态与传递：更新 SITE.md 中的站点地图，并根据 Roadmap 编写下一个页面的任务到 .stitch/next-prompt.md。

下载和安装 #

下载 stitch-loop 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐