/ 目录 / 演练场 / Codebase to Course
● 社区 zarazhangrui ⚡ 即开即用

Codebase to Course

作者 zarazhangrui · zarazhangrui/codebase-to-course

指向一个仓库,得到一个像教程一样解释它的单文件 HTML 「课程」——带注释代码、架构图和叙述——适合非工程师阅读或新员工入职。

codebase-to-course 是一个 Claude Code skill,它遍历整个仓库并生成一个单文件 HTML 课程,解释代码库实际是如何工作的。结构类似教程:高层架构 → 逐模块深入 → 「跟着请求走一遍系统」流程图——附带内嵌的注释代码片段。输出是单个 HTML 文件,无需构建步骤。

为什么要用

核心特性

实时演示

实际使用效果

就绪

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "codebase-to-course-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "codebase-to-course-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zarazhangrui/codebase-to-course",
          "~/.claude/skills/codebase-to-course"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add codebase-to-course-skill -- git clone https://github.com/zarazhangrui/codebase-to-course ~/.claude/skills/codebase-to-course

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: Codebase to Course

为新员工生成自学入职课程

👤 工程经理/技术负责人 ⏱ ~45 min beginner

何时使用: 周五 offer 已接受:你想要一份真正的入职材料,而不是「去读代码吧」。

前置条件
  • 已安装 skill — git clone https://github.com/zarazhangrui/codebase-to-course ~/.claude/skills/codebase-to-course
  • 仓库已 checkout — 标准 git clone
步骤
  1. 扫描仓库
    codebase-to-course:扫描 ./our-app,先输出课程结构提案——章节列表——再开始写作。✓ 已复制
    → 具体的目录:架构、模块、请求流程
  2. 生成课程
    看起来不错,生成完整 HTML 到 /onboarding/course.html,目标受众:了解 React + Node 但不熟悉我们业务领域的全栈新员工。✓ 已复制
    → HTML 文件已生成;可在浏览器中打开
  3. 验证准确性
    抽检:「认证流程」的描述是否与 src/auth/ 里的实现一致?引用真实代码。✓ 已复制
    → 描述引用了真实文件路径和当前代码

结果: 真正有用的入职材料,节省团队两周的解释时间。

注意事项
  • 课程太长以至于没人读 — 限定章节数量;质量优于完整性
  • 代码片段随时间过时 — 大型重构后重新生成;skill 速度快
搭配使用: filesystem · git-mcp-idosal

向非技术 PM 解释一个复杂功能

👤 技术负责人 ⏱ ~20 min beginner

何时使用: PM 不断问「为什么这需要 3 个 sprint」——你想给他一份具体的材料。

步骤
  1. 聚焦到功能模块
    codebase-to-course:聚焦到 src/payments/,受众是没有工程背景的 PM,多用图表和类比,减少代码。✓ 已复制
    → 课程偏高层;代码块很少

结果: PM 建立起对这个功能的心智模型。

注意事项
  • 类比过度简化 — 仔细检查;如果被追问,skill 倾向于准确性

为你的开源项目生成「工作原理」页面

👤 开源项目维护者 ⏱ ~30 min intermediate

何时使用: 你的 README 有功能介绍但没有架构说明。

步骤
  1. 生成文档页
    codebase-to-course:扫描主分支,为文档站生成 ARCHITECTURE.html,目标受众:评估项目的资深开发者。✓ 已复制
    → 输出读起来像用心撰写的贡献者指南

结果: 评估者和贡献者有了更好的开发体验。

注意事项
  • 课程风格太泛化(看起来不像你的项目) — 在 prompt 中传入项目名称和风格说明

组合

与其他 MCP 搭配,撬动十倍杠杆

codebase-to-course-skill + filesystem

读取本地仓库并写入课程

codebase-to-course:扫描 ./our-app,写入 /onboarding/course.html。✓ 已复制
codebase-to-course-skill + git-mcp-idosal

无需 clone 即可为外部仓库生成课程

用 GitMCP 获取 owner/repo,然后在上面运行 codebase-to-course。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
scan_repo path 始终第一步 0
propose_toc scan_result, audience 扫描后、生成前 0
generate_course scan_result, toc, target_html_path 最后一步 0
scope_to_subdir subdir_path 大型 monorepo 或聚焦某功能 0

成本与限制

运行它的成本

API 配额
不适用
每次调用 Token 数
消耗较大——skill 会读取整个仓库(通常 10k–50k token)
费用
免费;模型 token 费用自理
提示
对 monorepo 使用 scope_to_subdir;不要一次性课程化整个仓库

安全

权限、密钥、影响范围

最小权限: filesystem-read filesystem-write
凭据存储:
数据出站: 无——纯本地读写

故障排查

常见错误与修复

课程太泛化/没有引用真实代码

让 prompt 更具体;要求 file:line 级别的引用

仓库太大;context 溢出

使用 scope_to_subdir;生成按模块分割的课程并互相链接

HTML 格式异常

让 skill 验证输出;如需要则重新生成

替代方案

Codebase to Course 对比其他方案

替代方案何时用它替代权衡
Repomix + 手动 prompt你想完全控制代码库如何输入给 Claude需要更多配置;没有约定的输出格式
DocsGPT / Mintlify你想要托管文档完全不同的产品;不是单文件 HTML
absolutely-skilled / autodoc你想要自动生成 API 文档API 参考 ≠ 教程

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills