常见任务实战：让 Codex 优化静态网站首页

优化首页是 Codex 最常见的基础实战之一。

前置教程：Git 提交前检查
如果你还没有学会让 Codex 检查 diff、无关文件和验收结果，先完成前置教程。

依据来源：OpenAI Codex 官方手册中的提示词、审批、沙箱、diff 审查、验证和工作流建议。

这个案例适合谁

适合这些用户：

已经有一个能运行的静态网站。
想让 Codex 帮忙优化首页视觉。
不想一上来大改项目结构。
想学会怎么把“页面太丑”变成 Codex 能执行的任务。

不适合：

项目还不能启动。
首页文件在哪里都不知道。
想一次性重构整个网站。

案例目标

假设你现在有一个静态教程网站首页，但页面比较粗糙。

你希望 Codex 帮你优化成：

顶部导航清晰。
Hero 区域更有科技感。
学习入口更明显。
移动端不乱。
不影响文档页。
不引入新依赖。

本案例的重点不是“做出某一种固定样式”，而是学会如何把视觉需求讲清楚。

第 1 步：先让 Codex 找首页文件

不要直接说：

帮我把首页做漂亮。

先让 Codex 只读分析：

请先只读分析当前项目，不要修改任何文件。

请告诉我：
1. 首页文件可能在哪里。
2. 全局样式文件可能在哪里。
3. 当前首页主要由哪些区域组成。
4. 如果要优化首页视觉，最小修改范围应该是哪些文件。
5. 你建议不要动哪些文件。

预期结果：

Codex 能找到类似 src/pages/index.astro、src/pages/index.vue、app/pages/index.vue 的首页文件。
Codex 能找到样式文件。
Codex 能给出修改范围建议。

第 2 步：给 Codex 视觉目标

视觉需求不能只写“科技感”。

要拆成具体要求：

请帮我优化首页视觉。

目标：
1. 首页整体更像一个 Codex 中文教程站。
2. Hero 区域要有科技感，但整体不要太暗。
3. 主标题清楚展示“Codex喂饭教程”。
4. 副标题使用“面向中文用户的 OpenAI Codex 实战学习站”。
5. 首页要突出“从 0 开始学习”“入口地图”“配置大模型”“项目实战”这些入口。

修改范围：
1. 只允许修改首页文件和首页相关样式。
2. 不要修改文档页布局。
3. 不要修改教程内容。
4. 不要引入新依赖。

验收标准：
1. 桌面端首屏不拥挤。
2. 移动端文字不溢出。
3. 顶部导航仍然可用。
4. 构建检查通过，或者说明为什么没有运行。
5. 修改后请总结 diff。

这段提示词比“美化一下首页”更可靠。

第 3 步：先看 Codex 的计划

Codex 如果直接开始改，也不一定错。

但更稳的做法是让它先给计划：

先不要修改文件。
请先告诉我你准备改哪些区域、哪些文件，以及不会改哪些文件。

你要检查：

是否只改首页。
是否没有动文档页。
是否没有加新依赖。
是否没有重构路由。
是否能说明每个区域为什么改。

如果计划范围太大，立刻收窄：

范围太大了。请缩小到只优化首页 Hero 区域和首页入口卡片，不要动其他页面。

第 4 步：让 Codex 修改

计划确认后，再让它开始：

可以按这个计划修改。
请保持修改范围最小。
完成后请告诉我：
1. 修改了哪些文件。
2. 每个文件改了什么。
3. 是否运行了构建或检查。
4. 我应该如何截图验收。

这里不要要求 Codex 一定手动列出每一行代码。

你更需要的是：

文件列表。
diff 总结。
验收方式。
风险说明。

第 5 步：看 diff

修改后，让 Codex 做 diff 总结：

请检查本次 diff。

要求：
1. 列出修改文件。
2. 判断是否有无关文件。
3. 判断是否影响文档页。
4. 判断是否引入新依赖。
5. 用中文总结这次首页视觉变化。

如果它改了无关文件，要求收回：

这些文件不在本次任务范围内：【列出文件】
请撤回这些无关修改，只保留首页优化相关改动。

第 6 步：截图验收

你需要自己看页面，因为视觉任务不能只靠文字验收。

至少截 3 张：

桌面端首页首屏。
移动端首页首屏。
文档页，确认没有被影响。

第 7 步：把截图反馈给 Codex

如果你发现问题，不要说：

还是不好看。

要具体：

根据截图继续微调：

问题：
1. 主标题太大，桌面端显得拥挤。
2. Hero 左右留白太小。
3. 四个入口卡片文字长短差异太大。

要求：
1. 只修改首页相关文件。
2. 主标题缩小 10% 到 15%。
3. Hero 左右留白增加。
4. 四个卡片文案长度尽量接近。
5. 不要影响文档页。

这是视觉类任务的正确循环：

给目标 -> 看计划 -> 改代码 -> 截图 -> 反馈具体问题 -> 微调

本案例验收

完成后，你应该得到：

首页视觉明显优化。
首页入口更清晰。
移动端没有明显溢出。
文档页没有被误伤。
Codex 给出修改文件和验证结果。
你有前后截图可以对比。

下一篇看：常见任务实战：让 Codex 修复前端 Bug。