Claude Code 从入门到精通：用实战项目串起 Agent Skills、MCP、Hooks、子代理与插件十五讲

1. 为什么我把简历项目拆成十五讲来练 Claude Code很多人第一次打开 Claude Code输入一句“帮我写个网页”看着它刷刷刷生成文件觉得这就是全部了。可真到项目里问题立刻冒出来它为什么有时候改文件、有时候只给建议上下文塞满了怎么办怎么让它记住我的代码规范怎么让它在改完代码后自动跑格式化这些都不是“会打字”能解决的而是要把 Claude Code 的能力一个个拆开、跑通、验证。我选的主线项目是一个个人简历网站目录就叫my-resume。它足够小小到你能一眼看懂每个文件又足够完整完整到能覆盖 HTML、CSS、JS 分离、Git 提交、代码审查、UI 还原这些真实环节。十五讲不是把文档抄一遍而是每一讲都对应一个可复现的动作你敲下命令、看到结果、确认能力生效再进入下一讲。这篇适合谁适合已经装好 Claude Code、能跑起claude命令但还没系统用过 Agent Skills、MCP、Hooks、子代理和插件的开发者。如果你连安装都还没做先去把基础环境跑通再回来跟着这条主线走。下面每一讲我都会给出目录结构、配置片段和验证步骤你照着做就能确认“这个能力到底有没有真的生效”。先建项目这是所有后续操作的根mkdir my-resume cd my-resume claude启动后先别急着写代码我们第一件事是搞清楚它到底有几种“干活模式”因为这决定了后面每一步它会不会问你、会不会自动改文件。1.1 三种权限模式默认、编辑、计划Claude Code 底部状态栏会显示当前模式。启动后默认是默认权限模式显示? for shortcuts。这时你让它改文件它会弹出三个选项Yes只批准这一次Yes, allow all edits during this session批准本次并在整个会话里自动接受后续文件编辑No拒绝。按ShiftTab可以循环切换默认 → 编辑模式accept edits on→ 计划模式plan mode on→ 回到默认。编辑模式下文件编辑不再逐次询问但注意Shell 命令比如git add .仍然会问你。这一点很多人踩坑以为进了编辑模式就全自动了结果卡在一条 git 命令上等半天。计划模式最值得新手用。它只读代码、只做规划不改文件。比如我们的index.html一开始 CSS、JS 全混在一起我切到计划模式输入“将这份个人简历网站代码拆分为3个独立文件”它会先列出步骤确认无误后再选Yes, clear context and auto-accept edits执行。规划不合理就按Esc中断重来细节要调就直接在输入框继续对话不用中断。至于--dangerously-skip-permissions它会绕过整个系统的权限提示包括删文件。我只在无网络的隔离容器里用过日常项目别碰。2. 会话管理与上下文/resume、/rename、/clear、/rewind、/compact这一组斜杠命令是 Claude Code 的“时间机器”用不好你会反复丢上下文、反复重讲需求。它们不涉及外部服务纯本地会话操作但直接决定你后面接 MCP、Hooks 时的体验顺不顺。关掉终端再回来会话不会丢。在项目目录下用claude -c直接续上上次会话或者启动后输入/resume会列出当前目录所有历史会话还能搜索。会话多了名字乱用/rename 新名字给当前会话改名——注意只能改当前会话想改历史会话得先/resume加载它再改。任务切换时用/clear重置上下文。官方建议在不相关任务之间频繁清空避免上一个任务的残留干扰下一个。我实测下来做前端改样式和做 Git 提交之间清一次Claude Code 的判断明显更准。改错了想回退用/rewind。它会列出可回滚的版本然后给你四个选项Restore code and conversation同时恢复代码和对话Restore conversation只恢复对话Restore code只恢复代码Never mind取消。要特别注意回滚只针对 Claude Code 生成的代码你手动改的文件和 Bash 命令执行结果它管不了。VS Code 插件里没有/rewind命令但把鼠标移到之前的对话上会出现一个返回小图标点它效果一样。上下文快满时状态栏会显示占用比例默认约 95% 触发自动压缩。你也可以手动/compact 保留的内容让它只保留你指定的部分。比如“保留项目规范和当前文件结构”它就会把无关的调试对话压掉。2.1 用 /init 和 /memory 固化项目规范项目一复杂Claude Code 就容易“忘记”你的约定。比如你明明把 HTML、CSS、JS 分开了下次会话它又给你混着写。解决办法是CLAUDE.md文件Claude 每次对话开始都会读它。输入/init让它根据当前项目结构生成初始CLAUDE.md。它分两级用户主目录下的全局文件对所有项目生效项目根目录下的只对当前项目生效。之后要补充规范用/memory打开对应文件编辑。我在项目级CLAUDE.md里写了这些# 项目规范 1. 代码结构HTML、CSS、JS 分开存放。 2. 代码风格使用 2 个空格缩进变量命名用驼峰命名法。 3. 工作流每次修改代码后都要进行代码审查。 4. 设计规范极简高级风格配色以黑白灰为主。写完重启会话再让它新建页面它就会按这个结构走。这一步是后面 Agent Skills 和子代理能稳定工作的前提。3. 可复制配置MCP、Hooks、Agent Skills、子代理与插件这一节是全文配置密度最高的部分每一段都可以直接复制到对应文件。路径和原文保持一致你按平台替换命令即可。3.1 安装 MCP Server以 Figma 为例MCP 让 Claude Code 能访问外部工具。安装 Figma MCP 的命令claude mcp add --transport http figma https://mcp.figma.com/mcp装完重启 Claude Code输入/mcp会列出所有 MCP。Figma MCP 需要授权访问你的 Figma 账号按提示授权后就能直接丢设计图链接让它生成代码。如果你用 Cline MCP 或 Codex 的auth.json方式接入记住三件套必须齐全Base URL、Key、Model ID缺一个都会连不上。3.2 Hooks任务完成时弹通知Hooks 让你在特定事件自动执行操作。交互式创建输入/hooks选Notification事件选 Add new matchermatcher 填*再选 Add new hook命令按平台填# Windows powershell.exe -Command [System.Reflection.Assembly]::LoadWithPartialName(System.Windows.Forms); [System.Windows.Forms.MessageBox]::Show(Claude Code needs your attention, Claude Code) # Linux notify-send Claude Code Claude Code needs your attention # macOS osascript -e display notification Claude Code needs your attention with title Claude Code保存位置三选一Project settings (local)只对当前项目且不被 Git 跟踪Project settings对当前项目且被 Git 跟踪适合团队User settings对所有项目生效。也可以直接写进~/.claude/settings.json或.claude/settings.json{ hooks: { Notification: [ { matcher: *, hooks: [ { type: command, command: powershell.exe -Command \[System.Reflection.Assembly]::LoadWithPartialName(System.Windows.Forms); [System.Windows.Forms.MessageBox]::Show(Claude Code needs your attention, Claude Code)\ } ] } ] } }再给一个自动格式化的 Hook每次编辑文件后跑 Prettier{ hooks: { PostToolUse: [ { matcher: Edit|Write, hooks: [ { type: command, command: jq -r .tool_input.file_path | xargs npx prettier --write } ] } ] } }3.3 Agent Skills给模型加一个“解释代码”技能在~/.claude/skills/下建explain-code.skill.md--- name: explain-code description: Explains code with visual diagrams and analogies. Use when explaining how code works, teaching about a codebase, or when the user asks how does this work? --- When explaining code, always include: 1. **Start with an analogy**: Compare the code to something from everyday life 2. **Draw a diagram**: Use ASCII art to show the flow, structure, or relationships 3. **Walk through the code**: Explain step-by-step what happens 4. **Highlight a gotcha**: Whats a common mistake or misconception? Keep explanations conversational. For complex concepts, use multiple analogies.重启后输入/skill能看到它。之后问“请解释这个项目是如何工作的”它会自动触发没触发就手动/skill explain-code加问题。3.4 子代理独立的代码审查员在~/.claude/agents/下建code-quality-improver.md--- name: code-quality-improver description: Reviews code for quality and best practices tools: Read, Glob, Grep model: sonnet --- You are a code quality improver. When invoked, analyze the code and provide specific, actionable feedback on quality, security, and best practices.name全局唯一tools限定它能用的内置工具model没有对应权限时会自动降级。重启后/agent能看到它输入“使用 subagent review 代码”即可触发。子代理和 Agent Skills 的区别在于Skills 是当前会话里的技能没有独立上下文子代理有独立上下文和记忆适合专注单一任务。3.5 插件把上面这些打包插件把 Agent Skills、子代理、MCP、Hooks 打包在一起方便分享和复用。独立配置适合个人和快速试验插件适合团队共享和版本化发布。官方插件市场里有 Figma、Playwright、GitHub 等插件按需安装即可。4. 验证请求确认每个能力真的生效配置写完不代表生效必须逐项验证。下面是我实际跑通的验证清单你可以照着核对。先验证会话命令。关掉终端claude -c能续上会话/resume能列出历史/rename 简历项目后名字变了/clear后上下文归零/rewind能回滚到加手机号之前的版本。再验证 Hooks。设置好 Notification 后让 Claude Code 执行一条需要确认的 Shell 命令比如git add .此时应该弹出系统通知框。如果没弹检查settings.json里的 JSON 是否合法matcher 是否写成了*。验证 Agent Skills。输入“请解释这个项目是如何工作的”观察输出是否包含类比、ASCII 图示、逐步讲解和注意事项四部分。如果它只是干巴巴列了几行说明 Skill 没触发手动/skill explain-code再试。验证子代理。输入“使用 subagent review 代码”看它是否以独立身份给出质量、安全、最佳实践三方面的反馈。如果它直接在主会话里回答说明子代理没被调用。验证 MCP。/mcp能列出 figma 且状态为已授权丢一个设计图链接过去看生成的代码还原度是否比截图方式高。验证插件。安装一个官方插件后重启/skill或/agent里能看到插件带来的新能力。如果你是通过 API 方式接入模型验证请求可以这样测curl https://taotoken.net/api/v1/chat/completions \ -H Content-Type: application/json \ -H Authorization: Bearer $TAOTOKEN_API_KEY \ -d { model: claude-sonnet, messages: [{role: user, content: ping}] }返回里能看到choices字段就说明链路通了。想直接对话验证模型可以去模型对话页面试长期做编码和 Agent 任务用 Coding Plan 更省心。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节按真实报错来遇到哪个查哪个。401 UnauthorizedKey 不对或没带上。检查Authorization: Bearer后面的 Key 是否完整环境变量$TAOTOKEN_API_KEY是否真的导出成功。用echo $TAOTOKEN_API_KEY确认一下别把 Key 写进会被 Git 跟踪的文件。local proxy failed本地代理配置有问题。检查 Base URL 是否写成了https://taotoken.net/api注意 API 地址不带 UTM 参数。如果你在settings.json里配了代理相关字段确认格式正确。reading choices报错通常是响应结构不符合预期多半是 Model ID 写错了。回到三件套检查Base URL、Key、Model ID 是否齐全且匹配。Model ID 要和实际可用的模型名一致别自己编。OAuth相关失败MCP 授权过期或回调被拦。重新/mcp走一遍授权流程确认浏览器能正常跳转回调地址。如果是 Figma MCP确认账号有对应权限。Hooks 不触发先确认settings.json是合法 JSON可以用jq . ~/.claude/settings.json校验。再看 matcher 是否匹配到了事件Notification事件对应的是需要用户注意的场景不是所有任务完成都会触发。Agent Skills 不生效确认文件放在~/.claude/skills/或项目.claude/skills/下文件名以.skill.md结尾frontmatter 里的name和description都填了。改完必须重启 Claude Code。子代理不生效确认~/.claude/agents/下的文件 frontmatter 完整tools里的工具名拼写正确。model填了没权限的模型会自动降级但name重复会导致加载失败。6. 把十五讲串成你的日常流程十五个知识点跑完你会发现它们不是孤立的。权限模式决定它怎么动手会话命令决定上下文怎么管CLAUDE.md决定它记不记得规范MCP 决定它能不能碰外部工具Hooks 决定它什么时候提醒你Agent Skills 和子代理决定它能不能专注特定任务插件决定这些能不能打包复用。我的日常流程是这样的进项目先claude -c续上会话任务切换前/clear改完代码靠 PostToolUse Hook 自动跑 Prettier需要审查时调code-quality-improver子代理UI 还原用 Figma MCP规范变更用/memory更新CLAUDE.md。这一套跑顺之后Claude Code 才真正从“会打字的工具”变成“能协作的工程伙伴”。如果你还没配好 Key先去 API Keys 页面拿一个再对着接入文档把 Base URL、Key、Model ID 三件套填对。想先感受模型能力去模型对话页面聊两句准备长期做编码和 Agent 任务直接上 Coding Plan。配置这件事跑通一次后面都是复制粘贴。