# AI 探险号 · 众包课程创作 Skill（第一阶段）

> 用途：给贡献者复制生产相似风格的课程。目标不是让每个人随意写课，而是把 AI 探险号的“互动硬科普”方法复制到其他知识主题。

---

## 一、课程主旨

每门众包课程都必须符合这句话：

**把一个抽象知识点，变成孩子能亲手操作、看见机制、最后掌握术语的互动课程。**

不是：

- 普通图文讲义
- 知识百科
- 选择题集合
- 换皮小游戏
- AI 自动生成的长文

### 课程长度

一门众包课程建议做成 **1 个 C 章节 + 4-8 个 S 小节**。

- **4 个 S 小节是下限**：少于 4 节通常只能做“概念介绍”，很难形成“现象 → 机制 → 变化 → 边界/应用”的完整学习弧线。
- **5-6 个 S 小节最稳**：适合一次 8-15 分钟的儿童互动学习，既不单薄，也不拖沓。
- **7-8 个 S 小节适合复杂主题**：例如网络安全、机器人、气候变化、人体免疫这类需要多个机制拼起来的主题。
- **超过 8 节要拆课**：拆成两门课或两个 C 章节，不要让一个课程变成长讲义。

推荐节奏：

```text
S1 现象入口：孩子先看见问题
S2 核心机制：第一次真正操作机制
S3 变量变化：换一个条件，看结果怎么变
S4 边界/误区：指出什么时候不成立、哪里会出错
S5-S6 应用/迁移：把同一机制用到新场景
S7-S8 综合挑战：只在主题足够复杂时使用
```

---

## 二、每节固定节奏

每个 S 小节必须包含 6 个块：

```text
1. heading：术语 · 一句话
2. hook：阿波开场对话
3. paras：大白话正文
4. ux：互动/动画组件
5. after：技术深入
6. close：体验后命名术语 + 收束
```

标准节奏：

```text
阿波抛问题
  ↓
正文解释机制
  ↓
互动可视化
  ↓
after 加一层技术信息
  ↓
close 用 [[术语]] 划线命名
```

---

## 三、文本规范

### heading

格式：

```text
核心术语 · 一句话说明
```

例：

```text
暴力破解 · 一个个试出来
搜索空间 · 可能答案有多少
浮力 · 水把物体往上托
```

不要写：

```text
小秘密
有趣的密码
来玩一下吧
```

### hook

必须像阿波在和孩子说话。

好：

```text
阿波：如果小偷不知道密码，他能不能把所有可能都试一遍？
```

差：

```text
本节将介绍暴力破解的概念。
```

### paras

- 1–3 句。
- 一句一意。
- 只讲直觉，不堆术语。
- 不要在这里下复杂定义。

### ux

交互必须对应知识机制。

合格：

- 密码强度 → 拖长度滑块，看组合空间变大。
- K 近邻 → 自己放点，看最近邻居投票。
- 注意力 → 连线变粗表示权重变大。

不合格：

- 任何主题都做成接金币。
- 与知识点无关的 QTE。
- 只是点按钮看下一段文字。

### after

after 是全节技术密度最高的地方，必须“加一层”。

合格：

```text
密码强度本质上和搜索空间有关：可选字符越多、长度越长，组合数量会快速变大。
```

不合格：

```text
所以密码真的很重要，我们要保护好自己哦。
```

判据：删掉 after，读者会不会少懂一个机制点？不会就删。

### close

必须出现至少一个 `[[术语]]`，让主阅读器自动划线解释。

例：

```text
你刚才看到的一个个试密码，就叫 [[暴力破解]]。所以好密码不是神秘，而是让搜索空间变大。
```

---

## 四、上传格式

第一阶段上传的是 JSON 课程包。

课程包结构：

> 注意：下面只完整展示 1 个 S 小节对象的写法，正式提交时 `sections` 必须包含 **4-8 个同结构 S 小节**。

```json
{
  "schemaVersion": "1.0",
  "id": "internet-security-basic",
  "status": "lab",
  "title": "网络安全小侦探",
  "emoji": "🔐",
  "audience": "9-12",
  "sourceSkills": ["explain-skill", "viz-ux-skill"],
  "chapters": [
    {
      "id": "password",
      "title": "密码 · 为什么不能太简单",
      "sections": [
        {
          "id": "password-bruteforce",
          "heading": "暴力破解 · 一个个试出来",
          "hook": "阿波：如果小偷不知道密码，他能不能把所有可能都试一遍？",
          "paras": [
            "很短的密码，可能组合很少。",
            "组合越少，机器就越容易一个个试完。"
          ],
          "ux": {
            "component": "labSlider",
            "props": {
              "title": "密码强度滑块",
              "hint": "拖动长度，看破解难度怎么变"
            }
          },
          "after": [
            "密码强度本质上和搜索空间有关：可选字符越多、长度越长，组合数量会快速变大。"
          ],
          "terms": {
            "暴力破解": {
              "s": "把可能的密码一个个试，直到试中。",
              "pro": "它不靠聪明猜测，而是消耗计算时间枚举候选；密码空间越大，成本越高。"
            }
          },
          "close": "你刚才看到的一个个试密码，就叫 [[暴力破解]]。所以好密码不是神秘，而是让搜索空间变大。"
        }
      ]
    }
  ]
}
```

---

## 五、UX 设计总则

众包课程**只允许用 JSON 描述互动**，不允许上传 JS。主站会把 `ux.component + ux.props` 交给隔离的内置渲染器执行。

这样做的原因：

- 投稿者不用写代码，也能生产互动。
- 课程包不会污染主站样式和脚本。
- 审核者可以只看 JSON 判断 UX 是否合规。
- 好作品归档时，可以把临时通用组件升级成专用组件。

### 5.1 UX 必须解释机制

合格 UX 的判断不是“能不能点”，而是：

**孩子操作之后，是否看见了知识点的因果机制。**

| 知识内核 | 好 UX | 差 UX |
|---|---|---|
| 分类 | 把样本放进不同筐，放错有反馈 | 随便点按钮得分 |
| 流程 | 信号/步骤沿箭头前进 | 点下一页看文字 |
| 权衡 | 拖一个变量，结果实时变化 | 三个按钮分别显示三段解释 |
| 关系 | 节点之间连线变粗/点亮 | 孤立卡片依次出现 |
| 层次 | 一层层揭示结构 | 一次把所有文字堆出来 |

### 5.2 组件隔离规则

课程包只能写：

```json
"ux": {
  "component": "labSort",
  "props": {
    "title": "信息分拣台",
    "hint": "先点卡片，再点正确的筐"
  }
}
```

不能写：

```json
"ux": {
  "html": "<button onclick='...'>",
  "script": "..."
}
```

主站会忽略未知脚本，只按白名单组件渲染。

---

## 六、当前可用 UX 组件

### 6.1 `labSlider` 单变量实时探索

适合：

- 强度
- 阈值
- 风险
- 温度
- 速度
- 比例
- 成本

机制：拖动一个变量，结果马上变化。

```json
"ux": {
  "component": "labSlider",
  "props": {
    "title": "密码强度滑块",
    "hint": "拖动长度，看破解难度怎么变",
    "value": 40,
    "low": "太短，组合很少",
    "mid": "长度变长，试错成本明显上升",
    "high": "组合空间很大，暴力尝试会很慢"
  }
}
```

设计要点：

- 只调一个变量。
- `low/mid/high` 必须对应真实机制差异。
- 不要把滑块当成普通选择题。

### 6.2 `labChoice` 判断 / 分诊

适合：

- 能不能说
- 该不该信
- 哪个更安全
- 哪个更符合机制

```json
"ux": {
  "component": "labChoice",
  "props": {
    "title": "信息能不能说",
    "hint": "选出更安全的一项",
    "question": "下面哪类信息更不该发给陌生网站或 AI？",
    "options": [
      {
        "text": "家庭住址和验证码",
        "ok": true,
        "feedback": "对，这类信息能直接影响安全。"
      },
      {
        "text": "今天学了什么知识",
        "ok": false,
        "feedback": "普通学习内容风险低，关键是别带身份和密码。"
      }
    ]
  }
}
```

设计要点：

- 错误反馈要解释原因，不要只说“错了”。
- 选项不能靠语气诱导，必须让孩子真的判断机制。

### 6.3 `labSort` 分类分拣

适合：

- 信息安全
- 垃圾进垃圾出
- 样本分类
- 可回收/不可回收
- 生物分类

```json
"ux": {
  "component": "labSort",
  "props": {
    "title": "信息分拣台",
    "hint": "先点卡片，再点正确的筐",
    "bins": [
      {"id": "ok", "label": "可以说"},
      {"id": "no", "label": "不要说"}
    ],
    "items": [
      {"text": "今天想练英语", "bin": "ok"},
      {"text": "家庭住址", "bin": "no"},
      {"text": "验证码", "bin": "no"},
      {"text": "想让 AI 解释一道题", "bin": "ok"}
    ]
  }
}
```

设计要点：

- 每张卡都必须有明确分类依据。
- 不要放“都可以”的模糊选项。
- 2–3 个筐最合适，最多不要超过 4 个。

### 6.4 `labSteps` / `uxTimeline` 步骤流

适合：

- 历史发展
- 请求流程
- 训练流程
- 生产步骤

```json
"ux": {
  "component": "labSteps",
  "props": {
    "title": "API 请求流程",
    "hint": "一步步点亮请求怎么走",
    "steps": [
      "应用准备请求",
      "带上 Key 验证身份",
      "模型生成回答",
      "结果返回应用"
    ]
  }
}
```

设计要点：

- 用于“了解型”内容可以接受。
- 如果是“理解型”机制，优先用 `labFlow` 或专用可视化。
- 步骤最好 3–6 个，别做成长清单。

### 6.5 `labMatch` 配对

适合：

- 概念和例子
- 问题和答案
- 原因和结果
- 输入和输出

```json
"ux": {
  "component": "labMatch",
  "props": {
    "title": "概念配对",
    "hint": "把能对应的两张卡配起来",
    "pairs": [
      ["API", "程序调用服务的接口"],
      ["Key", "证明身份的门卡"],
      ["后端", "替前端保管密钥的地方"]
    ]
  }
}
```

设计要点：

- 只用于建立对应关系。
- 不要拿它讲复杂动态过程。

### 6.6 `labReveal` 逐层揭示

适合：

- 一层层结构
- 从表面到本质
- 从现象到机制
- 多层系统

```json
"ux": {
  "component": "labReveal",
  "props": {
    "title": "从表面到机制",
    "hint": "点一下，揭开下一层",
    "layers": [
      "表面：AI 给出答案",
      "里面：它先读提示词",
      "更里面：它按概率生成下一个词"
    ]
  }
}
```

设计要点：

- 每一层必须比上一层更深入。
- 不能只是把一段文字拆成三页。

### 6.7 `labFlow` 流程连线

适合：

- 信号流动
- 请求链路
- 注意力/信息传递的低配演示
- 因果链

```json
"ux": {
  "component": "labFlow",
  "props": {
    "title": "请求怎样流动",
    "hint": "点按钮让信号沿流程前进",
    "nodes": ["前端", "后端", "模型服务", "返回结果"]
  }
}
```

设计要点：

- 凡是讲“关系/连接/流动”，优先用这个而不是步骤卡。
- 节点 3–5 个最佳。
- 每个节点名要短。

---

## 七、UI 规范

投稿课程的 UX 必须看起来像 AI 探险号，不像外部插件。

### 7.1 视觉风格

- 浅色工作台。
- 白色卡片。
- 绿 / 蓝 / 紫为主色。
- 圆角 12–18px。
- 柔和阴影，不用深色大块背景。
- 按钮文字必须清楚，不允许白底白字/深底黑字。

### 7.2 反馈风格

- 正确：绿色、撒花、轻快反馈。
- 错误：暖色提示，解释原因。
- 不用红叉。
- 不说“你错了”，说“再想想机制”。

### 7.3 信息密度

- UX 里只放一句指令。
- 解释放在 `paras` 和 `after`，不要塞进按钮。
- 卡片文字短，最长不超过 14 个汉字更稳。

### 7.4 移动端

- 选项数量少。
- 卡片文字不要太长。
- 一个小节不要让用户横向滚动。
- 不依赖 hover。

---

## 八、自查清单

上传前逐条检查：

- ☐ 每个 chapter 是否有 **4-8 个 S 小节**？少于 4 节需要扩展学习弧线，超过 8 节需要拆课。
- ☐ heading 是否露出核心术语？
- ☐ hook 是否是阿波对话，而不是教材腔？
- ☐ paras 是否具体、短句、无生词堆叠？
- ☐ UX 是否解释知识机制？
- ☐ after 是否有技术信息密度？
- ☐ close 是否用 `[[术语]]` 划线命名？
- ☐ terms 是否包含所有划线术语？
- ☐ JSON 是否没有手写 `code`？课程码由发布服务器自动生成 4 位数字。
- ☐ 是否没有外部脚本、密钥、真实儿童隐私？
- ☐ `ux.component` 是否在白名单里？
- ☐ UX 是否可以只靠 JSON props 复现？
- ☐ 移动端按钮文字是否不会挤出容器？

---

## 九、第一阶段工作流

```text
阅读本 skill
  ↓
复制 upload.html 模板
  ↓
编辑 JSON
  ↓
上传页校验
  ↓
保存到实验区
  ↓
点击发布，服务器生成 4 位课程码
  ↓
主站输入课程码查看
  ↓
小范围测试
  ↓
人工挑选优秀作品归档
```
