Codex Agent 落地陪跑

从概念认知到动手实操的 Agent 入门指南

2026 · 实操工作坊

今天的目标

  1. 🌐 解决网络基础,稳定访问 ChatGPT
  2. 🔧 搭建依赖环境,安装 Codex CLI
  3. 💻 使用 Codex · 常用技巧 · Slash Command
  4. 🧩 Codex Skill — 结构 · 渐进式披露 · 搜索安装
  5. 🚀 场景演示 — 用 Codex 构建网页

今天的路线

0 开场 1 网络 2 环境 3 使用 4 Skills 5 实战 6 Desktop 7 总结

Agent 是什么

Agent = 能自主行动的 AI,不只是聊天

维度Web 端对话(ChatGPT 网页)本地 Agent(Codex CLI)
交互方式你问一句,它答一句你给目标,它自己规划执行
能力边界只能生成文字/图片能读写文件、运行命令、调用工具
工作环境浏览器沙箱,与本地隔离直接在你的项目目录中工作
上下文只有对话历史整个项目代码 + 对话
输出物文字回复,需手动复制直接生成/修改代码文件

核心区别:Agent 不只是"说",更能"做"

AI 使用的两个阶段

阶段一:Web 浏览器对话

  • 打开 chatgpt.com / claude.ai
  • 在输入框里提问
  • 复制粘贴 AI 的回答
  • 手动把代码放到项目里

大多数人停留在这一步

阶段二:本地 Agent

  • 在终端启动 Agent(如 Codex)
  • 用自然语言描述目标
  • Agent 自动读代码、改代码、跑命令
  • 你只需审核和确认

今天带你走到这一步 →

三大 AI 公司与 Agent 工具

公司 AI 模型 Agent 工具 特点
OpenAI ChatGPT 5.4 / ChatGPT 5.3 Codex Codex CLI 开源、沙箱安全、Plus 可用
Anthropic Claude Opus 4.6 / Sonnet 4.6 Claude Code Skills 生态强、企业级
Google Gemini 3 Gemini CLI 1M+ 上下文、免费额度

今天我们用 Codex CLI 来入门 Agent

01

网络配置

稳定访问 ChatGPT / OpenAI 的前提


为什么需要代理

💻
你的电脑
🌐
chatgpt.com

ChatGPT 和 OpenAI 在国内无法直接访问

💻
你的电脑
🔀
代理服务器
🌐
chatgpt.com

📥 下载代理工具

  1. 访问下方链接直接下载压缩包
  2. 下载完成后解压即可使用
下载代理工具压缩包

📦 安装

  1. 解压 7z 到一个固定位置,如 C:\Tools\v2rayN\
  2. 双击 v2rayN.exe 启动
  3. 导入提供的订阅链接
  4. 选择节点 → 右键 → 设为活动服务器

💡 建议不要放在桌面,避免以后误删

🌐 开启系统代理

  1. 右下角托盘找到 v2rayN 图标
  2. 右键 → 系统代理 → 自动配置系统代理
  3. 图标变色 = 代理已开启

