目录

前言

学习 UP 主 马克的技术工作坊 的 Claude Code 从 0 到 1 全攻略：MCP / SubAgent / Agent Skill / Hook / 图片 / 上下文处理 / 后台任务 视频，了解下 Claude Code 的一些使用方法，记录下个人学习笔记，和大家一起分享交流😄

Note：由于博主演示的模型和 Claude Code 版本与马克叔有所差异，因此有些地方输出和视频有出入，大家可以先观看视频讲解。

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

reference：https://code.claude.com/docs/zh-CN

reference：Claude Code 使用指南：从官方配置到接入第三方模型

reference：https://chatgpt.com/

1. 本期内容概览

最近 Claude Code 非常火（其实已经火了很长一段时间了😂），相信关注编程 Agent 的同学应该都已经上手体验过了，不过要把这个工具从入门真正落地到生产环境，光会敲几个简单的命令是远远不够的，所以本期内容咱们不整虚的，跟着马克叔一起把 Claude Code 的实战流程彻底走一遍。

本期内容一共是分为以下四个部分：

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

另外市场上还有其他类似的编程 Agent，比如 Codex，OpenCode 等等，其实他们无论从功能上还是使用上都跟 Claude Code 没有什么太大区别，所以相信大家在看完了本篇文章之后，你一定会一通百通，同类的产品基本上都能够直接上手。

OK，话不多说，那我们直接开始。

2. Anthropic/Claude/Claude Code/Claude Opus 名词解释

那博主经常对一些耳熟能详的名称例如 Anthropic/Claude/Claude Code/Claude Opus 傻傻分不清楚，因此这里临时简单梳理下：

我们从上往下整个过一遍：

Anthropic PBC 是一家美国的人工智能（AI）初创企业和公益公司，由 OpenAI 的前成员创立。Anthropic 专注于开发通用 AI 系统和语言模型，它开发并提供了 Claude 系列大语言模型与相关产品/平台（Claude 应用、Claude API、Claude Code 等）

Claude（平台/产品） 是 Anthropic 面向用户与开发者的 AI 平台入口（如 claude.ai、Claude API），用于完成对话、推理、分析、编码等任务。更详细的信息请参考：https://platform.claude.com/docs/zh-CN/intro

Claude Code（Agent 工具） 是 Anthropic 推出的一个编码智能体工具（Coding Agent Tools），可读取代码库、编辑文件、运行命令，并集成到终端/IDE/桌面/浏览器等开发工作流中。更详细的信息请参考：https://code.claude.com/docs/zh-CN/overview

Claude Models（模型家族） 是由 Anthropic 开发的一系列先进大语言模型，包括 Opus / Sonnet / Haiku 等系列，最新模型包括 Claude Opus 4.6、Claude Sonnet 4.5、Claude Haiku 4.5（截至 2026/3/22）。

3. 学习开发环境搭建

首先我们需要搭建一套开发环境，好跟着马克叔一起来操作学习，博主使用的操作系统是 Linux Ubuntu 24.04，由于 Claude Code 官方模型访问不稳定且价格较昂贵，因此本次学习我们将采用国产的一些模型（例如 DeepSeek、智谱的 GLM 模型等）做替代，对于本次实战肯定是足够了的。

Claude Code 使用方式有很多种，例如终端 CLI 版、Chrome 浏览器版、桌面版、VSCode 插件版、JetBrains IDE 版 …，这里博主选择采用和 UP 主一样的终端 CLI 的方式来使用 Claude Code。关于如何通过其他方式使用 Claude Code，大家可以参考 Claude Code 的官方文档：https://code.claude.com/docs/zh-CN/desktop-quickstart。

根据官方文档 [docs] 在 Linux 操作系统下 Claude Code 的安装指令如下：

curl -fsSL https://claude.ai/install.sh | bash

执行后输出如下：

博主在安装过程中有个小警告，如上图所示，我们需要将 Claude Code 的安装路径 ~/.local/bin/claude 写入到 shell 配置文件中，否则后续会提示 claude: command not found 的问题，执行指令如下：

echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

大家如果没有遇到这个问题的话不必理会。

在安装 Claude Code 的过程中，大家还可能会出现如下的问题：

在这里插入图片描述

这个问题主要是因为你没有代理，所在的地区无法访问 claude.ai，导致服务器返回了一个 “服务不可用” 的 HTML 页面。

那大家如果遇到了这个问题并且没有合适的代理可以尝试通过 npm 指令安装，具体可以参考：Claude Code 使用指南：从官方配置到接入第三方模型，如依旧遇到下载慢的问题，可以使用镜像源：

npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com

我们本次要做的是一个待办软件，因此我们接着跟着 UP 主的步伐创建一个 my-todo 文件夹用于存放后续代码，并执行 claude 命令来打开 Claude Code：

可以看到成功启动了。

但如果你没有代理，那么你很可能会遇到如下的问题：

哪怕你拥有代理，启动了 Claude Code，但是后续也会遇到登录的问题：

Claude Code 会让你选择一种登录方式，通过账号、API Key 或者第三方平台，可惜的是这些博主一个都没有，博主想后续接入 DeepSeek 或者 GLM 等国产模型再加上 Claude Code 自身的 Coding Agent 属性进行开发。

那么我们就必须要解决上面出现的两个问题，第一个是代理网络访问问题，第二个是绕开登录问题，解决办法也非常简单，我们只需要修改下 ~ 目录下的 .claude.json 配置文件即可，在末尾添加：

"hasCompletedOnboarding": true

Note：上面这行语句会跳过 Claude Code 的首次启动流程（onboarding），具体方法参考自：Claude Code跳过强制登录解决方法

之后再来启动 Claude Code，我们会发现代理问题以及登录问题全部都解决了：

