AI互动教材生成器

一句话说明

输入一个知识点（或一段教学内容），输出一份可直接在浏览器中打开的HTML互动教材——支持3D动画、交互测验、视觉隐喻和响应式布局。

📖 阅读指引（所有人请先读这里）

这是什么东西？

这个 skill 不是网页工具，不是 App，而是一个运行在 WorkBuddy / CodeBuddy AI 助手平台上的技能模块。你通过跟 AI 助手（小雨）对话来使用它，而不是点击按钮或填表。

新手最常犯的错：把它当成一个独立软件，不知道该说什么。实际上你只需要像跟助教聊天一样，用自然语言说出你的需求。

怎么说话才有效？（核心公式）

教什么 + 给谁看 + 什么形式

记住这三个要素，就能一次说清楚：

| 要素 | 什么意思 | 示例 | |------|---------|------| | 教什么 | 知识点/主题 | 勾股定理、光合作用、HTML表格 | | 给谁看 | 教学对象 | 小学生、初中生、成人学员 | | 什么形式 | 课件类型 | 互动课件、3D动画、随堂测验、完整微课 |

把三个要素组合起来，就是最有效的说法：

| ✅ 好的说法 | ❌ 无效的说法 | 少了什么 | |------------|-------------|---------| | "给初中生做一节勾股定理的互动课件" | "生成PPT" | 这不是PPT工具，且缺少知识点 | | "帮小学生做一个太阳系的3D教材" | "我要一个课件" | 缺少知识点 | | "出10道关于光合作用的选择题" | "做几个选择题" | 缺少主题和数量 | | "把这段文字做成互动教材：[贴内容]" | 只发文件不给指令 | AI不知道你想要什么形式 | | "做一节HTML表格结构的微课，面向编程初学者" | "table" | 太简短 | | "给高中生做一节细胞分裂的3D课件+随堂测验" | "帮我做细胞" | "做细胞"太模糊 |

即使你说不全，也不用怕——缺少的部分 AI 会自动推断并补全，但你说得越清楚，结果越贴切。

这个 skill 能做什么？不能做什么？

| ✅ 能做 | ❌ 不能做（用其他 skill） | |--------|--------------------------| | 生成 HTML 互动课件 | 生成 PPT 幻灯片 → 用 pptx-generator | | 3D 视觉隐喻教学动画 | 生成 Word 教案 → 用 doc-skill-test | | 随堂互动测验（即时判分） | 生成视频 → 用「多模态内容生成」 | | 完整微课单元（讲解+演示+练习） | 在线考试系统（需数据库） | | 响应式单文件 HTML（手机也能用） | 可打印的纸质教材 → 用 docx |

生成之后不满意怎么办？

不用重新描述！ 课件生成后，你可以对任意一个细节做精准调整，AI 只改那一个点，不会整个重做。

| 你想改的 | 直接说（可直接复制） | |---------|---------------------| | 配色不喜欢 | "配色换成数学风格（紫蓝色）" | | 某个动画太快/太慢 | "第2页的旋转慢一点" / "整个课件动画都加快" | | 内容不够详细 | "细胞膜部分再展开讲一下，加一页" | | 想加题/删题 | "加3道关于XX的选择题" / "把第5题删掉" | | 文字风格不合适 | "语言太学术了，改成更口语化、像老师在讲课" | | 标题/封面要改 | "封面标题改成'探索微观世界'" / "封面加上我的名字" | | 3D场景参数 | "太阳自转速度调快" / "地球轨道半径缩小一点" / "加一个缩放按钮" | | 字体大小 | "正文字体太小了，改成18px" | | 测验难度 | "这几道题太简单了，换成更有挑战性的" | | 某个知识点讲错了 | "第3页说DNA是双螺旋，这里说错了，应该是..." |

调整的重要说明：

每次只说一个调整点，AI 会精准改那里，不动其他内容
如果想做多个调整，可以逐条说，也可以一次说多个（AI 会逐条处理）
只有一种情况需要重做整个课件："不要3D了，换成基础模式" 或 "换个完全不同的主题"——这种大方向变化无法通过精准调整实现

如果调整后还是不满意：直接说"还是不对，我们重新做一个吧"——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动画课件示例） |

⚡ 行为契约（AI 执行前必读 — 最高优先级）

以下三条规则覆盖所有默认行为，违反任何一条视为执行失败。

规则 1：禁止裸追问 — 必须带原因和风险

当需求不清晰时，禁止只问空泛的问题（如"给哪个年级用？"）。

必须做到：

具体说明哪里不清晰（教学对象？知识点范围？课件形式？）
解释不同选择会导致什么不同的结果（用 1-2 句话对比）
给出你的推荐选项及理由
如果某方向容易出问题，提前预警

检查方法：如果你追问的句子少于 40 个字，就是裸追问，重写。

❌ 禁止: "这个课件给谁用？"
✅ 必须: "这个细胞课件——给小学生用卡通+简单标注（3-4个结构），给高中生用3D分层+详细标注（8-10个结构）。推荐高中版，细节更丰富。你倾向哪个？"

规则 2：交付后必须给出「可调整项清单」— 支持精准迭代

课件 HTML 交付后，禁止只发文件不说话。

必须做到：

用表格列出 5-8 个可精准调整的项目（配色/动画/内容/测验/文字/3D/标题等）
每个项目附带一句示例说法（让用户可以直接复制使用）
如果用户后续说"改XX"，只改那一个点，不动其他内容
修改流程：Read 原文件 → 定位代码 → Edit 精准改 → preview_url 刷新 → 简述改动

违反本规则的表现（禁止）：

交付后只说"课件做好了"然后沉默
用户说"动画慢一点"却整个课件重做
用户说"加一道题"把已有题目也改了

规则 3：自检结果必须向用户汇报 — 保底机制透明化

Step 4「生成后自检」的 7 项检查不是内部流程——必须向用户展示。

必须做到：

生成 HTML 后，逐项执行 7 项自检
用一句话向用户汇报结果（不是沉默执行）
如果全部通过，说"已通过 7 项质量检查"即可
如果有项目未通过但已修复，说"检测到 X 处问题，已自动修复"
如果 3 项以上未通过，说"生成过程中遇到一些问题，我重新生成一份更稳健的版本"

为什么这样做：让用户知道"保底机制在运行"——即使偶尔需要重新生成，用户也知道系统在保护质量，而不是随机失败。

规则 4：异常处理——失败也要让人安心，且必须定位问题

发生任何异常时，禁止给技术性错误信息、"做不了"后沉默、或让用户猜哪里出问题。

必须做到（三要素）：

说人话解释发生了什么——用一句日常语言，不用技术术语
明确指出问题出在哪里——是输入不清晰？是skill限制？是网络问题？是内容问题？
给出下一步怎么做——至少两个选项（含推荐）

检查方法：如果你对异常的回应缺少以上三要素中的任一个，重写。

常见异常场景及标准回应（可直接参照）：

| 异常场景 | ❌ 禁止的回应 | ✅ 必须的回应 | |---------|-------------|-------------| | 输入无法识别（扫描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→基础、完整课件→简化版）

0. 快速上手

使用示例（更多场景参考）

告诉小雨你要教什么内容，剩下的交给它。

| 你说 | 小雨做 | |------|--------| | "帮我做一节勾股定理的互动课件" | 生成含3D直角三角形的互动页面 | | "给小学生做一个认识太阳系的3D教材" | 生成CSS 3D行星轨道动画 | | "做一个HTML表格结构讲解的微课" | 生成书架隐喻3D动画+互动练习 | | "把这篇文章转成交互式课件" | 分析内容→设计交互→生成HTML | | "出10道关于光合作用的选择题" | 生成随堂测验（即时判分+解析） |

支持哪些学科？

| 学科 | 推荐的交互形式 | 示例 | |------|-------------|------| | 数学 | 3D几何可视化、公式推导动画 | 勾股定理、函数图像、立体几何 | | 物理 | 力学模拟、电路交互、波的动画 | 牛顿定律、欧姆定律、声波传播 | | 化学 | 分子结构3D、反应过程动画 | 元素周期表、化学键、酸碱反应 | | 生物 | 细胞结构分层、生态链动画 | 光合作用、细胞分裂、DNA | | 地理 | 地图交互、地形3D可视化 | 板块运动、气候带、水循环 | | 语文/历史 | 时间线动画、人物关系图 | 朝代更替、文学流派、历史事件 | | 编程/计算机 | 代码执行可视化、数据结构3D | HTML语义化、排序算法、网络协议 |

输出长什么样？

每份课件是一份单文件HTML（内联CSS+JS，无外部依赖），打开即可使用：

深色主题（#1D1F27），卡片式布局
渐变色：主题自动适配（数学→蓝紫、科学→蓝绿、语文→暖橙等）
包含：封面页 → 知识拆解 → 交互演示 → 随堂测验 → 总结回顾
支持键盘导航、响应式（桌面/平板/手机）
使用系统字体（中文优先微软雅黑）

想看看实际效果？ 双击 assets/demo/ 下的两个示例文件用浏览器打开即可体验：

output-preview.html — 「光合作用」基础互动课件：封面→知识卡片→SVG动画示意图→即时判分测验→总结
3d-preview.html — 「太阳系行星轨道」3D动画课件：封面→CSS 3D行星轨道（可拖拽旋转+变速）→知识卡片网格→数据对比表格→总结

1. 交互原则

原则一：先理解，再设计

用户可能说不清楚"要什么形式的课件"——小雨来补全。

从用户的话中识别知识点和教学对象
如果缺年级/学科背景，平静地补一个默认值（如"初中生"）
如果缺课件形式，根据学科特征自动选择最优形式
最多追问一个问题，不纠缠

示例对话：

用户："做一个细胞结构的课件" 小雨："好，我来做一个初中生物级别的细胞结构3D分层互动教材——外到内依次展示细胞壁、细胞膜、细胞质、细胞核。"

原则二：教学优先，特效为辅

动画是为了帮助理解，不是为了炫技
每个3D效果都有对应的教学说明文字
交互操作3秒内可完成，不让用户迷失
知识点不超过5-7个每节课（认知负荷理论）

原则三：输出即交付

不需要用户安装任何东西
生成的HTML文件可以直接用浏览器打开
也可以部署到任何静态服务器
包含完整的中文注释

原则四：透明诊断 — 主动暴露风险 + 明确告知哪里可能出错

当需求不够清晰时，不猜测、不回避。主动告诉搭档：

哪里不清晰 — 具体说明是哪个要素（教学对象？深度？形式？知识点本身？）
不同选择意味着什么 — 用 1-2 句话解释每种选择的差异和影响
推荐哪个选择（及原因） — 给出建议，让搭档快速决策
可能踩的坑 — 如果某类需求容易出问题，提前预警

额外的：必须明确告知「哪个方向可能出错」

对于以下常见风险信号，不仅要追问，还要明确指出「如果这样做，可能会出现什么问题」：

| 风险信号 | 可能出错的地方 | 要告知用户的话术示例 | |---------|--------------|----------------------| | 知识点过大（如"物理学""整个初中数学"） | 课件会很长很重，加载慢，学生失去焦点 | "「物理学」范围太大了——如果塞进一个课件，文件会超过 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个结构）。如果方向猜错了，课件风格会完全不对。你倾向哪个方向？我推荐先做高中版的，细节更丰富。"

2. 四种课件模式

根据用户需求自动选择最合适的模式：

模式A：基础互动课件（default）

适用于：概念讲解、知识拆解、图文并茂的教学内容

结构：封面 → 知识拆解（3-5个步骤）→ 图解示意 → 小结
交互：点击/滚动触发揭示动画、步骤引导器、卡片翻转
适用场景：大部分常规教学需求
模板：assets/templates/basic-interactive.html

效果特征：

IntersectionObserver 驱动的滚动揭示动画
卡片式知识拆解，逐步展开
内联SVG示意图和表格
步骤引导器（1→2→3→4→5）

模式B：3D动画教学课件

适用于：需要空间想象的教学内容（几何、物理结构、天文、分子等）

结构：封面 → 3D场景+说明面板 → 交互操作提示 → 知识卡片 → 小结
交互：鼠标拖拽旋转/缩放、自动旋转演示、点击切换视角
适用场景：数学几何、物理力场、化学分子、天文、生物结构
模板：assets/templates/3d-interactive.html

3D实现方案（按复杂度选择）：

CSS 3D Transforms（首选）— 用于简单几何体、卡片翻转、分层展示
- 零依赖，性能好，兼容性广
- 适合：几何体展示、书架隐喻、卡片堆叠、行星轨道
Canvas 2D 伪3D（中等）— 用于需要数学计算的空间效果
- 适合：函数图像3D化、粒子系统、波形传播
内联 Three.js（CDN）（复杂场景）— 仅在CSS 3D无法满足时使用
- 使用 https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
- 适合：复杂分子结构、地形可视化、建筑漫游

3D场景设计原则：

背景色统一为 #1D1F27（深色空间感）
物体使用渐变着色（#FF6B6B → #4ECDC4）
包含光照提示（简单的明暗面）
操作提示始终可见（左下角半透明面板）
每个3D场景搭配右侧/底部说明面板

模式C：随堂测验

适用于：知识检测、课堂练习、自我评估

结构：标题 → 题目区（逐题展示）→ 即时反馈 → 成绩单 → 错题回顾
交互：选择答案→立刻判分→显示解析→下一题
适用场景：课后练习、课堂检测、自学自测
模板：assets/templates/quiz-interactive.html

测验设计规范：

题型：单选题为主（4个选项），可扩展判断题
题数：5-15题（根据知识量）
反馈：正确显示绿色+简短夸奖；错误显示红色+详细解析
成绩单：正确率+用时+错题列表+知识薄弱点提示
随机选项：每次打开选项顺序不同（防记忆答案）

模式D：完整微课单元

适用于：完整的教学单元，包含讲解+演示+练习

结构：封面 → 学习目标 → 知识点1(讲解+动画) → 知识点2 → 知识点3 → 综合测验 → 总结
交互：结合模式A+B+C的所有交互形式
适用场景：在线课程、翻转课堂、自主学习
实现：组合使用三种模板的技术

3. 工作流程

需求分析(2问以内) → 选择模式 → 读参考+模板 → 内容设计 → 生成HTML → 预览+交付

Step 1：需求分析（快速，但透明）

从用户输入中提取：

| 要素 | 提取方式 | 默认值 | |------|---------|--------| | 知识点 | 直接从描述中识别 | — | | 教学对象 | 从描述推断（小学生/初中生/成人） | 初中生 | | 课件模式 | 根据学科推荐最优模式 | 模式A | | 深度要求 | "简单介绍"还是"详细讲解" | 中等深度 |

主动扫描风险点，如有以下信号则主动告知：

知识点过于宽泛（如只说"数学"） → 建议聚焦
年龄段缺失且影响重大 → 说明差异后追问
3D 请求但内容不适合 3D → 给出替代方案
测验题量不合理 → 给出建议范围

追问规范：最多追问一个问题，但必须附带原因说明和推荐选项。

好的追问示例：

"关于这个「唐诗课件」——给小学生用的话我会选《静夜思》《春晓》这类简单五言诗配合卡通画面，给初中生就用《登高》《将进酒》配合诗人背景和赏析。你倾向哪个方向？我推荐初中版，内容更有深度。"

差的追问：

"给哪个年级用的？" ← 搭档不知道为什么要问

Step 2：选择课件模式

按以下优先级判定：

用户明确指定 → 用指定模式
几何/空间/结构类知识 → 模式B（3D）
用户说"出题""测试""练习" → 模式C（测验）
用户说"完整一节课""微课" → 模式D（完整单元）
其他情况 → 模式A（基础互动）

Step 3：内容设计

知识拆解：将知识点拆分为3-5个教学步骤
视觉隐喻：为抽象概念设计具体的视觉对应（如：细胞=工厂、HTML表格=书架）
交互设计：每个步骤设计一个交互动作（点击/拖拽/滚动触发）
语言风格：根据教学对象调整语言难度

参考文件：references/educational-design.md — 教学设计原则

Step 4：生成 HTML 课件

技术规范（详见 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>

必须满足的技术要求：

单文件，内联所有 CSS 和 JS
无外部依赖（3D复杂场景除外，可用 CDN Three.js）
系统字体：'Microsoft YaHei', 'PingFang SC', -apple-system, sans-serif
深色主题背景色：#1D1F27
渐变色：根据学科自动选择
响应式：最小支持 320px 宽度
使用 IntersectionObserver 做滚动动画
使用 requestAnimationFrame 做持续动画
包含完整中文注释

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 | 文件完整性 | 确认 <!DOCTYPE html> 开头、</html> 结尾，无截断 | 补全缺失部分 | | 2 | CSS 语法 | 检查 {} 成对、无多余逗号、属性值完整 | 修复语法错误 | | 3 | JS 无致命错误 | 检查 addEventListener、querySelector 目标存在、变量声明完整 | 修复或去掉有问题的事件绑定 | | 4 | 内容不为空 | 每个知识卡片/题目至少有一句实质性内容（非占位符） | 补充内容 | | 5 | 3D 降级方案 | 如果用 Three.js CDN，确保加载失败时显示"3D加载中，请检查网络"的占位提示 | 添加 onerror 降级 | | 6 | 响应式断点 | 检查是否有 @media (max-width: 768px) 样式块 | 补充响应式样式 | | 7 | 文件大小 | >500KB（不含CDN）时警告，>1MB 拒绝生成 | 精简内容或提示用户 |

如果自检发现严重问题（3项以上未通过）：不要交付半成品。告知搭档"生成过程中遇到了一些问题，我重新生成一份更稳健的版本"，然后从头重写。重写时降低复杂度（如 3D → 基础卡片、减少动画密度）。

Step 5：交付 + 迭代入口

将生成的 HTML 写入文件：{workspace}/courseware-{topic}-{timestamp}.html
使用 preview_url 预览效果
使用 deliver_attachments 发送文件
向用户简述课件内容（3-5句话概括：模式、知识点、交互形式、适用对象）
主动给出可调整项清单（用表格列出，让搭档一眼看到能改什么）

交付时必须附带的可调整项清单（示例）：

课件已生成！你可以对以下内容做精准调整：

| 编号 | 可调整项 | 示例说法 |
|------|---------|---------|
| 1 | 配色方案 | "把配色改成数学风格" |
| 2 | 动画速度 | "第2页的旋转慢一点" / "整个课件动画都加快" |
| 3 | 内容增删 | "在物理结构部分加一页讲细胞核" / "删掉最后一页总结" |
| 4 | 知识点细化 | "细胞膜讲解再详细一点" |
| 5 | 测验调整 | "加3道题" / "第4题选项太简单了" |
| 6 | 文字风格 | "语言太学术了，改成更口语化" |
| 7 | 3D场景 | "太阳自转速度调快" / "加一个缩放按钮" |
| 8 | 标题/封面 | "标题改成'探索细胞世界'" |

追加记忆记录

Step 6：迭代优化（支持精准调整）

这是关键流程：生成课件后，搭档可能会对某个具体细节不满意。此时只调整那一个点，而不是整个重做。

迭代原则：

精准定位：先确认要改哪个部分（第几页/哪个动画/哪道题）
读取原文件：每次都先 Read 当前 HTML 文件，在原基础上修改
最小改动：只改搭档提到的部分，不动其他内容
原地更新：修改同一个文件，不要生成新文件（除非搭档要求保留旧版本）
告知变化：每次修改后简要说明"改了什么、为什么这样改"

常见迭代场景及处理方式：

| 搭档说 | 操作 | |--------|------| | "配色太冷了" | 把 CSS 变量中的渐变色换成暖色系（如 #FF6B6B → #F59E0B） | | "第3页动画太慢" | 定位到第3页的 CSS transition，缩短 duration | | "加一道关于XX的题" | 在测验数组末尾添加新题，不改动已有题目 | | "这个旋转方向反了" | 修改 3D transform 的 rotate 值（正负号互换） | | "字体太小了" | 调整 --text-base CSS 变量 | | "封面标题改一下" | 定位到 <h1> 修改文本内容 | | "把学科配色换成数学风格" | 替换渐变色变量为数学配色（#6366F1 → #8B5CF6） | | "不要3D了，换基础模式" | 这是少数需要重做的情况——告知搭档后重做 |

迭代步骤：

确认调整目标（搭档说改什么就改什么，不擅自扩大范围）
Read 当前 HTML 文件
找到要修改的具体代码位置
用 Edit 做精准修改
preview_url 刷新预览
简述改动：「第2页的旋转速度从 8s 改成 12s，现在更舒缓了」

4. 设计规范

完整的视觉设计规范见 references/tech-specs.md。以下是速查：

配色方案（按学科）

| 学科 | 主渐变色 | 氛围 | |------|---------|------| | 数学 | #6366F1 → #8B5CF6（紫蓝） | 理性、逻辑 | | 物理 | #3B82F6 → #06B6D4（蓝青） | 科技、能量 | | 化学 | #10B981 → #34D399（绿色） | 生命、反应 | | 生物 | #22C55E → #A3E635（翠绿） | 自然、生长 | | 地理 | #F59E0B → #EF4444（橙红） | 地球、热力 | | 语文/历史 | #F97316 → #EC4899（暖橙粉） | 人文、温暖 | | 编程/计算机 | #6366F1 → #06B6D4（蓝紫青） | 逻辑、代码 | | 通用/默认 | #FF6B6B → #4ECDC4（珊瑚青） | 活泼、友好 |

字体规范

| 用途 | 字体 | 大小 | 字重 | |------|------|------|------| | 课件大标题 | Microsoft YaHei | 32-48px | 700 | | 章节标题 | Microsoft YaHei | 20-28px | 600 | | 正文 | Microsoft YaHei | 16-18px | 400 | | 说明文字 | Microsoft YaHei | 14px | 400 | | 代码/Mono | Consolas, monospace | 14px | 400 |

卡片设计

背景色：#252836
悬停：#2D3040 + transform: translateY(-2px) + 过渡动画
边框：0.5px solid rgba(255,255,255,0.08)
圆角：12px
内边距：24px
间距：20px（卡片间）

动画规范

| 动画类型 | 持续时间 | 缓动函数 | 用途 | |---------|---------|---------|------| | 卡片入场 | 0.5s | cubic-bezier(0.4,0,0.2,1) | 滚动触发 | | 3D旋转 | 0.8s | ease-out | 视角切换 | | 按钮悬停 | 0.2s | ease | 交互反馈 | | 正确/错误反馈 | 0.3s | ease | 测验反馈 | | 自动旋转 | 20s/圈 | linear | 3D场景 |

5. 技术约束

必须遵守

单文件：所有代码在一个 .html 文件中
无外部依赖（优先）：不使用任何 npm 包或外部 CSS 框架
CDN 例外：仅在复杂 3D 场景时使用 cdnjs.cloudflare.com 上的 Three.js
系统字体：不加载 Google Fonts 等外部字体
无 emoji 依赖：图标用 CSS/SVG 实现
中文注释：代码中包含中文注释说明关键逻辑
浏览器兼容：支持 Edge、Chrome、Firefox 最新两个大版本
性能：3D场景保持 30fps+，普通页面滚动不卡顿

文件命名

courseware-{topic-slug}-{timestamp}.html

例如：courseware-pythagorean-theorem-20260526.html

无障碍

所有 img/svg 包含 role 和 aria-label
测验选项支持键盘选择（Tab + Enter）
色彩对比度满足 WCAG AA 标准
动画尊重 prefers-reduced-motion

快速参考卡片

| 你想要 | 怎么做 | |--------|--------| | 概念讲解 | 模式A，用基础模板，拆3-5个步骤 | | 空间几何 | 模式B，用CSS 3D transform建场景 | | 科学演示 | 模式B，优先CSS 3D，复杂用Three.js | | 课后练习 | 模式C，5-15道选择题+解析 | | 完整一节课 | 模式D，组合A+B+C，加学习目标 | | 10分钟微课 | 模式D简版，2-3个知识点+5道题 | | 响应式需求 | 所有模板自带响应式，最小320px |

6. 反模式与FAQ

常见反模式（新手容易踩的坑）

| # | 反模式 | 问题 | 正确做法 | |---|--------|------|---------| | 1 | "做一个课件" | 缺少知识点，AI 不知道该教什么 | 加上主题："做一节细胞分裂的互动课件" | | 2 | "把所有章节都做进去" | 一个 HTML 塞太多内容，加载慢、失去焦点 | 一个课件聚焦 1 个知识点，3-5 个教学步骤 | | 3 | "帮我做PPT" | 这个 skill 生成 HTML，不是 PPT | 说"做互动课件"或"做HTML教材"；要 PPT 用 pptx-generator skill | | 4 | 输入一篇 5000 字文章要求"做成课件" | AI 需要提取核心，但可能遗漏重点 | 先告诉 AI 重点是什么，或让 AI 先列出大纲你再确认 | | 5 | "做得炫一点" | 动画过多反而分散注意力 | 信任 AI 的判断——教学有效性 > 视觉炫酷 | | 6 | 生成后不满意直接放弃 | 错过了精准调整的机会 | 用可调整项清单中的说法，精准改一个点 | | 7 | 裸发文件不给指令 | AI 不知道你想要什么 | 附带一句话说明："把这篇文档做成互动教材" | | 8 | 要求单页包含所有内容 | 违反教学设计原则，认知负荷过高 | 接受分页设计，每页 1 个知识点 | | 9 | 把课件当成搜索引擎 | "帮我搜一下光合作用"——这不是搜索工具 | 说"做一节光合作用的互动课件"，AI 会自动组织知识点 | | 10 | 期望 AI 像教科书一样100%准确 | AI 可能偶尔出错或遗漏细节 | 快速浏览一遍内容，重点数据自行核实 | | 11 | 同时提多个不相关的课件请求 | "做数学课件+语文课件+英语课件"——AI 会混乱 | 一次只做一个课件，做完再做下一个 | | 12 | 要求输出 Word/PDF 格式 | 这个 skill 只输出 HTML | 理解 HTML 是互动教材的最佳格式；要文档用其他 skill | | 13 | 给超模糊的年龄段如"给学生" | "学生"涵盖6-22岁，处理方式差别巨大 | 明确说"小学生/初中生/高中生/大学生/成人" | | 14 | 在课件生成过程中不断追加需求 | 打乱 AI 的设计节奏，可能导致结果混乱 | 等课件交付后，用精准调整的说法逐条修改 | | 15 | 关闭浏览器后找不到课件 | HTML 文件保存在工作区，需要记住位置 | 交付时 AI 会告知文件路径；你也可以说"把课件发给我" | | 16 | 要求"完全按照我的Word文档做，一字不改" | AI 生成的 HTML 结构和原文档不同，可能丢失格式细节 | 先让 AI 生成大纲确认方向，再生成完整课件；生成后逐页检查调整 | | 17 | 给的是扫描版PDF/图片要求"做成课件" | AI 无法直接读取图片中的文字（除非用视觉模型），容易识别错误 | 先把文字内容粘贴进来，或确认 AI 已正确识别图片内容后再继续 | | 18 | 要求"课件要支持手机离线使用"但没有说明具体场景 | 纯 HTML 本身支持离线（文件在本地），但用户可能想要 PWA/缓存机制 | 明确说"课件文件保存在手机里，没有网络也能打开"——这个已经支持 | | 19 | 期待 AI 自动联网获取最新资料 | 本 skill 不联网，生成内容基于 AI 训练数据 | 如果需要最新数据（如2024年后的政策），请手动提供资料 | | 20 | 要求"课件要能导出成绩到Excel" | 纯前端 HTML 无法写本地文件（浏览器安全限制） | 可以做成"复制成绩"按钮，或改用在线考试系统 | | 21 | 给的是手写笔记/潦草照片 | AI 识别手写内容准确率不稳定 | 先确认 AI 识别是否正确，或手动输入关键内容 | | 22 | 要求"课件要支持多语言切换" | 单文件 HTML 做多语言会增加复杂度，文件变大 | 可以做，但建议先做一个语言版本，确认效果后再做多语言版 | | 23 | 期待第一次生成就完美 | AI 生成的是初稿，通常需要 1-2 轮调整 | 把第一次生成当成"确认方向"，第二轮开始精准调整细节 | | 24 | 要求"把课件发布到互联网上"但不提供部署方式 | AI 不负责部署，只生成文件 | 生成后问 AI "怎么把课件放到网上"，AI 会告知部署方法 | | 25 | 对 3D 效果期待过高（如"要跟游戏一样"） | CSS 3D/Three.js 能做到的是「教学级 3D」，不是游戏级画质 | 明确期待：「能旋转、能缩放、能展示结构」就够了，不要期待光影材质和物理引擎 |

这个 skill 处理不了的教学内容（期待管理 — 重要！）

以下内容不适合用这个 skill 生成课件。如果你有这些需求，建议换方案或降低期待。

| # | 处理不了的内容 | 为什么处理不了 | 如果你坚持要做会怎样 | 推荐替代/建议 | |---|----------------|----------------|---------------------|-------------------| | 1 | 需要实时数据的教学内容（如股票行情、天气预报、实时交通） | 课件是纯静态 HTML，无法获取实时数据 | 生成的内容是生成时的快照，数据会过期 | 用 PPT 或手动更新 HTML | | 2 | 需要专业/学术精确性的内容（如医学手术步骤、法律条文、工程计算公式） | AI 可能出错，专业内容出错后果严重 | 内容可能有错误，需要你逐字核实 | 先由你提供准确内容，AI 负责排版和交互化 | | 3 | 需要保密的内部培训材料（如公司内训、未公开的产品资料） | 内容通过 AI 平台处理，存在保密风险 | 敏感信息可能泄露 | 用离线工具或公司内部系统 | | 4 | 需要学生账号登录和成绩管理（如全班50人考试、成绩汇总） | 课件是纯前端，无后端数据库 | 无法实现账号系统和成绩存储 | 需要独立开发考试系统 | | 5 | 需要真实实验视频/演示视频（如化学实验全过程、物理现象真实录像） | 本 skill 不生成视频，也不嵌入外部视频文件 | 课件里只有文字描述和静态图，缺少真实感 | 用「多模态内容生成」生成视频，或手动嵌入视频链接 | | 6 | 需要复杂数学公式渲染（如高等数学偏微分方程、量子力学公式） | 纯 HTML/CSS 渲染复杂公式效果差，需要 MathJax/KaTeX 等库 | 公式显示不美观或出错 | 用 PPT 或专业数学软件（Mathematica/Maple） | | 7 | 需要多人协作/实时互动（如线上小组讨论、实时投票、白板协作） | 纯前端 HTML 无法实现多人实时同步 | 只能做单机互动，无法多人协作 | 用专业在线教学平台（腾讯会议/ClassIn） | | 8 | 内容量极大的课程（如 50 页以上的完整教材） | 单文件 HTML 超过 1MB 后加载慢，手机体验差 | 文件大、加载慢、可能浏览器卡死 | 拆成多个课件，或改用 PPT/PDF | | 9 | 需要语音/音频讲解（如带配音的课件、语言听力练习） | 本 skill 不生成音频文件 | 课件只有文字和动画，没有声音 | 用「多模态内容生成」生成音频，或手动嵌入音频文件 | | 10 | 需要 AR/VR 沉浸式体验（如虚拟实验室、3D 漫游） | CSS 3D 和 Three.js 做不到真正的 AR/VR | 只能做桌面级的 3D 效果，不是沉浸式 | 用专业 AR/VR 开发工具 |

重要说明：以上第 2 条（专业/学术内容）是最常见的「期待过高」场景。AI 生成的教学内容适合作为初稿或辅助材料，不适合直接作为权威教材使用。请务必人工核实关键内容。

换个 skill 更好的场景

如果你要做的事情不在这个列表里，但也不是「生成互动课件」，那可能用其他 skill 更合适：

| 场景 | 为什么不适合用本 skill | 推荐替代 skill | |------|---------------------|-----------------| | 制作 PPT 幻灯片 | 本 skill 输出 HTML，不是 .pptx | 用 pptx-generator skill | | 生成 Word 文档/教案 | 本 skill 不输出 .docx | 用 docx skill 或 doc-skill-test | | 纯文字讲义（不需要交互） | HTML 互动教材浪费了交互能力 | 用 doc-skill-test 生成教案文档 | | 需要打印的纸质教材 | HTML 不适合打印，排版会乱 | 用 docx skill 生成可打印文档 | | 在线考试系统（带账号） | 本 skill 的测验是轻量的，不支持账号/数据库 | 需要独立开发 | | 视频课程/教学视频 | 本 skill 不生成视频 | 用「多模态内容生成」skill | | 纯数据展示（无教学结构） | 缺少教学设计，效果不如 PPT/Excel | 用 PPT 或 Excel | | 生成 PDF 教材 | 本 skill 只输出 HTML | 用 pdf skill 或 docx→导出 PDF | | 制作宣传海报/招生简章 | 这是设计任务，不是教学课件 | 用「多模态内容生成」生成图片 |

FAQ

使用前——预期管理

Q: 我该怎么跟 AI 说，才能得到满意的课件？
A: 记住公式：教什么 + 给谁看 + 什么形式。例如："给初中生做一节光合作用的互动课件，带随堂测验"。缺的部分 AI 会自动补，但你说得越清楚越好。

Q: 这个 skill 和 ChatGPT / Kimi 有什么区别？
A: 这个 skill 不只是一个对话机器人——它会实际生成可运行的 HTML 课件文件，包含 CSS 动画、JS 交互逻辑、3D 效果，你可以直接双击打开、发给学生、部署到网站。

Q: 生成一个课件大概要多久？
A: 基础课件 30 秒到 1 分钟，带 3D 的大约 1-2 分钟，完整微课可能需要 2-3 分钟。取决于课件复杂度和网络速度。

Q: AI 生成的课件内容准确吗？我需要核实吗？
A: AI 基于公开知识生成教学内容，偶尔可能出错或遗漏细节。强烈建议你生成后快速浏览一遍，重点数据（如公式、年代、定义）自行核实。AI 生成的内容适合作为初稿或辅助材料，不代表权威结论。

Q: 这个 skill 能处理哪些学科？有没有不能做的？
A: 支持 K12/高教/职教/科普的大部分学科（数学、物理、化学、生物、地理、语文、历史、编程等）。但不能处理：需要实时数据的内容、需要专业精确性的内容（医学/法律）、需要保密的内部材料、需要账号系统的在线考试。详见上方「处理不了的教学内容」。

使用中——常见困惑

Q: 我明明说了需求，AI 为什么还在问我？
A: AI 追问是因为某些关键信息缺失（教学对象？课件深度？），追问时会说明原因和给出推荐选项。如果你觉得追问没必要，可以加一句"你看着办"——AI 会用默认值直接生成。

Q: 生成的课件能改吗？改了会重新生成整个课件吗？
A: 可以改，而且只改你说的那一个点，不会整个重做。直接说"第3页动画慢一点"、"配色换成数学风格"、"加一道关于XX的题"——AI 会精准定位并修改。只有"不要3D了换基础模式"这种大方向变化才需要重做。

Q: 课件能在手机上用吗？需要联网吗？
A: 所有课件自带响应式设计，桌面/平板/手机都能正常显示（最小 320px）。课件是纯 HTML 文件，保存在本地，不需要联网就能用浏览器打开。

Q: 3D 动画会不会很卡？我的电脑比较旧
A: 优先使用 CSS 3D（性能好、零依赖），只在必要时用 Three.js CDN。3D 场景保持 30fps+，普通页面不卡顿。如果加载失败会有降级提示。旧电脑建议选"基础互动课件"模式，不用3D。

Q: 我可以提供自己的资料（Word/PDF/图片）让 AI 参考吗？
A: 可以。直接把文件内容粘贴进来，或上传文件后告诉 AI "参考这个文档"。但注意：AI 对图片/扫描版PDF的识别可能不准确，请确认 AI 已正确理解内容后再继续。

Q: 第一次生成的课件不满意，是正常的吗？
A: 完全正常。AI 生成的是初稿，通常需要 1-2 轮调整才能达到你想要的效果。把第一次当成"确认方向"，第二轮开始精准调整细节。

使用后——排错与分享

Q: 课件文件在哪里？我怎么找到它？
A: 交付时 AI 会告诉你文件路径（通常在工作区根目录，文件名如 courseware-xxx-20260526.html）。如果找不到，直接说"把课件发给我"或"课件文件路径是什么"。

Q: 可以把课件放到我的网站上吗？需要什么技术？
A: 完全可以。生成的是单文件 HTML，丢到任何静态服务器（如 GitHub Pages、Vercel、你公司的服务器）就能用。不需要数据库，不需要后端。也可以直接发 HTML 文件给学生用浏览器打开。

Q: 为什么生成的是 .html 不是 .pptx？我能转成PPT吗？
A: 互动教材需要动画和交互（点击、拖拽、实时判分），这些只有 HTML 能做到。PPT 是静态的。——如果你一定要 PPT，用 pptx-generator skill 重新做一个 PPT 版本的课件。

Q: 课件可以包含视频或音频吗？
A: HTML 中可以嵌入 <video> 或 <audio> 标签加载媒体文件。但本 skill 不生成视频/音频文件——需要的话用「多模态内容生成」skill 先生成媒体文件，再手动嵌入或让 AI 在生成时预留嵌入位置。

Q: 课件突然打不开了（白屏/乱码）怎么办？
A: 用 Chrome/Edge 最新版打开。如果还是不行，告诉 AI "上次的课件打不开"，AI 会检查 HTML 是否有语法错误并修复。HTML 课件不依赖服务器，理论上不会坏。

Q: 能把多个课件合并成一个吗？
A: 技术上可以，但不推荐——单个课件聚焦一个知识点效果最好。如果确实需要合并（如做成完整课程包），告诉 AI 具体要合并哪些课件以及它们的文件路径。

Q: 课件里的测验成绩会保存吗？学生做完我能看到吗？
A: 不会自动保存。课件是纯前端 HTML，没有后端存储，刷新页面后数据会重置。如需学生成绩管理，需要独立开发考试系统或使用在线教学平台。

Q: 这个 skill 是免费的吗？有什么使用限制吗？
A: skill 本身免费安装使用。生成课件消耗的 AI 算力按平台规则计费。单个课件文件建议控制在 500KB 以内，超过 1MB 会被拒绝生成（请拆分成多个课件）。

ai互动教材

AI互动教材生成器

一句话说明

📖 阅读指引（所有人请先读这里）

这是什么东西？

怎么说话才有效？（核心公式）

这个 skill 能做什么？不能做什么？

生成之后不满意怎么办？

遇到问题怎么办？（快速排查指南）

目录

参考文件

⚡ 行为契约（AI 执行前必读 — 最高优先级）

规则 1：禁止裸追问 — 必须带原因和风险

规则 2：交付后必须给出「可调整项清单」— 支持精准迭代

规则 3：自检结果必须向用户汇报 — 保底机制透明化

规则 4：异常处理——失败也要让人安心，且必须定位问题

0. 快速上手

使用示例（更多场景参考）

支持哪些学科？

输出长什么样？

1. 交互原则

原则一：先理解，再设计

原则二：教学优先，特效为辅

原则三：输出即交付

原则四：透明诊断 — 主动暴露风险 + 明确告知哪里可能出错

2. 四种课件模式

模式A：基础互动课件（default）

模式B：3D动画教学课件

模式C：随堂测验

模式D：完整微课单元

3. 工作流程

Step 1：需求分析（快速，但透明）

Step 2：选择课件模式

Step 3：内容设计

Step 4：生成 HTML 课件

Step 5：交付 + 迭代入口

Step 6：迭代优化（支持精准调整）

4. 设计规范

配色方案（按学科）

字体规范

卡片设计

动画规范

5. 技术约束

必须遵守

文件命名

无障碍

快速参考卡片

6. 反模式与FAQ

常见反模式（新手容易踩的坑）

这个 skill 处理不了的教学内容（期待管理 — 重要！）

换个 skill 更好的场景

FAQ