夜雨聆风一、总表：10款工具一览
工具 | 类型 | 价格 | 完成度 | 视觉 | 代码 | 用时 | 最大坑 | 锁定风险 |
|---|---|---|---|---|---|---|---|---|
Google Stitch | 设计 | 免费（每日400 credits） | — | 高 | 中 | 分钟级 | 扣费黑箱，无付费升级路径 | 无 |
Framer | 设计 | $10-100/月 | — | 最高 | — | 分钟级 | 零代码导出，带宽超了直接下线 | 高 |
Webflow | 设计 | $14-39/月 | — | 高 | — | 小时级 | 上手要几周，导出代码缺斤少两 | 中 |
Uizard | 设计 | $12-39/月 | — | 中 | — | 分钟级 | 草图识别外能力有限 | 低 |
Relume | 设计 | $32-42/月 | — | 中 | — | 分钟级 | 只做线框图，不做完整页面 | 低 |
Bolt.new | 原型 | $0-200/月 | 7/10 | 6/10 | 4/10 | 45min | 代码质量最差，单文件3000行 | 低 |
Lovable | 原型 | $0-50/月 | 8/10 | 9/10 | 6/10 | 1.5h | 免费版不能导出不能部署 | 中低 |
v0 | 工程 | $0-30/月 | 4/10 | 8/10 | 8/10 | 3h+ | 只能生成零件，不能生成网站 | 最低 |
Cursor | 工程 | $0-20/月 | 10/10 | 8/10 | 9/10 | 6h | 会静默回退代码，实际花费2-3倍 | 无 |
Replit | 原型 | $0-25/月 | 9/10 | 7/10 | 7/10 | 2h | 账单超预期，代码膨胀严重 | 中 |
能力矩阵：
能力 | Stitch | Framer | Webflow | Bolt | Lovable | v0 | Cursor | Replit |
|---|---|---|---|---|---|---|---|---|
免费可用 | ✅ | 部分 | 部分 | 部分 | 部分 | 部分 | 部分 | 部分 |
代码导出 | ✅ | ❌ | ✅ | ✅ | 付费 | ✅ | ✅ | ✅ |
内置部署 | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ |
后端支持 | ❌ | ❌ | CMS | ✅ | Supabase | Vercel | 任意 | ✅ |
GitHub集成 | ❌ | ❌ | ❌ | 有限 | 有限 | 完整 | ✅ | 有限 |
移动端原生 | Flutter/SwiftUI | ❌ | ❌ | ❌ | ❌ | ❌ | 任意 | 任意 |
二、逐个工具详解
2.1 Google Stitch
基本情况： Google Labs出品，AI原生UI设计工具。免费，每日400设计credits + 15次Redesign credits，UTC午夜重置。Standard Mode用Gemini 2.5 Flash，Experimental Mode用Gemini 2.5 Pro（质量更高但额度更紧）。
输入方式： 自然语言、语音（Vibe Design）、草图、截图、参考图。
导出格式： HTML/CSS、React+Tailwind、Vue 3+CSS、Flutter、SwiftUI、Figma文件、SVG/PNG。支持直接导出到Figma，保留Auto Layout结构。
技术特点： 语音Vibe Design允许描述抽象"感觉"（如"温暖友好"），AI据此调整色彩、字体、间距、圆角。有MCP协议支持，可通过Antigravity IDE直接连接。
隐性问题：
扣费黑箱。按"复杂度"扣credits，生成前不显示本次消耗。简单操作扣3个，复杂的扣两位数。没法做预算。
没有付费升级路径。用完等早8点刷新，不能花钱加额度。
输出不稳定。同一prompt每次结果差异大，锁定不了方向微调。
Labs实验产品，功能和额度随时可能调整，无SLA。
与Claude Code结合：
Figma路径（推荐）：Stitch导出到Figma → 启用Figma Dev Mode MCP Server → Claude Code通过
get_code读取设计细节 → 生成代码直接路径：Stitch导出HTML/CSS → Claude Code重构为组件化结构
社区已有skill（
deepakdarryani/claude-skill-google-stitch），可自动化转换
2.2 Framer
基本情况： 视觉动效最强的Web建站平台。免费版$0（无法发布）、Basic $10/月、Pro $30/月、Scale $100/月。
导出能力： 零代码导出。网站以专有格式存在Framer服务器上，迁移不存在。
隐性问题：
零代码导出。离开平台=从头建站。
空页面基重1.5-3MB（强制捆绑React运行时），移动端PageSpeed约40分。
带宽超了直接下线。Pro套餐100GB/月，约5万次访问耗尽。没有降速，没有超额付费，网站返回错误页。
SEO残缺。无结构化数据、无Hreflang，自定义robots.txt要$30/月。
附加费高。本地化每种语言每月$20-40，每个编辑席位每月$40。
2.3 Webflow
基本情况： 专业设计师的无代码平台。免费版可用、Basic $14/月、CMS $23/月、Business $39/月。设计自由度最高，内置CMS与电商功能。
导出能力： 支持HTML/CSS/JS导出，但交互逻辑和CMS功能导出后全部丢失。
隐性问题：
学习成本高。面向设计师，非技术人员上手需数周。
导出不完整。拿到的是半成品。
2026年5月刚调价，AI credits成为新收费维度。
2.4 Uizard
基本情况： 草图识别与早期MVP原型验证工具。免费版可用、Pro $12/月、Business $39/月。
核心能力： 手绘草图→数字原型转化最成熟，内置AI热力图预测用户注意力分布。
隐性问题： 草图识别外的能力有限，不适合做完整应用。
2.5 Relume AI
基本情况： Web设计师的站点规划与线框加速器。免费版可用、Pro $32/月、Team $42/用户/月。
核心能力： 快速生成站点地图与线框图，1000+预制组件库，支持导出到Figma/Webflow/React。
隐性问题： 只做设计前期（信息架构规划），不做完整页面。
2.6 Bolt.new
基本情况： StackBlitz出品，速度至上的云端建站工具。免费版$0（15万token/天）、Pro $20/月、Pro+ $50/月、Premier $100/月、Ultimate $200/月。AI模型可选（Claude、GPT等）。
实测数据： 生成速度45分钟，完成度7/10，视觉6/10，代码4/10（同类最低）。
后端支持： 内置数据库（免费）、内置鉴权、支持QuickBooks/Twilio/Notion等第三方集成。支持Serverless函数。
隐性问题：
单文件3000行。全部代码塞一个HTML，CSS/JS混在一起，无组件化。后期修改要在3000行里找。
生产环境7大致命缺陷：无错误边界（一个组件出错全站白屏）、无输入验证（用户能提交任何垃圾）、API地址硬编码（换环境就炸）、零测试代码。不是"需要优化"，是"根本不能上线"。
额度烧得快。免费版15万token/天，复杂项目一天用完。
迭代像拆炸弹。AI改A处容易把B处搞坏，项目复杂度上去后维护成本急剧上升。
2.7 Lovable
基本情况： 非工程师的AI建站首选。免费版$0（5次/天）、Pro $25/月、Business $50/月。技术栈React + Tailwind CSS，后端通过Supabase集成。
实测数据： 生成速度1.5小时，完成度8/10，视觉9/10（同类最高），代码6/10。
隐性问题：
免费版是摆设。不能导出代码，不能部署，只能在平台上看。上线要$25/月起。
表单只有前端UI。点提交不触发后端逻辑，后端要自己补。
组件命名Button1、Card2。代码可维护性差。
绑死Supabase。换后端要重写。
视觉9/10是陷阱。好看是真的，功能深度严重不足也是真的。
2.8 Vercel v0
基本情况： Vercel出品，React/UI组件生成器。免费版$0（有限额度）、Premium $20/月、Teams $30/用户/月。技术栈Next.js + React。
实测数据： 生成速度3小时+（仅完成首页），完成度4/10（最低），视觉8/10，代码8/10。
GitHub集成： 完整（原生集成，Git面板、分支、PR、合并时部署）。直接导出到GitHub仓库。
隐性问题：
零件工厂，不是建站工具。能生成高质量按钮、卡片组件，路由、筛选逻辑不管。需要开发者自行组装。
深度绑定Vercel生态。最佳体验只在Vercel上。
免费额度有限。复杂组件生成消耗大，免费版很快见底。
2.9 Cursor
基本情况： Anysphere出品，专业开发者的AI IDE。免费版可用、Pro $20/月。基于VS Code，支持所有语言和框架。多模型切换（Claude、GPT-4o、Gemini），200K tokens上下文窗口。
实测数据： 生成速度6小时（需人工介入），完成度10/10（最高），视觉8/10，代码9/10（最高）。
隐性问题：
代码回退Bug（已确认）。Agent Review冲突、云同步冲突、保存格式化冲突导致代码被悄悄撤销。有开发者丢失4个月工作。
频繁崩溃。M4 Pro MacBook上5分钟崩溃3次。
实际月均$40-50。Agent模式消耗快，标价$20很快突破。有用户老板花了$5500买积分。
Agent擅改未授权文件。修改了没让它动的文件，然后报告"没改"。
输出质量不稳定。同一提示不同时间结果差异大，背后可能在不知情的情况下切换了模型版本。
额度逐季收紧。推出时慷慨，现在越来越抠门，逼用户升级更贵的模型。
2.10 Replit Agent
基本情况： Replit出品，云端全栈开发+一键部署。免费版可用、Pro $25/月。技术栈多种（Python、Node.js、Go等）。一键部署，自带HTTPS。
实测数据： 生成速度2小时，完成度9/10，视觉7/10，代码7/10。
隐性问题：
定价不透明。Effort-Based Credits：价格做完才看到，事先无法评估。
实际月费是订阅费的2-3倍。Core $25 + 部署$10-20 + 额外积分 = 实际$50-80/月。活跃构建者$150-250/月。
代码膨胀。"建个联系表单"可能带出三个额外包和一个配置文件。每个多余零件都要花credits。
部署选错方式成本差10倍。默认Reserved VM（$10-20+/月），流量波动大的应用用Autoscale可能只要1/10。
一体化=出不去。Database/Object Storage/Auth全在Replit里，迁移非常困难。
官方定位：原型和内部工具。不适合5人以上团队、受监管行业、正式上线产品。
三、与Claude Code / WorkBuddy的结合方式
3.1 Stitch + Claude Code（已有成熟工作流）
路径一：Figma中转（推荐）
Stitch生成设计 → 导出到Figma
Figma桌面端启用Dev Mode MCP Server
Claude Code配置MCP连接：
claude mcp add --transport sse Figma http://127.0.0.1:3845/sseClaude Code调用
get_code读取设计细节 → 生成代码
路径二：直接HTML导出
Stitch导出HTML/CSS
Claude Code重构为组件化结构
3.2 v0 + Claude Code
v0生成高质量React/Tailwind组件 → Claude Code组装成完整页面、处理状态管理、路由配置。
3.3 Bolt.new + Claude Code
Bolt.new快速生成可运行MVP → 导出代码到本地 → Claude Code做生产级优化、重构、调试。
3.4 直接用Claude Code + 设计系统
不经过第三方设计工具，Claude Code直接写代码，配合Tailwind CSS / shadcn/ui / Ant Design等组件库。
四、技术架构差异
生成方式：
单次生成：Stitch、Framer、Bolt.new
对话迭代：Lovable、Cursor
组件拼装：v0
代码结构：
单文件：Bolt.new（单HTML超3000行）
组件化：Lovable、v0、Cursor
框架无关：Stitch直接导出模式
后端实现：
无后端：Stitch、Framer、Webflow
BaaS集成：Lovable（Supabase）
内置后端：Bolt.new、Replit
全栈支持：Cursor
五、市场格局
工具已分化为三个层次：
设计层（Stitch、Framer、Webflow）：解决"长什么样"
原型层（Bolt.new、Lovable、Replit）：解决"能跑起来"
工程层（Cursor、v0）：解决"能上线维护"
2026年"Vibe Coding"（自然语言→AI生成代码）成为主流开发方式。
单一工具难以覆盖完整流程，实际工作流中常见组合使用。
数据来源：各工具官网、第三方评测文章、社区实测报告。价格信息截至2026年5月，可能随时调整。
