Claude Code 从 0 到 1 全攻略 —— MCP / SubAgent / Agent Skill / Hook / 图片 / 上下文处理/ 后台任务 / 权限 ......

最近 Claude Code 非常火 相信关注编程 Agent 的同学 应该都已经上手体验过了 不过要把这个工具从入门 真正落地到生产环境 光会敲几个简单的命令是远远不够的 所以这期视频 咱们不整虚的 直接带大家从头到尾 把 Claude Code 的实战流程彻底走一遍 这个视频分为以下 4 个部分

第一 环境搭建与基础交互 第二 复杂任务处理与终端控制 第三 多模态与上下文管理 最后是高级功能的扩展与定制 大家可以看到屏幕上密密麻麻的知识点和时间戳 这期视频含金量绝对拉满 只要你花点时间看完这期视频 我保证你能彻底吃透 Claude Code 把它变成你手心里最顺手的生产力工具

另外我知道市场上还有其他类似的编程 Agents 比如 Codex OpenCode 等等 其实它们无论从功能还是使用上 都跟 Claude Code 没有太大区别 所以我相信在看完了这期视频之后 你一定会一通百通 同类的产品基本上都能直接上手 好 话不多说 那我们直接开始 首先我们来到 Claude Code 的官方网站 就是这个页面了

然后我们点击这里的复制按钮 再回到终端粘贴 这样就开始安装 Claude Code 了 安装完成后我们试着用它来做一个待办软件 首先使用命令 mkdir 来创建一个目录 名字叫做 my-todo 就好了 我们所有的代码都放在这个目录里面 然后我们进入到这个目录里 再执行 claude 这个命令来打开 Claude Code 刚进来的时候

Claude Code 可能会提示你进行登录 如果你像我这样没有被提醒的话 可以执行 /login 命令来主动触发登录流程 可以看出 Claude Code 官方 一共是提供了两种标准的接入方式 第一种是订阅制 如果你购买了 Claude 的 Pro 或者是 Max 会员 那就直接选这个就好了 第二个是使用官方的 API Key 按照 Token 的用量计费 用多少花多少

我是订阅用户 所以我选择第一项 选择了之后 Claude Code 会弹出一个网页 提示我授权 我们同意 可以看出登录成功 我们关掉当前页面 回到终端这里 按下回车 登录就结束了 这里顺便提一下 有些同学可能没有办法使用 Claude 的官方订阅或者是 API 这个时候你也可以使用国产模型来驱动 Claude Code

比如说是 GLM MiniMax 等等 Claude Code 是一个通用的编程 Agent 它本身其实并不跟 Claude 模型绑定 你完全可以使用其他的模型来驱动 Claude Code 具体使用国产模型的方法这里就不再赘述了 其实很简单 设置几个环境变量就行了 网上一搜一大堆 有需要的同学可以自己搜索下 好 言归正传 我们在回到 Claude Code 这里 开始使用它

前面我们说过我们要的是一个待办软件 那我们现在就把这个需求告诉 Claude Code 让它帮我们实现 给我做一个待办软件 使用 HTML 实现 可以看到 Claude Code 开始工作了 让我们稍作等待 Claude Code 想要创建一个叫做 index.html 的文件 询问我们是否同意 这里面一共有三个选项 第一项 Yes 是单次授权

意思就是说只同意创建当前的这么一个文件 如果它接下来还需要创建其他文件的话 它还会再次向我们询问确认 第二项是 Yes, allow all edits during this session 选中了它就意味着在本次的对话期间 后续所有的文件操作都会自动通过 不会再反复打扰我们 第三项是不同意 选择了它之后 你可以继续输入你的想法 Claude Code 会根据你的输入

生成代码并再次向你确认 为了演示方便 我们这里就选择第二项 开启自动模式 把后续的工作全权交给它 好 选完之后注意看 输入框下方多了一行字 就是这个 accept edits on 这个就表示目前的自动同意模式已经开启了 那如果说你后悔了 想换一个模式怎么办呢 这个时候就要用到 Shift + Tab 键来切换模式了 我们来按一下试试

看 现在变成了 Plan Mode 也就是规划模式 这个模式主要用来探讨复杂的方案 只聊天不执行 具体用法我们后面再细讲 我们再按一次 注意看 底部的 Plan Mode 消失了 取而代之的是一行灰色的提示 ? for shortcuts

? for shortcuts 也就是按问号显示快捷键 大家千万别误会 这个并不是什么快捷键模式 这行字呢只是 Claude Code 的一个小提醒而已 跟当前的模式没有关系 Claude Code 其实在这个时候没有标注当前的模式 而这种没有标注的模式 就是默认模式 不知道你还有没有印象 我们刚进入 Claude Code 的时候用的就是默认模式

在默认模式下 Claude Code 表现得最为谨慎 每次创建文件或者是修改文件的时候 它都会先去询问用户的意见 所以大家看出来了吗 Shift + Tab 就在这三种模式之间循环 让我们稍微总结一下 第一个是默认模式 也就是显示问号 for shortcuts 的那个模式 在这个模式下 创建个修改文件之前一定会询问用户 最为稳妥

第二个是自动模式 也就是那个 accept edits on 在这个模式下 Claude Code 会自动创建或修改文件 不会去询问用户 最为方便 第三个是规划模式 也就是那个 Plan Mode On 这个模式只讨论 不修改文件 适合构思 这个模式我们后面会详细解释 好 这个就是 Claude Code 的三种模式了 我们再按一次 Shift + Tab 来到 accept edits on 模式

选择好模式之后 我们再回头看看之前 Claude Code 给我们写好的文件 我们要打开它 那怎么打开呢 你可以去文件管理器里面找到这个文件双击打开它 不过这里我想要教另外一个方法 我们可以直接在 Claude Code 里面 执行终端命令来打开它 首先我们输入一个叹号 看 Claude Code 有反应了 现在我们处在 bash 模式下

可以运行任意的终端命令了 紧接着我们来输入 open index.html 来打开这个 HTML 文件 待办软件做得还算不错 一次成功 这不得不给 Claude Code 点个赞 不过这里面有个小坑 它把所有的代码都写到 index.html 里面了 小项目还好 要是项目做大了 维护起来简直是个灾难 所以咱们最好趁早是换成 React TypeScript

和 Vite 这种现代架构 把代码分模块管理 我们可以直接向 Claude Code 提出这个请求 让它改掉 不过改架构是个大工程 最好是先确定细节再动手 这个就是 Plan Mode 登场的时候了 它就是专门用来讨论方案 确定细节的 让我们先关掉当前页面 回到终端这里 然后按一下 Shift + Tab 进入到 Plan Mode

然后输入我们的请求 将当前的待办应用重构为使用 React 加 TypeScript 加 Vite 的项目 问题到这里还没有结束 这个时候我们想换行 怎么换行 敲回车吗 敲回车显然是不行的 敲回车的话我们的问题就提交了 换行呢是需要按 Shift + 回车 然后我们就可以继续写了 保留所有的现有功能 这里顺便提一句

如果你按 Shift + 回车不好用的话 那你大概率用的 Claude Code 版本比较旧 需要升级一下 另外还有一点 有些同学可能会觉得这个终端的输入框 实在是太难用了 想用一些比较现代化的编辑器来替代它 这个其实也是可以的 我们可以按一下 Ctrl + g 这个时候 Claude Code 就会打开一个 VSCode 的标签页 在这里面编辑就方便多了 回车随便按

也不用担心不小心提交问题了 当然这要求你先事先装好 VSCode 我们就在这里把要求补充完 再加一句 且 UI 风格保持一致 写完了之后 我们保存 然后关掉这个标签页 此时 Claude Code 就会把 VSCode 里面的内容 全部放到输入框里面 我们直接再按个回车就可以提交请求了 可以看到 Claude Code 开始工作了 让我们稍等一下 计划似乎是产好了

我们把滚动条往上移一移 看一看它这个计划具体是个什么样子的 这个计划是从这里开始 看起来还是挺完善的 目标 项目清单 目录结构之类的 信息全部都有覆盖到 最后它询问我们是否要执行 它一共给了我们三个选项 第一个是执行计划 并且进入到同意模式 后续修改文件前就不再询问用户了 第二个也是执行计划

只不过后续会使用默认的模式 也就是说之后每次写入文件前 都需要询问用户 第三项是继续修改计划 如果你对计划不满意的话 那可以在这里面继续输入 Claude Code 会根据你的要求再修改这个计划 产出一份新的 这里假设我们对计划不满意 选择第三项 提出我们的修改意见 给每个待办事项增加一个优先级 比如高中低

并且用不同的颜色标记出来 然后我们按一下回车 这个时候 Claude Code 就开始修改它的计划了 让我们再稍微等待一下 好 Claude Code 又产出了一份计划 具体内容我们就不看了 单从最后的测试部分我们就可以看到 它确实是把我们的优先级的需求考虑进去了 这次差不多了 要不我们就同意吧 让我们选择第一项 执行这个计划 并且进入到自动同意模式

也就是说后续修改文件的时候就不要再询问我们了 好 回车 可以看到 当前模式切换到了 accept edits on 没问题 这个跟我们的选择是一样的 后面写入文件的时候便不会再麻烦我们了 现在 Claude Code 开始执行计划了 时间估计会比较长 我们慢慢等待一下 Claude Code 暂停了 它现在想用 mkdir 来创建目录 然后询问我们是否同意

稍微等一下 这个是什么情况 我们不是跟 Claude Code 说过了吗 不需要每次都询问用户的 还记不记得我们是在 accept edits on 这个模式下面 那怎么现在又开始询问了呢 对 我们确实是说过 不过那只不过是写入文件的时候不需要询问用户 这个是在执行终端命令 Claude Code 认为执行终端命令 是一个比较危险的操作

所以需要征得用户同意才会继续 不仅如此 这里面还没有一个自动执行所有终端命令的选项 即使是第二项 那只不过是告诉 Claude Code 以后都可以自由的访问 src 目录 不需要询问用户 以后都可以自由的访问 src 目录 不需要询问用户 以后都可以自由的访问 src 目录 不需要询问用户 至于执行别的命令那还是要问的 如果你觉得每次选择都太麻烦的话 Claude Code 其实提供了一个比较隐蔽的选项 可以跳过这个选择的步骤

让它想执行什么命令就执行什么命令 这个需要在启动 Claude 的时候加上一个选项 叫做 dangerously-skip-permissions 我来给大家新开一个终端标签页演示一下 我们先进入到原来的这个 my-todo 目录里面 然后我们来输入 claude 再加上 dangerously-skip-permissions 意思就是跳过所有的权限检测 大家注意看这个参数里面的单词

dangerously 也就是危险的 官方把危险两个字写在了脸上 意思非常明确 一旦加上了这个参数 Claude Code 就彻底放飞自我了 进来之后 你会发现模式变成了 bypass permissions on 这就意味着 接下来它执行任何终端命令 无论是安装依赖 还是删除文件 还是创建目录 都不会再问了

这其实是一把双刃剑 往好了说 它能够极大的提升开发效率 全自动干活 不用你一直盯着点同意 但是往坏了说 它理论上就拥有了和你一样的终端权限 虽然 Claude Code 只有在极度发疯的情况下 才能去破坏你的电脑 这种概率可以说微乎其微 但是作为一个负责任的博主 我必须要提醒大家

这个选项会让 Claude Code 彻底的放飞自我 所以理论上还是有一定的危险性的 是否要为了效率承担这一丢丢的理论上的风险 决定权是在你们手里 好 演示完毕 回到我们原来的例子里 我们还是不用这个选项了 我们来选择第二项 只同意它以后可以自由的访问 SRC 目录 回车 让 Claude Code 继续 Claude Code 询问我们能不能执行 npm install 命令

我们选择以后都同意 这里 Claude Code 想要使用 npm run dev 来启动服务器 启动了服务器就可以查看网页的效果了 启动也行 不过这里我们先取消 待会儿我想用它来给你演示如何手动启动它 并且借这个机会来解释任务相关的一些概念 Claude Code 看我们拒绝了 在询问我们应该要做什么 我们来跟它说一下 这个命令等会儿我自己执行

你确保其他部分都完成了就可以了 然后 Claude Code 就开始确认了 好 确认完毕 看起来一切正常 现在我们就可以自己来运行这个命令了 我们来试一下 服务器启动成功 我们来点击这里面的链接 看一下效果怎么样 不错 效果还可以 我们来随便点点 看起来没什么问题 增加个待办事项 也是可以的

然后我们可以再增加一个其他的待办事项 调一下优先级 再添加 一切完美 我们再回到 Claude Code 这里 这里有一点需要给大家强调下 这个服务的运行是会阻塞 Claude Code 的 比如说我们在这里输入一个 Hi 你看 Claude Code 没有给我们任何回应 那是因为服务还在运行 Claude Code 就没有办法处理这个新的请求 那怎么办呢 很简单

看这里 按 Ctrl + b 可以把这个服务放置在后台 我们按一下试试 好像是起作用了 Claude Code 开始处理我们的请求了 它给了我们一个回复 而且注意这里 有一个后台任务正在执行 我们输入 /tasks 就可以查看这个任务 在这里面可以看出 这确实是我们所启动的那个 npm run dev 的命令

注意这行提示 按 k 可以关掉这个服务 不过我们目前还不打算关掉它 我们按 ESC 回到原来的那个界面里面 就让这个服务先一直跑着吧 这样的话我们后续的修改也能能够实时看到效果 那现在假设我们想加一个切换语言的功能 目前使用的是中文 我们希望它能够在右上角切换为英文 让我们来输入请求

在页面右上角增加一个切换语言的选项 用户可以选择中文或者是英文 默认为中文 回车 Claude Code 开始运作了 让我们稍作等待 好 可以看到 Claude Code 改完了 我们回到页面这里看看效果 不错 确实是加上了切换语言的选项 而且切换的效果也是符合预期的 不过你转念一想 不对 我的用户都能看懂中文啊

我加这个功能干什么呢 要不就回滚吧 好吧 那 Claude Code 能回滚吗 当然是可以的 对应的命令就是 /rewind 或者是说有个更简单的办法 你可以直接按两下 ESC 这样就进入到了回滚页面 我们每次输入请求的时候 Claude Code 都会创建一个回滚点 比如说我们不是想回滚到增加语言选项之前的 那个版本吗

那就选择这个回滚点就好了 选好之后按下回车 然后 Claude Code 会给我们四个选项 是回滚代码和会话 还是说是只回滚会话 还是只回滚代码 或者说我们就放弃回滚 我们来选择第一个 代码和会话都回滚 好 现在回滚成功了 让我们来验证下 打开页面 没问题 确实是回滚成功了

没有那个切换语言的选项了 是不是很棒呢 好 假设这个时候 你觉得 React 加 TypeScript 加 Vite 这套架构 好像是有点过于复杂了 你在想 要不干脆我们就回滚到 只有 index.html 的那个版本好了 好 那继续用回滚功能就行了 不过在这之前 我们最好把 npm run dev 这个后台任务给关掉 毕竟回滚之后相关的文件都没了

这个后台任务也就没有什么用了 我们回到 Claude Code 这里 输入 /tasks 来查看后台任务 然后再按 k 结束掉当前的这个后台服务 这个时候 Claude Code 提示我们 开发服务器运转正常 这个纯属是 Claude Code 晕了啊 大家忽略它 我们的开发服务器现在实际上已经被关掉了 服务器关掉之后 我们就可以开始回滚流程了 先按两下 ESC

然后选择一开始重构代码的那个回滚点 然后我们再选择第一项 恢复代码和会话 好 看起来是已经回滚完成了 我们来看看当前目录下 是不是只有 index.html 这个文件 我们使用 ls 这个命令 这个命令可以用列举当前目录下的文件列表 运行 看结果好像是不太对啊 除了 index.html 文件

这个目录下还有很多其他的文件 它默认只显示了一部分 我们可以按一下 Ctrl + o 来显示所有的文件列表 看起来总的文件数量还不少呢 这个是怎么回事呢 难道是 Claude Code 出 Bug 了吗 其实不是 这些文件是之前用终端命令创建的 比如说 mkdir 呀 npm install 之类的

Claude Code 只能回滚它自己写入的那些文件 至于由终端命令生成的文件 Claude Code 是没有办法回滚的 所以呢我建议大家 还是不要太依赖 Claude Code 的这个回滚功能了 如果要精准回滚的话 大家还是使用 git 会更好一点 好 不过问题其实不大 index.html 是 Claude Code 自己把控的 所以这个文件一定是回滚成功了

我们把别的文件都删掉就行了 说干就干 让我们打开文件管理器 删掉除了 index.html 之外别的文件 然后再回到 Claude Code 这里 执行一下 ls 命令 可以看到 文件确实只剩一个了 然后这个时候 我们可以使用 open 命令打开这个 HTML 来验证一下它的效果 没问题 跟我们之前的那个 index.html 的效果是一样的

到这里回滚才算是彻底结束了 好，回滚呢 我们就讲到这里 现在假设你对 Claude Code 做的页面 一直都不太满意 所以你去 Figma 上面自己画了一个界面 就大概是这个样子的了 你希望 Claude Code 仿照这个界面来做 那具体该怎么实现呢 很简单 我们只要把这个设计稿的图片传给 Claude Code 就可以了

首先我们需要在 Figma 上面操作下 把当前的这个设计稿导出一张 PNG 图片 导出的方法很简单 就按这个 export frame 就可以了 然后我们回到访达这里 可以看到图片导出的非常成功 下面我们的任务就是把这个图片传给 Claude Code 那怎么做到这一点呢 有两个方法 其中第一个方法就是直接把这个图片拖到 Claude Code 这里

看到这里面的 image #2 了吗 这就代表 Claude Code 已经接收到我们的图片了 这个只是其中的一个方法 还有另外一个方法就是复制这个文件 然后来到 Claude Code 这里 按 Ctrl + V 粘贴 注意 这里面我说的这个快捷键是 Ctrl + V 不是 Command + V 即使你用的是 macOS 你也要用 Ctrl + V 来粘贴这个图片 按 Command + V 是不起作用的

这一点要记住了 这样我们的图片就粘贴上去了 紧接着我们就可以继续输入请求 让 Claude Code 根据图片来修改代码 具体的流程我就不演示了 这个方法肯定行得通 不过说实话 很多时候可能还原的并没有那么精确 比如说字体啊 间距啊之类的 Claude Code 很难通过图片做到非常精确的把握

所以这个时候我们其实还有另外一个方法 一个更为精确有效的方法 那就是使用 MCP 来实现这个还原 Figma 设计稿的需求 MCP 是大模型与外界沟通的渠道 我之前讲过 MCP 的使用方法和相关原理 感兴趣的同学可以自己看一下 Figma 提供了一个很好用的 MCP Server 我们可以接入进来用用 首先我们需要安装这个 MCP Server

根据 Figma 官方的要求 我们需要执行这一行命令 因此我们先把它复制一下 然后回到 Claude Code 这里 先按两下 Ctrl + C 退出 然后执行这行命令 可以看到 MCP Server 已经是安装成功了 之后呢 我们需要重新打开 Claude Code 不过好像之前的对话全都没了呀 这可怎么办呢 别担心 我们可以使用 /resume 命令 别担心 我们可以使用 /resume 命令

别担心 我们可以使用 /resume 命令 来回到之前的对话 这里面的第一个就是我们刚才的那个对话了 我们按回车来选择它 你看 这个对话不就回来了吗 另外还有一种更为简单的办法 那就是在启动 Claude Code 的时候 加上一个参数 我们来试一下 首先退出 Claude Code 然后我们执行命令 claude -c 这里面的 c 就是 continue 的缩写

它的功能就是打开 Claude Code 并自动恢复上一次的对话 好 对话恢复了 我们执行 /mcp 命令 我们执行 /mcp 命令 来查看目前所安装的 MCP 工具 目前只有一个 就是我们刚刚安装的 figma 可以看到 我们需要鉴权才能使用这个工具 我们来选择这个 MCP 工具 然后再选择 Authenticate 这个时候会自动弹出一个页面让我们授权 我们同意

然后再回到 Claude Code 这里 执行 /mcp 选择 figma 执行 /mcp 选择 figma 执行 /mcp 选择 figma 这个时候可以看到 MCP Server 就是一个可用的状态了 我们选择 View tools 就可以看到这个 MCP Server 内部所包含的工具列表 其中有用截图的 有创建设计规则的等等 具体我们就不看了 我们其实也不用太关心 到底该使用哪个工具来完成我们的需求 我们让 Claude Code 来判断

所以我们按 ESC 退出这个界面 然后输入我们的需求 修改当前的页面 使它与 Figma 稿件保持一致 问题还没完 我们现在回到 Figma 页面这里 复制这个设计稿的链接 就点击这里面的 copy link to selection 就好了 然后再回到 Claude Code 这里粘贴 再回车 这样应该是可以了 可以看出 Claude Code 开始工作了

它首先是发现了我们的 Figma MCP 可以解决这个问题 请求调用 get design context 这个 MCP 工具 来实现需求 我们同意 然后 Claude Code 请求调用 get screenshot 工具 获取对应设计稿的截图 我们也同意 现在调完两个工具之后 Claude Code 就获取到了全部的设计稿信息了 其中不仅包括设计稿的截图

还有各种组件的间距 字体样式等 非常的详细 拿到这些信息后 Claude Code 就开始紧锣密鼓地修改 现有的 HTML 代码 使它与 Figma 设计稿相同 让我们稍作等待 好 看起来是完成了 我们来到浏览器那边看一下效果怎么样 这个就是 Claude Code 根据 Figma 设计稿 所搞出的页面 我把原始的设计稿也放在这里

大家可以比较一下 看看效果怎么样 反正我觉得还原程度还是挺高的 当然这个页面还有一些细节需要打磨 比如说里面的 undefined NaN 之类的 可能需要修改一下 但整体效果我觉得真的还是可以了 好，那 MCP 我们暂时就讲到这里 下面我们来看一下上下文压缩 在之前我们写了很多的代码 然后 Claude Code 呢

也调用了很多的工具 相信这个时候呢 Claude Code 的上下文里面 就有了非常多的信息 这里面有一些是有用的 有一些其实没什么太大用处 我们可以根据需要 对上下文做一些压缩 这里需要用到的命令是 /compact 我们可以直接去执行这个命令 也可以选择性的在他后面 追加一些具体的压缩策略 比如说是重点保留用户提出的需求

之类的 不过我们就不在后面加需求了 我们就直接执行这个 /compact 命令 看一下它的效果怎么样 压缩完成了 我们按一下 ctrl + o 就可以看到压缩后的上下文内容 这个呢 就是压缩之后的结果了 我们之前呢 在上下文里面 有很多的信息 有代码 有 MCP 的调用结果之类的

现在呢 全部的内存就只剩这么一点了 这样的话呢 不仅 Claude Code 的性能有了保障 后面再执行任务时 Token 的消耗量也会少很多 好 现在我们按一下 ctrl + o 再回到原来的这个界面里 这里再提一下关于上下文的 另外一个命令 就是这个 /clear 它呢 做得更为极端 就会直接把所有的上下文内容 都给清空掉

一般来说 如果我们后面的任务 跟之前的上下文 并没有什么关联的话 我们就可以使用这个 clear 命令 来清空所有的上下文内容 这个命令我们就不演示了 毕竟我们还需要之前的上下文 演示了就什么都没了 我们还是保留这个压缩后的结果 好 现在压缩完成了 但是压缩结果的可控性 并没有那么强 比如假设你想手动改改

这里的压缩结果 Claude Code 并没有给你提供这个选项 另外 无论压不压缩 上下文都跟某个会话绑定 我们下次进入 Claude Code 的时候 还必须来到这个会话 否则 Claude Code 是不知道 之前发生了什么的 那有没有什么办法 可以解决这些问题呢 有没有一种方案 可以让 Claude Code 每次进来的时候 都读取一些我们自己设定的信息

这样 Claude Code 就会知道 这是一个什么项目 用户有什么需求 我们甚至可以把各种注意事项 都写在这里面 了解了这些信息之后 Claude Code 就可以更好地为我们工作了 有这种方案吗 当然是有的 这个呢 就是 CLAUDE.md

我们来尝试使用一下 我们首先让 Claude Code 自己生成一份 CLAUDE.md 文件

自己生成一份 CLAUDE.md 文件 用的是 /init 命令 好 Claude Code 创建完毕了 我们来打开 CLAUDE.md 文件

我们来打开 CLAUDE.md 文件 看一下 它就放在当前目录里面 看起来内容是模有样的 不过很可惜 它的语言呢 是英文 看起来不太方便 我们要不让 Claude Code 再把它给转成中文 转换完毕 我们再回来看一下 没问题 确实是中文了 另外提一下 这里面的内容呢 是可以随便修改的 比如说

我们可以最后面加上一句 注意事项 每次回答的最后 必须要追加这么一句 Happy Coding 然后我们回到 Claude Code 这里 先退出 然后再重新进入 这样 Claude Code 就会重新加载 我们那份最新的 CLAUDE.md 文件

我们那份最新的 CLAUDE.md 文件 我们来随便给 Claude Code 说一句 比如说 是 Hi Claude Code 回答了 它最后呢 确实是加上了 Happy Coding 可以看到 我们的 CLAUDE.md 真的是起作用了

所以呢 如果你有什么东西 是希望 Claude Code 每次都读取的 是希望 Claude Code 每次都读取的 那就直接放到 CLAUDE.md 文件里就好了

