Lovable 使用教程:一步步做出你的第一个应用
从一次真实的新手构建复原的 Lovable 完整图文教程——结构化提示词、Plan 模式、Google Calendar、修 bug、安全扫描,再到把应用发布成 PWA。每一步都有截图。
Lovable 快速速览
- 第一条提示词围绕两件事展开:应用做什么(目标),用户怎么用下去(流程)。开局一到两个功能就够,别贪多。
- 发送前把输入框从 Build 切到 Plan。Lovable 会先提澄清问题,再写一份你可以纠正的计划,然后才动手写代码。
- 行为不对就用精确的提示词修——「任务从最近的 15 分钟刻度开始,不要排在过去」远胜「把时间修对」。
- 发布前跑一次深度安全扫描,「Try to fix all」修复不扣积分。再用一句自然语言把应用变成 PWA,直接装进手机。
Lovable AI Tutorial for Beginners - Build Your First App
来源视频:Kevin Stratvert11:40
截图取自来源视频,均附时间戳深链署名。文字讲解为我们基于完整字幕独立撰写,事实与视频一致。
本教程是面向文字读者的独立图解版。想支持创作者,请观看上方链接的 Lovable 官方合作视频。
在 Lovable 里做一个应用:分步图解
- 1
认识工作台
注册后进入 Lovable 工作台:左侧是 Home、搜索、资源、连接器和最近的聊天记录;中间的提示词输入框是一切应用的起点;下方还有模板合集,没灵感时可以逛逛。
Lovable 工作台:中间是输入框,左边是聊天与连接器。视频 0:40 处 - 2
写一条有结构的首条提示词
动手之前先想清楚:目标(应用做什么)和流程(用户怎么走完)。这次的构建是「语音记事到日历」:你对着它碎碎念,它把任务排进 Google Calendar。写清约束——每个任务默认 30 分钟、保存前要让用户确认——再用 clean、sleek、minimal 这类词描述风格。最后加一句:「有任何需要完全理解我需求的问题,尽管问我。」
完整首条提示词:目标、流程、约束、风格,外加邀请提问。视频 3:20 处 - 3
发送前切到 Plan 模式
点开输入框下方的 Build 下拉菜单,选 Plan——「先讨论再动手」(快捷键 Alt+P 可切换)。Plan 模式下 Lovable 会先提问、先出计划,从源头避免做错方向。对第一个项目来说,这是性价比最高的一个习惯。
Build/Plan 下拉:选 Plan,先讨论再构建。视频 2:40 处 - 4
回答澄清问题
Lovable 会带着问题回来——视觉类的如强调色怎么选,功能类的如语音转写用免费内置还是第三方、要不要通过 Lovable 连接器接 Google Calendar。如实回答,含糊的回答日后就会变成含糊的功能。
澄清问题:先选强调色,再答功能选择题。视频 4:12 处 - 5
读完计划再批准
计划分为两部分:非技术段落(外观、界面与流程、工作原理)和技术细节。不懂代码也要看「界面与流程」——那就是你的应用草图。哪里不对,直接在输入框里说要改什么,别急着批准;对上了再点 Approve。
生成的计划:先审,要改就说,然后批准。视频 5:00 处 - 6
中途连接 Google Calendar
构建进行到一半,Lovable 会暂停并要求连接你的 Google Calendar:点连接按钮,用 Google 账号登录,把日历关联到项目。本例中日历硬编码为你自己的;之后可以改成每个用户各自登录连接,方便分享给别人用。
构建中途,Lovable 要求关联你的 Google 日历。视频 5:35 处 - 7
开口说话,实测任务录入
应用预览出来后,点麦克风真的碎碎念一段:「我要把带新封面的 TPS 报告发给 Bill,还有客户名单的摘要发给 Charles。」停止录音,应用会把你的话拆成待确认的任务卡片。
首次语音实测:应用把你的碎碎念转成任务。视频 5:50 处 - 8
用精确提示词修行为
第一个 bug:任务被排在了你说话的精确时刻。修复指令要精确:「任务应从最近的 15 分钟刻度开始(且不能排在过去),而不是当前时间。」Lovable 会把这次修改记成一张小卡片——前面计划做得对,这时才改得动。
精确的修复提示词,让任务吸附到 15 分钟刻度。视频 8:00 处 - 9
教它听懂你的时间说法
说「明天上午 10 点打电话给 Kevin」,它排到了凌晨 3 点——应用还不会解析相对日期。把规则喂给它:认识 tomorrow、yesterday、Friday at 3 p.m.;morning 指上午 11 点前,afternoon 是下午 1 到 4 点;next Monday 指下下周那个周一。例子给得越具体,后面返工越少。
语音日期规则:when 示例和时长示例,一一列明。视频 7:40 处 - 10
截图贴回去,在 Plan 模式里排错
时间还是差了约 7 小时——典型的时区 bug。把错误时间的截图直接贴进输入框,说出你的观察:「时间差了大约 7 小时,看起来像时区问题。」切回 Plan 模式让它修;计划太技术看不懂,就补一句:「我不懂技术,能用我听得懂的话解释吗?」
贴截图、说现象,让 Plan 模式给出修复方案。视频 8:55 处 - 11
发布,认领你的网址
发布前最后一条提示词:把应用从「你的日历」切换成「每个用户连自己的日历」,免得别人碰你的日程。然后点右上角 Publish:免费得到一个 lovable.app 网址(自定义域名是 Pro 功能),可见性选公开,再填标题、描述和分享图。
发布流程:免费 lovable.app 网址和应用元信息。视频 9:45 处 - 12
跑安全扫描,顺手加上 PWA
上线前 Lovable 建议跑一次深度安全扫描——对 AI 生成的代码尤其有价值,用「Try to fix all」修复不扣积分。然后一句提示词补上手机安装:「让我能把它作为应用图标装到手机上,图标用青色麦克风。」Lovable 会生成 PWA manifest 和触摸图标。
安全扫描修复免费——PWA 提示词让它可以安装。视频 10:40 处 - 13
装进你的手机
发布更新后,在手机浏览器打开网址,点分享图标,选「添加到主屏幕」并确认——应用图标就落在了桌面上。点开即全屏运行,和原生应用几乎一样,全程不碰应用商店。
「添加到主屏幕」把已发布的应用变成手机图标。视频 11:00 处