第一次用 AI 做网页，这两段提示词可以直接用

想试试用 AI 写代码，又不知道做什么，可以从一张自己的介绍页开始。

名字、一小段介绍、几件愿意拿出来给人看的作品。以后认识新朋友，或者有人问你最近在忙什么，就有个地方能放下这些东西。

这个题目小，也有一个好处。做得像不像你，你自己就能判断，不必等谁来打分。

这篇就聊怎么开始。我准备了两段可以改着用的提示词，一段用来做第一版，一段用来提修改。配图是为本文制作的教学示例，里面的人物和作品都是虚构的，方便看清页面大概长什么样。

如果你也想试，找一台电脑，打开你已经在用的 AI 工具就行。暂时不用为了这个练习买新订阅。

能创建项目文件的工具，可以让它直接把网页做好；只有聊天窗口的，也可以先让它给完整代码，再按后面的方法保存。不同工具做出来的样子会有差别，这篇不承诺一次就能得到配图里的效果。

先把你想放的东西交给它

假设你开口只说了一句「帮我做个个人网站，要高级一点」。

AI 可能给你做一个黑底、发光、会动的页面。你想要的却是一张安静的名片，朋友扫两眼就知道你在做什么。

它不知道这些。「高级」这个词，装得下太多完全不同的样子。

所以我更愿意先把内容写出来。哪怕只有三句话，也比一串风格形容词管用。

你叫什么，最近在做什么，有什么想给别人看。写得普通一点没关系，网页上的介绍不用比本人更像个成功人士。

比如「我在学摄影，周末会去拍街道和老房子」，就已经能让人认识你了。暂时没有作品链接，放两段介绍也可以。别为了把页面填满，硬凑出几个项目。

整理好以后，把下面方括号里的内容换成自己的，整段发给 AI。

帮我做一张个人介绍页。我没有开发经验。

这个页面给第一次认识我的人看。
希望对方看完知道我在做什么，
并能找到我的作品和联系方式。

这是我的材料
姓名或昵称：[填写]
一句话介绍：[填写]
关于我：[两三句话]
作品：[名称、简短介绍、真实链接；没有就删掉]
联系方式：[愿意公开的邮箱或主页；没有就删掉]

第一版用浅色背景，文字清楚，留白舒服。
手机上也要方便阅读。
只放我给的内容，不编履历，不放无效按钮。
暂时不做登录、留言、支付和动画。

用一个独立的 HTML 文件完成，
样式写在文件里，不依赖在线字体和图片，
也不需要额外安装软件包。

如果你能创建文件，就保存为 index.html；
如果不能，就给我完整代码，不要省略片段。
最后告诉我该怎么打开它。
有影响制作的必要信息缺失时，再向我提问。

这段里唯一有点陌生的词是 HTML。这里可以先把它理解成一种网页文件，浏览器能打开。

要求只做一个文件，是为了省掉第一回用不上的安装和配置。这种做法适合今天这张简单的介绍页，以后要做账户、订单或者多人共享数据，就得换一种安排。

这一版只需要把你介绍清楚。 有了具体范围，你也更容易知道它什么时候做完了。

材料里面，联系方式尤其值得自己选一下。打算把页面给别人看，就只填愿意公开的内容；暂时不想放，删掉这一项完全没问题。

先在浏览器里见到它

接下来会有两种情况。

如果工具已经生成了文件，让它告诉你保存位置，找到 index.html，用浏览器打开。工具里有预览入口，也可以先在那里看。

如果聊天窗口只给了一大段代码，就需要多做一步。打开纯文本编辑器，把代码块里的内容复制进去，保存为 index.html，编码选 UTF-8。

这里别用 Word。Mac 自带的文本编辑要先切成纯文本；Windows 的记事本保存时，文件类型选「所有文件」。留意实际文件名，别存成了 index.html.txt。聊天代码框外面的三根反引号也不用复制。

再把文件拖进浏览器，或者右键选择浏览器打开。若看到的还是一屏代码，先检查文件后缀和保存格式。

卡在这里也不用自己猜，可以直接告诉 AI，你用的是 Mac 还是 Windows、在哪个软件里保存、打开后看到了什么。让它只解释这一步，等你打开成功再继续。

页面出来以后，先读一遍内容。

姓名是不是自己的，介绍有没有被擅自添油加醋，作品链接点下去是不是正确的地方。放了邮箱的话，点击通常是尝试唤起邮件应用；电脑没配置邮件应用时，可能不会顺利打开。它还不是一个可以直接在网页上发信的功能。

然后把浏览器窗口拉窄一点。

这个动作能提前发现一些问题，比如一行字被挤得只剩两个字，或者作品卡片伸到了屏幕外。它不能代替手机上的实际检查，但现在做起来很方便。

还有一件容易误会的事。在自己电脑上打开了网页，还不等于它已经上线。 浏览器地址栏里的本地文件路径，发给朋友通常是打不开的。

先留着这个文件，等内容满意了，再处理怎么变成别人能访问的网址。这篇先不把那一步也挤进来。

哪里不满意，就从哪里改

第一版大概率还有想调整的地方。

这时其实不用重新写一份需求。把页面放在眼前，指出最碍眼的那一处就行。

假设姓名太大，往下滑了半天才看到作品，而你希望别人进来就先看作品。这一轮可以这样说。

这版的浅色背景和文字内容我想保留。
请只调整下面两处。

顶部姓名占的空间太大了，缩小一些。
让窄屏首屏能同时看到姓名、
一句话介绍，以及作品区域的开头。

把作品移到一句话介绍后面，
完整的「关于我」放到作品后面。

其余内容和样式先不动。
修改前请保留一份旧文件，方便恢复。
完成后告诉我改了哪些地方。

你实际遇到的问题可能不同，就把中间两项换掉。

「正文太浅，我看着费劲」「作品图片被裁掉了上半截」「按钮文字太长，手机上换成了三行」，这些都是能继续沟通的描述。不知道对应的技术名词，也可以把截图发给它，圈出位置。

反过来，只说「不够高级」「再精致一点」，对方很难知道你到底嫌哪里不舒服。它可能很认真地改了不少，偏偏没改到你在意的地方。

有喜欢的参考图，也尽量补一句喜欢什么。比如喜欢作品放在上面的顺序，或者喜欢宽松的段落间距。这样参考图才有了具体用途，不用把别人的整张页面都搬过来。

改完以后，再打开文件看。如果还是旧样子，刷新一下，并确认打开的是刚修改的那份。

提示词里的「其余先不动」能表达你的意图，但不是保证。你满意的地方，改完也顺便看一眼。万一这一轮越改越乱，先恢复旧文件，再把修改范围缩小。

如果出现报错，保留原始报错文字，说明做了什么以后出错。比起「坏了，快修」，这些信息更容易让它找到问题。截图里有私人信息的话，发之前记得遮一下。

我觉得第一次做到这里，已经挺好。

你有了一份自己能打开的网页，改过其中不满意的地方，也知道它现在能做什么。代码暂时看不懂的部分，可以留到下一次遇到具体问题时再问。

最近写了不少 AI 工程相关的内容，往后也想每周留一篇，聊这种能从头跟着做的小练习。第一次接触确实会卡在一些很小的地方，保存一个文件、找一个按钮，都值得说清楚。

如果照着做了，欢迎告诉我你停在了哪一步。比起继续往文章里塞功能，我更想先把那一步补明白。