那就直接放到 CLAUDE.md 文件里就好了 试验完毕 现在我们把 CLAUDE.md 结尾中的那个注意事项去掉

现在我们把 CLAUDE.md 结尾中的那个注意事项去掉 要不每次都出现 Happy Coding 会影响我们后续的演示 我们可以直接找到 VS Code 编辑 CLAUDE.md 文件

编辑 CLAUDE.md 文件 不过这里嘛 我想顺便教大家另外一个 打开 CLAUDE.md 的方法

打开 CLAUDE.md 的方法 我们在这个输入框里面输入 /memory 在这里可以看出 CLAUDE.md 文件呢 一共有两种

CLAUDE.md 文件呢 一共有两种 一种是项目级别的 对应的文件就放在当前的目录里 对当前项目生效 第二个呢 是用户级别 对应的文件放在用户目录里 对当前用户生效 我们之前用的是第一个 所以选择第一项 选择好了之后 对应的 CLAUDE.md 文件

对应的 CLAUDE.md 文件 就自动打开了 这样呢 就不用每次 都自己在文件管理器里面找了 会稍微方便一点 打开 CLAUDE.md 文件之后

打开 CLAUDE.md 文件之后 我们删掉最后面的注意事项 保存 再回到 Claude Code 这里 重启一下 然后再随便问一句 可以看到 Happy Coding 已经没了 这说明我们的修改已经生效了 那 CLAUDE.md 文件就讲到这里

那 CLAUDE.md 文件就讲到这里 Claude Code 还有个 Hook 的功能 允许用户在运行工具前后等时机 执行一段自己指定的逻辑 比如说我们可以用它来做 自动格式化的功能 也就是在 Claude Code 写完代码之后 自动执行我们设定的 格式化函数 以便让最终的代码更加美观 更加符合我们的需求 首先我们执行 /hooks 命令 进入到 Hook 的配置界面 这里我们可以配置 Hook 的执行时机

比如说工具使用前 工具使用后 工具使用失败 发送通知等等 我们来选择第二项 PostToolUse 也就是工具使用后 来执行这个 Hook 然后呢 我们再选择 Add new matcher 这里面呢 我们需要选择对应的工具 也就是说 我们希望在哪个工具执行之后 运行我们的 Hook 逻辑 我们填写的呢 是 write 或者是 edit

也就是在创建或者是 编辑文件的时候 来执行这个 Hook 然后呢 我们再选择 Add new hook 这里输入我们具体的格式化命令 这个命令看起来很长 我们来仔细分析一下 首先在运行的时候 Claude Code 会给我们传 这么一份 JSON 过来 其中的 file_path 就是 Claude Code 刚刚编辑好的 文件路径 因此我们需要解析这个 JSON 结构

把其中的 file_path 的值 给取出来 我们刚才命令里面的这一部分 就是用来干这个活的 其中 jq 是解析 JSON 的一个程序 不熟悉的同学可以自己查下 获取到文件路径之后 我们把这个文件路径 通过 xargs 传递给 prettier 命令 然后剩下的工作呢 就是只用 prettier 来格式化 这个文件的内容了 所以总结下来 这段命令其实就是使用 jq

来获得当前编辑好的文件路径 然后再使用 prettier 来格式化这个文件 好 讲完了 让我们再回到 Claude Code 这里 写好代码之后 我们按回车确认 此时 Claude Code 会询问我们 应该把这个 Hook 保存到哪一级 一共有三个选项 第一个呢 是本地的项目级别 也就是说 这个 Hook 只会在 本机本项目生效 选择这个选项后

Claude Code 会把配置 放到项目目录里面的 settings.local.json 里

放到项目目录里面的 settings.local.json 里

然后呢 还会把 settings.local.json 加入到 git 的 .gitignore 文件里面

所以呢 这个文件不会共享给别人 第二个呢 是项目级别 也就是说 所有使用这个项目的用户 都能用到这个 Hook 它对应的配置文件呢 是 settings.json

这个文件会随着 Git 分发给所有人 第三个呢 是用户级别 对当前用户生效 对应的配置保存在用户目录里 每一个用户都有一份 不会互相影响 也不会跟项目绑定 我们来选第二个 所有使用这个项目的人 都能用到这个 Hook 然后呢 这个 Hook 就算是创建好了 我们按 ESC 退出 最后呢 输入请求来试一下 我们的请求是

创建一个新的文件 test.html 里面随便写点 HTML 就行 所有的内容都写在一行里面 回车 我们来稍微等一下 通过这个写入文件的请求 就可以看出 Claude Code 确实是把 所有的内容都写到一行里面了 我们同意 执行完毕 我们来看看最终生成的 test.html 的文件内容 可以看到 这个文件的内容呢 已经被格式化好了

并不是像一开始 Claude Code 写入的那样 只有一行 这说明我们刚才写的那个 Hook 生效了 在 Claude Code 写完代码之后 我们的 Hook 启动 把那个文件给格式化了 所以呢 我们现在看到的 就是格式非常漂亮的 HTML 代码 Hook 的功能就讲到这里 现在假设你每天都想写一个总结 记录下今天开发了哪些功能 而且这个总结必须遵循一定的格式

