unclecheng-li/ai_animation

一套用 AI 生成炫酷 HTML アニメーション的 Agent Skills 集合 ·AIでかっこいいHTMLアニメーションを生成するためのスキルのコレクション

🌐 英語版: 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.

---

项目简介

本仓库是基于 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 回归门禁

ppt-animation PPT 演示 / 翻页动画

flowchart 流程图 / 概念图 / 原理演示