如何从零创建 stitch-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 技能总差点意思本文带你打开 stitch-skills 仓库照着标杆样板从零开始创建属于自己的 Stitch 技能全程落到真实文件看完就能动手。Agent Skills 标准速览组件对照表Agent Skills是一个开放标准把一项技能打包成一个文件夹AI 编码助手Claude Code、Cursor、Gemini CLI 等遇到相关任务时会自动加载其中的说明并按步执行。stitch-skills 仓库里所有技能都遵循同一套标准结构组件职责什么时候需要它SKILL.md主文件讲清何时用、怎么一步步做每个技能必需scripts/可执行脚本干 AI 自己干不了的活需要发网络请求、校验文件时references/知识库术语对照表、框架映射AI 执行时要查专业知识时examples/标准输出样例演示合格长什么样输出格式固定、需要示范时光记住组件名还不够下面拿仓库里最典型的样本拆开看。拆解标杆样本generate-design 的目录形态选 generate-design它是核心设计工作流的入口四个组件占了三个。plugins/stitch-design/skills/generate-design/ ├── SKILL.md # 主文件提示词增强流水线 四条执行流程 ├── references/ │ ├── design-mappings.md # 模糊词 → 专业 UI 术语的映射表 │ └── prompt-keywords.md # 组件命名、形容词、色彩角色词库 └── examples/ └── enhanced-prompt.md # 提示词增强前后的完整对比SKILL.md的正文把流程切成从文本生成、从图片生成、编辑、变体四条每步都写明调哪个工具、传什么参数design-mappings.md与prompt-keywords.md是执行时要翻查的术语知识enhanced-prompt.md则演示合格输出长什么样。它没有scripts/目录——不需要就不建目录按需生长。看懂了目录下一步看主文件内部怎么写。SKILL.md 逐段讲解元数据三字段与正文四模块元数据三字段怎么写打开任何SKILL.md开头是 frontmatter 元数据相当于菜谱卡上适用菜品那一栏--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens... allowed-tools: - stitch*:* - Bash - Read - Write ---name技能标识。部分助手如 OpenCode要求小写短横线格式kebab-case且与目录名一致descriptionAI 判断何时该用这个技能的唯一依据像店门口的招牌——要写清做什么 何时触发把用户可能说的原话也写进去allowed-tools工具白名单像一串钥匙只开列出的门。对比taste-design只开放了StitchMCP、Read、Write三项越收敛越安全正文四模块的组织建议Overview一句话说清技能目标参考taste-design的开篇Prerequisites写明前置条件如已配置 Stitch MCP 服务器Steps编号步骤每步指明调哪个工具、传什么参数这是 AI 照单执行的部分Tips / References踩坑经验收尾并链到references/与examples/里的知识文件 正文不必贪长generate-design 把大段术语表拆进references/主文件只保留执行时要做的动作。结构都清楚了现在动手。从零开始五步搭出并本地验证你的第一个技能建目录在 plugins/stitch-design/skills/ 下新建export-theme/也可放进你自建的插件写主文件按三字段 四模块写SKILL.md流程部分对照 generate-design配辅助文件可选脚本放scripts/参考upload_to_stitch.py它用脚本绕过 base64 上传的 token 限制知识放references/标准输出放examples/参考metadata.json放入可发现路径把整个技能文件夹复制到.claude/skills/或.agents/skills/OpenCode 用户放.opencode/skills/触发测试 ✅在助手里说一句技能场景内的自然语言如把当前主题配置导出成文件看它是否加载你的技能、按步骤执行没触发就回头改description把触发词写得更具体跑通只是及格线再补几条仓库里的实战经验。避坑与进阶五条仓库里的真实经验description 要写用户原话extract-static-html 在描述里明确用户只说保存 HTML时也要用高频口语写进去触发率立刻上来分支条件要可决策stitch-loop 给出用户给了图片 → 走图片流程这类明确分支AI 才不会在两条路上犹豫敏感操作设确认检查点upload-to-stitch在上传步骤前用 WARNING 写明必须先向用户展示文件清单确认后才执行一个技能只干一件事generate-design 把上传环节直接委托给 upload-to-stitch复杂流程靠委托拆开专业知识下沉到 references/vue.md、angular.md这类框架对照表独立成文件主文件保持精简技能自己用没问题后再想想怎么给别人用。分发与生态安装方式与前置依赖单个技能文件夹归入 stitch-skills 的插件体系后才能被统一分发插件元信息写在plugin.jsonname、description、version、keywords等字段marketplace.json再声明每个插件的来源路径与安装策略。你的技能合入对应插件的skills/目录后用户一行命令装整包或挑单个技能# 整插件安装装到当前项目 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code # 单技能选择式安装 npx skills add google-labs-code/stitch-skills 所有技能都依赖Stitch MCP 服务器先完成 MCP 注册与 API Key 配置stitch:** 工具才能被真正调用技能之间还有依赖选择式安装时记得把依赖项一起带上。分发的事说完了回头看你该写什么。起步指南三个推荐选题方向与贡献流程不知道你的 stitch-skills 技能选题写什么README.md列了三个高价值方向选题方向解决什么问题可直接落地的例子校验转换Stitch HTML 转成其他 UI 框架并校验语法把 Stitch 界面转 Vue / Svelte 组件并查错数据解耦静态设计内容拆成外部 mock 数据文件页面文案、图表数据外置为 JSON设计生成从给定数据在 Stitch 中生成新界面从 JSON 批量生成列表页贡献流程按CONTRIBUTING.md走Fork 仓库 → 建功能分支 → 提交推送 → 发起 Pull Request需签署 CLA。今晚就从上面三个方向里挑一个clone 仓库写下你第一个 Stitch 技能的 frontmatter本地验证跑通后把 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-skills 技能：写给新手的完整教程
如何从零创建 stitch-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 技能总差点意思本文带你打开 stitch-skills 仓库照着标杆样板从零开始创建属于自己的 Stitch 技能全程落到真实文件看完就能动手。Agent Skills 标准速览组件对照表Agent Skills是一个开放标准把一项技能打包成一个文件夹AI 编码助手Claude Code、Cursor、Gemini CLI 等遇到相关任务时会自动加载其中的说明并按步执行。stitch-skills 仓库里所有技能都遵循同一套标准结构组件职责什么时候需要它SKILL.md主文件讲清何时用、怎么一步步做每个技能必需scripts/可执行脚本干 AI 自己干不了的活需要发网络请求、校验文件时references/知识库术语对照表、框架映射AI 执行时要查专业知识时examples/标准输出样例演示合格长什么样输出格式固定、需要示范时光记住组件名还不够下面拿仓库里最典型的样本拆开看。拆解标杆样本generate-design 的目录形态选 generate-design它是核心设计工作流的入口四个组件占了三个。plugins/stitch-design/skills/generate-design/ ├── SKILL.md # 主文件提示词增强流水线 四条执行流程 ├── references/ │ ├── design-mappings.md # 模糊词 → 专业 UI 术语的映射表 │ └── prompt-keywords.md # 组件命名、形容词、色彩角色词库 └── examples/ └── enhanced-prompt.md # 提示词增强前后的完整对比SKILL.md的正文把流程切成从文本生成、从图片生成、编辑、变体四条每步都写明调哪个工具、传什么参数design-mappings.md与prompt-keywords.md是执行时要翻查的术语知识enhanced-prompt.md则演示合格输出长什么样。它没有scripts/目录——不需要就不建目录按需生长。看懂了目录下一步看主文件内部怎么写。SKILL.md 逐段讲解元数据三字段与正文四模块元数据三字段怎么写打开任何SKILL.md开头是 frontmatter 元数据相当于菜谱卡上适用菜品那一栏--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens... allowed-tools: - stitch*:* - Bash - Read - Write ---name技能标识。部分助手如 OpenCode要求小写短横线格式kebab-case且与目录名一致descriptionAI 判断何时该用这个技能的唯一依据像店门口的招牌——要写清做什么 何时触发把用户可能说的原话也写进去allowed-tools工具白名单像一串钥匙只开列出的门。对比taste-design只开放了StitchMCP、Read、Write三项越收敛越安全正文四模块的组织建议Overview一句话说清技能目标参考taste-design的开篇Prerequisites写明前置条件如已配置 Stitch MCP 服务器Steps编号步骤每步指明调哪个工具、传什么参数这是 AI 照单执行的部分Tips / References踩坑经验收尾并链到references/与examples/里的知识文件 正文不必贪长generate-design 把大段术语表拆进references/主文件只保留执行时要做的动作。结构都清楚了现在动手。从零开始五步搭出并本地验证你的第一个技能建目录在 plugins/stitch-design/skills/ 下新建export-theme/也可放进你自建的插件写主文件按三字段 四模块写SKILL.md流程部分对照 generate-design配辅助文件可选脚本放scripts/参考upload_to_stitch.py它用脚本绕过 base64 上传的 token 限制知识放references/标准输出放examples/参考metadata.json放入可发现路径把整个技能文件夹复制到.claude/skills/或.agents/skills/OpenCode 用户放.opencode/skills/触发测试 ✅在助手里说一句技能场景内的自然语言如把当前主题配置导出成文件看它是否加载你的技能、按步骤执行没触发就回头改description把触发词写得更具体跑通只是及格线再补几条仓库里的实战经验。避坑与进阶五条仓库里的真实经验description 要写用户原话extract-static-html 在描述里明确用户只说保存 HTML时也要用高频口语写进去触发率立刻上来分支条件要可决策stitch-loop 给出用户给了图片 → 走图片流程这类明确分支AI 才不会在两条路上犹豫敏感操作设确认检查点upload-to-stitch在上传步骤前用 WARNING 写明必须先向用户展示文件清单确认后才执行一个技能只干一件事generate-design 把上传环节直接委托给 upload-to-stitch复杂流程靠委托拆开专业知识下沉到 references/vue.md、angular.md这类框架对照表独立成文件主文件保持精简技能自己用没问题后再想想怎么给别人用。分发与生态安装方式与前置依赖单个技能文件夹归入 stitch-skills 的插件体系后才能被统一分发插件元信息写在plugin.jsonname、description、version、keywords等字段marketplace.json再声明每个插件的来源路径与安装策略。你的技能合入对应插件的skills/目录后用户一行命令装整包或挑单个技能# 整插件安装装到当前项目 npx plugins add google-labs-code/stitch-skills --scope project --target claude-code # 单技能选择式安装 npx skills add google-labs-code/stitch-skills 所有技能都依赖Stitch MCP 服务器先完成 MCP 注册与 API Key 配置stitch:** 工具才能被真正调用技能之间还有依赖选择式安装时记得把依赖项一起带上。分发的事说完了回头看你该写什么。起步指南三个推荐选题方向与贡献流程不知道你的 stitch-skills 技能选题写什么README.md列了三个高价值方向选题方向解决什么问题可直接落地的例子校验转换Stitch HTML 转成其他 UI 框架并校验语法把 Stitch 界面转 Vue / Svelte 组件并查错数据解耦静态设计内容拆成外部 mock 数据文件页面文案、图表数据外置为 JSON设计生成从给定数据在 Stitch 中生成新界面从 JSON 批量生成列表页贡献流程按CONTRIBUTING.md走Fork 仓库 → 建功能分支 → 提交推送 → 发起 Pull Request需签署 CLA。今晚就从上面三个方向里挑一个clone 仓库写下你第一个 Stitch 技能的 frontmatter本地验证跑通后把 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），仅供参考