📝 记住你的本地代理端口(通常是 10809

⚡ 检查点:网络测试

打开浏览器,访问:

https://chatgpt.com

能打开 ChatGPT 页面 = 网络配置成功 ✅

🔧 常见问题

问题解决方案
浏览器可以但终端不行终端需要单独配置代理环境变量
v2rayN 启动失败以管理员身份运行
节点连不上换一个节点试试

第1章 小结

已完成 代理安装 · 节点连接 · 系统代理开启

接下来搭建环境、安装 Codex →

02

环境搭建与安装 Codex

Node.js + 终端代理 + Codex CLI + 账号授权


🔍 终端为什么需要单独配代理

系统代理覆盖

🌐 Chrome
🌐 Edge
📧 Outlook

需要手动配置

💻 PowerShell
📦 npm
🐙 git

📦 安装 Node.js

Codex CLI 需要 Node.js ≥ 22

💡 运行此命令
winget install OpenJS.NodeJS.LTS

安装完成后重启终端,然后验证:

node --version   # 应输出 v22.x 或更高
npm --version    # 应输出 10.x 或更高

内容与 tools.html 弹窗保持一致,包含完整的 PowerShell 代理配置、安装命令和登录说明。

🌐 配置终端代理

在 PowerShell 中设置代理环境变量:

💡 运行此命令
$env:HTTP_PROXY="http://127.0.0.1:10809"
$env:HTTPS_PROXY="http://127.0.0.1:10809"

💡 端口号以你的 v2rayN 实际配置为准

📝 永久生效(写入 Profile)

💡 运行此命令
# 创建/编辑 PowerShell 配置文件
notepad $PROFILE

在文件中添加:

$env:HTTP_PROXY="http://127.0.0.1:10809"
$env:HTTPS_PROXY="http://127.0.0.1:10809"

保存后每次打开终端自动生效

📦 安装 Codex CLI

💡 运行此命令
npm install -g @openai/codex

验证安装:

codex --version

看到版本号 = 安装成功 ✅

🔑 Codex 的两种使用途径

途径一:Plus / Pro 订阅

  • 订阅 ChatGPT Plus($20/月)或 Pro
  • 通过浏览器页面授权登录
  • 包含在订阅额度内
  • 上手最简单

👈 今天我们用这种方式

途径二:API Key 按需付费

  • 在 platform.openai.com 充值
  • 创建 API Key(sk-xxx)
  • 配置环境变量后使用
  • 按 token 用量计费,灵活

适合重度使用或企业场景

🪪 ChatGPT 注册与 Plus 订阅

注册部分

  • 先把网络代理配置好,确保能稳定打开 chatgpt.com
  • 可直接使用 QQ 邮箱、163、126、Outlook、Gmail 等邮箱注册
  • 国内邮箱也可以,不需要美国手机号
  • 建议不要选 Continue with GoogleContinue with AppleContinue with phone
  • 直接输入你的邮箱,然后依次设置 密码、名称、生日 即可完成注册

Plus 订阅部分

  • 注册完成后,在 同一个浏览器 中登录 ChatGPT
  • 在官网登录并完成 ChatGPT Plus 订阅流程
  • 订阅完成后,不要关闭浏览器,在同一浏览器中 新建标签页
  • 在新标签页地址栏打开:chatgpt.com/api/auth/session
  • 页面会显示一段 JSON 文本,全选并复制全部内容发给我
💡 提示:打开 /api/auth/session 后看到的 JSON 内容即为登录凭证,将页面全部内容复制发给我即可。
🔗 打开 ChatGPT 官网 📋 获取 Session 内容

🔑 通过订阅授权使用 Codex

我们选择途径一,通过 Plus/Pro 订阅授权登录

💡 运行此命令
codex
  1. 首次启动时选择 ChatGPT 订阅授权方式
  2. 终端会自动弹出浏览器登录页面
  3. 用你的 ChatGPT 账号登录并授权
  4. 回到终端,授权完成,即可使用

💡 需要 ChatGPT Plus($20/月)或 Pro 订阅

🔧 安装常见问题

问题解决方案
npm ERR! network检查终端代理是否配置正确
EACCES permission denied以管理员身份运行 PowerShell
node: command not found重启终端,或重新安装 Node.js
浏览器授权页面打不开确认系统代理已开启

⚡ 检查点:首次启动 Codex

💡 运行此命令
codex

完成浏览器授权后看到 Codex 交互界面 = 全部就绪 ✅

输入 exit 或按 Ctrl+C 退出

第2章 小结

已完成 Node.js · 终端代理 · Codex 安装 · Plus 授权

接下来学习 Codex 的使用 →

03

使用 Codex CLI

权限预设 · 常用技巧 · Slash Command


🛡️ 三档权限预设

预设 工作区文件 命令 / 网络 适用场景
Read Only 只读当前工作区;编辑文件需审批 访问网络或执行高权限操作需审批 安全第一,新手推荐
Default (current) 可读写当前工作区 可运行命令;访问互联网或编辑其他目录仍需审批 日常开发,最常用
Full Access 可编辑当前工作区外文件 可访问互联网且无需逐次审批 高信任环境,谨慎使用

💡 当前 CLI 底层仍是 sandbox + approval policy 组合,这里讲的是更容易理解的三档权限预设。

💬 交互式模式

直接输入 codex 进入交互界面:

💡 运行此命令
codex

然后直接用中文/英文输入你的需求:

> 帮我创建一个 Python 的 hello world 脚本

Codex 会读取当前目录的代码,理解上下文后给出方案

⚡ 非交互式执行

-q 参数一步到位:

💡 运行此命令
codex -q "创建一个 .gitignore 文件,包含 node_modules 和 .env"

常见权限预设对应到 CLI 参数时,可以这样理解:

# Default:可写当前工作区,按需审批
codex -a on-request -s workspace-write -q "给 README 加一个安装说明"

# CLI 便捷别名:等价于 on-request + workspace-write
codex --full-auto -q "运行测试并修复失败的用例"

# Full Access:跳过审批并绕过沙箱(非常危险)
codex --dangerously-bypass-approvals-and-sandbox -q "运行测试并修复失败的用例"

👀 审批操作

需要审批时,Codex 会先询问你是否放行:

APPROVAL REQUIRED
› 1. Yes, proceed (y)
2. Yes, and don't ask again for this command prefix (p)
3. No, and tell Codex what to do differently (esc)

有时审批面板会简化成两项:

› 1. Yes, proceed (y)
2. No, and tell Codex what to do differently (esc)
  • y — 本次批准,继续执行
  • p — 本次批准,并对当前命令前缀不再重复询问
  • esc — 这次不执行,回到对话里重新说明需求

💡 常用技巧

  • git init — Codex 在 Git 仓库中工作最佳
  • 小步迭代 — 每次给一个清晰的小任务
  • 频繁 commit — 方便回滚到任意状态
  • -q — 明确任务时直接执行,更快
  • 写好 AGENTS.md — 一劳永逸的项目指令

⌨️ Slash Command 是什么

在输入框键入 / 弹出命令面板,快速控制 Codex 行为

会话控制

/model · /approvals · /status
/new · /resume · /fork

代码审查

/diff · /review

上下文 & 工具

/compact · /mention
/mcp · /init

💡 不需要记住所有命令,输入 / 就能看到列表

🔗 打开 Codex Slash Commands 详解

📋 会话控制类命令

命令用途使用场景
/model切换模型(也可调推理强度)任务前切换模型,优化成本/质量
/approvals查看 / 调整当前审批与权限设置会话中途放宽或收紧权限
/status查看模型、审批策略、token 用量确认当前配置是否符合预期
/new开启新对话(不退出 CLI)切换任务、重置上下文
/resume恢复已保存的对话继续之前中断的工作
/fork复制当前对话为新线程并行探索不同方案

📋 代码审查与上下文命令

命令用途使用场景
/diff展示 Git diff(含未跟踪文件)提交前检查 Codex 做了哪些改动
/review让 Codex 评审工作树需要"第二双眼睛"检查改动
/compact总结对话,释放上下文 token长对话后避免上下文窗口溢出
/mention把文件附加到对话让 Codex 重点关注指定文件
/init生成 AGENTS.md 模板给项目设置持久化指令
/mcp列出 MCP 工具确认可用外部工具

🔄 推荐工作流

Slash Command 的最佳组合使用方式

/model /approvals 执行任务 /diff /review git commit
  • 对话变长 → /compact 压缩,避免模型"忘前情"
  • 想聚焦某文件 → /mention path/to/file
  • 探索另一条路 → /fork 分支对话

完整速查 → Slash 命令速查手册

⚡ 动手试试 Slash Command

codex

在 Codex 中依次输入:

> /status                  # 查看当前配置
> /model                  # 切换模型
> 帮我写一个 hello world  # 执行一个小任务
> /diff                   # 看看改了什么
> /review                 # 让 Codex 审查改动

第3章 小结

已完成 三档权限预设 · 交互/非交互 · 审批流程 · Slash Command

接下来了解 Codex Skills →

04

Codex Skills

给 Agent 安装技能包 · 渐进式披露 · 搜索安装


🧩 什么是 Skill

Skill = 给 Agent 安装的"技能包"

🤖

没有 Skill 的 Agent

只会写代码、读文件

+ 🧩 →

💪

装了 Skill 的 Agent

能做 PPT、写文档、建网页…

Skill 让 Agent 获得"领域专家"级别的能力

📐 Skill 的结构

一个 Skill 本质上是一个 Markdown 文件,包含:

---
name: frontend-design        # 技能名称
description: Create ...       # 简短描述
---

## 触发条件
当用户要求构建网页时...

## 工作流程
1. 分析需求
2. 选择技术栈
3. 生成代码

## 规则与约束
- 使用 Tailwind CSS
- 移动端优先

💡 Skill 就是一份给 AI 的"操作手册"

📁 Skill 文件夹全貌

SKILL ANATOMY
my-skill/
Skill 的根目录,所有文件和子目录都放这里。
├── SKILL.md
必需入口,定义名称、描述、触发条件和规则。
├── agents/
可选目录,放技能卡片名、描述等展示元数据。
│ └── openai.yaml
常见元数据文件,可写 display_nameshort_description
├── scripts/
脚本目录,放 Python、Shell 等可复用脚本。
├── references/
参考目录,放文档、规范、API 说明和领域知识。
└── assets/
资源目录,放模板、图片、字体或示例文件。
注:SKILL.md 必需,其他目录按需要补充。

🎯 渐进式披露(Progressive Disclosure)

Skill 不会一次性全部加载,而是按需激活

第1层 名称 + 描述 — 始终可见,帮 Agent 判断"要不要用"
第2层 完整内容 — 用户触发或 Agent 判断需要时才加载
第3层 引用资源 — Skill 执行过程中按需读取文件/模板

好处:节省上下文窗口,只在需要时才占用 token

💡 为什么不能全部加载?

❌ 全部加载

  • 50 个 Skill × 平均 2000 token
  • = 100,000 token 的上下文
  • AI 被淹没,效果变差
  • 响应速度变慢

✅ 渐进式披露

  • 只加载名称和描述
  • ~50 token × 50 个 = 2,500 token
  • 触发时才加载完整内容
  • 精准、高效

📦 Skill 的来源

层级说明示例
内置 Agent 自带,开箱即用 代码审查、Git 操作
社区 社区共享,按需安装 /pptx、/docx、frontend-design
自定义 自己编写,专属定制 企业业务流程、内部 API

💡 Skill 也类似 Claude Code 的 Skills 机制,概念相通

🔍 搜索 Skill

在 Codex 交互界面中搜索可用的 Skill:

💡 在 Codex 中输入
> /skills                  # 列出已安装的 skills
> /skills search pptx     # 搜索 PPT 相关 skill
> /skills search frontend # 搜索前端相关 skill

搜索结果会显示 Skill 名称、描述和安装方式

⭐ Skill 推荐:gstack

Garry Tan 开源的 Skill Pack。不是新模型,而是一套把产品、架构、设计、QA、发布串成完整冲刺流程的命令系统。

为什么值得装

  • 不是 prompt 合集,而是一条完整的 sprint 流程
  • 把产品定义、架构锁定、设计审查、QA 和发布串起来
  • 对独立开发者尤其有用,补齐“非编码决策”的短板

官方流程:Think → Plan → Build → Review → Test → Ship → Reflect

官方关键信息

  • README tagline:15 opinionated tools
  • 当前技能列表:27 个斜杠命令
  • 支持 Claude Code / Codex / Gemini CLI / Cursor
  • 2026-03-25 GitHub 显示约 45.5k stars
打开 gstack GitHub

🧭 Claude Code / Codex + gstack 推荐用法

推荐流程

  1. /office-hours:先追问真实痛点,重写问题定义
  2. /plan-ceo-review:挑战范围,找更大的产品机会
  3. /plan-eng-review:锁架构、数据流、测试和故障路径
  4. /plan-design-review + /design-consultation:补设计系统,减少 AI Slop
  5. /review / /qa / /ship:审查、回归、发布闭环

赶时间可以直接用 /autoplan,它会自动跑 CEO → design → eng review。

Codex 安装

git clone https://github.com/garrytan/gstack.git .agents/skills/gstack
cd .agents/skills/gstack
./setup --host codex

使用提醒

  • Windows 建议 Git Bash 或 WSL
  • 确保 bunnode 都在 PATH
  • 强项是把设计阶段流程化,不替你做最终业务拍板

🗺️ 去哪里找 Skill?

五个主流 Skill 资源平台,从官方到社区全覆盖

🌐 skills.sh 官方平台

Skill 专属搜索与发现平台,支持按功能/场景筛选,一键查看安装命令。

🤖 anthropics/skills 官方仓库

Anthropic 官方开源的 Skill 集合,涵盖前端设计、文档、AI 工作流等核心场景。

obra/superpowers 工作流增强

专为 Claude Code 打造的工作流 Skill 包,TDD、调试、计划执行等开发纪律全覆盖。

awesome-claude-skills 社区精选

社区维护的 Claude Skills awesome 清单,汇聚高质量第三方 Skill,持续更新。

🎨
42plugin · 设计类 Skills

面向设计师的 Skill 发现平台,按受众和领域筛选,快速找到适合创意工作者的 Skill。

设计方向

📥 安装 Skill

找到想要的 Skill 后,安装到项目或全局:

# 安装到当前项目
codex skills install frontend-design

# 安装到全局(所有项目可用)
codex skills install --global frontend-design

安装完成后,Codex 会自动识别并在需要时激活

💡 Skill 安装后存储在 .codex/skills/ 或全局配置目录

⚡ Skill 使用演示

安装并使用 Skill 的完整流程:

# 1. 搜索
> /skills search frontend

# 2. 安装
codex skills install frontend-design

# 3. 使用 — 直接描述需求即可
> 帮我创建一个产品展示页面,包含导航栏和卡片布局

Codex 会自动激活 frontend-design skill,按照专业工作流生成代码

第4章 小结

已完成 Skill 概念 · 结构剖析 · 渐进式披露 · 搜索/安装/使用

接下来进入场景演示 →

05

场景演示:网页构建

用 Codex CLI 从零构建一个完整网页


🎯 演示目标

用 Codex 从零生成一个产品展示网页

  • 📱 响应式布局(桌面 + 手机)
  • 🎨 现代 UI 设计(渐变、卡片、动画)
  • 📝 包含导航栏、Hero 区域、功能卡片、页脚
  • 🚀 纯 HTML + CSS + JS,无需框架

⚡ Step 1:创建项目

💡 运行此命令
mkdir my-website && cd my-website && git init

启动 Codex:

codex

⚡ Step 2:描述需求

在 Codex 中输入:

> 创建一个产品展示网页 index.html:
  - 顶部导航栏,半透明背景,固定在顶部
  - Hero 区域:大标题 + 副标题 + CTA 按钮
  - 三列功能卡片区域,悬停有动画效果
  - 页脚包含版权信息
  - 使用渐变色背景,现代扁平设计
  - 所有 CSS 写在 HTML 内部
  - 响应式,手机端单列布局

⚡ Step 3:预览和迭代

在浏览器中打开生成的文件:

# Windows
start index.html

不满意?继续对话:

> 把配色改成深色主题
> 导航栏加一个 logo 文字
> 卡片区域改成四列

Codex 会在原文件基础上修改,不会重建

⚡ Step 4:查看改动并提交

💡 运行此命令
# 查看 Codex 做了什么
git diff
git status

# 满意就提交
git add -A
git commit -m "feat: product landing page by codex"

🎉 演示回顾

📁

项目初始化

✅ 完成

🎨

网页生成

✅ 完成

🔄

迭代优化

✅ 完成

💾

Git 提交

✅ 完成

传统手写 ~2 小时 → Codex 辅助 ~10 分钟

06

Codex Desktop

图形界面版 Codex · 下载安装 · 功能介绍


🖥️ Codex Desktop 是什么

Codex Desktop = Codex CLI 的图形界面版本

💻

Codex CLI

终端命令行操作
适合开发者

🖥️

Codex Desktop

图形化界面操作
更直观、更友好

同一个 Agent 能力,不同的交互方式

📥 下载 Codex Desktop

  1. 访问 openai.com/codex-desktop
  2. 下载 Windows 版安装包(.exe
  3. 也可通过 Codex CLI 内提示的下载链接获取

⚠️ 下载页面需要开启系统代理才能访问

📦 安装与首次启动

  1. 双击安装包,按提示完成安装
  2. 确保系统代理已开启(v2rayN 正在运行)
  3. 启动 Codex Desktop
  4. 首次使用会弹出浏览器进行 ChatGPT 账号授权
  5. 授权完成后回到 Desktop,即可使用

💡 安装和使用全程都需要系统代理保持开启

🗂️ 界面功能概览

💬 对话区域

输入自然语言指令
查看 Agent 执行过程
审批文件修改和命令

📁 项目面板

选择工作目录
查看项目文件结构
查看 diff 改动

⚙️ 设置面板

切换模型
调整审批模式
配置 MCP 工具

📊 状态栏

当前模型 / 审批模式
Token 用量
会话 ID

📊 查看 Token 额度

Desktop 界面可以直观查看你的订阅额度使用情况:

  • 状态栏 — 实时显示当前会话的 token 消耗
  • 设置 → Usage — 查看本月已用 / 剩余额度
  • 模型切换 — 不同模型消耗 token 速度不同

Plus 订阅包含每月固定的使用额度

超出额度后可等待重置或升级到 Pro

🧩 在 Desktop 中管理 Skills

Desktop 提供图形化的 Skill 管理界面:

  • Skill 商店 — 浏览、搜索社区 Skills
  • 一键安装 — 点击即可安装到项目或全局
  • 已安装列表 — 查看和管理已安装的 Skills
  • Skill 详情 — 查看描述、用法、示例

💡 比 CLI 的 /skills 命令更直观,适合探索新 Skill

Desktop vs CLI 怎么选

场景推荐
初次接触 Agent,想快速体验Desktop
需要直观查看额度和管理 SkillDesktop
日常编码开发,批量操作CLI
脚本集成、CI/CD 流水线CLI
两者结合使用最佳实践 ✅

第6章 小结

已完成 Desktop 下载安装 · 界面功能 · Token 额度 · Skill 管理

接下来进入总结 →

07

总结与 Q&A

回顾要点,答疑解惑


📝 今天学到了什么

  • 网络 代理配置,稳定访问 ChatGPT / OpenAI
  • 环境 Node.js + Codex 安装 + Plus 授权
  • 使用 三档权限预设、Slash Command、常用技巧
  • Skills 结构、渐进式披露、搜索安装
  • 实战 用 Codex 从零构建网页
  • Desktop 图形界面安装、Skill 管理、额度查看

✅ 最佳实践

  • 🔰 新手先从 Read OnlyDefault 开始
  • 📂 在 Git 仓库 中使用 Codex
  • 📝 写好 AGENTS.md 省去重复解释
  • 🔄 小步迭代,每完成一步就 commit
  • 🧩 善用 Skills,让 Agent 变成领域专家

⚠️ 注意事项

✅ 推荐做法

  • 审查每次改动
  • 经常 git commit
  • 不提交敏感信息
  • 先小范围验证

❌ 避免做法

  • 盲目 Full Access
  • 不看 diff 直接 commit
  • 把密码写进代码
  • 过度依赖 AI 判断

📚 推荐资源

资源地址
Codex CLI GitHubgithub.com/openai/codex
OpenAI 官方文档platform.openai.com/docs
终端配置教程5275277.xyz/tools.html
代理工具下载5275277.xyz/app/fanqie_temp.7z

❓ Q&A

🙋

有任何问题,现在提问

🎉 恭喜完成!

你已经从"阶段一"迈入了"阶段二"

Agent 时代,终端即生产力

📖 课程资料:本文件直接分发

💬 配置教程:5275277.xyz/tools.html