Google Stitch 和 Claude Design 我都用了一周，同一句 prompt 差别真的大

发表于 更新于 分类于 阅读次数： 本文字数： 5k 阅读时长 ≈ 5 分钟

cover

大家好，我是飞飞。

今天下午我做了个实验——同一句 prompt 先喂 Google Stitch，再喂 Claude Design，看谁给的东西我更愿意留下来用。

prompt 是”帮我做一个 AI 写作工具的订阅落地页，主色深紫，参考 Linear 的风格”。

Stitch 35 秒给了 5 个屏：首页 / 定价 / 功能详情 / 登录 / 付款成功。点 Play 能在屏幕之间跳转，导出可以选 React + Tailwind，扔进我本地工程一分钟就跑起来了。

Claude Design 50 秒给了 1 个屏，单页长滚动，hero + 功能 + 定价 + FAQ + 注册表单全在一张画布上。右上角有个”Send to Claude Code”的按钮，我点下去，Claude 自己在终端里开了一个 worktree，把整个页面写成 Next.js 项目，半小时后 PR 就进来了。

两家的差别从这一刻我就明白了——Stitch 给的是设计稿，Claude Design 给的是 PR。

Stitch 与 Claude Design 工作流对比

Stitch 其实是先来的那个

我知道很多人是从 4 月 17 日 Claude Design 发布才开始关心这个赛道，其实真把 Figma 股价先砸下去的是 Stitch。

2026 年 3 月 19 日，Google Labs 把 Stitch 2.0 推上线。那一版里塞进去的东西今天看还是挺狠的——AI-native 无限画布、一次生成 5 个屏、Gemini Live 驱动的语音画布（官方叫”Vibe Design”）、设计系统上传、Annotate 手绘批注、MCP Server 能接 Cursor 和 Antigravity。

Figma 股价两天跌了 12%。

那会儿我的第一反应还挺乐观——“免费 550 次/月，Gemini 3.0 Pro 直接给你画，这要搞一个 side project 够用了”。我花了一周把自己几个个人项目的落地页都在 Stitch 里重画了一遍。

结论是：它是我用过所有 AI 设计工具里最”设计师友好”的一个。

什么意思呢——Stitch 给你的东西 hidden 着一个假设，就是”你接下来会在 Figma 里继续打磨”。画布是无限的，每次生成都沉淀在旁边不覆盖；多框架代码导出（React、Vue、Flutter、SwiftUI 全都有）也是给真正会编程的人准备的；它的 Annotate 功能甚至能让你在屏幕上手画个圈，说”这个按钮往右挪一点”，它就把那一块重新生成。

这就是我用下来的感觉：Stitch 是给设计师省 20% 画布时间的。

Claude Design 装上那天我才意识到两家根本不一样

4 月 17 号 23 点那条推文我之前专门写过一篇文章讲。

当晚凌晨 1 点我开了 Claude Design，丢的第一个 prompt 其实是”做一个博客封面编辑器”——我想看它能不能替掉 Stitch。

它给我的东西长得跟 Stitch 完全不是一个物种。

Stitch 给我的是 UI 设计稿：左侧画布 + 右侧属性面板、字体、颜色、对齐网格。

Claude Design 给我的是一个能跑的 HTML 应用：按钮真能点、表单真能填、图片真能上传。

我试着让它把颜色改成浅灰，它没再生成一遍，而是在画布上直接把 CSS 变量改了。我又说”把行距调大”，它现场给我画了一个滑块控件——左边数字是 1.2，右边是 2.0，我拖着拖着画布上所有段落的行距同步在变。

pasqualepillitteri.it 的评测里把这个功能叫”Tweaks”——Claude 根据你的页面内容自己生成调节滑块。这种东西在 Stitch 里我没见过，Stitch 要调行距得重新发一次 prompt。

我后来摸清楚了 Claude Design 的定位——它不假设你会打开 Figma 继续改，它假设你接下来会把它送进 Claude Code 写代码。

这就是那个”Send to Claude Code”按钮的意义：画布上那个能交互的 HTML 只是中间态，它真正的产物是一条能跑进你项目里的 PR。

同一个 prompt 喂两家，差别真的大

今天下午我设计的那个对比实验值得说细一点。

我问 Stitch 的是”帮我做一个 AI 写作工具订阅落地页，主色深紫”。它给了 5 个屏，这 5 个屏之间有用户跳转路径——首页点订阅按钮进定价页、定价页点购买进付款页、付款完成进成功页。每个屏都独立存在，我可以单独导出。

Stitch 的核心假设写在这 5 个屏里：一个完整的产品不止一个页面。

我问 Claude Design 的同一句话，它给了 1 个屏，但这 1 个屏是完整的单页滚动——从 hero 到定价到 FAQ 到 CTA 表单，所有内容都塞在一页里。它没做跳转，因为它觉得落地页本来就是长一页。

Claude Design 的核心假设也写在那 1 个屏里：落地页的用户旅程是在一个页面里完成的，直到他点下注册按钮。

两个假设谁更对？我琢磨了半天——Stitch 对，当我做的是一个产品；Claude Design 对，当我做的是一次推广。

这个区别我装之前想不到，用完之后才反应过来。

代码输出这件事才是分水岭

Stitch 导出代码的方式是这样的——右上角点 Export，选目标框架（React/Vue/Flutter/SwiftUI/Angular/HTML+Tailwind 都行），下载一个 zip，里面是组件化的代码。

质量我认真看了——Tailwind 类名写得很克制，不是那种每个元素都塞 20 个 class 的 AI 糊涂代码。组件拆分合理，能直接扔进 Next.js 项目里 import 用。

