What makes codebase-to-course-cn notable?

1.1K downloads. Trust evidence available

How should codebase-to-course-cn be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

codebase-to-course-cn

将任意代码库转换为精美的交互式课程。默认产品版面向产品经理，聚焦业务逻辑、流程和整体架构；开发版面向程序员，聚焦架构图、数据流动画和技术方案。触发词：'将此转换为课程'、'交互式讲解此代码库'、'技术架构课程'、'代码库入门指南'、'从代码库制作教程'、'教授这段代码'。 Skill: codebase-to-course-cn Owner: zhouchang1988 Summary: 将任意代码库转换为精美的交互式课程。默认产品版面向产品经理，聚焦业务逻辑、流程和整体架构；开发版面向程序员，聚焦架构图、数据流动画和技术方案。触发词：'将此转换为课程'、'交互式讲解此代码库'、'技术架构课程'、'代码库入门指南'、'从代码库制作教程'、'教授这段代码'。 Tags: latest:1.2.0 Version history: v1.2.0 | 2026-05-21T09:15:07.115Z | user Release v1.2.0 from GitHub v1.1.4 | 2026-05-19T04:32:06.966Z | user Release v1.1.4 from GitHub v1.1.3 | 2026-05-15T02:27:17.173Z | user Release v1.

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.1k

Updated

Oct 11, 2026

Version

1.2.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1.1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.2.0release · observed May 21, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1720bd1njpgkfeygpnhevb7z184dag4:codebase-to-course-cn

Setup complexity is classified as HIGH. You must provision dedicated cloud infrastructure or an isolated VM. Do not run this directly on your local workstation.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-zhouchang1988-codebase-to-course-cn/snapshot"

Documentation

CLAWHUB

145,367 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: codebase-to-course-cn
description: 将任意代码库转换为精美的交互式课程。默认产品版面向产品经理，聚焦业务逻辑、流程和整体架构；开发版面向程序员，聚焦架构图、数据流动画和技术方案。触发词：'将此转换为课程'、'交互式讲解此代码库'、'技术架构课程'、'代码库入门指南'、'从代码库制作教程'、'教授这段代码'。
---

# 代码库转课程

将任意代码库转换为精美的交互式课程。输出是一个**目录**，包含预构建的 `styles.css`、`main.js`、每个模块的 HTML 文件以及组装好的 `index.html` — 可直接在浏览器中打开，无需任何设置。

**支持两个版本：**
- **产品版（默认）**：面向产品经理，聚焦业务逻辑、用户流程和系统架构，不含代码细节
- **开发版**：面向程序员，包含架构图、数据流动画、技术方案描述

**重要：中国大陆可访问性要求**

此技能面向中国大陆用户，**必须确保生成的课程在中国大陆网络环境下可以完全离线运行**：
- **禁止使用 Google Fonts** 及任何 Google CDN 资源
- **禁止使用外部 CDN** 加载字体、样式或脚本
- **禁止依赖任何需要翻墙才能访问的资源**
- 所有字体必须使用系统字体或内嵌字体
- 所有资源必须本地化，确保零网络依赖

## 首次运行互动流程

当技能触发时，按顺序向用户收集以下信息，**全部收集完毕后才开始执行**：

### 第 1 步：选择版本

> 你希望生成哪个版本？
> 1. **产品版** — 面向产品经理，聚焦业务逻辑、用户流程和整体架构（默认）
> 2. **开发版** — 面向专业程序员，聚焦架构图、数据流和技术方案
>
> 也可以带上版本继续，例如"将此转换为开发版课程"。

### 第 2 步：指定关键词

> 请提供一个**中文关键词**和一个**英文关键词**，用于课程命名：
> - **中文关键词**：用于课程标题和导航显示（例如："任务调度"、"支付系统"）
> - **英文关键词**：用于输出目录名和文件命名（例如：`task-scheduler`、`payment`）

### 输出目录规则

