AI Animation Skills

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

🌐 English version: README_EN.md

项目简介

本仓库是基于 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 学习笔记，两种模板风格
🎴 卡片剧场 — 侧边栏叙事 + 3D 卡片轮播，协议流程 / 产品特性 / 分步讲解的叙事感演示
🎬 视频分镜演示 — 电影级"一个镜头一个 HTML"演示动画：29 种风格轮换、镜头推拉、WebAudio 音效、角色表情吐槽，全屏录屏即成片
📱 手机系统 UI 演示 — 一台"真手机"的电影化编排录屏：锁屏通知、聊天、设置页、App 界面逐镜头呈现，HyperOS 级手感动效 + 3D 姿态手机演员

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

ppt-animation _{PPT 演示 / 翻页动画}	flowchart _{流程图 / 概念图 / 原理演示}	network-protocol-viz _{网络协议 / 数据包演示}	dynamic-archify _{动态架构图 / 流程图 / 时序图}
scholar-notes _{学霸笔记 / 手写笔记本风格}		card-theater _{卡片剧场 / 3D 卡片轮播}
phone-ui-demos _{手机系统 UI / 编排录屏动画}		video-shot-demos _{视频分镜演示 / 电影级镜头动画}

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 为模板演示以上内容）

_{dark-tech
暗色科技风} _{warm-paper
暖色报纸风} _{clean-white
简约白色} _{cyber-red
赛博朋克红橙} _{gradient-dark
渐变暗色}

