K12 大白话互动课堂
把一个知识点做成一套可直接使用的教学材料：一份单文件互动 HTML 课件，以及一张 1080×1440 PNG 课堂词卡。先建立直觉，再让学生操作、预测、答题和纠错。
适用范围
适合数学、物理、化学、生物、天文、地理、语文、历史等 K12 知识点，尤其适合概念导入、课堂投屏、课后复习和学生自学。
不适合替代教材、实验、安全规范或教师审核。涉及危险实验、医疗健康、法律、金融、心理危机或其他高风险主题时，不生成行动建议；只提供基础教育层面的概念说明，并提醒用户查阅权威资料或咨询专业人员。
触发示例
大白话解释，为什么分数相加要先通分给初中生讲清楚杠杆为什么省力，做成互动课件酸碱中和是怎么回事？最后出三道小测大白话解释什么是日食，再生成一张课堂词卡
不要只因为用户提到“知识”“学习”或“解释”就触发；必须同时具备 K12 教学、直观讲解、互动课件或课堂词卡中的至少一个明确意图。
输出
在当前工作目录写入两个文件；如果已有 outputs/ 目录，优先写入该目录：
eli5-<slug>.html：可离线打开的单文件课件，CSS 与 JavaScript 全部内联。eli5-<slug>-card.png：1080×1440 课堂词卡。
<slug> 只使用小写英文字母、数字和连字符。不得覆盖用户已有文件；文件名冲突时追加简短后缀。
完成后列出两个文件的实际路径，并告诉用户：HTML 可在浏览器中全屏投屏，词卡可打印或发到班级群。
工作流程
1. 判断教学层级
根据用户的一句话推断学科、年级和唯一核心机制。仅当学科与年级都无法合理判断，或不同理解会导致明显不同结果时，才询问一个简短问题。
- 小学：一句一事，优先图形和拟人角色，不使用未解释的公式。
- 初中：突出条件、过程、结果和常见误区；默认使用这一层级。
- 高中：仍以大图和交互为主，最后补充公式、条件和适用范围。
一份课件只讲一个机制。类比若与真实机制冲突，应删除类比，不要为了“好懂”牺牲准确性。
2. 选择交互模式
阅读 references/patterns.md，只选一种 Play 模式。互动必须改变画面或状态，不能只是切换说明文字。
3. 选择视觉主题
阅读 assets/base.css 与 references/themes.md。在 HTML 中内联基础样式，按学科设置 data-subject，按年级设置 data-grade。
4. 生成互动 HTML
按以下顺序组织页面：
- Topbar：学科、课题、年级、全屏按钮和学习进度。
- Hook：一句能当场读给学生听的核心解释，加一幅完整机制图。
- Cast：3–6 个角色或部件；同一角色在全页保持同一颜色。
- Play：一步步操作的主互动；必要动作完成前禁用“下一步”。
- Try：让学生预测、修复、拖动或追踪一次具体输入。
- Check：3–5 题，至少包含两种题型；必须可能答错，并即时解释原因。
- Trap：用“错在哪里 / 实际上”纠正一个真实课堂误区。
- Board：三点词卡回顾，并用一句话说明本页省略了什么。
投屏和可访问性要求：
- 标题使用
clamp(32px, 5vw, 56px)或更大；按钮高度不小于 48px。 - 375px 宽度可单列阅读，1920px 投屏仍清晰。
- 使用真实的
<button>、label和可聚焦控件，支持键盘操作。 - 所有关键颜色具有文字或图形冗余，不能只靠颜色表达对错。
prefers-reduced-motion: reduce时关闭动画。- 满分可以有轻量庆祝效果；答错只震动一次并显示原因。
5. 生成 PNG 课堂词卡
优先使用本技能的本地脚本，避免网络依赖：
python <this-skill>/scripts/make_card.py --title "光合作用" --kicker "生物 · 初中" --hook "叶子是一座太阳能工厂" --p1 "原料：二氧化碳 + 水 + 光" --p2 "车间：叶绿体" --p3 "产物：有机物 + 氧气" --theme bio --out eli5-photosynthesis-card.png
若用户明确希望使用插画，并且当前环境已有可用的图片生成工具，可先生成一张无文字、无数字、无商标的本地 3:4 插画，再通过 --art <local-image> 嵌入词卡。不要从互联网下载图片，不要使用来历不明的素材。
脚本依赖 Python 3.9+ 与 Pillow。不得擅自安装软件或依赖；若 Pillow 不可用，先说明限制，再使用当前环境已有的安全图像工具完成 PNG，或请用户决定是否安装依赖。
词卡要求：
- 标题不超过 8 个汉字，Hook 不超过 16 个汉字。
- 只保留三条要点，并与 HTML 的 Board 完全一致。
- 不包含学生姓名、学校、联系方式或其他个人信息。
准确性与教师审核
生成内容前阅读 references/safety-and-accuracy.md。使用现行教材中的标准术语，避免编造因果关系、实验现象、历史细节或公式适用范围。
对简化内容要明确说明省略项。正式用于课堂前，提醒老师完整预览并核对年级难度、题目答案和科学表述。
安全与隐私
- HTML 必须完全离线：不得包含 CDN、远程字体、远程图片、远程音频或任何网络请求。
- 不使用
fetch、XMLHttpRequest、WebSocket、eval、new Function、Cookie、LocalStorage、SessionStorage、剪贴板、摄像头、麦克风、定位、通知或文件系统访问。 - 不收集、保存或上传用户输入、答题结果和个人信息。
- 不执行 shell 命令，不下载程序，不修改系统设置。
- 不嵌入广告、跟踪代码、统计 SDK、支付入口、登录表单或外部跳转。
- 示例和素材必须具有可分发权；不能复制教材整页、付费题库或受版权保护的长篇内容。
完成检查
只有全部满足时才报告完成：
- HTML 与 PNG 均已生成，且没有覆盖用户文件。
- HTML 在离线状态下可打开，控制台没有错误，也没有网络请求。
- Play 会改变画面；Try 会产生可见反馈；Check 可以失败并解释原因。
- Trap 是真实误区，不是随意编造的错误选项。
- 页面只讲一个核心机制，简化边界已说明。
- 三条词卡内容与 Board 一致。
- 页面可在手机和投屏宽度下阅读，键盘和减弱动画设置有效。
