AI 技能AI 插件【免费下载链接】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-loop是 stitch-skills 仓库stitch-utilities插件中用于多页面网站自主迭代构建的 Agent Skill。它教会编码 Agent 一种接力棒传递baton-passing的循环模式Agent 从.stitch/next-prompt.md读取当前任务 → 调用 Stitch MCP 工具生成页面 → 将页面集成进站点结构 → 再写入下一个任务从而让网站开发像接力赛一样连续、自主地推进。读完本文你将掌握该技能的文件结构、完整的六步执行协议、.stitch/目录下各文件的格式规范与metadata.json的字段含义并能结合design-md、site-md技能搭建一套可自动持续迭代的建站工作流。一、技能概述什么是 Build Loopstitch-loop的完整行为定义位于 SKILL.md。它把 Agent 定位为一名自主前端构建者autonomous frontend builder参与一个迭代式站点构建循环。每一次迭代由四个步骤构成从接力棒文件.stitch/next-prompt.md读取当前任务使用 Stitch MCP 工具生成页面将页面集成进站点结构把下一个任务写回接力棒文件交给下一轮迭代。该技能的前置条件分为必需与可选两类类型条件说明必需Stitch MCP Server 访问权限所有页面生成都依赖 Stitch MCP 工具必需一个 Stitch 项目已存在或将创建需要projectId来承载生成的屏幕必需.stitch/DESIGN.md文件可用design-md技能生成定义统一视觉语言必需.stitch/SITE.md文件记录站点愿景、sitemap 与路线图可选Chrome DevTools MCP Server用于对生成的页面做可视化验证二、安装与目录结构安装方式stitch-loop遵循 Agent Skills 开放标准可通过npx skills单独安装npx skills add google-labs-code/stitch-skills --skill stitch-loop --global也可以直接在支持的编码 Agent如 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 等中安装整个stitch-utilities插件。安装后可用一条提示词唤起循环例如Read my next-prompt.md and generate the page using Stitch, then prepare the next iteration.技能自身的目录结构plugins/stitch-utilities/skills/stitch-loop/ ├── SKILL.md — Core pattern instructions核心模式指令 ├── README.md — This file本说明文件 └── examples/ ├── next-prompt.md — Example baton接力棒示例 └── SITE.md — Example site constitution站点宪法示例从仓库实际内容看SKILL.md中描述的resources/baton-schema.md与site-template.md在当前仓库中尚未提供实际操作时以 SKILL.md 正文与examples/两个示例文件为准。项目侧的目录约定运行时技能会在你的项目内维护如下结构project/ ├── .stitch/ │ ├── metadata.json # Stitch project screen IDs务必持久化保存 │ ├── DESIGN.md # 视觉设计系统由 design-md 技能生成 │ ├── SITE.md # 站点愿景、sitemap、路线图 │ ├── next-prompt.md # 接力棒 —— 当前任务 │ └── designs/ # Stitch 产物的暂存区 │ ├── {page}.html │ └── {page}.png └── site/public/ # 生产页面 ├── index.html └── {page}.html三、接力棒Baton系统循环的动力源.stitch/next-prompt.md是连接各轮迭代的接力棒。它的格式为YAML frontmatter Markdown 正文--- 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关于接力棒有三条关键规则page字段frontmatter决定了输出文件的文件名即site/public/{page}.html提示词正文必须包含来自.stitch/DESIGN.md的设计系统段落这是页面风格一致性的前提每一轮工作结束前必须更新该文件循环才会继续——忘记更新接力棒是导致循环中断的第一大错误。仓库中的 examples/next-prompt.md 给出了一个真实可用的接力棒示例为 Oakwood Furniture Co. 生成contact页其中DESIGN SYSTEM (REQUIRED)段落完整列出了平台、主题、背景色、强调色、字体、按钮圆角、卡片阴影等语义化设计令牌可直接照抄进自己的任务文件。四、六步执行协议详解Step 1读取接力棒解析.stitch/next-prompt.md提取两项信息页面名称来自 frontmatter 的page字段提示词内容来自 Markdown 正文。Step 2参考上下文文件生成页面之前必须先读取两个上下文文件文件用途.stitch/SITE.md站点愿景、Stitch Project ID、已有页面sitemap、路线图.stitch/DESIGN.md供 Stitch 提示词使用的必需视觉风格读取时重点做三处检查Section 4Sitemap——不要重复创建已存在的页面Section 5Roadmap——如果存在积压任务从这里挑选Section 6Creative Freedom——如果路线图为空从这里寻找新页面灵感。以示例 examples/SITE.md 为例它的 Section 4 用[x]/[ ]标记了index.html、collections.html、about.html已完成contact.html待建Section 5 将Product Detail PageContact Page列为高优先级Section 6 则提供了materials.html、custom.html等创意候选并明确使用一条想法后就要把它从清单中移除。Step 3用 Stitch 生成页面这是核心执行步骤子流程如下发现命名空间运行list_tools找到 Stitch MCP 的前缀如mcp_stitch:后续所有调用都使用该前缀获取或创建项目如果.stitch/metadata.json已存在直接读取其中的projectId否则调用[prefix]:create_project创建项目再调用[prefix]:get_project获取完整项目信息并保存到.stitch/metadata.jsonschema 见下文每生成一个屏幕后再次调用[prefix]:get_project把每个屏幕的完整元数据id、sourceScreen、尺寸、画布坐标更新到.stitch/metadata.json的screens映射中生成屏幕调用[prefix]:generate_screen_from_text参数包括projectId项目 IDprompt接力棒中的完整提示词包含设计系统段落deviceTypeDESKTOP或按接力棒指定获取资源下载前先检查.stitch/designs/{page}.html与.stitch/designs/{page}.png是否已存在已存在询问用户是刷新设计还是复用本地文件仅在用户确认后才重新下载不存在执行下载——htmlCode.downloadUrl下载并保存为.stitch/designs/{page}.htmlscreenshot.downloadUrl下载前先在该 URL 末尾追加w{width}其中{width}取屏幕元数据中的宽度值Google CDN 默认返回低分辨率缩略图保存为.stitch/designs/{page}.png。Step 4集成进站点将生成的 HTML 从.stitch/designs/{page}.html移动到site/public/{page}.html修正所有资源路径使其相对于 public 目录更新导航找到现有的占位链接如href#并将其指向新页面如合适则把新页面加入全局导航保证所有页面的页头header与页脚footer保持一致。Step 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直接跳到 Step 5。Step 5更新站点文档修改.stitch/SITE.md在 Section 4Sitemap中添加新页面并标记[x]移除你在 Section 6Creative Freedom中消耗掉的创意条目如果完成了积压项同步更新 Section 5Roadmap。Step 6准备下一个接力棒关键步骤在完成本轮工作前必须更新.stitch/next-prompt.md这是保持循环存活的必要条件。操作要点决定下一页优先查看.stitch/SITE.md的 Section 5Roadmap是否有待办项为空则从 Section 6Creative Freedom挑选也可以创造符合站点愿景的新页面写入带 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五、.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}projectIdStitch 项目 ID来自create_project或get_projecttitle人类可读的项目标题designTheme设计系统令牌颜色模式、字体、圆角、自定义颜色、饱和度deviceType目标设备MOBILE、DESKTOP、TABLETscreens页面名 → 屏幕对象的映射。每个屏幕包含id、sourceScreen供 MCP 调用使用的资源路径、画布坐标x、y与尺寸width、heightmetadata.userRole用户对项目的角色OWNER、EDITOR、VIEWER六、编排方式循环可以由什么驱动stitch-loop刻意设计为编排无关orchestration-agnostic——技能只定义模式本身不绑定触发机制。可选的驱动层包括方式工作原理CI/CDGitHub Actions 监听.stitch/next-prompt.md的变更来触发新一轮迭代人工在环Human-in-loop开发者在每轮迭代完成后审核再放行下一轮Agent 链Agent chains一个 Agent 将任务派发给另一个例如通过 Jules API手动Manual开发者在同一仓库中反复运行 Agent七、与 design-md / site-md 的协同完整闭环stitch-loop与同一插件中的design-md、site-md技能形成了完整的建站闭环site-md负责初始化并维护.stitch/SITE.md将其作为 Build Loop 的长期记忆与项目宪法覆盖核心身份、视觉基调、架构、sitemap、路线图与创意自由指南等七个章节见 site-md/SKILL.mddesign-md负责从现有 Stitch 屏幕提炼语义化设计系统并写入.stitch/DESIGN.md作为后续所有 Stitch 提示词的唯一事实来源见 design-md/SKILL.md。stitch-loop与design-md的配合节奏是首次设置用design-md技能从已有 Stitch 屏幕生成.stitch/DESIGN.md每轮迭代把.stitch/DESIGN.md的设计系统段落复制进接力棒提示词一致性保障所有生成的页面因此共享同一套视觉语言。也就是说一次完整的单提示词建站流程可以是site-md产出站点宪法 →design-md产出设计系统 →stitch-loop驱动逐页生成与集成直到整个站点落盘到site/public/。八、常见陷阱与排查常见陷阱❌ 忘记更新.stitch/next-prompt.md——循环会直接中断❌ 重复创建 sitemap 中已存在的页面❌ 提示词中未包含.stitch/DESIGN.md的设计系统段落❌ 保留占位链接href#而没有接入真实导航❌ 创建新项目后忘记持久化.stitch/metadata.json。问题排查表问题解决方案Stitch 生成失败检查提示词是否包含设计系统段落样式不一致确保.stitch/DESIGN.md是最新的且被正确复制循环停滞检查.stitch/next-prompt.md是否以合法的 frontmatter 更新导航失效检查所有内部链接是否使用了正确的相对路径九、总结stitch-loop将生成页面 → 集成 → 交接下一任务固化为一套可重复、可编排的自主循环模式。其核心价值在于三点接力棒文件让任务交接有明确载体.stitch/目录约定让 Stitch 项目元数据、设计系统、站点宪法与暂存资源各归其位与design-md、site-md的协同保证每一轮新页面都与既有站点在视觉与结构上保持一致。无论由 CI/CD、人工审核还是 Agent 链驱动这套模式都能支撑从单个提示词到完整多页面网站的持续自主构建。赞分享AI 技能AI 插件【免费下载链接】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 之 Stitch Build Loop用「接力棒」模式驱动 Agent 自主迭代建站stitch skills 之 Stitch Build Loop用「接力棒」模式驱动 Agent 自主迭代建站 本文以 stitch utilities 插AI 技能AI 插件ReactiveCocoa 品牌资产使用指南Logo、图标、配色与字体规范详解ReactiveCocoa 品牌资产使用指南Logo、图标、配色与字体规范详解 本篇指南基于当前仓库中的品牌资产文档 Logo/README.md httpsAI 技能AI 插件stitch-skills 的 Baton 文件规范next-prompt.mdStitch 自主建站循环中的接力棒协议详解stitch skills 的 Baton 文件规范next prompt.mdStitch 自主建站循环中的接力棒协议详解 本文档深度解析 stitchAI 技能AI 插件上一篇【免费下载】 倍福TWINCAT软件使用教程下一篇【免费下载】 AB PLC与上位机OPC连接操作指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考