aula-interativa

交互式课程

一个简单的输入应该触发完整的创作流程：制作一堂让学习者愿意学下去的课程，让他们始终知道该看什么、读什么、点击哪里，并能在最后运用所学概念。内容正确且结果确定是必要条件，但光有这些还不够：界面难看、文字过多或令人困惑，与事实错误一样，都是同等优先级的缺陷。

输入：仅三个问题

复用请求和对话中明确给出的答案。已经回答过的问题不要再问。如果缺少语言信息，请先询问语言，再问其他问题，并将其余问题译成用户选择的语言。

1. 使用哪种语言？/ Which language? 葡萄牙语、English、西班牙语或其他语言。
2. 今天想学什么？ 接受主题、问题、工具或材料。
3. 想要多深入？ 1 — 较少，2 — 中等，3 — 较多。也接受指定的确切屏幕数量。

选择	范围	短屏幕（常见范围）
1	一个核心机制、一个真实案例、一项应用	10–14
2	机制、变化形式、真实案例解析、两项练习	18–26
3	内部机制、局限、操作、迁移	30–40

每个屏幕只讲一个观点。通过增加屏幕和步骤来深入；主题需要时，也可以加入设计精良的深入讲解环节；绝不能靠杂乱的屏幕来增加深度。严格遵守指定的确切数量。深入程度不等于预备知识。如果用户授权你决定，就选 2。不要额外询问审美、平台或音频方面的问题。如果任务是编辑此技能，不要执行输入流程。

开始前阅读

何时	资源	产出
始终，首先阅读	学习者体验	导航规范、平和的文字风格（统一的排版风格）、屏幕类型、构成
始终，在编写简报前阅读	课程弧线	一堂出色课程的 7 项决策和 8 个环节
始终，在编写脚本前阅读	写作	标题、步骤句、术语、反馈
始终，在每个关卡阅读	质量与关卡	1–5 级评分标准、P1–P5 关卡、模型常见缺陷
始终，在编写代码前阅读	examples/exemplar-dns/ 和 examples/mecanismo.html	范例展示完整流程（简报、脚本、来源、课程）；机制示例展示最小 API。学习形式，不要照搬主题
输入完成后	教学法	目标、先修知识、递进安排
研究时	来源与界面	证据、版本、可靠的模拟界面
编写分镜时	屏幕脚本	旁白 · 画面 · 类型表；步骤
设计时	视觉指导	设计令牌、工具包模块、几何
制作动画时	Motion 和 制作方法	时长、缓动、摄像机、动画模拟界面
实现时	运行时与 HTML	播放器、工具包、捕获 API
交付前	捕获与审查	故事板、帧、测试、修复
评审时	缺陷与标准	验收标准

制作流程

1. 准备。 node scripts/check_env.mjs --channel chrome。通过 LESSON_NODE_MODULES 复用已有的、包含 Playwright 和 Sharp 的 node_modules（find ~ -maxdepth 4 -type d -path '*node_modules/playwright'）；只有在不存在时，才安装到 $WORK/tooling。
2. 研究并决策（P1 门槛）。 根据 templates/brief.md 填写 $WORK/brief.md：按照课程弧线做出 7 项决策，使用单一案例并计算结果。明确可观察的目标、先修知识图谱和一手资料。对于软件，核实将在模拟界面中出现的命令、名称和输出格式（如有条件，请实际运行）。将 brief.md 和 sources.json 保存在工作目录 $WORK 中：这是课程专属文件夹，必须位于 skill 文件夹之外。
3. 编写脚本（P2 门槛）。 根据 templates/roteiro.md 编写 $WORK/roteiro.md：每个步骤一行，包含课程弧线中的环节、类型、文案和图像；填写检查项；并按写作进行朗读测试。绘制前请确认：每个术语都在使用前定义；每个概念都有模拟界面或图示；如有深入讲解，只占一个区块；关于案例的说法不会被当作通用规则；不同类型交替出现。课程的好坏就在这一步决定。
4. 搭建。 将 templates/ 文件夹复制到 $WORK/source/templates/，并将课程复制到 $WORK/source/lesson.html，使用 <script src="templates/…"> 和 <link href="templates/player.css">（示例中使用 ../templates/，只是因为它位于 skill 文件夹内）。从 examples/mecanismo.html 开始。使用工具包（LessonKit.diagram、split、hero、terminal、app、quiz、cards）搭建每个画面，并在 render 中使用计算好的模型。在 :root 的令牌中选择符合主题的配色；不要重写播放器。
5. 第一印象（P3 门槛）。 完成 2–3 个画面后，捕获并检查故事板；在继续制作其余内容前，调整字体排印、配色和图示。
6. 添加动画。 使用 templates/motion.js（enter、stagger、spring、pulse、camera、typed）。动画要展示机制；进入效果保持平和；每一步结束时画面应静止。
7. 循环审查（P4 门槛）。 在 1440x900,390x844 下捕获关键帧，并以 30 fps 生成动效；生成故事板（桌面端、手机端和错误场景），逐屏对照体验中的清单进行检查；将看起来有问题的步骤以实际尺寸打开；根据捕获与审查中的采样方法，通过接触表审查动效；在 $WORK/test_aula.mjs 中为课程编写测试（计算、每个选项的反馈、导航）；运行 audit.mjs。从三个角色进行自我批评，并在 $WORK/qualidade.md 中填写评分量表（质量）。修正、重新捕获并重复，直到每个维度的评分都 ≥ 4、故事板通过清单检查且捕获结果没有问题。
8. 打包并交付（P5 门槛）。 pack.mjs 会生成一个独立 HTML 文件；除非另有要求，请在用户的浏览器中打开。只交付 HTML。脚本、捕获结果和报告保存在 $WORK 中，不得放在 skill 文件夹或与交付内容放在一起；最后告知用户可以删除捕获结果。

