video-shot-demos
unclecheng-li/ai_animation · skills.sh
Open source Repository Open in the app JSON README (API)
About
Skill publicada por unclecheng-li/ai_animation no skills.sh. Instale com: npx skills add unclecheng-li/ai_animation@video-shot-demos
Details
- Kind
- Agent skills
- Publisher
- unclecheng-li
- Origin
- skillssh
- Category
- ferramentas
- Stars
- 1,456
- Forks
- 111
- Last push
- 2026-10-05T08:52:10Z
- Repository state
- ativo
- Language
- HTML
- License
- MIT
- Added
- 2026-10-07 06:25:09
- Updated
- 2026-10-07 06:25:09
- Origin id
unclecheng-li/ai_animation/video-shot-demos
README
<div align="center"> # 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) [](#贡献与许可) [](#skills-gallery) [](https://agentskills.io) 🌐 **English version**: [`README_EN.md`](https://github.com/unclecheng-li/ai_animation/blob/HEAD/README_EN.md) </div> --- ### 项目简介 本仓库是基于 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 的接入配方，演示页画面层即插即用 <div align="center"> **👇 点击预览图查看各 Skill 详情** </div> <table> <tr> <td width="25%" valign="top" align="center"> <a href="#ppt-animation"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/a6576e08-210b-4fda-867c-c0bd1a847d13" /></a> <br/><a href="#ppt-animation"><strong>ppt-animation</strong></a> <br/><sub>PPT 演示 / 翻页动画</sub> </td> <td width="25%" valign="top" align="center"> <a href="#flowchart"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/90414d79-80a5-47bc-bc5b-ee567160d021" /></a> <br/><a href="#flowchart"><strong>flowchart</strong></a> <br/><sub>流程图 / 概念图 / 原理演示</sub> </td> <td width="25%" valign="top" align="center"> <a href="#network-protocol-viz"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/39d12d3d-3c15-4e83-b2f4-0186fc9e5e2e" /></a> <br/><a href="#network-protocol-viz"><strong>network-protocol-viz</strong></a> <br/><sub>网络协议 / 数据包演示</sub> </td> <td width="25%" valign="top" align="center"> <a href="#dynamic-archify"><img width="2537" height="1440" alt="image" src="https://github.com/user-attachments/assets/61e42d50-1dfb-487a-9e5a-29e956a10e7f" /></a> <br/><a href="#dynamic-archify"><strong>dynamic-archify</strong></a> <br/><sub>动态架构图 / 流程图 / 时序图</sub> </td> </tr> <tr> <td colspan="2" width="50%" valign="top" align="center"> <a href="#scholar-notes"><img width="2534" height="1440" alt="image" src="https://github.com/user-attachments/assets/e7bd4d61-37d3-4c5c-b47a-94114f609aa3" /></a> <br/><a href="#scholar-notes"><strong>scholar-notes</strong></a> <br/><sub>学霸笔记 / 手写笔记本风格</sub> </td> <td colspan="2" valign="top" align="center"> <a href="#card-theater"><img width="2560" height="1440" alt="card-theater" src="https://github.com/user-attachments/assets/51ace25a-fde6-45db-97f5-3c30582fb85f" /></a> <br/><a href="#card-theater"><strong>card-theater</strong></a> <br/><sub>卡片剧场 / 3D 卡片轮播</sub> </td> </tr> <tr> <td colspan="2" valign="top" align="center"> <a href="#phone-ui-demos"><img width="2560" height="1440" alt="phone-ui-demos" src="https://github.com/user-attachments/assets/653d8b46-fc07-43d9-bf36-4899dfc35c7b" /></a> <br/><a href="#phone-ui-demos"><strong>phone-ui-demos</strong></a> <br/><sub>手机系统 UI / 编排录屏动画</sub> </td> <td colspan="2" valign="top" align="center"> <a href="#video-shot-demos"><img width="2560" height="1440" alt="video-shot-demos" src="https://github.com/user-attachments/assets/ee93829f-91c5-48df-925e-342cd2be4557" /></a> <br/><a href="#video-shot-demos"><strong>video-shot-demos</strong></a> <br/><sub>视频分镜演示 / 电影级镜头动画</sub> </td> </tr> <tr> <td colspan="2" valign="top" align="center"> <a href="#stacked-data-cards"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/ac863d4f-0d48-4c05-a0c2-2e28874a1c62" /></a> <br/><a href="#stacked-data-cards"><strong>stacked-data-cards</strong></a> <br/><sub>叠放数据卡 / 时间线论点动画</sub> </td> <td colspan="2" valign="top" align="center"> <a href="#win11-ui-demos"><img width="2560" height="1440" alt="win11-ui-demos" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/main.png" /></a> <br/><a href="#win11-ui-demos"><strong>win11-ui-demos</strong></a> <br/><sub>仿 Win11 系统仿真 / 光标演出动画</sub> </td> </tr> <tr> <td colspan="4" valign="top" align="center"> <a href="#swiss-shot-demos"><img width="2560" height="1440" alt="swiss-shot-demos" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/main.png" /></a> <br/><a href="#swiss-shot-demos"><strong>swiss-shot-demos</strong></a> <br/><sub>瑞士风格图表演示 / 编辑级排版动画</sub> </td> </tr> <tr> <td colspan="4" valign="top" align="center"> <a href="#ui2v-motions"><img width="2560" height="1440" alt="ui2v-motions" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/main.png" /></a> <br/><a href="#ui2v-motions"><strong>ui2v-motions</strong></a> <br/><sub>UI 动效素材库 / 1,262 个 GSAP 动效包</sub> </td> </tr> </table> --- ### Skills Gallery <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `ppt-animation` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation"> <img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/221ac125-02f7-4bac-b179-25085034ff67" /> </a> **分类:** PPT 演示 / 翻页动画 **适用于:** 视频录制、技术科普、教学演示、直播课件——需要"PPT 翻页 + 元素依次缓入"动画效果的场景。 `ppt-animation` 生成 PPT 风格的单文件 HTML 翻页演示。每次翻页后页面内元素依次缓入出现，支持暗色科技风、暖色报纸风、简约白色、赛博朋克红橙、渐变暗色等多套主题。键盘 / 滚轮 / 点击均可翻页，适配全屏播放和录屏。 亮点: - 16:9 宽高比，适配全屏播放与录屏 - 每次翻页后元素依次缓入出现（细化到每行文字） - 5 套内置主题：`dark-tech` / `warm-paper` / `clean-white` / `cyber-red` / `gradient-dark` - 核心概念用图形化元素（图表、流程图、示意图）展示，不依赖外部图片 - 支持以已有模板为基础重构（`以 assets/xxx.html 为模板演示以上内容`） <table> <tr> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md#主题画廊"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/dbc2ddbc-3ec9-4d3e-892c-59e04f629124" /></a><br /><sub><code>dark-tech</code><br />暗色科技风</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md#主题画廊"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/939788e1-3a77-451f-84de-aa10fb2f4c4c" /></a><br /><sub><code>warm-paper</code><br />暖色报纸风</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md#主题画廊"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/30601c48-32c4-42ab-86a3-2699a3e01a58" /></a><br /><sub><code>clean-white</code><br />简约白色</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md#主题画廊"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/8829f50c-2162-4c7b-a8ea-aac458962112" /></a><br /><sub><code>cyber-red</code><br />赛博朋克红橙</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md#主题画廊"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/e5cdadf4-b0fd-41d2-90d8-3f12e63e2ec8" /></a><br /><sub><code>gradient-dark</code><br />渐变暗色</sub></td> </tr> </table> <sub>↑ 5 套主题一览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md#主题画廊"><b>打开完整画廊</b></a> 查看预览与适用场景。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ppt-animation/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `flowchart` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart"> <img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/0cefab32-b583-4342-b25d-39b5b8c4bf83" /> </a> **分类:** 流程图 / 概念图 / 原理演示 **适用于:** 视频科普、技术讲解、PPT 配图——需要动画流程图、概念对比、原理演示的场景。 `flowchart` 生成教育/科普类流程图与原理演示的动画 HTML。暗色科技风格，节点发光、箭头流动、数据粒子效果。不只是 AI 模型——任何概念、流程、对比、交互都能用动画呈现。与 `dynamic-archify` 互补：flowchart 偏教育演示（好看 + 直观），dynamic-archify 偏工程架构（精确 + 可导出）。 亮点: - 7 种图表类型：流程图 / 概念图 / 原理演示 / 时序图 / 对比图 / 时间线 / 系统概览 - AI/ML 模型可视化完整保留（RNN / LSTM / GRU / MLP / Word2Vec / GPU） - 暗色科技风：深色背景 + 蓝/紫/橙渐变节点 + 发光效果 - 连接线流动动画 + 数据粒子效果，页面始终保持动态感 - 支持自动播放 / 手动步进 / hover 高亮三种交互模式 <table> <tr> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/README.md#支持的图表类型"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/4c6fcc04-7b36-4a65-87a1-b6eb01949179" /></a><br /><sub><code>RNN</code><br />RNN流程图</sub></td> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/README.md#支持的图表类型"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/267231a2-2b93-4e55-bfb2-577c2a73927f" /></a><br /><sub><code>LSTM</code><br />LSTM流程图</sub></td> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/README.md#支持的图表类型"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/90645354-939c-444c-becd-2dd2a12b4f6d" /></a><br /><sub><code>GPU</code><br />架构图</sub></td> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/README.md#支持的图表类型"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/80bcb567-21a0-4e49-a51e-6723ace3eb1e" /></a><br /><sub><code>流程图</code><br />攻击链/工作流</sub></td> </tr> </table> <sub>↑ 部分图表预览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/README.md#支持的图表类型"><b>查看完整图表类型列表</b></a>。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/flowchart/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `network-protocol-viz` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz"> <img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/c4ca2b15-08c4-4d2f-9277-cf53369f7884" /> </a> **分类:** 网络协议 / 数据包演示 **适用于:** 网络课程、安全教育、技术分享——需要动态展示协议交互流程、数据包结构、路由转发的场景。 `network-protocol-viz` 生成网络协议工作原理的动态 HTML 可视化页面。根据协议类型自动选择可视化方式：数据包/帧结构用分层矩形块 + hover 字段说明；交互流程用客户端/服务端时序图 + 数据包流动；路由转发用拓扑图 + 路径动画。必须包含播放/暂停/重置控制。 亮点: - 支持 TCP/IP / IPv4 / 以太网帧 / 路由 / 交换机 / DHCP / HTTPS / PPP 等协议 - 三种可视化模式：结构展开 / 时序交互 / 拓扑转发 - 协议层颜色区分：物理层(灰) / 链路层(蓝) / 网络层(绿) / 传输层(橙) / 应用层(紫) - 数据包带发光尾迹沿路径流动 - 安全教育模式：底部自动添加免责声明 <table> <tr> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/README.md#协议列表"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/d662e835-b5ef-4b10-8868-d5cb80e988ee" /> </a><br /><sub><code>TCP</code><br />PPP数据帧结构</sub></td> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/README.md#协议列表"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/8df81e98-25d0-4260-b0b5-79de5ece3a15" /></a><br /><sub><code>IPv4</code><br />IPv4 数据报 3D</sub></td> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/README.md#协议列表"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/467041cb-875f-44e1-b13c-6cab35b89f80" /></a><br /><sub><code>Routing</code><br />HTTPS 应用层加密</sub></td> <td align="center" width="25%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/README.md#协议列表"><img width="2531" height="1440" alt="image" src="https://github.com/user-attachments/assets/9f9c0069-30fc-479b-a40f-dc21c96659e6" /></a><br /><sub><code>HTTPS</code><br />DHCP ACK报文</sub></td> </tr> </table> <sub>↑ 部分协议预览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/README.md#协议列表"><b>查看完整协议列表</b></a>。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/network-protocol-viz/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `dynamic-archify` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify"> <img width="2535" height="1440" alt="image" src="https://github.com/user-attachments/assets/a7d16dc3-a01b-4762-89e5-065ffb144be5" /> </a> **分类:** 动态架构图 / 流程图 / 时序图 / 数据流图 / 状态机 **适用于:** 技术文档、系统设计评审、安全分析、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 变量色彩系统，组件类型语义化（前端/后端/数据库/云/安全/消息队列/外部） <table> <tr> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md#支持的图表类型"><img width="2537" height="1440" alt="image" src="https://github.com/user-attachments/assets/e2ce7b4f-356a-4f99-93d1-bd391eafbea2" /></a><br /><sub><code>architecture</code><br />系统架构图</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md#支持的图表类型"><img width="2533" height="1440" alt="image" src="https://github.com/user-attachments/assets/b2435e86-04b3-4825-83b8-122fd8c6490a" /></a><br /><sub><code>workflow</code><br />工作流图</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md#支持的图表类型"><img width="2535" height="1440" alt="image" src="https://github.com/user-attachments/assets/d8acd7f3-7a93-4c4d-a4b9-a42e6264b909" /></a><br /><sub><code>sequence</code><br />时序图</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md#支持的图表类型"><img width="2537" height="1440" alt="image" src="https://github.com/user-attachments/assets/e400f2a4-2eb6-4be5-ac6b-18c49b353060" /></a><br /><sub><code>dataflow</code><br />数据流图</sub></td> <td align="center" width="20%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md#支持的图表类型"><img width="2536" height="1440" alt="image" src="https://github.com/user-attachments/assets/26dcdd9e-0c93-40a8-a7fc-42032f0e68a7" /></a><br /><sub><code>lifecycle</code><br />状态机</sub></td> </tr> </table> <sub>↑ 5 种图表类型预览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md#支持的图表类型"><b>查看完整说明</b></a>。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/dynamic-archify/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `scholar-notes` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/scholar-notes"> <img width="2538" height="1440" alt="image" src="https://github.com/user-attachments/assets/bcdacd28-6e36-4d72-b493-8aee513630b3" /> </a> **分类:** 学霸笔记 / 手写笔记本风格 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 自检 <table> <tr> <td align="center" width="50%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/scholar-notes/README.md#两种风格"><img width="2540" height="1440" alt="image" src="https://github.com/user-attachments/assets/5eff500a-3653-4a98-bdcf-1896a5721621" /></a><br /><sub><code>Style A</code><br />学霸笔记本</sub></td> <td align="center" width="50%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/scholar-notes/README.md#两种风格"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/45fd6706-4cf1-4206-9159-d921213da1ca" /></a><br /><sub><code>Style B</code><br />手账皮革本</sub></td> </tr> </table> <sub>↑ 两种风格预览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/scholar-notes/README.md#两种风格"><b>查看完整说明</b></a>。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/scholar-notes/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/scholar-notes/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `card-theater` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/card-theater"> <img width="2560" height="1440" alt="card-theater preview" src="https://github.com/user-attachments/assets/834e8f89-abff-4a20-82cf-bdeb1f0c5756" /> </a> **分类:** 侧边栏叙事 + 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 倾斜 - 键盘 ←→ / 鼠标滚轮 / 点击卡片，多种导航方式 <table> <tr> <td align="center" width="20%"><img width="2526" height="1440" alt="scroll-3d-tilt" src="https://github.com/user-attachments/assets/4191ddf3-7b9d-4f35-9ed3-ad4162da5c12" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="apple-aurora-track" src="https://github.com/user-attachments/assets/09b2d9bc-c3a1-4914-9fb5-e9315cd4986a" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="coverflow-classic" src="https://github.com/user-attachments/assets/d7ac9061-43b1-4f81-8ba7-bf4892015abe" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="coverflow-watermark" src="https://github.com/user-attachments/assets/da0c020b-889a-4453-ba86-9b722442bbfc" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="coverflow-focus" src="https://github.com/user-attachments/assets/ac9722fd-74e2-4cc9-b379-3223afd4063b" /></td> </tr> <tr> <td align="center"><sub><code>scroll-3d-tilt</code><br />滚动 3D 倾斜</sub></td> <td align="center"><sub><code>apple-aurora-track</code><br />Apple 极光轨道</sub></td> <td align="center"><sub><code>coverflow-classic</code><br />经典 Coverflow</sub></td> <td align="center"><sub><code>coverflow-watermark</code><br />水印图标版</sub></td> <td align="center"><sub><code>coverflow-focus</code><br />Focus 展开版</sub></td> </tr> </table> <sub>↑ 5 种模板预览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/card-theater/README.md#5-种模板"><b>查看完整说明</b></a>。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/card-theater/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/card-theater/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `phone-ui-demos` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/phone-ui-demos"> <img width="2560" height="1440" alt="phone-ui-demos preview" src="https://github.com/user-attachments/assets/653d8b46-fc07-43d9-bf36-4899dfc35c7b" /> </a> **分类:** 手机系统 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 合成，双击离线可跑 <table> <tr> <td align="center" width="16.6%"><img width="2560" height="1440" alt="锁屏通知" src="https://github.com/user-attachments/assets/653d8b46-fc07-43d9-bf36-4899dfc35c7b" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="App 打开转场" src="https://github.com/user-attachments/assets/5140d795-191d-4cab-a256-15b7fc6d02da" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="苏格拉底对话" src="https://github.com/user-attachments/assets/4fbda860-93f3-4e0d-9fbe-4af9aeea6845" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="知识星云下钻" src="https://github.com/user-attachments/assets/84922771-761b-4ef2-bf3d-f76ec041ea79" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="横屏仪表盘" src="https://github.com/user-attachments/assets/8cdc8cfc-68e8-40d1-9c85-b49c90678cb5" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="锁屏熄屏收尾" src="https://github.com/user-attachments/assets/eea3d8d7-70e1-4586-9f90-bcf281d443f5" /></td> </tr> <tr> <td align="center"><sub><code>锁屏通知</code><br />手机 3D 登台</sub></td> <td align="center"><sub><code>App 打开</code><br />标志性 morph 转场</sub></td> <td align="center"><sub><code>苏格拉底对话</code><br />盖章 + 手机震动</sub></td> <td align="center"><sub><code>知识星云</code><br />多级下钻图谱</sub></td> <td align="center"><sub><code>横屏仪表盘</code><br />rz:-90 转横</sub></td> <td align="center"><sub><code>熄屏收尾</code><br />3D 旋走落幕</sub></td> </tr> </table> <sub>↑ 8 镜头中的 6 个系统场景 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/phone-ui-demos/README.md"><b>打开完整组件库与规范</b></a>（8 个成片样板可直接运行）。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/phone-ui-demos/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/phone-ui-demos/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `video-shot-demos` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/video-shot-demos"> <img width="2560" height="1440" alt="video-shot-demos preview" src="https://github.com/user-attachments/assets/ee93829f-91c5-48df-925e-342cd2be4557" /> </a> **分类:** 视频分镜演示 / 电影级镜头动画 **适用于:** 视频配套演示动画、录屏成片、技术实测复盘、产品发布可视化——需要"一个镜头一个 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 次出场（中段快闪连切立绘 + 结尾定场），重点页雪莉吐槽→安安接茬双人同框 - 字幕条逐句对齐口播稿，关键词高亮；数据角注出处，跨页比分连续滚动 - 无头截图质检：虚拟时钟快进到任意毫秒截帧，逐张排查重叠遮挡 / 动画穿帮 <table> <tr> <td align="center" width="20%"><img width="2560" height="1440" alt="复古报纸头条" src="https://github.com/user-attachments/assets/ee93829f-91c5-48df-925e-342cd2be4557" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="嘉年华老虎机" src="https://github.com/user-attachments/assets/cce72cdc-b63b-4c2e-ac90-cd25defff624" /></td> <td align="center" width="20%"><img width="2560" height="1437" alt="像素平台跳跃" src="https://github.com/user-attachments/assets/1724eb62-98a6-488c-9353-9229d8cfbe35" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="审讯室软木板" src="https://github.com/user-attachments/assets/c2bce877-db80-44a9-993a-897432c58ae1" /></td> <td align="center" width="20%"><img width="2560" height="1440" alt="机场安检" src="https://github.com/user-attachments/assets/6906eeeb-e202-46cb-a3a2-b51d6eb9137e" /></td> </tr> <tr> <td align="center"><sub><code>复古报纸头条</code><br />震撼数字宣告</sub></td> <td align="center"><sub><code>嘉年华老虎机</code><br />★镜头推进典范</sub></td> <td align="center"><sub><code>像素平台跳跃</code><br />★镜头推进典范</sub></td> <td align="center"><sub><code>审讯室软木板</code><br />证据链追查</sub></td> <td align="center"><sub><code>机场安检</code><br />拦截与合规</sub></td> </tr> </table> <sub>↑ 5 / 40 种风格示例（第一辑）— <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/video-shot-demos/README.md"><b>打开完整风格库</b></a>（两套实例共 40 个成片页面可直接运行）。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/video-shot-demos/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/video-shot-demos/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `stacked-data-cards` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards"> <img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/76ad63cf-e2b7-4153-b21e-cd19c3387c77" /> </a> **分类:** 叠放数据卡 / 时间线论点动画 **适用于:** 视频中的数据论证段落、研究结论展示、观点陈列、反直觉点揭示——需要"卡片即论点、数据即证据、自动播放对齐口播"的场景。 `stacked-data-cards` 生成叠放式数据论点卡的自动播放动画 HTML。深色舞台中央，白色数据卡一张张从底部弹入；新卡弹入时旧卡向左叠放成缩小、倾斜的牌堆。卡内数据组件（折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组）按毫秒级时间线级联入场，整段时长精确对齐口播秒数，结尾可整副牌堆滑出衔接下一镜头。零依赖、零交互，全屏录屏即成片。 亮点: - 三态卡片机制：`upcoming → active → stacked`，旧卡左叠成牌堆，论点之间有"累积感" - 毫秒级时间线：`TIMING` 常量表对齐口播句读，每卡驻留时长可调，末个动画结束预留 1.5s 阅读时间 - 数据组件库：折线 trim-paths 描边 / count-up 数字滚动 / 环形仪表 / 对比条 / 行内迷你条形表格 / 图标卡组 / 金句横幅 / 角注 - WebAudio 合成低音 thud 点缀关键揭示时刻，零音频文件，自动播放被拦截时静默失败 - 主题变量化：改 `--accent` 一个变量即可整体换色（橙红 / 蓝 / 绿 / 紫） - 零依赖单文件：无 CDN、无外部图片，双击离线可跑 <table> <tr> <td align="center" width="33%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards/README.md"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/40cd0e6e-14f2-4168-ab8c-3b645d66eb58" /></a><br /><sub><code>template</code><br />起步骨架</sub></td> <td align="center" width="33%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards/README.md"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/747cbddd-97ea-48e5-9d9c-d1f732c3b099" /></a><br /><sub><code>实例 A</code><br />橙红 · 趋势论证</sub></td> <td align="center" width="33%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards/README.md"><img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/781f3c90-3fda-4a18-b84c-84d3dd9d3a41" /></a><br /><sub><code>实例 B</code><br />蓝紫 · 数据揭示</sub></td> </tr> </table> <sub>↑ 起步骨架 + 2 个成片实例预览 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards/README.md"><b>查看完整说明</b></a>（实例可直接运行）。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/stacked-data-cards/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `win11-ui-demos` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/win11-ui-demos"> <img width="2560" height="1440" alt="win11-ui-demos preview" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/main.png" /> </a> **分类:** 仿 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 吐槽（大肥鱼）按情绪锚点登场；每页带"界面为演示还原"声明角注 <table> <tr> <td align="center" width="16.6%"><img width="2560" height="1440" alt="此电脑爆红" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/shot-01.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="开始菜单" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/shot-04.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="蓝屏自动修复" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/shot-05.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="根目录问号徽章" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/shot-15.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="双窗对比" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/shot-17.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="右键回收站" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/win11-ui-demos/assets/preview/shot-19.png" /></td> </tr> <tr> <td align="center"><sub><code>此电脑爆红</code><br />光标双击开演</sub></td> <td align="center"><sub><code>开始菜单</code><br />删除警告链</sub></td> <td align="center"><sub><code>蓝屏修复</code><br />WinRE 百分比</sub></td> <td align="center"><sub><code>根目录导览</code><br />问号徽章悬念</sub></td> <td align="center"><sub><code>双窗对比</code><br />并排资源管理器</sub></td> <td align="center"><sub><code>右键回收站</code><br />桌面交互三步</sub></td> </tr> </table> <sub>↑ 6 / 21 个仿真镜头示例 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/win11-ui-demos/README.md"><b>打开完整套件规范</b></a>（21 个成片样板可直接运行）。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/win11-ui-demos/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/win11-ui-demos/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `swiss-shot-demos` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/swiss-shot-demos"> <img width="2560" height="1440" alt="swiss-shot-demos preview" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/main.png" /> </a> **分类:** 瑞士风格图表演示 / 编辑级排版动画 **适用于:** 知识教程视频、技术复盘、产品发布、安全科普——需要"纸底墨字 + 匹配内容的可视化图表"的克制美学演示场景；也专治 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 时刻=口播句绝对时间差、数字白名单不编造、不伪造终端回显 <table> <tr> <td align="center" width="16.6%"><img width="2560" height="1440" alt="AI 循环环" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/shot-01.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="翻车时间线" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/shot-05.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="点阵对撞" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/shot-06.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="嵌套剖视" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/shot-12.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="双列对照" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/shot-40.png" /></td> <td align="center" width="16.6%"><img width="2560" height="1440" alt="热力矩阵" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/swiss-shot-demos/assets/preview/shot-49.png" /></td> </tr> <tr> <td align="center"><sub><code>AI 循环环</code><br />shot-0-1 五幕范本</sub></td> <td align="center"><sub><code>恶化时间线</code><br />四步逐级变深</sub></td> <td align="center"><sub><code>点阵对撞</code><br />15 → 50+ 翻倍</sub></td> <td align="center"><sub><code>嵌套剖视</code><br />宿主机套客户机</sub></td> <td align="center"><sub><code>双列对照</code><br />CTF vs 靶场</sub></td> <td align="center"><sub><code>热力矩阵</code><br />灰阶即数据</sub></td> </tr> </table> <sub>↑ 6 种图表词汇示例 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/swiss-shot-demos/README.md"><b>打开完整图表词汇表</b></a>（68 个成片样板可直接运行）。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/swiss-shot-demos/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/swiss-shot-demos/SKILL.md) --- <!-- ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ --> #### `ui2v-motions` <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions"> <img width="2560" height="1440" alt="ui2v-motions preview" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/main.png" /> </a> **分类:** 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 与双语文档随包 <table> <tr> <td align="center" width="16.6%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/hero-badge-earn/index.html"><img width="2560" height="1440" alt="badge earn" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/shot-badge.png" /></a></td> <td align="center" width="16.6%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/agent-immune-codex-workflow/index.html"><img width="2560" height="1440" alt="workflow" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/main.png" /></a></td> <td align="center" width="16.6%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/agent-immune-screenflow/index.html"><img width="2560" height="1440" alt="screenflow" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/shot-screenflow.png" /></a></td> <td align="center" width="16.6%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/claw-game-release/index.html"><img width="2560" height="1440" alt="game release" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/shot-release.png" /></a></td> <td align="center" width="16.6%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/hero-deploy-pipeline/index.html"><img width="2560" height="1440" alt="deploy pipeline" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/shot-pipeline.png" /></a></td> <td align="center" width="16.6%"><a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/01_动效库/itelmn/hero-chat-bubbles/index.html"><img width="2560" height="1440" alt="chat bubbles" src="https://raw.githubusercontent.com/unclecheng-li/ai_animation/HEAD/skills/ui2v-motions/assets-preview/shot-chat.png" /></a></td> </tr> <tr> <td align="center"><sub><code>hero-badge-earn</code><br />徽章赢得动画</sub></td> <td align="center"><sub><code>codex-workflow</code><br />工作流编排</sub></td> <td align="center"><sub><code>agent-screenflow</code><br />屏幕流演示</sub></td> <td align="center"><sub><code>claw-game-release</code><br />发布封面动画</sub></td> <td align="center"><sub><code>hero-deploy-pipeline</code><br />部署管线流动</sub></td> <td align="center"><sub><code>hero-chat-bubbles</code><br />聊天气泡编排</sub></td> </tr> </table> <sub>↑ 6 / 1,262 个动效包截帧 — <a href="https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/README.md"><b>打开选型索引与接入配方</b></a>。</sub> Links: [README](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/README.md) · [SKILL.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/skills/ui2v-motions/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 ``` > **默认安装 `main` 分支最新版本。** CLI 会从源码树直接读取每个 Skill 的最新 `SKILL.md`。 #### Option B · Git Clone ```bash git clone https://github.com/Unclecheng-li/AI_Animation.git # 将 skills/<skill-name> 复制到你的 Agent 技能目录 ``` #### Option C · GitHub Releases 前往 [Releases 页面](https://github.com/Unclecheng-li/AI_Animation/releases) 下载 `.zip`，解压后复制到 Agent 技能目录。 ### 兼容性 | 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 | ✅ 兼容 | > `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/ ← 截帧预览图 ├── web_animation/ ← 原始示例 HTML（历史存档） ├── UI/ ← UI 设计参考图 ├── prompt.md ← Prompt 模板集合 ├── package.json ├── CONTRIBUTING.md └── README.md ``` --- ### 贡献与许可 见 [CONTRIBUTING.md](https://github.com/unclecheng-li/ai_animation/blob/HEAD/CONTRIBUTING.md)，欢迎提交新的动画 Skill！ MIT — for educational use only.