Google 开源的 Stitch Skills：用 Agent Skills 开放标准打通 AI 编程与 UI 设计全流程

什么是 Stitch Skills？

Stitch Skills 是由 Google Labs 推出的一套 Agent Skills 集合，专为 Google Stitch 设计平台打造，遵循 Agent Skills 开放标准。它让 AI 编程助手（如 Claude Code、Cursor、Gemini CLI、Codex 等）能够直接操控设计流程——从前端代码自动生成设计稿、通过文字描述生成 UI 界面、到设计转生产级代码，全部在 AI Agent 的对话中完成。

目前项目在 GitHub 已获得 6,700+ Stars，今天单日新增 117 星，热度持续攀升。

核心亮点

1. 遵循 Agent Skills 开放标准

每个技能都遵循 agentskills.io 开放的 Skill 标准结构：SKILL.md（任务定义）+ scripts/（可执行脚本）+ resources/（知识库）+ examples/（参考示例）。这意味着技能不仅可以在 Google Stitch 生态中使用，还能被任何遵循该标准的 Agent 消费。

2. 三大插件体系，分层明确

stitch-design（设计插件）—— 6 个核心技能：

• code-to-design：将 React/Vue 等前端代码自动转换为 Stitch 设计稿
• generate-design：通过文字描述或图片生成新界面，支持编辑和变体生成
• manage-design-system：上传 DESIGN.md 并统一管理设计系统
• extract-design-md：从源码自动提取完整的设计规范文档
• extract-static-html：从运行中的 Web 应用提取自包含的静态 HTML
• upload-to-stitch：上传本地资源到 Stitch 项目

stitch-build（构建插件）—— 4 个核心技能：

• react-components：将 Stitch 设计转为 React 组件，含自动验证和设计 Token 一致性检查
• react-native：设计稿转生产级 React Native 组件，自动处理平台差异
• remotion：自动生成 Stitch 项目的导览视频，含平滑过渡和缩放效果
• shadcn-ui：shadcn/ui 组件库的集成指南与最佳实践

stitch-utilities（工具插件）—— 4 个辅助技能：

• design-md：分析 Stitch 项目并生成结构化设计文档
• enhance-prompt：将模糊的 UI 想法优化为精确的设计提示词
• stitch-loop：一条提示词生成完整多页网站，含自动验证
• taste-design：生成高标准、反模板化的设计规范，确保 UI 品质

如何使用

前置条件

安装并配置 Stitch MCP Server（Model Context Protocol 服务器），使 AI Agent 能调用 Stitch 的 API。

安装方式

方式一：通过 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

方式二：通过 npx 通用命令

# 安装到 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 add google-labs-code/stitch-skills

实际使用示例

安装后直接在 AI 编码助手中说出你的需求：

设计生成：

"帮我做一个约会应用的 Browse 页面，专注于浪漫和约会点子"

代码转设计：

"把 /path/to/dashboard 中的前端代码上传为 Stitch 项目，命名 Dashboard-Migration-2026"

设计转 React：

"把 Stitch 项目 projects/123 中的所有页面转换为 React 组件"

生成设计文档：

"扫描 /src 目录，提取设计系统并生成 .stitch/DESIGN.md"

技术特色

1. Agent-first 设计：所有技能都围绕 AI Agent 的交互模式设计，输入输出直接对接对话流
2. 模块化架构：插件系统支持按需安装，设计/构建/工具三层解耦
3. 开放标准：遵循 agentskills.io 规范，确保跨平台和跨 Agent 的互操作性
4. 自动验证：构建技能内置语法验证和设计 Token 一致性检查，保证代码质量
5. 支持多种 Agent：兼容 Antigravity, Gemini CLI, Claude Code, Cursor, Codex 等主流工具
6. Skill 间依赖管理：设计类技能支持内部依赖解析，按需选择时可自动拉取所需依赖

适用场景

• 快速原型开发：用自然语言描述 UI 需求，AI 直接生成可交互的设计稿
• 设计到代码交付：设计师在 Stitch 中完成设计，开发者通过 Agent 一键转为 React/React Native 代码
• 设计系统迁移：从现有前端代码自动提取设计规范，迁移到 Stitch 统一管理
• 代码审查辅助：将 PR 中的 UI 变更自动转为可视化设计稿进行审查
• 文档自动生成：从代码库自动提取并维护 UI 设计文档

总结

Stitch Skills 是 Google 在 AI Agent + UI 设计这个交叉领域的重磅尝试。它不只是简单的”设计稿转代码”工具，而是一个完整的 Agent Skills 生态——通过开放标准让 AI 助手真正参与到设计-开发全流程中。如果你已经在用 Claude Code 或 Cursor 做前端开发，这套技能值得一试。

项目地址：github.com/google-labs-code/stitch-skills