查清孩子哪一步没学懂,再用 AI 生成交互式单页课件:Marble 开源知识图谱 os-taxonomy

平时在家辅导孩子写作业,或者用 AI 给孩子讲理科概念时,经常会遇到两个头疼的问题。

第一个问题是找不到孩子真正卡住的地方。

比如孩子三年级学分数总是出错,往往不是当前这节课太难,而是往前推一两年的「等分面积」或「单位刻度」没建立起直观印象。

但课本是按学期往后排的,家长很难一眼看清某个知识点背后到底挂着哪些前置条件。

第二个问题是 AI 讲题太像电子课本。

直接让大模型给孩子讲数学或科学,它通常会吐出一大段文字解释,孩子看两行字注意力就转移了。

最近,儿童教育团队 Marble 在 GitHub 上开源了他们的核心知识图谱项目「os-taxonomy」,并同步上线了一个免登录的 3D 交互预览页(https://withmarble.com/curriculum/)。

这个项目把 4 到 15 岁要学的近两千个微知识点连成了一张前置依赖图,还附带了一套教学研究档案和「marble-builder」课件生成技能。

你既可以在网页上直接点开任意知识点查看它的前置学习链条,也可以告诉 AI 孩子的年龄和想弄懂的概念,让它顺着图谱直接生成一个带动画的交互式单页课件。

官方在线预览页(withmarble.com/curriculum):每个彩色光点代表一个微知识点,纵向高度对应年龄,底部是 4 岁启蒙概念,往上延伸到 15 岁

▲ 官方在线预览页(withmarble.com/curriculum):每个彩色光点代表一个微知识点,纵向高度对应年龄,底部是 4 岁启蒙概念,往上延伸到 15 岁

该项目目前在 GitHub 上已经拿到近 6000 个 Star,下面拆解一下它的在线预览页、底层数据结构以及结合 AI 助手的具体玩法。

Part 1

在线 3D 图谱与四层数据结构:从「学什么」到「怎么教」

如果不想上来就看代码文件,可以先在浏览器里打开官方的在线预览页(https://withmarble.com/curriculum/)。

画面中央是一个由上千个彩色光点组成的漏斗状 3D 知识树,按住鼠标左键拖拽可以旋转视角,滚轮可以放大缩小,左下角的「Subjects」面板可以按学科单独开关显示。

当你点击图谱里的任意一个光点(例如 8 岁的「等值分数 Equivalent fractions」),所有无关节点都会自动变暗,只用高亮连线把学懂它之前必须掌握的 25 个前置概念一路向下串回 4 岁的启蒙阶段。

同时页面右侧会弹出详情卡片,给出一句平时能顺口考考孩子的测试问题,并列出它直接依赖的上一级概念(Builds directly on)以及学完后能解锁的下一级概念(Unlocks next),点一下列表就能顺藤摸瓜一路往前查。

在预览页点击「等值分数」节点:自动高亮底部的 25 个前置概念链条,并在右侧卡片展示日常评估问题与上下游节点

▲ 在预览页点击「等值分数」节点:自动高亮底部的 25 个前置概念链条,并在右侧卡片展示日常评估问题与上下游节点

支撑这个 3D 图谱的底层数据,全部以纯 UTF-8 的 JSON 格式存放在仓库的 data/ 目录下,共分为四个互相咬合的数据层:

1. 1930 个微知识点(topics.json):覆盖 4 到 15 岁的科学、数学、英语、计算机等 9 个学科,每个节点都拆到了最小可教单元,并附带了掌握标准(evidence)和一句日常评估提问(assessmentPrompt)。

2. 4102 条前置依赖连线(dependencies.json):用有向无环图把知识点串起来,区分了硬性前置(hard)和软性辅助(soft),并用一句话写明了为什么要先学前者。

3. 1049 份教学研究档案(teaching-research.json):针对科学和数学知识点,详细整理了具象教具建议、孩子的常见错误直觉(misconceptions)以及先预测再验证的互动步骤。

4. 内置 marble-builder 课件生成技能:位于 .agents/skills/marble-builder/ 目录下,要求 AI 把每个知识点做成一个免安装、双击就能在浏览器离线打开的单文件 HTML 交互网页。

Part 2

把知识点变成可操作的单页交互课件

我觉得这是最有意思的部分,以后随时都可以让 AI 根据本项目里的设计规范,搓一个交互式课件给孩子把玩,他们会把持不住的。

先看看官方附赠的几个示例效果:

Water Lab 视觉参考:左侧拖动温度滑块观察杯中水结冰或沸腾,右侧小窗实时展示水分子的运动状态

▲ Water Lab 视觉参考:左侧拖动温度滑块观察杯中水结冰或沸腾,右侧小窗实时展示水分子的运动状态

Moon Visit 课件封面:每次学习都从一个具体的核心问题和插画封面开始,不放冗长的教学目标列表

▲ Moon Visit 课件封面:每次学习都从一个具体的核心问题和插画封面开始,不放冗长的教学目标列表

Moon Visit 视角切换:从地面观察白天的月亮,随时可以切回太空视角查看太阳、地球与月球的相对光照位置

▲ Moon Visit 视角切换:从地面观察白天的月亮,随时可以切回太空视角查看太阳、地球与月球的相对光照位置

Sky Colour Explorer:通过光子散射动画,向孩子直观展示为什么正午的天空是蓝色的

▲ Sky Colour Explorer:通过光子散射动画,向孩子直观展示为什么正午的天空是蓝色的

Hidden Cubes:通过旋转和逐层展开三维积木块,帮孩子看清被挡住的中心积木,理解体积与复合单位

▲ Hidden Cubes:通过旋转和逐层展开三维积木块,帮孩子看清被挡住的中心积木,理解体积与复合单位

Bee Builder:在保持装蜜面积完全相等的前提下,把正方形和正六边形的蜂房周长拉直对比,直观理解为什么蜜蜂筑巢选六边形更省蜂蜡

▲ Bee Builder:在保持装蜜面积完全相等的前提下,把正方形和正六边形的蜂房周长拉直对比,直观理解为什么蜜蜂筑巢选六边形更省蜂蜡

Otter Forest:海獭、海胆与海藻森林的生态沙盒,孩子可以增减物种并加速时间,观察捕食关系对生态平衡的影响

▲ Otter Forest:海獭、海胆与海藻森林的生态沙盒,孩子可以增减物种并加速时间,观察捕食关系对生态平衡的影响

这些课件在交互规范上遵循了三个很克制的设计细节:

✦ 同屏只留一个标题和一句操作提示:画面主视觉旁只放一句大字号引导语,反馈信息也直接替换这句引导语,不在屏幕上堆砌说明卡片。

✦ 专业词汇随点随查:画面里的专业术语都带有虚线底纹,点击或悬停就会弹出简短的大白话解释框。

✦ 把测试融进操作里:采用「先预测、再提交、最后揭晓画面」的逻辑,让孩子在改变场景参数后先判断结果,再切换视角验证。

专业词汇点按解释:点击带虚线的 horizon,弹出不剧透答案的简短定义

▲ 专业词汇点按解释:点击带虚线的 horizon,弹出不剧透答案的简短定义

把评估融入场景交互:在太空视角下改变宇航员位置,让孩子根据光照方向判断此时能否在地面看到月亮

▲ 把评估融入场景交互:在太空视角下改变宇航员位置,让孩子根据光照方向判断此时能否在地面看到月亮

反正,项目方给了设计规范,你也可以用 AI 搓出类似的东西来(具体操作看下一部分)。

Part 3

结合 AI 给孩子查漏补缺、定制课件

如果只是想直观浏览各个年龄段的知识点是怎么串起来的,直接在浏览器打开 https://withmarble.com/curriculum/ 即可。

如果你想使用仓库最新扩充的 1930 个节点数据、1049 份教学研究档案,或者调用 marble-builder 生成课件,不需要配置任何数据库或后端服务,克隆到本地(约 30MB)就能直接使用:

git clone https://github.com/withmarbleapp/os-taxonomy.git
cd os-taxonomy

克隆完成后,直接用浏览器双击以下路径里的 experience.html,就能离线试玩官方自带的 5 个交互课件:

✦ 白天为什么能看到月亮(3D 空间光路):.agents/skills/marble-builder/examples/moon-visit/experience.html

✦ 天空为什么是蓝色的(光子散射模拟):.agents/skills/marble-builder/examples/sky-colour-explorer/experience.html

✦ 被挡住的积木块(三维分层与体积):.agents/skills/marble-builder/examples/hidden-cubes/experience.html

✦ 蜜蜂为什么造六边形蜂房(等面积周长对比):.agents/skills/marble-builder/examples/bee-builder/experience.html

✦ 海獭与海藻森林(生态演化沙盒):.agents/skills/marble-builder/examples/otter-forest/experience.html

如果你想针对自家孩子的情况查漏补缺或生成中文课件,可以用 Claude Code、Codex 或 WorkBuddy 打开该仓库目录。

工具会自动识别里面的 .agents/skills/marble-builder/SKILL.md 技能文件,你可以直接复制修改下面两段提示词来调用。

玩法 1:顺着图谱往上查出孩子的知识漏洞

当孩子在某个概念上反复出错时,可以把年龄和具体表现填进这段提示词发给 AI:

请读取当前仓库 data/topics.json、data/dependencies.json 和 data/teaching-research.json 的数据,帮我分析孩子的学习卡点。

孩子目前年龄:「8 岁(小学三年级)」
目前卡住的表现:「做分数比大小和等值分数(如 1/2 等于 2/4)时总是死记硬背,认为分母越大分数就越大」

请帮我梳理:
1. 在 topics.json 中定位最匹配的 1~3 个核心微知识点(列出 ID、中英文名称和掌握标准 evidence)。
2. 顺着 dependencies.json 往上追溯 2 层前置依赖(区分 hard 和 soft),列出他可能没打牢的前置概念及原因。
3. 将这些前置概念转化为 3~4 个不需要纸笔、平时在餐桌上就能顺口问孩子的中文小问题(参考 assessmentPrompt 风格,单位替换为人民币和公制单位)。
4. 查阅 teaching-research.json 中对应节点的常见认知误区(misconceptions)和具象教具建议,告诉我可以用家里什么小物件帮他建立直觉。

玩法 2:生成全中文或中英双语的单页课件

定位到需要补齐的知识点后,可以用下面这段提示词让 AI 编写一个全中文的离线交互网页:

请严格遵循仓库中 .agents/skills/marble-builder/SKILL.md 及其 references/ 下的设计规范,为「8 岁」孩子构建一个单文件离线 HTML 交互式学习体验。

本次学习目标:「理解为什么 1/2、2/4 和 4/8 代表相同的数量(等值分数)」

请执行以下本土化要求:
1. 先读取 data/topics.json 和 data/teaching-research.json 中对应节点的教学研究与常见误区,用中文向我提交一份简短的交互设计方案,等我确认后再编写完整 HTML。
2. 界面文字全面使用简体中文,严格保留「同屏仅一个标题 + 一句主指令」的极简排版,不堆砌文字段落。
3. 对核心概念词(如「等分」「分子」「分母」)保留虚线底纹,点击时弹出简明中文解释并附注英文术语。
4. 涉及切分物体、测量或货币时,使用国内日常熟悉的物品与公制单位。
5. 最终交付一个无外部运行时依赖、双击即可在浏览器打开的独立 HTML 文件。

AI 会先给出一份简短的互动设计草案,确认后几分钟就能生成好一个可在平板或电脑浏览器里运行的单页应用。

玩法 3:开发者命令行快速检索与数据校验

如果你是开发者,想在终端里直接查看某个知识点的前后置链路(以 mt__00ZSLnB7p 节点为例),可以运行这行 Node.js 命令:

node -e ‘
const fs = require("fs");
const topics = new Map(JSON.parse(fs.readFileSync("data/topics.json")).topics.map(t => [t.id, t]));
const deps = JSON.parse(fs.readFileSync("data/dependencies.json")).dependencies;
const id = "mt__00ZSLnB7p";
const t = topics.get(id);
console.log("【知识点】", t.name, `(${t.subject}, ${t.ageRangeStart}-${t.ageRangeEnd}岁)`);
console.log("【日常提问】", t.assessmentPrompt);
console.log("【前置依赖】");
deps.filter(d => d.topicId === id).forEach(d => {
  console.log(` – [${d.strength}] ${topics.get(d.prerequisiteId).name}: ${d.reason}`);
});
‘

如果二次开发时修改了本地 JSON 数据,可以运行仓库自带的无依赖脚本检查是否有循环依赖或校验和错误:

node scripts/validate.mjs
node –test scripts/teaching-research.test.mjs

Part 4

国内学科适配与开源协议

由于该项目底层对齐的是英美澳等国的 8 套课程标准(共 3881 条课标),在国内环境中使用或做二次开发时,可以根据学科特点做如下取舍:

1. 数学、科学与计算机(共 1241 个节点):这三门学科占比超过四分之三,底层认知规律跨语言通用,只需在生成内容时把美元、华氏度、英寸等符号替换为人民币、摄氏度和公制单位即可直接复用。

2. 英语与人文社科(共 545 个节点):英语节点按母语儿童(ELA)的自然拼读和阅读策略编排,适合走原版阅读路线的孩子查漏补缺,公立教材路线建议将起始年龄往后顺延 2 到 3 年参考;历史与社会学科包含较多英美本土制度,日常重点参考「地图比例尺」「时间线推理」等通用方法节点即可。

3. 隐私与本地运行原则:无论是数据集还是生成的 HTML 课件,默认均为纯静态本地文件,不调用远程接口,也不收集任何未成年人答题数据。

4. 商用与开源协议:图谱数据库结构采用 ODbL 1.0 协议,文字内容与示例课件采用 CC BY-SA 4.0 协议,支持商业产品免费集成,只需按规范保留对 Marble 的署名并将对图谱数据库本身的修改保持开放。

总之,对于家里有娃的家长来说,这个项目很有用,强烈推荐。

相关链接:

✦ GitHub 仓库:https://github.com/withmarbleapp/os-taxonomy

✦ 在线 3D 知识图谱浏览:https://withmarble.com/curriculum

✦ Water Lab 交互示例:https://withmarble.com/water-lab

By nanikun