Day 07：用桌面端 Codex 做出第一个小网页

最后一天，我们继续使用 ChatGPT 桌面端里的 Codex，把 Day 06 的练习项目变成一个真正能在浏览器里打开的小网页。

今天不需要先学 HTML、CSS，也不需要在终端里输入命令。你只需要把需求说清楚、检查 Codex 创建的文件，再打开网页查看效果。

开始前先了解额度

制作网页会消耗 Codex 的使用额度，具体额度取决于你的 ChatGPT 方案和当时的官方规则。如果暂时不想开通 ChatGPT 会员，也可以了解 aicodewith 的 69.9 元试用套餐和 API 使用方法。

需要注意：aicodewith 提供的是第三方 API 余额，不是 ChatGPT 会员，也不能直接当作官方 Codex 桌面端额度使用。是否能够接入某个客户端，取决于该客户端是否支持自定义 API 地址；充值前请先看完整说明。

今天要做出什么

我们要制作一个简单的个人介绍网页，里面包含：

• 你的名字或昵称
• 一句话自我介绍
• 三件你正在做或想做的事情
• 一个联系按钮

最终项目里会有三个网页文件：

codex-practice
├── index.html    ← 网页内容
├── style.css     ← 网页的颜色、大小和排版
└── script.js     ← 网页的简单交互

第一步：打开 Day 06 的项目

1. 打开 ChatGPT 桌面客户端。
2. 进入 Codex 或 Work 界面。
3. 打开 Day 06 创建的 codex-practice 文件夹。
4. 确认当前项目名称是 codex-practice。

如果你不确定有没有打开正确的文件夹，先发送：

请先查看当前项目，不要修改任何文件。
告诉我当前项目文件夹叫什么，以及里面有哪些文件。

看到 README.md、notes.txt 和 checklist.md，就说明你打开的是 Day 06 使用的项目。

第二步：告诉 Codex 你想做什么

把下面这段提示词发送给 Codex。方括号里的内容可以换成你自己的信息，也可以先照着示例做完：

请在当前项目中制作一个简洁的个人介绍网页。

网页内容：
1. 姓名或昵称：[小白同学]
2. 一句话介绍：[正在学习用 AI 做出自己的第一个网页]
3. 三件正在做或想做的事情：[学习 AI 编程、记录学习笔记、制作个人网站]
4. 联系按钮文字：[联系我]

制作要求：
- 创建 index.html、style.css 和 script.js；
- 使用简体中文；
- 页面在电脑和手机上都能正常显示；
- 配色清爽，文字容易阅读；
- 点击“联系我”按钮后，显示一句“感谢你的关注”；
- 不安装任何依赖，不使用框架；
- 不要删除或修改项目里原有的其他文件。

完成后请检查三个网页文件，并用大白话告诉我每个文件是做什么的。

为什么要把要求写得这么具体？

Codex 不知道你脑子里想要什么。内容、文件、颜色感觉、手机适配和按钮效果说得越清楚，第一次做出来的结果就越接近你的预期。

第三步：检查 Codex 要做的事情

Codex 可能先展示计划，也可能直接请求创建或修改文件。确认前检查：

1. 当前操作位置是不是 codex-practice。
2. 它是不是准备创建 index.html、style.css、script.js。
3. 它有没有准备删除原来的学习文件。
4. 它有没有要求访问项目文件夹以外的位置。

前三项符合要求，并且没有访问项目外的私人文件，才允许继续。

完成后，项目中应该至少出现：

index.html
style.css
script.js

第四步：在电脑里找到网页文件

让 Codex 告诉你保存位置：

请不要修改文件，只告诉我 index.html 的完整路径，以及怎样从电脑中找到它。

然后打开 Finder 或文件资源管理器，进入：

桌面 → codex-practice

你应该能看到 index.html。它就是这个小网页的入口文件。

第五步：打开第一个网页

直接双击 index.html，电脑通常会使用默认浏览器打开它。

如果双击后没有在浏览器中打开：

• Mac：右键点击 index.html，选择“打开方式”，再选择 Safari 或 Chrome。
• Windows：右键点击 index.html，选择“打开方式”，再选择 Edge 或 Chrome。

