ywEdAi/teachable-figures

项目作用

Teachable figures 是一个 Agent 技能：把一条课堂主张转成学习者能动手的实验——先预测结果，再改变原因、读出效果，最后解释一个新案例。技能先写教学规格（主张、常见误解、原因、可观察效果、真值模型），再产出独立的 HTML 图表，或接入宿主应用的课程结构 教学规格与渲染选择。

仓库附带从两个上游技能融合来的渲染工具（机械/等距 SVG 与可旋转 3D）、六节已审阅的完整课程，以及浏览器检查工具。随附的“Anatomy”是绘制拆解、关节等解释性对象的工具包，不是医学图谱。

适合能改变并观察的机制（齿轮比、注意力掩码、截面）和需要切割、分离、旋转的结构；不适合纯数据图表、仪表盘、幻灯片，也不适合当作临床解剖、CAD 或物理引擎级精度模型 适用判断。

安装与首次使用

在 Claude Code 中克隆到个人技能目录：

git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures

只用于单个项目时，改克隆到该项目的 .claude/skills/teachable-figures。重启 Claude Code 后输入 /teachable-figures 并附上教学任务。Codex 中克隆到 ~/.codex/skills/teachable-figures，用 $teachable-figures 调用 安装步骤。

默认的引导模式最多问五个问题，每个都带可回复“ok”采纳的推荐答案——学习者是谁、主张与误解、独立 HTML 还是宿主应用、保真度、计划控件——确认方案后开始构建。也可以直接说“just build it”跳过提问，同时给出主张、学习者、目标和保真度，技能会套用默认值并在交付说明中列出所有假设 两种模式。示例提示：

/teachable-figures Explain to middle-school students why an idler gear
does not change the speed-ratio magnitude.

不安装也可以先在浏览器里看 六个在线示例，每个示例页离线可用，带原生控件、重置和解释问题。How it works 页面本身就是用这张技能做出来的教学图。

使用约束

技能和独立页面没有包运行时依赖；只有 Anatomy 构建器需要 Node.js，Playwright 是浏览器检查的开发依赖。在仓库内运行 npm ci、npm test、npm run test:browser；浏览器套件默认使用已安装的 Google Chrome，设置 BROWSER_CHANNEL=chromium 可改用 Playwright 的 Chromium 检查说明。

生成的图是教学设计，未经学习者实测；模型和浏览器检查通过不代表学习有效，也不代表已通过读屏器评估。上游 Anatomy 示例只是渲染演示，接入课程前必须关闭其自动巡览。六节完整课程不会自动播放 已知限制。

仓库没有为原创课程内容、应用引用和截图声明许可证。随附的 Anatomy 与 iso-figure 贡献保留各自 MIT 声明，胸部网格来自 Human Reference Atlas / HuBMAP，采用 CC BY 4.0 来源与许可。

HotRepo 点评

该项目在 2026-11-01 的 HotRepo JavaScript 新项目榜上留下记录，统计窗口自 2026-10-31T10:45Z 开始，期间净增 99 Star 新项目榜记录。没有任何全部语言日榜名次记录。同一时段的 Star 采样从 101 升到 200，最后几小时趋于平缓；观察窗口很短，无法据此判断教学质量。更有参考价值的是项目自己说明的：这些图表尚未经过学习者评测。