Claude Code自适应学习Skill 7天刷完浏览器原理

前言

最近我用 Claude Code 配合自己编写的自适应学习 Skill，一口气学完了李兵老师的《浏览器工作原理与实践》专栏。总共 37 节内容，仅用了 7 天就全部通关。并非简单地“让 AI 复述一遍”，而是每次讲解后立即做题验证，答错就换角度重新讲解，学过的知识点还会在数天后自动弹出复习题，帮助巩固记忆。

之所以能做到这些，是因为我开发了一个名为 ai-tutor 的 Skill——一个自适应 AI 导师系统。

接下来我会详细介绍它的设计思路、核心机制，以及如何安装和使用。

为什么需要这个 Skill？

用 AI 辅助学习技术时，常会遇到几个痛点，我们来逐一分析：

1. 讲完了但不确定是否真正掌握了。 AI 输出内容时，现场感觉“懂了”，但过两天一问三不知，这种情况太常见了。学习效果难以验证。

2. 缺乏进度管理。 学到哪了？哪些概念已经掌握？哪些还比较模糊？全靠脑子记忆。一旦同时学习多个技术主题，很容易混乱。

3. 跨会话记忆丢失。 昨天学到第 15 节，今天开启新会话，AI 完全不记得之前的学习进度。每次都要重新交代背景，效率非常低。

4. 教学方式一刀切。 学 React Hooks 和学 React Fiber 源码是两种截然不同的学习需求，但 AI 默认使用同一套回答方式，针对性很差。

ai-tutor 就是针对这四个关键痛点设计的解决方案。

核心设计：讲解 → 实践 → 验证 闭环

传统的 AI 学习方式往往是“单向灌输”：你提问 → AI 回答 → 你觉得懂了 → 结束。结果经常是“学了像没学”，知识留存率很低。

ai-tutor 的做法是强制在整个学习链路中嵌入一个验证环节，形成闭环：

AI 讲解 → 出题考核 → 你回答 →├─ 通过 → 更新进度，下一节├─ 接近正确 → 给提示，微调后通过└─ 概念性错误 → 换角度重讲，出新题

这也是为什么 ai-tutor 中有一条严格规定：任何知识点讲解完成后，不允许问“懂了吗”这种无法检验的问题。每个知识点必须有对应的考核题目，题型会根据内容自动选择：

四种学习模式，自动识别

不同的学习目标需要不同的教学方式。ai-tutor 会根据你的输入自动选择最合适的模式：

知识模式 — 学概念、理解原理

触发信号：纯技术名词，例如“学 React Hooks”、“理解 TypeScript 泛型”。

特点：

• 根据知识域规模自动选择大纲策略（小型/中型/大型）
• 大型知识域先展示架构鸟瞰图，让你选择聚焦区域
• 每个知识点讲完后立刻出题验证
• 学习前自动检测前置知识（学 Hooks 前先检查闭包基础）
• 基础不足时自动补课，若跳过则在后续讲解中用通俗类比弥补

你: /ai-tutor 我想理解 React Hooks​AI Tutor:1. 前置知识检测："你了解 JS 闭包吗？"2. 生成大纲，让你确认并标记已掌握的节点3. 逐节点讲解 → 每个节点配一道实践题4. 未通过 → 分级响应（概念性/细节/接近正确）5. 通过 → 更新进度，下一节

项目模式 — 边做项目边学

触发信号：包含“做一个/写一个/开发/搭建”+ 具体产物。

特点：

• 默认不提供完整代码，只给骨架和提示
• 按 MVP → 核心功能 → 增强拆分里程碑
• 自动检测开发环境（Node.js、Python、Rust 等）
• 卡住时渐进提示，最后才给出代码片段

你: /ai-tutor 学 Node.js 做一个聊天室​AI Tutor:1. 澄清需求和技术栈2. 环境检测 → "检测到 Node.js v20.x ✓"3. 按里程碑拆分4. 每个功能：知识铺垫 → 给任务要求（不给代码）→ 你自己写5. 运行验证："打开两个标签页，A 发消息，B 能看到"

此外还设计了一个“逃生舱机制”：反复卡住时，给出完整参考代码并逐行解释，然后出变式题验证你是否真正理解。