根据用户选择的版本和英文关键词，确定课程的输出目录名：
- **产品版**：`{英文关键词}-course-pm`（例如：`task-scheduler-course-pm`）
- **开发版**：`{英文关键词}-course-pro`（例如：`task-scheduler-course-pro`）

**关于测验：**
- 产品版 **不包含测验**
- 开发版 **默认不需要测验**，仅当用户明确要求"增加测验"时才添加

**关于代码库来源：**

如果用户提供 GitHub 链接，在开始分析之前先克隆仓库（`git clone <url> /tmp/<repo-name>`）。如果他们说"此代码库"或类似表述，使用当前工作目录。

**快捷方式：** 用户也可以在一条消息中同时提供所有信息，例如：
- "开发版，中文关键词：任务调度，英文关键词：task-scheduler"
- "产品版 / 支付系统 / payment"
此时跳过逐步询问，直接开始执行。

---

## 产品版 vs 开发版 对比

| 特性 | 产品版（默认） | 开发版 |
|---|---|---|
| **目标受众** | 产品经理、业务人员 | 专业程序员 |
| **教学方式** | 业务流程图、用户旅程、系统架构概览 | 架构图、数据流动画、技术方案 |
| **代码展示** | **不展示代码** | 精选10-15行核心代码 + 设计意图 |
| **测验** | **无** | **默认不需要**（用户要求时才添加） |
| **视觉元素** | 流程图、业务架构图、用户旅程图、功能模块图 | 架构图、时序图、数据流图 |
| **语言风格** | 业务语言、产品术语、结构化清晰 | 简洁、信息密度高、技术术语 |

---

## 产品版详细指南

目标学习者是**产品经理和业务人员** —— 需要理解系统做什么、业务逻辑怎么流转、各模块如何协作，但不需要知道代码细节。

**关键原则：**
- 不展示任何代码
- 用业务语言解释系统行为，避免技术实现细节
- 聚焦"系统做了什么"而非"代码怎么写"
- 用流程图和架构图可视化业务逻辑
- 关注用户旅程、数据流转、模块职责
- 解释清楚各功能模块的输入/输出/边界

**强制交互元素（每个模块必须包含）：**
- **业务流程图** — 至少一个（展示核心业务逻辑流转）
- **系统架构概览图** — 整个课程至少2个（模块关系、职责划分）
- **用户旅程图** — 整个课程至少一个（端到端用户操作路径）
- **功能模块卡片** — 展示各模块职责、输入输出
- **数据流转动画** — 整个课程至少一个（业务数据如何在系统中流动）

**禁止包含：**
- 代码片段（任何形式）
- 代码翻译块
- 测验题
- 技术实现细节（如算法、数据结构、设计模式名称）
- 词汇表提示（产品经理不需要学习编程术语）

---

## 开发版详细指南

目标学习者是**专业程序员** —— 需要快速理解代码库架构、准备技术分享或代码评审。

**核心原则：图表驱动，代码精简。**

**关键原则：**
- 信息密度优先，减少"废话"
- 直接使用技术术语，无需解释基础概念
- **图表和动画优先于代码贴片**
- 代码仅作为补充（每片段10-15行）
- 60%+ 图表/动画，25% 简洁文字，15% 精选代码

**测验为可选功能：** 默认不包含。仅当用户明确要求"增加测验"或"需要测验题"时才添加。

**强制交互元素：**
- **架构图** — 每个课程至少2个（交互式架构图，点击组件显示描述）
- **数据流动画** — 每个课程至少2个（请求/响应流转）
- **时序图/状态图** — 每个课程至少1个
- **代码分析块** — 整个课程2-3个（不是每个模块都需要）

**内容比例：**
- 60%+ 图表、动画、交互式可视化
- 25% 文字描述（技术方案、设计决策）
- 15% 代码片段（每片段10-15行）

---

## 流程

### 阶段 0：收集参数

在开始前，确认以下三个参数已收集完毕：

| 参数 | 用途 | 示例 |
|---|---|---|
| **版本** | 决定内容风格和输出目录后缀 | 产品版 / 开发版 |
| **中文关键词** | 课程标题和导航显示 | "任务调度" |
| **英文关键词** | 输出目录名和文件命名 | `task-scheduler` |

**输出目录名规则：**
- 产品版：`{英文关键词}-course-pm`
- 开发版：`{英文关键词}-course-pro`

如果用户已在首次互动中提供了所有参数，直接记录并继续。如果缺少任何参数，先补充询问。

**记

README.md

# codebase-to-course-cn

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

**灵感来自 [codebase-to-course](https://github.com/zarazhangrui/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](https://github.com/zarazhangrui/codebase-to-course) 的中文本地化衍生版本，主要变更：

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

## 许可证

与原项目保持一致。

_meta.json

{
  "ownerId": "kn7a799d479xj5aftb4bqm6ea984cv4m",
  "slug": "codebase-to-course-cn",
  "version": "1.2.0",
  "publishedAt": 1779354907115
}

references/content-philosophy-pro.md

# 内容哲学 — 专业程序员版

> **何时阅读此文件：** 在阶段 3（编写模块 HTML）期间。这些原则指导每个内容决策。

这些原则是将优秀技术课程与普通教程区分开来的关键。

### 信息密度优先

专业程序员阅读速度快，理解能力强。课程应该信息密度高，减少"废话"。

**文字原则：**
- 每个段落有明确信息增量。如果没有新信息，删掉它。
- 直接使用技术术语，无需解释基础概念。
- **图表和动画优先于代码贴片。** 能用架构图、数据流动画、时序图表达的，就用可视化。
- **代码仅作为补充。** 仅在图表无法替代时才展示代码，且每片段控制在 10-15 行。
- 60%+ 的屏幕应该是图表、动画或交互元素，25% 是简洁的文字描述，15% 是精选代码。

**将描述转换为可视化（优先级排序）：**
- "组件 A 调用组件 B" → **数据流动画**（首选）或**时序图**
- "数据从 X 流向 Y" → **数据流动画**
- "系统架构" → **交互式架构图**（点击组件显示描述）
- "请求处理流程" → **流程图** + **步骤卡片**
- "状态变化" → **状态图动画**
- "这个函数的核心逻辑" → **精简代码片段（10-15 行）+ 设计意图注释**（仅在可视化不足以表达时使用）

**避免的做法：**
- 不要贴超过 15 行的代码块 — 如果需要展示更多代码，拆分为多个小片段，每个片段聚焦一个概念
- 不要连续放置两个代码块而中间没有可视化元素
- 不要用代码来展示可以用图表表达的关系和流程

### 代码分析块 — 精选且聚焦

面向专业程序员的代码分析，重点不是"这段代码做什么"（他们能看懂代码），而是"为什么要这样设计"。**一个课程中只需要 2-3 个代码分析块**，每个聚焦最核心的设计决策。

**代码选取原则：**
- 每片段 **不超过 10-15 行** — 选取最能体现设计意图的核心代码
- 优先选取：接口定义、核心数据结构、关键算法的核心逻辑
- 不选取：配置代码、样板代码、工具函数、导入语句

**结构：**
- 左侧：精选的核心代码（保持格式，允许水平滚动）
- 右侧：设计意图注释（不是逐行翻译）

**示例：**

```html
<div class="translation-block animate-in">
  <div class="translation-code">
    <span class="translation-label">CODE</span>
    <pre><code>
<span class="code-line"><span class="code-keyword">export class</span> <span class="code-function">EventBus</span> {</span>
<span class="code-line">  <span class="code-keyword">private</span> listeners = <span class="code-keyword">new</span> <span class="code-function">Map</span>&lt;string, Set&lt;Function&gt;&gt;();</span>
<span class="code-line"></span>
<span class="code-line">  <span class="code-function">subscribe</span>(event: string, fn: Function) {</span>
<span class="code-line">    <span class="code-keyword">if</span> (!<span class="code-keyword">this</span>.listeners.has(event)) {</span>
<span class="code-line">      <span class="code-keyword">this</span>.listeners.set(event, <span class="code-keyword">new</span> Set());</span>
<span class="code-line">    }</span>
<span class="code-line">    <span class="code-keyword">this</span>.listeners.get(event)!.add(fn);</span>
<span class="code-line">  }</span>
<span class="code-line">}</span>
    </code></pre>
  </div>
  <div class="translation-english">
    <span class="translation-label">DESIGN INTENT</span>
    <div class="translation-lines">
      <p class="tl"><strong>为什么用 Map + Set？</strong></p>
      <p class="tl">Map 提供 O(1) 事件查找，Set 自动去重，防止同一监听器被多次注册。这是比数组更高效的选择。</p>
      <p class="tl"><strong>扩展点：</strong>可替换为 WeakMap 避免内存泄漏，或添加优先级支持。</p>
    </div>
  </div>
</div>
```

**关键：**
- 代码保持原始格式，**允许水平滚动**（与 cn 版本不同）
- 右侧解释"为什么"，不是"什么"
- 指出设计权衡、扩展点、潜在陷阱

### 架构图 — 课程的核心视觉元素

架构图是课程中**最重要的元素**。每个课程必须包含至少 2 个架构图。使用交互式架构图（点击组件显示描述）。

**架构图类型：**
- **组件图** — 展示模块边界和依赖关系
- **层次图** — 展示分层架构（表现层、业务层、数据层）
- **部署图** — 展示服务拓扑和数据流

**设计原则：**
- 清晰的边界和箭头方向
- 使用颜色区分不同类型的组件
- 标注关键数据流路径
- 包含图例
- **每个组件可点击**，显示职责描述和关键接口

### 数据流动画 — 追踪请求生命周期

数据流动画是仅次于架构图的第二重要元素。每个课程至少 2 个。展示请求从入口到响应的完整旅程。

**内容：**
- 入口点（路由、控制器）
- 中间件链
- 业务逻辑层
- 数据访问层
- 外部服务调用
- 响应返回路径

**动画化：** 使用 `data-steps` 属性创建分步动画，让学习者逐步追踪数据流。

### 技术方案描述 — 简洁文字替代

references/content-philosophy.md

# 内容哲学 — 产品经理版

> **何时阅读此文件：** 在阶段 2.5（编写模块简报）和阶段 3（编写模块 HTML）期间。这些原则指导每个内容决策 —— 展示什么、如何解释以及用什么方式呈现。

这些原则是让产品经理真正看懂系统的关键。

### 核心原则：业务语言，零代码

产品经理需要理解"系统做了什么"和"业务逻辑怎么流转"，不需要知道"代码怎么写"。

**绝对禁止：**
- 任何代码片段（不论长短）
- 代码翻译块
- 技术实现细节（算法名称、数据结构、设计模式术语）
- 编程术语的词汇表提示
- 测验题

**语言规范：**
- 用业务语言描述系统行为："用户提交订单后，系统自动校验库存"而非"调用 checkInventory() 方法"
- 用"模块"、"服务"、"功能"等产品经理熟悉的词汇
- 避免"类"、"函数"、"接口"、"中间件"等编程术语
- 可以提及技术组件的名字（如"数据库"、"缓存"、"消息队列"），但只解释它在业务中的角色

### 展示，不要讲述 —— 极致视觉化

产品经理习惯看流程图和架构图。课程应该更像产品文档而不是技术文档。

**文字限制：**
- 每个文字块最多 **3-4 个句子**。如果你在写第五句，停下来把它转换为视觉元素。
- 每个屏幕必须 **至少 60% 是视觉内容**（流程图、架构图、卡片、模块关系图）。

**将文字转换为视觉元素：**
- 步骤描述 → **流程图**（带清晰的开始/结束/分支）
- "模块 A 和模块 B 协作" → **系统架构图**（带箭头和标注）
- "这个功能包含 X、Y、Z" → **功能模块卡片**（图标 + 一句话描述）
- "用户先做 A，再做 B" → **用户旅程图**（带步骤编号）
- "数据从 X 流到 Y" → **数据流转动画**
- 列表描述 → **带图标的卡片网格**
- 条件逻辑 → **决策树/分支流程图**

**视觉呼吸空间：**
- 在元素之间使用充足的间距
- 在全宽视觉元素和窄文字块之间交替，创造节奏
- 每个模块应该至少有一个"英雄视觉" —— 一个主导屏幕的图表或交互元素

### 业务流程图 — 课程的核心

业务流程图是产品版课程中**最重要的元素**。每个模块至少一个。

**流程图类型：**
- **用户操作流程** — 用户从开始到完成某个目标的完整路径
- **业务逻辑流程** — 系统内部业务规则的执行顺序和分支
- **审批/状态流程** — 数据或实体的状态变迁
- **异常处理流程** — 出错时系统的应对策略

**设计原则：**
- 用业务语言标注每个节点（"校验用户身份"而非"auth middleware"）
- 分支条件用业务条件表述（"库存充足？"而非"inventory > 0"）
- 标注关键的输入和输出
- 使用颜色区分正常路径和异常路径

### 系统架构概览 — 让PM看到全景

用简化的架构图展示系统的"大图"。不需要技术细节，只需要模块边界和职责。

**展示内容：**
- 各功能模块的名称和一句话职责
- 模块之间的调用/依赖关系（用箭头和简短标注）
- 外部系统的集成点
- 数据存储的位置和用途

**不展示：**
- 具体的技术实现（框架名、库名）
- 代码层面的依赖关系
- 部署细节

### 用户旅程图 — 端到端的产品体验

从用户的视角描述使用系统的完整流程。

**结构：**
- 明确的起点（用户意图）和终点（目标达成）
- 每一步标注：用户做了什么 → 系统做了什么 → 用户看到什么
- 标注关键的决策点和分支路径
- 标注可能出错的地方和系统的应对

### 功能模块卡片 — 职责一目了然

每个模块用一张卡片展示其核心信息。

**卡片包含：**
- 模块名称（业务名称，不是代码文件名）
- 一句话职责描述
- 核心功能列表（3-5 条）
- 与其他模块的关系（谁给它数据、它给谁数据）

### 数据流转 — 讲清楚"数据去哪了"

产品经理最关心的问题之一：数据从哪来、怎么处理、到哪去。

**展示方式：**
- 用动画展示数据在系统中的流动路径
- 每个节点标注"对数据做了什么"（而非"用什么技术做的"）
- 标注数据格式的变化（如"用户填的表单" → "存储的订单记录"）
- 标注数据持久化的位置

### 每个屏幕一个概念

不要堆砌信息。模块内的每个屏幕讲清楚一件事。

**好的屏幕主题：**
- "订单创建的完整流程"
- "支付模块和库存模块如何配合"
- "系统如何处理退款请求"

**差的屏幕主题：**
- "后端架构和所有API" — 太大了，拆分
- "技术栈介绍" — 产品经理不需要这个

### 业务规则可视化

系统中的业务规则是产品经理最需要理解的部分。

**展示方式：**
- 用决策树展示条件逻辑（"如果 VIP 用户 → 免运费；如果新用户 → 首单折扣"）
- 用状态图展示实体的生命周期（订单：待支付 → 已支付 → 已发货 → 已完成）
- 用表格对比不同场景的处理方式

### 模块间内容递进

模块之间应该从宏观到微观递进：

1. **模块 1-2**：全景层 — 系统做什么、有哪些大模块、核心价值
2. **模块 3-4**：流程层 — 核心业务流程、用户旅程、数据流转
3. **模块 5-6**：细节层 — 模块协作细节、边界情况、扩展方向

### 实用性导向

每个模块都应该回答产品经理关心的问题：
- "这个系统的核心业务逻辑是什么？"
- "用户操作后系统内部发生了什么？"
- "各模块之间是怎么配合的？"
- "数据是怎么流转和存储的？"
- "如果要加新功能，会影响哪些模块？"
- "系统的边界在哪里？和哪些外部系统有交互？"

如果模块不能帮助产品经理理解业务逻辑或做出产品决策，重新设计它。

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.