Lovable 全栈应用

直接给结论：如果你要做一个有用户登录、有数据库、能部署上线的 Web 应用——2025 年最省事的方案是 Lovable + Supabase。不是因为它最强，而是因为从 idea 到上线的摩擦力最小。

我们团队用 Lovable 做过一个内部客户管理工具，从描述需求到能用的版本，4 个小时。同样的功能用传统开发方式，至少一周。这不是夸张，是真实经历。

---

Lovable 是什么

一句话解释：Lovable（原名 GPT Engineer）是一个 AI 全栈应用生成平台，自带 Supabase 后端集成，能生成有真实数据库和用户认证的完整应用。

生活类比：如果 Bolt 是"帮你画建筑效果图"，Lovable 就是"帮你把房子盖出来，水电都通了"。

工作中怎么用：创业者验证 SaaS idea、团队做内部管理工具、freelancer 快速交付客户项目。

最常踩的坑：Supabase 的 Row Level Security (RLS) 策略。Lovable 会帮你创建数据库表，但 RLS 规则经常不对，导致要么所有人能看所有数据，要么谁都看不到数据。我们遇到过一次：客户演示时发现用户 A 能看到用户 B 的订单，当场尴尬。

---

Lovable vs Bolt：为什么不一样

很多人把 Lovable 和 Bolt 当同一类工具，但它们的定位完全不同。

直接说：如果你的应用不需要用户登录和数据库，用 Bolt 更快。一旦需要后端，Lovable 是更好的选择。

---

Lovable 的杀手锏：Supabase 集成

Supabase 是 Firebase 的开源替代品，底层是 PostgreSQL。Lovable 把 Supabase 集成做到了"几乎无感"的程度。

你跟 Lovable 说"我要用户登录"，它会帮你：

1. 创建 Supabase 项目（或连接已有项目）
2. 配置 Auth（邮箱注册、OAuth）
3. 创建用户相关的数据库表
4. 设置 Row Level Security 策略
5. 在前端生成登录/注册页面
6. 接通前后端的 auth flow

手动做这些，一个熟练开发者至少要半天。Lovable 几分钟搞定。

Supabase 能给你什么

---

从零到上线：完整流程

Step 1：创建项目

访问 lovable.dev，注册账号，点 "New Project"。

Step 2：描述你的应用

这是最关键的一步。跟 Bolt 一样，prompt 质量决定一切。但 Lovable 的 prompt 需要多描述一个维度：数据结构和权限。

完整 Prompt 示例——SaaS 客户管理工具：

Build a customer management SaaS application.

## Authentication
- Email/password signup and login
- Google OAuth login
- After signup, redirect to dashboard
- Protect all routes except landing page

## Database Schema

### customers table
- id (uuid, primary key)
- user_id (uuid, references auth.users - the owner)
- name (text, required)
- email (text)
- phone (text)
- company (text)
- status (enum: 'lead', 'active', 'inactive')
- notes (text)
- created_at (timestamp)
- updated_at (timestamp)

### interactions table
- id (uuid, primary key)
- customer_id (uuid, references customers)
- user_id (uuid, references auth.users)
- type (enum: 'call', 'email', 'meeting', 'note')
- content (text)
- created_at (timestamp)

## Row Level Security
- Users can only see their own customers
- Users can only see interactions for their own customers

## Pages

### Landing Page (public)
- Hero section with product description
- Features grid (3 columns)
- Pricing section
- CTA button → signup

### Dashboard (authenticated)
- Stats cards: total customers, active customers, new this month
- Recent interactions list
- Quick add customer button

### Customers List (authenticated)
- Searchable, filterable table
- Filter by status
- Click row → customer detail page
- Bulk actions: export CSV, change status

### Customer Detail (authenticated)
- Customer info card (editable)
- Interaction timeline
- Add interaction form
- Delete customer (with confirmation)

## UI
- Use shadcn/ui components
- Clean, professional design
- Color scheme: slate gray + blue accents
- Responsive: works on mobile and desktop
- Toast notifications for all actions

Step 3：连接 Supabase

Lovable 会提示你连接 Supabase。两种方式：

1. 让 Lovable 自动创建——最方便，点一下就好
2. 连接已有项目——输入 Supabase URL 和 anon key

我建议第一次用自动创建，等熟悉了再用已有项目。

Step 4：Review 生成结果

Lovable 生成后，你需要检查：

1. 数据库表结构——去 Supabase Dashboard 看表是否正确
2. RLS 策略——这个最容易出错，仔细检查权限
3. Auth 流程——注册一个测试账号，走完整个流程
4. CRUD 操作——增删改查都测一遍

Step 5：迭代修改

在聊天框里追加需求：

Add these changes:
1. Add a "tags" field to customers (array of strings, multi-select input)
2. Add an export to CSV button on the customers list page
3. Add a simple chart on the dashboard showing customers added per month (last 6 months)
4. Fix: the phone field should format as you type (Australian format: 04XX XXX XXX)

