AI_Animation

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 姿态手机演员
• 🗂️ 叠放数据卡 — 论点卡从底部依次弹入、旧卡左叠成牌堆：折线描边 / 数字滚动 / 环形仪表按毫秒级时间线级联入场，自动播放对齐口播，录屏即成片
• 🖥️ 仿 Win11 系统仿真 — 1:1 还原真电脑：资源管理器、开始菜单、系统弹窗、蓝屏修复逐镜头呈现，光标演出引导操作 + 教学标记层，全屏录屏即成片
• 📐 瑞士风格图表演示 — 纸底墨字发丝线的编辑部级排版：每页一张匹配内容的可视化图表（时间线/循环环/流程链/热力矩阵…20 种词汇），唯一强调橙，一镜一 HTML
• 🎞️ UI2V 动效库 — 1,262 个 GSAP 动效包全量离线镜像（ui2v.com/motions，641MB）：按镜头用途查件的索引 + paused 时间轴挂 cue 的接入配方，演示页画面层即插即用
• 🎥 代码渲染 MV 工程库 — 两支持续确定性音乐视频参考工程（歌词 MV + 生成式 3D MV）：帧 = f(歌曲时间)，浏览器预览与离线导出逐帧一致

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

ppt-animation PPT 演示 / 翻页动画 flowchart 流程图 / 概念图 / 原理演示 network-protocol-viz 网络协议 / 数据包演示 dynamic-archify 动态架构图 / 流程图 / 时序图 scholar-notes 学霸笔记 / 手写笔记本风格 card-theater 卡片剧场 / 3D 卡片轮播 phone-ui-demos 手机系统 UI / 编排录屏动画 video-shot-demos 视频分镜演示 / 电影级镜头动画 stacked-data-cards 叠放数据卡 / 时间线论点动画 win11-ui-demos 仿 Win11 系统仿真 / 光标演出动画 swiss-shot-demos 瑞士风格图表演示 / 编辑级排版动画 ui2v-motions UI 动效素材库 / 1,262 个 GSAP 动效包 code-mv-render 代码渲染 MV 工程库 / 歌词 MV + 生成式 MV

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

RNNRNN流程图 LSTMLSTM流程图 GPU架构图 流程图攻击链/工作流

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

Links: README · SKILL.md

network-protocol-viz

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

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

亮点:

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

TCPPPP数据帧结构 IPv4IPv4 数据报 3D RoutingHTTPS 应用层加密 HTTPSDHCP 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-trackApple 极光轨道 coverflow-classic经典 Coverflow coverflow-watermark水印图标版 coverflow-focusFocus 展开版

↑ 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

stacked-data-cards

分类: 叠放数据卡 / 时间线论点动画 适用于: 视频中的数据论证段落、研究结论展示、观点陈列、反直觉点揭示——需要"卡片即论点、数据即证据、自动播放对齐口播"的场景。

stacked-data-cards 生成叠放式数据论点卡的自动播放动画 HTML。深色舞台中央，白色数据卡一张张从底部弹入；新卡弹入时旧卡向左叠放成缩小、倾斜的牌堆。卡内数据组件（折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组）按毫秒级时间线级联入场，整段时长精确对齐口播秒数，结尾可整副牌堆滑出衔