Developer Reference · May 2026
Claude Code
& Codex
操作指南
覆盖全部命令、快捷键、MCP 插件、Prompt 模板与工作流最佳实践。边开发边查,随时提效。
01
安装 & 快速上手
两者均可
Claude Code
bash
# 安装(需要 Node.js 18+) npm install -g @anthropic-ai/claude-code # 或 macOS/Linux 一键安装 curl -fsSL https://claude.ai/install.sh | sh # 验证版本 claude --version # 登录(Pro/Max 账户,无需 API Key) claude auth login # 进入项目目录后启动 cd your-project && claude
始终在项目目录里启动,Claude Code 把当前目录作为项目根目录读取 CLAUDE.md 和 .claude/ 配置。
Codex CLI
bash
# npm 安装(全平台) npm install -g @openai/codex # Homebrew (macOS) brew install --cask codex # 验证版本 codex --version # 浏览器登录(默认) codex # API Key 登录 printenv OPENAI_API_KEY | codex login --with-api-key # 无头/SSH 环境登录 codex login --device-auth
Codex CLI 用 Rust 构建,内置 OS 级沙箱(macOS: Seatbelt / Linux: Bubblewrap),默认阻止网络访问。
02
CLI 核心命令 & Flags
启动方式
| claude | 交互式 REPL 会话 |
| claude "任务描述" | 带初始提示启动 |
| claude -c | 继续上一次会话 |
| claude -r <id> | 按 ID 恢复指定会话 |
| claude -n "name" | 以名称开启新会话 |
| claude -w branch | 在隔离 git worktree 运行 |
| claude --from-pr 42 | 恢复关联 PR #42 的会话 |
非交互 / 脚本模式
| claude -p "query" | 单次查询并退出(CI/CD 用) |
| --output-format json | 输出 JSON(含 cost、session_id) |
| --output-format stream-json | 流式 JSON 输出 |
| --max-turns 5 | 限制最大对话轮数 |
| --no-session-persistence | 不保存会话(CI 临时用) |
| cat file | claude -p | 管道输入文件内容 |
模型 & 推理控制
| --model opus | 指定模型(opus/sonnet/haiku) |
| --effort high | 推理力度: low/medium/high/xhigh/max |
| --think | 启用扩展推理(Extended Thinking) |
| --bare | 跳过 hooks/插件/auto-memory |
| --debug "api,hooks" | 调试模式(可按分类过滤) |
| --debug-file /tmp/log | 调试日志写入文件 |
权限 & 安全
| --permission-mode auto | 自动模式(AI 决定是否审批)v2.1.85+ |
| Shift+Tab | 循环切换: 默认→自动接受→Plan→auto |
| --allowedTools "Read,Edit" | 仅允许指定工具 |
| --add-dir src/ | 追加可写工作目录 |
| --system-prompt "..." | 覆盖系统提示 |
| --append-system-prompt | 追加到默认系统提示 |
Subagent / Agent
| --agent code-reviewer | 使用 .claude/agents/ 中的代理 |
| claude agents list | 列出所有可用代理 |
| @agent-name 执行任务 | 在会话中直接调用代理 |
| --workers 4 | 并行 worker 数量 |
其他实用命令
| claude update | 更新到最新版本 |
| claude auth status | 检查认证状态 |
| claude mcp list | 列出已配置 MCP 服务器 |
| claude mcp add --transport http name URL | 添加 MCP 服务器 |
| claude doctor | 诊断安装健康状态 |
| claude mcp serve | 将 Claude Code 暴露为 MCP Server |
启动方式
| codex | 交互式 TUI 会话 |
| codex "任务" | 带初始提示启动 |
| codex -C /path | 指定工作目录启动 |
| codex -m gpt-5.4 | 指定模型启动 |
| codex -p profile | 使用命名配置档案 |
| codex --search | 启用实时网络搜索 |
非交互 / 脚本模式
| codex exec "任务" | 非交互执行(等同 claude -p) |
| codex e --json "任务" | JSON 输出(换行分隔) |
| codex exec -o file.txt | 最终回复写入文件 |
| codex review | 非交互代码审查 |
| codex apply | 将最新 diff 应用为 git apply |
| codex resume | 恢复上一次会话 |
沙箱 & 权限
| -s read-only | 只读沙箱(安全探索) |
| -s workspace-write | 读写项目目录(默认) |
| -s danger-full-access | 完全访问+网络危险 |
| -a untrusted | 每次操作都询问 |
| --full-auto | workspace-write + on-request 组合 |
| --yolo | 无沙箱无审批危险 |
其他子命令
| codex fork | Fork 会话到新线程 |
| codex mcp | 管理 MCP 服务器 |
| codex mcp-server | 以 MCP Server 模式运行 |
| codex sandbox "cmd" | 在沙箱内执行命令 |
| codex cloud | 浏览/应用 Codex Cloud 任务 |
| codex features list | 列出所有功能开关 |
03
斜杠命令 (/) 速查
在会话中输入
/ 可看到全部命令并实时过滤。Claude Code 有 50+ 内建命令 + 5 个捆绑 Skills + 自定义命令。🔁 会话管理
| /clear | 清空对话历史(保留 token 空间) |
| /compact | 压缩对话(超 80% 上下文时用) |
| /resume | 选择恢复历史会话 |
| /fork [name] | 从当前点 Fork 出新会话 |
| /rename [name] | 重命名会话 |
| /rewind | 回退代码+对话到历史检查点 |
| /export [file] | 导出对话为纯文本 |
🤖 模型 & 设置
| /model [opus|sonnet|haiku] | 切换模型(立即生效) |
| /effort [level] | 调整推理强度 low→maxv2.1.76 |
| /fast [on|off] | Opus 快速模式(约 2x 费用) |
| /config | 打开设置界面 |
| /theme | 切换颜色主题 |
| /color [red|blue...] | 设置提示栏颜色v2.1.70 |
| /vim | 切换 Vim / 普通编辑模式 |
📁 项目 & 代码
| /init | 生成 CLAUDE.md 项目配置文件 |
| /memory | 编辑/查看 CLAUDE.md 记忆 |
| /diff | 交互式查看未提交的 diffv2.0 |
| /add-dir <path> | 追加工作目录 |
| /permissions | 查看/更新工具权限 |
| /plan [desc] | 进入 Plan 规划模式(只读) |
| /security-review | 安全漏洞分析v2.1.70 |
📊 数据 & 调试
| /cost | 查看当前 token 用量与费用 |
| /usage | 查看套餐限额与速率 |
| /stats | 可视化日使用量、连续打卡等 |
| /context | 上下文使用率色块图v2.1.14 |
| /insights | 生成会话分析报告 |
| /doctor | 安装健康诊断 |
| /hooks | 查看 Hook 配置 |
🔌 MCP & 工具链
| /mcp | 管理 MCP 服务器连接 |
| /plugin | 浏览/安装/卸载插件 |
| /skills | 列出所有可用 Skills |
| /ide | 管理 VS Code/JetBrains 集成 |
| /tasks | 查看后台任务列表 |
| /remote-control [name] | 允许从 claude.ai 控制会话v2.1.51 |
📦 捆绑 Skills
| /batch "指令" | 并行大规模修改(最多 30 个 worktree) |
| /simplify | 重构:消除重复,简化逻辑 |
| /loop | 持续执行任务直到通过测试 |
| /debug [desc] | 系统化调试当前问题 |
| /claude-api | 加载 Anthropic API/SDK 参考文档 |
| /btw "问题" | Claude 处理时问侧边问题不影响对话v2.0 |
🔁 会话控制
| /clear | 重置 UI 和对话 |
| /compact | 压缩对话释放 token |
| /new | 同会话中开始新对话 |
| /resume | 恢复保存的对话 |
| /fork | 克隆当前对话到新线程 |
| /copy | 复制最新输出到剪贴板 |
| /exit / /quit | 退出 Codex CLI |
⚙️ 配置 & 模型
| /model | 切换模型和推理强度 |
| /fast [on|off] | GPT-5.4 快速模式开关 |
| /permissions | 设置工具访问权限 |
| /personality [style] | 设置风格: friendly/pragmatic/none |
| /theme | 语法高亮主题 |
| /statusline | 配置底部状态栏 |
| /keymap | 检查/修改键盘快捷键 |
📁 代码 & 项目
| /init | 生成 AGENTS.md 项目配置 |
| /review | 代码审查工作树变更 |
| /plan | 只读探索规划模式 |
| /diff | 显示含未追踪文件的 diff |
| /mention | 附加文件到对话 |
| /agent | 切换活跃 agent 线程 |
| /ps | 查看后台终端列表 |
📊 状态 & 调试
| /status | 会话配置和 token 用量 |
| /mcp | 列出已配置 MCP 工具 |
| /experimental | 切换实验性功能 |
| /debug-config | 打印配置层级诊断 |
| /feedback | 提交日志给维护者 |
04
键盘快捷键
macOS 用户注意:Alt/Option 快捷键需要终端配置。iTerm2: Settings → Profiles → Keys → Left/Right Option key 设为
Esc+。VS Code: 设置 "terminal.integrated.macOptionIsMeta": true。CtrlC
中断当前响应CtrlF
立即终止所有后台 Agent(连按两次确认)CtrlT
切换任务列表显示CtrlG
在外部编辑器($EDITOR)编辑长 PromptCtrlR
反向搜索历史命令CtrlS
搜索范围切换(全局/项目/当前会话)ShiftTab
循环权限模式: 默认 → 自动接受 → Plan → AutoShiftEnter
换行(不提交),输入多行 PromptAltT
切换 Extended Thinking(扩展推理)AltP
打开模型选择器AltM
循环切换权限模式AltB
向后移动一个单词AltF
向前移动一个单词EscEsc
打开回滚菜单(比 Ctrl+C 更好的撤销)Tab
接受自动补全建议↑↓
浏览输入历史@
快速引用文件(模糊搜索)!
进入 bash 模式,直接执行 shell 命令?
全屏视图内显示快捷键帮助最实用的三个:
1.
2.
3.
1.
Esc Esc 双击 — 比 Ctrl+C 更好,可以回滚代码+对话到上一个检查点2.
Ctrl+G — 在真正的编辑器里写长 Prompt,写完保存发送3.
Ctrl+F — 快速杀死失控的后台 AgentCtrlC
取消当前操作(双击退出)CtrlD
退出 Codex(双击强制退出)CtrlL
清空终端屏幕CtrlG
在外部编辑器编辑 PromptCtrlR
反向搜索历史(v0.121+)Alt,
降低推理深度(v0.124+)Alt.
提高推理深度(v0.124+)Tab
排队后续提示(agent 运行中)Enter
执行中插入新指令EscEsc
编辑上一条消息Esc
关闭导航抽屉↑↓
浏览草稿历史@
模糊搜索附加文件!
直接执行本地 shell 命令使用
/keymap 在 TUI 内检查和自定义快捷键绑定。修改后无需重启即可生效。
05
模型选择策略
claude-haiku-4-5
速度最快、成本最低。简单任务、快速修复、代码格式化。
⚡ 极快
省钱首选
claude-sonnet-4-6
平衡模型,绝大多数日常开发任务。Pro/Max5 默认模型。$3/$15 per MTok。
⚡ 快
日常推荐
claude-opus-4-7
最强模型(2026 SOTA),复杂多步规划、架构设计、困难 Bug。默认 xhigh 推理。
🐢 慢
高难任务
推理强度 (Effort Level)
| low | 简单问题/查询 |
| medium | 均衡(Opus 4.6 默认) |
| high | 复杂调试、架构 |
| xhigh | Opus 4.7 专用,编程/Agentic 默认推荐新 |
| max | 仅本会话,极限推理(仅 Opus 4.6/4.7) |
典型会话消耗:Haiku: $0.10–0.45 / Sonnet: $0.20–0.80 / Opus: $0.50–2.25。使用
/cost 查看当前会话费用。gpt-5.4-mini
轻量快速,简单编辑、代码问答、低成本批处理。
⚡ 极快
省钱首选
gpt-5.3-codex
专为编程任务优化,代码生成与理解能力突出。
⚡ 中速
代码专用
gpt-5.4
最强推理,复杂架构设计、多文件重构、深度分析。
🐢 慢
高难任务
06
配置文件
CLAUDE.md / AGENTS.md
📄 CLAUDE.md — Claude Code 项目记忆
放在项目根目录,每次启动自动加载。是 Claude Code 的"项目大脑"。
📁 CLAUDE.md — 最佳实践模板
# 项目名称
简短描述这个项目是什么。
## 技术栈
- Node.js 20 + TypeScript strict
- Next.js 15 App Router
- Prisma + PostgreSQL
- Tailwind + shadcn/ui
## 常用命令
- 开发: `npm run dev`
- 测试: `npm test`
- 构建: `npm run build`
- Lint: `npm run lint -- --fix`
## 代码规范
- 所有新文件使用 TypeScript strict
- 每个新函数写单元测试
- API 端点必须有 OpenAPI 注解
## 禁止事项
- 不要直接提交到 main 分支
- 不要使用 any 类型
- 不要硬编码 secret 或 API Key
## 文件结构
src/app/ # Next.js 页面
src/components/ # 可复用组件
src/lib/ # 工具函数
src/server/ # 服务端逻辑
📁 文件系统结构
tree
your-project/ ├── CLAUDE.md # 项目级记忆(提交到 git) ├── .mcp.json # MCP 服务器配置 └── .claude/ ├── settings.json # 项目权限/hooks(提交) ├── settings.local.json # 个人设置(加入 .gitignore) ├── skills/ # 项目级 Skills ├── agents/ # 专用子代理 └── commands/ # 自定义斜杠命令 ~/.claude/ # 全局个人配置 ├── CLAUDE.md # 全局个人记忆 ├── settings.json ├── skills/ # 个人 Skills └── keybindings.json # 自定义快捷键
⚙️ settings.json 示例
json
{
"permissions": {
"allow": [
"Read", "Edit", "Write",
"Bash(npm run *:*)",
"Bash(git status:*)",
"Bash(git diff:*)"
]
},
"hooks": {
"PostToolUse": [{
"matcher": "Edit|Write",
"hooks": [{
"type": "command",
"command": "npx prettier --write $CLAUDE_FILE_PATH"
}]
}]
}
}
🤖 自定义 Subagent 示例 — .claude/agents/code-reviewer/AGENT.md
markdown
--- name: code-reviewer description: 代码提交前进行安全和质量审查。在代码变更后自动调用。 tools: Read, Grep, Glob, Bash model: sonnet color: orange --- 你是一位资深代码审查工程师。审查时关注: - 安全漏洞(SQL 注入、XSS、CSRF) - 错误处理是否完整 - 是否存在硬编码 secret - 性能问题 - 输入验证 # 调用方式 @code-reviewer 检查我最新的修改
07
MCP 服务器推荐
两者均支持
MCP(Model Context Protocol)让 AI 工具直接与外部服务交互。Claude Code 自 2026 早期起默认使用工具懒加载,减少约 95% 上下文占用。添加命令:
claude mcp add --transport http name URL🐙 GitHub MCP 官方
PR 管理、Issue 跟踪、代码搜索、Actions 状态直接在终端操作
mcp.github.com
🧠 Memory MCP
知识图谱式持久化记忆,让 AI 记住项目历史和决策
@modelcontextprotocol/server-memory
🗄️ PostgreSQL MCP
自然语言查询数据库,schema 探索,SQL 生成与执行
@modelcontextprotocol/server-postgres
🌐 Playwright MCP
浏览器自动化,截图,UI 测试,网页爬取
@playwright/mcp
📁 Filesystem MCP
安全文件系统访问,支持精细权限控制
@modelcontextprotocol/server-filesystem
🔍 Context7 MCP
实时拉取最新库文档,避免使用过期 API 写法
context7.com/mcp
🐛 Sentry MCP
直接查询 Sentry 错误日志、traces,定位线上问题
sentry.io/mcp
☁️ AWS MCP
AWS 服务查询、资源管理、CloudWatch 日志分析
awslabs.github.io/mcp
📊 Datadog MCP
Metrics、Logs、APM 数据直接注入 AI 上下文
datadoghq.com/mcp
🎯 Linear MCP
Issue 创建、项目追踪、Sprint 管理命令行化
linear.app/mcp
🔎 Brave Search MCP
实时网络搜索,研究最新技术文档
brave.com/search-mcp
🧩 Everything MCP
MCP 参考服务器,包含 prompts、resources、tools 示例
@modelcontextprotocol/server-everything
bash — .mcp.json 配置示例
{
"mcpServers": {
"github": {
"type": "http",
"url": "https://mcp.github.com"
},
"memory": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-memory"]
},
"postgres": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-postgres",
"postgresql://localhost/mydb"]
}
}
}
08
必装插件 & Skills
Claude Code
Skills 是 2026 年的新标准。Skills 文件夹放在
.claude/skills/(项目级)或 ~/.claude/skills/(个人全局)。每个 Skill 包含一个 SKILL.md 说明文件,Claude 按需懒加载,100+ Skills 不影响上下文。🏗️ feature-dev 89K+ 安装
7 阶段结构化功能开发流程:需求→探索→架构→实现→测试→审查→文档
/feature-dev "实现用户登录"
🎨 frontend-design
高质量前端 UI 生成,避免 AI 审美平庸,Tailwind + shadcn/ui 最佳实践
/frontend-design "设计登录页面"
📋 /batch
大规模并行修改,自动分解为 5-30 单元,每单元独立 worktree 执行
/batch "将 src/ 从 JS 迁移到 TS"
🔄 /simplify
消除重复代码,简化逻辑,保持功能不变的智能重构
/simplify "优化 utils.ts"
🔁 /loop
持续执行任务直到测试通过,自动化 TDD 红绿重构循环
/loop "让所有单元测试通过"
🔐 code-review
安全审查 Skill:注入攻击、认证漏洞、数据暴露,OWASP 规范
.claude/skills/code-review/
📖 Context Hub MCP
多源实时文档:Anthropic、OpenAI、Vercel 等官方文档实时注入
context7 MCP 配置
📝 docx / pdf / pptx
Anthropic 官方 Skills:生成 Word/PDF/PPT 文档,内置最佳实践
~/.claude/skills/public/
🔍 /security-review
分析待提交变更的安全漏洞:注入、认证问题、数据泄露内建
/security-review
创建自定义 Skill: 在
.claude/skills/my-skill/SKILL.md 放入指令文件。Claude 按需加载,使用 /skills 查看全部可用 Skills。
09
Prompt 模板速查
通用
高效 Prompt 三要素:① 明确目标(做什么)② 约束条件(不要什么)③ 验收标准(怎么算完成)。点击各模板展开查看。
🏗️ 新功能开发Feature
实现 [功能名称]:
需求:
- [具体要求 1]
- [具体要求 2]
技术约束:
- 使用 [技术栈/框架]
- 遵循项目的 [规范]
- 不要修改 [不相关的文件]
验收标准:
- [ ] [测试条件 1]
- [ ] [测试条件 2]
先给我一个实现方案,确认后再开始写代码。
🐛 调试 BugDebug
问题描述:[描述现象]
复现步骤:
1. [步骤]
2. [步骤]
期望行为:[应该是什么]
实际行为:[实际是什么]
相关文件:@[file1] @[file2]
请先定位根本原因,再给出最小化修复方案。不要修改其他无关逻辑。
♻️ 代码重构Refactor
重构 @[file/directory]:
目标:
- 提高可读性 / 减少重复 / 拆分职责
- [具体重构目标]
约束:
- 保持所有现有测试通过
- 不改变外部 API 接口
- 每次修改后运行 npm test 验证
先分析现有问题,提出重构方案,我确认后再执行。
🧪 写测试Test
为 @[file] 编写全面的单元测试:
测试框架:[Jest / Vitest / pytest]
覆盖要求:
- 正常路径(happy path)
- 边界条件(边界值、空值、极值)
- 错误情况(异常、网络失败等)
- Mock 外部依赖
测试文件命名:[file].test.[ts|js]
🎨 前端 UI 生成UI/UX
创建 [组件名称] 组件:
设计要求:
- 风格:[现代简洁 / 专业商务 / 活泼明亮]
- 主色:[颜色]
- 响应式:支持移动端
技术要求:
- 使用 Tailwind CSS + shadcn/ui
- TypeScript 严格模式
- 无障碍(ARIA 标签)
交互:
- [交互行为 1]
- [交互行为 2]
参考 @[existing-component] 的代码风格。
📐 架构评审Architecture
评审 @[directory] 的架构设计:
关注点:
- 可扩展性(预计 [X] 倍流量增长)
- 可维护性(团队规模 [N] 人)
- 性能瓶颈
- 安全隐患
请给出:
1. 当前问题清单(按严重程度)
2. 具体改进建议
3. 推荐的重构路径
📝 代码文档Docs
为 @[file] 添加完整文档:
要求:
- JSDoc / TSDoc 注释每个公共函数
- 参数类型和说明
- 返回值说明
- 使用示例(复杂函数)
- 副作用说明
语言:中文注释(或英文,根据项目规范)
不要修改实现逻辑,只添加文档。
🚀 CI/CD 脚本DevOps
用 claude -p 非交互模式在 CI 中运行:
# 代码审查(输出 JSON)
gh pr diff $PR_NUMBER | claude -p \
--append-system-prompt "你是安全工程师,重点检查安全漏洞" \
--output-format json \
--allowedTools "Read,Grep" \
"审查这个 PR 的安全问题" > audit.json
# 多步骤 CI 流水线
SESSION=$(claude -p "分析测试失败原因" \
--output-format json | jq -r '.session_id')
claude --resume "$SESSION" -p "修复你识别的问题"
10
工作流进阶技巧
🔀 Git Worktree 并行开发
bash
# 在独立 worktree 运行(不影响主分支) claude -w feature/auth # 带 tmux 面板同时运行多任务 claude -w feature/auth --tmux # /batch 自动并行(Claude Code) /batch "将 src/ 所有类组件迁移到函数组件"
📌 上下文管理黄金法则
| 何时 /compact | 上下文 > 80%(用 /context 查看),且任务未完成 |
| 何时 /clear | 切换到全新任务,不需要之前上下文 |
| @文件引用 | 明确引用相关文件,而非让 AI 猜测 |
| CLAUDE.md | 把重复说明的内容放进去,每次自动加载 |
🤖 Subagent 最佳实践
yaml — .claude/agents/reviewer/AGENT.md
--- name: reviewer description: 代码变更后用于安全审查。对修改敏感文件时自动调用。 model: sonnet color: orange --- 你是安全专家。关注 OWASP Top 10。 # 手动调用 @reviewer 检查 auth/ 目录的最新改动
⚙️ Hooks 自动化
json — settings.json
{
"hooks": {
"PostToolUse": [{ // 写文件后自动格式化
"matcher": "Edit|Write",
"hooks": [{"type":"command",
"command":"npx prettier --write $CLAUDE_FILE_PATH"}]
}],
"PreToolUse": [{ // git 提交前运行测试
"matcher": "Bash(git commit*)",
"hooks": [{"type":"command",
"command":"npm test -- --passWithNoTests"}]
}]
}
}
🔒 Auto Mode 自动权限(v2.1.85+)
bash
# 启动时开启 Auto Mode claude --enable-auto-mode # 会话中循环切换(Shift+Tab) # 默认 → 自动接受编辑 → Auto → Plan # Auto Mode 自动阻断的危险操作: # curl | bash、force-push main、 # 生产环境 deploy、IAM 变更等
熔断器:会话中连续 3 次或累计 20 次被阻断,自动回退到手动审批模式。
🌐 Remote 会话 (Claude Code Max)
bash
# 允许从 claude.ai 控制本地会话 /remote-control my-session # 从 web 拉取远程会话到本地继续 claude --teleport <session-id> # 访问 claude.ai/code 管理所有会话
11
前端审美提升工具包
实用技巧
📚 推荐技术栈组合
| 基础样式 | Tailwind CSS v4 — 原子化,配合 AI 生成效率最高 |
| 组件库 | shadcn/ui — 可复制代码,完全可定制,无黑盒 |
| 动效 | Framer Motion / Motion for React — 流畅动画 |
| 图标 | Lucide React — 统一风格,轻量,shadcn 原配 |
| 图表 | Recharts / Tremor — React 友好,样式可控 |
| 字体 | Geist + Geist Mono(Vercel)/ Inter + JetBrains Mono |
| 设计参考 | ui.shadcn.com / origin-ui.com / 21st.dev |
✨ 提升 AI 生成 UI 质量的 Prompt 关键词
在 UI 相关 Prompt 中加入这些关键描述,可显著提升生成质量:
视觉风格:
"modern", "clean minimalist", "subtle shadows", "micro-interactions", "smooth transitions", "consistent spacing", "8px grid system"
细节描述:
"hover states", "focus rings for a11y", "skeleton loading states", "empty states with illustration", "error states with helpful messages"
禁止描述:
❌ 不要说"简单做一个",❌ 不要省略交互细节,❌ 不要忽略移动端
"modern", "clean minimalist", "subtle shadows", "micro-interactions", "smooth transitions", "consistent spacing", "8px grid system"
细节描述:
"hover states", "focus rings for a11y", "skeleton loading states", "empty states with illustration", "error states with helpful messages"
禁止描述:
❌ 不要说"简单做一个",❌ 不要省略交互细节,❌ 不要忽略移动端
🔧 修复 AI 生成 UI 常见问题
| 布局混乱 | 明确说明:使用 flex/grid,给出具体列数和间距 |
| 颜色廉价感 | 指定色板:主色 + 辅色 + 中性色,不超过 3 种主色 |
| 字体层次乱 | 明确标题/正文/标签的尺寸和粗细(如 2xl/base/sm) |
| 交互无反馈 | 要求:hover、active、loading、disabled 四态全部实现 |
| 间距不一致 | 约束:所有间距使用 Tailwind 默认值,不自定义 px |
| 代码臃肿 | 要求:提取重复 UI 为子组件,最大化 Tailwind 复用 |
🚫 防止代码臃肿策略
在 CLAUDE.md 中加入这些约束,让 Claude 每次都遵守:
CLAUDE.md 代码质量约束
## 代码质量红线 - 单文件不超过 300 行,超出请拆分 - 函数不超过 30 行,超出请提取子函数 - 重复代码 3 次以上必须提取到 utils - 优先使用项目已有组件,不要重新造轮子 - 不要在组件内写内联样式(style={{}}) - 类型定义统一放在 types/ 目录
12
Claude Code vs Codex CLI 完整对比
参考
| 维度 | Claude Code | Codex CLI |
|---|---|---|
| 开发商 | Anthropic | OpenAI |
| 底层语言 | TypeScript / Node.js | Rust(更快启动) |
| 默认模型 | Sonnet 4.6(Pro/Max) | gpt-5.4-mini |
| 最强模型 | Opus 4.7(1M token 上下文) | gpt-5.4 |
| 沙箱安全 | 权限系统 + Auto Mode | OS 原生沙箱(Seatbelt/Bubblewrap) |
| 项目配置 | CLAUDE.md + .claude/ 目录 | AGENTS.md + config.toml |
| 斜杠命令 | 50+ 内建 + 5 Skills + 自定义 | ~30 内建 + 自定义 |
| MCP 支持 | ✅ 完整(懒加载,节省 95% 上下文) | ✅ 完整 |
| 插件生态 | 丰富(Skills + 社区插件市场) | 成长中 |
| 子代理 | 专用 Subagent 系统 | /agent 切换 |
| 并行执行 | /batch(最多 30 worktree) | - |
| IDE 集成 | VS Code + JetBrains + Chrome | VS Code IDE 扩展 |
| 远程会话 | claude.ai/code(Max 套餐) | Codex Cloud |
| Vim 模式 | ✅ /vim | ✅ /vim(TUI modal editing) |
| Voice 输入 | ✅ /voice(20+ 语言) | - |
| 推理控制 | 5 级(low/medium/high/xhigh/max) | 5 级(minimal/low/medium/high/xhigh) |
| 付费方式 | Pro/Max 订阅 或 API Key | ChatGPT Plus/Pro 或 API Key |
| 开源 | 部分开源 | ✅ 完全开源(Rust) |
| 最适合 | 深度 Anthropic 生态 / 复杂 Agentic 工作流 | 安全性要求高 / OpenAI 模型偏好 |