AI 时代的 UI 设计
Stitch 是 Google Labs 推出的免费 AI UI 设计工具。你只需要用自然语言描述你想要什么界面，它就能生成高保真的设计稿——并导出为 Figma、HTML/CSS、React 代码。 对于熟悉 Claude Code 的你来说，Stitch 补上了"设计"这块拼图：Claude Code 写代码，Stitch 做设计。
Stitch 是一个浏览器端的 AI 驱动 UI 设计工具，Google Labs 出品（前身是 Galileo AI，2025 年 Google I/O 上更名发布）。 它能从文字描述、图片甚至手绘草稿生成高保真的 Web 和移动端界面，并附带可直接用的前端代码。
传统流程：设计稿 (Figma) → 前端开发 → 代码
Stitch 的流程：文字描述 → 设计稿 + 代码同时出
它不替代 Figma（你可以导出到 Figma），也不替代 Claude Code（代码仍需精化），而是让"从想法到设计"这一步变得极快。
Stitch 提供两种生成模式，覆盖不同的质量和速度需求：
| 维度 | Standard 模式 | Experimental 模式 |
|---|---|---|
| 底层模型 | Gemini 3 Flash | Gemini 3 Pro |
| 速度 | ⚡ 快（秒级） | 🐢 慢但质量高 |
| 输入方式 | 文字提示 | 文字提示 + 图片/手绘上传 |
| 导出方式 | Figma + HTML/CSS + React | HTML/CSS + React（无 Figma） |
| 月度配额 | ~350 次生成 | ~50 次生成 |
| 适合场景 | 快速迭代、多方案探索 | 最终稿、高保真输出 |
2026 年 3 月的重大更新引入了无限画布（Infinite Canvas）：
Stitch 引入了一个有趣的概念叫 Vibe Design（氛围设计）：
不是说"我想要一个顶部导航栏+左侧边栏+右侧内容区"，而是说"我想要一个冥想 app，感觉像周日上午的小木屋"。
两种设计思维：
| 传统方式（组件驱动） | Vibe Design（意图驱动） |
|---|---|
| 列出每个 UI 组件 | 描述感觉和目标 |
| "导航栏、搜索框、卡片列表" | "一个简洁的电商首页，像 Apple Store 的干净感" |
| 准确但缺乏创意 | AI 帮你诠释，可能有惊喜 |
实际使用中，两者结合最佳：先 Vibe 找感觉，再组件驱动精调细节。
用 Stitch 做一个设计通常会经历这 5 步：
| 导出目标 | Standard | Experimental | 用途 |
|---|---|---|---|
| Figma | ✅ Auto Layout + 命名图层 | ❌ | 设计师接着精修 |
| HTML/CSS | ✅ | ✅ | 静态页面 / 原型 |
| React + Tailwind | ✅ | ✅ | 直接集成到项目 |
| Google AI Studio | ✅ | ✅ | 进一步 AI 处理 |
| ZIP 下载 | ✅ | ✅ | 离线保存 |
| Antigravity IDE | ✅（需 MCP） | ✅（需 MCP） | 全栈开发 |
| Claude Code / Cursor | ✅（需 MCP + stitch-skills） | ✅（需 MCP + stitch-skills） | AI 编码工作流 |
场景：为一个 SaaS 产品生成注册页面。
步骤：
访问 stitch.withgoogle.com，用你的 Google 账号登录。
这会消耗一次生成配额，但速度快，适合第一次尝试。
试试这个结构化提示（中文也一样有效）：
一个叫 TaskFlow 的项目管理工具的 SaaS 注册页面。
- 简洁现代的设计，蓝色主色调 (#4361ee)
- 顶部：Logo + "开始免费试用"标题
- 中间：邮箱输入框、密码输入框、"立即开始"按钮
- 底部："已有账号？登录"链接
- 社会化登录按钮：Google、GitHub
- 最底部信任标识："无需信用卡"
- 避免：紫色渐变、3D 插画、通用的库存照片生成后试试在侧栏对话中提修改要求：
"把按钮改成圆角"、"换个深色模式"、"加一个用户评价区域"。
点击 Export → HTML/CSS，看看 Stitch 生成的代码质量如何。
和 Claude Code 写的代码对比一下，你会发现 Stitch 更偏"展示层"，逻辑和交互还得靠 Claude Code。
有任何不清楚的随时问！尤其是配额策略（350+50 次每月）和导出选项的区别，这些是刚开始最容易搞混的。
下一课讲提示词工程——怎么写出让 Stitch 一次就对的提示词。