Codebase to Course

一个 Claude Code 技能，可将任何代码库转化为精美、交互式的单页 HTML 课程。

指向一个代码仓库，即可获得一个自包含的课程，通过滚动导航、动画可视化、嵌入式测验和代码与通俗英语对照翻译，教你理解代码的工作原理。

适用人群

Vibe coder — 通过自然语言指示 AI 编码工具构建软件、没有传统计算机科学教育背景的人。

你构建了某个项目（或在 GitHub 上发现了有趣的项目）。它能运行，但你不清楚它内部是如何工作的。这个技能会生成一门课程，不是通过说教，而是通过追踪你实际使用应用时发生的事情来教你。

你的目标是实用的，而非学术性的：

• 更好地驾驭 AI 编码工具（做出更明智的架构决策）
• 识别 AI 的错误（发现幻觉，捕捉不良模式）
• 在 AI 卡住时进行调试（跳出错误循环）
• 与工程师交流时不再感到迷茫

你并不想成为软件工程师，而是希望将编码作为一项超能力。

课程内容

输出是一个单 HTML 文件，无需依赖、无需配置，可离线工作。它包括：

• 基于滚动的模块，带有进度跟踪和键盘导航
• 代码 ↔ 通俗英语对照翻译 — 左侧为真实代码，右侧为含义解释
• 动画可视化 — 数据流动画、组件间群聊、架构图
• 交互式测验，测试应用能力而非记忆（例如：“你想添加收藏功能——哪些文件需要修改？”）
• 词汇表提示 — 悬停任何技术术语即可查看通俗英语定义
• 温暖、独特的设计 — 不同于典型的紫色渐变 AI 风格

使用方法

触发短语

• “把这个变成一门课程”
• “交互式地解释这个代码库”
• “从这个项目制作一门课程”
• “教我这段代码是如何工作的”
• “基于这段代码的交互式教程”

设计理念

先构建，后理解

这颠覆了传统的计算机科学教育。传统方式：先花多年记忆概念 → 最终构建项目 → 才看到意义（多数人在第三步前放弃）。这种方式：先构建项目 → 体验其运行 → 然后理解其工作原理。

展示而非说教

每个屏幕至少 50% 是视觉内容。每段文字最多 2-3 句话。如果某件事可以用图表、动画或交互元素呈现，就不应该写成段落。

测验测试应用而非记忆

没有“API 代表什么？”这类问题。而是：“用户报告切换页面后数据过时。你会先查看哪里？”测验测试你是否能运用所学解决新问题。

不重复使用比喻

每个概念都有适合该特定想法的比喻。数据库是带有卡片目录的图书馆。身份验证是检查 ID 的保安。API 速率限制是容量有限的夜总会。绝不同一比喻用两次。

仅使用原始代码

代码片段是真实代码库的精确副本，未经修改或简化。学习者应能打开实际文件，看到与所学相同的代码。