源码阅读模式 — 理解现有项目代码

触发信号：包含“当前项目/这个仓库/梳理”+ 当前目录有项目文件。

特点：

• 自动扫描项目目录（排除 node_modules 等），识别技术栈
• 生成代码地图（模块关系图 + 阅读顺序）
• 引导你打开特定文件的特定行：“打开 auth.ts，重点看 23-47 行”
• 考核基于实际代码：“Token 过期是在哪一行触发刷新的？”

你: /ai-tutor 帮我梳理当前项目的登录鉴权模块​AI Tutor:1. 扫描项目 → 生成代码地图2. 按阅读顺序拆分节点（入口 → 中间件 → Token签发 → 刷新机制）3. 引导你打开特定文件的特定行4. 考核基于实际代码

深度讲解模式 — 源码级底层教学

触发信号：包含“深入理解/底层原理/源码级/实现机制”。

特点：

• 不按知识点拆分，而是按“最小可闭环机制”划分为主题块

• 每节必须按 5 段式展开：

  0. 问题背景（解决什么问题）
  1. 核心数据结构（关键对象/字段）
  2. 运行流程（流程图 + 伪代码）
  3. 与旧方案对比（设计动机）
  4. 常见误解和边界（容易踩的坑）

• 主题块内连续讲解，讲完后统一考核

• 每节至少包含一个结构图

你: /ai-tutor 深入理解 React Fiber 架构​AI Tutor:1. 前置知识检测 + 确认学习深度2. 生成架构总览图3. 按主题块拆分（Fiber架构 / Hooks实现 / 调度系统）4. 每节 5 段式深度讲解5. 主题块讲完后统一考核（源码追踪题 + 机制推理题）

间隔复习：对抗遗忘

基于艾宾浩斯遗忘曲线，ai-tutor 在每次启动时自动检查是否有到期需要复习的知识点。启动画面大致如下：

╔══════════════════════════════════════════════╗║⚡ 课前提醒 ║╠══════════════════════════════════════════════╣║║║以下知识点已到复习时间:║║║║? TCP 可靠性机制 (3天前掌握) ║║? 闭包原理 (5天前掌握)║║║║准备好了吗？我们快速复习一下再继续新课。║║║╚══════════════════════════════════════════════╝

复习间隔根据掌握等级递增：

• mastery_level 1（刚通过）→ 3 天后复习
• mastery_level 2（复习过 1 次）→ 7 天后复习
• mastery_level 3（复习过 2 次）→ 14 天后复习

当然，复习也不能无限制堆积。因此设计了“防雪崩机制”：到期节点超过 3 个时，只挑最早到期的 3 个复习，其余顺延。这样复习题不会淹没新课。复习未通过 → mastery_level 回到 1，重新开始间隔周期。

断点续学：进度不丢失

所有学习进度都被持久化到项目目录下的 Markdown 文件中：

./ai-tutor/├── config.yaml# 全局配置├── records/ # 进度记录│├── react-hooks.md│├── browser-principles.md│└── project-auth-module.md└── summaries/# 归档总结├── react-hooks_hooks-basics.md└── browser-principles_http-evolution.md

记录文件使用 YAML frontmatter 存储机器可读状态，Markdown 正文保留人读内容。举个例子：

---mode: deep-divestart_date: 2026-04-22nodes: "1.1":name: Chrome架构module: 宏观视角上的浏览器status: masteredattempts: 1last_tested: "2026-04-25"mastery_level: 2failure_type: null---## 学习日志| 日期 | 节点 | 结果 | 备注 ||------|------|------|------|| 2026-04-22 | 1.1 Chrome架构 | ✓通过 | 理解多进程隔离原理 |

下次会话时只需说“继续上次的学习”，ai-tutor 会自动读取记录，展示进度，并从断点继续。省去了反复交代前情的烦恼。

可配置的严格度和语气

首次运行自动创建配置文件，你可以完全按自己的喜好调整：

# ./ai-tutor/config.yamlstrictness: normal # hard | normal | lenientvisual_tool: mermaid # mermaid | asciitone: encouraging # strict | encouraging

strictness（严格等级）：

tone（语气风格）：

