Lovable 入门教程：30 分钟搭一个能用的 App
Lovable 是一款让你「描述需求 → 生成应用 → 一键部署」的 AI 应用生成器。这篇教程会带你 30 分钟搭一个完整的任务管理 App，包含用户登录、任务分类、优先级。免费起步，不需要信用卡，全程在浏览器里完成。文末有国内访问和支付的注意事项。
准备工作
只需要两样：
- 一个现代浏览器（Chrome、Edge、Safari 都行）
- 一个邮箱（注册 Lovable 账号用）
不需要会写代码，不需要装软件，不需要信用卡。Lovable 完全在浏览器里跑。
第一步：注册账号
访问 lovable.dev，用邮箱、GitHub 或 Google 账号登录。
进入后会看到一个文本输入框，这就是你描述需求的地方。免费计划给 每天 5 个 credits，够完成本教程的一两次会话。Credits 每 24 小时刷新。
国内访问 lovable.dev 通常没问题，偶尔会卡几秒。如果完全打不开，挂一下梯子。
第二步：描述你的应用
把下面这段 prompt 复制到输入框：
做一个任务管理应用，需要用户认证、按优先级（高/中/低）组织任务的 dashboard、增删改查任务的功能、简洁的侧边导航。整体设计现代，白底带轻微阴影。顶部 header 显示应用名「TaskFlow」，右上角放用户头像。
回车，等 30-60 秒。右侧实时显示预览，左侧显示代码。
Lovable 在干什么：
- 生成 React/TypeScript 应用，多个组件
- 用 Tailwind CSS 出现代风格样式
- 客户端路由切换视图
- 任务的基础状态管理
- 响应式布局，移动端和桌面端都能用
第三步：检查生成结果
点击预览，应该能看到左侧导航（Dashboard/Tasks/Settings）、按优先级分类的任务计数、可增删改查的任务列表、带应用名的 header。第一次生成基本不可能完美，下一步通过对话调整。
第四步：对话式调整
Lovable 通过对话迭代，每个 prompt 大约 0.5-1.2 credits。
| 调整需求 | Prompt 示例 | credits |
|---|---|---|
| 侧边栏可折叠 | 顶部加切换按钮，桌面默认展开，移动默认折叠 | 0.8 |
| 加深色模式 | header 右上角加深色切换，切换后整个应用换深色 | 1.0 |
| 加截止日期 | 每个任务加日期选择器，过期的标红 | 1.2 |
关键经验：每个 prompt 只改一件事。 模糊的「让它更好」会浪费 credits。3-4 轮调整后应用就像样了。
第五步：接后端
现在应用数据存在内存里，刷新页面就丢。要持久化，需要后端。两个选项：
方案 A：Lovable Cloud（新手推荐） Prompt：「把这个应用接到 Lovable Cloud，做用户认证和数据持久化」。Lovable 自动建表、加认证、接前后端。
方案 B：Supabase（更自由） 需要免费 Supabase 账号和项目密钥。
Prompt：把这个应用接到 Supabase 做认证和数据持久化。
建 tasks 表，字段 title、description、priority、due_date、status、user_id。
本教程选 Lovable Cloud 更简单，以后可以再迁。
第六步：部署
点编辑器右上角的 Deploy。30 秒部署到 taskflow-abc123.lovable.app 这样的子域名。免费版含 5 个子域名 + 自动 HTTPS + 公开项目。
国内访问 lovable.app 子域名通常正常但延迟较高，做面向中国用户的产品建议绑自定义域名 + Cloudflare 加速（付费计划）。
国内开发者注意事项
| 问题 | 解决方案 |
|---|---|
| 海外信用卡 | 招行/中信 Visa/Master 卡 + PayPal |
| 网络 | 偶尔卡顿，重度使用挂梯子 |
| 数据合规 | Lovable Cloud 数据在海外，敏感业务慎用 |
| GitHub 导出 | 付费版才有 |
知乎和 V2EX 讨论里，主要痛点是 5 credits/天对真实项目不够，一两天就要升 Starter $20/月（约 ¥144/月）。
写好 Prompt 的技巧
- 具体描述 UI 细节：「加个导航栏」改为「顶部水平导航，左 logo，中间 Home/Features/Pricing 链接，右 Sign Up 按钮」。
- 参考熟悉的产品：「像 Trello 但更简单的看板」比纯描述清晰得多。
- 相关改动打包：「主色改成靛蓝色，按钮圆角带阴影，卡片内边距 24px」一条 prompt 搞定。
- 明确移动端要求：「侧边栏 768px 以下折叠成汉堡菜单」。
升级 Starter 合适吗
5 credits/天明显不够、想要私有项目、需要 GitHub 导出代码：升 Starter 计划 $20/月（约 ¥144/月），100 credits/月够做一个 MVP。
开始动手
Lovable 核心流程：描述、调整、接后端、部署。挑一个项目开始 prompt。想看更多对比，推荐 Cline 评测 2026 和 Coding Plan 对比评测。