AI Animation Skills

一套用 AI 生成炫酷 HTML 动画的 Agent Skills 集合 · A collection of skills for generating cool HTML animations with AI

中文 · English

---

中文

项目简介

本仓库是基于 WorkBuddy / Claude Code / Cursor 等 AI Agent 的动效 Skill 集合。每个 Skill 是一个自包含文件夹，包含 SKILL.md（Agent 执行指令）、README.md（人类文档）、references/（Prompt 参考）和 assets/（模板 HTML）。安装后，AI Agent 会根据你的描述自动激活对应 Skill，生成完整的单文件 HTML 动画。

一句话生成：

• 📊 PPT 风格演示 — 科普、技术讲解、视频配套演示
• 📈 流程图 / 原理演示 — 流程图、概念图、对比图、时序图、AI 模型可视化等
• 🌐 网络协议可视化 — TCP/IP、IPv4、以太帧、路由、DHCP 等
• 🏗️ 动态架构图 — 系统架构、流程图、时序图、数据流图、状态机，带流动动画 + 多格式导出
• 📝 学霸笔记 — 手写笔记本风格的精美 HTML 学习笔记，两种模板风格

👇 点击预览图查看各 Skill 详情

---

Skills Gallery

ppt-animation

分类: PPT 演示 / 翻页动画 适用于: 视频录制、技术科普、教学演示、直播课件——需要"PPT 翻页 + 元素依次缓入"动画效果的场景。

ppt-animation 生成 PPT 风格的单文件 HTML 翻页演示。每次翻页后页面内元素依次缓入出现，支持暗色科技风、暖色报纸风、简约白色、赛博朋克红橙、渐变暗色等多套主题。键盘 / 滚轮 / 点击均可翻页，适配全屏播放和录屏。

亮点:

• 16:9 宽高比，适配全屏播放与录屏
• 每次翻页后元素依次缓入出现（细化到每行文字）
• 5 套内置主题：dark-tech / warm-paper / clean-white / cyber-red / gradient-dark
• 核心概念用图形化元素（图表、流程图、示意图）展示，不依赖外部图片
• 支持以已有模板为基础重构（以 assets/xxx.html 为模板演示以上内容）

↑ 5 套主题一览 — 打开完整画廊 查看预览与适用场景。

Links: README · SKILL.md

---

flowchart

分类: 流程图 / 概念图 / 原理演示 适用于: 视频科普、技术讲解、PPT 配图——需要动画流程图、概念对比、原理演示的场景。

flowchart 生成教育/科普类流程图与原理演示的动画 HTML。暗色科技风格，节点发光、箭头流动、数据粒子效果。不只是 AI 模型——任何概念、流程、对比、交互都能用动画呈现。与 dynamic-archify 互补：flowchart 偏教育演示（好看 + 直观），dynamic-archify 偏工程架构（精确 + 可导出）。

亮点:

• 7 种图表类型：流程图 / 概念图 / 原理演示 / 时序图 / 对比图 / 时间线 / 系统概览
• AI/ML 模型可视化完整保留（RNN / LSTM / GRU / MLP / Word2Vec / GPU）
• 暗色科技风：深色背景 + 蓝/紫/橙渐变节点 + 发光效果
• 连接线流动动画 + 数据粒子效果，页面始终保持动态感
• 支持自动播放 / 手动步进 / hover 高亮三种交互模式

↑ 部分图表预览 — 查看完整图表类型列表。

Links: README · SKILL.md

---

network-protocol-viz

分类: 网络协议 / 数据包演示 适用于: 网络课程、安全教育、技术分享——需要动态展示协议交互流程、数据包结构、路由转发的场景。

network-protocol-viz 生成网络协议工作原理的动态 HTML 可视化页面。根据协议类型自动选择可视化方式：数据包/帧结构用分层矩形块 + hover 字段说明；交互流程用客户端/服务端时序图 + 数据包流动；路由转发用拓扑图 + 路径动画。必须包含播放/暂停/重置控制。

亮点:

• 支持 TCP/IP / IPv4 / 以太网帧 / 路由 / 交换机 / DHCP / HTTPS / PPP 等协议
• 三种可视化模式：结构展开 / 时序交互 / 拓扑转发
• 协议层颜色区分：物理层(灰) / 链路层(蓝) / 网络层(绿) / 传输层(橙) / 应用层(紫)
• 数据包带发光尾迹沿路径流动
• 安全教育模式：底部自动添加免责声明

↑ 部分协议预览 — 查看完整协议列表。

Links: README · SKILL.md

---

dynamic-archify

分类: 动态架构图 / 流程图 / 时序图 / 数据流图 / 状态机 适用于: 技术文档、系统设计评审、安全分析、CI/CD 可视化——需要专业级技术图表（带流动动画 + 多格式导出）的场景。

dynamic-archify 生成专业级技术图表的单文件 HTML，包含内联 SVG、暗/亮主题切换、连接线流动动画、沿路径移动的发光粒子。接受自然语言描述或粘贴的 Mermaid 代码，从零开始布局。支持 5 种图表类型：架构图、工作流图、时序图、数据流图、状态机。内置 Node.js 渲染器 + JSON Schema 验证，也支持无 Node 环境的手动 SVG 模式。

亮点:

• 5 种图表类型：architecture / workflow / sequence / dataflow / lifecycle
• 自动流动动画：CSS stroke-dasharray 流动 + SVG 粒子沿路径移动，按连接类型自动调速
• 暗/亮主题切换（持久化到 localStorage，尊重 prefers-color-scheme）
• 一键导出：PNG / JPEG / WebP / SVG / 动画 GIF / WebM 视频
• 接受 Mermaid 代码输入，自动映射到对应图表类型并重新布局
• CSS 变量色彩系统，组件类型语义化（前端/后端/数据库/云/安全/消息队列/外部）

↑ 5 种图表类型预览 — 查看完整说明。

Links: README · SKILL.md

---

scholar-notes

分类: 学霸笔记 / 手写笔记本风格 HTML 适用于: 技术笔记、漏洞分析、安全研究记录、知识点总结、课堂笔记——需要将技术内容转化为视觉精美的手写笔记本风格网页的场景。

scholar-notes 生成手写笔记本