优化首页是 Codex 最常见的基础实战之一。本案例的重点是学会如何将模糊的视觉需求转化为 Codex 可执行的具体任务。
核心操作流程
1. 初始环境准备
确保您的项目已在本地启动，并能通过浏览器实时预览。推荐使用 VitePress、Docusaurus 或类似的静态站点框架。
2. 第一步：先让 Codex 找首页文件
不要直接要求“把首页做漂亮”，先让 Codex 进行只读分析以确定修改范围。
Prompt 示例：
``text
请先只读分析当前项目，不要修改任何文件。
请告诉我：
- 首页文件可能在哪里。
- 首页整体更像一个 Codex 中文教程站。
- 只允许修改首页文件和首页相关样式。
- 桌面端首屏不拥挤。
- 修改了哪些文件。
- 列出修改文件。
2. 全局样式文件可能在哪里。
3. 当前首页主要由哪些区域组成。
4. 如果要优化首页视觉，最小修改范围应该是哪些文件。
5. 你建议不要动哪些文件。
`
3. 第二步：给 Codex 明确的视觉目标
视觉需求需要拆解成具体的要求，并设定限制条件以防误伤其他页面。
Prompt 示例：
`text
请帮我优化首页视觉。
目标：
2. Hero 区域要有科技感，但整体不要太暗。
3. 主标题清楚展示“Codex喂饭教程”。
4. 副标题使用“面向中文用户的 OpenAI Codex 实战学习站”。
5. 首页要突出“从 0 开始学习”“入口地图”“配置大模型”“项目实战”这些入口。
修改范围：
2. 不要修改文档页布局。
3. 不要修改教程内容。
4. 不要引入新依赖。
验收标准：
2. 移动端文字不溢出。
3. 顶部导航仍然可用。
4. 构建检查通过，或者说明为什么没有运行。
5. 修改后请总结 diff。
`
4. 第三步：先看 Codex 的计划
在执行修改前，确认 Codex 的计划是否符合预期。
Prompt 示例：
`text
先不要修改文件。
请先告诉我你准备改哪些区域、哪些文件，以及不会改哪些文件。
`
*如果计划范围太大，使用 Prompt 收窄：* 范围太大了。请缩小到只优化首页 Hero 区域 and 首页入口卡片，不要动其他页面。
5. 第四步：执行修改与微调
确认计划后开始修改：
`text
可以按这个计划修改。
请保持修改范围最小。
完成后请告诉我：
2. 每个文件改了什么。
3. 是否运行了构建或检查。
4. 我应该如何截图验收。
`
6. 第五步：让 Codex 做 diff 总结
修改完成后，要求 Codex 检查改动并总结变化。
Prompt 示例：
`text
请检查本次 diff。
要求：
2. 判断是否有无关文件。
3. 判断是否影响文档页。
4. 判断是否引入新依赖。
5. 用中文总结这次首页视觉变化。
``
核心工作流循环
给目标 -> 看计划 -> 改代码 -> 截图 -> 反馈具体问题 -> 微调
通过这个循环，您可以确保首页视觉得到明显优化，且不会引入不必要的依赖或破坏网站的其他部分。
---
下一篇推荐：让 Codex 修复前端 Bug —— 学习如何驱动 AI 精准定位并修复 UI 逻辑问题。