实战教程
改一版:给个人主页加一块作品区
第一次真实迭代:用一段需求说明让 AI 在已有页面上加一个新板块,改前改后看得见,原有内容一个不少。
做网页不是一次成型的:页面发出去、给别人看过之后,你一定会想「再加个什么都行」。这一课就做第一次真实的改:在个人主页上新增一个「我做过的小东西」板块,放上三个你做过的小作品。
这一课教你的是在已有页面上动手的方法——它和从零做一个页面不一样:AI 改的不是一张白纸,改坏了会把原来做好的东西弄丢。所以这一课有两个关键词:先备份,和改完逐项检查。
改前改后
改前:四个板块,头像名字、介绍、标签、联系方式。

改后:在「我在做的事」和「联系方式」之间,多了一个「我做过的小东西」板块——三张作品卡,每张有名字、一句话说明和一个「看看」按钮。其余板块和改前一模一样。
改后参考成品在 examples/personal-homepage/iteration.html,双击就能打开对照。
第一步:复制这份修改需求
把下面整段发给 AI(改掉【】里的内容):
在我现有的个人主页 HTML 文件上修改,不要动其他板块,只做一件事:
在「我在做的事」板块后面、 「联系方式」板块前面,新增一个「我做过的小东西」板块。
要求:
1. 放 3 张作品卡片,每张卡片包含:作品名字、一句话说明、一个「看看 →」按钮(链接暂时用 # 占位);
2. 卡片样式和页面现有风格保持一致:同样的白色卡片、同样的圆角和边框、同样的青色按钮;
3. 三个作品分别是:【作品一、作品二、作品三,各配一句话说明】。
怎么算做好:刷新页面后,原有板块一个不少、长得和原来一样,新板块 3 张卡片都在,手机宽度下不横向溢出。这段需求和第一课学的四部分是一套方法:改哪里(位置说死:哪个板块后面)、做什么(3 张卡、每张有什么)、什么样(沿用现有风格,不许自由发挥)、怎么算好(原有板块一个不少)。和从零做页面相比,多了两句话——「不要动其他板块」和「原有板块一个不少」,这就是迭代需求的特有部分。
第二步:改之前,先备份
发需求之前,把现在的文件复制一份,名字改成 homepage-v1.html。这样不管 AI 改成什么样,你手里永远有能打开的上一版。
以后每次让人(或 AI)动你的页面,都先做这一步。文件多到乱了再学别的管理办法,现在复制粘贴就够用。
第三步:发需求,然后逐项检查
- 把改好的需求发给 AI,让它直接改你的 HTML 文件。
- 刷新浏览器,从上往下过一遍成功检查(见下)。
- 少了哪项,就把哪项原话发给 AI:「XX 板块不见了,把它恢复成原来的样子」。
成功检查
- 原有板块一个不少:头像名字 / 自我介绍 / 「我在做的事」标签 / 联系方式,和改前长得一样
- 新板块「我做过的小东西」出现,位置在「我在做的事」后面
- 正好 3 张作品卡,每张有名字、一句话说明和「看看 →」按钮
- 卡片风格和页面一致,没有 AI 自由发挥的新配色
- 把窗口拖窄到手机宽度,不横向溢出
-
homepage-v1.html还在,双击能打开改前的版本
常见卡点
- AI 把原有板块改没了:最常见。原因多半是需求里没写「不要动其他板块」。用备份文件恢复,再发一次带这句的需求。
- AI 自作主张换了配色和字体:需求里「保持现有风格」这句不能省。AI 很喜欢「顺手优化」,明确告诉它不许。
- 「看看」按钮点了没反应:链接现在是
#占位,本来就不跳转,属正常。等作品有真正的网址再让 AI 换成真实链接。 - 说不清哪里不对:把改后的文件发给 AI,用提示词手册模板五的问法让它自己对照检查。
下一步
- 改好的页面想发给别人看:回看上线准备:把作品发给别人看。
- 想要一个专门展示作品的页面:做作品集。
- 「看看」按钮的
#占位是什么意思:看链接这张术语卡。