ZJY365 实战
实战教程

改一版:给个人主页加一块作品区

第一次真实迭代:用一段需求说明让 AI 在已有页面上加一个新板块,改前改后看得见,原有内容一个不少。

做网页不是一次成型的:页面发出去、给别人看过之后,你一定会想「再加个什么都行」。这一课就做第一次真实的:在个人主页上新增一个「我做过的小东西」板块,放上三个你做过的小作品。

这一课教你的是在已有页面上动手的方法——它和从零做一个页面不一样:AI 改的不是一张白纸,改坏了会把原来做好的东西弄丢。所以这一课有两个关键词:先备份,和改完逐项检查

改前改后

改前:四个板块,头像名字、介绍、标签、联系方式。

个人主页改前

改后:在「我在做的事」和「联系方式」之间,多了一个「我做过的小东西」板块——三张作品卡,每张有名字、一句话说明和一个「看看」按钮。其余板块和改前一模一样。

改后参考成品在 examples/personal-homepage/iteration.html,双击就能打开对照。

第一步:复制这份修改需求

把下面整段发给 AI(改掉【】里的内容):

在我现有的个人主页 HTML 文件上修改,不要动其他板块,只做一件事:
在「我在做的事」板块后面、 「联系方式」板块前面,新增一个「我做过的小东西」板块。
要求:
1. 放 3 张作品卡片,每张卡片包含:作品名字、一句话说明、一个「看看 →」按钮(链接暂时用 # 占位);
2. 卡片样式和页面现有风格保持一致:同样的白色卡片、同样的圆角和边框、同样的青色按钮;
3. 三个作品分别是:【作品一、作品二、作品三,各配一句话说明】。
怎么算做好:刷新页面后,原有板块一个不少、长得和原来一样,新板块 3 张卡片都在,手机宽度下不横向溢出。

这段需求和第一课学的四部分是一套方法:改哪里(位置说死:哪个板块后面)、做什么(3 张卡、每张有什么)、什么样(沿用现有风格,不许自由发挥)、怎么算好(原有板块一个不少)。和从零做页面相比,多了两句话——「不要动其他板块」和「原有板块一个不少」,这就是迭代需求的特有部分。

第二步:改之前,先备份

发需求之前,把现在的文件复制一份,名字改成 homepage-v1.html。这样不管 AI 改成什么样,你手里永远有能打开的上一版。

以后每次让人(或 AI)动你的页面,都先做这一步。文件多到乱了再学别的管理办法,现在复制粘贴就够用。

第三步:发需求,然后逐项检查

  1. 把改好的需求发给 AI,让它直接改你的 HTML 文件。
  2. 刷新浏览器,从上往下过一遍成功检查(见下)。
  3. 少了哪项,就把哪项原话发给 AI:「XX 板块不见了,把它恢复成原来的样子」。

成功检查

  • 原有板块一个不少:头像名字 / 自我介绍 / 「我在做的事」标签 / 联系方式,和改前长得一样
  • 新板块「我做过的小东西」出现,位置在「我在做的事」后面
  • 正好 3 张作品卡,每张有名字、一句话说明和「看看 →」按钮
  • 卡片风格和页面一致,没有 AI 自由发挥的新配色
  • 把窗口拖窄到手机宽度,不横向溢出
  • homepage-v1.html 还在,双击能打开改前的版本

常见卡点

  • AI 把原有板块改没了:最常见。原因多半是需求里没写「不要动其他板块」。用备份文件恢复,再发一次带这句的需求。
  • AI 自作主张换了配色和字体:需求里「保持现有风格」这句不能省。AI 很喜欢「顺手优化」,明确告诉它不许。
  • 「看看」按钮点了没反应:链接现在是 # 占位,本来就不跳转,属正常。等作品有真正的网址再让 AI 换成真实链接。
  • 说不清哪里不对:把改后的文件发给 AI,用提示词手册模板五的问法让它自己对照检查。

下一步

On this page