但它也就到这一步了，剩下的交给你。

Claude Design 的路子不一样。它也支持导出 HTML zip，但主打的是那个”Send to Claude Code”按钮——一点下去，它把整个 design bundle（HTML、design tokens、组件定义、交互描述）打包成 prompt 送进 Claude Code。

我今天下午那次 Claude Code 接到之后做的事：

开了一个 worktree，新建 Next.js 14 项目，把 design bundle 里的组件拆成 app/page.tsx + components/，加 shadcn/ui 作为底座，把深紫主色配置进 tailwind.config.ts，最后跑了一遍 build 确认能起来，给我出了一个 PR。

这整个过程我做饭回来才看完的——差不多 28 分钟。

这条流水线在 Stitch 里也能跑，但要你自己接——Stitch 有 MCP Server，你可以让 Cursor 或者 Antigravity 连上去，自动把最新的设计拉下来生成代码。但这是”你需要自己搭管道”，不是”它帮你搭好了”。

Anthropic 的产品路线图我现在看懂了——Claude Design 的存在是为了把”从想法到上线代码”这整条路堵在自己家产品矩阵里跑完，不让你跳去 Figma 再跳去 Vercel。至于跟 Stitch 比画布谁更好看这件事，它根本没打算参与。

免费 vs Pro 这刀砍在哪

价格差距我得单独说。

Stitch 现在是 Google Labs 实验品，免费，每月 550 次生成——350 次 Gemini 3.0 Flash + 200 次 Gemini 3.0 Pro。

Claude Design 是 Anthropic Pro / Max / Team / Enterprise 订阅内置功能，起步价每月 20 刀（Pro）。

我一开始觉得这是 Claude Design 的劣势——免费 vs 付费，大多数人肯定选免费的。

后来我意识到这两家根本不在抢同一批用户。

Stitch 瞄准的是”我想做个 UI 但不想付钱给 Figma”的人——里面有大量独立开发者、学生、做 side project 的工程师。

Claude Design 瞄准的是”我已经每月给 Claude 付了 20 刀 Pro，顺手打开这个新功能”的人——里面有 founder、PM、marketer，他们本来就在 Claude 里问问题、写邮件、开会记录，现在多了一个”顺便做个 prototype”的入口。

免费不免费对 Claude Design 的目标用户不是决定性因素——他们已经付费了，Claude Design 只是提高他们的订阅利用率。

两家都打 Figma，打法完全不同

3 月 19 日 Stitch 2.0 发，Figma 两天跌 12%。

4 月 17 日 Claude Design 发，Figma 单日跌约 7%。

这两刀砍法不一样。

Stitch 是正面硬刚——免费、多屏、语音画布、代码导出，它瞄着 Figma 的核心用户（设计师）说：”你以前在 Figma 里花 20 个 prompt 才能拉齐的页面，我这儿 2 个 prompt 搞定，而且免费”。

Claude Design 是从侧面抄过来的——它不跟 Figma 抢设计师，它抢的是 Figma 以前吃不到的饼（founder、PM、marketer 这些从来没打开过 Figma 的人）。

两家都通过 MCP 挂钩到编码工具——Stitch 的 MCP 接 Cursor、Antigravity、Gemini CLI；Claude Design 的 handoff 接 Claude Code。

一个做设计师的护城河迁移（把设计师从 Figma 搬到 Stitch），一个做市场扩张（把没打开过 Figma 的人变成产品原型的生产者）。

Figma 两边都难受，股价走势就是两边都在挨刀。

我现在怎么用这两个

一周下来我的工作台已经稳定下来了。

早期发散的时候我开 Stitch——发散需要看多屏、看多版本、看并排对比，无限画布 + 免费 550 次/月 正好适合这件事。个人 side project 的 UI 我现在不再打开 Figma，直接 Stitch 画完，导出 React 代码改一改。

但进了执行阶段——尤其是我自己的产品，要写真业务逻辑、要对接后端、要走代码仓库流程的时候——我开 Claude Design。

原因只有一个：我要的是一个能 merge 进 main 分支的 PR。好看的 UI 图那一步 Stitch 已经能替我做了，没必要再付第二份钱。

Claude Design 的那个”Send to Claude Code”能帮我省下”把设计翻译成代码”这一整段的工作量，我只需要 review 它出的 PR 就行。

一个反直觉的发现：两家并不是互斥的。

Reddit 上已经有人在跑这种链——Stitch 先出多屏发散方案，选好一屏之后截图 drop 进 Claude Design，让它做最后的交互打磨 + 送 Claude Code。

我试了一下，确实顺。

最后

今天下午那个订阅落地页对比实验我还有一个没写的细节。

Stitch 给我那 5 个屏的时候，其中”付款成功”那一屏上的按钮文案是”返回主页”。

Claude Design 给我的那 1 个屏上 CTA 文案是”开始免费试用 14 天”。

这两句文案都不是我在 prompt 里写的。

Stitch 写按钮文案的时候默认你在做一个 App，Claude Design 写文案的时候默认你在做一次转化——这两个 AI 对”我让它干什么”的理解都不一样。

我之前挑工具就是对着功能清单勾——哪个支持 React 导出、哪个支持语音、哪个支持 MCP。今天下午这两句文案让我意识到，功能清单写得再全也是一样的，真正不一样的是它默认把你当成什么样的人。我用哪家顺手，其实是我像不像它预设的那批用户。

你手里现在有没有装哪个？如果装了，有没有试过给它一模一样的 prompt，看它会给你什么——我比较好奇设计师用 Stitch、PM 用 Claude Design 的人各自会写什么 prompt，默认值是不是真的能对上自己的工作方式。评论区聊聊。

参考资料