4 步做出你自己的 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你让 Claude Code 或 Cursor 画界面结果每张都不一样风格乱、没法复用、改一处崩全局。问题不在 AI 手里没活而在你从没告诉它该怎么干活。stitch-skills 就是解这个问题的技能库它专为 Google Stitch 打造遵循 Agent Skills 开放标准让 Claude Code、Cursor、Gemini CLI 等 AI 编码助手学会生成、编辑和管理 UI 设计。读完这篇你能从零写出一份 SKILL.md让自己的 Stitch 技能跑起来。Agent Skills 到底是个什么东西一句话看懂开放标准Agent Skills 是一套说明书格式共识把一项任务打包成一个文件夹里面放给 AI 看的SKILL.md再配可选的脚本、知识库和示例。AI 碰到相关任务时自动加载这份说明书照着执行。它不绑定任何厂商只要符合标准支持的助手都能读。三大插件的分工stitch-skills 按插件组织技能一个插件就是一组技能插件作用代表技能stitch-design核心设计工作流generate-design、upload-to-stitch、code-to-designstitch-build设计转代码react-components、remotion、shadcn-uistitch-utilities辅助工具design-md、stitch-loop、taste-design各插件的名称、来源路径和安装策略统一登记在 marketplace.json 里。一个技能的代码长在哪标准目录四件套每个技能的目录都长这样skills/技能名/ ├── SKILL.md # 给 AI 看的说明书核心 ├── scripts/ # 可执行脚本 ├── references/ # 专业知识库 └── examples/ # 可对标输出的示例一句话技能文件夹 说明书 工具箱 样张集。以官方 generate-design 为例真实解剖generate-design 最值得读SKILL.md写死了文本生成界面的完整流程references/里躺着 design-mappings.md 和 prompt-keywords.md 两个专业知识库examples/给了提示词增强前后的对照。注意技能之间会互相委托generate-design 的从图片生成流程走到上传这一步直接把活交给 upload-to-stitch 技能——后者用 upload_to_stitch.py 走 HTTP 直传绕开了 MCP 工具的 base64 大小限制。怎么让 AI看得懂frontmatter 身份证的三字段写法要点SKILL.md 开头是 frontmatter相当于技能的身份证name技能标识部分工具要求小写短横线命名并与目录名一致descriptionAI 判断何时该用这个技能的唯一依据要写清做什么 何时触发。比如 extract-static-html 就写明用户只说保存 HTML或mock 视图时也要触发allowed-tools白名单式限制技能可调用的工具收敛得越窄越安全正文四模块操作手册正文是给 Agent 的操作手册照这四个模块搭就行Overview一句话说清目标Prerequisites前置条件例如已配置 Stitch MCP 服务器Steps编号流程每步写清调用哪个工具、传什么参数Tips / References经验小贴士并链接 references/ 与 examples/ 里的文件两部分拼起来大概是这样--- name: stitch::generate-design description: 从文本或图片生成新界面用提示词和设计系统令牌编辑现有界面... allowed-tools: - stitch*:* - Read - Write ---⚠️ 两个常见坑description 写得模糊AI 永远不触发allowed-tools 不收敛技能能调的工具一抓一大把行为不可控。自己做一个要多久一个下午内可以跑完这 4 步建目录在plugins/你的插件/skills/下新建技能目录比如skills/export-theme/写 SKILL.md按frontmatter 四模块写正文保证 AI 能照单执行配辅助文件要跑脚本放scripts/有框架对照表这类专业知识放references/可参考 extract-design-md 的 references/ 里 angular.md、vue.md 这类文件有固定输出格式放examples/如 manage-design-system 的 metadata.json本地触发测试把技能文件夹放进助手能发现的路径如.agents/skills/或.claude/skills/用一句自然语言提示词触发看它是否命中、流程是否跑通技能好不好用差在哪description 要可触发把用户可能说的原话写进去。taste-design 直接把严格字体、校准配色、反对平庸 UI这些卖点塞进了 description步骤要可决策写明分支条件。stitch-loop 会明确用户给了图片 → 走图片流程AI 才不会跑偏敏感操作设确认检查点涉及上传、覆盖时写死必须用户确认后再执行可对照 upload-to-stitch 上传步骤里的 checkpoint 写法一个技能只干一件事复杂流程靠委托拆给别的技能每个技能保持专注写好了怎么让更多人用上plugin.json 打包与安装命令把插件元信息写进 plugin.jsonname、description、version、keywords 等字段。之后用户一行命令装整套或者用npx skills add只挑单个技能装。三个高价值练手选题不知道写什么官方 README 给了三个方向方向说明示例校验转换Stitch HTML 转其他 UI 框架并校验语法转 Vue/Svelte 组件数据解耦静态设计内容拆成外部 mock 数据文件页面文案、图表数据外置设计生成从给定数据在 Stitch 中生成新界面从 JSON 批量生成列表页贡献流程 Stitch MCP 配置前提先记一个前提技能依赖Stitch MCP 服务器得先完成 Stitch MCP 环境配置stitch*:*工具才真正可调。贡献流程克隆仓库git clone https://gitcode.com/GitHub_Trending/st/stitch-skills→ 建分支 → 提交 → 发起 Pull Request需签署 CLA细节见 CONTRIBUTING.md。回到开头按 Agent Skills 标准建目录用 SKILL.md 讲清何时用、怎么用再用 scripts/references/examples 把它武装起来你的 AI 助手就有了稳定的设计手艺。克隆仓库把 stitch-design、stitch-utilities 里现成技能各读两遍从三个选题里挑一个建目录、写出第一份 SKILL.md配置好 Stitch MCP把技能放进.agents/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辅助生成（AIGC），仅供参考