1.4 实战 · 30 分钟做出你的第一个网页

📌 基于 Lovable v2.x · 2026-09 更新。在线工具界面改版频繁，如果你看到的和截图对不上，先看本页顶部日期，再去[更新日志]确认。本节的方法适用于任何同类在线工具（v0、Bolt 等），换一个不影响流程。

一、本节你会做出什么

一个真正上线的个人主页，链接长这样：https://你的名字.lovable.app，发到微信里点开就能看，手机上也好看。

📷 效果位：最终成品截图（桌面端 + 手机端并排）

这一节不装任何软件，不写一行代码，全程在浏览器里完成。你会完整走通 生成 → 修改 → 上线 这个闭环——这正是后面所有项目的骨架，只不过后面换成更专业的工具来做。

二、开始前你需要

已完成 1.2，手里有那段写好的需求描述（没写？用本节给你的模板）
已完成 1.3，会打开浏览器控制台
一个能收验证码的邮箱、一台能上网的电脑

三、跟着做

第 1 步：注册工具（3 分钟）

打开 lovable.dev，用邮箱或 GitHub 账号注册登录。免费额度足够本节使用。

登录后你会看到一个输入框，写着类似“描述你想做的应用”。这个输入框就是你今天的全部工作界面。

📷 截图位 1：登录后的首页输入框

打不开或注册不了？ 换 v0.dev 或 bolt.new，流程基本一致。三个工具的差异见[附录 C 工具横向对比]。

第 2 步：写下第一段提示词（5 分钟）

把 1.2 写的需求粘进去。没写的话，直接用这份模板，把方括号里的内容换成你自己的：

帮我做一个单页个人主页，用于自我介绍。

内容如下：
- 名字：【张三】
- 一句话介绍：【一个正在学 AI 编程的产品经理】
- 我擅长的三件事：
  1. 【擅长 1】—— 【一句说明】
  2. 【擅长 2】—— 【一句说明】
  3. 【擅长 3】—— 【一句说明】
- 联系方式：【你的邮箱】

页面从上到下的结构：
1. 首屏：名字 + 一句话介绍 + 一个圆形头像占位
2. 关于我：一段 100 字左右的自我介绍
3. 我擅长什么：三个卡片横向排列
4. 联系我：邮箱，点击可以直接发邮件
5. 页脚：版权信息

风格要求：简洁、留白多、米白底色深灰文字，不要花哨的渐变和动画。
必须在手机上也好看。

按回车（或点发送），然后等 1~3 分钟。工具会边写边在右侧实时显示页面。

📷 截图位 2：生成过程中的界面

第 3 步：第一次验收（3 分钟）

页面出来了。别急着高兴，按 1.2 学的四个层次过一遍：

检查	怎么看
跑得起来吗	右侧预览有内容，不是白屏或红字
对不对	数一下：五块内容都在吗？名字是你的吗？擅长写了三个吗？
好不好用	点一下预览区的手机图标切到手机视图，字有没有挤成一团
安不安全	本节没有密钥，暂时跳过（第 10 章专讲）

一定会有几处不对。 这是正常的、预期之内的——这一步的目的就是让你体会到“AI 第一版从来不是终稿”。把不对的地方记下来，下一步就改它。

第 4 步：改三处（10 分钟）

这一步是本节的真正核心。很多人以为 AI 编程是“一句话生成”，其实真正的功夫全在这里：一次只改一件事，改完就看效果。

改动 A · 改文字内容

把「关于我」那段改成下面这段，其他地方不要动：
【粘贴你自己写的一段介绍】

改动 B · 改视觉

挑一个你最不满意的地方，具体地说：

首屏的名字太小了，放大到现在的两倍左右，并且加粗。
其他地方不要动。

对比一下这两种说法，感受差距：

❌ 这样说	✅ 这样说
首屏不好看，改一下	首屏的名字太小了，放大到两倍并加粗
颜色太丑了	把卡片的背景色从灰色换成米白色（#FAF8F5）
手机上有问题	手机上三个卡片还是横着排的，改成竖着一个一个排

改动 C · 加一块内容

在「我擅长什么」和「联系我」之间，加一块「最近在做什么」，
里面放三条时间线，每条包含时间和一句话描述。内容先用占位文字，我之后自己替换。
其他部分保持不变。

💡 每次改动都带上“其他地方不要动”。这是本课最实用的一句咒语——它能显著降低 AI 顺手改坏别处的概率。

