手把手编写你的第一个 Stitch 技能Agent Skills 开放标准与 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-skillsstitch-skills 是围绕 Google Stitch 打造的 Agent Skills 技能库让 Claude Code、Cursor、Gemini CLI 等 AI 编码助手学会生成、编辑和管理 UI 设计。本文走先动手、后讲原理的路线先用 5 步做出一个能被真实触发、验证通过的最小技能再回头拆解 Agent Skills 标准为什么这么设计最后给出进阶技巧、插件分发方式和贡献路径。5 步搭出一个最小可用的 Stitch 技能不先讲理论。建个目录、写个文件几分钟内你的 AI 助手就能接住一个新任务 第 1 步建技能目录先克隆仓库如 https://gitcode.com/GitHub_Trending/st/stitch-skills 然后在任一插件的skills/下新建目录用 kebab-case小写短横线命名这个名字就是技能的 ID。比如做一个导出设计主题技能plugins/stitch-utilities/skills/export-theme/ ├── SKILL.md ├── scripts/ ├── references/ └── examples/其中只有 SKILL.md 是必须的另外三个目录可选。第 2 步写 SKILL.md文件分两部分开头的 frontmatter 块 自然语言正文。最小版本长这样--- name: stitch::export-theme description: 当用户要求把 Stitch 项目的设计 token颜色、字体、圆角导出为主题文件时通过 Stitch MCP 读取设计系统并写入本地 theme.json。 allowed-tools: - stitch*:* - Read - Write --- # Export Theme ## Overview 把 Stitch 项目的设计 token 导出为可复用的主题文件。 ## Prerequisites 已配置 Stitch MCP 服务器且项目已存在设计系统。 ## Steps 1. 调用 list_projects 定位目标项目。 2. 调用 list_design_systems 读取设计 token。 3. 将 token 写入 theme.json 并汇报结果。 ## Tips 若用户未指定项目先确认再执行。第 3 步按需配辅助文件scripts/放可执行脚本。官方 upload_to_stitch.py 就是用脚本绕过 base64 体积限制来上传图片的references/放专业知识库比如术语表、框架对照表供 AI 在执行关键步骤时查阅examples/放标准输出样例如 metadata.json给足参考AI 产出才不会跑偏。第 4 步放进助手可发现的路径把技能目录挪到 AI 编码助手会扫描的位置例如.agents/skills/或.claude/skills/。放对地方它才会被看见。第 5 步用自然语言提示词验证触发在助手里输入把当前项目的设计 token 导出成主题文件。如果助手主动加载你的 SKILL.md 并开始按步骤调用工具说明触发成功 ✅如果它无视说明书自己发挥回去改 description。为什么这么写Agent Skills 标准的逻辑回头看你刚才搭的结构遵循Agent Skills 开放标准一项技能就是一个文件夹AI 助手遇到相关任务时自动加载并照做。可以把技能理解成贴给 AI 的SOP 工单——助手像新员工接到任务先扫一眼板上的所有工单看到匹配的就打开照步骤执行。对应地SKILL.md 是工单主体scripts / references / examples 是附件执行脚本、参考手册、成品样例。官方 generate-design 技能 就是范例SKILL.md 定义完整的文本生成界面流程references/里放着 design-mappings.md 和 prompt-keywords.md 两份专业知识库examples/里是提示词增强前后的对照。再往上是插件Plugin把多张工单装进一个工具箱统一分发。仓库目前有三个箱子插件分工代表技能stitch-design核心设计工作流文/图生成界面、设计系统管理、代码转设计stitch-build设计转代码React 组件、Remotion 视频、shadcn/uistitch-utilities辅助工具提示词增强、DESIGN.md 生成、建站循环frontmatter 三字段AI 挑不挑它的依据助手不会翻开每张工单只看封皮——frontmatter 的三个字段name技能 ID保持 kebab-case 并与目录名一致仓库官方技能采用stitch::技能名的写法。descriptionAI 判断该不该用的唯一依据写清做什么 何时触发。例如 extract-static-html 明确写出用户只要保存 HTML或mock 视图时也要触发不给 AI 漏判的空间。allowed-tools工具白名单只有列出的工具可被调用越收敛越安全。stitch*:*放开全部 Stitch MCP 工具Read/Write则只允许读写文件。正文四模块一张完整的 SOP 工单正文是 AI照单执行的部分常见四个模块可对照 site-md 技能 学习Overview一句话说清技能目标Prerequisites前置条件如已配置 Stitch MCP 服务器缺依赖时尽早失败Steps分步流程每步指明调用哪个工具、传什么参数——写调用 list_design_systems 查询而不是处理设计系统Tips / References经验小贴士并链接 references/ 与 examples/ 中的知识文件AI 卡住时有据可查。四个进阶技巧让技能从能用到靠谱能触发和不跑偏之间差的是这几处细节description 用用户原话写把用户可能实际说出口的句子写进去。taste-design 把严格字体、校准配色、反对平庸 UI这些卖点都写进描述连气质都对得上。步骤写明分支条件如用户给了图片 → 走图片流程没给 → 走文本流程。stitch-loop 正是这样写的AI 才不会在岔路口乱选。敏感操作设确认检查点上传、覆盖这类动作明确写必须先经用户确认再执行可参考 upload-to-stitch 的写法。一个技能专注一件事复杂流程用委托拆分generate-design 把上传图片一步委托给 upload-to-stitch 技能完成各自保持小巧、可维护。归入插件体系一行命令分发出去单个技能写好后装进插件统一分发插件元信息在 plugin.jsonname、description、version、author、keywords 等字段注册信息在 marketplace.json声明每个插件的名称、本地来源路径和安装策略如安装时鉴权用户可用一条命令安装整套插件也可用npx skills add选择性安装单个技能。⚠️ 安装前记住一个前提技能依赖Stitch MCP 服务器。没有先完成 Stitch MCP 的环境配置技能里的stitch*:*工具根本调不通。接下来写什么三个高价值选题不知道做什么技能仓库 README 推荐了三个方向方向说明示例校验转换把 Stitch HTML 转为其他 UI 框架并校验语法转 Vue / Svelte 组件数据解耦把静态设计内容拆成外部 mock 数据文件页面文案、图表数据外置设计生成从给定数据在 Stitch 中生成新界面从 JSON 批量生成列表页贡献流程遵循 CONTRIBUTING.mdFork 仓库 → 建分支 → 提交 → 发起 Pull Request需签署 CLA。收尾按 Agent Skills 标准建好目录把何时用、怎么用写进 SKILL.md再用 scripts、references、examples 补齐细节你就已经写出了自己的第一个 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），仅供参考