前言
你盼世界，我盼望你无bug。Hello 大家好，我是霖呆呆！
最近尝试在用 Claude Code 写项目，建仓库、修 bug、代码审查什么的都用它。但说实话，用是用了，总感觉自己就是个"面向弹窗编程"选手 —— 它弹窗我就点确认，它问我就说好，至于它到底是怎么运作的？权限模式有几种？Hooks 能干嘛？emmm...😅
直到我发现三元写了个 skill（名为 sigma） ，安装完后在 claudeCode 里使用 /sigma 你想学习的知识 命令，它就能变身 AI 1v1 家教，基于 Bloom's 2-Sigma 方法论来教你任何知识。于是我就让它来教我 Claude Code 本身。
是的，我让 Claude Code 当老师，教我怎么用 Claude Code。有点套娃，但效果出奇的好 🤯
这篇文章就是我把整个学习过程整理出来的，10 个核心概念，从 agentic loop 到实战工作流，全给你安排上。
一、核心交互模型：Claude Code 不是聊天机器人
上来第一课，AI 老师就问了我一个灵魂问题：
当你给 Claude Code 一个任务（比如"修复这个 bug"），你觉得它内部是怎样决定接下来该做什么的？
我随口答了一下，但老师追问了：它并没有预先把整个代码库加载到上下文里，它是怎么"追溯定位"的？
它就会告诉你，Claude Code 本质上是一个 agentic loop（代理循环） ：
1你的指令 → LLM 推理 → 调用工具 → 拿到结果 → LLM 再推理 → 再调工具 → ... → 最终回复你 2
它手上有这些工具：
- Glob — 按文件名模式搜索（比如
**/*login*.tsx） - Grep — 按内容搜索（比如搜 "console.log"）
- Read — 读文件内容
- Bash — 运行 shell 命令
- Edit/Write — 修改/创建文件
跟 ChatGPT 网页版最大的区别是：普通聊天是单轮的（输入 → 输出），而 Claude Code 是多轮自主循环的。你只发了一条指令，但中间可能发生了 20 次工具调用，每次之间都有一次 LLM 推理在做决策。
💡 Tips： Glob 是按文件名搜，Grep 是按文件内容搜。
来个🌰感受一下。假设你说"把项目里所有的 console.log 删掉"，它会：
- Grep
console.log→ 直接拿到所有包含它的文件和行号 - Read 相关文件（确认上下文，避免误删）
- Edit 逐个删除
而且第 2、3 步可以对多个文件并行执行，因为没有依赖关系。
还有个实用小原则：能直接从系统拿到的信息，优先用 Bash。比如查 Node.js 版本，别费劲去 Grep package.json，直接 node -v 就完事了 👇
1# ❌ 绕远路 2grep "engines" package.json 3 4# ✅ 直接问系统 5node -v 6
二、权限模式：别无脑 YOLO
第二课讲的是安全。Claude Code 有三种权限模式：
| 模式 | 读文件 | 写文件 | Bash 命令 |
|---|---|---|---|
| Default（默认） | ✅ 自动 | ⚠️ 需确认 | ⚠️ 需确认 |
| Auto-edit | ✅ 自动 | ✅ 自动 | ⚠️ 需确认 |
| YOLO | ✅ 自动 | ✅ 自动 | ✅ 自动 |
老师问我：你同事说"YOLO 模式太爽了，确认弹窗烦死了"，你怎么建议他？
我的回答是：建议用 Auto-edit 模式，读写自动，但 Bash 还是要确认。或者用默认模式 + 把常用命令加到 allow 列表。
🚨 YOLO 模式为什么危险？ 因为 Bash 基本等于完全控制你的电脑 —— 安装包、发网络请求、修改系统配置、甚至
git push --force把远程仓库搞乱。这就是为什么即使 Auto-edit 放开了文件操作，Bash 仍然需要确认。
实际使用中，最舒服的配置是 Default 模式 + allow 规则：
1// settings.json 2{ 3 "allow": [ 4 "npm test", 5 "npm run build", 6 "git status" 7 ] 8} 9
这几个命令风险都不高，加进去以后就不会弹窗了，既安全又不烦人 👍
三、CLAUDE.md：给 AI 立规矩
CLAUDE.md 就是给 Claude Code 的项目级指令，每次对话开始时自动读取。
重点是它支持多层级：
1~/.claude/CLAUDE.md ← 用户级（你个人的偏好，所有项目通用） 2项目根目录/CLAUDE.md ← 项目级（团队共享，提交到 git） 3子目录/CLAUDE.md ← 子项目级（前端/后端各自的规范） 4
当你在前端子目录工作时，三层会合并生效，子目录优先级最高。
老师问我：如果一个团队的 monorepo 里有前端和后端，你怎么安排？
这个简单：公共目录放通用规则（提交规范、PR 模板），前端和后端各放各的（技术栈、代码风格）。
💡 CLAUDE.md 的内容要足够具体，让 LLM 能直接据此做决策。
来看个对比 👇
1# ❌ 太笼统 2写好的代码 3 4# ✅ 具体可执行 5- 提交信息格式用 conventional commits（feat:、fix: 等） 6- 所有 React 组件必须用 TypeScript 函数式组件 7- className 命名使用【组件名-具体功能】格式 8
不过这里有一点可以优化的，那就 CLAUDE.md 并不建议写太多的内容，太长的话中间段落可能会> 被忽略，一般建议在 200 行以内。可以来把不同类型且独立的规则放在
.claude/rules/下，> 关于这部分可以查看 CLAUDE.md 进阶手册:防忽略、防过载、防团队甩锅
四、提示词技巧：告诉 AI 做什么，也要告诉它不做什么
这一课是我得分最高的（90%），因为太实用了。
看这两个提示词：
1# ❌ 模糊 2帮我改一下登录页面 3 4# ✅ 精准 5登录页面 src/pages/Login.tsx 的表单提交后没有 loading 状态， 6用户会重复点击。加一个 loading state，提交时禁用按钮并显示 spinner。 7
好的提示词三要素：
- 指明位置 — 给出文件路径，减少搜索轮次
- 描述问题 — 说清现象
- 说明期望 — 具体要做什么
但还有一个很多人忽略的点：约束边界。
1# ❌ 可能改太多 2重构 src/api/userService.ts，这个文件太大了，拆分一下 3 4# ✅ 明确边界 5src/api/userService.ts 有 800 行，请只把其中的验证逻辑 6（validateEmail, validatePassword, validateUsername） 7提取到新文件 src/api/validation.ts，其他不要动 8
告诉 Claude Code "不要做什么"和"要做什么"同样重要，尤其是大范围操作时。
💡 反复出现的指令放 CLAUDE.md，一次性的具体需求写在提示词里。 想想看，如果你每次都要提醒"用 TypeScript"、"用 Tailwind"，那就该放 CLAUDE.md 或者 rules 里了。影响范围在个人就放用户级，在团队就放项目级。
五、Slash Commands：不只是快捷方式
Claude Code 里 / 开头的命令叫 slash commands，比如：
/model— 切换 Claude 模型（Opus、Sonnet、Haiku）/skill— 查看和管理 skills/add-dir— 把一个已有目录添加到工作上下文中/sigma— 就是我现在正在用的 AI 家教
🚨 我在这踩了两个坑：
/add-dir不是创建文件夹！是把一个已存在的目录添加到 Claude Code 的上下文里。比如你在前端项目里，但需要参考后端的 API 定义，用/add-dir /path/to/backend就行。/model只能切 Claude 系列模型，不能切到 GPT。Claude Code 是 Anthropic 的工具，只用自家模型。（这里其实也有一些偏差了，虽然原生不直接支持非 Anthropic 模型，但通过本地网关 / 兼容层或者其它操作也可以切换其他主流模型）
那 slash commands 的本质是什么？老师问了我一个很好的问题：/sigma 触发后发生的事情，和你直接说一句话，在 agentic loop 里有什么区别？
这个其实很容易想到答案：本质上就是多了更多上下文。Slash command 是预设好的提示词模板 + 额外上下文注入到 agentic loop 里，LLM 的推理机制没变，只是输入更丰富了。
六、Hooks：从"建议"到"保证"
这个概念是我觉得最有价值的之一。
Hooks 是在 Claude Code 生命周期的特定节点插入你自定义的 shell 命令：
| Hook | 时机 |
|---|---|
| PreToolUse | 工具调用之前 |
| PostToolUse | 工具调用之后 |
| Notification | 发出通知时 |
| Stop | 完成回复停下时 |
来个🌰：你想每次编辑文件后自动跑 prettier 格式化，就在 PostToolUse 里匹配 Edit|Write，执行 prettier --write。
但这里有个灵魂问题：这个需求我也可以写在 CLAUDE.md 里啊，比如"每次修改文件后请运行 prettier"。有什么区别？
| 方式 | 执行者 | 可靠性 |
|---|---|---|
| CLAUDE.md | LLM 理解后主动执行 | 可能被忽略（尤其 CLAUDE.md 很长时） |
| Hook | harness 自动执行 | 100% 可靠，不经过 LLM |
🚨 这就是 Hook 的核心价值：把"希望 LLM 做的事"变成"系统保证做的事"。
可以在实际项目中这么配：
1PostToolUse + Edit|Write → prettier 格式化 2PostToolUse + Edit|Write → eslint 检查 3PreToolUse + Edit|Write → TypeScript 类型检查（写入前就拦截） 4
第三个特别有意思 —— 在写入之前就做类型检查，比写完再查更安全。
七、MCP Servers：给 AI 装外挂
MCP（Model Context Protocol）是连接 LLM 和外部工具的通用协议。
Claude Code 内置工具（Read、Edit、Bash 等）能做的事毕竟有限。如果你想让它查公司内部系统的数据、操作数据库、访问设计稿怎么办？这就是 MCP 的用武之地。
关键理解：MCP 工具和内置工具对 LLM 来说使用方式完全一样，都在 agentic loop 里按需调用。区别只在于：
- 内置工具 → Claude Code 自带
- MCP 工具 → 你提前配置和声明，Claude Code 启动时加载
对于前端开发者，这些 MCP 比较实用：
| MCP | 用途 |
|---|---|
| Figma MCP | 直接读取设计稿，还原 UI |
| GitHub MCP | 查看 PR、创建 issue、review 代码 |
| Sentry MCP | 查线上报错和堆栈 |
| 数据库 MCP | 直接查数据库验证数据 |
| Playwright MCP | 操控浏览器做 E2E 测试 |
八、多代理并行：快是快，但别翻车
Claude Code 可以通过 subagent 分发子任务并行执行，用 git worktree 让每个 subagent 在独立的代码副本上工作。
听起来很美好对不对？来做个判断题 👇
| 任务 | 能并行吗？ |
|---|---|
| 给 5 个独立的 React 页面写 Storybook stories | ✅ 可以 |
| 重构数据库 schema 并更新所有 API 端点 | ❌ 有依赖 |
| ESLint→Biome 迁移 + CSS Modules→Tailwind 迁移 | ❌ 不行！ |
第三个为什么是不行呢？ 😬 乍一看这两个迁移逻辑上完全独立，但仔细想想 —— ESLint 迁移要改 JS/TSX 文件的代码风格，Tailwind 迁移也要改同样的 JSX 文件（把 className={styles.xxx} 改成 Tailwind classes）。两个 agent 同时改同一批文件，必冲突。
🚨 判断能否并行的关键不只是"任务逻辑是否独立"，还要看是否触碰同一批文件。
九、IDE 集成：不只是终端里的工具
Claude Code 支持多种环境：
- CLI（终端） — 最原始的方式
- VS Code 扩展 — 集成在编辑器侧边栏
- JetBrains 插件 — WebStorm、IntelliJ 等
- Desktop App — 独立桌面应用
- Web App — claude.ai/code
底层的 LLM 和工具能力完全一样，区别在于交互体验。比如在 VS Code 里，Claude Code 能感知你当前打开的文件、你选中的代码。CLI 没有这些上下文。
为什么在 IDE 里比网页聊天复制粘贴更高效？一句话：它能直接修改本地文件，你只需要做确认和检查，不用来回复制粘贴了。
十、实战工作流：把所有概念串起来
最后一课是综合题：从零搭建一个 React + TypeScript 项目的完整流程。
我的回答基本把前面学的全用上了 👇
第一步：配置 CLAUDE.md
1# 项目概述 2这是一个 xxx 功能的项目，PRD 链接：xxx 3 4# 技术栈 5React + TypeScript + Vite 6 7# 代码规范 8- 所有组件使用 TypeScript 函数式组件 9- className 使用【组件名-功能】格式 10- 提交信息使用 conventional commits（feat:、fix: 等） 11 12# 常用命令 13- 启动开发服务器：`npm run dev` 14- 运行测试：[`npm test`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.test.md) 15- 运行单个测试：[`npm test --testPath=home`](https://xplanc.org/primers/document/zh/10.Bash/90.%E5%B8%AE%E5%8A%A9%E6%89%8B%E5%86%8C/EX.test.md) 16 17# 后台API文档 18参考`docs/api-spec.yaml`。 19 20# <important> 21# 功能完成后，核心部分，例如 /xxx/xxx 必须编写单元测试并验证通过 22# </important> 23
第二步：配置权限
用 Auto-edit 模式 + 常用命令加入 allow：
1{ 2 "permissions": { "allow": ["npm test", "npm run build", "git status"] } 3} 4
第三步：配置 Hooks
1PreToolUse + Write|Edit → TypeScript 类型检查 2PostToolUse + Write|Edit → prettier 格式化 + eslint 检查 3
第四步：开发
用精准的提示词下达任务，告诉它文件位置、问题现象、期望结果。互不影响的任务可以并行。
第五步：提交 & 审查
Claude Code 可以通过 gh 命令创建 PR，也可以用 /review 审查代码。
不过很明显，这个回答也只能是让AI老师知道了我这节课是有认真听的，实际开发中肯定还是得视项目的复杂度、结合具体需求来处理。
学习成绩单
| 概念 | 得分 |
|---|---|
| 核心交互模型 | 80% |
| 权限模式与安全模型 | 85% |
| CLAUDE.md 项目配置 | 82% |
| 高效提示词技巧 | 90% 🏆 |
| Slash Commands | 80% |
| Hooks：自动化工作流 | 88% |
| MCP Servers | 92% 🏆 |
| 多代理与并行执行 | 85% |
| IDE 集成 | 82% |
| 实战工作流 | 90% 🏆 |
| 平均 | 85% |
最大的收获不是某个具体概念，而是从"会用"到"理解原理"的转变。知道 agentic loop 是怎么跑的，你就能写出更好的提示词；知道 Hook 和 CLAUDE.md 的区别，你就能做出更好的配置决策。
后语
知识无价，支持原创！这篇文章就介绍到这里。
如果你也在用 Claude Code 但总感觉没发挥出它的全部实力，试试让它当一次你的老师。套娃虽套娃，但效果还行的 😂
喜欢霖呆呆的小伙伴还希望可以关注霖呆呆的公众号 LinDaiDai
我会不定时的更新一些前端方面的知识内容以及自己的原创文章🎉。
你的鼓励就是我持续创作的主要动力 😊。
