周三晚上刷推看到 Google Labs 官宣 Stitch 2.0，点进去随手试了下——然后一抬头，凌晨两点了。
不夸张，这东西给我的冲击感和当年第一次用 Midjourney 差不多。区别是，这次生成的不是图片，是可交互的高保真 UI，而且直接能导出代码。
先说结论
| 能力 | Stitch 2.0 | Figma + AI 插件 | v0.dev |
|---|---|---|---|
| 文字→UI | ⭐⭐⭐⭐⭐ 多屏同生成 | ⭐⭐⭐ 需插件配合 | ⭐⭐⭐⭐ 单页面 |
| 语音交互 | ✅ Voice Canvas | ❌ | ❌ |
| 即时原型 | ✅ 自动生成交互流 | 需手动连线 | 仅静态 |
| MCP 集成 | ✅ Claude Code/Cursor | ❌ | ❌ |
| 导出格式 | React/Flutter/Figma | 原生 | React/HTML |
| 价格 | 免费 350次/月 | $15-75/月 | $20/月 |
如果你是独立开发者或者小团队，Stitch 基本可以替代 80% 的 Figma 使用场景了。Figma 股价当天跌 8% 不是没道理的。
为什么突然关注这个
我最近在做一个内部工具的前端，之前的流程是：Figma 画原型 → 截图喂给 Claude → 手动调样式。来回折腾三四轮才能达到设计稿 80% 的还原度。
然后看到 Stitch 支持 MCP server 直接对接 Claude Code，我心想这不就是我梦寐以求的工作流吗？当晚就上手了。
5 个核心功能逐个试
1. Vibe Design —— 说氛围就够了
传统设计工具你得告诉它"左边放个侧边栏，宽 240px，里面有 5 个导航项"。Stitch 不是这个逻辑。
我输入了一句：
一个面向企业客户的 CRM 后台，风格参考 Linear，要有高级感但不冷淡，
左侧导航 + 顶部搜索 + 右侧数据看板
出来 5 个方案，说实话每个都比我自己画的好看。而且它真的理解"像 Linear 但不冷淡"——配色偏暖灰，圆角比 Linear 大一点，整体更柔和。
2. Voice Canvas —— 对着麦克风改设计
这个是最让我震撼的功能。打开麦克风，直接说：
"这个导航栏的图标太小了，放大一号。对，然后把'数据看板'那个卡片的圆角再大一点，配色换成蓝紫渐变试试。"
它实时改，延迟大概 1-2 秒。而且它会反问你——我说"这个表格不太对"，它问我"你是觉得信息密度太高，还是列的优先级需要调整？"
当时我脑子里只有一个念头：设计评审会以后是不是可以直接对着 Stitch 开了？
3. 即时原型 —— 静态图秒变可点击
生成的 5 个页面，点一下"Prototype"按钮，它自动推理出页面间的跳转逻辑，加上转场动画。
我试了下，从登录页 → 首页 → 详情页 → 设置页，整个流程它全串起来了，按钮高亮、hover 效果、侧边栏收起展开，全部自动处理。
以前在 Figma 里连线连到想砸电脑，现在一键搞定。
4. DESIGN.md —— 设计系统可以跟着代码走
这个设计值得单独说。Stitch 会为每个项目自动生成一个 DESIGN.md 文件，记录所有设计 token：
## Colors
- primary: #6C5CE7
- surface: #F8F9FA
- text-primary: #2D3436
## Typography
- heading: Inter, 24px/32px, weight 600
- body: Inter, 14px/20px, weight 400
## Spacing
- card-padding: 20px
- section-gap: 32px
## Components
- Button: rounded-xl, shadow-sm, transition 150ms
- Card: rounded-2xl, border 1px solid surface-200
这个文件可以直接被 Claude Code 和 Cursor 读取。设计规范以代码的形式活在仓库里，而不是躺在 Figma 的某个角落没人看。
5. MCP Server —— 打通 AI 编码助手
重头戏来了。Stitch 官方出了 MCP server，配置非常简单：
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "@anthropic/stitch-mcp@latest"],
"env": {
"GOOGLE_APPLICATION_CREDENTIALS": "path/to/credentials.json"
}
}
}
}
配好之后在 Claude Code 里可以直接说：
实现 Stitch 项目里的 Dashboard 页面，用 React + Tailwind，
严格按照 DESIGN.md 的设计规范
Claude Code 会通过 MCP 拉取设计稿的布局信息、颜色、间距、组件结构，然后生成代码。我实测下来，首次生成还原度大概 85%，微调两三轮就能到 95% 以上。
之前我用 Figma → 截图 → 提示词 这个流程，首次还原度也就 60%，而且颜色和间距经常对不上。
踩坑记录
试了一晚上，也不是完全没问题：
坑 1：Voice Canvas 中文支持一般
说英文它反应很快，切中文偶尔会理解偏差。比如我说"把间距收紧一点"，它理解成了"把间距设为 1px"……收得也太紧了。目前建议复杂指令还是用文字输入。
坑 2：复杂表格/数据可视化弱项
让它画一个带筛选、排序、分页的数据表格，出来的效果比较基础。涉及 ECharts 级别的图表就更不行了。这块还是得手写或者用专业组件库。
坑 3：MCP 认证配置绕弯路
官方文档说"Enable Stitch API in Google Cloud"，但实际操作是要先创建 OAuth consent screen，再创建 credentials，最后 gcloud auth application-default login。这个流程他文档里写得很模糊，我翻了 GitHub Issues 才搞明白。
完整配置步骤：
# 1. 安装 gcloud CLI（如果没有）
brew install google-cloud-sdk
# 2. 登录并设置项目
gcloud auth login
gcloud config set project YOUR_PROJECT_ID
# 3. 启用 Stitch API
gcloud services enable stitch.googleapis.com
# 4. 生成应用默认凭据
gcloud auth application-default login
# 5. 在 Claude Code 的 MCP 配置里加上 stitch server
坑 4：350 次免费额度消耗比想象快
每次 Vibe Design 生成 5 个方案算 5 次，Voice Canvas 每轮对话算 1 次。我一晚上就用了 80 多次。如果是重度用户，一个月 350 次可能不太够。
我现在的工作流
折腾完之后，我的前端开发流程变成了：
Stitch（Vibe Design + Voice 微调）
↓ 导出 DESIGN.md + 设计稿
↓ MCP server 桥接
Claude Code（读取设计规范 → 生成 React 代码）
↓
本地预览 → 微调 → 上线
整个流程从构思到可用代码，一个页面大概 30 分钟。之前用 Figma 画 + 手动切图 + 写代码，同样的页面至少要半天。
关于 Claude Code 的 API 调用，我用的是兼容 OpenAI 协议的聚合接口（改个 base_url 就行），这样可以根据任务复杂度随时切模型，简单布局用便宜的模型跑，复杂交互逻辑再上 Claude Opus。
小结
Google Stitch 2.0 的定位很清晰：不是要替代 Figma 的全部功能，而是要干掉"从 0 到 1"这个最痛的阶段。
对于独立开发者和小团队来说，花 0 块钱就能拿到以前至少需要一个设计师才能产出的高保真原型，这个性价比确实离谱。Voice Canvas 虽然中文还不太行，但那个交互方式代表了 AI 设计工具的未来方向。
Figma 不会死，但它的护城河确实在被侵蚀。如果你还没试过 Stitch，建议现在就去 stitch.withgoogle.com 注册，免费的，别等它涨价了再后悔。
觉得有用的话点个赞，我后面再写一篇 Stitch + Claude Code 搭建完整设计系统的实战教程。
