Codex 新手完整教程

这篇教程先解决新手最容易卡住的前置条件：

1. 怎么下载 codex ?
2. 到底应该用什么方式登录 Codex？没有 ChatGPT 订阅能不能用？如何接中转站、国产大模型比如DeepSeek模型？
3. 怎么开启第一个项目

安装codex

1. 打开 https://openai.com/codex 或者中文页面 https://openai.com/zh-Hans-CN/codex/

1. 点击下载 windows 版 / 下载 macOS 版本，网站会自动判断并提供 windows 或 macOS 版本 的下载。

1. 打开下载的 Codex Installer, Codex Installer 会自动开始下载并自自动启动安装。

1. 安装完毕后，codex 会自动打开。

登录codex

很多人卡在这里，没有ChatGPT 订阅账号，不知道应该如何登录使用。

在这个教程里，会完整展示所有登录路径。包括ChatGPT 账号登录、OpenAI API key 登录、配置中转站登录、接 DeepSeek等国产模型使用。

一张表看懂所有使用路径

下面逐条讲操作步骤。

路径 1：ChatGPT 账号登录

如果有自己的ChatGPT 账号（需要科学上网），则可以直接使用该方式登录。

点击 Sign in with ChatGPT，会自动跳转到ChatGPT 授权登录页面。

路径 2：OpenAI API key 登录

这是官方支持的另一条认证方式，但它更适合懂 API、懂计费的人。

要特别强调：API key 是模型调用凭证，不是完整 Codex 产品通行证。

点击 Sign in another way, 输入 OpenAI API key 进行登录。

路径 3：第三方中转站

路径 1 和 路径 2都是本身有 官方账号才能登录，对于大部分人来说，可能都没有 ChatGPT 账号 或 OpenAI API key。

这条路径严格说不是“登录方式”，而是“自定义模型供应商”。

你仍然需要有中转站的 API 凭证，只是把 Codex 请求发到一个 OpenAI 兼容的中转站。

操作步骤

1. 修改配置文件 config.toml 和 auth.json(如果不存在，手动创建这两个文件即可)

配置文件在哪里？

Codex Desktop 安装后，windows所有配置都存储在这个目录下：

C:\Users\你的Windows用户名\.codex\

mac 的配置在这个目录下：

~/.codex/

2. 配置config.toml

建议先备份配置：

cp ~/.codex/config.toml ~/.codex/config.toml.bak

打开 config.toml

增加类似配置：

# ========== 全局模型配置 ==========
model_provider = "micu"              # 指定使用哪个模型供应商；这里的 micu 必须和下面 [model_providers.micu] 的名字一致
model = "gpt-5.5"                    # 指定 Codex 默认调用的模型；要换成你的中转站实际支持的模型名
model_reasoning_effort = "medium"    # 推理强度；常见值有 minimal、low、medium、high、xhigh，越高通常越慢、消耗越多

# 以下内容为可选，可以不写入 `config.toml`
disable_response_storage = true      # 尝试关闭响应存储；不同 Codex 版本或中转站不一定支持，不识别时可以删除
personality = "pragmatic"            # 回复风格；pragmatic 偏直接务实，也可以设为 friendly 或 none
approvals_reviewer = "user"          # 审批请求由谁处理；user 表示由你手动确认，auto_review 表示交给自动审查
approval_policy = "never"            # 是否弹出命令审批；never 表示不询问，on-request 更适合新手
sandbox_mode = "workspace-write"     # 沙盒权限；workspace-write 允许读写当前项目，danger-full-access 风险更高
background_terminal_max_timeout = 7200000  # 后台终端最长等待时间，单位毫秒；7200000 等于 2 小时
service_tier = "fast"                # 服务档位；fast 偏速度优先，具体是否生效取决于账号、模型和供应商支持

[model_providers.micu]
name = "micu"                        # 供应商显示名称，方便你识别
base_url = "https://www.micuapi.ai/v1" # 中转站的 OpenAI 兼容接口地址，换成你实际使用的平台地址
wire_api = "responses"               # 使用 Responses API 协议；大多数新配置优先用这个
requires_openai_auth = true          # 使用 OPENAI_API_KEY 这类 OpenAI 认证方式；开启后会读取 auth.json 或系统凭据

