Gemini 中文文档

Appearance

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 上的多屏一致性表现。

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

Gemini中文文档

Copyright © 2024 gemini.meetcoding.cn All Rights Reserved. 遇码科技 版权所有