实测Google Stitch 2.0:语音一句话生成5屏App原型,免费替代Figma初稿
你是不是也有过这种经历:脑子里有一个 App 点子,打开 Figma 却对着空白画布发呆,或者花大半天调一个登录页的按钮颜色?对独立开发者和小团队来说,把想法变成能看、能点的原型,往往是项目里最贵的第一步。Google Labs 最近把 Stitch 升级到 2.0,号称用语音或一句话就能生成多屏 UI,还能直接导出代码。我花了两天实测,结论是:它确实能让初稿速度提升一个量级,但离替代 Figma 还有距离。
Stitch 2.0 是什么?三大核心功能上手
Google Stitch 诞生于 2025 年 Google I/O,前身是 Google 收购的 Galileo AI。2026 年 3 月推出的 Stitch 2.0 从“单屏生成器”变成了一块 AI 原生的无限画布。它的工作流很简单:输入文字、上传草图或截图,AI 生成高保真界面,你可以继续用语音或文字迭代,最后导出到 Figma 或直接拿到前端代码。
实际用起来,三个功能最亮眼:
1. 语音实时改设计。不是“说完等结果”,而是你边说话边看到界面变化。比如我说“把导航栏改成深色,卡片加圆角”,画布上的元素会实时重排。这种流式反馈比传统 AI 设计工具“prompt → 等待 → 看结果”的循环快很多。
2. 一次生成 5 屏连贯界面。描述一个完整流程,例如“一个健身 App,包含首页、课程列表、训练详情、个人中心和设置页”,Stitch 会一次性输出 5 个风格统一的屏幕,并且按钮之间自动带上链接关系,能直接点着看流程。
3. 代码导出覆盖 7 种框架。支持 HTML/CSS、Tailwind、React、Vue、Angular、Flutter 和 SwiftUI。对开发者来说,这意味着可以把生成的界面直接丢进 Cursor 或 Claude Code 做二次开发,省掉从设计稿到代码的翻译时间。
另外它引入了 DESIGN.md,一种纯文本格式的设计系统规则文件,方便把颜色、字体、组件规范跟着项目一起迁移。
实测对比:Stitch 2.0 vs Figma vs Vercel v0
我选了一个常见任务——“做一个 SaaS 后台仪表盘,包含数据统计卡片、最近订单列表和侧边栏”——分别在 Stitch 2.0、Figma(手动+AI 插件)和 Vercel v0 上跑了一遍。
| 维度 | Google Stitch 2.0 | Figma + AI 插件 | Vercel v0 |
|---|---|---|---|
| 价格 | 免费(Google Labs,每日约 400 积分) | 专业版 $16/月起 | 免费额度 + Pro $20/月 |
| 上手速度 | 1-2 分钟出 5 屏初稿 | 需搭框架、调组件,30 分钟+ | 单屏快,多屏需手动串联 |
| 语音迭代 | 支持实时语音修改 | 不支持 | 不支持 |
| 多屏一致性 | 自动生成统一风格 | 依赖设计系统 | 单屏质量高,跨屏需统一 |
| 代码导出 | HTML/Tailwind/React/Flutter 等 | 需第三方插件或 Dev Mode | React/Next.js 为主 |
| 精度控制 | 适合初稿,像素级调整弱 | 最强 | 中等 |
| 适用阶段 | 概念验证、MVP 原型 | 生产级设计 | 前端组件快速搭建 |
从表格能看出,Stitch 2.0 最擅长的是“从 0 到 1”的初稿阶段。如果你的目标是快速验证一个产品想法、给投资人看 demo,或者让非设计师也能输出可点击原型,它很合适。但如果你要输出上线级设计稿,Figma 仍然是终点。类似地,FLUX 3 Image 评测也提到,AI 生成工具目前最适合担任“高阶草稿纸”,最终精修仍需人工。
客观优缺点:免费不等于万能
优点:
- 完全免费,无信用卡门槛。每日约 400 设计积分 + 15 次重设计,对个人项目基本够用。
- 自然语言 + 语音输入降低了使用门槛,不会 Figma 的产品经理也能用。
- 多屏生成 + 自动链接,做 App 流程原型比单屏工具高效。
- 代码导出种类多,开发者友好。
缺点:
- 生成结果偏“AI 味”,品牌定制能力弱。很难让它严格遵循你公司的设计规范。
- 像素级调整不方便。说“按钮往下挪 2 像素”这种需求,Stitch 会反复生成而不是精确移动。
- 每日积分有上限,高强度迭代会撞墙,且目前不能付费扩容。
- 无障碍设计和可访问性细节需要人工复查,自动生成的对比度和 ARIA 标签经常有瑕疵。
谁该用?三步快速上手
适合人群:
- 独立开发者:有代码能力但缺设计资源,想快速把点子变成可演示原型。
- 产品经理 / 创业者:需要向团队或投资人展示产品概念,不想先雇设计师。
- 前端工程师:用 Stitch 生成页面骨架,再拿到 IDE 里精修。
三步上手:
- 访问 stitch.google.com,用 Google 账号登录(当前仍在 Google Labs)。
- 在输入框描述你的 App,例如“一个电商 App 首页,包含搜索栏、轮播图、商品卡片和底部导航”,或上传手绘草图。
- 生成后点击元素用语音 / 文字迭代,满意后导出为 React/Tailwind 代码或粘贴到 Figma。
如果你已经在用 Claude Sonnet 5 处理代码,Stitch 的代码导出正好可以接进它的 agentic 工作流,让“设计 → 代码 → 调试”跑得更顺。
如果你只是想快速把想法变成能看、能点、能跑的原型,Google Stitch 2.0 是目前免费工具里效率最高的选择之一。把它当作 Figma 之前的草稿纸,而不是 Figma 的替代品,就能避开它的短板,把真正的时间花在产品本身。