比如一定要包含日期 开发摘要 开发详情之类的 你可以把对应的格式要求 直接粘贴在这个输入框里面 让 Claude Code 帮你写一份 只不过这样的话 你每天都要重复粘贴一遍 很麻烦 这种事情非常适合使用 Agent Skill 来解决 我之前出过一个系统性讲 Agent Skill 的视频 有兴趣的同学可以看下 不过没看过也没关系 你可以把它理解为

一个给大模型看的说明书 一个动态加载的 Prompt 我们来创建一个 Skill 试一下 首先我们新开一个终端 Tab 使用 mkdir 命令 在用户目录下的 claude/skills 文件夹下面 创建一个文件夹 叫做 daily-report 我们用 VS Code 打开这个文件夹 然后在这个文件夹下面 创建一个叫做 SKILL.md 的文件

创建一个叫做 SKILL.md 的文件 在这里面填入这样的内容 这个文件一共分为两部分 前面的 name 和 description 分别代表这个 Agent Skill 的 名称和描述 Claude Code 会根据这一部分的内容 来决定是否使用这个 Agent Skill 后面呢 就是这个 Agent Skill 的 具体描述了 这里主要是写了 日报需要遵循的格式 写好后 我们保存 然后回到终端

关掉这个新开的标签页 然后再重启 Claude Code 输入 /skills 可以看到 Claude Code 已经发现了我们的 Agent Skill 然后呢 我们回到输入框这里面 打入我们的请求 写一份每日总结 回车 开始执行 可以看出 Claude Code 发现了这个请求 与我们刚才录的那个 Agent Skill 相关 请求使用这个 Agent Skill

我们同意 然后呢 我们的每日总结就写好了 跟我们要求的格式是一模一样的 这个 Agent Skill 的调用请求 是大模型发现并发起的 除此之外呢 我们也可以这样来主动发起这个 Agent Skill 就是先输入 /daily-report 然后呢 后面加上具体的请求 这个效果是一样的

只不过省去了大模型意图识别的过程 直接由用户调用了这个 Agent Skill 结果呢 更加可控一些 具体我们就不演示了 我们来把它给删掉 Agent Skill 呢 就大致讲到这里了 当然 Agent Skill 还有很多高级的用法 感兴趣的同学可以看一下我的 上一个视频 下面我们再讲讲 Claude Code 的 另外一个重要功能 SubAgent 这个呢 其实就是一个独立的 Agent 有着自己独立的上下文

独立的工具 独立的 Skill 可以独立完成某一件事情 我之前讲过 Agent 的原理 感兴趣的同学可以自己来看一下 下面呢 让我们来创建一个 用于代码审核的 SubAgent 首先输入命令 /agent 然后选择 Create new agent 这里要选择 Agent 的类型 是项目级别 还是用户级别 我们选择项目级别

也就是使用这个项目的人 都能用 接下来选择 Agent 的创建方法 一种是先用 Claude 初始化 另外一种是完全手动创建 第一种是推荐方法 所以我们选它 接下来我们要描述这个 Agent 要做的事情 我们填入以下内容 这是一个用于代码审核的 SubAgent 在用户要求代码审核的时候调用它 回车 可以看到 Claude Code 正在生成

这个 SubAgent 让我们稍等一下 接下来 我们要选择这个 SubAgent 能使用的工具 我们选择 Read-only tools 就好 也就是说 只能使用只读工具 其余的都去掉 模型选择默认的 Sonnet 接下来选择这个 SubAgent 的颜色 Claude Code 运行这个 SubAgent 的时候 会使用我们选择的颜色来展示它 我们用绿色吧 然后呢

Claude Code 就将会给我们生成这个 SubAgent 可以看到 这个 SubAgent 的描述 是英文的 而且里面的内容 大概率也不会跟我们期望的完全相同 我们按 E 来编辑一下 这个 SubAgent 的描述 这个呢 就是 Claude Code 给我们生成的 SubAgent 描述了 不过呢 它跟我们想要的版本 差距有点大

所以这里呢 我来给这个 SubAgent 整体替换一下 换成适合我们这个场景的 SubAgent 的结构 与 Agent Skill 类似 一共是分为两部分 上面呢 是元数据 写明了这个 SubAgent 的 名称 描述 所使用的模型 颜色等等 下面呢 就是这个 SubAgent 具体要干的事情了 我的要求呢 有两条 一个是审查的准则

里面有两项 一项是针对 JS 的 一项是针对 CSS 的 最后呢 会有一个 输出格式方面的一个要求 我们后面就看一下 Claude Code 能否遵循这个 SubAgent 的规范 填完了这个 SubAgent 的描述之后呢 我们来到 Claude Code 这里 给它重启一下 重启完后 我们提交请求 给我做一下代码审核 可以看出

Claude Code 调用了我们刚才创建的 SubAgent 并把对应的任务描述传给了它 让它处理 而且看这里 Claude Code 是用绿色 来表示这个 SubAgent 这跟我们之前的配置也是相符的 它估计还要再运行一会 让我们稍做等待 它运行了一会之后 给出了代码审核报告 可以看出 它检查的内容 确实是我们在 SubAgent 描述文件里面要求的 这个呢

