---
url: /stitch/what_is_google_stitch.md
description: >-
  Google Stitch 是 Google Labs 出品的 AI 原生 UI 设计工具，一段话或一张手绘草图就能生成多屏高保真界面。本文详解
  Stitch 2.0 的无限画布、Design Agent、语音改稿、DESIGN.md、可点击原型、Figma/Antigravity/MCP
  七大导出路径，以及 2026 年 9 月接入 Gemini 3.8 Flash 后的变化。
---

# Google Stitch：谷歌那个免费、能说话改稿、还能导出代码的 UI 设计画布

先说个我自己反复踩的坑。

脑子里有个 App 的想法时，我觉得它特别清晰——"就是一个记录每日刷题的 App，要有打卡日历、错题本、还有个排行榜"。讲给朋友听，朋友点头说挺好。然后我打开设计工具，新建画板，看着那块 375×812 的白色矩形，鼠标在那个矩形上空悬停了十分钟，一个矩形都没画出来。

**想法和界面之间，隔着一整个美术基本功。** 排版、配色、间距、层级、阴影、圆角，这些东西我全都"知道"，但没有一样我"做得出"。

这就是 Google Stitch 想解决的问题。而且它的解法相当粗暴：**你别画了，你说，它画。**

更粗暴的是价格——**免费**。不是"免费试用 14 天"，是 Google Labs 实验产品那种真免费，登录 Google 账号就能用，每天给 400 个设计额度。有开发者实测，生成一套三屏的 App 界面只花 **14 个额度**，一天能做二十多套还有剩。

## 什么是 Google Stitch

一句话版本：**Stitch 是 Google Labs 出品的 AI 原生 UI 设计画布，你把需求说成人话（或者画成草图、拍张照片、干脆用嘴说），它直接给你一套能点、能改、能导出代码的多屏界面。**

拆开说几层身份，方便你对号入座：

**第一，它是 Galileo AI 的转世。** 2025 年 5 月 Google 收购了这家做"文本生成高保真界面"的公司，在 Google I/O 2025 上以 Stitch 的名字重新发布。如果你以前收藏过 Galileo AI，现在打开会被跳转到 stitch.withgoogle.com——不用怀疑，就是它。

**第二，它现在长了 Gemini 的脑子。** Stitch 由 Gemini 系列模型驱动；2026 年 9 月 2 日 Gemini 3.8 Flash 发布时，Google DeepMind 官方博客明确把 **Stitch** 列为该模型的落地入口之一（与 Google Antigravity、Gemini API、Android Studio 并列）。这意味着它改稿的"一次命中率"比早期版本高了一截——早期那种"让你改五遍导航栏还是不通"的毛病，缓解了不少。

**第三，它已经不是"一次生成一张图"的玩具了。** 2026 年 3 月的 **Stitch 2.0** 是个分水岭：从"单回合出图"改造成"一个持续存在的画布"。同一次生成最多给你 **5 张互相关联的屏幕**，而不是孤零零的一张首页。同年 5 月的更新又让设计 Agent 的"思考过程"在画布上实时可见，并开放了全球访问。

## 它的几个关键能力

