Lovable诀窍：瑞典出的 AI 全栈应用生成新星，Bolt.new 的直接对手。
Lovable 这个来自瑞典的 AI 全栈应用生成器，最近在国内开发者圈子里悄悄火了起来。跟 Bolt.new 相比，它在 Supabase 集成和 UI 美观度上确实有两把刷子。但很多人用着用着就发现——生成的代码总差那么点意思。其实不是工具不行，是你没用对方法。下面这5个技巧，是我反复折腾出来的硬核经验。
很多人上来就写“帮我做一个电商网站”，结果 Lovable 要么卡死，要么生成一堆乱七八糟的页面。正确做法是拆解成小任务。
比如你想做一个博客系统，别一次性丢需求。先写：“创建一个文章列表页面，包含标题、摘要和发布日期三列，用卡片布局。”等它生成完，再追加：“在这个页面底部添加分页组件，每页显示6篇文章。”最后再补：“给每张卡片添加一个‘阅读更多’按钮，点击跳转到 /post/[id] 页面。”
这样做的原因是 Lovable 的上下文窗口有限，一次性塞太多逻辑，它容易“忘记”前面的需求。分步推进，每一步它都能精准理解，生成的代码质量明显更高。
Lovable 对 Supabase 的集成深度是它最大的杀手锏，但很多人只停留在建表、增删改查的层面。其实你可以直接让它做跨表关联查询。
举个例子，你有一个 users 表和一个 orders 表，想展示每个用户的订单数量。别写“关联 users 和 orders 表”，而是直接说：“创建一个用户列表，每行显示用户名、邮箱，以及该用户在 orders 表中的订单总数，用 Supabase 的 count 聚合函数实现。”
Lovable 会自动生成带 .eq() 和 .select() 链式调用的代码，甚至帮你处理好 loading 状态。更骚的是，你可以在提示词里直接指定：“用 Supabase 的 PostgREST API 实现，返回 JSON 结构包含 user_id, user_name, order_count 三个字段。”它生成的代码几乎不用改就能直接用。
Lovable 生成的 UI 默认是好看的，但有时候太“模板化”。想要更个性化的界面，别用“好看一点”这种模糊词，而是给具体参考。
比如：“按钮用圆角 12px，主色调 #6366F1（紫蓝色），卡片阴影用 rgba(0,0,0,0.1) 的柔和阴影，字体用 Inter 或者系统默认无衬线体。”或者说：“参考 Vercel 的 Dashboard 风格，左侧导航栏 240px 宽，主内容区背景色 #F9FAFB。”
如果你有现成的设计稿，甚至可以截图丢给它（如果工具支持图片输入），或者直接描述：“这个页面的布局像 Notion 的侧边栏，但内容区用三栏网格，每个卡片包含图标、标题和描述。”
Lovable 生成的代码不可能完美，经常会出现样式错位、交互逻辑不对的情况。这时候别急着重来，找到代码注入点。
在 Lovable 的编辑界面里，每个组件旁边通常都有一个“Edit Code”或“View Source”的入口。点进去，你会看到它生成的 React 或 Vue 组件代码。直接在里面改：
className 或 style 对象，加 margin 或 padding。onClick 事件绑定的函数名是否正确。useEffect 里加一个 loading 状态控制。改完保存，Lovable 会保留你的修改，后续再生成新功能时，它也会尽量兼容你手改的部分。这个技巧能让你从“依赖生成”变成“人机协作”，效率翻倍。
很多人直接在 Lovable 的代码里写死 Supabase 的 URL 和 API Key，结果一部署就暴露了。正确做法是用环境变量。
在 Lovable 的项目设置里，找到“Environment Variables”选项，把 SUPABASE_URL 和 SUPABASE_ANON_KEY 填进去。然后在代码里用 import.meta.env.VITE_SUPABASE_URL（如果是 Vite 项目）或者 process.env.SUPABASE_URL（如果是 Next.js）来引用。
更实用的是，你可以让 Lovable 自动识别环境变量。在提示词里写：“从环境变量 VITE_SUPABASE_URL 和 VITE_SUPABASE_ANON_KEY 读取 Supabase 配置。”它生成的代码就会自动用 import.meta.env 来获取，不会硬编码。这样你部署到 Vercel 或 Netlify 时，只需要在平台设置里配好变量，代码完全不用改。