AI-Animation 是一个用于将科普内容文本自动生成 HTML 演示动画的工作流技能。
用途
当用户输入一段科普内容文本，并希望生成 PPT 风格的 HTML 动画演示时使用本技能。它将文本转换为带有换页轮播、逐元素缓入动画和图形化呈现的纯前端 HTML 页面。
主要能力
本技能实现三步自动化流程：
第一步，生成基础 HTML。读取用户输入的科普内容文本，将文本拼接至指定 Prompt 后发送给 AI（如 GPT-4o、Claude 等），生成基于纯前端页面、单页布局、仿 PPT 换页轮播的直观图形化可视化介绍，加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式，方便进行视频演示。同时添加每次切换页面时页面中各个元素依次「缓入」出现的动画效果，细化到每行文字。生成完毕后保存为 AI_Animation.html。
第二步，使用 PPT 模板重构。用户从内置的七个 PPT 风格模板中选择一个：PPT-Generate-1.html（简洁风格）、PPT-Generate-2.html（图表丰富）、PPT-Generate-3.html（视觉效果最佳，推荐）、PPT-Generate-4.html（布局灵活）、PPT-Generate-5.html（科技感）、PPT-Generate-6.html（多图表）、PPT-Generate-7.html（简洁专业）。模板位于 templates/PPT-Template/。随后将指定 Prompt 发送给 AI，以选定模板重构第一步生成的文件内容，减少演示字数、增大文字大小、加强图形化显示、图文并茂，并将 emoji 图标换成平面 UI 库的图标。其中「将emoji图标换成平面ui库的图标」为强制要求。
第三步（可选），生成流程图风格。当用户输入「生成流程图」时执行。将第一步生成的 HTML 每相邻两页的内容合并，然后使用 RNN 模板之一进行视觉重构。可用模板包括 RNN-2.html（对比风格）、RNN-3.html（分层卡片，推荐）、RNN-4.html（纵向流程）、RNN-5.html（分支结构）、RNN-6.html（树状图）、RNN-7.html（网格布局）、LSTM-1.html（LSTM展示）、onehot.html（one-hot编码）、onehot-drawback.html（one-hot缺陷）、word2vec-1.html（word2vec）、Comprehension.html（理解模型）、GPU.html（GPU架构）、Cross-modal disentanglement - 2.html（跨模态解耦）、The fatal flaw of DNN.html（DNN缺陷）。模板位于 templates/RNN-Template/。重构时按照选定 RNN 模板的平面 UI 样式进行视觉重构，保持现有颜色方案不变，要求精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次，确保交互元素视觉表现与参考网页一致，维持原有颜色值和配色方案，保证响应式表现，优化 DOM 结构并保持功能完整性和交互逻辑不变，完成后进行视觉一致性检查，确保与参考网页达到 95% 以上的相似度。
文件结构
AI-Animation/ 目录下包含 SKILL.md、references/workflow.md 工作流参考文档，以及 templates/ 下的 PPT-Template/ 和 RNN-Template/ 两套模板文件夹。
使用方式
用户输入科普内容文本并说明输出路径（如「输出到桌面」「保存到 D:\Videos\」「输出到当前项目文件夹」）。默认输出到桌面/AI_Animation.html。路径指定方式为在输入时说明输出路径。
注意事项
第一步生成时，确保 Prompt 包含「缓入动画」「加大文字」「图形化」等关键词。第二步重构时，强制包含「将emoji图标换成平面ui库的图标」，建议使用 PPT-Generate-3.html，效果最佳。第三步流程图仅在用户明确要求时执行，每次合并两页。所有生成的文件路径使用正斜杠 /，避免跨平台兼容性问题。模板内置，本 Skill 已包含所有模板文件，无需额外下载或配置。
适用场景
适用于将文字科普内容快速转化为适合视频演示的图文动画 HTML 页面，例如制作关于 TCP 三次握手、OSI 七层模型等主题的科普动画。实战案例中，输入 OSI 七层模型相关文本后，第一步生成 7 页基础 HTML，包含封面页、背景介绍、七层概览、各层核心职责表格、OSI 与 TCP/IP 对比、传输层核心枢纽、总结；第二步使用 PPT-Generate-3 重构后得到青色主题配色、粒子效果背景、封面旋转圆环装饰、交互式七层模型、对比表格、传输层核心枢纽流程图；第三步使用 RNN-3 重构后得到深绿色背景加青色粒子效果、分层卡片架构、数据封装流程可视化、协议标签、底部对比卡片。
限制
本技能依赖外部 AI（如 GPT-4o、Claude 等）完成内容生成与重构，需具备相应的 AI 访问能力。第三步为可选步骤，需用户明确要求才执行。其他关于性能、兼容性或收费等信息资料中暂未提供。