Step 6：部署

Lovable 自带 hosting，点 "Publish" 就上线了。也可以绑定自定义域名。

---

Lovable 的 UI 质量

说实话，这是 Lovable 的一个隐藏优势。它基于 shadcn/ui 生成界面，出来的效果比 Bolt 好看很多。

shadcn/ui 是 2024-2025 年最火的 React 组件库，设计感强、可定制、无依赖。Lovable 生成的代码直接用 shadcn/ui 组件，意味着：

• 视觉一致性好（不会东一个风格西一个风格）
• 组件质量高（accessible、keyboard navigable）
• 后期定制方便（所有组件代码都在你的项目里，不是 npm 包）

对比一下 Bolt 生成的 UI——经常是"能用但丑"，需要手动调很多样式。Lovable 生成的 UI 拿来给客户看，基本不用大改。

---

Lovable 的短板

1. 复杂业务逻辑处理不好

多表关联查询、复杂的计算逻辑、涉及多步骤的 workflow——Lovable 会生成能跑的代码，但逻辑经常有漏洞。

我们遇到过：生成了一个订单管理系统，Lovable 把"取消订单"做成了直接删除数据库记录，而不是标记状态为 cancelled。退款逻辑也没有。这种业务逻辑 AI 猜不到，你必须在 prompt 里写清楚。

2. RLS 策略需要手动 review

前面说过了，这是最大的坑。Lovable 生成的 RLS 策略可能：

• 太宽松：所有人都能看所有数据
• 太严格：连自己的数据都看不到
• 缺失：某些表忘了加 RLS

最省事的做法：每次 Lovable 创建或修改表结构后，去 Supabase Dashboard → Authentication → Policies 页面手动检查一遍。

3. 不能用非 Supabase 后端

如果你的后端是 NestJS、Django、Express——Lovable 帮不了你。它和 Supabase 深度绑定，这既是优势也是限制。

4. 代码导出后的维护

Lovable 生成的代码结构还算清晰，但也有问题：

• 组件粒度有时太大（一个组件 300+ 行）
• 状态管理偏简单（多用 useState，没用 Zustand 或 Redux）
• API 调用散落在组件里，没有统一的 service 层

如果你打算长期维护这个项目，导出代码后第一件事是做一轮重构。

---

定价（2025 年数据）

注意：Supabase 也有自己的定价。免费 plan 够用来开发和测试，但上生产后数据量大了可能需要付费（$25/月起）。

所以实际成本是：Lovable 月费 + Supabase 月费。对于 MVP 阶段，两个免费 plan 足够了。

---

Lovable 最适合做什么

直接给结论——Lovable 是这些场景的最优解：

不适合用 Lovable 的场景

---

完整 Prompt 模板

Build a [应用类型] SaaS application with Supabase backend.

## Authentication
- [登录方式: email/Google/GitHub]
- Protected routes for authenticated users
- Landing page is public

## Database Schema

### [表名1] table
- id (uuid, primary key)
- user_id (uuid, references auth.users)
- [字段] ([类型], [约束])
- created_at (timestamp)

### [表名2] table
- id (uuid, primary key)
- [外键字段] (uuid, references [表名1])
- [字段] ([类型], [约束])
- created_at (timestamp)

## Row Level Security
- [权限规则1: 谁能看什么]
- [权限规则2: 谁能改什么]

## Pages

### [页面名] ([public/authenticated])
- [功能描述]
- [UI 描述]

## UI Style
- shadcn/ui components
- [配色方案]
- Responsive design
- Toast notifications for feedback

---

踩坑日记

分享一个我们遇到的真实案例。

用 Lovable 做了一个活动报名系统，功能很简单：用户注册 → 选活动 → 报名 → 付款。Lovable 生成得很快，UI 很漂亮。

问题出在"并发报名"上。两个用户同时报名最后一个名额，Lovable 生成的代码没有做乐观锁或者事务处理，结果两个人都报名成功了，名额超了。

这种并发问题，目前没有任何 AI Builder 工具能自动处理好。你必须在 prompt 里明确写出来，或者生成后手动去 Supabase 加 database function 处理。

教训：AI Builder 适合做 80% 的标准功能，剩下 20% 的边界情况你必须自己想到并处理。

---

从 Lovable 毕业

当你的项目到了这些阶段，说明该从 Lovable 迁出了：

1. 需要自定义 API endpoint——Supabase Edge Functions 有限制
2. 需要复杂的 background job——定时任务、队列处理
3. 团队超过 3 人同时开发——Lovable 的协作功能有限
4. 需要微服务架构——已经超出 Lovable 的能力范围

迁出路径：Lovable 导出代码 → GitHub → Cursor/VS Code → 自己维护 Supabase 或迁移到其他后端。

这个迁出过程比 Bolt 顺畅，因为 Lovable 的代码结构相对规范，Supabase 本身也是你可以独立管理的服务。