视频学习笔记
← 返回未分类
哔哩哔哩🗂️ 未分类00:44:442026-08-20观看原视频 ↗

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

整体摘要

这是一期面向实战的 Claude Code 全流程教学视频，作者以「做一个待办软件」为主线项目，从安装登录一路讲到插件系统，完整覆盖了从入门到生产环境落地的全部关键环节。视频分为四个部分：环境搭建与基础交互、复杂任务处理与终端控制、上下文与记忆管理、高级功能扩展与定制（MCP、Hook、Agent Skill、SubAgent、Plugin）。

核心知识点包括：三种交互模式（默认/自动/规划）的切换与适用场景、Plan Mode 下的大工程重构流程、终端命令与文件写入的权限分离机制、--dangerously-skip-permissions 的风险与收益、后台任务管理（Ctrl+B / /tasks）、回滚机制（/rewind）的能力边界、图片输入与 Figma MCP 精确还原设计稿、上下文压缩（/compact 与 /clear）、CLAUDE.md 项目记忆、Hook 自动格式化（jq + xargs + prettier）、Agent Skill 与 SubAgent 的本质区别（上下文处理方式不同）、以及 Plugin 一键安装全家桶。

作者特别强调：同类编程 Agent（Codex、OpenCode 等）与 Claude Code 在功能和使用上差别不大，掌握 Claude Code 后可以一通百通。

01

开场与课程总览

00:00 - 01:09

介绍视频定位——不整虚的，从头到尾把 Claude Code 实战流程彻底走一遍，并给出四大部分的课程结构。

关键时间节点
时间类型说明
00:20核心概念视频四大部分结构：环境搭建与基础交互、复杂任务处理与终端控制、（上下文处理）、高级功能扩展与定制
00:49重点结论同类产品（Codex、OpenCode 等）与 Claude Code 功能和使用上无太大区别，学会后一通百通
详细内容
  • 光会敲几个简单命令远不足以把 Claude Code 从入门落地到生产环境，本视频目标是彻底吃透并变成最顺手的生产力工具。
  • 屏幕上提供密密麻麻的知识点和时间戳，可作为索引快速定位。
02

安装、登录与模型选择

01:09 - 03:07

从官网复制安装命令完成安装，讲解两种标准接入方式（订阅制 / API Key），以及用国产模型驱动 Claude Code 的思路。

关键时间节点
时间类型说明
01:09关键步骤官网复制安装命令 → 终端粘贴安装
01:26关键步骤mkdir my-todo 创建项目目录，进入后执行 claude 命令启动
01:43核心概念首次进入会提示登录；未提示可执行 /login 主动触发
01:50核心概念两种标准接入方式：订阅制（Pro/Max 会员）与官方 API Key（按 token 用量计费）
02:30核心概念Claude Code 是通用编程 Agent，不与 Claude 模型绑定，可用 GLM、MiniMax 等国产模型驱动（设置几个环境变量即可）
详细内容
  • 登录流程：选择订阅制后会弹出网页要求授权，同意后回到终端按回车完成登录。
  • 国产模型驱动的具体方法网上一搜一大堆，本质是设置环境变量。
03

第一个项目与三种交互模式

03:07 - 06:37

用自然语言让 Claude Code 生成待办软件，理解文件写入的三个确认选项，以及 Shift+Tab 在三种模式间的循环切换。

关键时间节点
时间类型说明
03:00关键步骤输入第一个需求：「给我做一个代办软件，使用 HTML 实现」
03:12核心概念文件创建确认的三个选项：Yes（单次授权）/ Yes, allow all edits during this session（本会话自动通过）/ No（拒绝并补充想法）
03:59核心概念选择第二项后输入框下方出现 accept edits on，表示自动同意模式已开启
04:07关键步骤Shift+Tab 在三种模式之间循环切换
05:08重点结论三种模式总结（见下）
05:55关键步骤输入 ! 进入 Bash 模式，可直接运行任意终端命令（如 open index.html）
06:20警告/注意Claude Code 默认把所有代码写进单个 index.html，小项目尚可、大项目维护是灾难，应尽早换 React + TypeScript + Vite 分模块架构
详细内容

三种模式对比：

模式界面标识行为特点
默认模式问号 for shortcuts（无模式标注即默认）创建/修改文件前一定询问用户最稳妥
自动模式accept edits on自动创建/修改文件，不询问最方便
规划模式plan mode只讨论方案、不修改文件适合构思

注意：底部「? for shortcuts」只是快捷键提醒，不是一种模式；没有标注模式的状态就是默认模式。

04

Plan Mode——重构为 React + TypeScript + Vite

