👁 114 次阅读
今天要做的不是写几行代码，而是用一段对话，把一个『从想法到能上线的完整网页应用』做出来——前端界面、后端数据库、用户登录、支付接入、一键发布，全程不写一行手写代码。
我用的是 Lovable，属于『AI 全栈应用生成器』这一类工具：你用自然语言描述要做什么，它把代码直接生成好。本文所有版本号、价格与数据都来自官方定价页与官方指南的公开页面，来源在文末标注清楚。
读完这篇你会掌握：完整跑通一次『描述 → 生成 → 视觉改稿 → 接数据库和支付 → 发布上线』的流程；搞懂 Agent Mode / Chat Mode / Visual Edits 三种工作模式各自什么时候用；学会用一张对比表把 Lovable、Bolt.new、V0、Cursor、Windsurf 放在同一个维度上做决策；避开三个新手最常见的坑。
一、先搞清楚：你属于哪一种 AI 工具使用者
市面上『AI 帮你写代码』的东西名字很多，容易混淆。先建立一个分类框架，再决定要不要用 Lovable，这一步能省掉后面很多纠结。
AI 工具大致分三类
第一类是 AI 应用生成器（App Builder），代表是 Lovable、Bolt.new、Replit Agent。它们的特点是：你描述一个应用，它生成整个应用并把托管一起给你，最快从想法到能跑的应用，但控制粒度最粗。这一类适合『结果优先』——你要的是个能上线的东西，不想碰工程细节。
第二类是 AI 代码编辑器 / IDE，代表是 Cursor、Windsurf。它是真正的代码编辑器，内置了 AI。适合已经有自己的代码库、要在真实项目文件上做修改和重构的人。
第三类是 终端里的 AI 代理（Terminal Agent），代表是 Claude Code 这类命令行工具。它直接在你的代码上干活，能力最强也最需要你懂工程。
一个关键判断标准：你要的是『一个应用』，还是『在你的代码库里干活』？前者用生成器，后者用编辑器或终端代理。这也是为什么本文不写 Cursor——那是另一篇教程的活。
Lovable 属于哪一类
Lovable 定位很明确：根据官方指南的说法，它从纯英语的自然语言提示生成 生产级 TypeScript + React 应用，前端界面、后端数据库、认证系统、部署基础设施全给你生成，没有模板、没有拖拽组件那种妥协——你拿到的是真实的代码，可以自己拥有、自己扩展、自己部署。
它官方给的三种工作模式（后文第四步会逐个讲清楚用法）：
- Agent Mode：自主开发——自己探索代码库、主动调试、上网搜解决方案、独立解决问题。
- Chat Mode：交互式界面，用于规划、调试、迭代开发，带多步推理。
- Visual Edits：直接点界面上的元素去改，不需要写任何提示词。
三类人的适配性
- 非技术角色：产品运营、创始人、市场人员。不需要写代码，但需要能上线的真实东西。这是 Lovable 的主战场——官方数据显示他们 5000 万个已构建项目里，4/5 的构建者是非技术岗位。
- 独立开发者：想要快速出 MVP 验证需求，不想在脚手架上耗两周。
- 技术团队：想要干净的 TypeScript/React 代码、不要样板代码的重复劳动，同时保留可维护性。
一个容易被忽略但很重要的点：Lovable 输出的是 TypeScript 和 React，这两种是任何后端开发者都认的通用技术栈。生成好的项目可以推到 GitHub 继续用 Cursor 或 VS Code 维护——它是『起点』，不是『黑箱』。这一点和某些平台输出的是平台私有配置、离开平台就跑不了，本质不同。
二、五步走通：从一句话到一个能访问的网址
下面这条主线我自己跑通过，每一步都写清楚：这一步在做什么、要敲/点什么、常见卡点是什么。
步骤 1：注册与角色选择
打开 lovable.dev，注册免费账户，不需要绑信用卡。注册完会让你回答三个问题：你的角色（非技术/开发者）、你用的技术栈、你打算做什么类型的项目。
这一步别跳。你的角色选择会影响默认代码风格和默认技术栈倾向——选『非技术』拿到的代码更偏开箱即用，选『开发者』会更偏工程规范。选错也不是不能改，但后面返工成本高。
步骤 2：写第一段提示词——这里最影响结果
新手最常见的错误是写得太泛：『帮我做一个网站』。这种提示词 AI 只能猜，结果通常又丑又没重点。
一个更靠谱的四段式结构：目标 + 核心页面 + 数据来源 + 约束。下面这段提示词是可直接复制用的，我做的是一个订阅制 SaaS 应用：
# 目标
做一个面向独立创作者的『内容订阅』SaaS 应用
# 核心页面
1. 首页 - Hero 区域 + 三个核心卖点卡片
2. 定价页 - 月度/年度两档，年度打 8 折
3. 用户登录/注册页 - 邮箱 + Google 登录
4. 仪表盘 - 我的订阅列表 + 使用量图表
# 数据来源
Supabase（数据库）+ Clerk（登录）
订阅表：id, plan, amount, cycle
用户表：id, email, tier
# 约束
- 全部使用 TypeScript + React
- 移动端优先，768px 以下单列
- 不要使用任何付费组件库三个要点：页面要列清单，不要写『做一个好看的首页』；数据表要写字段，不然 AI 会自己发明一套 schema，后面接真实数据时会崩；约束要显式写，尤其是框架、响应式和依赖限制——这三样 AI 最容易自作主张。
步骤 3：等它生成，然后立刻审查
提交后 AI 会开始工作：先读你写的 prompt，再规划组件结构，然后逐个生成文件。生成过程可以实时看到文件变化——这一点很重要，因为它让你能判断它的思路对不对，而不是等全部生成完才发现方向错了。
步骤 4：接数据库，让它真的能存数据
生成完静态页面还不够，一个真应用必须能存数据。Lovable 原生支持 Supabase 作为数据库、Clerk 作为登录。操作路径：进入项目设置 → Integrations → 选择 Supabase → 用官方引导创建一个新的 Supabase 项目 → 授权。
授权完成后，回到对话里补一句：
请根据我描述的数据结构，创建 users、subscriptions、invoices 三张表，并补齐对应的 TypeScript 类型定义。然后重新跑一遍仪表盘页面，让它真的从 Supabase 读数据。这一步不要省。跳过它，你拿到的是一个纯静态页面壳子，看着挺像样，但用户注册了也没地方存。
步骤 5：发布上线
点击 Publish，你会拿到一个 .lovable.app 子域名的公开链接，免费包含，不额外收费。这个链接可以直接发给任何人访问。
需要自己的域名？官方定价页写明，自定义域名支持属于 Pro 计划（$25/月）的功能，免费计划没有。
三、Visual Edits：不用写提示词改 UI
这是 Lovable 里我个人最省时间的一步，很多新手会漏掉。
传统 AI 工具的改 UI 流程是：截图给 AI → AI 改代码 → 你再看效果 → 不满意再描述一次。来回三四轮，半小时过去了。
Visual Edits 把这条链路砍掉了：直接在生成的界面上点你想改的元素，然后告诉它改什么，不需要描述『页面上那个红色的按钮』这种模糊定位。
实测流程（改首页 CTA 区域）：
【操作】点击首页 Hero 区域的 CTA 按钮
【提示词】把按钮文字改成『开始免费试用』，
改成红色背景，圆角 8px，加一点悬停时的位移动效
【操作】点击定价卡片的价格数字
【提示词】月度档位显示 $29，年度档位显示 $24/月（标注省 20%）
【操作】点击页脚
【提示词】加一行隐私政策和用户协议链接，灰色小号字体官方文档给出的效果数据：Visual Edits 相比纯提示词修改 UI，能把 UI 迭代周期缩短 40%。我自己的体感一致——尤其是『那个按钮颜色好像不对』这种描述起来很费劲的小修改，点一下比打字快得多。
但要注意它的边界：Visual Edits 只管界面表现层。你想改业务逻辑（比如『订阅到期后订单状态自动回滚』）这种涉及后端规则的东西，它改不了，得走 Agent Mode 或 Chat Mode。
四、Agent Mode 还是 Chat Mode？
两个模式都基于同一套代码，但适用场景差别很大，很多人第一次用容易搞混。
Chat Mode 适合交互式规划：需求还在变动、你想一步步确认、或者要调试具体问题。特点是每一步都和你确认，适合精细调整。
Agent Mode 适合让它自主干活：它会自己探索代码库、主动调试、上网搜解决方案、独立解决问题。官方文档对它的描述是『自主开发——自己探索代码库、主动调试、上网搜解决方案、独立解决问题』。
选择建议：
- 改动大、约束清晰（『加一个邀请码功能，规则是……』）→ Agent Mode，写清楚规则让它自己干。
- 需求还在探索中、不确定最终形态 → Chat Mode，一步步过。
- 纯 UI 表现调整 → Visual Edits，别绕。
五、Lovable 在同类工具里的位置
光了解 Lovable 不够，得知道它在整个格局里处于什么位置。下面这张表的数据都来自官方定价页与官方指南，我逐条标注了来源。
| 工具 | 起步价 | 核心计费 | 适合谁 |
|---|---|---|---|
| Lovable | 免费（5 credits/天） | 月度 credits | 非技术创始人做 MVP；要真实 TypeScript/React 代码 |
| Lovable Pro | $25/月 | 100 月度 credits，含额度回滚 | 正式做项目、要自定义域名 |
| Lovable Business | $50/月 | SSO + 最多 20 用户 | 团队统一使用 |
| Bolt.new | 免费（30 万 tokens/天） | 月度 tokens | 浏览器内跑，零安装，投演讲求 |
| Bolt.new Pro | $25/月起 | 10M tokens/月起，年付最多省 28% | 需要私有项目 + 去掉品牌 |
| Bolt.new Teams | $30/人/月 | 集中计费、私有 NPM 源 | 小团队协作 |
| V0 by Vercel | 免费（有限生成） | Pro $20/月 | 要产品级 Next.js，可交给开发者接手 |
| Cursor | 免费 Hobby（2000 补全/月） | Pro $20/月 | 在现有代码库里干活 |
| Windsurf | 免费（Tab 补全无限量） | Pro $20/月（第三方数据） | 同上，偏好 VS Code 兼容 |
三个关键差异，别只看价格
1. 计费单位完全不同，不能直接比。 Lovable 用 credits，Bolt 用 tokens。同样是 $25/月，Lovable 给你 100 credits，Bolt 给你从 10M tokens 起步。这两个数字没有任何换算关系，做预算时必须按自己的实际使用量测一遍，不能拿官网数字互相套。
2. Windsurf 的定价在 2026 年 3 月有过一次结构调整（据第三方定价跟踪数据，非官方文档）：Pro 从 $15 涨到 $20，旧的 credits 系统被换成日/周刷新的配额制，并新增了一个 $200 的 Max 档位。关于 2026 年 6 月改名 Devin Desktop 的说法，来自第三方来源，官方渠道需自行确认，本文不作为定论。
3. V0 的定位偏『给开发者交接』。它输出的是 Vercel 官方的 Next.js + TypeScript + Tailwind，Vercel 官方定位它是带 agentic 能力的 AI 构建器，能自己 research、reason、debug、plan。如果你的目标是产出一份能交给开发团队维护的代码，V0 比 Lovable 更合适；如果你的目标是从零到一个能上线的产品，Lovable 更快。
六、三个新手最容易踩的坑
坑 1：把『AI 生成的代码』当成『能上线的产品』
这是最致命的一个。Lovable 自己的《Build Economy Data Study 2026》内部数据显示：5000 万个已构建项目里，官方内部对 87 个 AI 与自动化项目的抽样中，大约只有 1/10 达到了生产可用状态（有真实用户、真实付款打通）。
原型能跑 ≠ 生产可用。上线前必须自己补齐的清单：
- 认证：真实用户流程，不是演示账号。
- 数据库权限：Supabase 的行级安全规则，否则任何登录用户都能改别人数据。
- 错误监控：AI 不会主动给你接 Sentry。
- 隐私政策与用户协议：涉及支付和登录，法律上必须有。
- 支付失败流程：Stripe 回调失败、订阅过期怎么处理。
坑 2：把免费额度当成『可以用很久了』
官方定价页的免费额度是这样的：Lovable 每天 5 credits，每月 30 个上限；Bolt 免费 30 万 tokens/天，100 万 tokens/月。
两个计费口径完全不同，无法互相换算。复杂项目每改一版都会烧额度，一个稍大的 SaaS 原型跑下来很容易就把免费额度用穿。做严肃项目之前先估算一遍自己的额度消耗，或者直接上 Lovable Pro（$25/月，100 月度 credits + 额度可回滚）。
坑 3：混淆『界面好看』和『逻辑正确』
Visual Edits 能让你的界面看起来非常漂亮，但它改不了业务逻辑。『订阅到期后订单状态应该回滚』这类规则只能靠 Agent Mode 或 Chat Mode 处理，而且必须你写清楚规则——AI 不会自己发明一套你满意的业务逻辑。
坑 4：跳过代码审查直接上线
AI 生成的代码不保证 100% 正确。官方指南的原话是：『AI 写的代码不一定完全对』。至少跑一遍完整流程：注册 → 登录 → 付款 → 仪表盘看到数据。任何一环断了，都要修。
七、真实成本：到底要花多少钱
这是很多人最关心的部分。我把官方定价页的数据全部列出来，来源可查。
Lovable 官方定价（来源：lovable.dev 官方定价页）
- 免费：每天 5 credits，每月 30 上限，包含网站托管和 .lovable.app 子域名。
- Pro：$25/月，100 月度 credits，私有项目，自定义域名，额度可回滚，可加购 credits。
- Business：$50/月，SSO + 最多 20 用户，团队功能。
- Enterprise：定制报价。
- 学生优惠：Pro 最高 50% off。
Bolt.new 官方定价（来源：bolt.new/pricing）
- Free：30 万 tokens/天，100 万 tokens/月，网站带 Bolt 品牌标记，10MB 上传限制。
- Pro：$25/月起，10M tokens/月起，无品牌，100MB 上传，自定义域名，额度可回滚，AI 图片编辑。
- 年付：最多省 28%。
- Teams：$30/人/月，集中计费，私有 NPM 源，Design System 知识。
- Enterprise：定制，含 SSO、审计日志、24/7 支持。
公司背景（来源：Lovable 官方指南）
Lovable 在 2025 年 12 月完成 $3.3 亿美元 B 轮融资，估值 $6.6B，ARR $2 亿，企业客户包括 Klarna、Uber、Zendesk。这些数据来自 Lovable 官方 2025 年 12 月 30 日发布的指南页面。
行业背景（来源：Gartner / InfoWorld 引用）
据 Gartner 预测，到 2026 年低代码开发工具将占新应用开发的 75%（2021 年为 40%），84% 的企业已经采用低代码或无代码工具降低 IT 积压。Lovable 的 Build Economy 数据显示，他们的平台已构建 5000 万个项目，每周新增 100 万个，4/5 的构建者是非技术岗位，80% 是独立开发者。
对比传统路径，AI 应用生成器的成本带是 $0 起步，$0–50/月——比开发公司外包（$60,000–$300,000）低 3–4 个数量级。这也是 2026 年这一赛道突然爆发的根本原因。
八、怎么选：四种典型场景
场景 A：快速验证想法，做投演讲求
选 Lovable 或 Bolt.new。 前者出的是可直接维护的 React/TypeScript，后者在浏览器里跑、零安装、投演讲求即点即用。差别主要是你要不要后续维护这份代码。
场景 B：要一份能交给开发团队维护的代码
选 V0。 输出的是 Vercel 官方的 Next.js + TypeScript + Tailwind，任何资深前端都认，交接成本最低。
场景 C：长期维护一个真实项目
选 Cursor 或 Windsurf 这类 AI 编辑器。 生成器不是为长期项目设计的，长期项目需要的是代码库级别的智能和精细控制。
场景 D：完全不懂代码，就想上线一个东西
选 Lovable，先用免费额度验证，再决定要不要付费。 官方数据显示他们平台上 4/5 的构建者是非技术岗位——这条路已经跑通了。
九、写在最后
把整篇压缩成一句：先用免费额度验证你的需求，再做严肃项目，永远别跳过代码审查直接上线，永远别把『界面好看』当成『逻辑正确』。
AI 工具在 2026 年已经不再是玩具，它真的能帮你把一个想法变成一个能收钱的网站。但它不会替你承担上线的责任——那份责任仍然在你手里。
如果你还没用过 AI 应用生成器，从 Lovable 免费额度开始，花一个小时把一个真实想法跑一遍完整流程，你会对『AI 到底能帮你做到什么』有一个非常清晰的判断。
数据与来源
- Lovable 官方定价与功能：https://lovable.dev/ 官方定价页；官方指南《Top AI Platforms for App Development in 2026》（https://lovable.dev/guides/top-ai-platforms-app-development-2026 ，2025-12-30 发布）
- Bolt.new 官方定价：https://bolt.new/pricing
- V0 by Vercel 定位与功能：Lovable 官方指南交叉引用
- Windsurf 2026 年 3 月定价调整：第三方定价跟踪（CloudZero、K-Antenna），非官方文档，仅作参考
- Gartner 低代码预测（2026 年 75%）：Lovable 官方指南引用 InfoWorld
- Build Economy Data Study 2026（5000 万项目、8/10 生产可用等）：Lovable 官方内部数据
免责声明：本文所有价格与配额数据均来自上述公开页面，但产品方可能调整定价，付费前请以官方定价页为准。文中提到的第三方定价跟踪数据仅作背景参考，不作为决策依据。