从概念认知到动手实操的 Agent 入门指南
2026 · 实操工作坊
Agent = 能自主行动的 AI,不只是聊天
| 维度 | Web 端对话(ChatGPT 网页) | 本地 Agent(Codex CLI) |
|---|---|---|
| 交互方式 | 你问一句,它答一句 | 你给目标,它自己规划执行 |
| 能力边界 | 只能生成文字/图片 | 能读写文件、运行命令、调用工具 |
| 工作环境 | 浏览器沙箱,与本地隔离 | 直接在你的项目目录中工作 |
| 上下文 | 只有对话历史 | 整个项目代码 + 对话 |
| 输出物 | 文字回复,需手动复制 | 直接生成/修改代码文件 |
核心区别: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 生态强、企业级 |
| Gemini 3 | Gemini CLI | 1M+ 上下文、免费额度 |
今天我们用 Codex CLI 来入门 Agent
稳定访问 ChatGPT / OpenAI 的前提
ChatGPT 和 OpenAI 在国内无法直接访问
C:\Tools\v2rayN\v2rayN.exe 启动💡 建议不要放在桌面,避免以后误删
📝 记住你的本地代理端口(通常是 10809)
打开浏览器,访问:
https://chatgpt.com
能打开 ChatGPT 页面 = 网络配置成功 ✅
| 问题 | 解决方案 |
|---|---|
| 浏览器可以但终端不行 | 终端需要单独配置代理环境变量 |
| v2rayN 启动失败 | 以管理员身份运行 |
| 节点连不上 | 换一个节点试试 |
已完成 代理安装 · 节点连接 · 系统代理开启
接下来搭建环境、安装 Codex →
Node.js + 终端代理 + Codex CLI + 账号授权
系统代理覆盖
需要手动配置
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 实际配置为准
# 创建/编辑 PowerShell 配置文件
notepad $PROFILE
在文件中添加:
$env:HTTP_PROXY="http://127.0.0.1:10809"
$env:HTTPS_PROXY="http://127.0.0.1:10809"
保存后每次打开终端自动生效
npm install -g @openai/codex
验证安装:
codex --version
看到版本号 = 安装成功 ✅
👈 今天我们用这种方式
适合重度使用或企业场景
chatgpt.comchatgpt.com/api/auth/session/api/auth/session 后看到的 JSON 内容即为登录凭证,将页面全部内容复制发给我即可。
我们选择途径一,通过 Plus/Pro 订阅授权登录
💡 运行此命令codex
💡 需要 ChatGPT Plus($20/月)或 Pro 订阅
| 问题 | 解决方案 |
|---|---|
npm ERR! network | 检查终端代理是否配置正确 |
EACCES permission denied | 以管理员身份运行 PowerShell |
node: command not found | 重启终端,或重新安装 Node.js |
| 浏览器授权页面打不开 | 确认系统代理已开启 |
codex
完成浏览器授权后看到 Codex 交互界面 = 全部就绪 ✅
输入 exit 或按 Ctrl+C 退出
已完成 Node.js · 终端代理 · Codex 安装 · Plus 授权
接下来学习 Codex 的使用 →
权限预设 · 常用技巧 · 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 会先询问你是否放行:
有时审批面板会简化成两项:
git init — Codex 在 Git 仓库中工作最佳-q — 明确任务时直接执行,更快在输入框键入 / 弹出命令面板,快速控制 Codex 行为
会话控制
/model · /approvals · /status
/new · /resume · /fork
代码审查
/diff · /review
上下文 & 工具
/compact · /mention
/mcp · /init
💡 不需要记住所有命令,输入 / 就能看到列表
| 命令 | 用途 | 使用场景 |
|---|---|---|
/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 的最佳组合使用方式
/compact 压缩,避免模型"忘前情"/mention path/to/file/fork 分支对话完整速查 → Slash 命令速查手册
codex
在 Codex 中依次输入:
> /status # 查看当前配置
> /model # 切换模型
> 帮我写一个 hello world # 执行一个小任务
> /diff # 看看改了什么
> /review # 让 Codex 审查改动
已完成 三档权限预设 · 交互/非交互 · 审批流程 · Slash Command
接下来了解 Codex Skills →
给 Agent 安装技能包 · 渐进式披露 · 搜索安装
Skill = 给 Agent 安装的"技能包"
🤖
没有 Skill 的 Agent
只会写代码、读文件
💪
装了 Skill 的 Agent
能做 PPT、写文档、建网页…
Skill 让 Agent 获得"领域专家"级别的能力
一个 Skill 本质上是一个 Markdown 文件,包含:
---
name: frontend-design # 技能名称
description: Create ... # 简短描述
---
## 触发条件
当用户要求构建网页时...
## 工作流程
1. 分析需求
2. 选择技术栈
3. 生成代码
## 规则与约束
- 使用 Tailwind CSS
- 移动端优先
💡 Skill 就是一份给 AI 的"操作手册"
display_name、short_description。SKILL.md 必需,其他目录按需要补充。Skill 不会一次性全部加载,而是按需激活
好处:节省上下文窗口,只在需要时才占用 token
| 层级 | 说明 | 示例 |
|---|---|---|
| 内置 | Agent 自带,开箱即用 | 代码审查、Git 操作 |
| 社区 | 社区共享,按需安装 | /pptx、/docx、frontend-design |
| 自定义 | 自己编写,专属定制 | 企业业务流程、内部 API |
💡 Skill 也类似 Claude Code 的 Skills 机制,概念相通
在 Codex 交互界面中搜索可用的 Skill:
💡 在 Codex 中输入> /skills # 列出已安装的 skills
> /skills search pptx # 搜索 PPT 相关 skill
> /skills search frontend # 搜索前端相关 skill
搜索结果会显示 Skill 名称、描述和安装方式
Garry Tan 开源的 Skill Pack。不是新模型,而是一套把产品、架构、设计、QA、发布串成完整冲刺流程的命令系统。
为什么值得装
官方流程:Think → Plan → Build → Review → Test → Ship → Reflect
官方关键信息
推荐流程
/office-hours:先追问真实痛点,重写问题定义/plan-ceo-review:挑战范围,找更大的产品机会/plan-eng-review:锁架构、数据流、测试和故障路径/plan-design-review + /design-consultation:补设计系统,减少 AI Slop/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
使用提醒
bun 和 node 都在 PATH五个主流 Skill 资源平台,从官方到社区全覆盖
Skill 专属搜索与发现平台,支持按功能/场景筛选,一键查看安装命令。
Anthropic 官方开源的 Skill 集合,涵盖前端设计、文档、AI 工作流等核心场景。
专为 Claude Code 打造的工作流 Skill 包,TDD、调试、计划执行等开发纪律全覆盖。
社区维护的 Claude Skills awesome 清单,汇聚高质量第三方 Skill,持续更新。
面向设计师的 Skill 发现平台,按受众和领域筛选,快速找到适合创意工作者的 Skill。
找到想要的 Skill 后,安装到项目或全局:
# 安装到当前项目
codex skills install frontend-design
# 安装到全局(所有项目可用)
codex skills install --global frontend-design
安装完成后,Codex 会自动识别并在需要时激活
💡 Skill 安装后存储在 .codex/skills/ 或全局配置目录
安装并使用 Skill 的完整流程:
# 1. 搜索
> /skills search frontend
# 2. 安装
codex skills install frontend-design
# 3. 使用 — 直接描述需求即可
> 帮我创建一个产品展示页面,包含导航栏和卡片布局
Codex 会自动激活 frontend-design skill,按照专业工作流生成代码
已完成 Skill 概念 · 结构剖析 · 渐进式披露 · 搜索/安装/使用
接下来进入场景演示 →
用 Codex CLI 从零构建一个完整网页
用 Codex 从零生成一个产品展示网页:
mkdir my-website && cd my-website && git init
启动 Codex:
codex
在 Codex 中输入:
> 创建一个产品展示网页 index.html:
- 顶部导航栏,半透明背景,固定在顶部
- Hero 区域:大标题 + 副标题 + CTA 按钮
- 三列功能卡片区域,悬停有动画效果
- 页脚包含版权信息
- 使用渐变色背景,现代扁平设计
- 所有 CSS 写在 HTML 内部
- 响应式,手机端单列布局
在浏览器中打开生成的文件:
# Windows
start index.html
不满意?继续对话:
> 把配色改成深色主题
> 导航栏加一个 logo 文字
> 卡片区域改成四列
Codex 会在原文件基础上修改,不会重建
# 查看 Codex 做了什么
git diff
git status
# 满意就提交
git add -A
git commit -m "feat: product landing page by codex"
📁
项目初始化
✅ 完成
🎨
网页生成
✅ 完成
🔄
迭代优化
✅ 完成
💾
Git 提交
✅ 完成
传统手写 ~2 小时 → Codex 辅助 ~10 分钟
图形界面版 Codex · 下载安装 · 功能介绍
Codex Desktop = Codex CLI 的图形界面版本
💻
Codex CLI
终端命令行操作
适合开发者
🖥️
Codex Desktop
图形化界面操作
更直观、更友好
同一个 Agent 能力,不同的交互方式
openai.com/codex-desktop.exe)⚠️ 下载页面需要开启系统代理才能访问
💡 安装和使用全程都需要系统代理保持开启
💬 对话区域
输入自然语言指令
查看 Agent 执行过程
审批文件修改和命令
📁 项目面板
选择工作目录
查看项目文件结构
查看 diff 改动
⚙️ 设置面板
切换模型
调整审批模式
配置 MCP 工具
📊 状态栏
当前模型 / 审批模式
Token 用量
会话 ID
Desktop 界面可以直观查看你的订阅额度使用情况:
Plus 订阅包含每月固定的使用额度
超出额度后可等待重置或升级到 Pro
Desktop 提供图形化的 Skill 管理界面:
💡 比 CLI 的 /skills 命令更直观,适合探索新 Skill
| 场景 | 推荐 |
|---|---|
| 初次接触 Agent,想快速体验 | Desktop |
| 需要直观查看额度和管理 Skill | Desktop |
| 日常编码开发,批量操作 | CLI |
| 脚本集成、CI/CD 流水线 | CLI |
| 两者结合使用 | 最佳实践 ✅ |
已完成 Desktop 下载安装 · 界面功能 · Token 额度 · Skill 管理
接下来进入总结 →
回顾要点,答疑解惑
✅ 推荐做法
❌ 避免做法
| 资源 | 地址 |
|---|---|
| Codex CLI GitHub | github.com/openai/codex |
| OpenAI 官方文档 | platform.openai.com/docs |
| 终端配置教程 | 5275277.xyz/tools.html |
| 代理工具下载 | 5275277.xyz/app/fanqie_temp.7z |
🙋
有任何问题,现在提问
你已经从"阶段一"迈入了"阶段二"
Agent 时代,终端即生产力
📖 课程资料:本文件直接分发
💬 配置教程:5275277.xyz/tools.html
Codex CLI · Gemini CLI · Claude Code — Windows 一站式安装指南
依次下载并安装以下三个软件,全部使用默认设置。安装 Node.js 时请勾选 "Add to PATH"。
node -v 和 npm -v 验证是否成功。在 Windows Terminal 中打开 PowerShell 7 标签页,逐条执行以下命令:
# 创建 PowerShell 配置文件(如果不存在)
if (!(Test-Path -Path $PROFILE)) { New-Item -ItemType File -Path $PROFILE -Force }
# 用记事本打开配置文件
notepad $PROFILE
# --- Force UTF-8 for all console IO ---
$utf8 = [System.Text.UTF8Encoding]::new($false)
try { chcp 65001 | Out-Null } catch {}
[Console]::InputEncoding = $utf8
[Console]::OutputEncoding = $utf8
$OutputEncoding = $utf8
$PSDefaultParameterValues['*:Encoding'] = 'utf8'
# ===========================================================
# V2rayN Proxy Config (Mixed Port 10808)
# ===========================================================
# -----------------------------------------------------------
# GLOBAL SETTINGS
# -----------------------------------------------------------
if (Test-Path Alias:curl) { Remove-Item Alias:curl }
if (Test-Path Alias:wget) { Remove-Item Alias:wget }
$V2RAY_PORT = "10808"
$PROXY_HTTP = "http://127.0.0.1:$V2RAY_PORT"
$PROXY_SOCKS5 = "socks5://127.0.0.1:$V2RAY_PORT"
# -----------------------------------------------------------
# ENABLE PROXY
# -----------------------------------------------------------
function proxy {
Write-Host ""
Write-Host "Configuring Proxy (Mixed Port 10808)..." -ForegroundColor Cyan
$env:all_proxy = $PROXY_HTTP
$env:ALL_PROXY = $PROXY_HTTP
$env:http_proxy = $PROXY_HTTP
$env:https_proxy = $PROXY_HTTP
$env:HTTP_PROXY = $PROXY_HTTP
$env:HTTPS_PROXY = $PROXY_HTTP
Write-Host " [Env Vars] Set to $PROXY_HTTP OK" -ForegroundColor Green
if (Get-Command git -ErrorAction SilentlyContinue) {
git config --global http.proxy $PROXY_SOCKS5
git config --global https.proxy $PROXY_SOCKS5
Write-Host " [Git] Set to $PROXY_SOCKS5 OK" -ForegroundColor Green
}
if (Get-Command npm -ErrorAction SilentlyContinue) {
npm config set proxy $PROXY_HTTP > $null 2>&1
npm config set https-proxy $PROXY_HTTP > $null 2>&1
Write-Host " [NPM] Configured OK" -ForegroundColor Green
}
if (Get-Command yarn -ErrorAction SilentlyContinue) {
yarn config set proxy $PROXY_HTTP > $null 2>&1
yarn config set https-proxy $PROXY_HTTP > $null 2>&1
Write-Host " [Yarn] Configured OK" -ForegroundColor Green
}
Write-Host ""
Write-Host "Proxy IS READY." -ForegroundColor Black -BackgroundColor Green
Write-Host "---------------------------------------------------------------" -ForegroundColor DarkGray
Write-Host " > Type 'proxy' to Enable Proxy" -ForegroundColor Green
Write-Host " > Type 'unproxy' to Disable Proxy" -ForegroundColor Yellow
Write-Host " > Type 'check-proxy' to View Settings" -ForegroundColor Cyan
Write-Host " > Type 'test-proxy' to Test Connectivity (Google Check)" -ForegroundColor Magenta
Write-Host "---------------------------------------------------------------" -ForegroundColor DarkGray
Write-Host ""
}
# -----------------------------------------------------------
# DISABLE PROXY
# -----------------------------------------------------------
function unproxy {
Remove-Item Env:\all_proxy -ErrorAction SilentlyContinue
Remove-Item Env:\ALL_PROXY -ErrorAction SilentlyContinue
Remove-Item Env:\http_proxy -ErrorAction SilentlyContinue
Remove-Item Env:\https_proxy -ErrorAction SilentlyContinue
Remove-Item Env:\HTTP_PROXY -ErrorAction SilentlyContinue
Remove-Item Env:\HTTPS_PROXY -ErrorAction SilentlyContinue
if (Get-Command git -ErrorAction SilentlyContinue) {
git config --global --unset http.proxy 2>$null
git config --global --unset https.proxy 2>$null
}
if (Get-Command npm -ErrorAction SilentlyContinue) {
npm config delete proxy > $null 2>&1
npm config delete https-proxy > $null 2>&1
}
if (Get-Command yarn -ErrorAction SilentlyContinue) {
yarn config delete proxy > $null 2>&1
yarn config delete https-proxy > $null 2>&1
}
Write-Host ""
Write-Host "Proxy DISABLED." -ForegroundColor Yellow
Write-Host ""
}
# -----------------------------------------------------------
# CHECK STATUS
# -----------------------------------------------------------
function check-proxy {
Write-Host ""
Write-Host "PROXY STATUS" -ForegroundColor Cyan
Write-Host "------------" -ForegroundColor Gray
if ($env:http_proxy) {
Write-Host "Status: " -NoNewline
Write-Host "ENABLED" -ForegroundColor Green
Write-Host "Port: $env:http_proxy" -ForegroundColor Gray
} else {
Write-Host "Status: " -NoNewline
Write-Host "DISABLED" -ForegroundColor Yellow
}
Write-Host ""
}
# -----------------------------------------------------------
# TEST CONNECTIVITY
# -----------------------------------------------------------
function test-proxy {
Write-Host ""
Write-Host "Diagnostics (Port 10808)..." -ForegroundColor Cyan
$test_port = 10808
try {
$tcp = New-Object System.Net.Sockets.TcpClient
$connect = $tcp.BeginConnect("127.0.0.1", $test_port, $null, $null)
if ($connect.AsyncWaitHandle.WaitOne(500, $false)) {
Write-Host " [Port $test_port] : LISTENING OK" -ForegroundColor Green
$tcp.Close()
} else {
Write-Host " [Port $test_port] : NOT FOUND X" -ForegroundColor Red
Write-Host " Make sure v2rayN is running!" -ForegroundColor Yellow
return
}
} catch {
Write-Host " Error checking port." -ForegroundColor Red
return
}
Write-Host " [Google] : " -NoNewline
try {
$request = [System.Net.WebRequest]::Create("https://www.google.com")
$request.Method = "HEAD"
$request.Timeout = 3000
$proxyObj = New-Object System.Net.WebProxy("http://127.0.0.1:$test_port")
$request.Proxy = $proxyObj
$response = $request.GetResponse()
Write-Host "SUCCESS ($($response.StatusCode)) OK" -ForegroundColor Green
$response.Close()
} catch {
Write-Host "FAILED X" -ForegroundColor Red
Write-Host " Error: $($_.Exception.Message)" -ForegroundColor DarkGray
}
Write-Host ""
}
Write-Host "Proxy Tools Loaded (Mixed Port)." -ForegroundColor DarkCyan
proxy
# 重新加载配置
. $PROFILE
# 检查代理是否生效
check-proxy
# 测试代理连通性
test-proxy
check-proxy 显示 ENABLED 即配置成功。之后可用 proxy / unproxy 随时开关。确保代理已开启(终端显示 ENABLED),然后分别安装以下三个工具。
# 安装 Codex
npm i -g @openai/codex
# 验证安装
codex --version
# 启动并登录
codex
# 安装 Gemini CLI
npm install -g @google/gemini-cli
# 验证安装
gemini --version
# 启动并登录
gemini
# 方式 A:官方安装脚本(推荐)
irm https://claude.ai/install.ps1 | iex
# 方式 B:npm 安装(已标记 deprecated,仍可用)
npm install -g @anthropic-ai/claude-code
# 验证安装
claude --version
# 启动并登录
claude
进入你的项目文件夹,运行对应命令即可开始 AI 编程:
# 进入项目目录
cd your-project-folder
# 启动任意一个 AI 编程工具
codex
gemini
claude