stitch-skills stitch-loop完全指南：一个提示词构建多页网站

stitch-skills stitch-loop完全指南：一个提示词构建多页网站

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills

stitch-skills 是一套专为 Google Stitch 打造的开源 Agent Skills 技能库，其中的stitch-loop技能可以教会 AI 编程助手"接力式"地自主构建网站——你只需给出一个初始提示词，Agent 就会循环生成页面、整合进站点结构，并自动写好下一轮的构建任务，最终交付一个完整的多页网站。它兼容 Claude Code、Cursor、Gemini CLI、Antigravity 等主流 AI 编码工具。🚀

什么是 stitch-loop：让 AI 自主建站的"接力棒"机制

传统做法是"一句话生成一个页面"，但多页网站需要几十次提示词。stitch-loop 的核心创新是接力棒（Baton）机制：Agent 每完成一轮迭代，会把"下一个要做什么"写进接力棒文件，下一轮 Agent 读取接力棒继续干活，形成自驱动的闭环。

每一轮迭代固定执行四件事：

1. 从接力棒文件.stitch/next-prompt.md读取当前任务
2. 调用 Stitch MCP 工具生成页面
3. 把页面整合进网站结构（导航、页头页脚、资源路径）
4. 写下下一轮任务，把接力棒传下去

安装配置：三步启用 stitch-loop

前提条件：已配置好 Stitch MCP 服务器（需在 Stitch 官方完成注册和环境变量配置），并在你的 AI Agent 中启用工具调用能力。

第 1 步：一键安装技能

npx skills add google-labs-code/stitch-skills --skill stitch-loop --global

第 2 步：（可选）克隆仓库查看文档

如果想阅读完整的技能定义和示例文件，可克隆仓库到本地：

git clone https://gitcode.com/GitHub_Trending/st/stitch-skills

第 3 步：让 Agent 读取技能入口文件

安装后，核心指令位于 SKILL.md，同目录下的 README.md 提供了快速上手说明。对 Agent 说"读取 stitch-loop 技能并开始构建"即可激活。

核心三件套：网站构建前必须准备的三个文件

stitch-loop 依赖.stitch/目录下的"长期记忆"文件，相当于网站项目的"宪法"：

仓库自带了一份可直接参考的家具网站示例 SITE.md，包含 7 个标准章节：核心身份、视觉语言、文件架构、站点地图、路线图、创意自由区和参与规则。配套的接力棒格式规范见 baton-schema.md，站点模板见 site-template.md。

单轮迭代详解：从读取接力棒到传递接力棒的 6 步流程

以示例接力棒 next-prompt.md 为例（任务是构建一个"联系方式页面"），Agent 每轮自动执行：

Step 1 读取接力棒：解析 YAML 头部的page字段确定输出文件名（如contact），读取正文作为生成提示词。

Step 2 查阅上下文：读取SITE.md的站点地图，绝不重复构建已存在的页面；若路线图（Roadmap）有积压任务则从中取，否则从创意自由区（Creative Freedom）挑选或自创新页面。

Step 3 调用 Stitch 生成屏幕：获取或创建 Stitch 项目，用完整提示词（必须包含设计系统块）生成页面，并将 HTML 和截图下载到暂存目录.stitch/designs/。所有项目 ID 会持久化到.stitch/metadata.json，供后续迭代复用。

Step 4 整合进网站：把生成的 HTML 移入site/public/，修正相对路径，把占位链接（href="#"）接线到真实页面，统一全站导航。

Step 5 更新站点文档：在SITE.md的站点地图中把新页面标记为[x]，并从创意区移除已使用的想法。

Step 6 写下下一根接力棒（关键一步）：决定下一个页面，按规范格式写入next-prompt.md。如果跳过这一步，循环就会中断。⚠️

💡可选加分项：如果配置了 Chrome DevTools MCP 服务器，Agent 还会启动本地服务器、渲染页面并截图，与 Stitch 设计稿做视觉比对，确保还原度。

四种编排方式：让循环持续运转

stitch-loop 与触发机制完全解耦，你可以选择任意驱动方式：

对新手最友好的是"人工把关"模式：每轮跑完检查一下页面，满意了再让 Agent 继续传棒。

避坑清单：循环卡住的 5 个常见原因

配套技能扩展：从"能跑"到"高品味"

stitch-loop 属于 stitch-utilities 插件 的一部分，配合以下技能体验更佳：

• design-md：分析 Stitch 项目，自动合成语义化DESIGN.md设计系统文件（SKILL.md）
• taste-design：生成"反 AI 平庸感"的高级感设计系统，内置禁用纯黑、禁用霓虹渐变等规则（SKILL.md）
• enhance-prompt：把"做个设置页"这类模糊想法改写成结构化的 Stitch 优化提示词（SKILL.md）

总结：一个提示词开启多页网站之旅

stitch-loop 的价值在于把"重复劳动"交给了流程：你负责定愿景（SITE.md）和定风格（DESIGN.md），Agent 负责一轮轮地生成、整合、传棒。按照本指南完成安装和文件准备后，只要对 Agent 说一句：

"读取 next-prompt.md，用 Stitch 生成页面，然后准备下一轮迭代。"

一个多页网站就会在你的接力棒机制中，一页一页地自动生长出来。

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills