Appearance
不会写代码，也能用 Codex 做个人主页
如果你以前只用 AI 问问题、写文案，这次试着让它帮你做一个能打开的网页。你负责说想要什么、看看哪里需要改，代码交给 Codex。
这一篇用电脑上的桌面版 Codex。不用输入终端命令，也不用先学编程。先跟着做出一个示例，再换成自己的资料。
1. 先看看我们要做什么
这是虚构人物“示例同学”的个人主页：左边介绍自己，右边放三张作品，下面留一个联系邮箱。
你也可以做摄影作品集、求职介绍页，或者放自己喜欢的书。第一次先照着这个例子做，成功后再换内容。
2. 打开软件，登录账号
还没安装？先看安装并开始第一次对话。已经能在桌面版里进入 Codex，可以继续。
这里说的 Codex 是能帮你修改电脑文件的工具，不是在豆包聊天框里输入“你是 Codex”。如果你用的是 ChatGPT 桌面应用，需要从应用里的产品选择菜单进入 Codex；普通聊天页面不是这篇教程的操作入口。
准备好后，你应该能在 Codex 里新建对话。接下来先给它一个放网页的文件夹。
3. 建一个文件夹，告诉它把网页放在哪
在电脑桌面空白处右键，选择“新建文件夹”，名字写成 我的第一个主页。Mac 也可以在 Finder 中新建。这个文件夹就像本次作业的收纳盒。
回到桌面应用，打开或添加这个文件夹作为本地项目。如果界面要求先建项目，就新建一个项目，再在项目里添加这个文件夹；项目只是把这次作业和聊天放在一起。
在这个项目里新建 Codex 对话。如果出现运行位置选项，选 Local（本地），意思是把文件直接放在这台电脑里。
这次不需要安装插件，也不用填写额外的配置文件。选好文件夹，就可以开始聊天。
先发一句话确认位置：
text
我想在“我的第一个主页”文件夹里做一个个人主页。
请先告诉我，你现在能否看到并修改这个文件夹。
先不要创建文件。如果回答说看不到文件夹，先检查是否在应用里选中了它。只在聊天里写文件夹名字，并不会自动让 AI 获得访问权限。 能确认文件夹后，再发下面的需求。
4. 像聊天一样，让它做出第一版
复制这段话，发到 Codex 的聊天框
“提示词”就是你发给 AI 的要求。这里不用另存成文件，直接复制、粘贴、发送就行：
text
帮我做一个个人主页，直接保存到当前文件夹。
先用虚构人物“示例同学”来练习，他是一名插画师。
页面上要有：名字、一小段自我介绍、三张作品和联系邮箱。
作品名字是“城市散步”“植物观察”“周末手帐”。
图片先用你能画出的简单图形代替。
邮箱用 hello@example.com，并注明是演示邮箱。
我喜欢暖白色背景、深绿色文字，配一点橙色。
电脑上左边放介绍，右边放作品；手机上从上往下排列。
我不会写代码，也不想额外安装工具。
请做成一个叫 index.html 的网页文件，双击就能用浏览器打开。
先不要做复制邮箱按钮。
完成后告诉我文件在哪里，以及怎样打开。粘贴前，看一眼聊天框里是不是完整的这段需求，然后发送。发送后等它完成，不必把它的每条过程消息都看懂。
如果弹出访问或修改文件的确认，看清楚是不是刚才的练习文件夹，再决定是否允许。收到错误提示时，先把提示完整复制给它，让它用简单的话说明下一步打开哪里、做什么。
它说做好了，去哪里看？
打开桌面上的“我的第一个主页”文件夹，找一个叫 index.html 的文件。
你可以把它理解成“这张网页的文件”。双击它，浏览器就会显示页面。 如果双击后出现一堆代码，右键这个文件，选择“打开方式”，再选 Safari、Chrome 或 Edge。
如果文件夹里没有文件，而 AI 只发了一大段代码，继续告诉它：
text
我还没找到网页文件。请直接把页面保存到我们选好的文件夹里，
文件名叫 index.html，不要只把代码贴在聊天里。
保存后告诉我具体位置。第一次看到网页时，先找名字、介绍、三张作品和邮箱。能看到这些内容，就继续做下面的修改；如果打开的是空白页面，把你看到的情况告诉 Codex，先解决这一处。
下面是这个示例的第一版。你做出来的颜色和排版可能不同，不用追求一模一样。
看到哪里不方便，就说哪里
这张第一版里，自我介绍下面空了很大一块，邮箱被推到下方。访客读完介绍，还要往下找才能联系。我们就针对这个问题继续聊：
text
现在联系邮箱太靠下了，请把它移到自我介绍的下面。
邮箱旁边加一个“复制邮箱”按钮。
复制成功就显示“已复制”；如果复制不了，就提醒我手动复制。
再加一个“看作品”按钮，点了能跳到作品区域。
原来的颜色和三张作品都保留。
请直接修改刚才的网页文件，改好后告诉我。如果你的第一版没有这个问题，就说你实际看到的情况。例如：“介绍的字太小，请放大一点”或“按钮被挡住了，请移到能完整看见的位置”。
等它改完，回到浏览器点刷新。继续用原来的聊天、原来的文件，不用重新建项目。对照开头的成品图，看看你提的要求是否做到了。
邮箱应该移到介绍下面，“复制邮箱”和“看作品”按钮也应该出现。少了哪一项，就把那一项告诉它，不用再发一遍全部需求。
5. 自己点一遍，看看好不好用
先检查三件事：
- 内容齐不齐？ 名字、介绍、三张作品、邮箱都应该能看到。
- 按钮能不能用？ 点“看作品”，应移动到作品区域。点“复制邮箱”，再到空白文本里粘贴，看是不是那个邮箱。
- 窗口变窄会怎样？ 用鼠标把浏览器窗口拉窄，看看字有没有被切掉、按钮有没有跑出屏幕。
发现问题时，可以截图发给 Codex，再配一句具体的话：“这张图里的邮箱被切掉了，请让它完整显示。”比“再优化一下”更容易说清楚。
卡住了，先看这里
| 你遇到的情况 | 可以怎么做 |
|---|---|
找不到 index.html | 请 Codex 告诉你保存位置，确认它真的创建了文件 |
| 改完看起来没变化 | 刷新浏览器；确认打开的是这次修改的那个文件 |
| 双击后看到代码 | 右键文件，用浏览器打开 |
| 打开后是空白页 | 告诉 Codex“我双击 index.html 后看到空白页，请检查文件，并告诉我怎么重新打开” |
| 复制按钮提示失败 | 先手动选择邮箱复制，再把提示发给 Codex；有些浏览器限制本地网页复制 |
| 登录后提示无法使用或额度不足 | 按账号提示处理，先不要继续修改电脑设置 |
6. 换成自己的资料，保存这份作品
做好示例后，在同一个对话里发：
text
请把这个示例改成我的个人主页，布局先不变。
名字：填写你的名字或网名
介绍：填写你想让别人认识你的两三句话
作品：填写你想展示的三个内容
联系邮箱：填写你愿意公开的邮箱；如果没有，就去掉联系区域
只使用我提供的资料，不要替我编造经历或获奖记录。把占位内容换成你的资料再发送。如果暂时没有作品，就让它改成“我的兴趣”或“正在学习的事”，不用编造项目经历。
想直接打开本站示例？下载文件包，解压后双击 index.html。before.html 是修改前的版本，其他记录文件可以先不看。
现在你拥有的是电脑里的一个网页文件。它还没有自动变成别人能访问的网址；先把内容做好，发布是下一步。