如何编写自己的 Stitch 技能按 Agent Skills 标准的完整实战指南【免费下载链接】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想让 AI 编码助手多一门手艺该从哪下手比如让它把 Stitch 刚生成的界面自动转成 React 组件或从一段前端代码里抽出设计令牌。stitch-skills 仓库把这些能力都做成了Agent Skills每个技能就是一个文件夹核心是那份写给 AI 看的任务说明书 SKILL.md。这篇教程带你拆开官方技能看内部构造再走一遍从建目录到本地验证的完整流程帮你写出自己的自定义 Stitch 技能。技能 说明书 工具箱先建立心智模型把技能想象成一份发给 AI 的入职手册 工具箱说明书SKILL.md写清什么场景用、怎么一步步用、调哪些工具工具箱可选的scripts/可执行脚本、references/专业知识库、examples/标准样例。AI 不会预先读完所有手册——只有当你的任务与某个 SKILL.md 的 description 对得上时它才会加载那个文件夹并照章办事。插件体系则可以类比为应用商店插件是把相关技能打包分发的应用包。仓库把技能拆成三个插件——stitch-design核心设计工作流、stitch-build设计转代码、stitch-utilities辅助工具注册信息统一登记在 marketplace.json 里每个插件的名称、来源路径、安装策略一目了然相当于商店的目录页。拆开 generate-design 官方技能里面到底装了什么以官方的 generate-design从文本或图片生成界面为例逐层拆包skills/generate-design/ ├── SKILL.md # 工作流说明书 ├── references/ │ ├── design-mappings.md # UI/UX 术语对照表 │ └── prompt-keywords.md # 组件命名与词汇清单 └── examples/ └── enhanced-prompt.md # 提示词增强前后对比打开 SKILL.md它分成上下两部分。frontmatter 是身份证只有三个字段--- name: stitch::generate-design description: Generate new screens from text prompts or images... allowed-tools: - stitch*:* - Read - Write ---name技能标识部分工具要求小写短横线kebab-case且与目录名一致descriptionAI 判断要不要加载这个技能的唯一依据必须同时写清做什么、何时触发allowed-tools工具白名单范围越窄越安全。正文是操作手册。看 design-md 技能 的正文就是标准四件套一句话说清目标Overview、前置条件Prerequisites如Stitch MCP 已配置、分步流程Steps每步指明调哪个工具、传什么参数、提示与资料Tips / References链向 references/ 和 examples/ 里的知识文件。还有一个值得抄的细节技能之间可以互相委托。generate-design 遇到上传图片这一步会把活儿交给 upload-to-stitch 技能完成而不是自己硬写一遍。四步建一个新技能可执行清单在plugins/你的插件/skills/下新建skills/export-theme/然后按清单推进建目录做什么建一个 kebab-case 命名的技能文件夹。为什么目录名是技能标识的一部分AI 靠路径找到说明书。怎么验证文件夹全小写、短横线分隔且不与现有技能重名。写 SKILL.md做什么frontmatter 三字段 正文四模块目标、前置条件、步骤、提示。为什么AI 只能照可执行的清单干活模糊形容词帮不了它。怎么验证假装自己没读过你的代码逐条检查每步是否真的能执行、引用的工具是否真实存在。配辅助文件可选要跑脚本放scripts/比如 upload_to_stitch.py 用脚本绕开了 base64 上传限制要沉淀专业知识放references/比如 angular.md、vue.md 这类框架对照表要固定输出格式放examples/比如 metadata.json。怎么验证SKILL.md 正文里引用的每个文件都有相对路径链接。本地验证做什么把技能文件夹放进助手能发现的路径如.agents/skills/、.claude/skills/、.opencode/skills/。为什么各助手的发现路径不同放对位置才谈得上触发。怎么验证发一句和 description 用词对得上的自然语言提示词看 AI 是否加载技能并逐步执行不触发就回头改 description。避坑与自查四个常见错误写法坑 1description 写得太泛别这么写处理 UI 设计相关任务。应该这么写上传本地图形、HTML 或设计文档到 Stitch 项目当直接 MCP 上传被截断时也要用本技能可参考 upload-to-stitch 的写法。原则把用户可能说出口的原话写进去具体场景越多命中率越高。坑 2步骤没有决策分支别写分析上下文后调用生成工具。要写成条件句用户给了图片 → 走图片流程给的是文字描述 → 走文本流程要改已有界面 → 走编辑流程。generate-design 在 Steps 开头做模式判定的写法就是现成模板。坑 3敏感操作没有确认检查点涉及上传、覆盖的动作正文里要写死执行前列出文件路径、大小、类型等用户明确同意后再跑脚本。upload-to-stitch 技能中的 WARNING 检查点段落可以直接当范式。坑 4一个技能塞太多事想让一个技能同时管生成、上传、转代码步骤必然互相打架。让每个技能专注一件事复杂流程用委托拆给别的技能。打包分发与上游贡献 技能写好了想让团队直接用就归入插件统一分发插件元信息写在各插件目录的 plugin.jsonname、description、version、keywords结构见 stitch-utilities 的 plugin.json若要挂到仓库商店在 marketplace.json 中追加一条记录声明来源路径与安装策略用户侧一行命令装整套npx plugins add google-labs-code/stitch-skills --scope project --target claude-code也可以用npx skills add只挑单个技能装。⚠️ 安装前有个前提所有技能都依赖Stitch MCP 服务器。必须先完成 Stitch MCP 的环境配置注册服务器、备好凭据SKILL.md 里那些stitch*:*工具才真正可被调用否则技能只是纸上流程。选题没头绪仓库 README 推荐三个高价值方向校验转换把 Stitch HTML 转成 Vue/Svelte 等框架并校验语法、数据解耦把静态设计里的文案、图表数据外置成 mock 文件、设计生成从一份 JSON 批量生成列表页等新界面。打磨满意后可以提交上游git clone https://gitcode.com/GitHub_Trending/st/stitch-skills后建特性分支、提交推送、发起 Pull Request。动手前按 CONTRIBUTING.md 的要求先签署 CLA已签过 Google CLA 的无需重复PR 中附上技能的使用示例会更好过审。三条要点收尾 ✅结构有模板一个技能 一个文件夹 SKILL.mdfrontmatter 三字段 正文四模块可选 scripts/、references/、examples/照着抄不会跑偏。质量在细节description 写得可触发、步骤带决策分支、敏感操作设确认检查点、一个技能只做一件事——这四点决定技能能不能用。路径已铺好技能归入插件、登记 marketplace 后别人一行命令就能装上想回馈社区按 CONTRIBUTING.md 的 Fork → 分支 → PR 流程走即可。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何编写自己的 Stitch 技能：按 Agent Skills 标准的完整实战指南
如何编写自己的 Stitch 技能按 Agent Skills 标准的完整实战指南【免费下载链接】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想让 AI 编码助手多一门手艺该从哪下手比如让它把 Stitch 刚生成的界面自动转成 React 组件或从一段前端代码里抽出设计令牌。stitch-skills 仓库把这些能力都做成了Agent Skills每个技能就是一个文件夹核心是那份写给 AI 看的任务说明书 SKILL.md。这篇教程带你拆开官方技能看内部构造再走一遍从建目录到本地验证的完整流程帮你写出自己的自定义 Stitch 技能。技能 说明书 工具箱先建立心智模型把技能想象成一份发给 AI 的入职手册 工具箱说明书SKILL.md写清什么场景用、怎么一步步用、调哪些工具工具箱可选的scripts/可执行脚本、references/专业知识库、examples/标准样例。AI 不会预先读完所有手册——只有当你的任务与某个 SKILL.md 的 description 对得上时它才会加载那个文件夹并照章办事。插件体系则可以类比为应用商店插件是把相关技能打包分发的应用包。仓库把技能拆成三个插件——stitch-design核心设计工作流、stitch-build设计转代码、stitch-utilities辅助工具注册信息统一登记在 marketplace.json 里每个插件的名称、来源路径、安装策略一目了然相当于商店的目录页。拆开 generate-design 官方技能里面到底装了什么以官方的 generate-design从文本或图片生成界面为例逐层拆包skills/generate-design/ ├── SKILL.md # 工作流说明书 ├── references/ │ ├── design-mappings.md # UI/UX 术语对照表 │ └── prompt-keywords.md # 组件命名与词汇清单 └── examples/ └── enhanced-prompt.md # 提示词增强前后对比打开 SKILL.md它分成上下两部分。frontmatter 是身份证只有三个字段--- name: stitch::generate-design description: Generate new screens from text prompts or images... allowed-tools: - stitch*:* - Read - Write ---name技能标识部分工具要求小写短横线kebab-case且与目录名一致descriptionAI 判断要不要加载这个技能的唯一依据必须同时写清做什么、何时触发allowed-tools工具白名单范围越窄越安全。正文是操作手册。看 design-md 技能 的正文就是标准四件套一句话说清目标Overview、前置条件Prerequisites如Stitch MCP 已配置、分步流程Steps每步指明调哪个工具、传什么参数、提示与资料Tips / References链向 references/ 和 examples/ 里的知识文件。还有一个值得抄的细节技能之间可以互相委托。generate-design 遇到上传图片这一步会把活儿交给 upload-to-stitch 技能完成而不是自己硬写一遍。四步建一个新技能可执行清单在plugins/你的插件/skills/下新建skills/export-theme/然后按清单推进建目录做什么建一个 kebab-case 命名的技能文件夹。为什么目录名是技能标识的一部分AI 靠路径找到说明书。怎么验证文件夹全小写、短横线分隔且不与现有技能重名。写 SKILL.md做什么frontmatter 三字段 正文四模块目标、前置条件、步骤、提示。为什么AI 只能照可执行的清单干活模糊形容词帮不了它。怎么验证假装自己没读过你的代码逐条检查每步是否真的能执行、引用的工具是否真实存在。配辅助文件可选要跑脚本放scripts/比如 upload_to_stitch.py 用脚本绕开了 base64 上传限制要沉淀专业知识放references/比如 angular.md、vue.md 这类框架对照表要固定输出格式放examples/比如 metadata.json。怎么验证SKILL.md 正文里引用的每个文件都有相对路径链接。本地验证做什么把技能文件夹放进助手能发现的路径如.agents/skills/、.claude/skills/、.opencode/skills/。为什么各助手的发现路径不同放对位置才谈得上触发。怎么验证发一句和 description 用词对得上的自然语言提示词看 AI 是否加载技能并逐步执行不触发就回头改 description。避坑与自查四个常见错误写法坑 1description 写得太泛别这么写处理 UI 设计相关任务。应该这么写上传本地图形、HTML 或设计文档到 Stitch 项目当直接 MCP 上传被截断时也要用本技能可参考 upload-to-stitch 的写法。原则把用户可能说出口的原话写进去具体场景越多命中率越高。坑 2步骤没有决策分支别写分析上下文后调用生成工具。要写成条件句用户给了图片 → 走图片流程给的是文字描述 → 走文本流程要改已有界面 → 走编辑流程。generate-design 在 Steps 开头做模式判定的写法就是现成模板。坑 3敏感操作没有确认检查点涉及上传、覆盖的动作正文里要写死执行前列出文件路径、大小、类型等用户明确同意后再跑脚本。upload-to-stitch 技能中的 WARNING 检查点段落可以直接当范式。坑 4一个技能塞太多事想让一个技能同时管生成、上传、转代码步骤必然互相打架。让每个技能专注一件事复杂流程用委托拆给别的技能。打包分发与上游贡献 技能写好了想让团队直接用就归入插件统一分发插件元信息写在各插件目录的 plugin.jsonname、description、version、keywords结构见 stitch-utilities 的 plugin.json若要挂到仓库商店在 marketplace.json 中追加一条记录声明来源路径与安装策略用户侧一行命令装整套npx plugins add google-labs-code/stitch-skills --scope project --target claude-code也可以用npx skills add只挑单个技能装。⚠️ 安装前有个前提所有技能都依赖Stitch MCP 服务器。必须先完成 Stitch MCP 的环境配置注册服务器、备好凭据SKILL.md 里那些stitch*:*工具才真正可被调用否则技能只是纸上流程。选题没头绪仓库 README 推荐三个高价值方向校验转换把 Stitch HTML 转成 Vue/Svelte 等框架并校验语法、数据解耦把静态设计里的文案、图表数据外置成 mock 文件、设计生成从一份 JSON 批量生成列表页等新界面。打磨满意后可以提交上游git clone https://gitcode.com/GitHub_Trending/st/stitch-skills后建特性分支、提交推送、发起 Pull Request。动手前按 CONTRIBUTING.md 的要求先签署 CLA已签过 Google CLA 的无需重复PR 中附上技能的使用示例会更好过审。三条要点收尾 ✅结构有模板一个技能 一个文件夹 SKILL.mdfrontmatter 三字段 正文四模块可选 scripts/、references/、examples/照着抄不会跑偏。质量在细节description 写得可触发、步骤带决策分支、敏感操作设确认检查点、一个技能只做一件事——这四点决定技能能不能用。路径已铺好技能归入插件、登记 marketplace 后别人一行命令就能装上想回馈社区按 CONTRIBUTING.md 的 Fork → 分支 → PR 流程走即可。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考