快速看懂 Agent Skills 标准4 步写出你的 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别再反复解释设计规则你用 Claude Code 或 Cursor 生成过界面吗十次里有十次要重复同一套要求主色别用默认蓝、间距走 8pt 栅格、卡片不加圆角。AI 是个健忘症会话一关全忘光。Agent Skills 开放标准就是为这事而来的把一项技能打包成一个文件夹SKILL.md 就是给 AI 看的说明书AI 遇到相关任务会自动加载、照着执行。stitch-skills 是专为 Google Stitch 打造的技能库遵循这套标准让 Claude Code、Cursor、Gemini CLI 这些 AI 编码助手学会生成、编辑和管理 UI 设计——装好技能规则就固化在文件里不用你再说第二遍。一个类比讲透 Skill 本质写给 AI 新人的任务说明书新人入职设计团队你不会直接让他上会而是丢一份说明书这岗位干什么、登录哪个系统、第一步做什么、出错去哪查。Skill 就是这样一份说明书读者是刚入职的 AI。它检测到生成界面这类任务就自动加载对应的 SKILL.md 逐步执行全程不需要人提醒。每个技能的文件夹长得都一样这就是 Agent Skills 目录结构的蓝图plugins/插件名/skills/技能名/ ├── SKILL.md # 任务说明书核心必需 ├── scripts/ # 可执行脚本校验、网络请求等 ├── references/ # 知识库清单、风格指南 └── examples/ # 高质量示例参考样板技能按插件组织一个插件就是一组同类职责的技能插件职责代表技能stitch-design核心设计工作流文/图生成界面、管理设计系统、代码转设计generate-design、upload-to-stitchstitch-build设计转代码组件与视频React 组件、Remotion、shadcn/uistitch-utilities辅助工具提示词增强、设计文档生成enhance-prompt、design-md、stitch-loop从官方标准答案反推规范诀窍是先看标准答案再动笔。官方 generate-design 技能 就是最好的教材拆成三块看。frontmatter 决定技能会不会被选中。frontmatter 是文件顶部被两行---包起来的元数据块相当于一张身份证只有三个字段--- name: stitch::generate-design description: 从文本或图片生成新界面 编辑现有界面并生成设计变体...节选 allowed-tools: - stitch*:* - Read - Write ---name技能标识。部分工具要求小写短横线格式kebab-case全小写、单词间用连字符且与目录名一致。descriptionAI 判断何时该用这个技能的唯一依据。写清楚做什么 何时触发缺一不可。allowed-tools白名单像小区门禁只有名单上的工具能进门名单越短越安全。正文是 AI 照着走的执行手册。完整正文分四块一句话说清目标、前置条件比如已配置 Stitch MCP 服务器、分步流程每步指明调用哪个工具、传什么参数、经验贴士。仓库里的 design-md 技能读一遍就有感觉。三类辅助文件各管一摊。scripts 放要跑的东西——upload-to-stitch 里的上传脚本就是靠它绕开 base64 上传限制references 放沉淀的专业知识——extract-design-md 下的框架对照表Angular、Vue 各一份examples 放输出的参考样板比如 manage-design-system 里的 metadata.json。还有个进阶玩法技能之间可以委托。委托就是项目里的这活归你——generate-design 把上传图片这一步交给 upload-to-stitch 技能发现项目没有设计系统就先委托给 manage-design-system。每个技能只管好自己那一摊复杂流程自然就拆开了。实战四步写出能被触发的技能第一步选题一个技能只管一件事。别想着生成 上传 校验打包进一个技能。诀窍是一句话说完这件事就合格说不完就拆。第二步写可触发的 description。AI 只看 description 决定用不用你所以要把用户可能说的原话写进去。taste-design 技能 把严格字体、校准配色、反对平庸 UI全写进了 description用户一句设计太丑了就能命中。第三步设计可决策的流程。每步给明确分支条件比如用户给了图片 → 走图片流程没给 → 走文本流程AI 才不会跑偏。这里有个坑上传、覆盖这类敏感操作必须写明先向用户展示文件清单、确认后再执行upload-to-stitch 就是这么设的检查点。第四步实测触发。把技能文件夹放进助手能发现的路径比如.agents/skills/或.claude/skills/发一句自然语言提示词看它接不接。不触发回第二步重写 description。技能不听话的四个常见症状与解法按症状 → 原因 → 对策对号入座技能不触发→ description 写成工程腔负责屏幕生成模块AI 对不上用户的说法 → 补上用户真实会说的触发短语如保存 HTML做个 mock 视图。AI 乱调工具、越权操作→ allowed-tools 白名单放太宽 → 收敛到stitch*:* Read/Write 这类最小集合多余的删干净。流程跑偏、输出乱来→ 步骤缺分支条件和确认点 → 写成如果……就走……敏感操作注明等用户确认。技能越写越臃肿越用越费劲→ 一个文件夹塞了太多职责 → 拆成多个技能靠委托互相调用。从单个技能到可分发的插件单个技能写完归入插件统一分发。插件元信息写在plugin.jsonstitch-design 的这份包含 name、description、version、keywords 等字段marketplace 文件.agents/plugins/marketplace.json再声明每个插件的名称、来源路径和安装策略。用户一行命令装整套也能用npx skills add只挑单个技能装。有一个硬前提技能依赖 Stitch MCP 服务器。MCP 是让 AI 调用外部工具的通信协议服务器没配好技能里的stitch*:*工具全是空话。先配好环境再装技能。不知道写什么选题仓库 README 给了三个高价值方向校验转换把 Stitch HTML 转成 Vue、Svelte 等 UI 框架组件并校验语法。数据解耦把静态设计内容拆成外部 mock 数据文件页面文案、图表数据外置。设计生成从给定数据在 Stitch 中生成新设计界面比如从 JSON 批量生成列表页。贡献流程在 CONTRIBUTING.md 里写得很清楚Fork 仓库 → 建分支 → 提交 → 发起 Pull Request需签署 CLA。上线前对照这 5 条自检Stitch 技能的核心就一句话按标准建目录在 SKILL.md 里讲清何时用、怎么用。上线前过一遍这五条description 里有用户的原话且实测提示词能触发allowed-tools 白名单收敛到最小集合了上传、覆盖等敏感操作有等用户确认检查点scripts / references / examples 三个目录里只放了真正用得上的已在 plugin.json 和 marketplace 文件里声明别急着从零造轮子先把 stitch-design 和 stitch-utilities 里的现成技能读几遍官方技能就是最好的参考答案读完就能动笔 【免费下载链接】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），仅供参考