Google Stitch
用一句话、一张截图或语音，生成可导出的 UI 设计 —— 让不会画图的产品经理也能出视觉稿。
输入方式
文字 / 截图 / 语音 / 草图
出代码
Vue / React / HTML 等 7 种
出 Figma
保留图层 / 组件 / Auto Layout
价格
免费 · 550 次/月
01它是什么
Google Stitch 是 Google Labs 的 AI UI 设计工具，前身是 Google 2025 年初收购的 Galileo AI， 重组后接入 Gemini 模型族，在 2025 年 I/O 上作为实验项目发布。一句话定位： 把"脑子里的页面"直接变成可看、可导出的 UI——你用自然语言描述、丢一张参考截图，或直接说话， 它生成分层的界面设计，每个元素背后都有真实的 HTML/CSS，并能导出到代码或 Figma。
一句话记住它
它解决的是"产品不会画图"——从想法到一版像样的视觉稿，原来需要 UI 设计师，现在一句话就能先出一稿。
02能力实况（2026.3 更新后）
- 输入：文字 / 语音 / 草图 / 截图 → 生成分层 UI 设计
- 出代码：7 种框架——Vue.js、HTML/CSS、Tailwind、React、Angular、Flutter、SwiftUI
- 出 Figma：直接导出，保留图层命名、组件分组、Auto Layout，方便设计师二次细化
- 2026.3 新增：多屏生成、AI 无限画布、可交互原型（不只是单屏静态稿了）
- 价格：Google Labs 完全免费，每月 550 次生成（含 Figma 导出和语音）
03对产品经理（我）的价值
结合我的工作流——团队快速开发常跳过 UI/切图，产品要直接给到前端能用的东西——Stitch 实打实帮到三点：
✓ 三个真实价值
- "不会画图"的尴尬没了：脑子里的页面，一句话先出一版视觉稿，把模糊想法变具体
- 支持导出 Vue（我们项目正好是 Vue），代码不是纯草图，有可读结构
- 出的 Figma 稿可以丢给前端当视觉参考，沟通"长什么样"成本大降
04局限与边界（务必认清）
对"前端能直接用、融进既有项目"这个诉求，Stitch 有三个硬伤，别抱不切实际的期待：
✗ 三个硬伤
- 风格对不上：Stitch 出的是通用现代 / SaaS 漂亮风。我们是铁路深色科技大屏 + element-ui 后台老项目， 它不懂我们的设计语言，导出的 Vue 是它自己的结构 + Tailwind，不是 element-ui 组件——前端拿去仍要重写适配，谈不上"直接用"。
- 切图素材给不了：铁路全景、车厢监控这类业务底图，Stitch 变不出来，还得靠现有效果图或专门 AI 出图。
- 网络：Google Labs 国内访问不稳定。
一句话：Stitch 最适合新增的、相对独立的页面（尤其 C 端 / H5 / 移动端）从 0 出视觉； 要塞进 element-ui 老项目的功能，它的代码不能直接用，价值更多在"出视觉参考 + 导 Figma"。
05重新框定问题：产品交付的不是一个东西，是三层
"产品产出前端能直接用的东西"——其实是三层，各用不同工具，别指望一个工具全包：
1
视觉层 · 长什么样
前端要的是参考稿 / 风格 → 用 Stitch / Figma AI，新页面从 0 出稿最快。
2
交互层 · 怎么点、什么流程
前端要的是可点原型 → 用 Claude Code 出 HTML 原型（贴合既有项目风格，可接真实切图）。
3
数据层 · 取什么数、字段叫什么
前端要的是接口 + 字段 → 用功能地图 / 字段术语对照，把数据来源说清楚。
06我的落地建议
不是"二选一"，是分场景搭配：
新页面 / C 端用 Stitch 快速出视觉 → 丢进 Claude Code 转成贴合既有项目的可交互原型 + 接真实字段 →
交付给前端的是「视觉参考 + 可点原型 + 字段清单」三件套，而不是要产品去产出生产级组件代码。
07实践笔记
⏳ 待补充 —— 这里记录每次实际用 Stitch 的操作要点、prompt 技巧、导出代码质量实测、踩坑。
随用随记，逐步丰富。
08真实项目实战
⏳ 待补充 —— 记录在真实项目里用 Stitch 出稿 → 落地的完整案例（输入什么、出了什么、前端怎么接、最终效果、复盘）。