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 流程图 / 概念图 / 原理演示