用 Codex 做个人作品页

这次做一个能直接打开的网页：虚构插画师林小满的个人介绍、三张作品、联系邮箱。你不需要先学框架，也不用购买域名。我们会经历一次很常见的过程：第一版能看，但用起来不顺手；打开看过以后，再提一个具体的修改要求。

1. 先打开成品，再决定是否跟做

打开最终作品 ↗ · 下载练习文件包

最终版实际网页截图，窗口 1280 × 900。联系方式已经移到介绍后，下面会解释为什么改。

下载文件包并解压，打开里面的 index.html 看最终版，before.html 看第一版。文件包同时包含两条提示词和执行记录。

最终作品是一个 index.html：文字、样式、插画和按钮逻辑都在里面。它可以本地打开，但“有一个网页文件”还不等于“已经发布到互联网”。示例人物和邮箱都是虚构的，不要向演示地址发信。

2. 准备一个空文件夹

需要已经安装并登录 Codex CLI 的 macOS 环境，以及浏览器。还没准备好，先完成安装与登录。这篇用终端执行，不涉及桌面 App 的按钮位置。

打开系统终端，检查：

codex --version
codex login status

下面的截图展示本次实际命令输出。你的版本号可以不同；关键是登录状态正常。如果未登录，先按安装页完成登录。

实际输出的排版展示，不是 Codex 客户端界面。本题不用 Node.js，图中版本仅记录本机环境。

在你自己的练习位置新建空目录，再进入它。目录名如果已存在，换一个新名字：

mkdir codex-profile-practice
cd codex-profile-practice
pwd
ls

ls 此时不应列出旧项目文件。别把这次练习放进正在工作的项目。

3. 不需要配置文件，只准备提示词

本题不装依赖、不接 MCP，也不需要 package.json。把下面第一条提示词保存为纯文本 prompt-1.txt，放进空目录。可以用编辑器，也可以下载原始提示词。

codex-profile-practice/
└── prompt-1.txt

这里用 codex exec 执行文件中的任务，方便保存完整记录。下一步命令会让 Codex 在这个练习目录写入文件；先确认 pwd 的结果。

4. 两次提示词，做出可用的页面

第一次：把人物、内容和画面说具体

这是实际使用的第一条提示词：

请在当前空目录创建一个可双击打开的单文件个人介绍页 index.html，CSS 和 JS 都内嵌，不安装依赖、不联网、不使用外部图片或字体。
人物是虚构的林小满，自由插画师。页面包含名字与一句介绍、三张作品卡片（城市散步、植物观察、周末手帐），以及联系区域。联系邮箱使用 [email protected]，明确这是演示地址。
视觉用暖白纸张底、深墨绿文字和橙色点缀，像一本轻松的独立杂志；不要渐变、发光、密集卡片或营销数字。作品图用自己写的 SVG 几何插画。桌面宽屏左侧介绍右侧作品预览，手机自然单列。
请直接写文件。暂不添加复制邮箱功能或筛选功能。完成后列出写入的文件和检查过的事项，未运行浏览器就直说。不要调用子代理。

执行：

codex exec --sandbox workspace-write --skip-git-repo-check - < prompt-1.txt

--skip-git-repo-check 用于这个新建、没有 Git 的练习目录。执行后，目录中应出现 index.html。如果只出现解释没有文件，检查最后的错误信息，不要把一段回复当成作品。模型的生成结果可能不同，下面展示的是本次实际产物。

用浏览器打开 index.html。不要只看 Codex 说“完成”，先亲眼看布局：

第一版：颜色和插画符合要求，但联系区域被推到左侧底部。在这个窗口里，邮箱没有完整露出。

打开第一版，亲自滚动看看 ↗

这个问题很容易被“看起来不错”掩盖。访客读完介绍，下一步应该能联系作者，而不是向下找入口。先复制一份 index.html 留作对照，再提修改要求。

