[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1300":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":34,"readmeContent":35,"aiSummary":36,"trendingCount":15,"starSnapshotCount":15,"syncStatus":37,"lastSyncTime":38,"discoverSource":39},1300,"AI-Animation-Skill","Unclecheng-li\u002FAI-Animation-Skill","Unclecheng-li","使用 AI 生成 HTML 演示动画的工具集，让视频创作者能够快速将科普文本转换为炫酷的演示动画。","",null,"HTML",398,29,260,0,21,31,124,63,4.43,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33],"css","css3","front-end","html5","html5-css3","html5-css3-javascript","javascript","ppt","2026-06-12 02:00:26","\u003Cdiv align=\"center\">\n\n# AI-Animation.skill\n\n> *使用 AI 生成 HTML 演示动画的工具集，让视频创作者能够快速将科普文本转换为炫酷的演示动画。*\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue.svg)](LICENSE)\n[![OpenClaw](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FOpenClaw-Skill-green)](https:\u002F\u002Fopenclaw.ai\u002F)\n[![HTML5](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FHTML5-Demo-orange)](assets\u002Ftemplates\u002F)\n\n\u003Cbr>\n\n**不是模板合集，是可运行的 AI 动画生成工作流。**\n\n\u003Cbr>\n\n基于整理好的 Prompt 模板集成的 Skill，\n配合 OpenClaw、Workbuddy、QClaw 等 AI 使用，\n两步自动完成「科普文本 → 炫酷动画」的转换。\n\n[快速开始](#快速开始) · [模板总览](#模板总览) · [效果示例](#效果示例) · [更新日志](CHANGELOG.md)\n\n\u003C\u002Fdiv>\n\n---\n\n## 它能做什么\n\n输入一段技术科普文本，AI 自动生成演示动画：\n\n```\n用户输入：OSI 七层模型是什么？(相关科普文档)\n\n模式一（默认）：科普文本 → 生成基础 HTML → Level2 PPT 模板重构 → 炫酷演示文件\n模式二（可选）：已生成的 HTML → Animation 流程图模板重构 → 平面 UI 风格\n```\n\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fc09e0f57-7f5a-4014-8809-b5e99d11e9f5\" \u002F>\n\n适用于 B 站视频素材、课堂教学、技术分享等场景。\n\n---\n\n## 快速开始\n\n### 安装 (例：Workbuddy)\n\n```\n1. 下载本项目\n2. 将 AI-Animation-Skill 文件夹复制到 ~\u002F.workbuddy\u002Fskills\u002F 目录\n3. 重启 WorkBuddy\n```\n\n### 使用\n\n**模式一（PPT 演示）：**\n1. 在对话中输入科普内容，说「帮我生成PPT」\n2. Skill 自动生成基础 HTML → 选择 Level2 模板重构\n3. 输出炫酷演示文件\n\n**模式二（流程图）：**\n1. 先完成模式一，生成 AI_Animation.html\n2. 说「生成流程图」\n3. Skill 自动选择 Animation 模板重构为平面 UI 风格\n\n---\n\n## 蒸馏了什么\n\n| 类别            | 内容                           |\n| ------------- | ---------------------------- |\n| **PPT Level2 模板** | 26 个高质量 HTML 轮播演示模板（含选择指南 SUMMARY.md） |\n| **PPT 基础模板**  | 4 个可复用的 HTML 轮播演示模板          |\n| **Animation 模板**  | 14 个流程图风格的 HTML 模板（含选择指南 SUMMARY.md） |\n| **工作流**       | 文本 → HTML → Level2 模板重构 → 流程图 的完整链路 |\n\n---\n\n## 项目结构\n\n```\nAI-Animation-Skill\u002F\n├── SKILL.md                              # Skill 主文件（工作流定义）\n├── README.md                             # 本文件\n├── LICENSE                               # MIT 开源协议\n└── assets\u002F\n    └── templates\u002F\n        ├── PPT Template-level2\u002F          # ⭐ PPT 高级模板（优先选用，26 个）\n        │   ├── SUMMARY.md                #   AI 选模板参考文档\n        │   ├── 1.html ~ 9-3.html         #   9 个系列 26 个模板\n        ├── PPT\u002F                          # PPT 基础模板（回退选用，4 个）\n        │   ├── PPT-Generate-1.html\n        │   ├── PPT-Generate-2.html\n        │   ├── PPT-Generate-3.html       #   基础回退推荐\n        │   └── PPT-Generate-4.html\n        └── Animation\u002F                    # 流程图模板（14 个）\n            ├── SUMMARY.md                #   AI 选模板参考文档\n            ├── RNN-2.html ~ RNN-7.html   #   RNN 系列（6 个）\n            ├── LSTM-1.html               #   LSTM 三阶段\n            ├── Comprehension.html         #   架构理解\n            ├── GPU.html                   #   计算硬件\n            ├── word2vec-1.html            #   词向量\n            ├── onehot.html \u002F onehot-drawback.html  # One-hot 编码\n            ├── The fatal flaw of DNN.html #   DNN 缺陷\n            └── Cross-modal disentanglement - 2.html  # 跨模态\n```\n\n---\n\n## 模板总览\n\n### PPT Level2 模板（26 个，优先选用）\n\n> 模型根据科普内容类型自动选择最合适的模板，详见 `SUMMARY.md`\n\n| 系列 | 模板数 | 适用场景 | 亮点 |\n|------|--------|---------|------|\n| **1** | 1 | 概念引入、对比 | VS 对比卡片 + SVG 流程图 |\n| **2** | 1 | 概念定义、层级结构 | 13 种动画，最多元化 |\n| **3** | 3 | 轻量\u002F步骤\u002F极简 | 3-3 仅 331 行最轻量 |\n| **4** | 3 | 案例\u002F实验\u002F代码 | 代码雨动画 |\n| **5** | 4 | 警示\u002F失败\u002F危险 | 5-4 达 15 种动画 + 13 页 |\n| **6** | 4 | 护栏\u002F架构\u002F反馈 | 6-2 红绿 VS 对比（15 种动画） |\n| **7** | 4 | 追踪\u002F上下文\u002FDoom Loop | 7-2 达 17 种动画 |\n| **8** | 3 | 辩论\u002F对比\u002F融合 | 8-3 达 30 组 VS 对比 |\n| **9** | 3 | 总结\u002F共识\u002F精炼 | 9-3 仅 5 页最精炼 |\n\n### PPT 基础模板（4 个，回退选用）\n\n| 模板                 | 特点         | 说明     |\n| ------------------ | ---------- | ------ |\n| PPT-Generate-1     | 简洁风格       | 基础演示   |\n| PPT-Generate-2     | 图表丰富       | 数据类内容  |\n| **PPT-Generate-3** | **视觉效果最佳** | **通用推荐** |\n| PPT-Generate-4     | 布局灵活       | 复杂内容   |\n\n### Animation 流程图模板（14 个）\n\n| 模板        | 特点       | 适用场景     |\n| --------- | -------- | -------- |\n| **RNN-3** | **分层卡片** | **通用推荐（默认）** |\n| RNN-2     | 分步展示     | RNN 原理   |\n| RNN-4     | 标准化流程    | 22 种动画，最密 |\n| RNN-5     | 致命缺陷     | 问题\u002F解决对比  |\n| RNN-6     | 梯度爆炸警示   | explode 动画 |\n| RNN-7     | 双问题对比    | 梯度消失+爆炸  |\n| LSTM-1    | 三阶段门控    | LSTM 展示  |\n| onehot    | 编码介绍     | 离散特征     |\n| onehot-drawback | 编码缺陷 | 稀疏性问题    |\n| word2vec-1 | 语义身份证  | 词向量      |\n| Comprehension | 理解架构 | 认知类      |\n| GPU       | 计算节点     | 硬件展示     |\n| Cross-modal disentanglement - 2 | 跨模态解耦 | 多模态 |\n| The fatal flaw of DNN | DNN 缺陷 | 深度学习问题 |\n\n---\n\n## 效果示例\n\n### PPT 风格（Level2 模板重构后）\n\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Fe28ccecf-2632-40f3-b239-c0dd7909af97\" \u002F>\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F9efad557-81e2-49d3-9226-d5ce98b84075\" \u002F>\n\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F8c1be8cc-8293-4893-8b56-b695e5daf6fe\" \u002F>\n\n### 流程图风格（Animation 模板重构后）\n\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F5a65dd82-b690-4d1a-87ba-1b6196b01273\" \u002F>\n\u003Cimg width=\"2560\" height=\"1440\" alt=\"image\" src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff7481d36-44b1-439e-8b3d-ec6def4795e1\" \u002F>\n\n---\n\n## 技术栈\n\n- **前端**：HTML5 + CSS3 + JavaScript（原生，无框架依赖）\n- **动画**：CSS Animation \u002F Keyframes \u002F 3D Transform \u002F Canvas 粒子\n- **兼容性**：现代浏览器（Chrome、Firefox、Safari、Edge）\n\n---\n\n## 更新日志\n\n详见 [CHANGELOG.md](CHANGELOG.md)\n\n---\n\n## 开源协议\n\n本项目采用 [MIT License](LICENSE)。\n\n---\n\n\u003Cdiv align=\"center\">\n\n**如果对你有帮助，欢迎 Star ⭐**\n\n\u003C\u002Fdiv>\n","AI-Animation-Skill 是一个使用 AI 生成 HTML 演示动画的工具集，能够帮助视频创作者快速将科普文本转换为炫酷的演示动画。该项目基于 HTML5 和 CSS3 技术，提供两种模式：一种是将科普文本直接转化为基础 HTML 再通过 Level2 PPT 模板重构为演示文件；另一种则是对已生成的 HTML 文件进行 Animation 流程图模板重构，形成平面 UI 风格。其内置了丰富的高质量 HTML 轮播演示模板和流程图风格模板，并支持与 OpenClaw、Workbuddy 等 AI 平台配合使用，实现自动化工作流。适用于制作 B 站视频素材、课堂教学和技术分享等场景。",2,"2026-06-11 02:42:53","CREATED_QUERY"]