技能介绍
Codebase to Course 是张咋啦（zarazhangrui）做的一个 Claude Code 技能，能把任何代码库转化为精美、交互式的单页 HTML 课程。
指向一个代码仓库，即可获得一个自包含的课程：通过滚动导航、动画可视化、嵌入式测验，以及代码与通俗英语的对照翻译，教你理解代码的工作原理。它面向的主要人群是 Vibe coder——用自然语言指示 AI 编码工具构建软件、没有传统计算机科学教育背景的人。课程不是靠说教，而是通过追踪你实际使用应用时发生的事情来教学。
它的目标很实用，不学术：更好地驾驭 AI 编码工具（做出更明智的架构决策）、识别 AI 的错误（发现幻觉、捕捉不良模式）、在 AI 卡住时进行调试（跳出错误循环）、与工程师交流时不再感到迷茫。你并不想成为软件工程师，而是希望把编码当作一项超能力。
适用场景
- 自己（或从 GitHub 上找到）的项目能跑起来，但你不清楚它内部是怎么工作的。
- 想理解一个代码库的核心逻辑和数据流，而不是逐行读源码。
- 需要跳出 AI 编码工具的死循环：先看懂现有结构，再决定怎么改。
- 要判断 AI 给出的改动是否可信，需要一份能对照真实代码的说明。
- 准备和工程师对话，希望先补上对项目架构的基本认知。
核心能力
- 产物是单个 HTML 文件：无需依赖、无需配置，可离线工作。
- 基于滚动的模块：带进度跟踪和键盘导航。
- 代码 ↔ 通俗英语对照翻译：左侧为真实代码，右侧为含义解释。
- 动画可视化：数据流动画、组件间「群聊」、架构图。
- 交互式测验：测试应用能力而非记忆，例如「你想添加收藏功能——哪些文件需要修改？」。
- 词汇表提示：悬停任何技术术语即可查看通俗英语定义。
- 温暖、独特的设计：不同于典型的紫色渐变 AI 风格。
效果预览
工作方式
这个技能的设计理念有五条，决定了它输出的课程长什么样：
- 先构建，后理解：颠覆传统计算机科学教育。传统方式先花多年记忆概念、最终构建项目、才看到意义，多数人在第三步前放弃；这种方式是先构建项目 → 体验其运行 → 然后理解其工作原理。
- 展示而非说教：每个屏幕至少 50% 是视觉内容，每段文字最多 2-3 句话。如果某件事可以用图表、动画或交互元素呈现，就不应该写成段落。
- 测验测试应用而非记忆：没有「API 代表什么？」这类问题，而是「用户报告切换页面后数据过时。你会先查看哪里？」——测验你能否运用所学解决新问题。
- 不重复使用比喻：每个概念都有适合该特定想法的比喻——数据库是带有卡片目录的图书馆，身份验证是检查 ID 的保安，API 速率限制是容量有限的夜总会——绝不同一比喻用两次。
- 仅使用原始代码：代码片段是真实代码库的精确副本，未经修改或简化，学习者应能打开实际文件，看到与所学相同的代码。
你需要提供
- 一个 Claude Code 环境。
- 一个要转化的代码库（指向代码仓库或当前项目即可）。
你会获得
- 一个自包含的单页 HTML 课程文件，包含滚动式模块、代码与通俗英语对照、动画可视化、交互式测验与术语词汇表。
使用示例
可用触发短语：
把这个变成一门课程
交互式地解释这个代码库
从这个项目制作一门课程
教我这段代码是如何工作的
基于这段代码的交互式教程