就是 SubAgent 的使用方法了 有人可能会问 Agent Skill 跟 SubAgent 很像啊 它俩什么区别 其实吧 它俩最大的区别 就在于对上下文的处理方式不同 Agent Skill 运行的时候 它会完全继承并且共享 你当前主对话的上下文 这就意味着 它执行过程中的每一行日志 每一个思考过程 都会记入到你的当前上下文 想象一下

如果你让 Skill 去审核一个 有着几万行代码的项目 这些代码会逐步塞满你的 上下文窗口 Token 消耗飙升 Agent 也会因为记忆过载 而变慢 变傻 所以呢 Agent Skill 最适合处理那些 与上下文关联比较大 而且对上下文影响不大的任务 比如说根据今天的开发过程 写一个每日总结之类的 而 SubAgent 则拥有自己完全独立的上下文

当你启动它时 它会开辟一个全新的对话窗口 它在这个窗口里面看的所有代码 生成的所有中间分析过程 都不会回传到你的主对话里面 只有当它把活干完了 它才会拿着一个 最终的执行结果 来向你汇报 这样一来 你的主对话 依然干干净净 永远不会被锁碎的中间过程 所撑爆 所以 SubAgent 比较适合处理那些 与上下文关联比较小

而且对上下文影响比较大的任务 因此 Agent Skill 与 SubAgent 的 最大区别 就在于对上下文的处理方式不同 大家要根据具体的场景 来选择合适的方案 下面我们再讲讲 Plugin 这个东西 你可以把 Plugin 想象成一个 全家桶的安装包 有点像是 macOS 的 DMG 或者是 Windows 下面的 EXE 文件 它把一系列的 Skill SubAgent Hook

等能力全部打包在一起 你只需要一键安装 Claude Code 就能瞬间获得 整套高级能力 下面呢 我来给大家演示一下 我们先输入 /plugin 进入到插件管理器 这里面呢 有三个选项 分别是 Discover 也就是发现新插件 Installed 已安装的插件 和 Marketplaces 插件市场 我们在 Discover 里面

找到这个 frontend-design 按回车安装 接下来要选择安装范围 有三个可选范围 分别是 对当前用户生效 对当前项目生效 或者是对当前用户的当前项目生效 我们维持默认就好了 确定后就安装完成了 对 就是这么快 这里简单说明下 frontend-design 是一个 用来做前端设计的插件 一般来说 大模型做的前端

都有一定的共性 比如说 是深紫色的主题等等 这个插件据说可以打破这个共性 让界面看起来更好看一点 我们等会试试看是不是这样 安装好了之后 我们重启一下 Claude Code 然后使用 mkdir 命令 新建一个目录 就叫做 my-todo-2 然后呢 我们进入到这个目录里面 再启动 Claude Code 启动好了之后 我们输入 /plugin

再次进入到插件的管理页面 然后再选择 Installed 可以看到 Installed 这个 Tab 下面 多了一项 就是我们刚才安装的这个 frontend-design 我们按回车 看一下它的详情 可以看到 这个 Plugin 的 主要组成元素 就是一个叫做 frontend-design 的 Agent Skill 既然我们已经安装了这个 Plugin 那对应的 Agent Skill

应该也安装了 我们不妨验证下 让我们回到输入框这里面 然后打 /skills 你看 这里面是不是多了一个叫做 frontend-design 的 Agent Skill 呢 所以呢 安装这个插件 本质上就是安装了这个 Agent Skill 当然 这个 Plugin 比较特殊 就只有一个组成元素 有些 Plugin 里面包含了 Agent Skill MCP Hook 等 多个组成元素 你可以把它理解为

整套解决能力 一次性全部安装了进来 下面呢 我们就来用用这个 frontend-design 看看它跟原装的前端设计 有没有什区别 让我们回到输入框这里 输入我们的请求 按照 frontend-design 的要求 做一个代办软件 使用 HTML 来实现 注意看 Claude Code 并没有立即开始写代码 它首先是意识到 用户要求使用 frontend-design 的规范

于是呢 它会先请求使用这个 Agent Skill 我们点同意 读取完了之后 它就拥有了 Anthropic 官方沉淀的 一整套 UI 的设计直觉 接着呢 它开始写代码了 让我们稍微等一下 写好了 我们先用 ls 命令 看看当前目录下有哪些文件 没问题 只有一个 index.html 文件 然后呢 我们就可以使用

open 命令来打开这个文件 看一下效果怎么样 大家看 这个呢 跟我们一开始写出来的 那个 Demo 相比 风格就完全不一样了 它的排版更加高级 色彩更加协调 交互呢 也更符合现代审美 这个就是 frontend-design 这个插件的力量了 目前 Claude Code 的插件市场 还在迅速的增长 除了 UI 设计之外

还有一些针对特定编程语言的 LSP 插件等等 当然 如果你觉得自己的配置 写得非常好的话 也可以参考官方的文档 把你的 Skill SubAgent MCP 等等东西 打包成插件 分享给你的团队或者是社区 好 Claude Code 到这里就讲完了 如果我的视频对你有帮助 别忘了点赞关注 我是马克 用最通俗的语言讲最硬核的技术

我们下期再见 Bye bye