# AI Animation Skills **一套用 AI 生成炫酷 HTML 动画的 [Agent Skills](https://support.claude.com/en/articles/12512176-what-are-skills) 集合 · A collection of skills for generating cool HTML animations with AI** [![License: MIT](https://img.shields.io/badge/License-MIT-blue?style=flat-square)](./LICENSE) [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](#贡献与许可) [![Skills count](https://img.shields.io/badge/Skills-17-orange?style=flat-square)](#skills-gallery) [![Spec](https://img.shields.io/badge/Spec-SKILL.md-black?style=flat-square)](https://agentskills.io) 🌐 **English version**: [`README_EN.md`](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 工程库** — 确定性音乐视频参考工程、90 秒数据纪录片实现与三套 Opus 导演/动态设计/审查工作流：帧 = f(时间)，预览与离线导出逐帧一致 - 🎨 **Lemo-Opuscar 风格库** — 59 种代码导演视频风格：纪实、数据、手绘、东方、印刷、排版、卡通、游戏与 3D，也可定制个人风格 - 🖌️ **Opus Video Skills** — 水彩/水墨角色动画与逐字歌词 MV，以及动态排版 + WebGL 作品集/产品 Reel - 🎞️ **HyperFrames 渲染底座** — HTML / CSS / 媒体 / 可 seek 动画到确定性 MP4，支持 composition、Studio、变量批量与本地/云端渲染 - ✅ **FrameProof 视频 QA** — 空帧、冻结、字幕、音频、编码元数据与源码映射检查，Fix Packets 修复闭环 + baseline 回归门禁

**👇 点击预览图查看各 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}
lemo-opuscar _{59 种代码导演风格 / 个人风格定制}		opus-video-skills _{手绘角色 MV / 动态排版 Reel}
hyperframes _{HTML → MP4 / 确定性渲染底座}		video-qa-frameproof _{生成后视频 QA / 修复与回归门禁}

--- ### 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](./skills/ppt-animation/README.md) · [SKILL.md](./skills/ppt-animation/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](./skills/flowchart/README.md) · [SKILL.md](./skills/flowchart/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](./skills/network-protocol-viz/README.md) · [SKILL.md](./skills/network-protocol-viz/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](./skills/dynamic-archify/README.md) · [SKILL.md](./skills/dynamic-archify/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](./skills/scholar-notes/README.md) · [SKILL.md](./skills/scholar-notes/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](./skills/card-theater/README.md) · [SKILL.md](./skills/card-theater/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](./skills/phone-ui-demos/README.md) · [SKILL.md](./skills/phone-ui-demos/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](./skills/video-shot-demos/README.md) · [SKILL.md](./skills/video-shot-demos/SKILL.md) --- #### `stacked-data-cards`

**分类:** 叠放数据卡 / 时间线论点动画 **适用于:** 视频中的数据论证段落、研究结论展示、观点陈列、反直觉点揭示——需要"卡片即论点、数据即证据、自动播放对齐口播"的场景。 `stacked-data-cards` 生成叠放式数据论点卡的自动播放动画 HTML。深色舞台中央，白色数据卡一张张从底部弹入；新卡弹入时旧卡向左叠放成缩小、倾斜的牌堆。卡内数据组件（折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组）按毫秒级时间线级联入场，整段时长精确对齐口播秒数，结尾可整副牌堆滑出衔接下一镜头。零依赖、零交互，全屏录屏即成片。亮点: - 三态卡片机制：`upcoming → active → stacked`，旧卡左叠成牌堆，论点之间有"累积感" - 毫秒级时间线：`TIMING` 常量表对齐口播句读，每卡驻留时长可调，末个动画结束预留 1.5s 阅读时间 - 数据组件库：折线 trim-paths 描边 / count-up 数字滚动 / 环形仪表 / 对比条 / 行内迷你条形表格 / 图标卡组 / 金句横幅 / 角注 - WebAudio 合成低音 thud 点缀关键揭示时刻，零音频文件，自动播放被拦截时静默失败 - 主题变量化：改 `--accent` 一个变量即可整体换色（橙红 / 蓝 / 绿 / 紫） - 零依赖单文件：无 CDN、无外部图片，双击离线可跑

_{template
起步骨架} _{实例 A
橙红 · 趋势论证} _{实例 B
蓝紫 · 数据揭示}

