今天继续分享用ai开发应用的实战记录。
Lovable 是一个偏向Web 应用开发的 AI 工具，主打用自然语言直接生成前端页面、后端逻辑以及数据库结构，整体更接近“直接帮你把项目跑起来”。
跟我上次分享的Bolt.new相比，Bolt.new 更偏向代码生成和局部修改，而 Lovable 更强调应用级别的整体生成，尤其在表单、列表、登录、数据库 CRUD 这类场景下，上手成本更低，适合快速做 Demo 或 MVP。
一、为什么选记账应用作为 Demo
记账应用算是一个非常典型的 CRUD 场景：
表单录入数据
列表展示
按条件筛选
简单统计
功能不复杂，但又基本覆盖了：
前端页面
后端接口
数据库设计
登录鉴权
很适合作为验证 Lovable 实际能力的示例。
二、整体功能规划
在开始之前，先简单想了一下这个记账应用要做什么，不追求功能齐全，只做一个最小可用版本（MVP）。
1. 核心功能
用户登录 / 注册
新增账单
查看账单列表
区分收入 / 支出
简单统计（当月收入 / 支出）
2. 账单字段设计
每条账单包含以下信息：
金额
类型（收入 / 支出）
分类（餐饮、交通、娱乐等）
备注
日期
三、使用 Lovable 创建项目
进入 Lovable 后，新建项目，直接用自然语言描述需求即可。
我输入的第一条提示大概是：
创建一个记账应用，支持用户登录，用户可以新增收入和支出账单，并查看账单列表和简单统计。
提交后，Lovable 会自动生成一个基础项目，包括：
页面结构
路由
基本 UI
后端数据模型
这一点体验还是挺流畅的，几乎不用手动配置环境。
四、数据库与数据模型
Lovable 默认使用Supabase作为后端服务，这点对 Web 项目来说还挺友好。
我补充了一条指令，让它明确账单表结构：
创建账单表，字段包括：amount、type、category、remark、date、userId。
Lovable 会自动：
创建对应的数据表
生成增删改查接口
在前端表单中绑定这些字段
不需要自己写 SQL，这一步节省了不少时间。
五、页面与交互调整
初始生成的页面比较基础，但已经能用了，主要做了几处微调：
1. 新增账单页面
金额输入框
收入 / 支出下拉选择
分类选择
日期选择
备注输入
直接在对话中描述即可，例如：
新增账单页面使用表单布局，提交后跳转到账单列表页。
2. 账单列表页
列表页主要展示：
日期
类型
分类
金额
并支持：
按时间排序
简单筛选收入 / 支出
这一类偏 CRUD 的页面，Lovable 生成得比较稳定。
3. 统计页面
为了简单，只做了一个当月统计：
当月总收入
当月总支出
用卡片形式展示，作为首页内容。
六、登录与权限
记账应用天然需要区分用户，Lovable 对 Supabase Auth 的支持比较完善。
只需要一句：
添加用户注册和登录功能，并且账单数据只对当前用户可见。
它就会自动处理：
登录页面
用户会话
数据权限隔离
这部分如果自己手写，工作量还是不小的。
七、使用体验总结
优点
上手快：不需要初始化项目、配置数据库
CRUD 场景友好：表单 + 列表类应用效率很高
适合做原型或小工具
不足
复杂业务逻辑不太好描述
生成代码可读性一般，适合“能跑就行”的场景
更偏向前端 + BaaS，对重后端项目不太合适
八、总结
整体体验下来，Lovable 非常适合：
快速做 Demo
验证产品想法
内部工具、个人项目
像记账这种以 CRUD 为主的应用，用它可以在很短时间内搭出一个完整可用的版本。
如果你本身是后端或全栈开发者，把它当成一个高效的脚手架工具会比较合适；如果是非技术背景，用它做小应用也完全可行。
丙酸十八碳醇酯)