[sandbox_workspace_write]
network_access = true                # 在 workspace-write 沙盒下允许命令访问网络；需要安装依赖、拉 CDN 资源时可开启

[agents]
max_threads = 12                     # 最多同时打开的子代理线程数；新手可以保持默认或适当调低
job_max_runtime_seconds = 7200       # 子代理任务最长运行时间，单位秒；7200 等于 2 小时

3. 配置 auth.json

{
  "OPENAI_API_KEY": "粘贴为中转站CodeX专用分组令牌key"
}

4. 完全退出并重启 Codex。

路径 4：CC Switch 等第三方工具接 DeepSeek/国产模型

这条路的核心是：用第三方工具替你修改配置或启动本地路由，把 Codex 请求转发给 DeepSeek 等国产模型。

CC Switch介绍页

https://github.com/farion1231/cc-switch/blob/main/README_ZH.md

操作步骤

工具界面会变，但大体流程类似：

1. 安装 CC Switch

Windows 用户

从 Releases(https://github.com/farion1231/cc-switch/releases) 页面下载最新版本的 CC-Switch-v{版本号}-Windows.msi 安装包或 CC-Switch-v{版本号}-Windows-Portable.zip 绿色版。

macOS 用户

方式一：通过 Homebrew 安装（推荐）

brew install --cask cc-switch

更新：

brew upgrade --cask cc-switch

方式二：手动下载

从 Releases 页面下载 CC-Switch-v{版本号}-macOS.dmg（推荐）或 .zip。

注意：CC Switch macOS 版本已通过 Apple 代码签名和公证，可直接安装打开。

Arch Linux 用户

通过 paru 安装（推荐）

paru -S cc-switch-bin

Linux 用户

从 Releases 页面下载最新版本的 Linux 安装包：

CC-Switch-v{版本号}-Linux.deb（Debian/Ubuntu） CC-Switch-v{版本号}-Linux.rpm（Fedora/RHEL/openSUSE） CC-Switch-v{版本号}-Linux.AppImage（通用）

2. 安装完成后启动 CC Switch，主界面会出现在桌面或系统托盘。

3. 添加模型供应商，例如 DeepSeek

点击右侧加号：

选中后，在下面的的表单中填入你的 DeepSeek API Key，其余字段使用默认值即可。

4. 到对应模型平台创建 API key

打开 deepseek 开发者平台： https://platform.deepseek.com/

点击 API keys -> Create new API key。

输入名称

复制 API KEY 。 注意， API KEY 只会在创建的时候可见，需要及时复制，如果忘记了，重新创建即可。

5. 开启本地路由映射

切换到 DeepSeek，系统会提示我们开启路由，我们可以点击左上角的设置按钮进入设置页面开启：

点击路由设置菜单，开启路由， 然后选择 Codex：

点击启用 deepseek:

接下来你重新打开 Codex 即可。

第一个项目：跑通一个小项目。

在完成登录后，我们先来跑通一个小项目。

其他的功能和配置，我们在下一期再逐个了解和学习。

在这里，我们来实现最近比较火的 3D 粒子手势控制特效。

1. 创建项目

我们先创建一个项目: 3d-ctrl-system

点击 项目 -> 新建空白项目 -> 输入 3d-ctrl-system 后点击保存：

2. 输入提示词

给 Codex 这个提示词：

要求: 请帮我编写一个单文件的 HTML 原型（包含 CSS/JS），用于展示一个高视觉冲击力的、支持单手与双手多种手势混合控制的 3D 粒子系统。

技术栈要求：

核心库：Three.js (最新模块化版本 via CDN)

交互库：MediaPipe Hands (用于手势识别 via CDN)

样式库：Tailwind CSS (用于快速构建 UI)

视觉与场景设定：

背景：纯黑或深空背景，带有微弱的雾效（Fog）和背景星尘，营造深邃的宇宙感。

粒子：创建 15000+ 个粒子。粒子材质需使用动态生成的圆形光晕贴图（CanvasTexture），避免生硬的方块感。粒子颜色应基于 HSL 动态变化，产生霓虹渐变或冷暖色对冲的流动感。

粒子形态与变换逻辑 (核心功能)：

实现一套基于 BufferGeometry 的粒子变形系统，粒子需要在不同的目标位置之间平滑过渡（使用 Lerp 插值）。

形态 A (默认)：粒子分布在一个旋转的球体星云或随机云团中。

形态 B (手势切换)：实现至少三种通过手势切换的形态，如：爱心、DNA螺旋、文字（如 "HELLO"）。对于文字形态，需将用户输入的文字绘制在隐藏的 2D Canvas 上，读取像素数据并转化为 3D 粒子坐标。

AI 视觉交互 (MediaPipe) - 单双手混合控制：

摄像头处理：获取摄像头画面，实时进行手部追踪。

单手控制 (基础交互)：

手掌张开 (Open Hand)：粒子散开，形成扩散或平铺效果。

握拳 (Fist)：粒子聚合成当前选定的形态（如爱心或文字）。

剪刀手 (Victory)：切换粒子形态（如从爱心切换到DNA螺旋）。

手掌左右移动：控制整个粒子系统的水平旋转。

拇指与食指捏合 (Pinch)：根据捏合程度，缩放粒子系统或控制黑洞质量。

双手控制 (进阶交互)：

双手张合：检测双手之间的距离。双手张开时粒子扩散，双手合拢时粒子收缩。

单手 vs 双手模式切换：系统能智能识别当前是一只还是两只手在摄像头前，并自动切换对应的控制逻辑。

创意交互彩蛋 (增强可玩性)：请至少实现以下两种创意交互：

“能量爆发”：检测到快速握拳时，从拳头位置向外径向发射红/金色高能粒子，并带有发光（Bloom）拖尾效果。

“时空扭曲”：检测拇指与食指的距离。当两指捏合时，周围粒子向中心汇聚形成“黑洞”；当两指拉开时，粒子模拟爆炸状向外飞溅。粒子运动需使用噪声算法（Perlin Noise）增加有机感。

“数据流干扰”：模拟《黑客帝国》数据雨。当手掌划过时，数据流发生故障（Glitch） 和变色。

UI 界面与控制：

设计一个半透明的玻璃拟态（Glassmorphism）悬浮面板。

包含：形态切换按钮、颜色选择器、粒子数量/速度滑动条、文字输入框（用于生成文字粒子）。

显示当前手势状态（如：单手/双手、握拳、张开等）和 FPS 概况。

性能与部署：

粒子需实时响应手势变化，延迟≤100ms，无卡顿。

界面简洁现代，包含全屏控制按钮。

所有功能前端实现，生成一个完整的HTML文件，可直接在浏览器中打开预览。

3. 审查代码(如需)

如果有需要，点击对话框上方的审查按钮，可以查看 codex 正在编写的代码。

4. 运行项目并验收

因为需要摄像头权限，内置浏览器出于安全策略通常会阻止自动执行，我们可以直接放开权限，但通常新手不建议一开始就直接放开所有权限。

我们手动点击 ”打开方式"，选择浏览器打开。

然后我们就可以开始使用这个页面了：

本期总结

这一期我们先把 Codex 的入门门槛跑通：安装桌面版、理解几种登录和模型接入方式、配置 config.toml 和 auth.json，最后用一个 3D 粒子手势控制页面完成了第一个项目。

新手最推荐的路径仍然是 ChatGPT 账号登录，这是官方主线，配置最少、问题也最容易排查。如果你有 OpenAI API key，也可以用 API key 登录，但要记住：API key 只是模型调用凭证，不等于完整的 ChatGPT 订阅或 Codex 云端能力。

如果你没有官方账号，第三方中转站和 CC Switch 这类工具也能作为替代方案，但它们本质上是自定义模型供应商或本地路由方案。使用这类方式时，要重点确认三件事：模型名是否真实可用、接口地址是否兼容、API key 是否只给 Codex 使用。

配置方面，model_provider 决定请求发给谁，model 决定调用哪个模型，[model_providers.xxx] 负责告诉 Codex 这个供应商的接口地址和认证方式。approval_policy、sandbox_mode、network_access 则决定 Codex 能不能自动执行命令、能不能写文件、能不能联网。新手不建议一开始就把权限全部放开，先用相对保守的配置跑通流程，再根据项目需要逐步调整。

到这里，你已经具备了继续使用 Codex 的基础：能安装、能登录或接入模型、能创建项目、能让 Codex 生成代码并手动验收结果。下一期就可以继续深入 Codex 的常用功能、项目协作方式，以及如何让它更稳定地完成真实开发任务。

这篇文档把 Codex App 的每一个面板、每一项配置、每一个快捷操作都展开讲清楚，方便你在后续学习和实操中随时查阅。

一、整体布局速览

打开 Codex App 后，有四个主要区域：

右侧任务面板不是一直显示的，只有在打开项目、开始任务、或主动切换到某个面板时才会出现对应内容。新手刚启动 App 时，可能只看到左侧和中间两部分，这是正常的。

启动 Codex 应用，我们可以在左侧菜单添加项目，中间栏目输入框可以输入我们的需求：

可以设置模型或上传文件等：

二、左侧导航栏详解

左侧导航栏从上到下通常是这几个入口：

1. 对话（Conversations）

这是你所有对话的列表。

• 新建对话：点击左侧新对话，开始一个新任务。
• 对话列表：显示最近对话，按时间排序。
• 对话操作：鼠标悬停在某个对话上，会出现操作按钮：
• 归档（Archive）：把对话从列表隐藏，但可恢复。

2. 搜索

管理你查找历史对话、项目记录和上下文内容：

3. 插件（Plugins）

插件可以理解成：给 Codex 安装能力包。

点开左侧插件，你会进入 Codex 的能力扩展中心。

安装不同插件后，Codex 就能完成不同类型的工作。

常见插件：

4. 已安排（自动化/Automations）

"已安排"可以理解成：让 Codex 按时间自动帮你执行任务。

点开左侧"已安排"，你会进入 Codex 的页面。

三、中间对话区详解

中间是和 Codex 交互的主战场。从上到下、从左到右有这些元素：

1. 输入框

• 单行/多行输入：直接回车是发送，Shift + Enter 是换行（多行输入）。
• @ 调用插件或 Skill：输入 @ 会弹出可用插件和 Skill 列表，比如 @Netlify、@presentations、@mark-note-code-review。
• $ 调用 Skill：某些内置 Skill 用 $ 前缀调用，比如 $image。
• / 斜杠命令：输入 / 会弹出斜杠命令列表，详见下文。

2. Plan 模式开关

输入框左下角有一个加号或 Plan 图标。

• 关闭状态（默认）：你发送 Prompt 后，Codex 直接开始执行。
• 开启状态：Codex 不会直接改文件，而是先输出实现计划（包括文件结构、阶段划分、验收点），等你确认后再执行。

3. 附件按钮

输入框左下角有一个加号的"文件和文件夹"可以：

• 上传图片（截图、设计稿、参考图）
• 附加当前 Electron 应用截图
• 拖入文件

4. Side Chat（侧边聊天）

在主任务运行时，输入 /side 可以打开 Side Chat。

或者点击 侧边聊天。

• 用途：长任务执行中，想问一个轻量问题（比如「你觉得这个项目还需要哪些功能？」），不打断主任务。
• 限制：Side Chat 的结论不会自动写回主任务，需要你手动同步。

5. Steer 引导按钮

当主任务正在运行时，默认你发的消息会排队等待。点击 Steer 按钮，可以让补充信息立即发给正在运行的任务。

7. 斜杠命令

四、右侧任务面板详解

右侧面板会根据当前状态显示不同内容。主要有几个 Tab：

1. 审核（Changes / Git diff）

每次 Codex 修改文件后，这里会显示改动。

• unstaged 查看未提交改动：逐文件查看。
• 逐行评论：在具体代码行上评论，让 Codex 修改。
• 暂存级别：
• 暂存全部
• 还原全部
• 单文件暂存/还原
• 代码块级别暂存/还原
• Commit：暂存后提交，相当于保存一次代码档案。
• 推送和 PR：支持推送到远程仓库、创建 PR。

2. 文件（Files）

• 项目文件树：展开查看项目结构。
• 代码查看：点击文件查看内容。
• 右键在浏览器中打开：对 HTML 文件特别有用，直接用真实浏览器预览。
• 隐藏 composer：三点菜单里可以隐藏底部输入框，给预览腾出空间。

3. 浏览器（Browser）

内置预览器，用于快速查看页面效果。

• 内置预览：dev server 起来后，右侧可以预览页面。
• Annotate 批注入口：浏览器右上角的批注按钮，圈选页面元素写修改意见。
• ⚠️ 内置预览器限制：出于安全策略，内置预览器会禁用某些功能（比如 localStorage），导致按钮无响应、状态不保存。外部应用必须用真实浏览器验收，不要被内置预览器误导。

五、对话输入框详解

1. 模型选择

点击后可以切换模型，常见选项：

• GPT-5.5：最新模型，能力最强。
• GPT-5.4：上一代模型，速度可能更快。
• 其他可选模型视账号和供应商而定。

2. 推理强度（Reasoning Effort）

控制模型「思考多深」：

3. 权限模式

这是新手最容易踩坑的配置。三档对比：

六、设置页详解

点击左侧「设置」或快捷键 Command + ,（macOS）打开设置页。主要分类：

1. 常规

• 界面语言：默认情况下 Codex App 会根据你的系统设置语言，如果没有可以通过这里设置。
• 运行时防止系统休眠：长任务执行时建议开启，避免系统休眠导致任务中断。

• 通知：设置任务完成通知的触发时机，以及是否由应用主动请求系统通知权限。

2. Agent 配置（Agent Configuration）

App 中的 Codex Agent 与 IDE 和 CLI 扩展共享同一套配置。常用选项可在 App 内直接调整，高级选项需编辑 config.toml 文件

3. 浏览器设置

• Browser Use 开关：启用后可以让 Codex 操作浏览器。
• 允许访问的域名：白名单。
• 禁止访问的域名：黑名单。

4. 电脑操控（Computer Use）

• 启用 Computer Use 插件：授权屏幕截图、辅助功能等权限。
• 用途：让 Codex 操作整个电脑（移动鼠标、点击按钮、输入文字）。

5. MCP 服务器

• 手动添加 MCP 配置：适合进阶用户。
• 一行命令安装：比如 Context7 MCP。
• 授权：首次使用前完成网页登录授权。

6. 归档对话

• 查看已归档对话。
• 恢复归档：把归档的对话移回列表。
• 彻底删除：永久移除归档的对话。

七、配置文件与界面设置的关系

Codex 的配置不只靠界面，还有几个关键文件：

1. config.toml（主配置文件）

• 位置：
• Windows：C:\Users\你的用户名\.codex\config.toml
• macOS：~/.codex/config.toml
• 作用：定义模型供应商、默认模型、推理强度、权限模式、沙盒设置等。
• 与界面的关系：
• 界面底部状态栏的设置会写入这个文件。
• 但有些高级配置（如第三方中转站、自定义 model_provider）只能手动编辑文件。

2. auth.json（认证凭证）

• 位置：同 config.toml 目录。
• 作用：存储 API key 等认证凭证。
• 格式：

  {
    "OPENAI_API_KEY": "你的 API key"
  }

• 安全提示：不要把这个文件提交到 Git，不要分享给他人。

3. AGENTS.md（项目规则）

• 位置：项目根目录。
• 作用：定义项目级的规则，Codex 在新对话开始时会自动读取。
• 常见内容：
• 技术栈要求
• 代码风格约束
• 命名规范
• 测试要求
• 提交规则
• 修改范围约束
• 与界面的关系：界面无入口，只能手动创建和编辑。

4. 三者的分工

八、快速查阅表

1. 所有快捷键一览

2. 斜杠命令一览

3. 三档权限模式对比表

4. 模型 / 推理强度 / 速度组合建议

5. 常见问题速查

结语

这篇文档把 Codex App 的界面、面板、配置和快捷操作都过了一遍。你不需要一次记住所有内容——把它当作参考手册，遇到具体问题时再来查阅。

后续每期教程都会用到这些界面元素，但只讲和当期任务相关的部分。如果你想完整了解某个功能，随时回来看这篇文档。

上一篇教程我们跑通了 Codex 的安装、登录和第一个 3D 粒子项目。但离「能交付、能分享、能部署」的真实作品还有距离。这期我们要解决一个更实际的问题：怎么让 Codex 帮你做一个能拿出去用的完整网站，并且走完从计划到交付的全流程。

本期最终效果

最终我们会得到一个可以直接访问的响应式个人主页 / 电子名片站，包含：

• Hero 区域（姓名、定位、价值说明、行动按钮）
• 项目案例（3 个，每个含「问题 / 做法 / 结果」三行结构）
• 工具栈（AI / 开发 / 内容生产三类）
• 联系方式（邮箱、B站、GitHub）
• 深色模式切换
• README 文档（7 段式，可交付）
• 部署建议和验收清单

本期方法论

高质量 Codex 项目不要一句「帮我做个好看的网站」就开始。我们要先告诉它：最终交付物是什么，哪些内容必须有，哪些风格不要，怎么验收。这样它生成的东西才更接近可用，而不是一眼 AI 模板。

本期要走的 7 步流程：

1. 定义交付物
2. 写验收标准
3. 先 Plan（让 Codex 出计划，不要直接改文件）
4. 分阶段实现
5. 浏览器验证
6. 批注修复
7. README 交付

这个流程以后做落地页、作品集、产品 Demo 都能套用。下面一步步来。

第 1 步：创建项目并输入目标

1. 创建项目

打开 Codex App，点击左侧「项目」→「新建空白项目」→ 「使用现有文件夹」→ 新建项目名文件夹 codex-website-demo，点击保存。

2. 切换到「适用于编程」模式

如果你刚装 Codex，默认可能是「通用对话」模式。做代码项目前，先在设置里把工作模式切换为「适用于编程」，这样 Codex 会按编程任务的方式工作。

3. 输入项目目标 Prompt

在输入框左下角找到 Plan 模式开关（加号图标），先打开 Plan 模式。然后输入以下 Prompt：

我们要在当前空目录创建一个可部署的个人主页 / 电子名片网站。

目标用户：
- 想快速了解我是谁、做过什么、如何联系我的访客。

页面内容：
1. Hero：姓名、定位、一句话价值说明、两个行动按钮。
2. 项目案例：3 个项目，每个包含"问题 / 做法 / 结果"。
3. 工具栈：按 AI、开发、内容生产分类。
4. 联系方式：邮箱、B站、GitHub。
5. 支持深色模式。

设计要求：
1. 简洁专业，不要营销感太重。
2. 不要大面积紫蓝渐变。
3. 移动端文字不能溢出，按钮不能挤在一起。
4. 首屏要露出下一段内容的顶部。

协作要求：
1. 先输出实现计划、文件结构和阶段验收点，不要马上改文件。
2. 技术栈优先 Vite + React；如果当前环境不适合，降级为纯 HTML/CSS/JS。

第 2 步：审核 Plan

Codex 收到 Prompt 后，因为开了 Plan 模式，它不会直接改文件，而是先输出实现计划。

看计划时重点看四件事

1. 技术栈本地能不能跑：如果它选了你不熟悉的框架，先确认环境。
2. 文件结构是不是过度复杂：新手项目不应该有 20 个目录。
3. 阶段是否清楚：能不能看出「先 做什么、再做什么」。
4. 验收点能不能肉眼确认：每个阶段结束应该能验收。

第 3 步：第一阶段——搭建项目并跑通

进入实现阶段。第一阶段只验收一件事：项目能跑起来。页面丑一点没关系，dev server 起不来才是大问题。

1. 确认计划方案开始实施

点击提交，codex 会开始执行实施。

2. 审核代码情况

在codex 开发过程中，建议打开右侧审核窗口，观察codex 的代码编写情况

3. 打开本地页面

完成后， codex 一般会自动启动好服务。

我们可以在 codex 自带的浏览器窗口上查看。

也可以打开本地浏览器进行查看。

如果 codex 没有启动，可以手动执行 npm run dev 运行服务。

如果运行命令报错

不要慌，用以下 Prompt 让 Codex 修复：

运行命令失败了，错误如下。

请先解释原因，再给出最小修改方案。
不要重建整个项目，不要做无关重构。

错误：
<粘贴终端错误>

第 4 步：第二阶段——完成页面内容

项目能跑起来后，进入页面内容实现阶段。

输入以下 Prompt：

现在进入页面实现阶段。

请完成以下内容：
1. 顶部导航：姓名、项目、工具、联系。
2. Hero：姓名 Alex Chen，定位 AI 工具研究者 / 内容创作者，一句价值说明，两个行动按钮。
3. 项目案例：
   - Codex 教程库：把零散功能变成可复现教程。
   - AI 选题分析器：基于互动数据和评论样本生成选题建议。
   - 个人效率面板：集中管理常用工具和工作流。
4. 工具栈：AI、开发、内容生产三类。
5. 联系区：demo@example.com、B站、GitHub。
6. 深色模式切换。

完成后请告诉我：
- 修改了哪些文件。
- 如何在浏览器里验收。
- 移动端重点检查什么。

Codex 完成后，会在右侧「审核」面板显示改动。建议先看一下 diff，确认改了哪些文件。

第 5 步：进一步修改或批注修改

验收完会发现页面还有问题。可进一步修改。

经过浏览器验收，我们确定 4 处需要修改：

1. Hero 太空，首屏下半部分浪费。
2. 项目卡片信息层级不清。
3. 移动端两个按钮太挤。
4. 联系区视觉太弱。

如果你的账号能看到 Annotate 入口（浏览器右上角的批注图标），走这条路线：

输入以下 Prompt：

1. Hero 太空，首屏下半部分浪费。
2. 项目卡片信息层级不清。
3. 移动端两个按钮太挤。
4. 联系区视觉太弱。

第 六 步：README 和部署

生成一份面向用户的 README 文档作为交付物。

最好养成生成 README 文档的习惯，这样我们才能保持文档可以被理解。

1. 生成 README

输入以下 Prompt：

请为这个项目补充 README.md，包含：
1. 项目简介。
2. 本地运行命令。
3. 页面结构。
4. 如何修改个人信息。
5. 如何构建生产版本。
6. 可选部署平台建议。
7. 浏览器验收清单。

2. README 是交付的一部分

README 生成后，它就是项目的一部分了。你后续放 GitHub、发给朋友、部署到静态网站，README 能让这个项目从「玩具」变成「可继续使用的模板」。

3. 部署建议

如果你的账号有Netlify插件，可以进行一键部署。

当然没有也没关系。

比如我这里，直接告诉 codex 。

"把当前项目部署到 Netlify。"

codex 会自动判断我当前系统的环境和配置。

并且帮我安装好netlify-cli.

netlify-cli 安装好后，检查到我没有授权、没有登陆状态。

会启动 Netlify CLI 登录流程。

然后自动打开浏览器授权连接。

如果没有注册过 Netlify 账号，只需要注册一个就好了。

接着我们只需要在 Netlify 账号里确认授权，授权完成后会继续部署。

部署完成之后，就会提供一个可以直接访问的公网链接，我们就可以把这个链接发送给其他人访问了。

本期总结

这一期真正要学的不是「做个好看的网页」，而是一套可复用流程：

1. 先目标和验收标准，后 Plan——不要一句「做个网站」就开始，要写清楚「要什么、不要什么、怎么验收」。
2. 先跑通，再做页面——第一阶段只验收「项目能跑起来」，不追求页面完美。
3. 先浏览器验证，再批注修改——不要只停在 Codex 对话框，必须打开真实浏览器，注意内置预览器的限制。
4. 最后 README 和部署说明——README 是交付的一部分，让项目从「录屏玩具」变成「可继续使用的模板」。

这套流程以后做落地页、小工具首页、作品集、产品 Demo 都能套用。

几个关键记忆点：

• Plan 模式：做复杂任务前先开 Plan，让 Codex 出计划再执行。
• 内置预览器限制：localStorage 等功能被禁用，外部应用要用真实浏览器验收。
• Annotate 双路线：入口可见走圈选，不可见走文字批注清单。
• 批注修改 4-5 处：不要一次塞太多目标，避免遗漏和引入新 bug。
• README 交付：区分 AGENTS.md（给 Codex 看）和 README.md（给人看）。
• 部署双路线：Sites 可见走一键部署，不可见走静态构建 + 通用说明。

如果你这期跟下来了，你应该得到：

• ✅ 一个响应式个人主页 / 电子名片站
• ✅ 一份可复用的网站 Prompt 模板
• ✅ 一份浏览器验收清单
• ✅ 一份 README 模板
• ✅ 一份部署建议（双路线）