谷歌开源 Stitch Skills：一句话出设计稿和代码

Google Labs 近期在 GitHub 上开源了 Stitch Design Skills，这是一套遵循 Agent Skills 开放标准的技能包，目前 star 数已超过 8,000。装上它之后，Claude Code、Codex、Cursor、Gemini CLI 这些主流 coding agent 就能直接调用 Google Stitch 的设计能力：输入一段前端代码，自动变成 Stitch 设计稿；输入一句话，自动生成多页网站；设计稿定稿后，再导出回 React 或 React Native 组件。整套流程全部在命令行和编辑器里完成，而且 100% 免费。

Stitch Design Skills 代码与设计稿双向流水线

一、Google Stitch 是什么

Google Stitch 是 Google 推出的设计工具平台（stitch.withgoogle.com），常被视作 Figma 的替代品之一，不过它的侧重点不太一样：Stitch 更强调与 AI coding agent 的深度集成，设计稿不是终点，而是可以和代码互相转换的中间产物。

而 Stitch Design Skills 是 Google Labs 围绕这个平台开源的 Agent Skills 集合。Agent Skills 是一个开放的技能标准，agent 按需加载对应的技能说明后，就获得了调用外部工具的规范化方式。这套 Skills 遵循的正是这个标准，所以各类 coding agent 都能以接近的方式接入，不需要为每个工具单独适配一遍。

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

二、四个核心能力

1. 代码转设计稿。 把 React、Vue 或 HTML 代码直接转换为 Stitch 设计稿，适合接手没有设计稿的老项目时快速补齐可视化底稿：

"Upload the frontend code at /path/to/dashboard into a Stitch project."

2. 一句话生成多页网站。 用单个 prompt 生成完整的多页网站，agent 会自动创建页面、填充内容并验证结果：

"Build a 5-page portfolio website with Stitch."

3. 设计稿转代码。 把 Stitch 设计稿导出为 React 或 React Native 组件，并自动验证与设计稿的一致性：

"Convert all screens in Stitch project to React components."

4. 模糊想法转精确 prompt。 把"做个设置页面"这类口语化描述，自动优化为 Stitch 可执行的专业 prompt：

"Enhance this prompt: 'make a settings page'."

三、15 个 Skills，三大类

这套 Skills 共 15 个，按用途分成 Design、Build、Utilities 三类。

Stitch Design Skills 的 15 个技能与三大分类

Design 设计类（6 个）

Skill	功能
code-to-design	前端代码转 Stitch 设计稿（React/Vue/HTML）
generate-design	从文字或图片生成新页面、编辑已有页面、创建设计变体
manage-design-system	管理 Stitch 设计系统，上传 DESIGN.md，应用主题
extract-design-md	从前端源码提取完整的 DESIGN.md 设计规范
extract-static-html	从运行中的 Web 应用提取自包含的静态 HTML
upload-to-stitch	上传本地资源（图片、HTML）到 Stitch 项目

Build 构建类（5 个）

Skill	功能
react-components	Stitch 设计稿转 React 组件系统，自动验证设计一致性
react-native	Stitch 设计稿转 React Native 组件
react-vite-dashboard	把 Stitch 设计稿转成生产级 React + Vite 数据仪表盘，内置 TanStack Query 等配套
remotion	从 Stitch 项目生成演示视频，自带过渡和缩放动画
shadcn-ui	shadcn/ui 组件集成专家

Utilities 工具类（4 个）

Skill	功能
design-md	分析 Stitch 项目，生成 DESIGN.md 设计规范文件
enhance-prompt	把模糊 UI 想法优化为专业的 Stitch prompt
stitch-loop	一句话生成完整多页网站，带自动验证
taste-design	生成 DESIGN.md，执行高级设计标准，拒绝千篇一律的 AI 风格

四、兼容哪些 Agent，怎么装

Agent	支持方式
Claude Code	通过 npx plugins 安装
Codex	通过 CLI 或 UI 安装
Cursor	通过 npx plugins 安装
Gemini CLI	原生支持
Antigravity	原生支持

安装只要一条命令：

bash

# 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

# 单个 Skill 安装
npx skills add google-labs-code/stitch-skills

五、和 Penpot 的定位差异

开源设计工具里常被拿来比较的是 Penpot，一个完全开源的 Figma 替代品。把两者放在一起看，定位差异很明显：

维度	Penpot	Stitch + Design Skills
设计工具	SVG/CSS/HTML 开放标准	Google 专有平台
AI 集成	MCP 服务器（读取设计稿）	Agent Skills（双向：代码与设计稿互通）
代码导出	原生就是代码	Skill 导出 React/React Native
设计生成	需手动设计	Agent 自动生成
开源程度	完全开源	Skills 开源，平台闭源
适合场景	团队自托管设计平台	AI agent 驱动的设计到代码流程

一句话概括：Penpot 走的是"设计即代码"路线，Stitch 走的是"让 Agent 帮你设计和写代码"路线。

六、适用场景与总结

Stitch Design Skills 的核心价值，是把设计和编码之间的往返，变成 Agent 可以自动完成的流水线。以前的工作流是设计师画 Figma，开发者照着手写代码，然后反复对稿；现在你给 Agent 一句话，它生成设计稿、导出代码、验证一致性，全程在 Claude Code 或 Cursor 里完成。

几类场景尤其适合：独立开发者想快速给个人项目配一套像样的界面；前端团队接手没有设计稿的老代码，先用 code-to-design 反推设计稿，再统一改造风格；需要快速产出多页原型验证想法的产品经理。反过来说，如果你需要完全自托管、数据完全自主可控的设计平台，Penpot 这类全开源方案仍是更稳妥的选择。

Google 把这套 Skills 开源、免费，并支持所有主流 coding agent。如果你在做 AI 辅助的前端开发，值得装上试一试。