第二次：说出你看到的问题和想要的行为

把下面内容保存成同目录的 prompt-2.txt，也可下载原文：

我实际打开了第一版：在 1280×900 的窗口里，联系区域被推到首屏底部，邮箱没有完整出现在首屏。我希望访客读完介绍就能联系。
请保留原来的配色、插画和三张作品，把联系区域紧接在人物介绍后，不再贴到底部。增加“复制邮箱”按钮，点击复制 [email protected] 后显示“已复制”；复制失败时显示“请手动选择邮箱复制”，不要假报成功。保留 mailto 链接，并在介绍区增加“看作品”页内跳转。
确保手机宽度 390px 不横向溢出；按钮键盘可操作，有清晰焦点。不要加依赖或外部请求。直接修改 index.html，完成后说明实际检查了什么，没有浏览器测试就明确说明。不要调用子代理。

再执行一次。新的任务会读取并修改现有文件，不是重新建另一个项目：

codex exec --sandbox workspace-write --skip-git-repo-check - < prompt-2.txt

刷新浏览器。对照文章开头的最终截图，检查三个变化：联系方式紧接介绍；出现“看作品”链接；邮箱旁有“复制邮箱”按钮。原来的配色和三张作品应保留。

这条追问好用的地方在于它能被检查：位置、按钮文案、失败提示、保留内容都说清楚了。只说“再高级一点”，你很难判断下一版到底改好了什么。

手机不是把桌面缩小

最终版在 390px 宽窗口的实际全页截图。点击图片可查看原尺寸。

窄屏应自然变成单列，邮箱和按钮不能撑出屏幕。你也可以把浏览器窗口缩窄试试：如果文字被切掉，把窗口宽度和具体位置告诉 Codex，而不是只说“适配一下手机”。

5. 亲自点一遍，才算完成

按这个顺序检查你的版本：

1. 打开页面，确认名字、介绍和三张作品都在。
2. 点击“看作品”，应跳到作品区域；没有打开一个不存在的新页面。
3. 点击“复制邮箱”，成功时显示“已复制”。到本地空白文本中粘贴，应该得到 [email protected]。
4. 如果浏览器不允许剪贴板访问，应显示“请手动选择邮箱复制”；此时手动选择邮箱，不把失败提示改成假成功。
5. 按 Tab 在链接和按钮间移动，焦点应可见。用 Enter 激活按钮。
6. 缩到手机宽度，检查整页没有横向滚动，作品文字没有被截断。

本次成品经过独立浏览器打开检查。Codex 自己在最终回复里明确说没有运行浏览器；页面截图来自生成结束后的实际打开。不要把模型的“静态检查通过”当成肉眼预览。

双击文件后复制失败？ 本地文件的剪贴板能力受浏览器限制，可以手动复制。下载文件中的 mailto: 会尝试打开你配置的邮件程序，不负责发送邮件。联系功能只演示界面行为。

出现连接或认证错误？ 先看终端错误，确认登录和网络。本次第一次调用也出现过模型列表刷新超时，随后任务继续并完成；不能把所有超时都当成失败，也不要在没有文件时宣称完成。检查文件是否生成，再决定重试。

想换成自己的资料？ 下一条任务只替换姓名、介绍、作品标题和邮箱，先保持布局；换完再点一次全部链接。发布前必须把演示邮箱改成你愿意公开的地址。

6. 下载两版文件，自己比较

下载完整原始文件包（ZIP）。需要保存到本机时优先用这个包，解压后可离线打开两版 HTML。下面的网页链接用于在线预览。

• 第一版网页 与 最终网页
• 第一次提示词 与 第二次提示词
• 实际回复摘录：保留模型说明的检查和未检查项。
• 两版代码差异：查看联系区域与复制逻辑的修改。
• Codex 非交互模式说明

想继续练习排查问题？下一篇做浏览器验收，学习把“页面不对劲”写成可复现的问题。