从零编写 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-skillsstitch-skills 是面向 Google Stitch 的技能库把生成、编辑和管理 UI 设计的能力打包成遵循 Agent Skills 标准的技能供 Claude Code、Cursor、Gemini CLI 等编码助手直接调用。读完这篇编写教程你能照着 SKILL.md 规范写出自己的第一个自定义 Stitch 技能。AI 输出总差一点把痛点写成技能你想让 AI 按团队设计规范输出界面结果它要么太随意、要么漏掉关键步骤提示词改了八遍也不对。stitch-skills 的解法是写一个自定义技能一份 SKILL.md 说明书助手遇到相关任务就照着执行。看清全局三个插件加一个市场仓库按插件组织技能每个插件是一组技能的集合三大分组一览插件负责什么代表技能stitch-design核心设计工作流generate-designstitch-build设计转代码React 组件stitch-utilities辅助工具stitch-loop每个插件都登记在 marketplace.json 里声明插件名、本地来源路径和安装策略可安装、安装时鉴权。助手侧的插件市场就靠这份清单完成发现与安装。解剖一份 SKILL.md技能目录结构与写法选 generate-design 开刀。它承担文本/图片生成界面这条最核心的工作流结构最典型。目录骨架plugins/stitch-design/skills/generate-design/ ├── SKILL.md # 任务说明书技能的核心 ├── references/ │ ├── design-mappings.md # 模糊词到专业词的映射表 │ └── prompt-keywords.md # Stitch 高识别度词汇库 └── examples/ └── enhanced-prompt.md # 提示词增强前后对比SKILL.md 告诉 AI 做什么references/ 里两份文件是执行时要查的语料examples/ 放输出金标准样本。frontmatter 三个字段每份 SKILL.md 顶部都有同款 YAML 头各管一件事--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens, and generate design variants... allowed-tools: - stitch*:* - Bash - Read - Write - web_fetch ---name技能标识。仓库里有stitch::技能名前缀式和小写连字符目录名式两种部分助手如 OpenCode只认后者且要求与目录名严格一致。descriptionAI 判断何时加载这个技能的唯一依据。要同时写清做什么和什么场景触发用户说大白话也能命中。allowed-tools可调用工具白名单。stitch*:*覆盖 Stitch MCP 工具其余只列实际用到的基础工具越收敛越安全。正文四模块各解决什么对照 design-md 能看到完整的四模块形态每个模块回答一个问题Overview解决什么问题一句话说清目标和产出的定位比如生成作为 Stitch 提示唯一依据的 DESIGN.md。Prerequisites动手前要备齐什么声明 Stitch MCP 服务器、至少有一个已设计屏幕的项目这类外部依赖让 AI 提前停下而不是中途失败。Steps怎么执行每步写明调用哪个工具、传什么参数、遇到什么情况走哪个分支。generate-design 正是如此先判断模式再分流到文本生成、图片生成、编辑、变体四条流程。Tips 与 References有哪些经验知识放哪Tips 收生成提示词里别写十六进制色值这类经验规则References 按名指向 references/ 的两个文件和 examples/ 的示例。辅助文件何时需要scripts/MCP 直调不够用时。upload_to_stitch.py 的存在只因一个限制——小文件 base64 编码后就超过模型约 16K 的输出上限脚本直接走 HTTP 调 Stitch 接口更稳。references/要沉淀大段查表知识时。design-mappings.md 与 prompt-keywords.md 是提示词增强流水线的查词表拆出来让正文步骤保持可读。examples/输出格式固定时。enhanced-prompt.md 给出一对完整的前后对比AI 照着模仿即可。从零搭建 怎么写技能决策清单不用按固定顺序走每一步只回答一个问题目录放哪只在本地验证 → 技能文件夹丢进助手可发现的路径.agents/skills/或.claude/skills/。要给别人分发 → 放进plugins/插件名/skills/技能名/。配置头怎么写技能要调 Stitch MCP 工具 → allowed-tools 写stitch*:*加上实际用到的基础工具Read、Write、Bash。只读写文件 → 一条 stitch 工具都不用加。正文怎么写流程有分支 → 把分支条件写明用户给了图片 → 走图片流程AI 才不会跑偏。有上传、覆盖这类敏感操作 → 写进必须暂停等用户确认的检查点。要不要 scripts/如果 MCP 输出被截断、或网络请求复杂 → 写个脚本直接执行参考 upload-to-stitch 的上传方案。否则不加。要不要 references/如果有一张术语、框架映射的大查表 → 放 references/正文按名指向。少量规则直接写正文即可。要不要 examples/有固定输出格式 → 放一份完整金标准样本。本地怎么验证文件夹就位后发一句自然语言提示词看是否触发且执行到底。比如发Enhance this prompt: make a settings page观察技能是否被加载、输出格式是否达标。四条设计原则从触发准确到可组合复用触发准确——description 是唯一触发条件。常见翻车把 description 写成能力清单用户说保存 HTML技能却没被加载。好写法upload-to-stitch 的 description 明确写了凡要上传资产就用本技能尤其当 MCP 直调被截断时场景和兜底条件都写进去了。执行可控——翻车是 AI 自由发挥或跳过敏感步骤。做法正文每步给出明确工具与参数上传、覆盖这类操作写明必须暂停等用户确认。upload-to-stitch 里的 WARNING 检查点就是这个样板。边界清晰——翻车是技能调了不该调的工具产生副作用。做法allowed-tools 白名单收窄。generate-design 只放 stitch 工具加 Read/Write/Bash/web_fetch一个都不多给。可组合复用——翻车是把所有环节塞进一个技能又长又难维护。做法子流程委托给别的技能。generate-design 把图片上传委托给 upload-to-stitch把设计系统准备委托给 manage-design-system每个技能只管自己那段流程。打包成可分发插件plugin.json 与安装命令单个技能先放在.agents/skills/就能跑但要分发给别人得放进plugins/插件名/skills/并配一份 plugin.json字段作用示例值name插件标识stitch-designdescription一句话定位设计工作流描述version版本号1.0.0keywords检索标签design, mcp有了它插件就进入市场可安装列表。用户一行命令装整套也可只挑单个技能npx skills add google-labs-code/stitch-skills安装前置条件先完成 Stitch MCP 服务器配置——注册服务器、准备好凭据与环境变量。否则技能里的stitch*:*工具不会有任何响应。值得写的三个方向选题后马上开工校验转换场景是 Stitch 产出的 HTML 要进现有 Vue/Svelte 工程做法是写技能提取 HTML、转成目标框架、校验语法参考 extract-static-html 目录下三个脚本处理 HTML 的方式。数据解耦场景是设计内容写死在静态页里难以复用做法是写技能把页面文案、图表数据抽成外部 mock 数据文件参考 extract-static-html 的快照与后处理思路。批量设计生成场景是一份 JSON 里每条记录要一个列表页界面做法是写技能遍历数据、逐屏调用生成工具并产出变体参考 generate-design 的 Generate Variants 流程。贡献流程按 CONTRIBUTING.md 走Fork 仓库、建特性分支、提交、发起 Pull Request贡献者需签署 CLA。回到开头那个场景AI 出的界面总不合你的设计规范出路不是继续改提示词而是把规范写成一个技能。现在就可以去 clone 仓库拆开 generate-design 读一遍再为今晚的痛点建一个技能目录——明天你的助手就能一句话执行你的标准 【免费下载链接】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-skillsstitch-skills 是面向 Google Stitch 的技能库把生成、编辑和管理 UI 设计的能力打包成遵循 Agent Skills 标准的技能供 Claude Code、Cursor、Gemini CLI 等编码助手直接调用。读完这篇编写教程你能照着 SKILL.md 规范写出自己的第一个自定义 Stitch 技能。AI 输出总差一点把痛点写成技能你想让 AI 按团队设计规范输出界面结果它要么太随意、要么漏掉关键步骤提示词改了八遍也不对。stitch-skills 的解法是写一个自定义技能一份 SKILL.md 说明书助手遇到相关任务就照着执行。看清全局三个插件加一个市场仓库按插件组织技能每个插件是一组技能的集合三大分组一览插件负责什么代表技能stitch-design核心设计工作流generate-designstitch-build设计转代码React 组件stitch-utilities辅助工具stitch-loop每个插件都登记在 marketplace.json 里声明插件名、本地来源路径和安装策略可安装、安装时鉴权。助手侧的插件市场就靠这份清单完成发现与安装。解剖一份 SKILL.md技能目录结构与写法选 generate-design 开刀。它承担文本/图片生成界面这条最核心的工作流结构最典型。目录骨架plugins/stitch-design/skills/generate-design/ ├── SKILL.md # 任务说明书技能的核心 ├── references/ │ ├── design-mappings.md # 模糊词到专业词的映射表 │ └── prompt-keywords.md # Stitch 高识别度词汇库 └── examples/ └── enhanced-prompt.md # 提示词增强前后对比SKILL.md 告诉 AI 做什么references/ 里两份文件是执行时要查的语料examples/ 放输出金标准样本。frontmatter 三个字段每份 SKILL.md 顶部都有同款 YAML 头各管一件事--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens, and generate design variants... allowed-tools: - stitch*:* - Bash - Read - Write - web_fetch ---name技能标识。仓库里有stitch::技能名前缀式和小写连字符目录名式两种部分助手如 OpenCode只认后者且要求与目录名严格一致。descriptionAI 判断何时加载这个技能的唯一依据。要同时写清做什么和什么场景触发用户说大白话也能命中。allowed-tools可调用工具白名单。stitch*:*覆盖 Stitch MCP 工具其余只列实际用到的基础工具越收敛越安全。正文四模块各解决什么对照 design-md 能看到完整的四模块形态每个模块回答一个问题Overview解决什么问题一句话说清目标和产出的定位比如生成作为 Stitch 提示唯一依据的 DESIGN.md。Prerequisites动手前要备齐什么声明 Stitch MCP 服务器、至少有一个已设计屏幕的项目这类外部依赖让 AI 提前停下而不是中途失败。Steps怎么执行每步写明调用哪个工具、传什么参数、遇到什么情况走哪个分支。generate-design 正是如此先判断模式再分流到文本生成、图片生成、编辑、变体四条流程。Tips 与 References有哪些经验知识放哪Tips 收生成提示词里别写十六进制色值这类经验规则References 按名指向 references/ 的两个文件和 examples/ 的示例。辅助文件何时需要scripts/MCP 直调不够用时。upload_to_stitch.py 的存在只因一个限制——小文件 base64 编码后就超过模型约 16K 的输出上限脚本直接走 HTTP 调 Stitch 接口更稳。references/要沉淀大段查表知识时。design-mappings.md 与 prompt-keywords.md 是提示词增强流水线的查词表拆出来让正文步骤保持可读。examples/输出格式固定时。enhanced-prompt.md 给出一对完整的前后对比AI 照着模仿即可。从零搭建 怎么写技能决策清单不用按固定顺序走每一步只回答一个问题目录放哪只在本地验证 → 技能文件夹丢进助手可发现的路径.agents/skills/或.claude/skills/。要给别人分发 → 放进plugins/插件名/skills/技能名/。配置头怎么写技能要调 Stitch MCP 工具 → allowed-tools 写stitch*:*加上实际用到的基础工具Read、Write、Bash。只读写文件 → 一条 stitch 工具都不用加。正文怎么写流程有分支 → 把分支条件写明用户给了图片 → 走图片流程AI 才不会跑偏。有上传、覆盖这类敏感操作 → 写进必须暂停等用户确认的检查点。要不要 scripts/如果 MCP 输出被截断、或网络请求复杂 → 写个脚本直接执行参考 upload-to-stitch 的上传方案。否则不加。要不要 references/如果有一张术语、框架映射的大查表 → 放 references/正文按名指向。少量规则直接写正文即可。要不要 examples/有固定输出格式 → 放一份完整金标准样本。本地怎么验证文件夹就位后发一句自然语言提示词看是否触发且执行到底。比如发Enhance this prompt: make a settings page观察技能是否被加载、输出格式是否达标。四条设计原则从触发准确到可组合复用触发准确——description 是唯一触发条件。常见翻车把 description 写成能力清单用户说保存 HTML技能却没被加载。好写法upload-to-stitch 的 description 明确写了凡要上传资产就用本技能尤其当 MCP 直调被截断时场景和兜底条件都写进去了。执行可控——翻车是 AI 自由发挥或跳过敏感步骤。做法正文每步给出明确工具与参数上传、覆盖这类操作写明必须暂停等用户确认。upload-to-stitch 里的 WARNING 检查点就是这个样板。边界清晰——翻车是技能调了不该调的工具产生副作用。做法allowed-tools 白名单收窄。generate-design 只放 stitch 工具加 Read/Write/Bash/web_fetch一个都不多给。可组合复用——翻车是把所有环节塞进一个技能又长又难维护。做法子流程委托给别的技能。generate-design 把图片上传委托给 upload-to-stitch把设计系统准备委托给 manage-design-system每个技能只管自己那段流程。打包成可分发插件plugin.json 与安装命令单个技能先放在.agents/skills/就能跑但要分发给别人得放进plugins/插件名/skills/并配一份 plugin.json字段作用示例值name插件标识stitch-designdescription一句话定位设计工作流描述version版本号1.0.0keywords检索标签design, mcp有了它插件就进入市场可安装列表。用户一行命令装整套也可只挑单个技能npx skills add google-labs-code/stitch-skills安装前置条件先完成 Stitch MCP 服务器配置——注册服务器、准备好凭据与环境变量。否则技能里的stitch*:*工具不会有任何响应。值得写的三个方向选题后马上开工校验转换场景是 Stitch 产出的 HTML 要进现有 Vue/Svelte 工程做法是写技能提取 HTML、转成目标框架、校验语法参考 extract-static-html 目录下三个脚本处理 HTML 的方式。数据解耦场景是设计内容写死在静态页里难以复用做法是写技能把页面文案、图表数据抽成外部 mock 数据文件参考 extract-static-html 的快照与后处理思路。批量设计生成场景是一份 JSON 里每条记录要一个列表页界面做法是写技能遍历数据、逐屏调用生成工具并产出变体参考 generate-design 的 Generate Variants 流程。贡献流程按 CONTRIBUTING.md 走Fork 仓库、建特性分支、提交、发起 Pull Request贡献者需签署 CLA。回到开头那个场景AI 出的界面总不合你的设计规范出路不是继续改提示词而是把规范写成一个技能。现在就可以去 clone 仓库拆开 generate-design 读一遍再为今晚的痛点建一个技能目录——明天你的助手就能一句话执行你的标准 【免费下载链接】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），仅供参考