06:37 - 10:04

改架构是大工程，先用 Plan Mode 确定细节再动手。涉及多行输入、外部编辑器、计划审阅与修改的完整流程。

关键时间节点
时间类型说明
06:43核心概念Plan Mode 专门用来讨论方案、确定细节，改架构这类大工程先用它
06:58关键步骤Shift+Tab 进入 Plan Mode，输入「将当前代办应用重构为 React + TypeScript + Vite 项目，保留所有现有功能」
07:14关键步骤换行用 Shift+Enter（直接敲回车会提交问题）；不好用说明版本太旧需升级
07:39关键步骤Ctrl+G 打开 VS Code 标签页编辑长需求（回车随便按，保存关闭后内容自动进入输入框）
08:35核心概念计划产出后的三个选项：执行并进入同意模式 / 执行但保持默认模式 / 继续修改计划
09:04关键步骤演示修改计划：为每个待办事项增加高/中/低优先级并用不同颜色标记，Claude Code 会产出新计划
09:45关键步骤选择第一项「执行计划并进入自动同意模式」，模式切换为 accept edits on
详细内容
  • 生成的计划包含目标、项目清单、目录结构等信息，覆盖完善。
  • 对计划不满意可以继续用自然语言提修改意见，模型会重新产出一份新计划。
05

终端命令权限控制

10:04 - 12:46

accept edits on 只对文件写入生效，终端命令仍会逐条询问；介绍跳过所有权限检测的启动参数及其风险。

关键时间节点
时间类型说明
10:04警告/注意执行计划中 mkdir 仍被询问——accept edits 模式只免文件写入确认，不覆盖终端命令
10:34核心概念Claude Code 认为执行终端命令是危险操作，必须征得用户同意；且没有「自动执行所有终端命令」的选项（第二项只是允许自由访问特定目录如 src）
11:10关键步骤启动参数 claude --dangerously-skip-permissions：跳过所有权限检测
11:40核心概念加参数后模式变为 bypass permissions on，安装依赖、删除文件、创建目录都不再询问
11:54警告/注意双刃剑：提升效率 vs 理论上拥有与你一样的终端权限；官方把 dangerous 写在参数名里，是否使用由用户自己权衡
详细内容
  • 官方刻意在参数里用「dangerously（危险的）」这个词，意图非常明确。
  • 演示后回到原例子仍选择常规方式：同意其自由访问 src 目录、npm install 选「以后都同意」。
06

手动启动服务与后台任务

12:46 - 14:48

拒绝自动启动 dev server 改为手动执行，发现服务运行会阻塞 Claude Code，学会用 Ctrl+B 挂后台和 /tasks 管理。

关键时间节点
时间类型说明
12:54关键步骤拒绝 npm run dev 自动启动，告知「这个命令等会我自己执行，你确保其他部分都完成」
13:31示例说明手动执行 npm run dev，服务器启动成功，网页功能验证正常
13:55核心概念服务的运行会阻塞 Claude Code——输入 hi 无回应，因为服务占着终端，新请求无法处理
14:10关键步骤Ctrl+B 将服务放置后台，Claude Code 立即恢复处理请求
14:25关键步骤/tasks 查看后台任务，确认 npm run dev 在运行
14:36关键步骤在 /tasks 界面按 K 可关闭该服务；按 Esc 返回主界面
详细内容
  • 让 dev server 一直跑着的好处：后续修改可以实时在页面上看到效果（热更新）。
07

回滚机制与能力边界

14:48 - 19:05

完整演示 /rewind（双击 Esc）回滚代码与会话的流程，并揭示关键局限：终端命令生成的文件无法回滚，精确回滚应依赖 git。

关键时间节点
时间类型说明
14:51示例说明新增「右上角切换中英文」功能演示回滚场景
15:39关键步骤回滚命令 /rewind，或直接双击 Esc 进入回滚页面
15:50核心概念每次输入请求时 Claude Code 都会创建一个回滚点
16:04核心概念选定回滚点后的四个选项：回滚代码和会话 / 仅回滚会话 / 仅回滚代码 / 放弃回滚
16:43警告/注意跨大版本回滚前先关后台任务：回滚后相关文件没了，后台任务无意义（/tasks → 按 K）
17:36关键步骤ls 列举目录文件；默认只显示部分，按 Ctrl 显示全部
18:03重点结论回滚局限：Claude Code 只能回滚它自己写入的文件；mkdir、npm install 等终端命令生成的文件无法回滚
18:22重点结论不要太依赖 Claude Code 的回滚功能，精准回滚使用 git 更好
详细内容
  • 演示了两层回滚：先回滚「切换语言」功能，再回滚到「重构前只有 index.html」的版本。
  • 回滚 index.html 本身是成功的（它是 Claude Code 自己把控的文件），残留的 node_modules 等需手动删除。
  • 回滚后 Claude Code 提示「开发服务器运转正常」属于模型判断失误（晕了），实际服务已被关掉，可忽略。