_{↑ 起步骨架 + 2 个成片实例预览 — 查看完整说明（实例可直接运行）。} Links: [README](./skills/stacked-data-cards/README.md) · [SKILL.md](./skills/stacked-data-cards/SKILL.md) --- #### `win11-ui-demos`

**分类:** 仿 Win11 系统仿真 / 光标演出动画 **适用于:** 电脑教学视频、软件操作教程、系统知识科普、安全意识宣传——需要"看起来像一台真 Win11 电脑在自己操作"的写实演示场景。 `win11-ui-demos` 制作仿 Windows 11 系统 UI 的写实仿真演示动画：Bloom 壁纸桌面、亚克力任务栏、资源管理器逐层打开、系统弹窗报错、蓝屏自动修复——17 类组件按 Light Fluent 实测色值 1:1 还原，一支全程可见的鼠标（弧线飞行→悬停→单击→双击）引导观众看完全程，问号徽章/容量爆红/poof 删除等教学标记叠加在真界面上讲解。内置 21 个成片镜头（悟空安全 C 盘清理商单仿真子集）+ 全套仿真套件模板。亮点: - Win11 仿真套件：桌面/任务栏/资源管理器五段结构/开始菜单/右键菜单/系统对话框/通知/WinRE 蓝屏，窗底 #f3f6fb、accent #0067c0、亚克力 blur(18px) 像素级还原 - 光标演出：curTo 弧线飞行 + clickFx 点击缩放 + 双击节奏——没有光标的系统演示只是截图集 - 视图切换三同步：标签页/地址栏面包屑/状态栏项目数随导航同步更新，缺一处即穿帮 - 教学标记层与还原层分离：问号徽章逐一 pop 悬念、poof 删除动画、容量条爆红呼吸——"老师的手"轻盈不遮界面 - 真实系统文案：0xc0000142 错误码、"存储空间不足"通知原文、面包屑 ›——细节可信度来源 - 因果链叙事：乱删 → 报错 → 蓝屏修复，系统界面天然的剧情弧 - 角色 GIF 吐槽（大肥鱼）按情绪锚点登场；每页带"界面为演示还原"声明角注


_{此电脑爆红光标双击开演}	_{开始菜单删除警告链}	_{蓝屏修复 WinRE 百分比}	_{根目录导览问号徽章悬念}	_{双窗对比并排资源管理器}	_{右键回收站桌面交互三步}

_{↑ 6 / 21 个仿真镜头示例 — 打开完整套件规范（21 个成片样板可直接运行）。} Links: [README](./skills/win11-ui-demos/README.md) · [SKILL.md](./skills/win11-ui-demos/SKILL.md) --- #### `swiss-shot-demos`

**分类:** 瑞士风格图表演示 / 编辑级排版动画 **适用于:** 知识教程视频、技术复盘、产品发布、安全科普——需要"纸底墨字 + 匹配内容的可视化图表"的克制美学演示场景；也专治 AI 默认生成的"黑底油光"审美疲劳。 `swiss-shot-demos` 制作瑞士国际主义风格（Swiss / International Typographic Style）的分镜演示动画：纸灰底、炭黑墨、发丝线、灰阶明度阶梯、每页唯一强调橙——编辑部级排版（Inter 大字 + 12 列网格 + 非对称布局）。核心方法论是**图表驱动**：拿到口播先问"这是什么图"，20 种图表词汇选型（大字计数、发丝轴柱、时间线、环形回路、流程链、泳道、状态机、双列对照、嵌套框、热力矩阵、点阵、计票清单、墨底终端卡…），主体图形区 ≥55% 面积。全面禁用 glow/霓虹/渐变光斑。内置 68 个成片镜头（AI 渗透教程全片）+ 预装瑞士系统的底盘模板。亮点: - 瑞士设计系统唯一正本：纸 `#F0EFEB` / 墨 `#1C1C1A` / 灰阶 L1-L7（明度即数据）/ 唯一强调橙 `#F5572F`（每页只标一个主角） - 图表词汇表 20 种"内容→图表"映射，纯 CSS/SVG 实现，零外部图表库 - 禁用清单一票否决暗色油光全家桶（glow/光斑/渐变/扫描线/弹跳） - 入场三式 pop/fade/draw + 快进快停缓动；节拍动画一律 cue+tws 可冻结 - QA 冻结钩子内置：URL 加 `#auto,t=毫秒` 自动起播冻结，无头截图零改文件 - 生产纪律：cue 时刻=口播句绝对时间差、数字白名单不编造、不伪造终端回显


_{AI 循环环 shot-0-1 五幕范本}	_{恶化时间线四步逐级变深}	_{点阵对撞 15 → 50+ 翻倍}	_{嵌套剖视宿主机套客户机}	_{双列对照 CTF vs 靶场}	_{热力矩阵灰阶即数据}

_{↑ 6 种图表词汇示例 — 打开完整图表词汇表（68 个成片样板可直接运行）。} Links: [README](./skills/swiss-shot-demos/README.md) · [SKILL.md](./skills/swiss-shot-demos/SKILL.md) --- #### `ui2v-motions`

**分类:** UI 动效素材库 / 演示画面层即插即用 **适用于:** 视频演示页、产品页、落地页需要高质量 UI 动效（图表入场/列表滚动/卡片翻转/文字编排/数字滚动/时间线展开…）——给 AI 一座按"你要讲什么"查件的动效仓库。 `ui2v-motions` 是 ui2v.com（UI-to-video 动效社区）背后 `illli-studio/motions` 仓库的**全量离线镜像**（2026-10-05，9,669 文件 / 641MB，校验零缺失）：**1,262 个动效包**，每个 = 单文件 HTML + 一条 paused 的 GSAP 时间轴（1,150 个 1920×1080）。默认暂停不是缺陷——节奏由调用方决定，恰与本仓库各演示技能的虚拟时钟/cue 时间轴同构：`TL.time(p*duration)` 整段摊进口播时长，或逐句拆拍 seek。配套按镜头用途的 25 类总览 + 1,262 条用途表 + 母版映射索引。亮点: - 1,262 包全量离线（元数据 registry-item.json 齐全），按"你要讲什么"查件：镜头用途总览 + CSV 可编程筛 + 母版短名单 - paused GSAP 时间轴与演示底盘同构，接入配方现成（整段映射/逐句拆拍两种模式） - 四条硬约束已文档化：GSAP 本地化（库内 43 包自带副本）、禁 iframe、进来先 pause、720p×1.5 - 红线清单：terminal 类只借外框弃打字、示例数字不照搬、配色字体按宿主重刷、对外发布前回原站确认授权 - 官方 CLI 与双语文档随包


_{hero-badge-earn 徽章赢得动画}	_{codex-workflow 工作流编排}	_{agent-screenflow 屏幕流演示}	_{claw-game-release 发布封面动画}	_{hero-deploy-pipeline 部署管线流动}	_{hero-chat-bubbles 聊天气泡编排}

_{↑ 6 / 1,262 个动效包截帧 — 打开选型索引与接入配方。} Links: [README](./skills/ui2v-motions/README.md) · [SKILL.md](./skills/ui2v-motions/SKILL.md) --- #### `code-mv-render`

**分类:** 代码渲染 MV 工程库 / 音乐视频渲染工程 **适用于:** 做整片、带音轨、逐帧确定的音乐视频（歌词 MV / 生成式 MV）——想要"帧 = f(歌曲时间)、预览与导出逐帧一致"的工程方法论，而不是单页演示片段。 `code-mv-render` 收录两支确定性开源音乐视频参考工程，以及自建《CVE 编号破十万》90 秒数据纪录片。最新补入 **opus-js-animations / claude-motion-design / claude-motion** 的导演、动态设计与静帧审查工作流，形成从 brief、声音与时间轴到 MP4 复核的完整工程链。亮点: - 同一原理两套实现：**每帧只是歌曲时间的函数**（`renderFrame(t)`），浏览器预览与无头 Chrome 离线导出逐帧一致 - 可复用方法论：颜色=状态调色板、拍点集中管理、**块级自适应子帧运动模糊**（静止 12 / 运镜 36 / 甩镜 108–324）、预览=导出同源 - 成品级**闪光安全**（WCAG 2.3.1 自检）+ 音画同步 / 单帧突跳自检 + 缩图表逐格回归 - 两支工程均可导出 1080p60 / 4K60；另有自建 90 秒数据片、三套 Opus 工作流与九份参考规范 - 许可边界清晰：代码 MIT、剪影 CC BY-NC-SA、**歌曲歌词不在仓库**（须自备并遵守原作者版权指引）

_{world-execute-me-lyric-mv
三墨版画 / 聊天界面与角色剪影} _{pdoom-video
线画场景 + 逐字排版}

_{↑ 两支工程截帧预览 — 打开工程详情与许可说明。} Links: [README](./skills/code-mv-render/README.md) · [SKILL.md](./skills/code-mv-render/SKILL.md) --- #### `lemo-opuscar`

**分类:** 代码导演视频风格库 / 个人风格定制 **适用于:** 用现成风格制作短片、MV、纪实/数据视频，或把某种风格改成品牌/IP 自己的视觉语言。收录 Lemo-Opuscar 的 59 种风格索引、选型与制作合同。上游以 Claude Opus 5.5 为导演，用 Canvas/WebGL 逐帧生成画面并处理配音、配乐和混音；本库仅做文档层收录，实际制作时安装上游完整插件。亮点: - 11 类 59 风格：纪实、实证、手绘、东方、印刷、排版、信息、卡通、游戏、电影与 3D - 先按内容证据与叙事方式选风格，再读上游 `STYLE.md`，不靠名称猜画法 - 支持改造已有风格或从空白创建：方案 → 风格图 → 15–30 秒 demo → 同意后固化 - 预览静帧署名 LemoLab / CC BY 4.0；代码/文档 MIT，第三方素材另行核验 Links: [README](./skills/lemo-opuscar/README.md) · [SKILL.md](./skills/lemo-opuscar/SKILL.md) --- #### `opus-video-skills`

**分类:** 手绘角色视频 / 动态排版 Reel **适用于:** 水彩/水墨角色短片、MV、逐字歌词视频，以及作品集、项目集和产品宣传 Reel。收录两套 Opus 5.5 代码视频工作流：`painted-animation`（p5.js + p5.brush）与 `kinetic-reel`（Canvas 2D + three.js/WebGL）。两者共用纯时间函数、contact sheet 审查、并行逐帧与 FFmpeg 导出合同。亮点: - 手绘路线强调角色表演、关键姿势、情绪弧线与逐字卡拉 OK - Reel 路线强调字体/HUD、视觉机制、形状连续转场与共享时间数据配乐 - 每镜头看图、关键动作看时间带、密集细节看 1:1 裁切，再检查最终 MP4 - 本库不 vendor 上游模板和渲染器；MIT，保留 John Heibel 派生版权说明 Links: [README](./skills/opus-video-skills/README.md) · [SKILL.md](./skills/opus-video-skills/SKILL.md) --- #### `hyperframes`

**分类:** HTML → MP4 渲染基础设施 **适用于:** 多 composition、媒体/字幕、变量批量、Studio 编辑与本地/云端统一渲染。收录 HyperFrames 接入与 composition 合同。它不是固定风格，也不是 Opus 专属工具，可作为数据视频、产品视频或代码 MV 的通用渲染底座。亮点: - 根 `index.html` + `compositions/` + `assets/`，paused GSAP timeline 由渲染器 seek - `lint → check → snapshot → preview → render`，通过检查后仍要实际看图 - 支持本地、Docker、变量批量、Lambda/Cloud Run；在线能力明确标注网络边界 - Apache-2.0；本库仅收录文档与预览，不 vendor CLI、Studio 或官方 Skills Links: [README](./skills/hyperframes/README.md) · [SKILL.md](./skills/hyperframes/SKILL.md) --- #### `video-qa-frameproof`

**分类:** 生成后视频 QA / 源码定位 / 回归门禁 **适用于:** 验收代码或 Agent 生成的 MP4，定位最小修复，并在 PR/CI 中阻止新增和恶化问题。收录 FrameProof 的扫描、修复与 baseline 工作流。核心扫描 renderer-agnostic；可选 Render Manifest 将帧区间映射回源码，输出 Finding、Fix Packets、SARIF、JUnit 等结果。亮点: - 检查空帧、冻结、字幕、音轨/静音/响度、编码/画幅/fps/时长 - manifest 支持 motion/text/visible/audio/safe-area 断言和源码定位 - 报告不是人工看图的替代品；修复后同输入重渲并复检最终 MP4 - MIT；本库不 vendor CLI、Studio 或 Agent Skill，不将其写成 Opus 专属工具 Links: [README](./skills/video-qa-frameproof/README.md) · [SKILL.md](./skills/video-qa-frameproof/SKILL.md) --- ### 安装 | # | 方式 | 适用于 | 指定版本? | |---|------|--------|-----------| | A | [`skills` CLI (`npx`)](#option-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 # 安装全部 Skill（推荐） npx skills add https://github.com/Unclecheng-li/AI_Animation # 安装单个 Skill npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animation npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/flowchart npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/network-protocol-viz npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/dynamic-archify npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/scholar-notes npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/card-theater npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/video-shot-demos npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/phone-ui-demos npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/win11-ui-demos npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/swiss-shot-demos npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ui2v-motions npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/stacked-data-cards npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/code-mv-render npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/lemo-opuscar npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/opus-video-skills npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/hyperframes npx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/video-qa-frameproof ``` > **默认安装 `main` 分支最新版本。** CLI 会从源码树直接读取每个 Skill 的最新 `SKILL.md`。 #### Option B · Git Clone ```bash git clone https://github.com/Unclecheng-li/AI_Animation.git # 将 skills/ 复制到你的 Agent 技能目录 ``` #### Option C · GitHub Releases 前往 [Releases 页面](https://github.com/Unclecheng-li/AI_Animation/releases) 下载 `.zip`，解压后复制到 Agent 技能目录。 ### 兼容性 | Agent / Runtime | Skill 存放路径 | 状态 | |---|---|---| | **WorkBuddy** | `~/.workbuddy/skills//` | ✅ 已测试 | | **Claude Code** | `.claude/skills//` | ✅ 兼容 | | **Cursor** | `.agents/skills//` | ✅ 兼容 | | **Codex CLI** | `.codex/skills//` | ✅ 兼容 | | **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 的功能做成手机录屏风格的演示动画，先出分镜表我确认 ``` ``` 用 stacked-data-cards 把这三个论点做成叠放数据卡动画，整段 25 秒，橙红主题，结尾整副滑出 ``` ``` 用 win11-ui-demos 把这段 Windows 教程的操作过程做成光标演示仿真动画，先出分镜表我确认 ``` ``` 用 swiss-shot-demos 把这期视频的口播稿做成演示动画：瑞士风格、图表驱动，先出图表选型分镜表 ``` ``` 从 ui2v-motions 挑 2-3 个适合"三方案对比"的动效包给我看效果，选中的接入我的演示页 cue 时间轴 ``` ### 目录结构 ```text ai-animation-skills/ ├── skills/ │ ├── SKILL_TEMPLATE.md ← 新增 Skill 的标准模板 │ ├── ppt-animation/ │ │ ├── SKILL.md ← Agent 执行指令（核心） │ │ ├── README.md ← 人类可读文档 │ │ ├── references/ ← Prompt 参考 │ │ └── assets/ ← 模板 HTML 文件 │ ├── flowchart/ │ │ ├── SKILL.md │ │ ├── README.md │ │ ├── references/ │ │ └── assets/ │ ├── network-protocol-viz/ │ │ ├── SKILL.md │ │ ├── README.md │ │ ├── references/ │ │ └── assets/ │ ├── dynamic-archify/ │ │ ├── SKILL.md │ │ ├── README.md │ │ ├── renderers/ ← 5 种图表渲染器 │ │ ├── schemas/ ← JSON Schema 验证 │ │ ├── examples/ ← 示例 JSON │ │ └── assets/ ← 模板 + GIF 导出库 │ ├── scholar-notes/ │ ├── SKILL.md │ ├── README.md │ ├── assets/ ← Style A + Style B 模板 │ ├── references/ ← 布局库 + 组件手册 + checklist │ └── examples/ ← Style A/B 示例（8 个） │ ├── card-theater/ │ ├── SKILL.md │ ├── README.md │ ├── assets/ ← 5 种模板 HTML │ └── references/ ← Prompt 参考 │ ├── video-shot-demos/ │ ├── SKILL.md ← 工作流 + 交付标准 │ ├── README.md │ ├── references/ ← 播放器/镜头/音效/风格库/角色五份规范 │ ├── assets/ ← 起步骨架 template.html │ │ └── examples/ ← 两套成片实例（glm 29 镜头 + doubao 11 镜头，各带安安表情与图标） │ └── scripts/ ← 无头截图质检工具 │ ├── phone-ui-demos/ │ ├── SKILL.md ← 分镜表确认工作流 + 交付标准 │ ├── README.md │ ├── references/ ← 播放器/手机舞台/大字幕/系统组件四份规范 │ └── assets/ ← 起步骨架 + kexue 8 镜头成片实例 │ ├── stacked-data-cards/ │ ├── SKILL.md ← 三态卡片机制 + 时间线规范 + 生成标准 │ ├── README.md │ ├── references/ ← Prompt 参考 + 组件规格手册 │ └── assets/ ← 起步骨架 template.html + 2 个成片实例（橙红/蓝紫） │ ├── win11-ui-demos/ │ ├── SKILL.md ← 光标演出哲学 + cp 工作流 + 交付标准 │ ├── README.md │ ├── references/ ← win11-kit 组件规格 / simulation-patterns 叙事手法 │ └── assets/ ← Win11 仿真套件模板 + wukong 21 镜头实例 + 预览图 │ ├── swiss-shot-demos/ │ ├── SKILL.md ← 图表优先哲学 + cp 工作流 + 交付标准 │ ├── README.md │ ├── references/ ← swiss-system 设计正本 / chart-vocabulary 图表词汇 / production-spec 生产纪律 │ └── assets/ ← 瑞士底盘模板（tokens+组件库预装）+ 68 镜头实例 + 预览图 │ ├── ui2v-motions/ │ ├── SKILL.md ← 选型→接入配方 + 硬约束红线 + Token 纪律 │ ├── README.md / _先看这里.md │ ├── 01_动效库/itelmn/ ← 1,262 个动效包本体（641MB 全量镜像） │ ├── 02_官方CLI与文档/ 03_清单与索引/ 04_预览/ 05_抓取日志/ │ └── assets-preview/ ← 截帧预览图 │ ├── code-mv-render/ │ ├── SKILL.md ← 选型工作流 + 共同原理 + 可复用要点 + 红线 │ ├── README.md │ ├── references/ ← 上游 MV / 动效 / 引擎 / Opus 工作流 / CVE 案例规范 │ ├── templates/ ← MV 引擎 / 转场 / 导出 / 静帧质检 │ ├── examples/ ← 90 秒 CVE 数据纪录片 │ └── assets/preview/ ← 上游与自建案例预览截帧 │ ├── lemo-opuscar/ │ ├── SKILL.md / README.md ← 59 风格选型 + 上游安装 + 定制流程 │ ├── references/ ← 风格索引 / 个人风格规范 │ └── assets/preview/ ← 上游风格图与静帧（LemoLab / CC BY 4.0） │ ├── opus-video-skills/ │ ├── SKILL.md / README.md ← 手绘角色视频 + 动态排版 Reel 接入 │ ├── references/ ← 确定性制作与 QA 合同 │ └── assets/preview/ ← 两套上游 contact sheet │ ├── hyperframes/ │ ├── SKILL.md / README.md ← HTML → MP4 基础设施接入 │ ├── references/ ← composition / CLI / 渲染合同 │ └── assets/preview/ ← Studio 与数据视频预览 │ ├── video-qa-frameproof/ │ ├── SKILL.md / README.md ← 最终视频扫描 / 修复 / baseline 工作流 │ ├── references/ ← 文件与源码感知扫描 / 回归门禁 │ └── assets/preview/ ← Studio 与源码定位预览 ├── web_animation/ ← 原始示例 HTML（历史存档） ├── UI/ ← UI 设计参考图 ├── prompt.md ← Prompt 模板集合 ├── package.json ├── CONTRIBUTING.md └── README.md ``` --- ### 贡献与许可见 [CONTRIBUTING.md](./CONTRIBUTING.md)，欢迎提交新的动画 Skill！ MIT — for educational use only.


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


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


_{此电脑爆红光标双击开演}	_{开始菜单删除警告链}	_{蓝屏修复 WinRE 百分比}	_{根目录导览问号徽章悬念}	_{双窗对比并排资源管理器}	_{右键回收站桌面交互三步}