Google 开源的这套设计 Agent Skills，让 AI 直接替你画图做设计

Google 开源的设计 Agent 神器，让 AI 直接替你画图

最近在逛 GitHub 时发现了一个非常有意思的项目——Google Labs 出品的 Stitch Design Skills。它把 Google Stitch（一个 AI 设计工具）的能力封装成了一套可复用的 Agent Skill，目前在 GitHub 上已经斩获了 7.9k Stars，而且完全开源。

说实话，之前我对”AI 设计工具”这件事一直比较无感——总觉得生成的图要么太糊、要么太机械。但 Stitch 这套玩法的思路不太一样：它不是让 AI 凭空画图，而是让你的 Coding Agent 学会操作设计工具本身。

它能干什么？

装上这套 Skills 后，Codex、Claude Code、Cursor 这些 Coding Agent 就能直接调用 Stitch 的设计能力。你可以让 AI：

• 根据前端代码反向生成设计稿——丢一段 React/Vue 代码进去，它自动提取颜色系统、组件结构，生成 Stitch 设计文件
• 用自然语言生成新设计——”帮我做一个暗色模式的移动端登录页”，直接出图
• 管理设计系统——上传 DESIGN.md 文件，批量应用到所有设计稿
• 导出静态 HTML——从线上页面提取完整的自包含 HTML（内联 CSS + 图片）
• 代码生成 React 组件——设计稿直接转可运行的 React 组件，带 StyleSheet 验证
• 代码生成 React Native——设计稿转移动端原生组件，带平台差异化处理

怎么装？

用 Codex 的话，一条命令搞定：

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

Claude Code 和 Cursor 用 npx plugins 安装，OpenCode 手动复制 Skill 目录即可。装完之后，还需要配置一下 Stitch MCP 服务——去 stitch.withgoogle.com/docs/mcp/setup/ 按指引设置就行。

为什么值得试试？

核心价值在于它的设计-代码闭环：设计稿可以转代码，代码也可以反向提取设计系统。配合 Claude Code 或 Codex 使用，AI 既能写前端，又能理解和生成设计稿——这对做 MVP 或原型开发来说效率提升很明显。

另外它是跨 Agent 兼容的，Codex、Claude Code、Cursor、Gemini CLI、OpenCode 都能用，不绑死在某一个工具上。

项目地址我放评论区，感兴趣的朋友可以去看看 README，文档写得很详细。

GitHub: https://github.com/google-labs-code/stitch-skills