用 Claude Code 或 Cursor 花了一下午，终于把那个客户管理系统做出来了。能跑，功能都正常，但你其实不太懂它怎么跑的。数据库怎么连的？用户登录怎么验证的？数据怎么从前端传到后端的？
你只知道"能用"，但不知道"为什么能"。
这不是你的问题。传统计算机教育告诉你：要先学变量、循环、函数、面向对象、数据结构、算法... 学完这些才能做项目。但问题是，大多数人学到第三步就弃赛了。
而 vibe coder 的存在把这个逻辑彻底颠覆了。
你没学过计算机，对着 AI 说了几句话，东西就做出来了。它在跑，但你不懂它。理解缺席了，但建造已经发生了。
今天介绍的 codebase-to-course，就是专门来解决这个问题的。
GitHub：
什么是 codebase-to-course
简单说，这是一个代码反汇编器。
反汇编器做什么？它拿到编译好的机器码，逆向还原成人能读的汇编。程序已经在那了，在跑着，你只是看不懂。反汇编器把黑盒撬开，把每条指令翻译成你认识的语言。
codebase-to-course 做的完全一样，只不过对象不是二进制文件，是一整个代码仓库。
你把它指向一个项目，它把这个项目拆开，逆向还原成一个带动画、带测验、带代码和白话双栏对照的互动课程。输出是一个 HTML 文件，浏览器打开就能学，不需要安装任何东西。
先建造，后理解
这个项目的核心哲学是 "Build first, understand later"（先建造，后理解）。
传统教育的因果链是：理解原理 → 动手建造。但这条链对 vibe coder 不适用，因为你已经建造完了，理解还没发生。
codebase-to-course 把因果链翻过来了：先有实体，后做逆向。
你面前有一个在运转的系统，一段在执行的代码，一个已经发生的现象。然后你拆它，翻它，追踪信号从哪进从哪出，看哪个零件坏了整台机器会停。
理解不是建造的前提，理解是对一个已存在实体的逆向还原。
没有实体，理解无处发生。你不能理解一个你没见过的东西。循环不是实体，API 不是实体，数据库也不是实体，直到它们在一个真实的系统里各就各位、互相通信，它们才变成可以被理解的东西。
课程长什么样
生成的课程是一个单 HTML 文件，没有任何依赖，离线也能看。它包含：
滚动式模块 —— 像看长图文一样学习，有进度追踪和键盘导航，知道自己学到哪了。
代码 ↔ 白话对照 —— 左边是真实代码，右边是通俗解释。不是简化版代码，是原封不动的真实代码，旁边配上大白话说明"这行在干什么"。
动画可视化 —— 数据怎么流动的？组件之间怎么通信的？用动画展示。数据库、API、前端，每个组件有自己的颜色和身份，像追踪电影角色一样追踪它们。
互动测验 —— 不是问"API 是什么意思"这种死记硬背的问题，而是问"用户说切换页面后数据没更新，你会先查哪个文件？"测试你用学到的知识解决新问题的能力。
词汇提示 —— 鼠标悬停在技术术语上，显示白话定义。不懂"中间件"？悬停一下就知道。
温暖的设计 —— 不是那种冷冰冰的紫色渐变 AI 风格，是让人愿意看下去的设计。
角色着色：让代码有故事
这个项目有个特别聪明的设计叫**"角色着色"系统**。
代码库里的每个主要组件 —— 数据库、API、前端、认证服务 —— 都会被分配一个独特的颜色和身份。在后续的数据流动画和架构图里，这些"角色"以一致的视觉身份出现。
数据库不是一个灰色方块，而是一个有名字有颜色的"角色"。当你看到"小蓝（数据库）跟小绿（API）在对话"，枯燥的依赖关系图突然变成了有角色、有故事线的叙事。
这种设计太妙了。你不是在看架构图，你是在看一群角色在互动。
严格的内容密度规则
SKILL.md 里定义了一套硬规则，防止"课程变教科书"：
- 每一屏至少 50% 是视觉元素
- 超过 3 个列表项？必须转成带 icon 的卡片
- 一个步骤序列？必须变成带箭头的流程图
- "组件 A 跟组件 B 通信"？必须做成动画
为什么这么严格？因为目标受众是非技术人员。对于习惯读代码的开发者，文字段落没问题。但对于 vibe coder，大段文字等同于另一种形式的"看不懂的代码"。
这种把内容策略编码为硬规则的做法，比写"请尽量多用视觉元素"这种模糊指引强一百倍。AI 执行硬规则比理解模糊意图靠谱得多。
怎么用
使用 codebase-to-course 很简单，三步搞定。
第一步，把项目克隆到本地：
git clone https://github.com/zarazhangrui/codebase-to-course.git
第二步，复制技能文件夹到 Claude Code 的技能目录：
cp -r codebase-to-course ~/.claude/skills/
第三步，在 Claude Code 中打开你想学习的项目，然后说：
Turn this codebase into an interactive course
或者这些触发短语也能用：
- "Explain this codebase interactively"
- "Make a course from this project"
- "Teach me how this code works"
- "Interactive tutorial from this code"
Claude 会开始分析代码，识别系统里的"角色"，追踪数据流，然后生成课程。整个过程分四步：
- 深度阅读 —— 搞清楚代码库的全貌
- 映射模块 —— 把代码映射成 5-8 个教学模块，每个对应一个实际技能点
- 逐模块生成 —— 生成自包含的 HTML 文件，验证后再进下一个
- 浏览器打开 —— 在浏览器里看课程，收集反馈
这里有个聪明的设计：第二步不会呈现课程大纲让你确认，直接构建。为什么？因为用户要的是课程，不是规划文档。你想想看，一个不懂代码的人，他连代码都看不懂，你让他确认课程大纲？他确认个啥？
适合谁用
vibe coders —— 用 AI 工具写出了能跑的应用，但不懂底层原理。你想更好地指挥 AI、发现 AI 犯的错误、调试问题、跟工程师沟通时不感到迷茫。
自学编程的人 —— 传统教程从变量循环开始讲，你觉得枯燥。你更想从一个真实项目入手，边做边学。
产品经理/设计师 —— 需要跟工程师沟通，但不懂技术细节。用这个工具把项目变成课程，快速建立技术认知。
想教别人的人 —— 你写了一个开源项目，想让别人能快速理解。生成一个互动课程比写 README 更有效。
GitHub：
写在最后
codebase-to-course 代表了一种新的学习范式：从实体出发，做逆向工程。
传统教育在前面堆了五年的"前提"，制造了一种幻觉：理解可以凭空产生，只要你学够多的概念。但概念不是实体。
这个工具把因果链翻过来了。你先有一个在跑的系统，然后你拆它、理解它。理解发生的条件是实体已经存在。
对于 vibe coder 来说，这是更自然的学习路径。你已经建造了，现在来理解你建造的东西。
项目完全开源，免费使用。如果你也用 AI 写代码但想真正理解自己的项目，试试这个工具。
关注
如果这篇文章对你有帮助，欢迎点赞、收藏、转发。我会持续分享实用的开发工具和学习方法，关注我，一起提升编程能力。
