科普文字生成 HTML 演示动画

要解决的问题

直接把一段科普文字丢给大模型生成网页，常会得到结构松散、代码量不足、切页后 CSS 动画不再重放的结果。对于 OSI 模型、网络分层、深度学习概念这类内容，单纯静态页面很难表达层级、流程与对比关系。这个技能把「文本到演示页」拆成可控工作流，目标是生成可轮播的 PPT 风格 HTML，并能在已有内容基础上切换为平面 UI 流程图样式。

如何工作

• 默认 PPT 模式：先基于输入文本生成更具体的演示提示词，再让模型输出完整 HTML；随后追加动画重置修复 JS，避免 animation-fill-mode: forwards 导致切页后动画只播放一次的问题。
• 模板重构：技能内置 PPT 模板目录，模型需要先阅读 SUMMARY.md，再根据内容类型选择模板，例如对比类选择 VS 模板、流程类选择步骤动画模板、警示类选择红色脉冲模板。
• 流程图模式：当用户明确要求“生成流程图”时，基于已生成的 AI_Animation.html 按 Animation 模板重构为平面 UI 风格，而不是重新生成内容。

适用边界

它适合科普讲解、模型原理、协议分层、实验步骤等可结构化的内容；不适合需要外部数据图表、实时交互或品牌级设计系统的场景。输出路径、模板路径可由用户指定，默认输出为桌面 AI_Animation.html。