当然，上图中的这些模型我们是都无法使用的，因为我们并没有登录或者使用官方 API，下面我们就来接入一些国产的模型 API

我们以接入 DeepSeek 为例来讲解，首先大家需要访问 DeepSeek 开放平台 进行充值并创建获取 API Key：

Note：由于我们这里只是跟随 UP 学习 Claude Code，因此大家随意充个 ￥10 绰绰有余了😄

在充值完成后我们接着需要创建一个 API Key：

我们点击 API Keys，接着点击创建 API key，他会让你输入一个名称，这个随意填写即可，这里博主写的是 claude code，填写之后会弹出一个窗口，里面就是你创建的 API key，我们复制下来，之后需要填入到 claude code 的配置文件中。

OK，到这里我们就获取到了 DeepSeek 模型的 API key，接下来我们来看如何在 Claude Code 中配置接入 DeepSeek 模型

值得注意的是，DeepSeek 提供了与 Claude API 兼容的接口，我们通过环境变量即可 “无痛替换”，我们将下面的内容添加到 ~/.bashrc 中即可：

export ANTHROPIC_BASE_URL=https://api.deepseek.com/anthropic
export ANTHROPIC_AUTH_TOKEN="YOUR_DEEPSEEK_API_KEY"
export API_TIMEOUT_MS=600000
export ANTHROPIC_MODEL=deepseek-chat
export ANTHROPIC_SMALL_FAST_MODEL=deepseek-chat
export CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC=1

Note：当然还有更高级的进阶方案，例如通过 CCR 或者 CC-Switch 来智能切换模型，这里我们就不折腾了，大家感兴趣的可以看看 Claude Code 使用指南：从官方配置到接入第三方模型

请注意 YOUR_DEEPSEEK_API_KEY 中的内容需要替换为我们上面刚刚获取到的 DeepSeek API Key，接着执行下 source ~/.bashrc 刷新下环境变量

接着我们再启动下 Claude Code 看看：

可以看到，此时我们再执行 /model 的时候会发现我们刚刚接入的 deepseek 模型。

我们来简单问个问题，看它有没有响应：

可以看到它成功响应了，并回答出了我们的问题。

接着我们可以回到 DeepSeek 开放平台来看下是不是有相关消费：

我们点击 用量信息 即可查看相关消耗，可以看到我们仅询问了一个问题，但其内部有 3 次 API 请求，此外共消费了 ￥0.05，这说明整个链路是通的。

Note：关于大家常用的 GLM 也可以按照上述方式进行配置，这里博主就不再赘述了，具体流程大家可以参考：Claude Code 使用指南：从官方配置到接入第三方模型

至此，我们完成了本次学习所需的环境搭建，接下来我们就可以跟着马克叔一起来愉快的学习 Claude Code 了🤗。

4. 基础功能演示

言归正传，我们再回到 Claude Code 这里开始使用它，前面我们说过我们要做的是一个待办软件，那我们现在就把这个需求告诉 Claude Code 让他帮我们实现：

可以看到 Claude Code 开始工作了，让我们稍作等待

可以看到 Cloud Code 想要创建一个叫做 todo.html 的文件，询问我们是否同意，这里面一共有三个选项：

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

为了演示方便，我们这里就选择第二项，开启自动模式，把后续的工作全权交给他就好。

选完之后注意看输入框下方多了一行字，就是这个 accept edits on，这个呢就表示目前的自动同意模式已经开启了，那如果说你后悔了，想换一个模式怎么办呢，这个时候就要用到 shift+tab 键来切换模式了。

我们来按一下试试看：

现在变成了 plan mode 也就是规划模式，这个模式主要用来探讨复杂的方案，只聊天不执行，具体用法我们后面再细讲。

我们再按一次：

注意看底部的 plan mode 消失了，取而代之的是一行灰色的提示问号 ? for shortcuts，也就是按问号显示快捷键，大家千万别误会，这个并不是什么快捷键模式，这行字只是 Cloud Code 的一个小提醒而已，跟当前的模式没有关系，Claude Code 其实在这个时候没有标注当前的模式，而这种没有标注的模式就是默认模式。

不知道大家还有没有印象，我们刚进入 Claude Code 的时候用的就是默认模式，在默认模式下，Claude Code 表现得最为谨慎，每次创建文件或者是修改文件的时候，他都会先去询问用户的意见，所以大家看出来了吗，shift+tab 就在这三种模式之间循环，让我们稍微总结一下：

第一个是默认模式，也就是显示 ? for shortcuts 的那个模式，在这个模式下创建和修改文件之前一定会询问用户，最为稳妥。第二个呢是自动模式，也就是那个 accept edits on，在这个模式下 Claude Code 会自动创建或修改文件不会去询问用户，最为方便。第三个是规划模式，也就是那个 plan mode，这个模式只讨论不修改文件，适合构思，这个模式我们后面会详细解释。

OK，这就是 Claude Code 的三种模式了，选择好模式之后，我们再回头看看之前 Claude Code 给我们写好的文件，我们要打开它，那怎么打开呢，你可以去文件管理器里面找到这个文件，双击打开它。

不过这里我们教另外一个方法，我们可以直接在 Claude Code 里面执行终端命令来打开它，首先我们输入一个叹号：

可以看到 Cloud Code 有反应了，现在我们处在 base 模式下，可以运行任意的终端命令了，紧接着我们来输入 open todo.html 来打开这个 html 文件代码：

软件做的还算不错，一次成功，这不得不给 Claude Code 点个赞。

5. 规划模式

不过这里面有个小坑，他把所有的代码都写到 todo.html 里面了，小项目还好，要是项目做大了，维护起来简直是个灾难，所以咱们最好趁早是换成 React、TypeScript 和 Vite 这种现代架构，把代码分模块管理。

