Teaching App Builder：文本 → 单文件交互教学 App

把一段教学内容变成一个可双击打开的 HTML 文件：所有 HTML/CSS/JS 内联其中，需要的库走中国大陆 CDN，配色专业，交互服务于理解。

四条核心原则

1. 单文件自洽——所有代码在一个 .html 里，双击即开，不需要服务器、不需要 npm、不需要构建。外部只有 CDN 链接。
2. CDN 必须国内可达——库一律从 BootCDN / staticfile / 360 / npmmirror 引；URL 从 references/cdn-catalog.md 取（已逐条验证），不要凭记忆拼地址。
3. 交互为理解服务——交互的唯一目的是让抽象可操作、过程可单步、对比可并置、因果可试错。讲得清的别加动效，动效不是目的。
4. 忠于原文——把输入文本讲清楚、讲生动，但不编造原文没有的事实、数据、研究、引文。不确定的留白或标注，不要造。

工作流（5 步）

1. 读懂文本，定教学目标

这段内容的核心概念是什么？学完要能理解什么、会做什么？逐点判断：哪些"静态文字+一张图"就讲清了，哪些"非交互不可"（过程演化、参数因果、需要亲手试、需要并置对比）。只给后者做交互。

2. 把内容映射到交互形态

用下面的决策表，把每个知识点落到一种交互形态：

3. 选库——最小集

能零依赖就零依赖：标签页、手风琴、步骤器、滑块联动、测验、目录导航、术语提示，纯 HTML/CSS/JS 就做得好（references/components.md），别为它们引框架。确实需要图表/公式/图解/复杂动画时，才按 references/libraries.md 引——每个库给了即用片段和易错坑。引入的库必须真的用上。

4. 选配色方案

按学科语境从 references/color-schemes.md 选一套（深空蓝/学术纸张/清新薄荷/暖阳赭橙/靛青商务/暗夜霓虹），把它的 :root 段贴进去。6 套共用一套变量名，颜色全走 var(--…)。遵守 60-30-10：主色和点缀色是"盐"，不要大面积铺。

5. 组装单文件 + 自检

以 references/skeleton.md 的骨架为地基（它自带通用 UI 原子：card/btn/callout/badge/grid，省得从零写样式），填入内容与交互，用 Write 工具写出文件，然后逐条过 skeleton.md 末尾的质量清单。

输出约定

• 写成一个 .html 文件，文件名用 kebab-case 反映主题（如 entropy-explained.html、photosynthesis-steps.html），不要含日期。
• 默认写到当前工作目录；用户指定了路径就用用户的。不确定放哪就先问一句，或放当前目录并在回复里给出完整路径。
• 不要把整份 HTML 源码贴进对话——用 Write 工具写文件，对话里只给路径 + 一两句说明"这个 app 讲什么、关键交互是什么、用了哪几个库、哪套配色"。
• 默认界面语言跟随输入文本（中文内容→中文 UI）。

渐进式披露：何时读哪个文件

不要一上来把所有 reference 全读。按需 Read：

典型一次生成会读 2–4 个：skeleton（地基）+ color-schemes（选色）+ libraries/components（按选用的交互）+ 需要时 cdn-catalog（核对 URL）。

常见反模式（别犯）

• ❌ 为一个手风琴引整个 Bootstrap、为几个间距引整个 Tailwind——能零依赖就零依赖。
• ❌ 凭记忆写 CDN URL（库名大小写、版本号极易错）——查 cdn-catalog.md。
• ❌ 满屏炫动效却没讲清概念——交互必须服务理解。
• ❌ 大段正文上彩色、主色铺满背景——破坏专业感，守 60-30-10。
• ❌ 编造原文没有的"数据/研究/事实"来撑满图表——宁可少做交互，不可造假。
• ❌ Chart.js 的 canvas 不放固定高度容器（页面会被无限撑高）——见 libraries.md。
• ❌ 把几百行 HTML 源码糊进对话——Write 写文件，对话只给路径。