Google Stitch

Google Stitch 是 Google 的 AI 界面设计工具：用自然语言描述应用，或附上一张截图、草图，它就能生成可编辑的移动 App 界面与响应式网页页面。它最初是 2025 年 Google I/O 上发布的 Google Labs 实验项目，目前作为 Google Labs 工具开放使用，免费提供。Stitch 由 Google DeepMind 的 Gemini 系列模型驱动，面向应用开发者、产品经理、设计师以及没有设计背景的创业者。生成好的界面可以导出为 Figma 可编辑图层、复制为 HTML、生成 React 应用，或连成可分享的点击式原型。使用需要个人 Google 账号，站点仅提供英文界面，且仅限 18 岁以上用户。

✨ 主要功能

• 一句话或一张图生成界面 — 描述你想要的 App，或附上截图、草图等视觉参考，Stitch 会生成界面稿；上传图片支持 JPG 与 PNG，单张不超过 5 MB。
• 移动端与桌面端版本互转 — 可以生成原生移动 App 版本或响应式网页版本，并随时在移动端与桌面端之间转换已有界面。
• 导出 Figma 可编辑图层 — 通过 code.to.design 把选中的界面发送到 Figma 并保留可编辑图层；仅在 Standard Mode 下可用，导入的项目、图片上传生成的界面以及其他模式都不支持。
• 导出代码与下游工具 — 复制与设计稿一致的静态 HTML，把选中界面生成完整的 React 应用，或在同一个导出面板里把设计交给 Google AI Studio、Bolt、Lovable 或部署到 Netlify。
• Instant Prototype 交互原型 — 把多个界面连成可点击的交互原型，自动推断导航热区与转场效果，并以链接形式分享。
• 设计系统与 DESIGN.md — Stitch 会根据提示词自动选择设计系统，也支持从 .fig 文件、网站 URL、上传的代码/图片/字体/Logo，或不超过 10 MB 的 DESIGN.md 文档导入。
• 画布内置工具 — 生成多个变体、补全缺失状态、为界面添加动画，或运行无障碍审计，输出包含对比度与替代文本建议的 WCAG 合规报告。
• 可选模型与模式 — 可以按任务选择：快速模式适合先出 HTML 草稿，高质量模型用于复杂界面，另有专门的图像模型用于改版设计。
• 面向 IDE 与命令行的 MCP — 用 Stitch API Key 通过 Model Context Protocol 把 Claude Code、Cursor、VS Code、Codex、Gemini CLI、Antigravity 或 OpenCode 接入 Stitch。
• 导入 Galileo AI 历史记录 — 原 Galileo AI 用户可以在 Stitch 的设置页面上传过去的对话历史进行查看，但这些导入的对话无法在 Stitch 中继续。

💳 定价

• 免费使用 — Google 的 Stitch 官网页面上同时标注了「Available now」与「Free of charge」，站内没有公布任何付费方案或定价页面。
• 账号要求 — 需要个人 Google 账号，且仅面向特定国家和地区 18 岁以上的用户开放。
• 每日生成额度 — 免费使用是有额度限制的：应用会记录每日可生成的界面数量，达到上限时会提示「your daily limit of … generated screens」，额度次日重置。
• 改版生成额度 — 截图/URL Redesign 流程有独立的每日额度，产品内说明这是发布期间的临时限制。
• 实际使用上限 — 每个项目最多上传 50 张图片；单次导出最多 16 个界面（部署到 Netlify 仅支持单个界面）；同时生成的任务数量也有限制。
• 以官方页面为准 — Google 没有公开具体的额度数字、配额上限或付费方案规划，建议在使用前查看应用内 Settings 里的 Daily Credits 面板与官方 FAQ，不要依赖某个固定数值。

⚖️ 竞品对比

🎯 使用场景

• 创业者验证想法：把一段产品描述变成一组移动 App 界面，当天就能拿给测试用户看。
• 设计师对接 Figma 交付：在 Stitch 里生成网页初稿，导出为 Figma 可编辑图层，再放进已有设计文件中打磨。
• 前端开发者启动项目：生成一个流程所需的界面后导出 HTML 或 React 应用，作为起点，不必手写页面结构。
• 产品经理演示流程：把界面连成 Instant Prototype 并分享链接，让相关方在任何代码出现之前就能点击走通导航。
• 团队统一设计系统：编写一份 DESIGN.md，或导入 .fig 文件、品牌官网，让每个生成的界面都沿用同一套配色、字体与圆角。
• 重视无障碍的团队：在设计评审前运行内置无障碍审计，拿到 WCAG 对比度报告与替代文本建议。
• 智能体协作工作流：通过 MCP 把 Stitch 接入 Claude Code、Cursor 或 Gemini CLI，让编码智能体不用离开终端就能取用设计稿与代码。