还在花钱订阅Figma来画初稿吗？现在不用了。Google发布了一款基于Gemini的AI设计工具，完全免费——发布当天Figma股价暴跌8.8%。 它叫Stitch。输入一行文字就能生成UI，实时多人协作编辑，还能导出React代码。全都免费。

3秒速览
文字/语音/草图输入 → AI智能体实时生成 → 多人协同编辑 → DESIGN.md品牌同步 → 导出到Figma/React代码

这是什么？

Google Stitch是Google Labs开发的AI驱动UI设计平台。 基于Gemini 2.5 Flash/Pro，通过文字、图片和语音指令生成UI界面。2025年Google I/O首次发布，2026年3月的重大更新将其完全重构为"AI原生无限画布"。

最大的变化是"实时流式设计智能体"。 输入时UI组件会实时渲染，Agent Manager会记住整个项目历史，确保结果的一致性。还加入了类似Figma的多人同时编辑功能——全都免费。

还有一个值得关注的地方：DESIGN.md这个开源格式。这是以Apache 2.0协议发布的Markdown格式设计系统规范，用文字定义颜色、字体、间距和组件模式，AI就会读取这些规则并一致地应用到所有界面上。 支持Git版本管理，还能与Claude Code、Cursor等AI编码工具集成。

$0
Stitch月费
350次
每月免费生成次数
8.8%
发布当天Figma股价跌幅

了解Stitch的4种AI模式会很有用：

  1. Flash模式（Gemini 2.5 Flash）
    60~90秒内生成快速初稿。适合快速验证想法或探索多个方向。
  2. Thinking模式
    针对复杂UI流程和多屏设计优化。速度稍慢，但在设计复杂服务架构时效果出色。
  3. Redesign模式
    上传已有截图，生成高清重设计版本。适合遗留界面的改版。
  4. Ideate模式
    从一个描述同时生成多个创意概念。非常适合向客户展示早期方向选择。

会有什么变化？

"AI设计工具"其实已经有很多了。Figma Make、v0、MagicPath、Framer AI……但Stitch不同的地方，除了是Google出品之外，更重要的是它把整个探索阶段都免费开放了。 以前的工作流程是打开Figma，对着空白画布从头开始。现在可以先在Stitch上2分钟内探出几十个方向，挑出最满意的再拿到Figma里打磨。

传统工作流（仅Figma） Stitch → Figma组合
初稿生成 设计师逐一手动排版（数小时） 文字输入 → 2分钟内生成多个方向
想法探索 现实中只能实现1~2个方向 Ideate模式同时比较多个概念
非设计师参与 Figma学习门槛高 PM、策划人员也能用语音即时生成原型
品牌应用 手动套用设计系统组件 设置一次DESIGN.md → 全局自动应用
代码连接 开发者交接 + 手动实现 通过MCP服务器直接连接Claude Code、Cursor
费用 Figma Pro: $15/编辑席位/月 Stitch探索阶段：免费

不过，Stitch目前还无法完全取代Figma。实际使用者普遍反映存在一些局限。

Stitch目前的局限

不支持微交互，响应式一致性不足，复杂组件系统管理困难。协作功能也还未达到Figma水平。它在创意发散和初稿验证阶段最能发挥价值，而非生产环境的最终交付。

工具 核心优势 最佳使用阶段 价格
Google Stitch AI智能体探索、免费、DESIGN.md 创意发散 → 初稿 免费（350次/月）
Figma 团队协作、设计系统、2,000+插件 精细打磨 → 生产交付 $15/编辑席位/月起
MagicPath 无限画布、Figma导入 设计 → 代码 免费 / $20/月 Pro
v0 (Vercel) shadcn/ui组件、开发者友好 组件开发 免费 / 付费

快速上手：核心步骤

  1. 访问并注册
    在stitch.withgoogle.com用Google账号登录。无需信用卡，立即开始。每月350次免费生成。
  2. 输入第一个提示词
    描述你想要的UI界面。越具体越好——比如"SaaS仪表盘主界面，深色模式，左侧边栏"。先用Flash模式快速探索多个方向。
  3. 设置DESIGN.md（可选，强烈推荐）
    粘贴现有品牌URL，Stitch会自动提取设计系统。或直接定义颜色和字体，之后所有生成内容都会自动应用。
  4. 用Agent Manager反复探索
    通过Voice Canvas或直接编辑来修改。用Ideate模式探索多个方向，选择喜欢的继续深化。
  5. 导出
    可导出为Figma图层（使用官方社区插件），或直接导出HTML/Tailwind CSS代码。通过MCP服务器连接，可在Claude Code、Cursor中继续开发。

刚开始使用时记住这一点

模糊的一句话提示词会产生通用化结果。试试"四步框架"：基础界面描述 → 美学氛围说明 → 逐屏细化 → DESIGN.md统一主题。按这个顺序操作，一开始就能得到一致性更强的效果。

想深入了解

Google Stitch官方网站 免费立即开始。包含示例项目和教程。 stitch.withgoogle.com

DESIGN.md GitHub仓库 Apache 2.0开源。包含代码检查、Tailwind转换和WCAG无障碍检查工具。 github.com

Google Stitch vs Figma深度对比 功能逐项对比，以及哪种工具适合哪种团队。 mindstudio.ai

Google Stitch + DESIGN.md实践指南 DESIGN.md结构和用法的详细说明。 brunch.co.kr

什么是Google Stitch？(AgentDock) 按使用场景分析优势与局限。 agentdock.ai

Google Stitch完全指南 (The AI Corner) 四步提示词框架与真实使用体验整理。 the-ai-corner.com