AI 生成 UI 并非新技术——2023 年 Vercel 推出 v0 时还是"把提示词变成 shadcn/ui 组件"的玩具。变化发生在 2024-2025 两年：Lovable（2024 年底上线）把生成范围扩展到全栈应用并配上可视化编辑；Bolt 借 WebContainer 让浏览器成为零配置开发环境；2025 年 Figma Make 进入正式开放（GA），Google Labs 的 Stitch 则从"生成设计稿"一侧切入。前端之所以最先被攻陷，原因有三：React + Tailwind + shadcn/ui 形成了事实上的"标准方言"，训练语料高度集中；UI 正确与否一眼可验（渲染出来就知道），天然适配模型的"生成-人看-再改"循环；而部署侧 Vercel/Netlify 把发布摩擦降为零。
本报告聚焦两个问题：其一，这些工具生成 UI 的质量边界到底在哪——什么任务可以放心交给它，什么任务交给它是埋雷；其二，设计工作流如何重组——当"描述→可交互代码"成为最短路径，设计师、设计系统与交付流程会发生什么。区分两个概念：mock-gen（AI 生成静态设计稿，如 Stitch、传统 Figma 插件）与 code-gen（AI 直接生成可运行界面代码，如 v0、Lovable）——2025 年以来行业共识是后者正在反超，因为可交互原型的信息量远高于静态稿。
| 工具 | 出品方 / 时间 | 输出物 | 强项 | 短板 |
|---|---|---|---|---|
| v0 | Vercel，2023 | React + Tailwind（shadcn/ui 系）组件与页面 | 组件代码质量与设计系统对齐度最好；与 Vercel 部署链路无缝；社区与迭代速度（多次登上工具榜） | 全栈与后端能力弱；美观度不稳定，社区有"同题不如 Lovable 好看"的持续吐槽 |
| Lovable | 瑞典 GPT Engineer 团队，2024 年底 | 全栈 React 应用，支持可视化编辑与直接部署 | MVP 从描述到上线的速度公认最快；Figma 原型导入（与 Builder.io 合作）；非技术者友好 | 复杂业务逻辑与规模化后的代码治理弱；生成物长期维护成本高 |
| Bolt.new | StackBlitz，2024 | 浏览器内全栈项目（WebContainer） | 零本地环境，打开浏览器就能跑；适合演示与教学 | 深度重构不便；移动原生不在射程内 |
| Figma Make | Figma，2025 年 GA | Figma 内 prompt-to-app，设计稿与代码同源 | 设计师零迁移成本；原型→代码的"同源"叙事最强 | 生产级导出仍需工程介入；生态与工程侧信任需时间建立 |
| Stitch | Google Labs，2024 年底 | 提示词→UI 设计稿与前端代码 | 探索期出方案快，免费额度友好 | 精细控制有限，偏"灵感生成器"定位 |
社区口径的共识（Addy Osmani 等多篇对比评测）可以概括为一句话：v0 出组件、Lovable 出 MVP、Bolt 出演示、Figma Make 让设计师不出 Figma。没有全能选手——选型本质上是选"你卡在哪一步"。另需注意：这些工具的生成物九成以上收敛到 React/Tailwind 栈，对 Vue、Svelte、原生 CSS 体系的支持明显更弱，选型同时也在替你选技术栈。
Lovable 的前身是 2023 年爆火的 GPT Engineer 开源项目，团队转型后在 2024 年底推出 Lovable 产品：一句描述生成全栈应用、可视化微调、一键部署。2025 年其增长被多家媒体报道为欧洲最快之一的消费级 AI 软件公司，ARR 在上线约八个月后突破 1 亿美元（媒体报道口径，估计），随后与 Figma、Builder.io 打通"Figma 原型→可运行应用"链路。它证明了一件事：UI 生成的付费者不（只）是工程师，而是想自己动手做产品的运营、创始人与设计师——这恰好解释了设计师角色的挤压感从何而来。
面对"code-gen 超越 mock-gen、评审会里出现越来越多 Lovable 链接"的趋势（多位设计从业者公开观察到静态稿在探索与评审环节被可交互原型替代），Figma 的应对是 2025 年正式开放 Figma Make：在设计工具内部直接 prompt-to-app。对设计行业的含义是：设计工具的护城河从"编辑矢量与组件的能力"转向"从想法到可交互产物的距离"。
| 任务类型 | AI 生成可靠度 | 说明 |
|---|---|---|
| 落地页 / 营销页 / 个人站 | 高 | 模式化程度高，验收标准就是"好不好看"，迭代闭环最短 |
| 后台面板 / CRUD 表格 / 内部工具 | 高 | shadcn/ui 系组件覆盖完整，业务逻辑浅 |
| 高保真可交互原型（验证想法） | 高 | 这是当前 AI UI 生成最大的净增量——过去做不起原型的阶段现在做得起 |
| 复杂交互编排（多步流程、拖拽画布、实时协同） | 中低 | 状态管理复杂度超出生成模型稳定射程，人工返工成本可能高于手写 |
| 性能敏感场景（长列表、复杂动画、低配设备） | 低 | 生成代码普遍不优化渲染路径，需人工重构 |
| 无障碍与合规级一致性 | 低 | 默认输出的 a11y 与品牌一致性差，必须靠设计系统约束与人工走查兜底 |
旧流程是：需求 → Figma 静态稿 → 评审 → 切图标注 → 前端实现。新流程正在变成：需求 → 设计约束（tokens、组件、do/don't）→ AI 生成可交互原型 → 评审原型 → 生成/回收生产组件 → 人工走查。三个具体变化：其一，设计系统的形态变了——它不再只是 Figma library，而必须同时是"提示词资产"：模型能读懂的组件示例、代码级 tokens、反例清单；其二，"设计交付"（handoff）环节被压缩甚至消失，取而代之的是"组件回收"——把原型里合格的生成代码沉淀进工程仓；其三，出现了新的混合角色 design engineer：既定标准又动手生成，在小团队里这个角色正在同时吸收部分设计师与前端的工作。