stitch-skills 完整指南如何编写、验证并发布你的第一个 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你让 AI 助手生成一个设置页产出质量全靠运气stitch-skills 是围绕 Google Stitch 搭建的一个技能库遵循 Agent Skills 开放标准让 Claude Code、Cursor、Gemini CLI 这类编码助手学会生成、编辑和管理 UI 设计。读完这篇教程你能亲手写、验证并发布一个属于自己的 Stitch 技能。拆开一个技能文件夹四件套怎么分工这节解决技能到底长什么样的问题。把一个技能文件夹放进工位它就相当于一份给 AI 的 SOP 手册——AI 遇到相关任务时自动翻开它照着执行。打开 generate-design 这个官方技能目录长这样skills/技能名/ ├── SKILL.md # SOP 手册核心 ├── scripts/ # 可执行脚本校验、网络请求 ├── references/ # 知识库清单、风格对照表 └── examples/ # 金标准示例SKILL.md是手册本体告诉 AI 目标、前置条件和分步操作。scripts/放动手干活的代码。比如 upload_to_stitch.py 用脚本直接走 HTTP 上传绕过 MCP 工具 base64 输出的 token 上限。references/是专业知识库。generate-design 靠 design-mappings.md 把好看的头部翻译成带毛玻璃效果的粘性导航栏。examples/给出长这样才合格的样例输出比如增强前后的提示词对比。技能之间还能互相委托。generate-design 上传图片这步直接交给 upload-to-stitch 技能做发现项目没有设计系统时先委托 manage-design-system 技能补上。单个技能专注一件事复杂流程靠委托拆分。更大的分组单位是插件仓库把技能装进三个插件里插件定位代表技能stitch-design核心设计工作流generate-design、code-to-designstitch-build设计转代码react-components、remotionstitch-utilities辅助工具enhance-prompt、stitch-loop动手五步做出你的第一个 Stitch 技能这节解决从零到能跑的问题。先 clone 仓库git clone https://gitcode.com/GitHub_Trending/st/stitch-skills然后按下面走。第一步建目录在plugins/你的插件/skills/下新建技能目录比如skills/export-theme/。目录名就是技能名后面的 frontmatter 要和它对齐。第二步frontmatter 三字段怎么填SKILL.md 开头是一段 YAML frontmatter相当于技能的身份证--- name: export-theme description: 导出项目主题 token 为 JSON。当用户说导出主题或保存配色时使用。 allowed-tools: - stitch*:* - Read - Write ---name技能标识。部分助手如 OpenCode要求小写短横线格式kebab-case且与目录名一致仓库里也有stitch::前缀的命名风格选一种并保持统一。descriptionAI 判断何时该用这个技能的唯一依据。写清做什么 用户可能说的原话触发率就高。allowed-tools白名单只放行需要的工具越收敛越安全。第三步正文写四段式正文是操作手册按清单把四块写全目标Overview一句话说清这个技能产出什么前置条件Prerequisites如已配置 Stitch MCP 服务器项目里至少有一个屏幕步骤Steps每步指明调用哪个工具、传什么参数分支写清条件比如用户给了图片 → 走图片流程参考资料References链接 references/ 与 examples/ 里的文件并留几条经验提示第四步按需补辅助文件要跑脚本放scripts/有对照表、关键词清单放references/有标准输出格式放examples/。涉及上传、覆盖这类敏感操作写明检查点执行前必须把文件清单交给用户确认可对照 upload-to-stitch 的写法。第五步本地触发验证把技能文件夹放进助手能发现的路径如.agents/skills/或.claude/skills/OpenCode 还识别.opencode/skills/然后用一句自然语言提示词测试说了导出主题技能被加载且步骤走通就算验证成功。没触发回看 description把用户原话补进去。上路把技能并入插件体系并提交仓库这节解决怎么分发、去哪投稿的问题。用 plugin.json 声明你的技能把技能归入某个插件后在 plugin.json 里补上插件元信息name、description、version、author、license和keywords等字段。仓库根部的 marketplace.json 负责把每个插件注册进市场声明名称、来源路径和安装策略。一行命令装进助手安装前有个前提技能依赖Stitch MCP 服务器得先按官方文档完成 Stitch MCP 的环境配置否则 frontmatter 里的stitch*:*工具调不起来。配好之后用户一行命令就能装npx skills add google-labs-code/stitch-skills选装单个技能时注意技能间依赖把被委托的技能一起带上。仓库推荐了 3 个高价值选题不知道写什么看 README.md 给出的方向方向做什么示例校验转换Stitch HTML 转成其他 UI 框架并校验语法转 Vue/Svelte 组件数据解耦静态设计内容拆成外部 mock 数据文件文案、图表数据外置设计生成从给定数据在 Stitch 中生成新界面从 JSON 批量生成列表页贡献路径Fork → 分支 → PR按 CONTRIBUTING.md 走Fork 仓库 → 建功能分支 → 提交改动 → 推送 → 发起 Pull Request。投稿需要签署 Google 的 CLA贡献者许可协议签过任意一个项目的通常不用再签。三句话带走按 Agent Skills 标准建目录SKILL.md 把何时用、怎么用讲清楚scripts、references、examples 让技能真正可执行。技能文件夹就是给 AI 的 SOP 手册description 决定它何时被翻开插件体系决定它如何被安装。【免费下载链接】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），仅供参考