📌 项目地址：google-labs-code/stitch-skills | ⭐ 6,642 颗星 | 🔧 TypeScript | 📜 未标注
这个项目是什么？
google-labs-code/stitch-skills 是一个遵循 Agent Skills 开放标准的技能和插件集合，专门为 Google Stitch MCP 服务器设计。它让诸如 Codex、Antigravity、Gemini CLI、Claude Code、Cursor 等编码代理拥有直接操作 Stitch 设计系统的能力——比如将前端代码转化为 Stitch 设计、管理设计组件、执行构建与实用工具等。
项目基于 TypeScript，目前拥有 6642 个 Star，来自 Google Labs 官方。
快速上手指南
安装分为两种方式：通过插件市场批量安装 或 选择性单独安装技能。前提是你的代理环境已经配置好 Stitch MCP 服务器（参考 Stitch MCP Setup Instructions）。
方式一：安装插件（推荐）
插件是预打包的技能组合，一次性配置后即可使用全部相关技能。
Codex（推荐使用 CLI）：
codex plugin marketplace add google-labs-code/stitch-skills --ref main
--sparse .agents/plugins
--sparse plugins/stitch-design
--sparse plugins/stitch-build
--sparse plugins/stitch-utilities
提示：
--sparse可选，用于只拉取指定路径，加快克隆速度。省略则会拉取整个仓库。
也可以在 Codex 的 UI 界面中操作：Settings → Plugin Marketplaces → Add，填入：
| 字段 | 值 |
|---|---|
| Source | https://github.com/google-labs-code/stitch-skills |
| Git ref | main |
| Sparse paths | （可选）.agents/plugins, plugins/stitch-design, plugins/stitch-build, plugins/stitch-utilities |
注册 marketplace 后，即可安装以下插件中的任意组合：
– stitch-design — 设计核心工作流
– stitch-build — 构建与组件技能
– stitch-utilities — 实用辅助技能
Claude Code 与 Cursor：
# Claude Code —— 安装到当前项目
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code
# Cursor —— 安装到当前工作区
npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor
方式二：选择性安装技能
如果你只需要特定技能，可以用 npx skills 命令：
npx skills add google-labs-code/stitch-skills
之后使用 npx plugins --help 和 npx skills --help 查看详细文档。
⚠️ 注意：Stitch Design Skills 通常存在相互依赖。如果选择单独安装，请确保将所需的所有依赖一并加入。
插件与技能的区别
- 插件（Plugins）：是一组技能的集合，安装插件后你的代理即可调用其中所有技能。适合希望直接获得完整设计工作流能力的用户。
- 技能（Skills）：单个原子操作。适合只需要特定功能（如“将代码转换为设计”）并且愿意手动处理依赖的用户。
以 stitch-design 插件为例，它包含至少一个技能：stitch::code-to-design——可以将前端代码（React、Vue 等）通过 HTML 提取 + 设计系统 + 上传流程，转换为 Stitch Design。Prompt 示例：”Upload the frontend code at /path/to/dashboard into a Stitch project named ‘Dashboard-Migration-2026’.“
适合谁？为什么值得关注？
这个项目的独特之处在于：它直接解决了 AI 编码代理与专业设计工具之间的“信息孤岛”问题。如果你已经使用或计划使用 Claude Code、Cursor、Gemini CLI 等工具编写前端代码，并且团队同时在使用 Google Stitch 进行设计管理，那么这套技能库可以让你在对话中直接完成“代码→设计”的迁移、组件的自动同步、甚至构建流程的触发——无需手动切换工具。
一个具体的场景：你正在用 Claude Code 重构一个 React 仪表盘，想让它在 Stitch 中有一个对应的设计版本以便设计师审阅。你只需在聊天中给出本地代码路径和 Stitch 项目名，Claude Code 通过 stitch::code-to-design 技能就能自动完成提取、转换和上传。整个过程不再是“写代码→导出截图→手动上传到设计工具”，而是“一句话交给代理”。
需要注意的事项
- 必须依赖 Stitch MCP 服务器：技能中的所有操作都通过 MCP 协议与 Stitch 后端通信，因此需要先正确配置 Stitch MCP（包括环境变量和凭证）。官方文档是关键参考。
- 技能之间存在依赖：README 明确说明“Stitch Design Skills often have inter-dependencies”，选择单独安装技能时要手动检查依赖，否则可能功能缺失。
- 许可证未明确：仓库目前没有 LICENSE 文件，使用前建议自行评估合规性。
- 项目处于早期阶段：虽然 Star 数高且来自 Google Labs，但技能数量有限（README 中仅展示了
stitch::code-to-design的示例），更多技能需要参考仓库内的插件目录（plugins/stitch-design/skills/等）。可以根据自己的需求观察社区更新频率。