夜雨聆风你有没有这种经历——
想做个 App 界面，打开 Figma 画了半天，结果颜色搭配不协调、字体层级混乱、按钮大小不一致。
或者让 AI 帮你生成 UI，结果 AI 给你整了个"紫蓝渐变 + Inter 字体 + 圆角卡片"的模板。
设计不是你会用工具就行，而是要知道什么好看、什么好用。
现在，Google 开源了一套 AI 设计助手——让 AI Agent 帮你从设计到代码一条龙搞定。7.5K Star，Apache-2.0 协议。
文末获取 Stitch Skills 快速安装指南
Stitch Skills 就是干这个的。它是 Google 开源的一套 Agent Skills 库，专为 Google Stitch 设计系统服务——让 AI Agent 帮你生成设计、管理设计系统、提取设计规范、甚至直接把设计转换成 React 代码。7.5K Star，Apache-2.0 协议。
Stitch Skills 适用于前端开发者、UI/UX 设计师、产品经理、以及任何想让 AI 辅助设计工作的人。
- 三大插件套件 — Design（设计）、Build（构建）、Utilities（工具），覆盖从设计到代码的全流程
- 设计生成 — 从文字或图片生成新界面，编辑现有界面，创建设计变体
- 代码转换 — 把 Stitch 设计直接转成 React、React Native 组件
- 设计系统管理 — 上传 DESIGN.md，自动应用到所有界面
- 设计规范提取 — 从现有代码中提取设计系统，生成 DESIGN.md
- 多 Agent 兼容 — Codex、Claude Code、Cursor、Gemini CLI、Antigravity 全支持
🤖 三大插件套件
stitch-design（设计插件）
| Skill | 功能 | 示例 |
|---|---|---|
stitch::code-to-design |
React/Vue 代码转 Stitch 设计 | "把 /path/to/dashboard 上传到 Stitch" |
stitch::generate-design |
从文字/图片生成新界面 | "做一个约会 App 的浏览页" |
stitch::manage-design-system |
管理设计系统 | "上传 DESIGN.md 并应用到所有界面" |
stitch::extract-design-md |
从代码提取设计规范 | "扫描 /src 提取设计系统" |
stitch::extract-static-html |
提取静态 HTML 快照 | "提取 http://localhost:3000 的快照" |
stitch::upload-to-stitch |
上传资源到 Stitch | "上传 landing_page.html" |
stitch-build（构建插件）
| Skill | 功能 | 示例 |
|---|---|---|
stitch::react-components |
Stitch 设计转 React 组件 | "把所有界面转成 React 组件" |
stitch::react-native |
Stitch 设计转 React Native | "转成 React Native 组件" |
stitch::react-vite-dashboard |
转 React + Vite 仪表板 | "用 DESIGN.md 构建 DeFi 仪表板" |
stitch::remotion |
生成演示视频 | "生成项目演示视频" |
stitch::shadcn-ui |
shadcn/ui 组件集成 | "用 shadcn/ui 构建数据表格" |
stitch-utilities（工具插件）
| Skill | 功能 | 示例 |
|---|---|---|
stitch::design-md |
生成 DESIGN.md | "分析项目并生成 DESIGN.md" |
stitch::enhance-prompt |
优化提示词 | "优化这个设计提示词" |
stitch::stitch-loop |
单提示生成多页网站 | "构建 5 页作品集网站" |
stitch::taste-design |
生成高级设计规范 | "生成严格的排版和色彩规范" |
💡 为什么 Stitch Skills 值得关注？
- Google 出品 — 大厂背书，技术规范和工程实践有保障
- 设计到代码一条龙 — 从生成设计到转成 React 组件，全流程自动化
- 设计系统管理 — 上传 DESIGN.md，AI 自动应用到所有界面
- 多 Agent 兼容 — Codex、Claude Code、Cursor、Gemini CLI 全支持
- Agent Skills 开放标准 — 遵循开源标准，社区可扩展
🎯 谁该用 Stitch Skills？
- 前端开发者 — 让 AI 帮你把设计转成代码
- UI/UX 设计师 — 用 AI 生成设计变体，快速迭代
- 产品经理 — 快速原型，验证想法
- 独立开发者 — 一个人搞定设计和开发
🛠 安装
Codex：
text
codex plugin marketplace add google-labs-code/stitch-skills --ref main
Claude Code / Cursor：
text
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code npx plugins add google-labs-code/stitch-skills --scope workspace --target cursor
Stitch Skills 以"设计到代码一条龙、设计系统管理、多 Agent 兼容"为核心理念，覆盖了从设计生成、设计系统管理到代码转换的全场景，是 AI 辅助设计的最佳实践。
💡 一句话记住这个项目：Stitch Skills 让 AI Agent 帮你 从设计到代码一条龙搞定，Google 出品，免费开源。
GitHub 地址：https://github.com/google-labs-code/stitch-skills
官网：https://stitch.withgoogle.com
许可证：Apache-2.0
如果觉得有用，欢迎 Star ⭐ 支持开发者！
点个关注 🌟 ，精彩不迷路 ❤️
免责声明： 本公众号所发布的内容来源于互联网，我们会尊重并维护原作者的权益。由于信息来源众多，若文章内容出现版权问题，或文中使用的图片、资料、下载链接等，如涉及侵权，请告知我们，我们将尽快处理。
