codebase-to-course-cn

将任意代码库转换为精美的交互式课程，直接在浏览器中打开，无需任何设置。

灵感来自 codebase-to-course — 在原项目思路基础上进行了中文本地化适配和功能增强。

它是什么

一个 Claude Code 技能（Skill），能够分析任意代码库并生成交互式 HTML 课程。输出是一个完整目录，包含 styles.css、main.js、模块 HTML 文件和组装好的 index.html，双击即可在浏览器中浏览。

两个版本

	产品版（默认）	开发版
面向谁	产品经理、业务人员	专业程序员
怎么教	业务流程图、用户旅程、系统架构概览	架构图、数据流动画、技术方案
代码展示	不展示代码	精选 10-15 行核心代码
测验	无	默认不含，按需添加
视觉风格	温暖亲切，像翻阅教材	简洁专业，信息密度高

交互元素

• 代码↔中文翻译块 — 左侧代码，右侧通俗解释（开发版）
• 群聊动画 — 组件之间的对话模拟（产品版）
• 业务流程图 — 核心业务逻辑流转可视化（产品版）
• 数据流/消息流动画 — 请求从 A 到 B 的可视化
• 架构图 — 点击组件查看描述（开发版）
• 时序图/状态图 — 生命周期与状态流转（开发版）
• 嵌入式测验 — 多选、场景、拖放、找 bug（开发版，按需添加）
• 词汇表提示 — 技术术语首次出现时自动标注（产品版）

使用方式

在 Claude Code 中触发：

将 ./my-project 转换为课程

或指定版本：

将此转换为开发版课程

或从 GitHub 仓库生成：

从 https://github.com/user/repo 制作课程

中国大陆适配

本技能面向中国大陆用户，所有生成的课程均可完全离线运行：

• 禁止使用 Google Fonts 及任何 Google CDN 资源
• 禁止使用外部 CDN 加载字体、样式或脚本
• 字体使用系统字体回退（PingFang SC、Microsoft YaHei）
• 零网络依赖，断网也能正常浏览

生成的课程结构

course-name/
  styles.css       ← 预构建样式
  main.js          ← 交互逻辑
  _base.html       ← 页面外壳
  _footer.html     ← 页脚
  build.sh         ← 组装脚本
  briefs/          ← 模块简报（复杂代码库）
  modules/
    01-slug.html
    02-slug.html
    ...
  index.html       ← 组装后的完整课程

技术细节

• 视觉设计：教育出版物风格，温暖米白背景（#FAF7F2），朱红强调色（#D94F30），Catppuccin 语法高亮
• 布局：滚动吸附（scroll-snap），逐模块翻页浏览
• 动画：滚动触发的淡入效果，渐进式内容揭示
• 响应式：支持桌面、平板、手机三种断点

与原项目的关系

本项目是 codebase-to-course 的中文本地化衍生版本，主要变更：

• 课程内容默认输出中文
• 移除所有外部 CDN 依赖，确保中国大陆可访问
• 字体栈替换为中文系统字体回退
• 新增产品版和开发版双模式（产品版聚焦业务逻辑，开发版聚焦架构图、数据流动画、技术方案）
• 交互元素实现模式本地化适配

许可证

与原项目保持一致。