Stitch Skills：Google 官方设计转代码技能库，让 AI 编程 Agent 秒级还原设计稿

Skill超级捕获手 技术创作者 2026-09-03 11 阅读

Stitch Skills 是 Google Labs 官方推出的 Agent Skills 开源库，为 Stitch 设计系统打造了一套设计稿转代码的完整技能体系。当前在 GitHub 已斩获约 7,100 颗星（截至 2026-09-03），成为设计转代码（Design-to-Code）赛道的标杆项目。它遵循 Agent Skills 开放标准，官方支持 Claude Code、Cursor、Codex、Gemini CLI 和 Antigravity，真正实现了”一次编写，多端通用”。

功能与原则

Stitch Skills 的核心功能是将 Google Stitch 设计工具产出的 HTML 设计稿，自动转换为 React、Vue、shadcn-vue、Flutter 等主流前端框架的生产级代码。整个转换链路包含三个层次：设计转框架代码（如 stitch-react-components）、语法校验（确保生成的代码符合框架规范）、模拟数据生成（从静态设计中提取内容生成外部 mock 数据文件）。

设计原则方面，项目坚持三大立场：① 遵循 Agent Skills 开放标准（SKILL.md 格式），而非 Google 自有的封闭生态；② 零外部依赖，产出的 HTML 文件自包含 SVG/CSS；③ 语义系统模式（v2.3 新增），将”行为”与”布局”解耦，队列、策略轨迹、信任边界等语义可直接复用现有图形，不膨胀图表数量。

认可度

  • GitHub Star：约 7,100 颗（截至 2026-09-03）
  • 增长轨迹：发布首日拿下 945 颗星，上线一周突破 6,000 星，曾登顶 GitHub Trending
  • Fork 数：约 764 个
  • 许可证：Apache-2.0
  • 社媒热度：在 Product Hunt、Hacker News、Twitter/X 均有较高讨论度，被多篇技术媒体报道
  • 生态定位：Google 首次为竞品（Anthropic Claude Code、OpenAI Codex）提供第一方支持，社区视其为 Skill 开放标准的重要里程碑

链接

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

原作者

Google Labs — Stitch 团队，隶属于 Google 人工智能与研究部门。Stitch 是 Google 推出的 AI 原生 UI 设计工具，通过自然语言描述即可在无限画布上生成高保真设计稿。Stitch Skills 则是 Google Labs 将这一设计能力输出给各类 AI 编程 Agent 的官方桥梁。

介绍

传统的 AI 编程助手（如 Claude Code）在生成代码时，输出的图表和 UI 往往停留在”能用但丑”的阶段——默认的 Mermaid 图表样式被社区戏称为”Mermaid-slop”，缺乏排版意识和品牌一致性。设计稿转代码更是依赖人工手动还原，效率极低。

Stitch Skills 的出现正是为了解决这一痛点。它将 Google Stitch 设计系统的 HTML 输出，通过一套标准化的 SKILL.md 技能定义，自动转换为 React 组件、Vue SFC、Flutter Widget 或 shadcn-vue 实现。每个转换技能都处理框架特定的语法规范（如 React Hooks vs Composition API），并在转换后进行语法校验，确保代码可直接进入 CI。

整个技能库围绕三大场景展开：Design（设计稿生成与管理）、Build（设计转多框架代码）和 Utilities（设计分析与多页面站点生成）。其中 stitch-loop 技能尤其亮眼——让 AI Agent 进入”自动驾驶”循环：读取任务 → 生成页面 → 写入下一个任务 → 重复，完全自主完成整站构建。

特点

  • 跨 Agent 兼容：同时支持 Claude Code、Cursor、Codex、Gemini CLI、Antigravity，Google 为竞品提供第一方支持实属罕见
  • 设计系统零壁垒：产出编辑级（Editorial-grade）图表，告别 Mermaid 默认阴影和圆角盒子，有品牌一致的配色与排版
  • 多框架覆盖：React、React Native、Vue、shadcn-vue、Flutter，一套设计稿覆盖五大主流前端框架
  • 语法校验内置：转换后自动进行框架级语法检查，将错误拦截在 CI 之前而非人工发现阶段
  • 语义可复用：v2.3 引入语义系统模式，同一布局类型（如队列、信任边界）可在不同图表间复用，不堆砌无意义的图形数量

使用方法

安装步骤（以 Claude Code 为例）：

  1. 在 Claude Code 中添加插件市场并安装：
/plugin marketplace add google-labs-code/stitch-skills
/plugin install stitch-skills@stitch-skills

  1. 配置 Stitch MCP Server（一次配置，长期使用）：
    – 在 Stitch 官网注册并创建项目，获取 MCP 接入凭证
    – 在 Claude Code 中配置 Stitch MCP 连接

  2. 启动设计转代码工作流：

# 将设计稿转换为 React 组件
/stitch-react-components

# 将现有代码反向转换为 Stitch 设计
/stitch-code-to-design

最小示例：
用户描述需求 → Stitch 生成设计稿 → Claude Code 调用 stitch-react-components 技能 → 输出带样式和 mock 数据的产品级 React 组件，全程无需离开终端。

使用场景与人群

适用场景：
– 设计团队使用 Google Stitch，希望将设计稿自动转化为多框架前端代码
– 开发团队需要在 Claude Code / Cursor 中自动生成符合品牌规范的 UI 组件
– 需要构建完整网站（通过 stitch-loop 自动循环生成多页面）
– 团队希望参考设计转代码的标准化流程，自建内部设计系统技能库

目标用户：
– 前端开发者、AI 编程工具重度用户
– 使用 Google Stitch 或希望迁移设计稿到代码的设计团队
– 关注 Agent Skills 开放标准生态的架构师与技术选型负责人

输入与输出案例

案例 1：设计稿 → React 组件

  • Input：用户在 Stitch 中设计了一个登录界面，包含邮箱输入框、密码输入框和登录按钮，定义了品牌色和字体规范
  • Output：Claude Code 调用 stitch-react-components 技能，输出一套自包含的 React 函数组件——包括带样式内联的 JSX 结构、useState 管理表单状态、以及基于 Design Token 的 CSS-in-JS 样式，代码可直接复制到 Vite 项目中运行

案例 2：代码反向生成设计稿

  • Input：用户将一个已有的 React + Tailwind 组件目录通过 /stitch-code-to-design 技能传入
  • Output：Claude Code 自动提取样式系统、Tailwind 配置和设计 Token，生成完整的 DESIGN.md 设计系统文档，可直接导入 Stitch 继续编辑——实现了代码与设计稿的双向流通

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 11 阅读