不要请求对脚本或关键帧进行审批。常规美术决策由你自行决定。只有在有助于实现目标时，才加入音频、视频和 3D 内容。课程必须在静音时也能正常使用。

不变量

体验

• 完整的单案例叙事弧：引子、揭示、术语、模型、机制、真实证据、练习和收尾。
• 一个主要操作（继续），始终位于同一位置；学习者无需暂停、重播或重新开始。
• 每屏一个概念，每一步一句引导语。允许在深入讲解块中使用长文本，但不允许视觉杂乱：一种字体系列，每屏最多 4 种字号，少量各司其职的颜色，一个文本区域。屏幕上不显示来源、引文或版本说明：来源放在 sources 中，并显示在“来源”面板里。
• 每个技术术语都要在使用前定义（并配有图示）。
• 图示占据主要画面；桌面端画面须能在 1440×900 的视口中完整显示，无需滚动；在所有经审查的视口中，渲染文本均 ≥ 11 px。
• Mock 使用已验证的格式，并标注“模拟”。

执行

• 相同的幻灯片、步骤、时间和输入始终生成相同的帧，包括按乱序跳转时。画面中不得使用时钟、网络、无种子的随机性或 CSS 过渡。
• 字体、图像和资源须在 lesson.ready 之前加载；资源加载失败时须予以说明。
• 模型决定文本、颜色、状态和反馈；步骤引导语须源自图示的同一状态。
• 交互必须产生后果和因果反馈；回答错误时须解释原因。
• 真实数据、Mock、重建数据和示例值须正确标注。

命令

$SKILL 是此 skill 的文件夹；$WORK 是课程文件夹，位于该文件夹之外。请使用绝对路径。

node $SKILL/scripts/check_env.mjs --channel chrome
node $SKILL/scripts/pack.mjs $WORK/source/lesson.html --out $WORK/out/lesson.html
node $SKILL/scripts/capture.mjs $WORK/out/lesson.html --out $WORK/qa/kf --mode keyframes --viewports 1440x900,390x844 --channel chrome
node $SKILL/scripts/storyboard.mjs $WORK/qa/kf/manifest.json                      # desktop
node $SKILL/scripts/storyboard.mjs $WORK/qa/kf/manifest.json --viewport 390x844   # celular
node $SKILL/scripts/storyboard.mjs $WORK/qa/kf/manifest.json --scenario errada    # feedback de erro
node $SKILL/scripts/capture.mjs $WORK/out/lesson.html --out $WORK/qa/motion --mode motion --fps 30 --channel chrome
node $SKILL/scripts/contact_sheet.mjs $WORK/qa/motion/manifest.json --stride 3
node $SKILL/scripts/audit.mjs $WORK/out/lesson.html --capture $WORK/qa/motion/manifest.json --out $WORK/qa/audit.json --channel chrome

PDF 讲义（用户要求时，或课程将以打印版或离线阅读形式分发时）： node $SKILL/scripts/pdf.mjs $WORK/out/lesson.html --out $WORK/out/lesson.pdf --channel chrome 会生成横向 A4 文档：封面、每屏一页（场景最终状态 + 所有步骤的引导语，按顺序排列）、无答案的练习、最后附有反馈的答案，以及带链接的来源。交付前，请打开 PDF 的几页进行检查。

课程视频（仅在用户要求时）： node $SKILL/scripts/video.mjs $WORK/out/lesson.html --out $WORK/video --channel chrome 会录制课程使用过程（每一步都有动画，一个光标点击“继续”，练习均选择正确答案），并以原生尺寸生成 1920×1080、1080×1080、1080×1350 和 1080×1920 四种格式。--formats 用于选择格式；--hold 和 --read 用于调整停顿时间。交付前，请观看每种格式的一帧。

test_player.mjs 和 test_tools.mjs 使用随附示例测试播放器和工具；编辑 skill 时运行它们，不要用它们来验证课程。

未指定 --channel 时，会使用 Playwright 的 Chromium。不要把失败结果隐瞒不报，也不要在未实际查看的情况下标记已完成视觉检查。

完成标准

满足以下条件即可完成：P1–P5 各关卡均已通过；评分量表的每个维度均 ≥ 4 分；分镜脚本通过桌面端和手机端的体验检查清单；截图没有问题；动画已检查；练习包含反馈；最终 HTML 已打开并测试。如果无法进行某项检查，请说明具体项目。

最终回复中：说明课程所在位置（并打开课程），用一行说明导航方式（“继续”或 →），提供用户要求的 PDF 或视频（如有），并说明实质性限制。编辑此 skill 时：验证脚本和示例，运行 test_player.mjs 和 test_tools.mjs，并确保仓库中没有 work/ 产物。