看到自己的姓名、介绍和按钮，就说明你的第一个网页已经真正保存在电脑里，并且可以运行。

不需要把三个文件分别打开

浏览器打开 index.html 后，会自动读取同一文件夹里的 style.css 和 script.js。三个文件必须放在一起，网页的样式和按钮才能正常工作。

第六步：检查网页是否真的能用

按照下面的顺序检查：

1. 姓名和自我介绍是否正确。
2. 三件事情是否都显示出来。
3. 点击“联系我”后，是否出现“感谢你的关注”。
4. 缩窄浏览器窗口后，文字是否仍然看得清。
5. 页面有没有内容被截断，或者出现左右滚动条。

如果按钮没有反应，不需要自己猜哪里写错了。回到桌面端 Codex，直接描述你看到的现象：

我打开了 index.html，但是点击“联系我”按钮没有任何反应。
请检查 index.html 和 script.js 的连接以及按钮代码，只修复这个问题，不要重新设计页面。

第七步：让 Codex 修改一次网页

第一次生成只是起点。你要学会告诉 Codex“具体哪里需要改”，而不是只说“做得高级一点”。

例如：

请修改当前网页：
1. 第一屏只保留姓名、一句话介绍和“联系我”按钮；
2. 把三件事情移动到下面的独立区域；
3. 保留现在的配色；
4. 检查手机宽度下没有横向滚动；
5. 不要创建新的文件。

完成后告诉我具体修改了哪些文件。

Codex 修改完成后，回到浏览器刷新页面：

• Mac：按 Command（⌘）+ R
• Windows：按 Ctrl + R

如果刷新后没有变化，先确认浏览器打开的是当前 codex-practice 文件夹里的 index.html，不要重复创建另一个同名项目。

第八步：让 Codex 做最后检查

发送：

请检查当前网页，但先不要修改。
重点检查：文件是否完整、按钮是否能用、手机端是否会横向滚动、文字是否容易阅读。
请用大白话列出检查结果；如果发现问题，再先告诉我准备修改什么。

先看检查结果，再决定是否允许修改。这样你不是把项目完全丢给 AI，而是在学习控制 AI 的工作过程。

完成检查

• [ ] 在桌面端 Codex 中打开了 codex-practice
• [ ] 创建了 index.html、style.css、script.js
• [ ] 能在 Finder 或文件资源管理器中找到网页文件
• [ ] 能用浏览器打开 index.html
• [ ] 点击按钮后会出现提示
• [ ] 完成了一次具体的页面修改
• [ ] 知道修改后需要刷新浏览器查看结果

补充：如果以后想用 Codex CLI

上面的课程已经全部通过桌面端完成，本期课程不要求安装或使用 Codex CLI。

CLI 是在终端里使用 Codex。它和桌面端能做的核心事情很接近，区别主要是操作入口不同：

使用方式	怎么操作	更适合谁
桌面端 Codex	打开客户端、选择项目文件夹、在界面中对话	第一次学习、希望看清文件和操作过程的人
Codex CLI	打开终端、进入项目目录、输入 codex	已经熟悉终端、经常使用命令行的人

如果你以后已经安装了 Codex CLI，可以在终端中进入项目：

Mac：

cd ~/Desktop/codex-practice
codex

Windows PowerShell：

cd $HOME\Desktop\codex-practice
codex

进入后，可以发送与桌面端相同的网页制作提示词。无论使用桌面端还是 CLI，最终修改的都是 codex-practice 文件夹里的同一批文件。

如果终端提示找不到 codex 命令，说明 CLI 尚未安装或没有配置成功。先继续使用桌面端即可，不要为了完成本节课临时折腾 CLI。

官方参考：Codex app · Codex CLI

你已经完成了什么

七天里，你已经走通了“准备环境 → 注册账号 → 安装工具 → 认识终端 → 打开项目 → 让 Codex 创建文件 → 做出并修改网页”的完整流程。

网页现在还只保存在你的电脑中。接下来可以进入进阶篇，把网页上传到 GitHub，再通过 Vercel 发布成任何人都能打开的网站。

上一篇：Day 06：第一次使用桌面端 Codex · 下一篇：进阶：把小网页部署上线