上周我想给团队弄个内部的项目管理看板。需求其实挺简单的,无非就是拖拽卡片、状态流转、分配成员这些。我心想,用 Lovable.dev 估计半小时就能搞定吧?
结果我硬是折腾了三个小时。
倒不是说这工具不好用,而是我完全用错了方法。我一开始就甩给它一大段需求描述,然后眼睁睁看着 AI 生成的代码跟我想要的差了十万八千里,接着又试图用更模棱两可的话去纠正它,最后彻底陷入了无限修改的死循环。
那次经历让我明白了一件事:Lovable 远不止是“跟聊天机器人说话然后它帮你写代码”这么简单。它里面藏着不少不起眼的功能和技巧,一旦掌握,开发体验完全不一样。今天我就把踩过的坑和发现的隐藏用法分享出来。
别再写小作文了,结构化提示才是正解
我一开始犯的最大错误,就是像写产品需求文档一样写提示词。洋洋洒洒写了几百字,AI 根本抓不住重点。
后来我在社区里学到了一套结构化提示模式,效果立竿见影。现在我的提示词长这样:
我需要一个[看板管理]应用,包含:
技术细节:
- 前端:React + Tailwind CSS
- 样式:深色主题,圆角卡片设计
- 认证:Supabase Auth(邮箱登录)
- 数据库:Supabase PostgreSQL
功能列表:
核心功能:
- 看板视图(待办、进行中、已完成三列)
- 拖拽卡片移动状态
- 成员分配
次要功能:
- 截止日期提醒
- 活动日志
起始指示:
从包含[看板主视图和登录注册页面]的主页开始
关键点在于“提供具体的步骤说明,而非笼统的指示”。与其说“做个好看的看板”,不如说“添加一个看板主视图,包含三列:待办、进行中、已完成,每列显示对应状态的卡片”。你说得越具体,AI 返工的概率就越低。
Select Tool:被严重低估的精确手术刀
这是我在 Lovable 上用过的最实用、却也最容易被忽略的功能。
想象一下:你只想把标题的颜色从蓝色改成红色,但如果直接在聊天框里说“把标题改成红色”,AI 可能会自作主张地把整个 Header 组件的样式都重写一遍,甚至把你已经调好的导航栏布局都给影响了。
Select Tool 解决的就是这个问题。它的用法很简单:
- 点击界面上的 Select 工具(或者直接点击预览区的元素)
- 精确标记你需要修改的那个标题
- 然后在聊天框输入“颜色改成红色”
这样 AI 就只会在你选中的元素上做修改,完全不会动其他部分。这个功能在项目后期的微调阶段简直是救命稻草,把修改的准确性和效率提升了一个量级。
认证功能必须第一天就做
这又是我用血泪换来的教训。
之前有个项目,我想先把核心业务逻辑跑通,认证功能打算最后再加。结果等我把所有功能都做好了,再加上 Supabase Auth 的时候,整个数据结构都要大改——因为之前的数据都没有 user_id 关联,行级安全策略(RLS)也没法配。
社区里反复强调的建议就是:先设置认证功能。
这样做的好处太多了:
- 它是大多数应用的基础架构,早晚都得做
- 后续开发功能时,可以直接基于用户身份来写逻辑
- Supabase 的安全规则会自动配置好,不用后期再去补窟窿
现在我的标准流程是,第一个提示词就包含“需要邮箱登录注册功能,使用 Supabase Auth”。这省下的后期修改时间至少是几小时起步。
渐进式迭代:别想一口吃成胖子
Lovable 的代币(Token)是有限额的。如果你像我一开始那样,试图在一个提示词里把所有功能都实现,大概率会得到一个四不像的半成品,然后反复修改把额度耗光。
“专注于小型迭代改进,而非一次性实现整个功能”——这句话现在是我在 Lovable 上的开发信条。
实际操作起来是这样的:
- 第一步:先把基础框架和认证跑通
- 第二步:添加一个核心功能,比如创建任务
- 第三步:测试,确认没问题
- 第四步:再添加下一个功能,比如拖拽
每一步都确保能正常运行再往下走。这样不仅减少了出错的概率,出了问题也更容易追踪源头。更重要的是,你对代币的使用会有效率得多。
那些你可能不知道的项目启动方式
大多数人用 Lovable 就是从空白画布打字开始,但其实它支持至少六种创建方式:
| 创建方式 | 说明 | 我的评价 |
|---|---|---|
| 文字提示 | 自然语言描述 | 最常用,适合从零开始 |
| 模板 | 预设模板快速建立 | 适合常见类型项目 |
| Remix | 基于现有公开项目修改 | 学习和二次开发的神器 |
| 设计转换 | Figma 截图直接转代码 | 设计师的福音 |
| 草图转换 | Excalidraw 草图转应用 | 快速原型验证 |
| 网站复制 | 网页截图创建相似结构 | 参考竞品时超好用 |
我最近特别迷草图转换功能。用 Excalidraw 随便画个线框图,截图扔给 Lovable,它就能生成一个结构完整的页面框架。虽然样式还需要调,但比起从零描述布局,这种方式直观太多了。
网站复制也很有意思。之前看到某个 SaaS 的 Landing Page 设计不错,截图丢进去,出来的结构还原度有七八成,在此基础上改比自己从零写省事很多。
保持代码整洁:给 AI 也需要好环境
这点可能有点反直觉——既然是 AI 帮我写代码,为什么我还要关心代码整不整洁?
因为 Lovable 是基于你现有的代码上下文来生成新代码的。如果文件越来越臃肿,AI 能参考的上下文就越来越乱,生成的代码质量也会跟着下降。
我的做法是:
- 经常让 AI 重构代码,把大组件拆分成小组件
- 每完成一个功能模块,就做一次整理
- 命名要规范,方便后续引用
比如我会说:“请把 Dashboard 组件拆分成 StatusCard、ActivityList 和 MemberPanel 三个子组件。”这样后续修改某个部分时,AI 的上下文更清晰,Select Tool 也能更精准地定位。
实用技巧速查
最后整理几个日常开发中最实用的技巧:
- 善用 Supabase 即时同步:在提示词中明确要求“使用 Supabase Realtime 实现数据即时更新”,多用户协作场景下体验提升巨大
- 加入社区:Lovable Discord 里有大量真实案例和解决方案,很多卡住的问题都能在那里找到答案
- 利用版本历史:每次迭代前,Lovable 都会保存版本。改坏了别硬撑,直接回退到上一个能用的版本
- 先跑通再美化:功能逻辑正确比样式好看重要一百倍,先把功能跑通,最后再用 Select Tool 微调样式
诚实的局限性评估
用了这么久,Lovable 当然不是万能的。复杂的状态管理、高度自定义的动画、性能优化这些,它目前还是力不从心。生成的代码偶尔也会有“看起来对但逻辑有 bug”的情况,必须自己检查测试。
但对于快速验证想法、搭建内部工具、做 MVP 来说,它的效率提升是实打实的。我那个最初花了三小时的看板项目,用上这些技巧重新做,四十分钟就搞定了。
工具始终是工具,关键在于你怎么用。希望这些隐藏用法能帮你少走些弯路。