08

图片输入——设计稿交给 Claude Code

19:05 - 20:52

介绍把 Figma 设计稿图片传给 Claude Code 的两种方法（拖拽 / Ctrl+V 粘贴），并指出图片还原精度有限，引出 MCP 方案。

关键时间节点
时间类型说明
19:26核心概念把设计稿图片传给 Claude Code 的两个方法
19:49关键步骤方法一：直接把图片文件拖进 Claude Code 输入区（出现 image 标识代表接收成功）
20:07关键步骤方法二：复制文件后按 Ctrl+V 粘贴；注意 macOS 上也必须用 Ctrl+V，Command+V 无效
20:37警告/注意图片方式的局限：字体、间距等细节难以精确把握，还原度不够高
详细内容
  • Figma 中通过 Export Frame 将设计稿导出为 PNG。
09

MCP 实战——接入 Figma 精确还原设计稿

20:52 - 24:49

MCP 是大模型与外界沟通的渠道。安装 Figma MCP Server、授权、让模型自主调用 get_design_context 与 get_screenshot 获取精确的设计数据（截图、间距、字体样式），还原度大幅提升。

关键时间节点
时间类型说明
20:52核心概念MCP 定义：大模型与外界沟通的渠道，是比贴图片更精确有效的方案
21:12关键步骤按 Figma 官方文档执行一行命令安装 MCP Server（先 Ctrl+C 退出 Claude Code）
21:39关键步骤/resume 选择并恢复之前的对话
21:58关键步骤更简单的方式：启动时加参数 claude -c（continue），自动恢复上一次对话
22:13关键步骤/mcp 查看已安装的 MCP 工具，对新工具执行 authenticate 授权
22:47关键步骤view tools 查看 MCP Server 内部工具列表（截图、创建设计规则等）
23:08关键步骤输入「修改当前页面使它与 Figma 稿件保持一致」+ 粘贴设计稿链接（copy link to selection）
23:42核心概念模型自主决策调用链：先 get_design_context 获取设计上下文，再 get_screenshot 获取截图
24:02重点结论两个工具调用完成后获得全部设计稿信息：截图 + 组件间距 + 字体样式，非常详细
24:28示例说明还原效果与原稿对比：还原程度相当高，仅剩 undefined/NaN 等细节需打磨
详细内容
  • 不需要关心该用哪个 MCP 工具——让 Claude Code 自己判断选择。
  • 工具调用仍需用户同意（MCP 工具调用属于敏感操作）。
10

上下文管理——/compact 与 /clear

24:49 - 26:30

长时间对话后上下文堆积大量无用信息，/compact 压缩（可附加保留策略），/clear 彻底清空；Ctrl+O 查看压缩结果。

关键时间节点
时间类型说明
24:51核心概念上下文压缩的动机：代码、工具调用结果堆积，有用无用混杂
25:12关键步骤/compact 直接执行，或在其后追加压缩策略（如「重点保留用户提出的需求」）
25:35关键步骤Ctrl+O 查看 / 切换压缩后的上下文内容
25:55重点结论压缩后性能有保障、后续任务 token 消耗大幅减少
26:05核心概念/clear 更极端：直接清空所有上下文；适用于后续任务与之前上下文无关联的场景
详细内容
  • 压缩结果的可控性不强：无法手动修改压缩结果，Claude Code 未提供此选项。
11

CLAUDE.md——持久化项目记忆

26:30 - 29:47

上下文（含压缩结果）都与特定会话绑定，换会话即失忆。CLAUDE.md 让 Claude Code 每次启动都读取用户设定的项目信息、需求与注意事项。

关键时间节点
时间类型说明
26:44核心概念问题根源：无论压不压缩，上下文都跟某个会话绑定，必须回到该会话模型才知道之前发生了什么
27:13核心概念CLAUDE.md：每次进入都自动读取的自定义信息（项目说明、用户需求、注意事项）
27:20关键步骤/init 让 Claude Code 自动生成一份 CLAUDE.md
28:03示例说明验证实验：在文件末尾加「每次回答的最后必须追加 happy coding」→ 重启 → 回答末尾确实出现 happy coding
28:58关键步骤/memory 快捷打开 CLAUDE.md 文件，无需去文件管理器找
29:05核心概念CLAUDE.md 分两种级别：项目级（当前目录，对当前项目生效）与用户级（用户目录，对当前用户生效）
详细内容
  • /init 生成的文件默认是英文，可以让 Claude Code 转成中文。
  • 文件内容可随意修改；修改后重启 Claude Code 重新加载生效。
  • 「希望 Claude Code 每次都读取的东西，直接放进 CLAUDE.md」。
