/ 目錄 / 演練場 / Codebase to Course
← 全部伺服器 ↗ GitHub
● 社群 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/ 中的實際程式碼？請引用真實程式碼。✓ 已複製
    → 演練引用了真實的檔案路徑和當前程式碼

結果： 一個真實的入職素材，省去團隊 2 週的解釋時間。

注意事項
  • 課程太長，根本讀不完 — 指定最多章節數；質量優先於完整性
  • 程式碼摘錄過時了 — 大型重構後重新生成；這個 Skill 速度很快
搭配使用： filesystem · git-mcp-idosal

向非技術 PM 解釋複雜功能

👤 技術主管 ⏱ ~20 min beginner

何時使用： PM 一直問「為什麼這要花 3 個 sprint」— 你想要一個具體的說明素材。

步驟
  1. 限定範圍
    codebase-to-course：範圍限定在 src/payments/。受眾：沒有工程背景的 PM。多用圖表 + 類比，少用程式碼。✓ 已複製
    → 課程是高層次的；程式碼區塊最少

結果： PM 帶著心理模型離開。

注意事項
  • 類比過度簡化 — 仔細確認；這個 Skill 在被追問時偏向準確

為你的開源專案生成「運作原理」頁面

👤 OSS 維護者 ⏱ ~30 min intermediate

何時使用： 你的 README 有功能列表但沒有架構說明。

步驟
  1. 生成為文件頁面
    codebase-to-course：掃描主分支。為文件站輸出 ARCHITECTURE.html。目標：評估專案的有經驗開發者。✓ 已複製
    → 輸出讀起來像一位有思想的貢獻者指南

結果： 為評估者和貢獻者提供更好的開發者體驗。

注意事項
  • 課程品牌感錯誤（看起來很通用） — 在提示詞中傳入專案名稱 + 風格提示

組合

與其他 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 配額
N/A
每次呼叫 Token 數
很大 — 這個 Skill 讀取整個倉庫（典型 10k–50k token）
費用
免費；你的模型 token 費用照常
提示
對於 monorepo，使用 scope_to_subdir；不要一次對全部製作課程

安全

權限、密鑰、影響範圍

最小權限： filesystem-read filesystem-write
憑證儲存： 無
資料出站： 無 — 純本機讀寫

故障排查

常見錯誤與修復

課程太通用／未引用真實程式碼

讓提示詞更具體；要求 file:line 引用

倉庫太大；context 耗盡

使用 scope_to_subdir；製作每個模組的課程並互相連結

HTML 格式損壞

請 Skill 驗證輸出；若需要則重新生成

替代方案

Codebase to Course 對比其他方案

替代方案何時用它替代權衡
Repomix + 手動提示詞你想完全控制程式碼庫如何餵給 Claude設定較多；沒有固定的輸出格式
DocsGPT / Mintlify你想要託管文件完全不同的產品；不是單一 HTML 檔案
absolutely-skilled / autodoc你想要自動生成 API 文件API 參考 ≠ 教學課程

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills