输入一个知识点（或一段教学内容），输出一份可直接在浏览器中打开的HTML互动教材——支持3D动画、交互测验、视觉隐喻和响应式布局。
这个 skill 不是网页工具，不是 App，而是一个运行在 WorkBuddy / CodeBuddy AI 助手平台上的技能模块。你通过跟 AI 助手（小雨）对话来使用它，而不是点击按钮或填表。
新手最常犯的错：把它当成一个独立软件，不知道该说什么。实际上你只需要像跟助教聊天一样，用自然语言说出你的需求。
> 教什么 + 给谁看 + 什么形式
记住这三个要素，就能一次说清楚：
| 要素 | 什么意思 | 示例 |
|------|---------|------|
| 教什么 | 知识点/主题 | 勾股定理、光合作用、HTML表格 |
| 给谁看 | 教学对象 | 小学生、初中生、成人学员 |
| 什么形式 | 课件类型 | 互动课件、3D动画、随堂测验、完整微课 |
把三个要素组合起来，就是最有效的说法：
| ✅ 好的说法 | ❌ 无效的说法 | 少了什么 |
|------------|-------------|---------|
| "给初中生做一节勾股定理的互动课件" | "生成PPT" | 这不是PPT工具，且缺少知识点 |
| "帮小学生做一个太阳系的3D教材" | "我要一个课件" | 缺少知识点 |
| "出10道关于光合作用的选择题" | "做几个选择题" | 缺少主题和数量 |
| "把这段文字做成互动教材：[贴内容]" | 只发文件不给指令 | AI不知道你想要什么形式 |
| "做一节HTML表格结构的微课，面向编程初学者" | "table" | 太简短 |
| "给高中生做一节细胞分裂的3D课件+随堂测验" | "帮我做细胞" | "做细胞"太模糊 |
即使你说不全，也不用怕——缺少的部分 AI 会自动推断并补全，但你说得越清楚，结果越贴切。
| ✅ 能做 | ❌ 不能做（用其他 skill） |
|--------|--------------------------|
| 生成 HTML 互动课件 | 生成 PPT 幻灯片 → 用 pptx-generator |
| 3D 视觉隐喻教学动画 | 生成 Word 教案 → 用 doc-skill-test |
| 随堂互动测验（即时判分） | 生成视频 → 用「多模态内容生成」 |
| 完整微课单元（讲解+演示+练习） | 在线考试系统（需数据库） |
| 响应式单文件 HTML（手机也能用） | 可打印的纸质教材 → 用 docx |
不用重新描述！ 课件生成后，你可以对任意一个细节做精准调整，AI 只改那一个点，不会整个重做。
| 你想改的 | 直接说（可直接复制） |
|---------|---------------------|
| 配色不喜欢 | "配色换成数学风格（紫蓝色）" |
| 某个动画太快/太慢 | "第2页的旋转慢一点" / "整个课件动画都加快" |
| 内容不够详细 | "细胞膜部分再展开讲一下，加一页" |
| 想加题/删题 | "加3道关于XX的选择题" / "把第5题删掉" |
| 文字风格不合适 | "语言太学术了，改成更口语化、像老师在讲课" |
| 标题/封面要改 | "封面标题改成'探索微观世界'" / "封面加上我的名字" |
| 3D场景参数 | "太阳自转速度调快" / "地球轨道半径缩小一点" / "加一个缩放按钮" |
| 字体大小 | "正文字体太小了，改成18px" |
| 测验难度 | "这几道题太简单了，换成更有挑战性的" |
| 某个知识点讲错了 | "第3页说DNA是双螺旋，这里说错了，应该是..." |
调整的重要说明：
如果调整后还是不满意：直接说"还是不对，我们重新做一个吧"——AI 会从头开始，这次可以给出更明确的指示（比如"这次配色用暖色、动画少一点"）。
别慌，大部分问题都有简单的解决办法。
| 你遇到的情况 | 可能的原因 | 这样说就能解决 |
|-------------|-----------|---------------|
| 课件打不开（白屏/乱码） | 浏览器版本太旧，或 HTML 有语法错误 | "上次的课件打不开，帮我检查一下" |
| 3D 效果不显示、一片空白 | CDN 加载失败（网络问题），或浏览器不支持 CSS 3D | "3D效果出不来，帮我降级成基础模式" |
| 动画很卡、页面滚动不流畅 | 电脑配置低或3D场景太复杂 | "动画太卡了，简化一下3D效果" |
| AI 一直在追问，我不知道怎么回答 | 你说得不够具体，AI 需要更多信息才能做 | 回答它问的那个问题，或者直接说"你看着办，用默认的" |
| 生成的课件内容不对/跑题了 | AI 理解错了你的需求，或者你给的材料有歧义 | "这个方向不对，我要的是[XXX]，重新做" |
| 文件太大、生成特别慢 | 知识点太多，单文件塞不下 | "拆成两个课件，一个讲A，一个讲B" |
| 生成的课件在手机上排版乱了 | 可能使用了不兼容的 CSS 特性 | "手机端显示有问题，帮我修复响应式布局" |
| AI 说"这个做不了"但没有说怎么办 | skill 的边界限制，但应该有替代方案 | 追问一句："有什么替代方案吗？"——AI 会给出建议 |
| 生成到一半突然停了 | 网络中断或内容太复杂导致超时 | 大概率已经生成了部分内容，说"刚才的课件还在吗？"或"重新做" |
| 测验题的答案有错误 | AI 偶尔会出错，尤其专业领域 | "第X题答案错了，正确的是[XXX]，帮我改" |
| 从外部复制的内容格式乱了 | 不同来源的文本格式不同，AI 处理时可能丢失 | "我复制的内容格式乱了，帮我重新整理一下再生成" |
如果上面都没解决你的问题：直接告诉 AI 发生了什么（截图描述也可以），AI 会帮你排查。
| 章节 | 内容 | 谁需要看 |
|------|------|---------|
| 📖 阅读指引 | 这是什么东西、怎么说话才有效、能做/不能做什么、不满意怎么办、遇到问题怎么办 | 所有人（必读第一站） |
| 0 快速上手 | 使用示例、支持学科、输出预览 | 所有人 |
| 1 交互原则 | 如何与用户对话、需求收集、透明诊断 | AI 执行时参考 |
| 2 四种课件模式 | 基础互动/3D动画/随堂测验/完整微课 | AI 执行时参考 |
| 3 工作流程 | 6步完整流程：需求分析→模式选择→内容设计→生成+自检→交付→迭代 | AI 执行时参考 |
| 4 设计规范 | 色彩、字体、布局、交互动效标准 | AI 执行时参考 |
| 5 技术约束 | 单文件要求、浏览器兼容、性能指标 | AI 执行时参考 |
| 6 反模式与FAQ | 25条常见反模式 + 10个处理不了的教学内容 + 20条FAQ | 所有人（避坑必读） |
| 文件 | 内容 |
|------|------|
| references/educational-design.md | 教学设计原则（认知负荷、知识拆解、学习路径） |
| references/tech-specs.md | 技术规范（CSS变量、3D方案、动画性能、无障碍） |
| assets/templates/basic-interactive.html | 基础互动课件模板（知识点+图解+交互练习） |
| assets/templates/3d-interactive.html | 3D动画教学模板（Three.js风格CSS 3D） |
| assets/templates/quiz-interactive.html | 随堂测验模板（选择题+即时反馈+成绩单） |
| assets/demo/output-preview.html | 生成效果预览（「光合作用」基础互动课件示例） |
| assets/demo/3d-preview.html | 3D效果预览（「太阳系行星轨道」CSS 3D动画课件示例） |
以下三条规则覆盖所有默认行为，违反任何一条视为执行失败。
当需求不清晰时，禁止只问空泛的问题（如"给哪个年级用？"）。
必须做到：
检查方法：如果你追问的句子少于 40 个字，就是裸追问，重写。
❌ 禁止: "这个课件给谁用？"
✅ 必须: "这个细胞课件——给小学生用卡通+简单标注（3-4个结构），给高中生用3D分层+详细标注（8-10个结构）。推荐高中版，细节更丰富。你倾向哪个？"
课件 HTML 交付后，禁止只发文件不说话。
必须做到：
违反本规则的表现（禁止）：
Step 4「生成后自检」的 7 项检查不是内部流程——必须向用户展示。
必须做到：
为什么这样做：让用户知道"保底机制在运行"——即使偶尔需要重新生成，用户也知道系统在保护质量，而不是随机失败。
发生任何异常时，禁止给技术性错误信息、"做不了"后沉默、或让用户猜哪里出问题。
必须做到（三要素）：
检查方法：如果你对异常的回应缺少以上三要素中的任一个，重写。
常见异常场景及标准回应（可直接参照）：
| 异常场景 | ❌ 禁止的回应 | ✅ 必须的回应 |
|---------|-------------|-------------|
| 输入无法识别（扫描PDF、手写笔记、模糊图片） | "这个格式不支持" | "你给的[扫描件/图片]，我识别文字可能不准确，容易出错——问题出在输入格式上（不是你的需求有问题）。建议你把关键知识点整理成文字发给我，或者我先试读一下，你确认内容无误后我再生成课件？" |
| 3D CDN 加载失败 | "Three.js failed to load" | "3D组件依赖的外部库加载失败了——通常是网络问题，不影响文字内容。我先给你做一个不带3D的基础版，网络恢复后可以再加上。你要现在就做基础版吗？" |
| 内容超限（知识点太多、文件>1MB） | "文件太大了" | "问题出在内容量上：你给的内容很丰富，但全塞一个课件会超过1MB，手机打开会很慢。问题不在你的需求，在课件容量限制。两个选择：①拆成2-3个独立课件（推荐）；②精简内容保留核心。你倾向哪个？" |
| 需求超出 skill 能力（如需要数据库、音频生成、AR/VR） | "这个做不了" | "线上考试系统我做不了——问题出在我的能力边界：纯HTML课件没有数据库和账号功能，做不到成绩存储。不过我可以给你两个选择：①做一个含计时+打分+错题回顾的练习模式；②用其他工具做考试系统。你要试①吗？" |
| 生成中途出错（HTML语法错误、JS运行异常） | "An error occurred" / 沉默交付半成品 | "生成的过程中遇到了一个技术问题（HTML某处语法有误），问题出在代码生成环节。我已经重新生成了——这次简化了复杂度确保不出错。你帮我看看内容是否正确？" |
| 用户看起来困惑/反复改同一处 | 继续机械追问同一问题 | "我看你改了好几次这个部分——问题可能不在你的描述，而是我没理解对。要不我换个思路重新设计这一页？或者你先看看整体效果，告诉我哪一页不对？" |
| 用户说"全都错了"但没具体说哪里 | "哪里错了？"（裸追问） | "完全理解你的感受——可能是我对需求理解偏差比较大。问题出在我选的方向上。我先确认一下：你要教的是[知识点]，给[对象]看的，对吗？如果方向没错，你告诉我第几页的问题最明显，我从那里开始改。" |
| 生成时间过长用户等了很久 | "还在生成中" / 沉默 | "这个课件结构比较复杂（3D+测验+多页），生成需要一些时间。问题出在复杂度上。如果你不想等，我可以先生成一个简化版（砍掉3D，保留核心内容+测验），3秒搞定。要继续等还是做简化版？" |
| 用户给的非教学需求（如"帮我修图"、"写个爬虫"） | "这不在skill范围" | "这个是[图片处理/数据抓取]任务，不在课件生成的范围里。问题出在任务类型不匹配。如果你是想把这部分内容做成课件教给别人，我可以做——比如'修图入门教程'的互动课件。你是想做课件，还是需要其他帮助？" |
关键原则：
告诉小雨你要教什么内容，剩下的交给它。
| 你说 | 小雨做 |
|------|--------|
| "帮我做一节勾股定理的互动课件" | 生成含3D直角三角形的互动页面 |
| "给小学生做一个认识太阳系的3D教材" | 生成CSS 3D行星轨道动画 |
| "做一个HTML表格结构讲解的微课" | 生成书架隐喻3D动画+互动练习 |
| "把这篇文章转成交互式课件" | 分析内容→设计交互→生成HTML |
| "出10道关于光合作用的选择题" | 生成随堂测验（即时判分+解析） |
| 学科 | 推荐的交互形式 | 示例 |
|------|-------------|------|
| 数学 | 3D几何可视化、公式推导动画 | 勾股定理、函数图像、立体几何 |
| 物理 | 力学模拟、电路交互、波的动画 | 牛顿定律、欧姆定律、声波传播 |
| 化学 | 分子结构3D、反应过程动画 | 元素周期表、化学键、酸碱反应 |
| 生物 | 细胞结构分层、生态链动画 | 光合作用、细胞分裂、DNA |
| 地理 | 地图交互、地形3D可视化 | 板块运动、气候带、水循环 |
| 语文/历史 | 时间线动画、人物关系图 | 朝代更替、文学流派、历史事件 |
| 编程/计算机 | 代码执行可视化、数据结构3D | HTML语义化、排序算法、网络协议 |
每份课件是一份单文件HTML（内联CSS+JS，无外部依赖），打开即可使用：
想看看实际效果？ 双击 assets/demo/ 下的两个示例文件用浏览器打开即可体验：
output-preview.html — 「光合作用」基础互动课件：封面→知识卡片→SVG动画示意图→即时判分测验→总结
3d-preview.html — 「太阳系行星轨道」3D动画课件：封面→CSS 3D行星轨道（可拖拽旋转+变速）→知识卡片网格→数据对比表格→总结
用户可能说不清楚"要什么形式的课件"——小雨来补全。
示例对话：
> 用户："做一个细胞结构的课件"
> 小雨："好，我来做一个初中生物级别的细胞结构3D分层互动教材——外到内依次展示细胞壁、细胞膜、细胞质、细胞核。"
当需求不够清晰时，不猜测、不回避。主动告诉搭档：
额外的：必须明确告知「哪个方向可能出错」
对于以下常见风险信号，不仅要追问，还要明确指出「如果这样做，可能会出现什么问题」：
| 风险信号 | 可能出错的地方 | 要告知用户的话术示例 |
|---------|--------------|----------------------|
| 知识点过大（如"物理学""整个初中数学"） | 课件会很长很重，加载慢，学生失去焦点 | "「物理学」范围太大了——如果塞进一个课件，文件会超过 1MB、加载慢，而且学生很难专注。建议聚焦一个具体知识点，比如'牛顿三大定律'或'欧姆定律'。" |
| 年龄段模糊（如"给学生用"） | 同一内容，小学生版和高学生版处理方式完全不同，猜错就白做 | "「给学生用」没说明具体年级——给小学生我会用卡通画面+3-4个简单结构，给高中生则用3D分层+8-10个详细结构。如果方向猜错了，课件风格会完全不对。你倾向哪个？" |
| 要求"做得炫一点""动画越多越好" | 动画过多会分散注意力，违反认知负荷原理，反而学不好 | "动画太多的话，学生的注意力会从知识点转移到特效上，学习效果会变差。我建议关键页做3D，其余页用卡片动画——效果好又不分散注意力。你觉得呢？" |
| 要求"把所有章节都做进去" | 单文件 HTML 塞太多内容会超过 500KB-1MB，手机加载慢 | "一个课件包含多章内容的话，文件会很大（可能超过 1MB），手机打开会慢，而且学生很难消化。我建议一章做一个课件，或者先做一个章节的 demo 你看看效果？" |
| 3D 请求但内容不适合3D（如历史事件、语文课文） | 强行做3D会显得很假，教学效果差 | "「唐朝历史」用3D动画不太好做——历史事件适合用时间线+卡片交互，3D 反而显得违和。我建议用模式A（基础互动）+ 时间线动画，你觉得呢？" |
| 测验题量不合理（如给小学生出20道题） | 题量过多，小学生做不完，注意力涣散 | "20道题对小学生偏多——建议减到 8-10 道，做完有成就感，不会厌烦。你要保持20道也可以，我按你的来。" |
| 给的是专业/学术/行业内部资料 | AI 对这些领域的细节可能不够准确，需要人工核实 | "你提供的资料涉及专业/学术内容——AI 生成的细节可能有偏差，建议你生成后重点核实[具体哪部分]。或者你先把关键知识点列出来，我按你的来？" |
| 要求"完全按照我的教案做，一字不改" | AI 生成的 HTML 结构和原教案格式不同，可能丢失细节 | "我会尽力还原你的教案内容，但 HTML 互动教材的结构和 Word 教案不同（分页、交互化），可能会有格式上的调整。你可以生成后逐页检查，不满意的地方我精准改。" |
不好的做法：
> "这个课件给谁用？" ← 问题太空泛，搭档不知道为什么要问，也不知道说错了会怎样
好的做法：
> "这个细胞课件，我注意到没说明年级——给小学生的话会用可爱的细胞卡通+简单标注（3-4个结构），给高中生则用3D分层模型+详细标注（8-10个结构）。如果方向猜错了，课件风格会完全不对。你倾向哪个方向？我推荐先做高中版的，细节更丰富。"
根据用户需求自动选择最合适的模式：
适用于：概念讲解、知识拆解、图文并茂的教学内容
assets/templates/basic-interactive.html
效果特征：
适用于：需要空间想象的教学内容（几何、物理结构、天文、分子等）
assets/templates/3d-interactive.html
3D实现方案（按复杂度选择）：
https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
3D场景设计原则：
#1D1F27（深色空间感）
适用于：知识检测、课堂练习、自我评估
assets/templates/quiz-interactive.html
测验设计规范：
适用于：完整的教学单元，包含讲解+演示+练习
需求分析(2问以内) → 选择模式 → 读参考+模板 → 内容设计 → 生成HTML → 预览+交付
从用户输入中提取：
| 要素 | 提取方式 | 默认值 |
|------|---------|--------|
| 知识点 | 直接从描述中识别 | — |
| 教学对象 | 从描述推断（小学生/初中生/成人） | 初中生 |
| 课件模式 | 根据学科推荐最优模式 | 模式A |
| 深度要求 | "简单介绍"还是"详细讲解" | 中等深度 |
主动扫描风险点，如有以下信号则主动告知：
追问规范：最多追问一个问题，但必须附带原因说明和推荐选项。
好的追问示例：
> "关于这个「唐诗课件」——给小学生用的话我会选《静夜思》《春晓》这类简单五言诗配合卡通画面，给初中生就用《登高》《将进酒》配合诗人背景和赏析。你倾向哪个方向？我推荐初中版，内容更有深度。"
差的追问：
> "给哪个年级用的？" ← 搭档不知道为什么要问
按以下优先级判定：
参考文件：references/educational-design.md — 教学设计原则
技术规范（详见 references/tech-specs.md）：
文件结构（单文件内联）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课件标题</title>
<style>/* 全部CSS内联 */</style>
</head>
<body>
<!-- 全部HTML结构 -->
<script>/* 全部JS内联 */</script>
</body>
</html>
必须满足的技术要求：
'Microsoft YaHei', 'PingFang SC', -apple-system, sans-serif
#1D1F27
CSS 变量规范：
:root {
--bg-primary: #1D1F27;
--bg-card: #252836;
--bg-card-hover: #2D3040;
--text-primary: #EAECF0;
--text-secondary: #9498A3;
--gradient-1: #FF6B6B;
--gradient-2: #4ECDC4;
--border-color: rgba(255, 255, 255, 0.08);
--radius: 12px;
--radius-sm: 8px;
}
生成后自检（保底机制）：
HTML 写完后，写入文件前，必须执行以下自检。任一项不通过 → 立即修复或重写对应部分。
| # | 检查项 | 怎么验证 | 不过怎么办 |
|---|--------|---------|-----------|
| 1 | 文件完整性 | 确认 开头、