Google全新Stitch Skills：一键AI助你打造完整设计系统！

Google 推出 Stitch Skills：一个命令让 AI 帮你搞定整套设计系统

这篇内容给想用 AI 快速搭建界面原型的人，教你用 Google Labs 的 Stitch Skills，从想法到可用的设计系统，不用再手动画原型图。

你有没有遇到过这种情况，脑子里有个产品想法，想快速验证一下界面长什么样，结果打开 Figma 就开始纠结布局、配色、组件库，折腾半天还没画出个像样的原型？

我最近发现 Google Labs 悄悄推出了一个项目，专门解决这个问题。

Google Stitch：用自然语言生成 UI 设计

先说 Stitch 本身是什么。

Stitch 是 Google Labs 在 2026 年初推出的 AI UI 设计工具，你用自然语言描述想要的界面，它直接给你生成可交互的 HTML 原型。不是那种只能看不能用的截图，是真的可以点击、可以填表单、可以跳转的页面。

跟 Figma、Sketch 这些传统设计工具比，Stitch 最大的不同是它理解「氛围」。你不需要说「这里用 16px 的 Inter 字体，间距 24px」，你只要说「我想要一个简洁的、科技感的登录页」，它就能给你生成符合这个感觉的设计。这种设计方式叫 Vibe Design，翻译过来就是「氛围驱动设计」。

但 Stitch 本身只是个在线工具，你得在浏览器里一个页面一个页面地生成。如果你想做一整套产品的设计系统，或者想把 Stitch 生成的设计转成 React 代码，就得手动操作很多遍。Stitch Skills 就是来解决这个问题的。

Stitch Skills：把 Stitch 接入 AI 助手

Stitch Skills 是 Google Labs 在今年 1 月开源的一个 Skill 合集，专门用来配合 Claude Code、Cursor、Gemini CLI 这些 AI 助手使用。

它的核心思路是，把 Stitch 的能力通过 MCP 协议暴露出来，让 AI 助手可以直接调用 Stitch 生成设计、提取设计系统、转换代码。你只要在 Claude Code 里装上这些 Skill，就能用自然语言指挥 AI 完成整套设计工作流。

项目地址在 GitHub 上，目前有 4900+ 星标，585 个 fork。

7 个 Skill，覆盖从设计到代码的全流程

Stitch Skills 目前包含 7 个 Skill，每个解决一个具体问题。

stitch-design是统一入口，负责协调其他 Skill。你给它一个设计需求，它会自动增强你的描述，生成设计系统文档，然后调用 Stitch MCP 生成高保真界面。

stitch-loop从一句话生成完整的多页面网站。你说「我想做一个在线课程平台」，它会自动规划需要哪些页面，然后逐个生成，最后整理成规范的文件结构。

design-md分析 Stitch 项目，提取设计系统，生成 DESIGN.md 文档。这个文档用自然语言描述你的设计规范，后续生成新页面时可以保持一致性。

enhance-prompt把模糊的想法转成 Stitch 能理解的精确描述。你说「我想要一个现代感的仪表盘」，它会帮你补充成具体的描述。

react-components把 Stitch 生成的 HTML 转成 React 组件系统。它会自动提取设计 token，生成可复用的组件，还会做语法校验确保代码能跑。

remotion用 Remotion 把 Stitch 项目生成演示视频。自动添加平滑过渡、缩放动画、文字说明，适合做产品演示或者给客户看效果。

shadcn-ui专门用来集成 shadcn/ui 组件库。帮你找到合适的组件、安装、定制样式，确保生成的代码符合最佳实践。

一个命令装上所有 Skill

安装很简单，用 skills CLI 就行。

先看看有哪些 Skill：

npx skills add google-labs-code/stitch-skills --list

装某个具体的 Skill：

npx skills add google-labs-code/stitch-skills --skill stitch-design --global

--global 参数会让这个 Skill 在所有项目里都能用。skills CLI 会自动检测你用的是 Claude Code 还是 Cursor，把 Skill 装到对应的目录。

实际用起来是什么感觉

假设你想做一个任务管理应用的原型。

你在 Claude Code 里说：

用 Stitch 帮我设计一个任务管理应用，要有任务列表、添加任务、标记完成这些功能，风格要简洁现代。

装了 stitch-design 之后，Claude 会增强你的描述，补充具体的 UI 元素和氛围词，然后调用 Stitch MCP 生成任务列表页面、添加任务的表单页面、任务详情页面，最后把所有页面整理成一个项目，生成 DESIGN.md 记录设计规范。整个过程你不用打开浏览器，不用手动操作 Stitch，AI 全帮你搞定。

如果你想把设计转成 React 代码，继续说：

把这个设计转成 React 组件。

装了 react-components 之后，Claude 会提取设计 token（颜色、字体、间距），把每个页面拆成可复用的组件，生成组件代码并确保语法正确，最后生成使用示例。你拿到的是可以直接跑的 React 项目，不是只能看的设计稿。

再来看一个更完整的例子。

假设你是一个独立开发者，想做一个个人作品集网站。你在 Claude Code 里输入：

用 Stitch 帮我做一个作品集网站，要有首页、个人介绍、作品展示页、博客列表页和博客详情页。风格要有创意但不失专业，可以用深色主题配霓虹灯效果。

这个需求其实挺复杂的，涉及到 5 个不同的页面，还有具体的设计风格要求。

装了 stitch-design 之后，Claude 会这样处理：

第一步，增强你的描述。它会把你说的「有创意但不失专业」「深色主题配霓虹灯效果」翻译成具体的 UI 元素：「深色背景 #1a1a2e，主色调 #00d4ff 霓虹蓝，辅以 #ff006e 霓虹粉作为强调色，渐变发光效果，玻璃拟态卡片，流畅的微动画」。

第二步，调用 enhance-prompt 把这个描述进一步细化，补充排版规范。

第三步，调用 Stitch MCP，传入增强后的设计描述，生成 5 个页面的 HTML 原型。

第四步，调用 design-md 分析这 5 个页面，提取出一套设计系统文档。

第五步，把这 5 个页面和设计系统文档整理成规范的项目结构。

整个过程你只需要说那一句话，AI 自动完成从想法到设计系统的全流程。

如果你想把这个设计转成代码，可以继续说：

把这个作品集转成 Next.js 项目，用 App Router 结构，Tailwind CSS，shadcn/ui 组件库。

装了 react-components 和 shadcn-ui 之后，Claude 会用 react-components 把 HTML 转成 React 组件，提取设计 token，然后用 shadcn-ui 找到适合作品集网站的组件，最后生成完整的 Next.js 项目结构。

你拿到的是一个可以直接 npm run dev 跑起来的 Next.js 项目，界面风格和你在 Stitch 里看到的一模一样。

如果你还想给投资人演示，直接说：

用 remotion 把这个网站生成一个 60 秒的演示视频

Claude 会调用 remotion 生成带动画效果的演示视频，自动添加平滑过渡、缩放效果、背景音乐，导出一个 MP4 文件。

从一句话到可运行的代码再到演示视频，整个过程全在 Claude Code 里完成，你不用打开任何其他工具。

为什么这个项目值得关注

Stitch Skills 有几个地方我觉得挺有意思。

遵循开放标准。它用的是 Agent Skills 开放标准，不是 Google 自己搞的私有格式。这意味着这些 Skill 不仅能在 Claude Code 里用，也能在 Cursor、Gemini CLI、Antigravity 这些支持 Agent Skills 标准的工具里用。你不会被锁定在某个工具上。

设计系统思维。很多 AI 设计工具只管生成单个页面，不管整体一致性。Stitch Skills 的 design-md 会提取设计系统，后续生成新页面时自动保持风格统一。这对做产品原型特别重要。

从设计到代码的完整链路。Stitch 生成设计，react-components 转成代码，remotion 生成演示视频。整个流程打通了。

代码即文档。每个 Skill 的目录结构很规范：SKILL.md 是核心逻辑，scripts/ 是可执行脚本，resources/ 是知识库，examples/ 是参考示例。这种结构让 AI 能快速理解 Skill 的能力边界。

适合什么人用

如果你是产品经理，想快速验证想法，不想等设计师排期，Stitch Skills 能帮你自己搞定原型。

如果你是开发者，想快速搭建界面框架，不想从零写 CSS，Stitch Skills 能帮你生成可用的组件代码。

如果你是设计师，想探索不同的设计方向，不想手动画几十个版本，Stitch Skills 能帮你批量生成变体。

如果你是独立开发者，想一个人搞定产品、设计、开发，Stitch Skills 能帮你省掉设计这一步的时间。

一些限制

Stitch Skills 依赖 Stitch MCP 服务，你得先配置好 MCP 连接。配置过程需要一点技术背景，不是完全零门槛。

Stitch 本身还在实验阶段，生成的设计质量不稳定，有时候需要多试几次才能得到满意的结果。

react-components 生成的代码是基础框架，复杂的交互逻辑还得自己写。它不是代码生成器，更像是脚手架生成器。

Stitch 目前只支持 Web 界面，不支持移动端原生应用。

总结

Stitch Skills 把 Google Stitch 的 AI 设计能力接入了 AI 助手。7 个 Skill 覆盖设计生成、设计系统提取、代码转换、视频演示。项目开源，遵循 Agent Skills 标准，可以在 Claude Code、Cursor、Gemini CLI 等工具里使用。

如果你经常需要做界面原型，或者想尝试用 AI 辅助设计工作，可以试试这个项目。

你平时用 AI 解决工作里的什么问题？评论区聊聊你的场景，下次给你出对应的模板。

关注我，每天分享一个实用的 AI 工具技巧。

#AI工具# #ClaudeCode#