用 Codex 制作个人主页：从一句话需求到本地运行的图文教程

先看成品：一个可以打开、可以点击的主页

这次做一个小而完整的项目：有个人介绍、三个示例作品、分类筛选和深色模式。最终只有一个 index.html 文件，双击就能打开。

本文提供可运行的参考成品，以及在 Codex CLI 中复现它的分步提示词。页面效果图来自参考成品的本地浏览器实际运行；封面是通过 imagegen-aliko 生成的编辑插画。提示词是复现指引，不是逐字保存的 Codex CLI 会话记录，实际生成的排版可能不同。

打开可交互参考成品 ↗ · 下载参考成品 ZIP

步骤 1：把 Codex 接到慧根，再选一个空文件夹

先按Codex API 配置图文教程完成安装、Codex 分组令牌创建和首次连接，也可以从慧根一键配置助手开始。

本项目不需要把 API 令牌写进网页。慧根用于 Codex 与模型之间的请求；生成后的主页由浏览器在本地打开。后续通过 Codex 修改页面时，才需要再次发起模型请求。

在方便找到的位置新建 my-homepage 空文件夹，在配置助手中选择它作为项目目录。Windows 也可以在准备放置项目的目录打开 PowerShell，执行：

mkdir my-homepage
cd my-homepage

启动已经配置好的 Codex。出现工作区信任或文件修改确认时，先核对路径是这个空文件夹。

步骤 2：把页面需求一次说清楚

告诉 Codex 页面有哪些内容、交付什么文件、如何打开。复制下面的提示词：

请在当前空文件夹里制作一个中文个人主页，最终交付 index.html。
目标：让我可以用浏览器直接打开，不需要安装依赖。

页面要求：
1. 顶部有“作品 / 关于 / 联系”锚点导航。
2. 首屏有一句介绍、两个按钮和一张文字介绍卡片。
3. 展示三个示例作品，分为“网页”和“工具”两类。
4. 底部放自我介绍和联系区域。
5. 用米白色背景、深色文字和低饱和绿色，排版清楚，手机上也能阅读。
6. HTML、CSS、JavaScript 都写在这一个文件里。
7. 不使用 CDN、外部字体、外部图片、第三方组件或后台接口。
8. 所有个人介绍和项目均标注为示例；不要编造真实身份、经历或联系方式。
9. 不读取项目目录以外的文件，不安装依赖，不部署上线。

先简要说明你准备做什么，再创建文件。完成后告诉我文件路径和打开方法。

Codex 可能先列出计划，再请求创建文件。核对修改范围后按客户端提示确认。完成后检查文件夹里是否出现 index.html，用浏览器打开它。

步骤 3：加上作品筛选和深色模式

第一版能够打开后，再增加两个容易验证的小功能。在同一个会话发送：

请只修改当前项目的 index.html：
1. 在作品区增加“全部 / 网页 / 工具”三个筛选按钮。
2. 点击后只显示对应分类；“全部”恢复三个作品。
3. 用 aria-pressed 表示当前选择，并用状态文本说明显示了几个作品。
4. 右上角增加浅色 / 深色主题切换按钮，按钮要有可读的名称。
5. 保持原有内容和无外部依赖的要求，不增加后台服务。
完成后列出你改了哪几处，并说明我应该如何手动检查。

保存后刷新浏览器。点击“工具”应只剩一个作品；点击“网页”应出现两个；点击“全部”恢复三个。点击右上角主题按钮，检查文字、卡片和背景是否都切换。

步骤 4：在手机宽度下检查，再让 Codex 调整

在浏览器按 F12 打开开发者工具，切换到设备模拟模式，把视口宽度设为 390px。不同浏览器的按钮位置可能不同，一般显示为手机和平板图标。

如果标题、导航或卡片拥挤，发送这条修改请求：

请检查 index.html 在 390px 宽度下的手机布局：
- 顶部导航和主题按钮不要互相挤压或超出屏幕。
- 首屏改成上下排列，作品卡片改成单列。
- 正文不要缩得太小，不允许用 overflow-x:hidden 掩盖布局溢出。
- 保留作品筛选和主题切换。
如果有浏览器工具，请实际检查并说明结果；如果没有，请明确说未做浏览器实测，给出手动检查步骤。
只修改这个文件，不安装依赖、不部署。

改完后重新加载，在设备模拟模式中上下滚动，检查导航、文字和按钮。也可以将文件复制到手机，用支持本地 HTML 的浏览器打开；具体方法取决于手机系统。

步骤 5：换成自己的内容，保留一份可用版本

先把可用文件复制一份，命名为 index-backup.html。然后替换介绍、作品说明和准备公开的联系方式。提供真实内容，不要让工具替你编造经历。

请只替换 index.html 中的个人介绍和作品文案，不调整样式与交互。
先列出需要我提供的字段，收到内容后再修改。
没有提供的联系方式保留为待填写，不编造邮箱、电话或项目链接。

需要作品链接时，提供完整 URL，并检查文字与目标一致。参考成品的三个项目只是展示卡片，没有连接到真实项目。

这里先完成本地页面。发布到公网还需选择静态托管、上传文件并验证域名，本地打开不代表已经上线。

AI 配图怎么用：封面生成，效果截图

本篇封面通过 imagegen-aliko 生成，沿用米白、深灰和棕色。图中的网页元素是抽象线框，没有模仿真实操作记录。

你的 Codex 环境若安装了这个技能，可以让它按文章主题制作封面；未安装也不影响主页运行。主页可以先用文字和色块完成，再添加有权使用的图片。

展示操作结果时，截取自己实际打开的页面。生成图片不用于证明命令执行成功、模型已经回复或调用产生了多少费用。

费用怎么看：核对会话记录

用慧根接入 Codex 会消耗 API 额度。一个制作主页的任务可能包含多轮模型请求、文件读取和修改，不能把完整任务等同于一次调用。

完成练习后，去调用记录按时间核对模型、分组和消耗。若有多条请求，应合计对应记录，最后一条通常不能代表整轮任务费用。

本文没有一轮独立 Codex CLI 制作会话的账单记录，因此不提供实测费用或固定预算承诺。价格与计算方法参见模型价格页和Token 计费教程。

接下来可以尝试增加作品详情页，或做一版摄影作品集。每次先完成一个小变化，打开页面检查，再继续下一步。