12

Hook——工具执行后自动格式化

29:47 - 33:18

Hook 允许在工具运行前后等时机执行自定义逻辑。以 PostToolUse + write/edit 触发 jq+xargs+prettier 自动格式化为例，讲解配置流程与三级保存位置。

关键时间节点
时间类型说明
29:48核心概念Hook：在运行工具前后等时机执行用户指定的逻辑，典型场景是写完代码后自动格式化
30:05关键步骤/hooks 进入 Hook 配置页面
30:09核心概念Hook 执行时机：工具使用前 / 工具使用后 / 工具使用失败 / 发送通知等
30:16关键步骤选择 PostToolUse（工具使用后），匹配工具填 write 或 edit（创建/编辑文件时触发）
30:48核心概念Hook 收到的入参是一份 JSON，其中 file_path 是刚编辑好的文件路径
31:06核心概念命令解析：jq 解析 JSON 取出 file_path → xargs 传给 prettier → prettier 格式化该文件
31:36核心概念Hook 保存的三级位置：本地项目级 settings.local.json（自动加入 .gitignore 不共享）/ 项目级 settings.json（随 git 分发给所有人）/ 用户级（用户目录，每人一份互不影响）
32:36示例说明验证：让 Claude Code 把所有 HTML 写成一行 → 生成文件已被 hook 自动格式化为多行漂亮代码
详细内容
  • jq 是解析 JSON 的命令行程序，不熟悉可自行查阅。
  • 演示中选择了项目级（settings.json），让所有使用该项目的人都能用到该 hook。
13

Agent Skill——动态加载的说明书

33:18 - 36:04

以「每日开发总结必须遵循固定格式」为例，创建 daily-reports Agent Skill，讲解 skill.md 的结构与两种触发方式（模型自动识别 / 斜杠命令手动调用）。

关键时间节点
时间类型说明
33:18示例说明场景：每天写包含日期、开发摘要、开发详情的总结，每次粘贴格式要求太麻烦
33:49核心概念Agent Skill 本质：给大模型看的说明书、一个动态加载的 prompt
33:58关键步骤mkdir 创建 ~/.claude/skills/daily-reports/ 文件夹
34:13关键步骤在其中创建 skill.md 文件
34:24核心概念skill.md 结构：前半部分 name + description（模型据此决定是否使用该 skill），后半部分具体说明（如日报格式要求）
34:51关键步骤重启后 /skills 可看到 Claude Code 已发现该 Agent Skill
35:07核心概念触发方式一：输入「写一份每日总结」，模型自动识别意图、请求使用该 skill
35:31核心概念触发方式二：/daily-reports + 具体请求 手动调用，省去意图识别、结果更可控
详细内容
  • 日报输出与 skill.md 中要求的格式一模一样。
  • Agent Skill 还有更多高级用法，作者另有专题视频。
14

SubAgent 及与 Agent Skill 的区别

36:04 - 40:38

创建一个只读的代码审核 SubAgent，讲解其配置项与描述文件结构，最后给出两者最核心的区别——对上下文的处理方式不同。

关键时间节点
时间类型说明
36:04核心概念SubAgent：独立 Agent，拥有独立上下文、独立工具、独立 skill，可独立完成某件事
36:25关键步骤/agents → create new agent → 选项目级别 → 选 Claude Code 初始化（推荐）或手动创建
37:06关键步骤配置项：工具选 read only tools（只读）、模型默认 Sonnet、颜色选绿色（运行时以此颜色展示）
37:43关键步骤按 E 编辑 SubAgent 描述；生成内容是英文且可能与期望有差距，建议整体替换
38:00核心概念SubAgent 描述文件结构与 Agent Skill 类似：上面元数据（名称、描述、模型、颜色），下面具体要做的事
38:42示例说明重启后输入「给我做一下代码审核」→ Claude Code 调用绿色 SubAgent 并传入任务描述，产出符合描述文件要求的审核报告
39:27重点结论Agent Skill：完全继承并共享主对话上下文，执行过程的每行日志、每个思考都会进入当前上下文
39:39警告/注意用 skill 审核几万行代码的项目会塞满上下文窗口：token 消耗飙升、Agent 因记忆过载变慢变傻
39:51重点结论Agent Skill 适合：与上下文关联大、对上下文影响小的任务（如根据今天开发过程写总结）
40:04重点结论SubAgent：拥有完全独立的上下文，开辟全新对话窗口，中间过程不回传主对话，干完活只拿最终结果汇报
40:24重点结论SubAgent 适合：与上下文关联小、对上下文影响大的任务（如代码审核）
40:34重点结论一句话总结：两者最大区别在于对上下文的处理方式，按场景选择
详细内容
  • 演示的代码审核 SubAgent 描述包含：审查准则（JS 一项 + CSS 一项）与输出格式要求。
  • 主对话始终干净，永远不会被琐碎的中间过程撑爆——这是 SubAgent 的核心价值。