_{↑ 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 高亮三种交互模式

_{RNN
RNN流程图} _{LSTM
LSTM流程图} _{GPU
架构图} _{流程图
攻击链/工作流}

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

Links: README · SKILL.md

`network-protocol-viz`

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

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

亮点:

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

_{TCP
PPP数据帧结构} _{IPv4
IPv4 数据报 3D} _{Routing
HTTPS 应用层加密} _{HTTPS
DHCP ACK报文}

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

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 变量色彩系统，组件类型语义化（前端/后端/数据库/云/安全/消息队列/外部）

_{architecture
系统架构图} _{workflow
工作流图} _{sequence
时序图} _{dataflow
数据流图} _{lifecycle
状态机}

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

Links: README · SKILL.md

`scholar-notes`

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

scholar-notes 生成手写笔记本风格的单文件 HTML 学习笔记。两种模板风格：Style A（米黄横线纸 + 螺旋装订孔 + 胶带/咖啡渍装饰，适合通用技术笔记）和 Style B（皮革封面 + 金属环装订 + 翻页交互，适合攻击链分析、漏洞笔记）。内置丰富的组件系统：流程图、对比框、攻击链、代码块、便签等。所有图标使用平面 UI 库（Lucide / Remix Icon），禁止 emoji。

亮点:

两种模板风格：Style A（学霸笔记本 / 单页滚动）/ Style B（手账皮革本 / 翻页交互）
手写感字体：Kalam + Patrick Hand + Zeyada / Ma Shan Zheng
丰富组件：流程图 / 对比框 / 攻击链 / 代码块 / 便签 / 警告框 / 概念卡片
颜色编码系统：红=警告/强调、蓝=信息/术语、绿=安全/正面、紫=技术/代码
严格质量约束：禁止 emoji、内容高度适配封面、checklist 自检

_{Style A
学霸笔记本} _{Style B
手账皮革本}

_{↑ 两种风格预览 — 查看完整说明。}

Links: README · SKILL.md

`card-theater`

分类: 侧边栏叙事 + 3D 卡片轮播演示 适用于: 协议流程演示、产品特性展示、分步讲解——需要"侧边栏解说 + 3D 卡片轮播 + 模式切换"的叙事型演示场景。

card-theater 生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML。左侧叙事栏逐步解说，右侧 3D 玻璃拟态卡片以 Coverflow / 轨道 / 滚动方式排列。支持模式切换（动态插入/移除卡片）、荧光笔高亮、水印图标等效果。内置 5 种模板：滚动 3D 倾斜、Apple 极光轨道、经典 Coverflow、水印图标版、Focus 展开版。

亮点:

5 种内置模板：scroll-3d-tilt / apple-aurora-track / coverflow-classic / coverflow-watermark / coverflow-focus
侧边栏叙事：标题 + 解说文字 + 关键要点，随卡片切换同步更新
模式切换：动态插入/移除卡片（如传输模式 ↔ 隧道模式），带过渡动画
荧光笔高亮：选中卡片的关键字段播放划线动画
3D 交互：Coverflow 旋转 / 轨道平移 / 滚动翻页 / 鼠标 3D 倾斜
键盘 ←→ / 鼠标滚轮 / 点击卡片，多种导航方式


_{scroll-3d-tilt 滚动 3D 倾斜}	_{apple-aurora-track Apple 极光轨道}	_{coverflow-classic 经典 Coverflow}	_{coverflow-watermark 水印图标版}	_{coverflow-focus Focus 展开版}

_{↑ 5 种模板预览 — 查看完整说明。}

Links: README · SKILL.md

`phone-ui-demos`

分类: 手机系统 UI / 编排录屏动画 适用于: 产品功能演示、App 上手引导、课程科普、品牌视频——需要"看起来像真手机精心编排录屏"的电影化演示场景。

phone-ui-demos 把任意内容做成一辑手机系统 UI 风格的网页动画：舞台中央一台全细节真手机（挖孔/侧键/天线带/屏幕反光/状态栏），内容通过锁屏通知、聊天、设置页、控制中心、App 界面等系统组件逐镜头呈现。全系列统一 HyperOS/MIUI 设计语言（大圆角 + 毛玻璃 + 动态壁纸渐变），手机是有 3D 姿态的演员——摇摆、前倾、横屏、盖章震动、熄屏旋走。内置 8 个成片级镜头样板（AI 私教「可学」产品演示）+ 起步骨架。

亮点:

phoneTo 3D 姿态系统：六自由度控制一台"活手机"，每镜头 ≥2 次 3D 动作；标志性 App 打开 morph 转场（图标精确位变 → 铺满屏幕）
背景层大字幕：口播文案在手机两侧做 58px+ 渐变大字，11 种入场效果（流光上浮/逐字波浪/砸落/翻转…）每镜轮换
内容转译映射：论点→锁屏通知、对话→聊天气泡（打字指示器）、数据→圆环滑条、流程→设置列表、对比→ActionSheet、总结→熄屏品牌卡
镜头连续性铁律：整辑统一氛围、首镜头才登台、后续镜头初始姿态接续上镜余韵——8 个独立 HTML 像一镜到底的录屏
电影化播放器：虚拟时钟黑场起手 / HUD 分段进度点击跳镜头 / ←→ 切镜头 / 默认静音喇叭开关
零依赖单文件：图标全内联 SVG、壁纸全 CSS 渐变、音效 WebAudio 合成，双击离线可跑


_{锁屏通知手机 3D 登台}	_{App 打开标志性 morph 转场}	_{苏格拉底对话盖章 + 手机震动}	_{知识星云多级下钻图谱}	_{横屏仪表盘 rz:-90 转横}	_{熄屏收尾 3D 旋走落幕}

_{↑ 8 镜头中的 6 个系统场景 — 打开完整组件库与规范（8 个成片样板可直接运行）。}

Links: README · SKILL.md

`video-shot-demos`

分类: 视频分镜演示 / 电影级镜头动画 适用于: 视频配套演示动画、录屏成片、技术实测复盘、产品发布可视化——需要"一个镜头一个 HTML、风格轮换、镜头推拉、同步音效"的电影化演示场景。

video-shot-demos 把视频分镜做成可全屏录屏当成片的网页动画：一个镜头 = 一个独立 HTML。整辑共享电影化播放器底盘（黑场起手 + 虚拟时钟 + 悬停唤出 HUD + 暂停重播），每个镜头却用完全不同的视觉风格创作。内置两套完整成片实例（glm-5.3-range-test 29 镜头安全实测复盘 + doubao-paper-detective 11 镜头论文阅读商单，共 40 种风格零重复）、安安 15 张情绪立绘、WebAudio 合成音效引擎、镜头调度系统（推拉摇移 / 跟拍 / 黑边慢放）与无头截图质检工具。

亮点:

电影化播放器：黑场「启动播放」起手，虚拟时钟让 CSS 动画与 JS cue 永不漂移，录屏干净零闪跳
镜头语言：开场拉镜 / 关键推近 / 跟拍 / Ken Burns 缓推 / 冲击快推，慢放段落自动配黑边 + 暗角 + 毫秒计数
WebAudio 合成音效：零音频文件，6 原语（pop/whoosh/swipe/type/ding/thud），镜头运动自动挂呼啸声
40 种视觉风格库（两辑实例 29+11）：每种风格配字体组合 + 适用内容 + 成片级活样板，连续镜头绝不同风格
双角色吐槽体系：安安 15 情绪 + 橘雪莉 20 情绪，每页 ≥2 次出场（中段快闪连切立绘 + 结尾定场），重点页雪莉吐槽→安安接茬双人同框
字幕条逐句对齐口播稿，关键词高亮；数据角注出处，跨页比分连续滚动
无头截图质检：虚拟时钟快进到任意毫秒截帧，逐张排查重叠遮挡 / 动画穿帮


_{复古报纸头条震撼数字宣告}	_{嘉年华老虎机 ★镜头推进典范}	_{像素平台跳跃 ★镜头推进典范}	_{审讯室软木板证据链追查}	_{机场安检拦截与合规}

_{↑ 5 / 40 种风格示例（第一辑）— 打开完整风格库（两套实例共 40 个成片页面可直接运行）。}

Links: README · SKILL.md

安装

#	方式	适用于	指定版本?
A	`skills` CLI (`npx`)	任意 Agent，一行安装，按需选择 Skill	✅ via tag URL
B	Git Clone + 手动复制	本地开发 / 魔改	✅ via commit
C	GitHub Releases `.zip`	CI / 生产环境固定版本	✅ via release tag

Option A · `skills` CLI (npx)

bash
1# 安装全部 Skill（推荐）
2npx skills add https://github.com/Unclecheng-li/AI_Animation
3
4# 安装单个 Skill
5npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animation
6npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/flowchart
7npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/network-protocol-viz
8npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/dynamic-archify
9npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/scholar-notes
10npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/card-theater
11npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/video-shot-demos
12npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/phone-ui-demos

默认安装 main 分支最新版本。 CLI 会从源码树直接读取每个 Skill 的最新 SKILL.md。

Option B · Git Clone

bash
git clone https://github.com/Unclecheng-li/AI_Animation.git
# 将 skills/<skill-name> 复制到你的 Agent 技能目录

Option C · GitHub Releases

前往 Releases 页面下载 .zip，解压后复制到 Agent 技能目录。

兼容性

Agent / Runtime	Skill 存放路径	状态
WorkBuddy	`~/.workbuddy/skills/<name>/`	✅ 已测试
Claude Code	`.claude/skills/<name>/`	✅ 兼容
Cursor	`.agents/skills/<name>/`	✅ 兼容
Codex CLI	`.codex/skills/<name>/`	✅ 兼容
Gemini CLI	extension manifest	✅ 兼容

SKILL.md 格式与 Agent 无关，只要 Agent 支持 Skills 规范，将文件夹复制到对应目录即可。

快速上手

安装 Skill 后，直接在 AI Agent 中说：

用 ppt-animation 制作一个关于"HTTP协议"的演示，暗色主题，5页

用 flowchart 演示 LSTM 的工作原理

用 network-protocol-viz 可视化 TCP 三次握手

用 dynamic-archify 画一个微服务架构图，带流动动画

把以上内容做成学霸笔记，Style A 风格

用 card-theater 演示 IPsec 数据流转过程，需要模式切换（传输模式 / 隧道模式）

用 video-shot-demos 把这期视频的口播稿做成分镜演示动画，每个镜头一个 HTML，输出到 demo/

用 phone-ui-demos 把这个 App 的功能做成手机录屏风格的演示动画，先出分镜表我确认

目录结构

1ai-animation-skills/
2├── skills/
3│   ├── SKILL_TEMPLATE.md        ← 新增 Skill 的标准模板
4│   ├── ppt-animation/
5│   │   ├── SKILL.md             ← Agent 执行指令（核心）
6│   │   ├── README.md            ← 人类可读文档
7│   │   ├── references/          ← Prompt 参考
8│   │   └── assets/              ← 模板 HTML 文件
9│   ├── flowchart/
10│   │   ├── SKILL.md
11│   │   ├── README.md
12│   │   ├── references/
13│   │   └── assets/
14│   ├── network-protocol-viz/
15│   │   ├── SKILL.md
16│   │   ├── README.md
17│   │   ├── references/
18│   │   └── assets/
19│   ├── dynamic-archify/
20│   │   ├── SKILL.md
21│   │   ├── README.md
22│   │   ├── renderers/           ← 5 种图表渲染器
23│   │   ├── schemas/             ← JSON Schema 验证
24│   │   ├── examples/            ← 示例 JSON
25│   │   └── assets/              ← 模板 + GIF 导出库
26│   ├── scholar-notes/
27│       ├── SKILL.md
28│       ├── README.md
29│       ├── assets/              ← Style A + Style B 模板
30│       ├── references/          ← 布局库 + 组件手册 + checklist
31│       └── examples/            ← Style A/B 示例（8 个）
32│   ├── card-theater/
33│       ├── SKILL.md
34│       ├── README.md
35│       ├── assets/              ← 5 种模板 HTML
36│       └── references/          ← Prompt 参考
37│   ├── video-shot-demos/
38│       ├── SKILL.md             ← 工作流 + 交付标准
39│       ├── README.md
40│       ├── references/          ← 播放器/镜头/音效/风格库/角色 五份规范
41│       ├── assets/              ← 起步骨架 template.html
42│       │   └── examples/        ← 两套成片实例（glm 29 镜头 + doubao 11 镜头，各带安安表情与图标）
43│       └── scripts/             ← 无头截图质检工具
44│   ├── phone-ui-demos/
45│       ├── SKILL.md             ← 分镜表确认工作流 + 交付标准
46│       ├── README.md
47│       ├── references/          ← 播放器/手机舞台/大字幕/系统组件 四份规范
48│       └── assets/              ← 起步骨架 + kexue 8 镜头成片实例
49├── web_animation/               ← 原始示例 HTML（历史存档）
50├── UI/                          ← UI 设计参考图
51├── prompt.md                    ← Prompt 模板集合
52├── package.json
53├── CONTRIBUTING.md
54└── README.md

贡献与许可

见 CONTRIBUTING.md，欢迎提交新的动画 Skill！

MIT — for educational use only.


_{锁屏通知手机 3D 登台}	_{App 打开标志性 morph 转场}	_{苏格拉底对话盖章 + 手机震动}	_{知识星云多级下钻图谱}	_{横屏仪表盘 rz:-90 转横}	_{熄屏收尾 3D 旋走落幕}


_{复古报纸头条震撼数字宣告}	_{嘉年华老虎机 ★镜头推进典范}	_{像素平台跳跃 ★镜头推进典范}	_{审讯室软木板证据链追查}	_{机场安检拦截与合规}

AI_AnimationDeepSeek Harness plugin

Overview

Original README

AI Animation Skills

项目简介

Skills Gallery

`ppt-animation`

`flowchart`

`network-protocol-viz`

`dynamic-archify`

`scholar-notes`

`card-theater`

`phone-ui-demos`

`video-shot-demos`

安装

Option A · `skills` CLI (npx)

Option B · Git Clone

Option C · GitHub Releases

兼容性

快速上手

目录结构

贡献与许可

Overview

Original README

AI Animation Skills

项目简介

Skills Gallery

ppt-animation

flowchart

network-protocol-viz

dynamic-archify

scholar-notes

card-theater

phone-ui-demos

video-shot-demos

安装

Option A · skills CLI (npx)

Option B · Git Clone

Option C · GitHub Releases

兼容性

快速上手

目录结构

贡献与许可

`ppt-animation`

`flowchart`

`network-protocol-viz`

`dynamic-archify`

`scholar-notes`

`card-theater`

`phone-ui-demos`

`video-shot-demos`

Option A · `skills` CLI (npx)