AI 及周边工具分享交流

从网络、到账号注册、会员升级，到本地 Agent 使用全流程入门指南

2026 · 实操工作坊

今天的目标

1. 🌐 解决网络基础，稳定访问 ChatGPT / Claude
2. 🪪 账号注册 + Plus / Pro 订阅升级
3. 🔧 搭建依赖环境，安装 Codex CLI & Claude Code
4. 💻 权限模式 · 常用技巧 · Slash Command
5. 🧩 Skills — 结构 · 渐进式披露 · 搜索安装
6. 🚀 场景演示 — 用 Agent 从零构建网页

今天的路线

Agent 是什么

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

核心区别：Agent 不只是"说"，更能"做"

AI 使用的两个阶段

三大 AI 公司与 Agent 工具

今天主要带大家走通 Codex 与 Claude Code 的本地 Agent 使用

为什么需要代理

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

📥 下载代理工具

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

📦 安装

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

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

🌐 开启系统代理

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

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

🧭 三种代理模式怎么选

不是一种代理解决所有问题 —— 浏览器、CLI、特殊软件，需求不同

💡 对 Codex / Claude Code 来说，环境变量代理 + 工具 config 注入 是最稳定的组合。

⚙️ Codex / Claude Code 代理设置

让 CLI 子进程明确拿到代理变量，避免"浏览器能上、终端不行"

[shell_environment_policy]
inherit = "core"

[shell_environment_policy.set]
http_proxy  = "http://127.0.0.1:10808"
https_proxy = "http://127.0.0.1:10808"
HTTP_PROXY  = "http://127.0.0.1:10808"
HTTPS_PROXY = "http://127.0.0.1:10808"
all_proxy   = "socks5://127.0.0.1:10808"
ALL_PROXY   = "socks5://127.0.0.1:10808"
no_proxy    = "localhost,127.0.0.1,::1"
NO_PROXY    = "localhost,127.0.0.1,::1"

{
  "env": {
    "HTTP_PROXY":  "http://127.0.0.1:10808",
    "HTTPS_PROXY": "http://127.0.0.1:10808",
    "http_proxy":  "http://127.0.0.1:10808",
    "https_proxy": "http://127.0.0.1:10808",
    "NO_PROXY": "localhost,127.0.0.1,::1",
    "no_proxy": "localhost,127.0.0.1,::1"
  }
}

• 端口以 v2rayN 实际 mixed 端口为准（常见 10808 / 10809）
• Codex 的 shell_environment_policy 让 Codex 启的 PowerShell / npm / git 子进程都自动拿到代理
• Claude Code 的 env 字段只支持 HTTP/HTTPS，不要写 SOCKS

🔧 排障清单

# 常用检查命令
netstat -ano | findstr 10808
curl.exe -I https://api.openai.com
curl.exe https://chatgpt.com/cdn-cgi/trace

第1章 小结

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

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

📦 安装 Node.js

Codex CLI 需要 Node.js ≥ 22

winget install OpenJS.NodeJS.LTS

安装完成后重启终端，然后验证：

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

教程包含完整的 PowerShell 代理配置、Codex / Gemini / Claude Code 安装命令与登录说明。

🌐 配置终端代理

在 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 & Claude Code

# 安装
npm install -g @openai/codex

# 验证
codex --version

# 方式 A · 官方脚本（推荐）
irm https://claude.ai/install.ps1 | iex

# 方式 B · npm 安装（已 deprecated）
npm install -g @anthropic-ai/claude-code

# 验证
claude --version

看到版本号 = 安装成功 ✅  两者可同时安装、并行使用

🔑 Codex 的两种使用途径

🪪 ChatGPT 注册与 Plus 订阅

🔑 通过订阅授权登录

codex

claude

💡 全程需保持系统代理或环境变量代理开启，浏览器才能完成回调

🔧 安装常见问题

第2章 小结

已完成 Node.js · 终端代理 · Codex / Claude Code 安装 · 订阅授权

接下来学习 Codex 的使用 →

🛡️ Codex 三档权限预设

💡 进入 Codex 后用 /approvals 切换；config.toml 里 approvals_reviewer = "auto_review" 即默认开启自动复核。

🛡️ Claude Code 权限模式

💡 Shift+Tab 在 Default → Accept Edits → Plan Mode 之间循环切换；Bypass 仅命令行参数启用。

💬 交互式模式

直接输入 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 会先询问你是否放行：

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

• y — 本次批准，继续执行
• p — 本次批准，并对当前命令前缀不再重复询问
• esc — 这次不执行，回到对话里重新说明需求

💡 常用技巧

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

⌨️ Slash Command 是什么

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

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

📋 会话控制类命令

📋 代码审查与上下文命令

🔄 推荐工作流

Slash Command 的最佳组合使用方式

• 对话变长 → /compact 压缩，避免模型"忘前情"
• 想聚焦某文件 → /mention path/to/file
• 探索另一条路 → /fork 分支对话

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

第3章 小结

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

接下来了解 Codex Skills →

🧩 什么是 Skill

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

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

📐 Skill 的结构

一个 Skill 本质上是一个 Markdown 文件，包含：

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

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

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

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

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

📁 Skill 文件夹全貌

🎯 渐进式披露（Progressive Disclosure）

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

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

💡 为什么不能全部加载？

📦 Skill 的来源

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

🔍 搜索 Skill

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

> /skills                  # 列出已安装的 skills
> /skills search pptx     # 搜索 PPT 相关 skill
> /skills search frontend # 搜索前端相关 skill

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

⭐ Skill 推荐：gstack

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

🧭 Claude Code / Codex + gstack 推荐用法

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

🗺️ 去哪里找 Skill？

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

📥 安装 Skill

找到想要的 Skill 后，安装到项目或全局：

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

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

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

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

第4章 小结

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

接下来进入场景演示 →

🎯 演示目标

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

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

🎉 演示回顾

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

🖥️ Codex Desktop 是什么

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

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

📥 下载 Codex Desktop

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

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

📦 安装与首次启动

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

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

🗂️ 界面功能概览

📊 查看 Token 额度

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

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

🧩 在 Desktop 中管理 Skills

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

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

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

Desktop vs CLI 怎么选

第6章 小结

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

接下来进入总结 →

📝 今天学到了什么

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

✅ 最佳实践

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

⚠️ 注意事项

📚 推荐资源

❓ Q&A

🙋

有任何问题，现在提问

🎉 恭喜完成！

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

Agent 时代，终端即生产力