• strict：严谨教授，简短肯定，重点指错
• encouraging：鼓励学习，肯定进步，缓解挫败感

错误分级：精准对症

并非所有错误都一样。ai-tutor 将错误分为三级，做出精准响应：

如果同一个节点连续失败 3 次，系统会自动拆分为更小的子知识点，逐个击破。这个机制在实际使用中非常有效，很多原本觉得“绕不过去”的概念，拆开之后反而豁然开朗。

按需加载：不浪费上下文窗口

Skill 采用分层架构，触发时只加载入口文件（SKILL.md），根据模式再读取对应的工作流文件。这样做的好处很明显——每次只加载当前模式需要的文件，节省 token 开销。

ai-tutor/├── SKILL.md# 入口（6KB）├── knowledge-mode.md # 知识模式工作流├── project-mode.md# 项目模式工作流├── codebase-mode.md# 源码阅读模式工作流├── deep-dive-mode.md # 深度讲解模式工作流├── visual-aids.md # 可视化工具箱└── README.md # 用户文档

实战效果

我用深度讲解模式完成了浏览器原理 37 节课程的学习，实测结果如下：

• 学习周期：7 天（2026-04-22 ~ 2026-04-28）

• 通过率：37 个节点全部通过

• 错误分布：13 个节点首次答错或答不精确，主要集中在：

  • 混淆对象属性与作用域变量
  • 误判管线化队头阻塞的阻塞点（响应顺序而非处理顺序）
  • HttpOnly 防 XSS 不防 CSRF 的区别

• 复习触发：3 次启动时触发了间隔复习，共复习了 3 个早期知识点

教学完成后还可以一键生成完整复习文档，标注所有曾经答错的知识点，非常适合作为最后冲刺的复习材料。

安装和使用

安装

# MacOS / Linuxgit clone https://github.com/Chih-hengChen/ai-tutor.git ~/.claude/skills/ai-tutor​# Windows (PowerShell)git clone https://github.com/Chih-hengChen/ai-tutor.git "$env:USERPROFILE.claudeskillsai-tutor"

使用

# 开始学习/ai-tutor 我想学 React Hooks/ai-tutor 学 Node.js 做一个聊天室/ai-tutor 帮我梳理当前项目的鉴权模块/ai-tutor 深入理解 React Fiber 架构​# 继续上次/ai-tutor 继续上次的学习​# 管理命令/ai-tutor status # 查看进度面板/ai-tutor reset react-hooks# 重置某个主题/ai-tutor reset --all # 重置所有（需二次确认）​# 随时退出退出教学

唯一要求：Claude Code CLI 或桌面端，无额外依赖。

技术实现要点

如果你也想编写 Claude Code Skill，以下几个关键设计决策值得参考：

1. 状态持久化用 Markdown + YAML frontmatter

不使用 JSON 数据库，直接采用 Markdown 文件。frontmatter 存储机器状态，正文保留人类可读内容。好处有三：

• 用户可以直接打开查看，也可以手动编辑
• Git 友好，可以版本控制学习进度
• Claude Code 原生支持读写，零依赖

2. 工作流分文件，按需加载

一个 2000 行的 Skill 文件会占用大量上下文窗口。将其拆分为入口 + 子文件，每次只加载需要的部分。SKILL.md 做路由，子文件做执行。

3. 恢复时强制重读工作流文件

这是一个踩过的坑：恢复学习时如果凭记忆执行工作流，会退化为默认的简洁回答风格。解决方法是在 Step 3（恢复检测）中加入强制规则：恢复时必须用 Read 工具重新读取对应的工作流文件。

4. 间隔复习设上限

不加限制的间隔复习会导致“复习雪崩”——攒了几十道复习题，新课还没开始就想退出了。限制每次最多 3 道复习题，其余顺延。

最后

ai-tutor 的核心思路其实很简单：让 AI 不能只讲不验，学了就必须验证，验证不过就换方式重讲。再加上进度持久化、间隔复习、错误分级这些学习科学的基本原则，就能把 Claude Code 变成一个不错的私人编程教练。

如果你也在用 Claude Code 学习技术，不妨试试看。欢迎提交 Issue 和 PR。

GitHub: github.com/Chih-hengCh…