我们可以直接向 Claude Code 提出这个请求让他改掉，不过改架构是个大工程，最好是先确定细节再动手，此时就是 plan mode 登场的时候了，它就是专门用来讨论方案确定细节的。

我们回到终端这里，按一下 shift+tab 进入到 plan mode，然后输入我们的请求：

Note：这里博主不小心使用了 /clear 快捷键对当前上下文窗口进行了清空，此外换行快捷键是 Shift + 回车，如果无效可以在行尾输入 \ 后按回车。

另外还有一点，有些同学可能会觉得这个终端的输入框实在是太难用了，想用一些比较现代化的编辑器来替代它，这个其实也是可以的，我们可以按一下 ctrl+g：

这个时候 Claude Code 就会打开一个 vscode 的标签页，在这里面编辑就方便多了，回车随便按，也不用担心不小心提交问题了，当然这要求你事先装好 vscode，我们就在这里把要求补充完，再加一句，且 UI 风格保持一致，写完了之后我们保存，然后关掉这个标签页，此时 Claude Code 就会把 vscode 里面的内容全部放到输入框里面：

我们直接再按个回车就可以提交请求了，可以看到 Claude Code 开始工作了，让我们稍等一下。

工作了一段时间后 Claude Code 会询问我们具体的一些细节内容，例如样式方案、图标等等：

我们按照自己的意愿将每一个选项选择好后选择 submit 提交即可：

提交好后继续耐心等待一段时间后会得到一份计划。

我们一起来简单浏览下它这个计划具体是什么样子的：

可以看到这份计划非常详细，包括背景、技术栈、组件结构、各种策略等等，看起来还是挺完善的。

到最后它询问我们是否要执行，它一共给了我们四个选项：

第一个是清空上下文窗口后执行计划，并且进入到同意模式，后续修改文件前就不再询问用户了；第二个选项是不清空上下文窗口，直接进入同意模式执行计划；第三个选项也是执行计划，只不过后续会使用默认的模式，也就是说之后每次写入文件前都需要询问用户；第四项是继续修改计划，如果你对计划不满意的话，那可以在这里面继续输入，Claude Code 会根据你的要求再修改这个计划，产出一份新的。

这里假设我们对计划不满意，选择第四项，提出我们的修改意见即 给每个待办事项增加一个优先级（高、中、低），并且用不同的颜色标记出来，然后再按下回车：

这个时候 Cloud Code 就开始修改他的计划了，让我们再稍微等待一下等它生成一份新的计划。

在新的计划中我们可以看到它确实是把我们的优先级的需求考虑进去了，这次差不多了。

我们直接同意选择第二项执行这个计划，并且进入到自动同意模式，也就是说后续修改文件的时候，就不要再询问我们了：

我们可以看到当前模式切换到了 accept edits on：

现在 Claude Code 开始执行计划了，时间会比较长，我们慢慢等待一下。

6. 权限检测与后台任务管理

在等待的过程中我们可以看到 Claude Code 暂停了：

它现在想用 mkdir 来创建目录，然后询问我们是否同意，稍微等一下这个是什么情况，我们不是跟 Claude Code 说过了吗不需要每次都询问用户的，还记不记得我们是在 accept edits on 这个模式下面，那怎么现在又开始询问了呢？🤔

没错，我们确实是说过，不过那只不过是写入文件的时候不需要询问用户，这个呢是在执行终端命令， Claude Code 认为执行终端命令是一个比较危险的操作，所以需要征得用户同意才会继续，不仅如此，这里面还没有一个自动执行所有终端命令的选项，即使是第二项，那也只不过是告诉 Claude Code 以后都可以自由的访问 react-todo 目录，不需要询问用户，至于执行别的命令，那还是要问的。

如果你觉得每次选择都太麻烦的话，Claude Code 其实是提供了一个比较隐蔽的选项，可以跳过这个选择的步骤，让他想执行什么命令就执行什么命令，这个呢是需要在启动 Claude 的时候加上一个选项，叫做 dangerously-skip-permissions，我们来给大家新开一个终端标签页演示一下：

大家可以注意看这个参数里面的单词 dangerously 也就是危险的，官方把危险两个字写在了脸上，意思非常明确，一旦加上了这个参数，Claude Code 就彻底放飞自我了。

加上这个参数启动之后，Claude Code 还会继续询问你是否需要接受，因为这里写得也非常明显，如果你一旦接受，Claude Code 在执行任何终端指令时都不会询问你。

进来之后你会发现模式变成了 bypass permissions on，这就意味着接下来他执行任何终端命令，都不会再征求你的意见了，无论是安装依赖还是删除文件还是创建目录，都不会再问了。

这个呢其实是一把双刃剑，往好了说，它能够极大的提升开发效率，全自动干活，不用你一直盯着点同意，但是往坏了说，它理论上呢就拥有了和你一样的终端权限，虽然 Claude Code 只有在极度发疯的情况下才会去破坏你的电脑，这种概率呢可以说是微乎其微，但是作为一个负责任的博主，我必须要提醒大家，这个选项会让 Claude Code 彻底的放飞自我，所以理论上呢还是有一定的危险性的，是否要为了效率承担这一丢丢的理论上的风险，决定权是在你们手里。

OK，演示完毕，回到我们原来的例子里，我们呢还是不用这个选项了，我们来选择第二项，只同意他以后可以自由的访问 react-to 目录，让 Claude Code 继续：

这里 Claude Code 询问我们能不能执行 npm install 命令，我们选择以后都同意
在这里插入图片描述

OK，这里 Claude Code 完成了整个项目，询问我们是否构建项目以检查错误，我们选择检查：

可以看到在构建项目检查时出现了一些问题，我们让 Claude Code 自己解决，等待一段时间即可。

可以看到整个项目构建完成了，并且在后台有 npm run dev 指令正在运行。

