Agent Skills
返回列表
一键生成HTML演示动画

一键生成HTML演示动画

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_ab5ae6ee/unclecheng-ai-animation。

技能介绍

解决什么问题

把长段科普文本直接交给模型，常得到结构松散、视觉单薄、动画只播放一次的 HTML 页面。此技能将内容转成可演示的 AI_Animation.html，重点处理 PPT 轮播、平面 UI 流程图、模板重构和动画状态重置。

核心工作流

  • 模式一：先根据科普文本生成 PPT 提示词，再生成完整 HTML，默认按内置模板风格重构；模板优先从 assets/templates/PPT Template-level2/ 选择，回退 assets/templates/PPT/。
  • 模式二：用户明确说“生成流程图”时，将已生成页面按 assets/templates/Animation/ 中的模板重排为平面 UI 风格，不重新扩写内容。
  • 关键修复：页面切换后动画不重发是常见 bug，技能要求插入 cloneNode(true) 与 replaceChild 的 JS，强制重新渲染 CSS 动画。

适用边界

适合科普讲解、协议模型、算法结构、架构对比等内容演示；不适合替代真实数据可视化或交互应用。默认输出到用户指定路径，未指定时落到桌面 AI_Animation.html；模板选择依赖内容类型，复杂主题需先阅读 SUMMARY.md 再定模板。

使用场景

  • 将 OSI 七层协议解释整理成 13 页可轮播的 HTML 演示页，用于课堂或技术分享。
  • 把 RNN/LSTM 门控流程文本转成平面 UI 流程图，用于解释隐藏态与梯度问题。
  • 将架构对比材料重构成 12 组 VS 或步骤动画模板，便于汇报讲解。
  • 修复模型生成的页面切换后动画不重发问题，输出可反复演示的 HTML。

适合人员

  • 准备科普课或技术分享的教师，需要把协议模型、算法结构转成可演示网页。
  • 做技术文档或内部培训的工程师，需要把架构与流程说明做成可轮播 HTML。
  • 制作 AI 教学材料的研究者，需要用模板快速呈现 RNN、LSTM、词向量等概念。
  • 需要交付可视化演示页的开发者，需要控制输出路径、模板选择与动画重置。