stitch-skills 实战教程3 步写出你的第一个 Stitch 技能让 AI 稳定产出 UI 设计【免费下载链接】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 设计。更关键的是它遵循 Agent Skills 开放标准——你完全可以照着它的规范把自己的经验写成一个技能文件夹让助手随时调用。这篇教程带你从零搭出一个合规范的技能。先看成品一个能跑的 Stitch 技能长什么样在讲规则之前先看目标。以官方技能 generate-design 为例它的全部家底就这些路径plugins/stitch-design/skills/generate-design/generate-design/ ├── SKILL.md # 给 Agent 的任务说明书 ├── references/ │ ├── design-mappings.md # UI/UX 术语对照知识 │ └── prompt-keywords.md # Stitch 最听得懂的提示词关键词 └── examples/ └── enhanced-prompt.md # 提示词增强前后的对比样例它的产出效果是这样的你说一句给一个约会灵感类移动应用做 browse 标签页助手会加载这份说明书先把模糊描述改写成带页面结构的专业提示词再调用generate_screen_from_text生成屏幕最后把 HTML 和截图下载到本地.stitch/designs目录。整个过程不需要你介入。注意 SKILL.md 里有一行关键委托用户给图片时把上传这步交给 upload-to-stitch 技能见plugins/stitch-design/skills/generate-design/SKILL.md的 Generate from Image 流程。技能不是孤岛它们可以互相调用generate-design 负责设计upload-to-stitch 负责传文件。这是这个仓库里最重要的架构习惯后面你自己写技能时也应该沿用。仓库怎么组织三个插件 一个注册表stitch-skills 按插件Plugin分组技能每个插件是若干技能的集合stitch-design核心设计工作流——文/图生成界面、编辑现有屏幕、管理设计系统、前端代码转 Stitch 设计、静态 HTML 提取、素材上传stitch-build设计转代码——React 组件、React Native、Remotion 演示视频、shadcn/ui 集成、Vite 仪表盘stitch-utilities辅助工具——提示词增强、DESIGN.md 生成、多页站点构建循环、反平庸 UI 标准注册入口是.agents/plugins/marketplace.json它声明每个插件的名称、本地路径如./plugins/stitch-design和安装策略AVAILABLEON_INSTALL鉴权。助手靠它发现插件你靠它决定装哪些。SKILL.md 的 frontmatter 三个字段怎么写frontmatter 是技能的身份证决定能不能被找到、被允许干什么。对照 generate-design 的开头--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants... allowed-tools: - stitch*:* - Bash - Read - Write ---三个字段各自要回答一个问题name —— 技能注册到哪个身份填技能标识即可。有个坑部分工具如 OpenCode要求小写短横线命名且必须与目录名一致stitch::xxx这种写法在那类环境里需要改名后才会被加载。description —— AI 凭什么决定用不用这个技能这是 AI 判断触发与否的唯一依据写法公式是做什么 何时触发。反面教材是设计相关技能这种废话正面参考是 extract-static-htmlplugins/stitch-design/skills/extract-static-html/SKILL.md它连用户只说保存 HTML或mock 视图时也要用都写明了。allowed-tools —— 技能允许碰哪些工具白名单机制越收敛越安全。用到 Stitch 工具就写stitch*:*通配用到文件读写就加Read/Write用不到的一个都别给。正文部分对着plugins/stitch-utilities/skills/design-md/SKILL.md学就够了四个模块Overview一句话讲清这个技能干什么Prerequisites前置条件比如Stitch MCP 服务器已配置并可运行Steps分步流程每步写明调用哪个工具、传什么参数Tips / References经验小贴士并链接 references/ 和 examples/ 里的知识文件辅助文件什么时候才需要上场scripts、references、examples 三个目录都是可选的按需取用判断标准很简单需要 scripts/当流程里有跑一遍代码的环节。典型案例是 upload-to-stitch 的scripts/upload_to_stitch.pyMCP 工具直接传文件会撞 base64 输出 token 上限脚本绕开 MCP 走 HTTP 直接上传。你的技能若涉及校验、批量请求、本地文件处理就该配脚本。需要 references/当有专业知识值得沉淀。例如 extract-design-md 的references/里放着 angular.md、vue.md、react-tailwind.md 等框架对照表generate-design 放的是术语映射和关键词表。SKILL.md 正文不必塞这些链接过去就行。需要 examples/当技能有标准输出格式。例如 manage-design-system 的examples/metadata.json定义了项目元数据长什么样design-md 的examples/DESIGN.md是一份金标准输出样例。有了它AI 的产出才稳定。从本地跑通到分发验证、注册以及最容易踩的坑本地验证路径。把技能文件夹放进助手可发现的路径——.agents/skills/或.claude/skills/OpenCode 还会识别.opencode/skills/然后用一句自然语言提示词实测AI 是否加载了说明书分支走对了吗上传前是否停下来要确认了这一步别省它决定了技能是真能用还是看起来能用。插件注册。单个技能写好后归入插件统一分发plugin.json里写元信息参考plugins/stitch-design/plugin.json包含 name、description、version、keywords 等字段再确保.agents/plugins/marketplace.json里有对应条目。用户侧可以整包安装也可以用npx skills add选择性安装单个技能——注意技能之间常有依赖只挑一个装之前先看它 SKILL.md 里委托了谁。最大的坑MCP 没配好。所有技能都依赖 Stitch MCP 服务器。没按 Stitch 官方文档完成服务器注册和凭证配置时技能照样能被发现、被加载但正文里那些stitch*:*工具无法真正调用流程会卡死在第一步。先配 MCP再玩技能顺序别反。避坑清单四条让技能好用与能用的分界线description 写得不可触发 → AI 永远不选它。修正把用户可能说的原话写进去。参考 taste-designplugins/stitch-utilities/skills/taste-design/SKILL.md它把严格字体、校准配色、反平庸 UI这些卖点直接写进了 description。步骤没有分支条件 → AI 在模糊输入下跑偏。修正像 stitch-loop 那样给出明确路由——用户给了图片 → 走图片流程用户要改现有屏幕 → 走编辑流程每个分支对应独立小节。敏感操作缺确认点 → 文件被擅自上传或覆盖。修正像 upload-to-stitchplugins/stitch-design/skills/upload-to-stitch/SKILL.md的 Checkpoint 段落那样写明必须暂停列出文件路径、大小、类型等用户明确同意后才执行脚本。一个技能塞了太多职责 → 又长又脆。修正单一职责原则复杂流程拆出去委托给其他技能就像 generate-design 把上传交给 upload-to-stitch。练手选题与贡献入口不知道写什么README 里点了三个高价值方向直接抄作业校验转换把 Stitch 产出的 HTML 转成其他 UI 框架Vue、Svelte 等并校验语法数据解耦把静态设计里的文案、图表数据拆成外部 mock 数据文件设计生成从给定的一组数据比如一份 JSON在 Stitch 里批量生成新设计界面贡献流程一句话Fork 仓库 → 建特性分支 → 提交 → 发 Pull Request前提是签了 CLAContributor License Agreement。想拉本地仓库研究源码的话clone 地址是 https://gitcode.com/GitHub_Trending/st/stitch-skills 。收束回到最初那两句话按 Agent Skills 标准把目录搭起来——SKILL.md 定核心scripts、references、examples 按需武装再用 frontmatter 和正文把何时用、怎么用讲到 AI 能照单执行的程度。对照仓库里 stitch-design 和 stitch-utilities 下的十几个现成技能多读几遍你的第一个 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辅助生成（AIGC），仅供参考