这里博主让 Claude Code 自动启动服务了，并且挂载在后台，所以再次提问时不会有任何阻塞：

我们可以使用 /tasks 指令来查看后台执行的任务：

注意最下面的提示，按 x 可以停止这个服务，在 UP 的演示视频中，他的关闭快捷键是 k。

这里还需要注意的是，在 UP 主的演示视频中他并没有让 Claude Code 使用 npm run dev 来启动服务器，而是自己手动来启动，主要是为了强调如果我们自己手动启动服务，这个服务的运行是会阻塞 Claude Code 的，这时输入任何指令 Claude Code 都是没有反应的。

我们可以按快捷键 Ctrl+B 将这个服务放置在后台，此时我们就可以让 Claude Code 开始处理我们最新的请求了，这样的话，我们后续的修改也能够实时看到效果，具体操作大家可以观看 UP 的视频讲解。

OK，现在我们来看下实现的整个功能怎么样：

那在博主自己体验了之后，整个页面做得还是不错的。

那现在假设我们想加一个切换语言的功能，目前使用的是英文，在页面右上角增加一个切换语言的选项，用户可以选择中文或者英文，默认为中文，让我们来输入请求：

可以看到 Claude Code 开始工作了，让我们稍作等待：

可以看到 Claude Code 并没有按照我们预期的在最新的 ReAct 版本上去做修改，反倒是去最原始的 todo.html 上去做的修改实现，它并没有很好的理解我们的需求，我们重新修改下请求让它去最新的 ReAct 版本上去做修改：

耐心等待即可，这里 Claude Code 没有理解博主的需求的主要原因其实是博主习惯性的执行了 /clear 指令，这个指令会清空当前的会话历史，这相当于开启一个全新的对话窗口，所以 Claude Code 才没有办法理解我们的需求。

OK，Claude Code 成功帮助我们在 ReAct 版本上完成了上述功能修改，我们回到页面看看：

可以看到效果不错，确实是加上了切换语言的选项，而且切换的结果也是符合预期的。

7. 图片 MCP 与上下文管理

不过你转念一想不对，我的用户都是老外呀，我加这个功能干什么呢，要不就回滚吧，那 Claude Code 能回滚吗，当然是可以的，对应的命令呢就是 /rewind，或者是说有个更简单的办法，你可以直接按两下 Esc 这样就进入到了回滚页面：

Note：由于博主之前执行了 /clear 操作，因此这里可以看到只有两个历史记录

我们每次输入请求的时候，Claude Code 都会创建一个回滚点，比如说我们不是想回滚到增加语言选项之前的那个版本吗，那就选择这个回归点就好了，选好之后按下回车：

然后 Claude Code 会给我们五个选项，是回滚代码和会话，还是说是只回滚会话还是只回滚代码，或者说进行总结，还是我们就放弃回滚，我们来选择第一个代码和会话都回滚：

OK，现在回滚成功了，页面也是没有问题，确实是回滚成功了，没有那个切换语言的选项了，是不是很棒呢。

假设这个时候，你觉得 React + TypeScript + Vite 这套架构好像是有点过于复杂了，你在想要不干脆我们就回滚到只有 todo.html 的那个版本就好了，那我们继续用回滚功能就行了。

不过呢在这之前，我们最好把 npm run dev 这个后台任务给关掉，毕竟回滚之后相关的文件都没了，这个后台任务也就没有什么用了，我们回到 Claude Code 这里，输入 /tasks 来查看后台任务，然后再按 x 结束掉当前的这个后台服务：

可以看到 Claude Code 帮助我们关闭这个服务了，并且它还询问我们关于这个 app 项目还有什么可以继续工作的。

停掉服务之后我们就可以回滚到最开始只有 tode.html 的那个版本，由于博主执行过 /clear 指令所以就无法演示了，大家可以查看 UP 主的视频演示：

这里 UP 主想要说明的是 Claude Code 只能回滚它自己写入的那些文件，至于由终端命令生成的文件，比如 mkdir 或者 npm install 之类的 Claude Code 是没有办法回滚的，所以这里建议大家还是不要太依赖 Claude Code 这个回滚功能了，如果要精准回滚的话，大家还是使用 git 会更好一点。

OK，回滚我们就讲到这里。

现在假设你对 Claude Code 做的页面一直都不太满意，所以呢你去 Figma 上面自己画了一个界面，就大概是下面这个样子：

Note：博主未使用过 Figma，这里直接截取的 UP 中视频的设计稿图片😂

你希望 Claude Code 仿照这个界面来做，那具体该怎么实现呢，很简单，我们只要把这个设计稿图片传给 Claude 就可以了，首先我们需要在 Figma 上面操作下把当前的这个设计稿导出为一个 png 图片，点击右侧的 Export 按钮即可。

下面我们的任务就是把这个图片传给 Claude Code，那怎么做到这一点呢，有两个方法，其中第一个方法就是直接把这个图片拖到 Claude Code 中：

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

这样我们的图片就粘贴上去了，紧接着呢我们就可以继续输入请求，让 Claude Code 根据图片来修改代码，具体的过程我们就不演示了，这个方法肯定行得通。

不过说实话，很多时候呢可能还原的并没有那么精确，比如说字体、间距之类的，Claude Code 很难通过图片做到非常精确的把握，所以这个时候呢我们其实还有另外一个方法，一个更为精确有效的方法，那就是使用 MCP 来实现这个还原 Figma 设计稿的需求。

MCP 是大模型与外界沟通的渠道，马克叔之前讲过 MCP 的使用方法和相关原理，大家感兴趣的可以看下：MCP终极指南 - 从原理到实战，带你深入掌握MCP（基础篇）

Figma 提供了一个很好用的 MCP Server 我们可以接入进来用用，首先我们需要安装这个 MCP Server：

根据 Figma 官方 [docs] 的要求，我们需要执行下面这一行命令，我们先退出 Claude Code 然后执行：

