夜雨聆风
第2093篇原创内容
你好呀，欢迎来到公众号：AI财友。
我是吴俊驰，一名AI产品经理，和你一起用AI生财的朋友。
最近在产品圈里，AI 设计工具被聊得越来越热，但每次有人问"我到底该用 Figma 还是 Stitch？要不要试试 Vibe Coding？AI Studio 又是干嘛的？"，答案永远是一锅粥。
原因很简单：这四样东西定位根本不在同一个赛道上。
它们看起来都和"做产品"有关，但产物完全不同：有的产出设计稿，有的产出 UI + 代码，有的产出能调模型的 AI 应用，还有的直接产出能打开的网页。
把它们放在一起对比，最大的价值不是选出"谁最强"，而是看清一件事：从一个想法到一个能用的产品，每个都有自己的方式。
这篇文章，我们用一个晚上把这四种方式撩透。
一、四种方式的真实定位
如果把"从想法到产品"，四种工具侧重可以这样排：
设计准确性、品牌一致性、团队协作、速度、可运行性、真实交互验证。
记住这条，下面的所有讨论都围绕它展开。
二、Figma：设计的工厂
Figma不需要太多介绍。它是过去十年UI/UX行业的事实标准，核心是：画布 + 组件系统 + 实时多人协作。
它真正的护城河，是设计的"生产体系"：
Auto Layout、组件变体、设计 Token、嵌套覆盖
实时多人协作、评论、版本历史
Dev Mode 给开发者看代码值与导出资源
FigJam、Figma Slides、Figma Draw 等周边产品
上千个社区插件覆盖无障碍、动效、图标等
2025 年之后，Figma 也疯狂加了一堆 AI：
Make Designs：从 prompt 生成多屏界面
First Draft：一次生成完整 use case 的设计稿
AI Prototyping：用自然语言描述交互
Figma Make：可以指着原型某一处说"这里加个发布按钮"
Figma MCP：让 AI Agent 输出符合品牌设计系统的结果
但请注意一个关键事实：Figma的AI是"叠加式"的，不是"原生式"的。画布心智依然是它的灵魂，AI 只是侧栏里的一个加速器。对设计师，这是巨大的提速；对非设计师，画布本身仍是门槛。
适合谁：专业 UI/UX 设计师、需要严格组件系统和品牌一致性的团队、需要把设计沉淀成长期资产的产品组织。
一句话总结：Figma 是把"能摸到的东西"变成"能交付的产品"的工厂。
三、Google Stitch：AI 原生的设计速写本
Stitch是Google Labs推出的 AI 原生设计画布，底层由Gemini 2.5 Flash（标准模式）和Gemini 2.5 Pro（实验模式）驱动。
它和Figma最本质的区别是：Figma让你画，Stitch让你说。
核心能力：
文本生成 UI：一句"清爽极简的个人理财 App，白底橙色点缀"，直接给你完整界面
图片/草图转 UI：上传一张手绘草稿或竞品截图，转成干净的设计稿
Annotate：在画面上画个箭头标注，AI 自动执行修改
Theme 管理：统一调整配色与字体体系
多版本探索：从任一屏幕分支出新方案
新版"Vibe Design"画布：AI 原生无限画布 + 设计 Agent + 语音指令 + 实时设计评审
Stitch还有一个隐藏属性，它产出代码。设计稿和React代码从同一个结构化描述里生成，天然同步。这让它成为Figma和Vibe Coding的中间形态。
它的局限也很明确：
仍是 Google Labs 实验性产品，稳定性还在演化
难以严格遵循自有设计系统，组件复用与 Token 管理不成熟
团队协作能力远不及 Figma
适合谁：产品经理、独立开发者、AI 应用创始人，以及需要在没有专职设计师的情况下，从一句话快速得到可点击、可改色、可导出代码的高保真界面的人。
一句话总结：Stitch是设计师和PM的速写本，加速从0到1的视觉探索。
四、Google AI Studio：AI 应用的实验室
这是最容易被误会的一个。
很多人以为AI Studio 是"Google版Figma"，其实它根本不是设计工具，而是Google面向开发者的Gemini模型Web端原型与构建平台。
它的真实身份：
测试prompt、调用Gemini / Imagen / Veo / Gemini TTS / Gemma 全家桶
提供API Key，让你把 Gemini 能力接入自己的产品
支持Generative UI（生成式界面），界面在用户提问时由模型即时构造，不再是预先设计好的静态稿
生成式 UI这个概念是关键：未来部分界面可能不再需要静态设计稿，而是由模型按需生成。
适合谁：AI 应用开发者、需要让产品逻辑跑在 Gemini 上的团队、对生成式 UI 感兴趣的研究型产品人。
一句话总结：AI Studio是AI应用的实验室，不和 Figma/Stitch 抢设计师的活，而是接管智能后端。
五、Vibe Coding：想法的运行时
终于到了今年最火的一种方式。
Vibe Coding由Andrej Karpathy 提出，含义是 "描述你想要的感觉，AI 给你能跑的代码"。用户不再写 HTML/CSS/JS，而是用自然语言描述想要的页面，AI 直接产出可运行代码，然后通过对话继续迭代。
2026 年，Vibe Coding 已经分化成几个明确的层级：
纯单文件 HTML 直出：Claude Artifacts、ChatGPT、Gemini 直接吐出自包含
index.html，浏览器立即打开浏览器内 IDE + 即时预览：Bolt.new（浏览器里跑 Node.js）、Lovable（React + Supabase 全栈）、v0 by Vercel（shadcn/Tailwind 高质量组件 + 一键部署）
AI 增强桌面 IDE：Cursor、Windsurf、Claude Code——让 AI 真正改你的代码库
一体化生成 + 托管：Webflow AI、TeleportHQ——一次 prompt 给你代码、域名、SSL、表单、CMS
Vibe Coding 的三大杀手锏：
第一，它跳过了"设计稿到代码"之间最贵的工序。 传统流程里，设计稿到能跑的页面之间隔着切图、还原、CSS 调试、前后端联调。Vibe Coding 直接给你"能交互、能填数据、能跑计算"的产物。当你做的是 ROI 计算器、表单工具、互动 Demo，Vibe Coding 比 Figma 原型快得多——因为 Figma 模拟不了真实的表单填写和动态计算。
第二，它把"能不能做出来"前置到探索阶段。 2026 年的行业统计显示，采用 Vibe Coding 的团队里，约 25% 原本需要完整 Figma 设计的项目直接以 AI 原型交付给工程；另有 25% 先做 AI 原型再演化为正式 Figma 设计。也就是说，约一半的产品/设计工作流已带有 Vibe Coding 的影子。
第三，不同工具对应不同"直出粒度"：
想做单页落地页或小工具 → 让 Claude/Gemini 直接吐 HTML
想要能跑 npm、有路由的前端项目 → Bolt.new
看重代码质量、想干净放进 Next.js 仓库 → v0
要带数据库、认证、邮件的全栈应用 → Lovable
已经有现成代码库 → Cursor / Windsurf / Claude Code
但代价同样明显：
设计系统会被牺牲：每次生成"看起来不错"，但很难严格遵循 Token、字体阶梯、间距规范，十个页面之后设计债迅速累积
生产化与运维不会自动到来：AI 不会替你做安全审计、数据库优化、长期维护
协作能力远不及 Figma：版本、评论、组件复用还很初级
适合谁：任何想要"今天就看到结果"的人，独立开发者、PM、市场人员、想做活动页的运营、想做 MVP 的创始人。
一句话总结：Vibe Coding把"想法到能摸到的东西"拉到最快。
六、四方对比表：一图看懂所有差异
七、按场景选工具：别再问"哪个最好"
工具没有最好，只有"适合此刻的你"。给你一份最简单的决策清单：
做正式产品、App、B 端系统、复杂用户流程、需要设计系统沉淀 → Figma
做快速 UI 风格探索、一次生成多个视觉方向给老板挑 → Stitch
做AI 应用本身——聊天机器人、AI 搜索、多模态工具 → AI Studio
做能马上打开的网页、落地页、活动页、MVP、可点击 Demo → Vibe Coding
八、最后的话
Vibe Coding 把"想法到能摸到的东西"拉到最快，Figma 把"能摸到的东西"变成"能交付的产品"，Stitch 加速前半段，AI Studio 能接管智能后端。
不要纠结用哪个工具，工具从来不是答案，用工具的人才是。
更多内容推荐加入“AI财友”，666元/年，有兴趣的小伙伴关注公众号。
今天撩到这，如果觉得撩得不过瘾，欢迎留言，明天我们继续撩哦~
【个人简介】
吴俊驰，AI产品经理，欢迎关注微信公众号交流~
1.生财：做过20+生财小项目
2.产品：从0-1落地企业AI产品
3.技术：从0-1独立开发AR图书APP
4.健康：健康减脂10斤3次
5.阅读：每天一本书100天
6.日更：持续日更公众号2年+
7.撩AI：撩一撩AI已500+天
打造最好的产品，欢迎点击关注公众号
--
