项目概览

AI Animation 是一个由 Unclecheng 开发的 AI Prompt 模板集合项目，专注于用 AI 生成炫酷的 HTML 动画网页。项目包含分类整理的 Prompt 模板、多种预置 HTML 动画示例（技术可视化、PPT 模板、3D 效果等），配合 Trae、Claude、GPT-4o 等 AI 工具使用。项目定位为 AI 辅助内容创作与教育可视化，目标用户包括教育者、内容创作者和技术博主。核心能力包括技术概念可视化、PPT 风格模板、3D 效果演示、UI 参考重构以及纯前端零依赖实现。所有动画示例基于 HTML5、CSS3 和原生 JavaScript，不依赖任何外部库。项目提供 40+ 个预置 HTML 动画文件，涵盖网络协议、AI/ML 概念、PPT 模板等类别，可直接在浏览器中打开使用。项目采用 MIT 协议，但明确仅限学习研究，禁止商业用途。

解决什么问题

项目解决的核心矛盾是：领域专家不懂动画制作，动画制作专家不懂技术内容。传统 PPT/文档中的架构图、流程图是静态的，无法展示数据流动过程、状态变化、时序关系，受众理解成本高。专业动画工具如 After Effects、Three.js 学习周期长、门槛高。直接让 AI 生成 HTML 动画时，输出质量参差不齐，缺少好的 Prompt 模板作为质量保障。教育场景中，网络协议（TCP、DHCP、HTTP）需要展示数据包流动，神经网络（RNN、LSTM、GRU）需要展示信息传递过程，这些都不是标准动画工具的擅长领域。

工作方式

项目本质是把“如何用 AI 生成高质量 HTML 动画”的隐性知识，显性化为可复用的 Prompt 模板加示例文件。核心文件是 prompt.md，包含动画效果、3D 可视化、PPT 风格演示、UI 美化等类别的 Prompt 模板。使用流程为：用户从 prompt.md 选择合适的 Prompt 模板，将 Prompt 发送给 AI 工具（推荐 Trae、Claude、GPT-4o），AI 根据 Prompt 生成完整的 HTML 文件，用户在浏览器中打开、预览、修改。所有动画示例的技术栈完全一致，采用 HTML5 结构、CSS3（@keyframes 帧动画、animation/transition 过渡动画、transform 3d/perspective 3D 效果、Grid/Flexbox 布局、CSS 变量）和原生 JavaScript（交互控制、动画状态管理、滚轮翻页逻辑），不依赖任何外部库。项目还提供 UI/ 目录下的 6 套设计参考图，可配合 Prompt 实现“看图生成页面”。

核心能力

技术概念可视化：RNN、LSTM、GPU、TCP/IP 等抽象概念的动画演示
个 PPT 风格 HTML 模板（基础版 5 个 + 进阶版 27 个）
CSS 3D Transform 驱动的立体动画效果
套 UI 设计参考图及对应 Prompt，支持 UI 参考重构
纯前端零依赖，HTML5 + CSS3 + JavaScript，无外部库
- 个预置 HTML 动画文件可直接在浏览器中打开使用
网络协议动画覆盖 TCP、DHCP、HTTP、IPv4、PPP、以太网帧等
AI/ML 概念演示覆盖 RNN、LSTM、Word2Vec、GPU、MLP、GRU
方向键或鼠标滚轮翻页的通用交互方式
离线可用，生成后无需网络

使用前需要了解

AI 整理 · 本地测试，未经人工复核；依据历史报告节选，不代表当前产品状态。
项目采用 MIT 协议，但明确仅限学习研究，禁止商业用途。项目不成熟，仅 11 个 commit、1 个贡献者，无正式版本标签，无 Git Tag/Release。部分 Prompt 模板描述不够精确，质量参差不齐。无自动化流程，需要手动复制 Prompt 到 AI 工具。浏览器兼容性未验证，未声明具体的兼容性矩阵。中文文档为主，国际化支持不足。不适合生产级 UI，仅供学习或演示。不适合需要复杂交互的应用（如数据仪表盘）。Prompt 到结果的映射不稳定，不同 AI 模型输出不同。没有组件化或复用机制，每次从头生成。项目本身不生成动画，需要用户将 Prompt 粘贴到 AI 工具中由 AI 生成。web_animation/ 目录下的 HTML 文件是作者手动创建的示例，不是 AI 生成的。

README

在 GitHub 阅读 ↗

AI Animation Skills

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

License: MIT（请在原文查看） PRs welcome（请在原文查看） Skills count（请在原文查看） Spec（请在原文查看）

🌐 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 详情

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

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	✅ 兼容

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 镜头成片实例 ├── web_animation/ ← 原始示例 HTML（历史存档） ├── UI/ ← UI 设计参考图 ├── prompt.md ← Prompt 模板集合 ├── package.json ├── CONTRIBUTING.md └── README.md


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


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


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

AI Animation

项目概览

解决什么问题

工作方式

核心能力

使用前需要了解

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

兼容性

快速上手

目录结构

贡献与许可

项目概览

解决什么问题

工作方式

核心能力

使用前需要了解

README

AI Animation Skills

项目简介

来源与相关链接

相关项目

HyperFrames 提示词工程

Voicebox

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)