claude mcp add --transport http figma https://mcp.figma.com/mcp

这里博主已经安装过了，我们可以使用 claude mcp list 指令查看已安装的 mcp 服务。

接着我们需要重新打开 Claude Code，不过好像之前的对话全都没了呀，这可怎么办呢，别担心，我们可以使用 /resume 命令来回到之前的对话：

这里面的第一个就是我们刚才的那个对话了，我们按回车来选择它：

可以看到之前的对话回来了，如果你想跳转到之前的任何对话都可以通过 /resume 来选择。另外还有一种更为简单的办法，那就是在启动 Claude Code 的时候加上一个参数，完整的指令是 claude -c，这里面的 c 就是 continue 的缩写，它的功能就是打开 Claude Code 并自动恢复上一次的对话。

OK，那我们安装了 Figma 的 MCP Server 之后该如何使用它呢，我们打开 Claude Code 执行 /mcp 命令来查看目前所安装的 MCP 工具：

目前只有一个就是我们刚刚安装的 Figma，可以看到我们需要授权才能够使用这个工具，我们来选择这个 MCP 工具，然后再选择 Authenticate：

这个时候呢会自动弹出一个页面，让我们授权我们同意，我们点击同意之后会看到 Claude Code 提示我们授权成功了：

然后我们再执行 /mcp 选择 figma，这个时候可以看到 MCP Server 就是一个可用的状态了：

我们选择 View tools 就可以看到这个 MCP Server 内部所包含的工具列表：

其中有用来截图的，有创建设计规则的等等，具体我们就不看了，我们其实也不用太关心到底该使用哪个工具来完成我们的需求，我们让 Claude Code 来判断。

现在我们就可以输入我们的需求了，修改当前页面，使它与 figma 稿件一致，问题还没完，我们现在回到 Figma 页面这里，复制这个设计稿的链接，就点击这里面的 Copy link to selection 就好了：

Note：由于之前的图片不是真正的 Figma 设计稿，没有 Copy link to selection 选项，这边博主自己随意绘制了一个极简的稿件。

然后再回到 Claude Code 中把链接粘贴到对话中，回车：

可以看到 Claude Code 开始工作了，他首先是发现了我们的 Figma MCP 可以解决这个问题，请求调用 get_design_context 这个 MCP 工具来实现需求，我们选择同意。

值得注意的是，如果你使用的是 DeepSeek 的模型，那么它会出现如下的问题：

这个问题的原因是 Figma MCP 的输出链路本来就会带 “图片/截图类内容”，而博主现在用的 DeepSeek Anthropic 兼容接口不支持 image 类型消息，只支持文本格式消息，而像马克叔使用的模型就支持 image，那大家感兴趣的可以订阅 Doubao-Seed-Code 或者其他模型并进行相关配置，这里博主就跳过了，我们跟着 UP 主的视频演示一起来看看后面会发生什么。

然后 Claude Code 会请求调用 get_screenshot 工具获取对应设计稿的截图，我们也同意：

现在调用完两个工具之后，Claude Code 就获取到了全部的设计稿信息了，其中不仅包括设计稿的截图还有各种组件的间距、字体样式等，非常的详细，拿到这些信息后，Claude Code 就开始紧锣密鼓的修改现有的 html 代码，使他与 Figma 设计稿相同，我们稍作等待即可。

完成之后大家可以自己进浏览器比较一下看看效果怎么样，总的来说还是不错的，只是某些细节可能还需要打磨。

OK，那 MCP 我们暂时就讲到这里。

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

可以看到压缩完成了，我们按一下 Ctrl+O 就可以看到压缩后的上下文内容：

上图展示的就是压缩之后的结果了，我们之前在上下文里面有很多的信息，有代码、有 MCP 的调用结果之类的，现在全部的内容就只剩这么一点了。这样的话不仅 Claude Code 的性能有了保障，后面在执行任务时 token 的消耗量也会少很多。

这里再提一下关于上下文的另外一个命令，那就是 /clear，这个指令操作更为极端，它会直接把所有的上下文内容都给清空掉，一般来说如果我们后面的任务跟之前的上下文并没有什么关联的话，我们就可以使用这个 clear 命令来清空所有的上下文内容。

OK，现在压缩完成了，但是压缩结果的可控性并没有那么强，比如假设你想手动改改这里的压缩结果，Claude Code 可并没有给你提供这个选项，另外无论压不压缩上下文都跟某个会话绑定，我们下次进入到 Claude Code 的时候还必须要来到这个会话，否则 Claude Code 是不知道之前发生了什么的。

那有没有什么办法可以解决这些问题呢，有没有一种方案可以让 Claude Code 每次进来的时候都读取一些我们自己设定的一些信息，这样 Claude Code 就知道这是一个什么项目，用户有什么需求，我们甚至可以把各种注意事项都写在这里面，了解了这些信息之后 Claude Code 就可以更好地为我们工作了，有这种方案吗？🤔

当然是有的，这个就是 CLAUDE.md，我们来尝试使用一下，我们首先让 Claude Code 自己生成一份 CLAUDE.md 文件，用的指令是 /init：

可以看到 CLAUDE.md 创建完毕了，我们可以打开来看下：

看起来内容是有模有样的，不过很可惜它的语言是英文看起来不太方便，我们让 Claude Code 再把它给转成中文，转化完毕我们再回来看一下：

可以看到 CLAUDE.md 确实是中文了，另外提一下，CLAUDE.md 这里面的内容是可以随便修改的，比如说我们可以在最后面加上一句注意事项，每次回答的最后必须要追加这么一句 happy coding!：

然后我们回到 Claude Code 这里，先退出然后再重新进入，这样 Claude Code 就会重新加载我们那份最新的 CLAUDE.md 文件，我们来随便给 Claude Code 一个请求：