* **无限画布（Infinite Canvas）**：所有生成的屏幕、你丢进去的参考图、写的备注、贴的代码片段，全在一张可自由缩放平移的画布上。多个设计方向可以同时铺开对比，不再是一个对话框里翻历史记录。
* **多屏生成**：一次最多出 5 屏，而且是"一套流程"而不是"五张图"——首页、列表、详情、设置之间是有逻辑关系的。
* **Design Agent + Agent Manager**：一个懂全局的设计 Agent 帮你改稿（它能记住整个项目的演进，而不是每次当新任务处理），Agent Manager 则帮你并行管理几个设计方向，可以分支、对比、合并。
* **语音转向（Voice Steering）**：直接用嘴说"这个标题太大了，配色换暖一点"，画布实时变。这是我用下来最上瘾的功能，因为它把"改设计"这个动作从"操作软件"变回了"跟人提意见"。
* **DESIGN.md**：一个给机器读的设计规范 Markdown 文件，记录配色、字体、间距、组件范式。可以从任意公开 URL 反向提取一套设计系统，也能导出给别的工具用。**这是整个 Stitch 里最被低估的东西**，下面单独讲。
* **可点击原型**：把静态屏幕连成可点击的流程，点 Play 就能走一遍用户旅程；它甚至会根据交互推断"下一屏应该是什么"并自动补出来。
* **七条导出路径**：AI Studio（分享评审链接）、Figma、MCP、Netlify（直接发布上网）、Lovable、Bolt、以及 **.ZIP 下载**。
* **Stitch MCP / SDK**：官方提供 MCP 集成，让 Claude Code、Cursor、Gemini CLI 这类编码 Agent 能直接读取你的 Stitch 项目和屏幕、拉 HTML 和截图。MCP 本身免费，需要在 Stitch 的 Settings → API Keys 里拿一个 key。

> 我一直觉得 Figma 当年股价因为 Stitch 抖了一下是有道理的，但道理不在"AI 能画图"——而在于 **Stitch 把"设计探索"这个环节的边际成本干到了接近零**。以前试十个方向，要一个设计师画一天；现在是一个下午，你自己就能看十个方向。

## DESIGN.md：真正省时间的是这个文件

我要给 DESIGN.md 单独开一节，因为它解决的是一个非常具体的、每天在发生的浪费。

传统流程是：设计师在 Figma 里画完 → 导出标注 → 开发照着实现 → 开发理解偏了 → 来回扯皮 → 上线后发现间距全错。**信息在每一次转手时都会损失。**

DESIGN.md 的做法是：设计系统不再藏在某个工具里，而是一个纯文本的 Markdown 文件。你的编码 Agent 读它，就像读一份 `README` 一样自然。

```markdown
# Design System: 刷题打卡 App

## Colors
- Primary: #4F46E5 (Indigo 600)
- Background: #FAFAFA
- Surface: #FFFFFF
- Danger: #DC2626

## Typography
- Heading: Inter 600 / 24px / line-height 1.3
- Body: Inter 400 / 16px / line-height 1.5

## Spacing
- Base unit: 4px
- Card padding: 16px
- Section gap: 24px

## Components
- PrimaryButton: height 48px, radius 12px, full width on mobile
- StatCard: surface + 1px border #E5E7EB, radius 16px
```

一个坑要提醒你：**官宣的规范文件名叫 `DESIGN.md`，但实际导出时它是小写、并且带项目名前缀的**，比如 `exam_ace_design.md`。内容是对的，任何编码 Agent 都读得懂，但你要是在项目里 `find . -name "DESIGN.md"`，会一无所获。别问我怎么知道的。

## 什么场景真的该用它

**场景一：独立开发者做 MVP。** 你会写代码但不想从空白屏幕开始。用 Stitch 生成三屏界面，导出 ZIP，丢进 Google Antigravity（或者你顺手的 IDE），接上后端逻辑。注意：官方宣传里 Antigravity 被描述成"Stitch 屏幕的下一站"，但**导出菜单里并没有一个 Antigravity 按钮**——你得下载 ZIP 自己打开，这一步官方文档说得不清楚。

**场景二：非设计师的创始人做第一版 UI。** 你会描述产品但不会用 Figma。Stitch 支持直接上传手绘草图拍照、竞品截图、甚至一段现有代码作为参考，然后出高保真界面。有个经典演示是贴一张 Airbnb 的截图，它能复刻出一个能用的克隆版。

**场景三：产品经理做能给老板点的原型。** 静态图说服力有限，可点击的流程说服力完全不同。连好屏幕点 Play，让决策者自己点一遍"注册 → 选课 → 支付 → 完成"，比你在会上讲十分钟有效。

