4 步做出你自己的 Stitch 技能：Agent Skills 实战指南（完整版）-平芜编程栈

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-design
stitch-build	设计转代码	react-components、remotion、shadcn-ui
stitch-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：技能标识，部分工具要求小写短横线命名并与目录名一致
description：AI 判断"何时该用这个技能"的唯一依据，要写清做什么 + 何时触发。比如 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.json（name、description、version、keywords 等字段）。之后用户一行命令装整套，或者用npx skills add只挑单个技能装。

三个高价值练手选题

不知道写什么，官方 README 给了三个方向：

方向	说明	示例
校验转换	Stitch HTML 转其他 UI 框架并校验语法	转 Vue/Svelte 组件
数据解耦	静态设计内容拆成外部 mock 数据文件	页面文案、图表数据外置
设计生成	从给定数据在 Stitch 中生成新界面	从 JSON 批量生成列表页