可以看到 Claude Code 回答了我们，最后呢也确实是加上了 happy coding!，可以看到我们的 CLAUDE.md 真的是起作用了，所以如果你有什么东西是希望 Claude Code 每次都读取的，那就直接放到 CLAUDE.md 文件里就好了。

试验完毕，现在我们需要把 CLAUDE.md 结尾中的那个注意事项去掉，要不每次都出现 happy coding! 会影响我们后续的演示，我们可以直接通过 vscode 编辑 CLAUDE.md 文件，不过这里嘛，我们顺便教大家另外一个打开 CLAUDE.md 的方法，我们在输入框里面输入 /memory：

在这里可以看出 CLAUDE.md 一共是有三种，一种是项目级别的对应的文件，就放在当前的目录里对当前项目生效；第二个呢是用户级别对应的文件，放在用户目录里，对当前用户生效；第三个是会话级，临时的文件。

我们之前用的是第一个，所以选择第一项，选择好了之后，对应的 CLAUDE.md 文件就自动打开了，这样我们就不用每次都自己在文件管理器里面找了，会稍微方便一点，打开 CLAUDE.md 文件之后，我们删掉最后面的注意事项并保存。

再回到 Claude Code 这里，重启一下，然后再随便问一句请求：

可以看到 happy coding! 已经没了，这说明我们的修改已经生效了，那 CLAUDE.md 文件就讲到这里。

8. Hook

Claude Code 还有个 hook 的功能，允许用户在运行工具前后，等时机执行一段自己指定的逻辑，比如说我们可以用它来做自动格式化。也就是说在 Claude Code 写完代码之后，自动执行我们设定的格式化函数，以便让最终的代码更加美观，更加符合我们的需求。

首先我们执行 /hooks 命令进入到 hook 的配置页面：

这里我们可以配置 hook 的执行时机，比如说是工具使用前、工具使用后、工具使用失败、发送通知等等，我们来选择第二项 PostToolUse 也就是工具使用后来执行这个 hook：

值得注意的是，这之后博主的操作就和 UP 主视频中的不一样了，因为博主新版 Claude Code 没有 “Add new matcher…”，这时是因为新版 Claude Code 已经从 GUI hooks 升级为 配置文件驱动模式，我们需要来修改 ~/.claude/settings.json 文件，修改后的内容如下：

{
  "skipDangerousModePermissionPrompt": true,
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs prettier --write"
          }
        ]
      }
    ]
  }
}

Note：这个 hook 需要使用 prettier，如果没有安装则需要自行安装，相应指令是 npm install -g prettier。

修改完成后我们再重新启动下 Claude Code，此时再进入 hooks 就会看到我们刚刚添加的新 hook：

这个 hook 的作用是：当 Claude Code 使用 Write 或 Edit 工具修改完文件后，自动触发一条 shell 命令，从 hook 输入的 JSON 数据中提取出被修改文件的路径，然后调用 prettier --write 对该文件进行格式化并直接写回。

简单来说，它就是让 Claude 在改完代码之后，顺手再帮你把代码排版整理一遍，从而保证前端文件的格式统一、减少手工格式化步骤，并让 Claude Code 更像一个带自动后处理能力的工程化开发工具。

OK，hook 创建好之后我们就来试试，我们的请求是创建一个新的文件 test.html，里面随便写点 HTML 就行，所有的内容都写在一行里面：
在这里插入图片描述

可以看到 Claude Code 确实是将所有的内容都写入到一行里面了，我们来看看最终生成的 test.html 文件：

可以看到这个文件的内容已经被格式化好了，并不是像一开始 Claude Code 写入的那样只有一行，这说明我们刚才写的那个 hook 生效了，在 Claude Code 写入完代码之后，我们的 hook 自动把那个文件给格式化了，所以我们现在看到的就是格式非常漂亮的 html 代码。

OK，hook 的功能我们就讲到这里。

9. Agent Skill

现在假设你每天都想写一个总结，记录下今天开发了哪些功能，而且呢这个总结必须要遵循一定的格式，比如一定要包含日期、开发摘要、开发详情之类的，你可以把对应的格式要求直接粘贴在输入框里面，让 Claude Code 帮你写一份，只不过这样的话你每天都要重复粘贴一遍，很麻烦。

这种事情其实非常适合使用 Agent Skill 来解决，UP 之前出过一个系统性讲 Agent Skill 的视频，大家感兴趣的可以看看：Agent Skill 从使用到原理，一次讲清

Skill 你可以大致把它理解为一个给大模型看的说明书，一个动态加载的 prompt，我们来创建一个 Agent Skill 试一下，首先我们通过如下指令创建一个文件夹：

mkdir -p ~/.claude/skills/daily-report

接着用 vscode 打开这个文件夹，创建一个叫做 SKILL.md 的文件，其内容如下：

---
name: daily-report
description: 生成每日开发进度日报。当用户想要总结今天的工作、写日报或汇报进度时使用此技能。
---

# daily-report

## 格式要求

请严格按照以下 Markdown 格式输出：