每改一次都回预览看一眼。如果某次改动把页面改坏了：绝大多数工具左上角有版本历史或撤销，回退到上一版重来，换个说法。这就是第 6 章要讲的“回滚”，你今天先提前用一次。

📷 截图位 3：修改前后对比

第 5 步：上线（5 分钟）

找到界面右上角的 Publish / Deploy（发布） 按钮，点它。

等十几秒，你会拿到一个链接，类似：

https://你起的名字.lovable.app

这是一个真正的公网地址——不是 1.3 里说的 localhost，全世界谁都能打开。

📷 截图位 4：Publish 按钮与拿到链接的弹窗

第 6 步：验收上线结果（4 分钟）

三件事，一件都别省：

复制链接，发到自己的微信文件传输助手，用手机点开。 手机上排版乱不乱？字够不够大？
在手机上截图，这是你的第一个作品凭证。
打开浏览器控制台（1.3 教过），看有没有红色报错。有的话，把红字复制回工具里让 AI 修——顺便体验一次完整的报错处理流程。

手机上有问题的话，回工具里这样说：

我在手机上打开，发现【具体描述，比如"三个卡片挤在一起，文字都叠住了"】。
请只修这个问题，其他地方不要动。

改完记得重新点一次 Publish——不发布的话，线上还是旧版本。这是新手最常见的困惑之一：“我明明改了，为什么链接打开还是老样子？”

四、完成的标志是

我拿到了一个 https:// 开头的公网链接
用手机点开，页面正常显示，没有明显错位
页面上的名字、介绍、三项擅长，全是我自己的真实内容
我至少成功修改了三处，并且知道“其他地方不要动”这句话的作用
我打开过控制台确认没有红色报错（或已修掉）
我把这个链接发给了至少一个朋友

最后一条不是玩笑。发出去，你才会真的相信这件事成了。

五、卡住了看这里

Q：生成到一半卡住不动了，或者提示额度用完。 免费额度每天有上限。等待恢复，或换 v0.dev / bolt.new 继续——你的提示词是通用的，粘过去就能用。

Q：AI 把我的内容改没了，换成了它编的假内容。 典型的“没说 = 自由发挥”。重新说一次并锁死内容：“页面上的名字必须是【张三】，一句话介绍必须是【……】，不要替换成示例内容。”

Q：我说了要改首屏，它把整个页面都重做了一遍。 两个原因：一是没说“其他地方不要动”；二是聊得太久，它忘了前面的上下文。对策是回退到满意的那一版，然后用一句话把改动说得极其具体，只说一件事。

Q：手机上打开是空白 / 排版全乱。 先在电脑上打开控制台看红字，有红字就粘给 AI。没红字纯粹是排版问题的话，用上面第 6 步那段话描述现象让它修。记住：描述现象，不要描述你猜的原因。

Q：链接发给朋友，他说打不开。 90% 的情况是你改了之后没重新 Publish，或者你发的是工具编辑器里的预览地址（通常很长，带一串随机字符）而不是发布后的地址。回去确认一次。

Q：这样做出来的东西，算我自己的作品吗？ 算。就像你用相机拍照、用 Excel 做表一样——决定做什么、判断好不好、改到满意，这部分是你做的。 不过这类在线工具适合做小页面，从第 5 章起我们会换成更专业的做法，代码完全在你自己手里。

六、本节提示词

① 首次生成（第 2 步的完整模板，见上文）

② 精准修改（本课你会用上几千次的万能句式）：

请只修改【具体位置，比如"首屏的标题"】，把它改成【具体要求】。
页面其他部分保持完全不变。

③ 上线前自检：

我这个页面准备发布了，请你帮我检查三件事：
1. 有没有还没替换的示例文字或占位内容（比如 Lorem ipsum、"你的名字"这类）；
2. 在手机屏幕宽度下，有没有元素会重叠或超出屏幕；
3. 联系方式的链接点击后行为是否正确。

逐条告诉我结果，有问题的直接修掉，没问题的也告诉我"没问题"。

🎉 第 1 章完成

你已经完整走通了一次 生成 → 修改 → 上线。这个闭环，就是后面 11 章要反复做的事，只是项目越来越大、工具越来越专业。

下一章要做什么： 第 1 章用的是在线工具，方便但有天花板——页面一复杂就不好使，代码也不完全在你手里。第 2 章开始装本地环境（终端、Node.js、Git），把主动权拿回来。

装环境会有点枯燥，但现在你已经尝过甜头了，这正是把它放在第 2 章的原因。