15

Plugin——一键安装全家桶

40:38 - 44:44

Plugin 类似 DMG/EXE 安装包，把 skill、SubAgent、hook、MCP 等能力打包一键安装。演示安装 frontend-design 插件并验证其对前端设计质感的提升。

关键时间节点
时间类型说明
40:41核心概念Plugin = 全家桶安装包（类比 macOS 的 DMG / Windows 的 EXE），打包一系列 skill、SubAgent、hook 等能力
41:02关键步骤/plugin 进入插件管理器，三个标签：discover（发现新插件）/ installed（已安装）/ marketplaces（插件市场）
41:17关键步骤安装 frontend-design 插件，安装范围三选一：当前用户 / 当前项目 / 用户的当前项目（默认即可）
41:39核心概念frontend-design：打破大模型前端设计的共性（如清一色深紫色主题），让界面更好看
42:27核心概念该插件的组成元素是一个 Agent Skill；有些 plugin 包含 skill、MCP、hook 多个元素，等于整套能力一次装齐
42:38关键步骤/skills 验证：安装 plugin 本质上就是安装了它包含的 agent skill
43:09示例说明在新目录 my-todo2 中输入「按照 frontend design 的要求做一个代办软件，使用 HTML 实现」
43:20核心概念模型未直接写代码：先识别出用户要求使用该规范 → 请求使用 skill → 读取后获得 Anthropic 官方沉淀的整套 UI 设计直觉
43:59重点结论效果对比：与最初 demo 相比风格完全不同——排版更高级、色彩更协调、交互更符合现代审美
44:12重点结论插件市场正在快速增长；除 UI 设计外还有针对特定编程语言的 LSP 插件等
44:22关键步骤进阶：参考官方文档，可把自己的 skill、SubAgent、MCP 打包成插件分享给团队或社区
详细内容
  • 安装插件后需重启 Claude Code 生效。
  • 安装范围的选择影响插件对谁生效（用户 / 项目 / 两者交集）。

整体总结

视频以单个待办软件项目为线索，把 Claude Code 的能力分层递进地串了起来：

  1. 基础层：安装登录（订阅/API Key/国产模型）、三种交互模式（默认/accept edits/plan）、! Bash 模式、Shift+Enter 换行、Ctrl+G 编辑器。
  2. 控制层：文件写入与终端命令的权限是分离的；--dangerously-skip-permissions 可跳过一切但风险自负；Ctrl+B 后台化阻塞的服务，/tasks 管理。
  3. 安全层：/rewind（双击 Esc）基于每次请求的回滚点，但只能回滚模型自己写的文件，终端命令产物回滚不了——精确回滚靠 git。
  4. 输入层：图片拖拽 / Ctrl+V 传入设计稿；更精确的路径是 MCP（Figma Server 的 get_design_context + get_screenshot 拿到截图、间距、字体等完整数据）。
  5. 记忆层：/compact 压缩（Ctrl+O 查看）、/clear 清空解决会话内上下文膨胀；CLAUDE.md（/init 生成、/memory 打开，项目级/用户级）解决跨会话持久记忆。
  6. 扩展层：Hook（/hooks，PostToolUse + jq + xargs + prettier 自动格式化，三级保存位置）；Agent Skill（~/.claude/skills/<name>/skill.md，name+description+正文，模型自动识别或斜杠手动触发）；SubAgent（/agents 创建，独立上下文/工具/模型/颜色）。
  7. 生态层：Plugin（/plugin）把 skill/SubAgent/hook/MCP 打包一键安装，frontend-design 实测显著提升前端质感；也可以把自己的配置打包分享。

选型心法：Agent Skill 共享主对话上下文（适合关联大、影响小的任务），SubAgent 独立上下文只回传结果（适合关联小、影响大的任务）——区别的本质是对上下文的处理方式。