```markdown
# 🗓️ 开发日报 (YYYY-MM-DD)

## 💡 今日摘要
（用一句话总结今天的主要产出）

## 📝 详细变更

### ✨ 新增功能
- [模块名] 详情...

### 🐛 问题修复
- [模块名] 详情...

## ⚠️ 注意事项
- 使用中文生成报告。
- 语气要专业、简洁。

这个文件一共分为两部分，前面的 name 和 description 分别代表这个 Agent Skill 的名称和描述，Claude Code 会根据这一部分的内容来决定是否要使用这个 Agent Skill。后面的就是这个 Agent Skill 的具体描述了，这里主要是写了日报需要遵循的格式。

写好了之后，我们回到终端，重启一下 Claude Code，然后输入 /skills：

可以看到 Claude Code 已经发现了我们的 Agent Skill，然后我们回到输入框这里面输入我们的请求，写一份每日总结：

可以看出 Claude Code 发现了这个请求，并加载了相关的 skill 成功写出了总结，跟我们要求的格式是一模一样的，这个就是 Agent Skill 的使用方法了。

另外，这个 Agent Skill 的调用请求是由大模型发现并且发起的，除此之外呢，我们也可以按照下面这种方式来主动的发起这个 Agent Skill：

这个跟之前的效果其实是一样的，只不过是省去了大模型意图识别的过程，直接由用户调用了这个 Agent Skill，结果更加可控一些，具体我们就不演示了。

OK，那 Agent Skill 就大致讲到这里了，当然 Agent Skill 还有很多高级的用法，大家感兴趣的可以看下马克叔的视频。

10. SubAgent

下面我们再讲讲 Claude Code 的另外一个重要功能 SubAgent，这个其实就是一个独立的 Agent，有着自己独立的上下文、独立的工具、独立的 Skill，可以独立完成某一件事情，马克叔之前讲过 Agent 的原理，大家感兴趣的可以看下：Agent 的概念、原理与构建模式 — 从零打造一个简化版的 Claude Code

下面让我们来创建一个用于代码审核的 SubAgent，首先输入命令 /agents：

然后选择 Create new agent：

这里面要选择 Agent 的类型是项目级别还是用户级别：

我们来选择项目级别，也就是说使用这个项目的人都能用。

接下来选择 Agent 的创建方法：

一种是用 Claude Code 初始化，另外一种是完全手动创建，第一种是推荐方法，所以我们选它。

接下来我们描述一下这个 Agent 要做的事情，我们填入以下内容，这是一个用于代码审核的 SubAgent，在用户要求 “代码审核” 的时候调用它：

回车，可以看到 Claude Code 正在生成这个 SubAgent，让我们稍等一下：

接下来我们选择这个 SubAgent 能用的工具：

我们选择 Read-only tools 就好，也就是说只能够使用只读工具，其余的都去掉。

模型就选择和主对话保持一样的就行：

接下来选择这个 SubAgent 的颜色：

Claude Code 在运行这个 SubAgent 的时候会使用我们选择的颜色来展示它，我们用绿色吧。

接着我们还要选择配置这个 SubAgent 的 memory，我们选择推荐默认的就行：

然后 Claude Code 就会给我们生成这个 SubAgent，可以看到这个 SubAgent 的描述是英文的：

而且里面的内容大概率也不会跟我们期望的完全相同，我们按一下 e 来编辑一下这个 SubAgent 的描述：

上面就是 Claude Code 给我们生成的 SubAgent 的描述了，不过呢它跟我们想要的那个版本差距有点大，所以这里我们来给这个sub agent的整体替换一下，换成适合我们这个场景的，替换的内容如下：

---
name: code-reviewer
description: 当用户请求代码审查、Code Review 或检查规范时调用。此代理专门根据团队特定的 JS 和 CSS 规范对代码进行审查。
model: inherit
color: green
---

你是一个严格的代码规范审查员。你的唯一任务是检查代码是否违反了以下三条【团队核心规范】。

## 审查准则

请逐行扫描代码，检查是否违反以下规定：

1. **【JS 变量】严禁使用 `var`**
   - 必须使用 `const` 或 `let`。如果发现 `var`，请指出并要求修改。

2. **【命名规范】CSS 命名必须使用 `kebab-case`**
   - 所有的 CSS 类名（class）和 ID 必须使用短横线命名法（例如：`todo-item`）。
   - 禁止使用驼峰命名（例如：`todoItem`）。

## 输出要求

如果有违反上述规则的情况，请按以下格式输出：

- ❌ **违反规则**：简述违反了哪一条。
- 📍 **位置**：文件名及代码行号。
- 💡 **修正建议**：给出修改后的代码片段。

如果代码完全符合上述三条规范，请回复：“✅ 检查完毕，代码符合团队核心规范。”

SubAgent 的结构与 Agent Skill 类似，一共是分为两部分，上面是元数据，写明了这个 SubAgent 的名称、描述、所使用的模型颜色等等；下面就是这个 SubAgent 具体要干的事情了，我们的要求有两条，一个是审查的准则，里面有两项，一项是针对 JS 的，一项是针对 CSS 的，最后会有一个输出格式方面的一个要求，我们后面就看一下 Claude Code 能否遵循这个 SubAgent 的规范。

填完了这个 SubAgent 的描述之后，我们重启下 Claude Code，我们提交一个请求，请给我对 todo.html 做一下代码审核：

可以看到 Claude Code 调用了我们刚才创建的 SubAgent 并把对应的任务描述传给了他，让他处理，从给出的代码审核报告可以看出，他检查的内容确实是我们在 SubAgent 描述文件里面要求的，这个就是 SubAgent 的使用方法了。

有人可能会问，Agent Skill 跟 SubAgent 很像啊，他俩有什么区别呢？其实吧，他俩最大的区别就在于对上下文的处理方式不同：

Agent Skill 运行的时候，它会完全继承并且共享你当前主对话的上下文，这就意味着它执行过程中的每一行日志，每一个思考过程都会进入到你的当前上下文。

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

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

因此 Agent Skill 与 SubAgent 的最大区别就在于 对上下文的处理方式不同，大家要根据具体的场景来选择合适的方案。

11. Plugin

下面我们再讲讲 Plugin 这个东西，你可以把 Plugin 想象成一个全家桶的安装包，有点像是 macOS 的 DMG 或者是 Windows 下面的 EXE 文件，他把一系列的 Skill、SubAgent、Hook 等能力全部打包在一起，你只需要一键安装 Claude Code 就能够瞬间获得整套高级能力。

下面我们来给大家演示一下，我们先输入 /plugin 进入到插件管理器：

这里面有四个选项分别是：Discover 也就是发现新插件，Installed 已安装的插件，Marketplaces 插件市场，Errors 错误插件。

我们在 Discover 里面找到 frontend-design 这个插件（图中第一个），按回车安装：，接下来要选择安装范围：

有三个可选范围，分别是对当前用户生效，对当前项目生效，或者是对当前用户的当前项目生效，我们维持默认就好了，确定后安装就完成了：

没错，就是这么快，这里简单说明一下，frontend-design 是一个用来做前端设计的插件，一般来说大模型做的前端都有一定的共性，比如说是用深紫色的主题啊等等，这个插件呢据说可以打破这个共性，让界面看起来更加好看一点，我们等会儿来看看是不是这个样子的。

安装好了之后，我们重启 Claude Code，然后使用 mkdir 命令新建一个目录 my-todo2，然后我们进入到这个目录里面再启动 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 的规范，于是他先加载了这个 Skill，并询问我们是否同意编辑，我们选择同意，耐心等待一段时间：

可以看到他成功生成了一个 index.html 文件，我们接下来看下效果怎么样：

大家可以看到上面这个页面跟我们一开始写出来的那个 demo 相比风格就完全不一样了，它的排版更加高级、色彩更加协调、交互也更符合现代审美，这个就是 frontend-design 这个插件的力量了。

目前 Claude Code 的插件市场还在迅速的增长，除了 UI 设计之外还有一些针对特定编程语言的 LSP 插件等等，当然如果你觉得自己的配置写得非常好的话，也可以参考官方的文档把你的 Skill、SubAgent、MCP 等等东西打包成插件，分享给你的团队或者是社区。

OK，以上就是本期想要分享的全部内容了。

结语

本篇文章博主跟着 UP 的视频教程从实战的角度，对 Claude Code 这一编程 Agent 工具进行了系统性的梳理，从环境搭建到核心功能，再到高级扩展能力。

在基础部分，我们首先解决了 Claude Code 的安装、代理访问以及模型接入问题，并通过接入 DeepSeek 等兼容接口，让整套工具链能够稳定运行起来。随后我们通过一个简单的项目，体验了 Claude Code 的核心交互方式，包括不同模式（默认模式 / 自动模式 / Plan 模式）的使用，以及终端命令与文件操作的协同流程。

在进阶部分，我们重点探索了 Claude Code 在复杂工程场景下的能力，包括 Plan Mode 的方案设计能力、后台任务管理、多轮上下文控制与回滚机制，并进一步结合 MCP（Figma）、上下文压缩（/compact）、持久记忆（CLAUDE.md） 等能力，让 Claude Code 从一个简单的 “写代码工具”，升级为一个具备工程理解能力的智能开发助手。

在高级扩展部分，我们深入分析了 Claude Code 的可定制能力，包括 Hook（自动化后处理）、Agent Skill（结构化能力复用）、SubAgent（多智能体协作）、Plugin（能力打包分发）。这一部分实际上揭示了 Claude Code 的本质：它不仅是一个工具，更是一个可编程的 Agent 系统平台。

整体来看，Claude Code 的核心价值并不在于 “帮你写代码”，而在于它能够将开发流程中的多个环节（设计、编码、调试、规范、自动化）统一到一个 Agent 框架之中，并通过 Skill / SubAgent / MCP 等机制实现能力的模块化与可复用。这种模式，本质上就是未来软件工程的一种新范式。

如果你已经掌握了本文中的这些核心用法，那么恭喜你，你已经不只是 “会用 Claude Code”，而是开始真正理解如何构建和使用一个 AI 编程 Agent 系统。后续无论是 Codex、OpenCode，还是其他 Agent 工具，本质上都只是不同实现形态而已。

说实话，这是博主第一次体验 Claude Code CLI，原以为 CLI 终端可视化效果差，远不如 IDE 来得直接，但习惯之后发现还是非常好用的，这里感谢马克叔的教程，让博主对 Claude Code 又有了一个新的认识。

最后，希望这篇文章能够帮助大家把 Claude Code 从一个 “新奇工具”，变成你日常开发中真正高效、可靠的生产力伙伴🤗。

参考

# MCP
Logo
龙虾开发者社区

小龙虾开发者社区是 CSDN 旗下专注 OpenClaw 生态的官方阵地，聚焦技能开发、插件实践与部署教程，为开发者提供可直接落地的方案、工具与交流平台，助力高效构建与落地 AI 应用

更多推荐

OpenClaw+GLM-4.7-Flash语音交互：对接Whisper实现语音控制

本文介绍了如何在星图GPU平台上自动化部署【ollama】GLM-4.7-Flash镜像，构建语音交互系统。该系统结合Whisper语音识别与GLM-4.7-Flash的指令理解能力，实现智能家居控制等场景的语音操作，提升日常任务执行效率。

avatar 龙虾开发者社区

学生党福音：OpenClaw+nanobot搭建学习监督助手

本文介绍了如何在星图GPU平台上自动化部署🐈 nanobot：超轻量级OpenClaw镜像，构建智能学习监督助手。该方案利用轻量级模型实现网课进度跟踪、自动生成练习题和错题整理功能，特别适合学生群体通过QQ机器人实现移动端学习管理，显著提升学习效率。

avatar 龙虾开发者社区

OpenClaw创意工坊：用nanobot镜像生成技术海报文案

本文介绍了如何在星图GPU平台上自动化部署🐈 nanobot：超轻量级OpenClaw镜像，快速生成技术海报文案。该镜像基于Qwen3-4B模型，能将复杂技术术语转化为通俗表达，适用于技术活动宣传、社交媒体推广等场景，显著提升内容创作效率。

avatar 龙虾开发者社区