常见任务实战：让 Codex 新增一个简单页面

新增页面是非常常见的 Codex 基础任务。

前置教程：常见任务实战：让 Codex 优化静态网站首页
如果你还没有练习过页面类任务的范围控制和截图验收，先完成前置教程。

依据来源：OpenAI Codex 官方手册中的提示词、项目阅读、diff 审查、验证和审批建议。

这个案例适合谁

适合这些任务：

新增一个关于页。
新增一个帮助页。
新增一个列表页。
新增一个简单表单页。
新增一个文档说明页。

不适合：

一次性新增完整会员系统。
一次性新增后台管理模块。
同时改路由、接口、权限、数据库。

第一次新增页面，目标要小。

第 1 步：先让 Codex 找项目路由规则

不同框架新增页面方式不同。

不要直接让 Codex 新建文件。

先问：

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

我准备新增一个简单页面。请告诉我：
1. 当前项目使用什么框架。
2. 页面路由规则是什么。
3. 已有页面文件在哪里。
4. 新增页面最小需要修改哪些文件。
5. 是否需要修改导航或入口。

预期结果：

Codex 能识别项目框架。
Codex 能找到页面目录。
Codex 能说明新增页面的最小文件范围。

第 2 步：写清楚页面需求

新增页面不要只说：

帮我加一个关于页。

要写清楚：

请帮我新增一个简单页面。

页面名称：
关于我们

路由：
/about

页面内容：
1. 标题：关于我们
2. 副标题：这里介绍本站的定位和学习方式
3. 三个内容区块：
   - 本站目标
   - 适合谁学习
   - 如何开始

样式要求：
1. 使用项目现有设计风格。
2. 不要引入新 UI 库。
3. 移动端正常显示。

修改范围：
1. 只新增页面必要文件。
2. 如果项目已有顶部导航，可以加一个入口。
3. 不要修改无关页面。

验收标准：
1. /about 可以访问。
2. 页面没有明显样式错乱。
3. 首页和文档页不受影响。
4. 修改后请总结文件变化和验证结果。

这段提示词把页面名称、路由、内容、样式、范围、验收都写清楚了。

第 3 步：先让 Codex 给计划

正式修改前，让 Codex 给计划：

先不要修改文件。
请先说明你准备新增或修改哪些文件，以及每个文件的作用。

你要检查：

是否新增了正确页面文件。
是否只改必要导航。
是否没有动无关页面。
是否没有引入新依赖。

如果计划太大：

范围太大了。请缩小到新增 /about 页面和必要导航入口，不要做其他优化。

第 4 步：让 Codex 修改

计划确认后：

可以按这个计划修改。
请保持最小改动。
完成后请告诉我：
1. 新增了哪些文件。
2. 修改了哪些文件。
3. 如何访问新页面。
4. 如何验证没有影响其他页面。

第 5 步：验收页面

你要检查：

/about 是否能访问。
页面标题是否正确。
内容是否完整。
移动端是否正常。
导航入口是否可点击。
其他页面是否没被误伤。

第 6 步：让 Codex 检查 diff

请检查本次新增页面的 diff。

要求：
1. 列出新增和修改的文件。
2. 判断是否有无关文件。
3. 判断是否引入新依赖。
4. 判断是否影响原有首页、文档页或路由。
5. 给出提交前是否可以进入验收的判断。

本案例验收

完成后，你应该得到：

一个可访问的新页面。
明确的路由。
必要导航入口。
截图验证。
Codex 的 diff 总结。

下一篇看：常见任务实战：让 Codex 补 README 或使用说明。