**场景四：把设计直接喂给编码 Agent。** 这是 2026 年最值得试的组合：Stitch 出界面 → 导出 DESIGN.md + HTML/Tailwind → 通过 MCP 让 Claude Code / Gemini CLI 读走 → 前端代码落地。**手工设计交付这一环被整个跳过了。**

## 快速上手：十五分钟走一遍

1. **打开** stitch.withgoogle.com，用 Google 账号登录，不需要安装任何东西。
2. **准备上下文**：写清楚你的产品目标、目标用户、主要任务、设备形态（mobile / desktop / tablet）。也可以顺手丢一张草图、竞品截图或一段代码进画布。
3. **生成**：用自然语言描述，或者直接开麦说。可以指定要几个变体、什么设备。
4. **迭代**：用文字或语音让 Design Agent 改。别忘了开几个分支对比不同方向。
5. **连流程**：把屏幕连成可点击原型，走一遍完整旅程，重点看加载态、空状态、错误态。
6. **选导出路径**：
   * 给设计师继续打磨 → **Figma**（注意：**单向**，Stitch 不能导入 Figma 文件，只能导出过去；想拿 Figma 当参考就导出成 PNG 再上传）
   * 给开发继续实现 → **.ZIP**（任何 IDE 都能打开，也是进 Antigravity 的正路）
   * 给编码 Agent 用 → **MCP**
   * 想直接发到公网 → **Netlify**
   * 只想让人看看 → **AI Studio 分享链接**

想在命令行里跑的话，官方生态里有现成的 MCP 配置：

```json
{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": {
        "STITCH_API_KEY": "${STITCH_API_KEY}"
      }
    }
  }
}
```

## 额度：先别信网上那些数字

这块必须说清楚，因为我查到的资料互相打架。

* 有 2026 年 9 月的实测说：**每天 400 个设计额度 + 15 个重新设计额度**，午夜 UTC 重置，一次三屏生成约 14 额度。
* 也有资料写：标准模式每天 200 额度、实验模式 50 额度，UTC 午夜重置。
* 还有一堆文章写"每月 350 次 / 200 次 / 1500 次"——**这些基本都是 2025 年发布的旧口径**。Stitch 2.0（2026 年 3 月）已经把月度额度改成了日度额度。

我的建议：**以你登录后 Settings 里显示的那个数字为准**，别的都当参考。额度用完目前**没有付费解锁通道**，因为压根没有付费档——这也是我唯一要泼的冷水。

## 我自己的三点保留意见

**它是 Labs 产品，别把命交给它。** 没有 SLA，没有付费档，功能随时可能变，甚至可能某天就没了。免费是现状，不是承诺。

**它不是"魔法设计师"，是"魔法实习生"。** 生成的界面确实好看，但有一股明显的"AI 味"——那种你能一眼认出来的、圆角加渐变加卡片的标准配方。要做出品牌辨识度，还是得设计师接手。

**生成的代码必须审。** 官方自己的定位说得很诚实：导出的界面和代码在上生产前，仍然需要过一遍可访问性、安全性、响应式、语义化 HTML 和依赖审查。它不检查你的业务逻辑，也不保证你不会因为一段生成代码把密钥漏出去。

> 我的立场是：Stitch 最好的用法，是把它当作**设计探索阶段的加速器**，而不是**生产交付的终点**。它帮你把"从零到八十分"的时间从两天压到两小时，剩下的二十分，还是得靠人和审美。

## 进阶

如果你想把它接进自己的编码工作流，下一步可以看三件事：官方的 Stitch MCP 与 SDK（把设计上下文直接喂给 Claude Code、Cursor 或 Gemini CLI）、DESIGN.md 在 Antigravity 里的落地规范、以及 Gemini 3.8 Flash 在 Stitch 上的多屏一致性表现。

更多开源技术干货和学习资料，关注公众号「遇码」，领取专属福利。