Codex 网站开发实战：从零构建英语词根词缀学习网站

在 AI 编程工具里，Codex 可以帮我们完成从建项目、写代码、跑测试到本地预览的完整链路。本文用一个真实案例，带你走一遍流程：用一句提示词，生成一个支持搜索、分类、深浅色切换、学习进度记录的英语词根词缀学习网站，并用 Codex 的「注释」功能做精准修改。

一、创建项目

打开 Codex，在中间对话框点击「进入项目工作」，进入项目管理界面。

在项目列表下方点击「添加新项目」，这里有两个选项：

• 新建空白项目：从零开始创建；
• 使用现有文件夹：如果你本地已经有目录，选择它并定位到文件夹，点击打开即可。

本文演示从头开始，选择「新建空白项目」，填写项目名称 word-root，点击保存。

保存完成后，当前目录变为 word-root，属于本地模式，master 是使用的 Git 分支（版本控制后续再讲）。左侧项目列表中已经新增了这个文件夹，点击文件夹旁的三个点，可以：

• 置顶：方便以后查找；
• 重命名；
• 创建工作室（后续讲解）。

此时在文件系统中对应位置是一个空文件夹，项目创建完成。

二、输入需求提示词

项目建好后，在输入框中填写提示词。核心需求如下：

使用现代的 HTML、CSS 加上 JavaScript，开发一个英语词根词缀学习网站。采用左右两栏布局：左侧显示词根词缀列表，支持搜索、分类查询，默认显示 20 个；右侧显示选中某个词后展开的详细内容，包括含义、词源故事、5 到 8 个实例等。界面要求简洁优雅、现代感强，支持深浅色模式切换，移动端响应良好。保持学习进度，存储到本地 localStorage，可以标记这个词根是否已经学过。做好基础功能测试，并启动本地服务器让我预览。

填写完成后点击发送。

三、观察生成过程

Codex 开始处理后，会先说明思路：目录是空的，它将使用 React + Vite 来构建前端框架。

生成过程中有几个值得注意的点：

1. 技能调用：可以看到它正在读取技能（如 Image Gen 生成图片的技能），说明它会在页面中创建对应图片。Codex 内置多种技能，生成项目时可直接调用。
2. 环境信息面板：右侧会显示当前是否有变更。每次变更都会展示变更位置和具体代码，类似 Cursor 的 diff 视图，方便做代码 review。面板中还能看到本地文件夹、当前分支（master）等 Git 相关信息，点击即可收起。
3. 概念图生成：它先用 Image Gen 生成了一张概念图——词根词缀分类、下方 20 个常用词、搜索框、右侧详情（词源故事、例句、派生词、记忆方法）、标记标签、暗色模式切换，整体符合需求。

接下来它会把概念图转化为 HTML/CSS/JS 页面。生成期间界面一直转圈，表示正在处理中。

四、并行对话：让 Codex 同时干两件事

Codex 支持并行运行多个任务。生成代码的同时，点击侧边栏可以新开一个侧边聊天，输入：

分析一下这个项目还有哪些可以提升的地方。

此时两个线程并行：一个在生成代码，另一个在回答分析问题。分析线程会说明「只做检查，不打扰主线程」，然后给出优化方向，包括内容数据结构、学习体验、搜索检查、移动端交互、本地存储、可访问性、测试、后续扩展等。

如果项目生成完后觉得这些建议有道理，可以直接复制内容让它继续生成。这个案例说明 Codex 可以多线程并行启用。看完后关闭该对话，回到主线程继续等待。

五、权限设置与测试运行

程序跑起来后，Codex 会询问是否允许访问。这里使用的是 Codex 内置浏览器，点击「允许」。

如果不想每次都手动批准，可以在「批准请求」处更改权限，共有三档：

权限档位	说明
请求批准（默认）	每次遇到更改都弹窗请求，由你选择执行
替我审批	自动检查，仅对检测到风险的操作进行审批，更宽泛
完全访问权限	不受控制，可直接访问电脑和互联网，权限最大

通常使用默认的「请求批准」或「替我审批」即可；完全访问权限只建议在完全放心的任务中开启。

随后程序运行，Codex 自动执行了大量测试，包括深浅色模式测试等，运行完成后启动了本地服务。

六、预览与功能验证

点击预览进入内置浏览器查看网站效果。面板太小可以点击展开，也可以点击按钮折叠侧边栏。

• 默认是深色模式，点击切换按钮可切到浅色模式；
• 左侧是词根词缀列表，右侧是搜索与切换；
• 支持按前缀、后缀、已学等条件筛选；
• 右侧展示具体词根词缀的含义、记忆技巧、词源故事、中文释义、衍生词、学习历史等。

整体效果与需求一致。为了确认真实效果，把地址复制到真正的浏览器中打开，页面正常。

接着测试学习进度功能：点击「标记已学」，按钮变为已学状态，已学数量增加，在「已学」分类里也能看到该内容——说明 localStorage 存储生效。

七、用「注释」功能做精准修改

如果对页面不满意，直接在对话框里用语言描述修改需求往往太宽泛——比如「修改按钮」，页面上按钮那么多，很难确定是哪一个。Codex 提供了更精确的方式：注释功能。

在右侧预览区点击「注释」旁的加号，进入注释模式，然后在页面中直接选择要修改的元素：

1. 选中页面中的文字，把 mwr 改为 w，点击发送；
2. 再选中标题「英语词根词缀学习」，可以直接在描述里写「使用粗体」，也可以点击样式面板做更精细的调整：字重改为 600、字号不改、设置字体颜色等；背景色、字体、边框颜色、宽高、内外边距等属性都能在这里修改。

修改完成后点击发送、确定。Codex 会把修改后的页面截图，并在对应位置附上注释，作为提示词提交——这比口头描述精确得多。

八、验证修改结果

回到真实浏览器刷新页面，可以看到修改已经生效：文字内容与标题样式都发生了变化。

小结

本文完整走了一遍 Codex 开发网站的链路：

1. 建项目：新建空白项目或使用现有文件夹；
2. 写需求：一句结构化提示词描述布局、功能、存储与测试要求；
3. 看过程：技能调用、diff 变更面板、概念图生成；
4. 并行任务：一边生成代码一边让侧边线程分析优化点；
5. 控权限：三档审批策略按需选择；
6. 测结果：内置浏览器预览 + 真实浏览器验证标记已学功能；
7. 精修改：用注释功能选中元素、改样式、截图提交，刷新验证生效。

其中「注释」是 Codex 非常智能的一个功能：选中页面内容、就地修改、自动截图并附注释提交，让 AI 改页面像改设计稿一样直观。