使用教程

Lovable 零代码建站教程:一个下午,把想法变成能打开的网址

酷越AI2026-09-09约7分钟

想卖手冲咖啡器具的设计师小羽,在朋友圈挂了半年有意私聊,咨询的人不少,成交为零——没有个像样的落地页,客人总觉得是三无卖家。她不会写代码,用 Lovable 花一个下午做出了上线页面,当月出了七单。这篇教程把她的路径拆给你。

准备清单

分步操作

第 1 步:用一段话描述整个页面。新建项目后直接在对话框里描述需求,越具体越好。预期结果:一两分钟后看到整页初稿,含配色和排版。

第 2 步:对着初稿提修改。不要说好看一点这种虚话,要具体到区块。预期结果:每条修改意见都能在预览里看到对应变化。

第 3 步:换上真实素材。让 AI 留好图片占位,然后把你的产品图传上去替换。预期结果:页面从模板感变成你的店。

第 4 步:接上咨询入口。小羽的需求是让客人留言,让 Lovable 接入表单服务。预期结果:页面上出现可提交的表单,提交后有成功提示。常见失败:表单提交没反应——检查表单服务的公钥是否填对,让 AI 自查一遍。

第 5 步:发布。点右上角 Publish,先发平台子域名。预期结果:得到一个 https 开头、手机能打开的正式网址。上线前用手机从头到尾过一遍,比在电脑上看更重要——你的客人大多从朋友圈点进来。

第 6 步:绑定域名(可选)。有自己域名的,在设置里按提示加两条 DNS 解析记录,生效要几分钟到几小时。预期结果:浏览器输入你的域名,打开的就是这个页面。

可直接复制的提示词

帮我做一个单屏滚动的产品落地页,卖手冲咖啡器具套装,目标客人是25-40岁的咖啡新手。结构:首屏大图加一句主文案(突出新手30分钟上手),第二屏三张产品图各配一句卖点,第三屏放两条真实买家评价,底部留言表单(姓名+微信)和客服按钮。配色用奶油色和咖啡棕,整体风格干净温暖,手机端优先。图片先用占位图,我稍后替换。

这段提示词的关键是把给谁看、卖什么、分几屏、什么感觉一次说清,AI 就不容易跑偏。

效果与验收

验收标准:手机打开加载顺滑、表单能收到提交、文案没有错别字。小羽上线当晚就收到第一条留言,第二周成交了三单——一个能打开的网址,比一百条朋友圈自证都管用。

进阶方向

页面跑通后可以往两处延伸:一是让 Lovable 加一个简单的访问统计,搞清楚流量从哪来;二是把不同活动的落地页复制成变体,改文案做 A/B 对比——当改一版页面只要十分钟,试错的勇气都会变大。

相关工具文中提到的工具,点开看详情与使用教程

相关工具:LovableBoltVercel v0
标签:
AK

酷越AI

专注AI工具评测与使用指南,帮你发现最好用的AI产品。

RELATED READS
相关阅读
v0 零代码做活动落地页教程:一张截图加一段需求,半小时上线 设计稿到代码"一键穿越":Figma 类工具接大模型,前端招聘的门槛悄悄变了 用 Cursor 的 Agent 模式改老项目:让它读代码、提方案、动手改 Suno 写歌教程:10 分钟给短视频配上原创 BGM,还不踩版权坑 飞书妙记 AI 纪要教程:一小时跨部门会,散会十分钟出待办清单
返回首页·全部文章