{ "markdown": "
\n \n# AI Animation Skills\n\n**一套用 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**\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-blue?style=flat-square)](./LICENSE)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?style=flat-square)](#贡献与许可)\n[![Skills count](https://img.shields.io/badge/Skills-12-orange?style=flat-square)](#skills-gallery)\n[![Spec](https://img.shields.io/badge/Spec-SKILL.md-black?style=flat-square)](https://agentskills.io)\n\n🌐 **English version**: [`README_EN.md`](README_EN.md)\n\n
\n\n---\n\n### 项目简介\n\n本仓库是基于 WorkBuddy / Claude Code / Cursor 等 AI Agent 的**动效 Skill 集合**。每个 Skill 是一个自包含文件夹，包含 `SKILL.md`（Agent 执行指令）、`README.md`（人类文档）、`references/`（Prompt 参考）和 `assets/`（模板 HTML）。安装后，AI Agent 会根据你的描述自动激活对应 Skill，生成完整的单文件 HTML 动画。\n\n一句话生成：\n- 📊 **PPT 风格演示** — 科普、技术讲解、视频配套演示\n- 📈 **流程图 / 原理演示** — 流程图、概念图、对比图、时序图、AI 模型可视化等\n- 🌐 **网络协议可视化** — TCP/IP、IPv4、以太帧、路由、DHCP 等\n- 🏗️ **动态架构图** — 系统架构、流程图、时序图、数据流图、状态机，带流动动画 + 多格式导出\n- 📝 **学霸笔记** — 手写笔记本风格的精美 HTML 学习笔记，两种模板风格\n- 🎴 **卡片剧场** — 侧边栏叙事 + 3D 卡片轮播，协议流程 / 产品特性 / 分步讲解的叙事感演示\n- 🎬 **视频分镜演示** — 电影级\"一个镜头一个 HTML\"演示动画：29 种风格轮换、镜头推拉、WebAudio 音效、角色表情吐槽，全屏录屏即成片\n- 📱 **手机系统 UI 演示** — 一台\"真手机\"的电影化编排录屏：锁屏通知、聊天、设置页、App 界面逐镜头呈现，HyperOS 级手感动效 + 3D 姿态手机演员\n- 🗂️ **叠放数据卡** — 论点卡从底部依次弹入、旧卡左叠成牌堆：折线描边 / 数字滚动 / 环形仪表按毫秒级时间线级联入场，自动播放对齐口播，录屏即成片\n- 🖥️ **仿 Win11 系统仿真** — 1:1 还原真电脑：资源管理器、开始菜单、系统弹窗、蓝屏修复逐镜头呈现，光标演出引导操作 + 教学标记层，全屏录屏即成片\n- 📐 **瑞士风格图表演示** — 纸底墨字发丝线的编辑部级排版：每页一张匹配内容的可视化图表（时间线/循环环/流程链/热力矩阵…20 种词汇），唯一强调橙，一镜一 HTML\n- 🎞️ **UI2V 动效库** — 1,262 个 GSAP 动效包全量离线镜像（ui2v.com/motions，641MB）：按镜头用途查件的索引 + paused 时间轴挂 cue 的接入配方，演示页画面层即插即用\n\n
\n\n**👇 点击预览图查看各 Skill 详情**\n\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\"image\"\n
ppt-animation\n
PPT 演示 / 翻页动画\n		\n\"image\"\n
flowchart\n
流程图 / 概念图 / 原理演示\n		\n\"image\"\n
network-protocol-viz\n
网络协议 / 数据包演示\n		\n\"image\"\n
dynamic-archify\n
动态架构图 / 流程图 / 时序图\n
\n\"image\"\n
scholar-notes\n
学霸笔记 / 手写笔记本风格\n		\n\"card-theater\"\n
card-theater\n
卡片剧场 / 3D 卡片轮播\n
\n\"phone-ui-demos\"\n
phone-ui-demos\n
手机系统 UI / 编排录屏动画\n		\n\"video-shot-demos\"\n
video-shot-demos\n
视频分镜演示 / 电影级镜头动画\n
\n\"image\"\n
stacked-data-cards\n
叠放数据卡 / 时间线论点动画\n		\n\"win11-ui-demos\"\n
win11-ui-demos\n
仿 Win11 系统仿真 / 光标演出动画\n
\n\"swiss-shot-demos\"\n
swiss-shot-demos\n
瑞士风格图表演示 / 编辑级排版动画\n
\n\"ui2v-motions\"\n
ui2v-motions\n
UI 动效素材库 / 1,262 个 GSAP 动效包\n
\n\n---\n\n### Skills Gallery\n\n\n\n#### `ppt-animation`\n\n\n\"image\"\n\n\n**分类:** PPT 演示 / 翻页动画\n**适用于:** 视频录制、技术科普、教学演示、直播课件——需要\"PPT 翻页 + 元素依次缓入\"动画效果的场景。\n\n`ppt-animation` 生成 PPT 风格的单文件 HTML 翻页演示。每次翻页后页面内元素依次缓入出现，支持暗色科技风、暖色报纸风、简约白色、赛博朋克红橙、渐变暗色等多套主题。键盘 / 滚轮 / 点击均可翻页，适配全屏播放和录屏。\n\n亮点:\n- 16:9 宽高比，适配全屏播放与录屏\n- 每次翻页后元素依次缓入出现（细化到每行文字）\n- 5 套内置主题：`dark-tech` / `warm-paper` / `clean-white` / `cyber-red` / `gradient-dark`\n- 核心概念用图形化元素（图表、流程图、示意图）展示，不依赖外部图片\n- 支持以已有模板为基础重构（`以 assets/xxx.html 为模板演示以上内容`）\n\n\n\n\n\n\n\n\n\n
\"image\"
dark-tech
暗色科技风		\"image\"
warm-paper
暖色报纸风		\"image\"
clean-white
简约白色		\"image\"
cyber-red
赛博朋克红橙		\"image\"
gradient-dark
渐变暗色
\n\n↑ 5 套主题一览 — 打开完整画廊 查看预览与适用场景。\n\nLinks: [README](./skills/ppt-animation/README.md) · [SKILL.md](./skills/ppt-animation/SKILL.md)\n\n---\n\n\n\n#### `flowchart`\n\n\n\"image\"\n\n\n**分类:** 流程图 / 概念图 / 原理演示\n**适用于:** 视频科普、技术讲解、PPT 配图——需要动画流程图、概念对比、原理演示的场景。\n\n`flowchart` 生成教育/科普类流程图与原理演示的动画 HTML。暗色科技风格，节点发光、箭头流动、数据粒子效果。不只是 AI 模型——任何概念、流程、对比、交互都能用动画呈现。与 `dynamic-archify` 互补：flowchart 偏教育演示（好看 + 直观），dynamic-archify 偏工程架构（精确 + 可导出）。\n\n亮点:\n- 7 种图表类型：流程图 / 概念图 / 原理演示 / 时序图 / 对比图 / 时间线 / 系统概览\n- AI/ML 模型可视化完整保留（RNN / LSTM / GRU / MLP / Word2Vec / GPU）\n- 暗色科技风：深色背景 + 蓝/紫/橙渐变节点 + 发光效果\n- 连接线流动动画 + 数据粒子效果，页面始终保持动态感\n- 支持自动播放 / 手动步进 / hover 高亮三种交互模式\n\n\n\n\n\n\n\n\n
\"image\"
RNN
RNN流程图		\"image\"
LSTM
LSTM流程图		\"image\"
GPU
架构图		\"image\"
流程图
攻击链/工作流
\n\n↑ 部分图表预览 — 查看完整图表类型列表。\n\nLinks: [README](./skills/flowchart/README.md) · [SKILL.md](./skills/flowchart/SKILL.md)\n\n---\n\n\n\n#### `network-protocol-viz`\n\n\n\"image\"\n\n\n\n**分类:** 网络协议 / 数据包演示\n**适用于:** 网络课程、安全教育、技术分享——需要动态展示协议交互流程、数据包结构、路由转发的场景。\n\n`network-protocol-viz` 生成网络协议工作原理的动态 HTML 可视化页面。根据协议类型自动选择可视化方式：数据包/帧结构用分层矩形块 + hover 字段说明；交互流程用客户端/服务端时序图 + 数据包流动；路由转发用拓扑图 + 路径动画。必须包含播放/暂停/重置控制。\n\n亮点:\n- 支持 TCP/IP / IPv4 / 以太网帧 / 路由 / 交换机 / DHCP / HTTPS / PPP 等协议\n- 三种可视化模式：结构展开 / 时序交互 / 拓扑转发\n- 协议层颜色区分：物理层(灰) / 链路层(蓝) / 网络层(绿) / 传输层(橙) / 应用层(紫)\n- 数据包带发光尾迹沿路径流动\n- 安全教育模式：底部自动添加免责声明\n\n\n\n\n\n\n\n\n
\"image\"\n
TCP
PPP数据帧结构		\"image\"
IPv4
IPv4 数据报 3D		\"image\"
Routing
HTTPS 应用层加密		\"image\"
HTTPS
DHCP ACK报文
\n\n↑ 部分协议预览 — 查看完整协议列表。\n\nLinks: [README](./skills/network-protocol-viz/README.md) · [SKILL.md](./skills/network-protocol-viz/SKILL.md)\n\n---\n\n\n\n#### `dynamic-archify`\n\n\n\"image\"\n\n\n**分类:** 动态架构图 / 流程图 / 时序图 / 数据流图 / 状态机\n**适用于:** 技术文档、系统设计评审、安全分析、CI/CD 可视化——需要专业级技术图表（带流动动画 + 多格式导出）的场景。\n\n`dynamic-archify` 生成专业级技术图表的单文件 HTML，包含内联 SVG、暗/亮主题切换、连接线流动动画、沿路径移动的发光粒子。接受自然语言描述或粘贴的 Mermaid 代码，从零开始布局。支持 5 种图表类型：架构图、工作流图、时序图、数据流图、状态机。内置 Node.js 渲染器 + JSON Schema 验证，也支持无 Node 环境的手动 SVG 模式。\n\n亮点:\n- 5 种图表类型：`architecture` / `workflow` / `sequence` / `dataflow` / `lifecycle`\n- 自动流动动画：CSS `stroke-dasharray` 流动 + SVG 粒子沿路径移动，按连接类型自动调速\n- 暗/亮主题切换（持久化到 `localStorage`，尊重 `prefers-color-scheme`）\n- 一键导出：PNG / JPEG / WebP / SVG / 动画 GIF / WebM 视频\n- 接受 Mermaid 代码输入，自动映射到对应图表类型并重新布局\n- CSS 变量色彩系统，组件类型语义化（前端/后端/数据库/云/安全/消息队列/外部）\n\n\n\n\n\n\n\n\n\n
\"image\"
architecture
系统架构图		\"image\"
workflow
工作流图		\"image\"
sequence
时序图		\"image\"
dataflow
数据流图		\"image\"
lifecycle
状态机
\n\n↑ 5 种图表类型预览 — 查看完整说明。\n\nLinks: [README](./skills/dynamic-archify/README.md) · [SKILL.md](./skills/dynamic-archify/SKILL.md)\n\n---\n\n\n\n#### `scholar-notes`\n\n\n\"image\"\n\n\n**分类:** 学霸笔记 / 手写笔记本风格 HTML\n**适用于:** 技术笔记、漏洞分析、安全研究记录、知识点总结、课堂笔记——需要将技术内容转化为视觉精美的手写笔记本风格网页的场景。\n\n`scholar-notes` 生成手写笔记本风格的单文件 HTML 学习笔记。两种模板风格：Style A（米黄横线纸 + 螺旋装订孔 + 胶带/咖啡渍装饰，适合通用技术笔记）和 Style B（皮革封面 + 金属环装订 + 翻页交互，适合攻击链分析、漏洞笔记）。内置丰富的组件系统：流程图、对比框、攻击链、代码块、便签等。所有图标使用平面 UI 库（Lucide / Remix Icon），禁止 emoji。\n\n亮点:\n- 两种模板风格：`Style A`（学霸笔记本 / 单页滚动）/ `Style B`（手账皮革本 / 翻页交互）\n- 手写感字体：Kalam + Patrick Hand + Zeyada / Ma Shan Zheng\n- 丰富组件：流程图 / 对比框 / 攻击链 / 代码块 / 便签 / 警告框 / 概念卡片\n- 颜色编码系统：红=警告/强调、蓝=信息/术语、绿=安全/正面、紫=技术/代码\n- 严格质量约束：禁止 emoji、内容高度适配封面、checklist 自检\n\n\n\n\n\n\n
\"image\"
Style A
学霸笔记本		\"image\"
Style B
手账皮革本
\n\n↑ 两种风格预览 — 查看完整说明。\n\nLinks: [README](./skills/scholar-notes/README.md) · [SKILL.md](./skills/scholar-notes/SKILL.md)\n\n---\n\n\n\n#### `card-theater`\n\n\n\"card-theater\n\n\n**分类:** 侧边栏叙事 + 3D 卡片轮播演示\n**适用于:** 协议流程演示、产品特性展示、分步讲解——需要\"侧边栏解说 + 3D 卡片轮播 + 模式切换\"的叙事型演示场景。\n\n`card-theater` 生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML。左侧叙事栏逐步解说，右侧 3D 玻璃拟态卡片以 Coverflow / 轨道 / 滚动方式排列。支持模式切换（动态插入/移除卡片）、荧光笔高亮、水印图标等效果。内置 5 种模板：滚动 3D 倾斜、Apple 极光轨道、经典 Coverflow、水印图标版、Focus 展开版。\n\n亮点:\n- 5 种内置模板：`scroll-3d-tilt` / `apple-aurora-track` / `coverflow-classic` / `coverflow-watermark` / `coverflow-focus`\n- 侧边栏叙事：标题 + 解说文字 + 关键要点，随卡片切换同步更新\n- 模式切换：动态插入/移除卡片（如传输模式 ↔ 隧道模式），带过渡动画\n- 荧光笔高亮：选中卡片的关键字段播放划线动画\n- 3D 交互：Coverflow 旋转 / 轨道平移 / 滚动翻页 / 鼠标 3D 倾斜\n- 键盘 ←→ / 鼠标滚轮 / 点击卡片，多种导航方式\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"scroll-3d-tilt\"\"apple-aurora-track\"\"coverflow-classic\"\"coverflow-watermark\"\"coverflow-focus\"
scroll-3d-tilt
滚动 3D 倾斜		apple-aurora-track
Apple 极光轨道		coverflow-classic
经典 Coverflow		coverflow-watermark
水印图标版		coverflow-focus
Focus 展开版
\n\n↑ 5 种模板预览 — 查看完整说明。\n\nLinks: [README](./skills/card-theater/README.md) · [SKILL.md](./skills/card-theater/SKILL.md)\n\n---\n\n\n\n#### `phone-ui-demos`\n\n\n\"phone-ui-demos\n\n\n**分类:** 手机系统 UI / 编排录屏动画\n**适用于:** 产品功能演示、App 上手引导、课程科普、品牌视频——需要\"看起来像真手机精心编排录屏\"的电影化演示场景。\n\n`phone-ui-demos` 把任意内容做成一辑手机系统 UI 风格的网页动画：舞台中央一台全细节真手机（挖孔/侧键/天线带/屏幕反光/状态栏），内容通过锁屏通知、聊天、设置页、控制中心、App 界面等系统组件逐镜头呈现。全系列统一 HyperOS/MIUI 设计语言（大圆角 + 毛玻璃 + 动态壁纸渐变），手机是有 3D 姿态的演员——摇摆、前倾、横屏、盖章震动、熄屏旋走。内置 8 个成片级镜头样板（AI 私教「可学」产品演示）+ 起步骨架。\n\n亮点:\n- phoneTo 3D 姿态系统：六自由度控制一台\"活手机\"，每镜头 ≥2 次 3D 动作；标志性 App 打开 morph 转场（图标精确位变 → 铺满屏幕）\n- 背景层大字幕：口播文案在手机两侧做 58px+ 渐变大字，11 种入场效果（流光上浮/逐字波浪/砸落/翻转…）每镜轮换\n- 内容转译映射：论点→锁屏通知、对话→聊天气泡（打字指示器）、数据→圆环滑条、流程→设置列表、对比→ActionSheet、总结→熄屏品牌卡\n- 镜头连续性铁律：整辑统一氛围、首镜头才登台、后续镜头初始姿态接续上镜余韵——8 个独立 HTML 像一镜到底的录屏\n- 电影化播放器：虚拟时钟黑场起手 / HUD 分段进度点击跳镜头 / ←→ 切镜头 / 默认静音喇叭开关\n- 零依赖单文件：图标全内联 SVG、壁纸全 CSS 渐变、音效 WebAudio 合成，双击离线可跑\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"锁屏通知\"\"App\"苏格拉底对话\"\"知识星云下钻\"\"横屏仪表盘\"\"锁屏熄屏收尾\"
锁屏通知
手机 3D 登台		App 打开
标志性 morph 转场		苏格拉底对话
盖章 + 手机震动		知识星云
多级下钻图谱		横屏仪表盘
rz:-90 转横		熄屏收尾
3D 旋走落幕
\n\n↑ 8 镜头中的 6 个系统场景 — 打开完整组件库与规范（8 个成片样板可直接运行）。\n\nLinks: [README](./skills/phone-ui-demos/README.md) · [SKILL.md](./skills/phone-ui-demos/SKILL.md)\n\n---\n\n\n\n#### `video-shot-demos`\n\n\n\"video-shot-demos\n\n\n**分类:** 视频分镜演示 / 电影级镜头动画\n**适用于:** 视频配套演示动画、录屏成片、技术实测复盘、产品发布可视化——需要\"一个镜头一个 HTML、风格轮换、镜头推拉、同步音效\"的电影化演示场景。\n\n`video-shot-demos` 把视频分镜做成可全屏录屏当成片的网页动画：一个镜头 = 一个独立 HTML。整辑共享电影化播放器底盘（黑场起手 + 虚拟时钟 + 悬停唤出 HUD + 暂停重播），每个镜头却用完全不同的视觉风格创作。内置两套完整成片实例（`glm-5.3-range-test` 29 镜头安全实测复盘 + `doubao-paper-detective` 11 镜头论文阅读商单，共 40 种风格零重复）、安安 15 张情绪立绘、WebAudio 合成音效引擎、镜头调度系统（推拉摇移 / 跟拍 / 黑边慢放）与无头截图质检工具。\n\n亮点:\n- 电影化播放器：黑场「启动播放」起手，虚拟时钟让 CSS 动画与 JS cue 永不漂移，录屏干净零闪跳\n- 镜头语言：开场拉镜 / 关键推近 / 跟拍 / Ken Burns 缓推 / 冲击快推，慢放段落自动配黑边 + 暗角 + 毫秒计数\n- WebAudio 合成音效：零音频文件，6 原语（pop/whoosh/swipe/type/ding/thud），镜头运动自动挂呼啸声\n- 40 种视觉风格库（两辑实例 29+11）：每种风格配字体组合 + 适用内容 + 成片级活样板，连续镜头绝不同风格\n- 双角色吐槽体系：安安 15 情绪 + 橘雪莉 20 情绪，每页 ≥2 次出场（中段快闪连切立绘 + 结尾定场），重点页雪莉吐槽→安安接茬双人同框\n- 字幕条逐句对齐口播稿，关键词高亮；数据角注出处，跨页比分连续滚动\n- 无头截图质检：虚拟时钟快进到任意毫秒截帧，逐张排查重叠遮挡 / 动画穿帮\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"复古报纸头条\"\"嘉年华老虎机\"\"像素平台跳跃\"\"审讯室软木板\"\"机场安检\"
复古报纸头条
震撼数字宣告		嘉年华老虎机
★镜头推进典范		像素平台跳跃
★镜头推进典范		审讯室软木板
证据链追查		机场安检
拦截与合规
\n\n↑ 5 / 40 种风格示例（第一辑）— 打开完整风格库（两套实例共 40 个成片页面可直接运行）。\n\nLinks: [README](./skills/video-shot-demos/README.md) · [SKILL.md](./skills/video-shot-demos/SKILL.md)\n\n---\n\n\n\n#### `stacked-data-cards`\n\n\n\"image\"\n\n\n**分类:** 叠放数据卡 / 时间线论点动画\n**适用于:** 视频中的数据论证段落、研究结论展示、观点陈列、反直觉点揭示——需要\"卡片即论点、数据即证据、自动播放对齐口播\"的场景。\n\n`stacked-data-cards` 生成叠放式数据论点卡的自动播放动画 HTML。深色舞台中央，白色数据卡一张张从底部弹入；新卡弹入时旧卡向左叠放成缩小、倾斜的牌堆。卡内数据组件（折线描边、数字滚动、环形仪表、对比条、数据表格、图标卡组）按毫秒级时间线级联入场，整段时长精确对齐口播秒数，结尾可整副牌堆滑出衔接下一镜头。零依赖、零交互，全屏录屏即成片。\n\n亮点:\n- 三态卡片机制：`upcoming → active → stacked`，旧卡左叠成牌堆，论点之间有\"累积感\"\n- 毫秒级时间线：`TIMING` 常量表对齐口播句读，每卡驻留时长可调，末个动画结束预留 1.5s 阅读时间\n- 数据组件库：折线 trim-paths 描边 / count-up 数字滚动 / 环形仪表 / 对比条 / 行内迷你条形表格 / 图标卡组 / 金句横幅 / 角注\n- WebAudio 合成低音 thud 点缀关键揭示时刻，零音频文件，自动播放被拦截时静默失败\n- 主题变量化：改 `--accent` 一个变量即可整体换色（橙红 / 蓝 / 绿 / 紫）\n- 零依赖单文件：无 CDN、无外部图片，双击离线可跑\n\n\n\n\n\n\n\n
\"image\"
template
起步骨架		\"image\"
实例 A
橙红 · 趋势论证		\"image\"
实例 B
蓝紫 · 数据揭示
\n\n↑ 起步骨架 + 2 个成片实例预览 — 查看完整说明（实例可直接运行）。\n\nLinks: [README](./skills/stacked-data-cards/README.md) · [SKILL.md](./skills/stacked-data-cards/SKILL.md)\n\n---\n\n\n\n#### `win11-ui-demos`\n\n\n\"win11-ui-demos\n\n\n**分类:** 仿 Win11 系统仿真 / 光标演出动画\n**适用于:** 电脑教学视频、软件操作教程、系统知识科普、安全意识宣传——需要\"看起来像一台真 Win11 电脑在自己操作\"的写实演示场景。\n\n`win11-ui-demos` 制作仿 Windows 11 系统 UI 的写实仿真演示动画：Bloom 壁纸桌面、亚克力任务栏、资源管理器逐层打开、系统弹窗报错、蓝屏自动修复——17 类组件按 Light Fluent 实测色值 1:1 还原，一支全程可见的鼠标（弧线飞行→悬停→单击→双击）引导观众看完全程，问号徽章/容量爆红/poof 删除等教学标记叠加在真界面上讲解。内置 21 个成片镜头（悟空安全 C 盘清理商单仿真子集）+ 全套仿真套件模板。\n\n亮点:\n- Win11 仿真套件：桌面/任务栏/资源管理器五段结构/开始菜单/右键菜单/系统对话框/通知/WinRE 蓝屏，窗底 #f3f6fb、accent #0067c0、亚克力 blur(18px) 像素级还原\n- 光标演出：curTo 弧线飞行 + clickFx 点击缩放 + 双击节奏——没有光标的系统演示只是截图集\n- 视图切换三同步：标签页/地址栏面包屑/状态栏项目数随导航同步更新，缺一处即穿帮\n- 教学标记层与还原层分离：问号徽章逐一 pop 悬念、poof 删除动画、容量条爆红呼吸——\"老师的手\"轻盈不遮界面\n- 真实系统文案：0xc0000142 错误码、\"存储空间不足\"通知原文、面包屑 ›——细节可信度来源\n- 因果链叙事：乱删 → 报错 → 蓝屏修复，系统界面天然的剧情弧\n- 角色 GIF 吐槽（大肥鱼）按情绪锚点登场；每页带\"界面为演示还原\"声明角注\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"此电脑爆红\"\"开始菜单\"\"蓝屏自动修复\"\"根目录问号徽章\"\"双窗对比\"\"右键回收站\"
此电脑爆红
光标双击开演		开始菜单
删除警告链		蓝屏修复
WinRE 百分比		根目录导览
问号徽章悬念		双窗对比
并排资源管理器		右键回收站
桌面交互三步
\n\n↑ 6 / 21 个仿真镜头示例 — 打开完整套件规范（21 个成片样板可直接运行）。\n\nLinks: [README](./skills/win11-ui-demos/README.md) · [SKILL.md](./skills/win11-ui-demos/SKILL.md)\n\n---\n\n\n\n#### `swiss-shot-demos`\n\n\n\"swiss-shot-demos\n\n\n**分类:** 瑞士风格图表演示 / 编辑级排版动画\n**适用于:** 知识教程视频、技术复盘、产品发布、安全科普——需要\"纸底墨字 + 匹配内容的可视化图表\"的克制美学演示场景；也专治 AI 默认生成的\"黑底油光\"审美疲劳。\n\n`swiss-shot-demos` 制作瑞士国际主义风格（Swiss / International Typographic Style）的分镜演示动画：纸灰底、炭黑墨、发丝线、灰阶明度阶梯、每页唯一强调橙——编辑部级排版（Inter 大字 + 12 列网格 + 非对称布局）。核心方法论是**图表驱动**：拿到口播先问\"这是什么图\"，20 种图表词汇选型（大字计数、发丝轴柱、时间线、环形回路、流程链、泳道、状态机、双列对照、嵌套框、热力矩阵、点阵、计票清单、墨底终端卡…），主体图形区 ≥55% 面积。全面禁用 glow/霓虹/渐变光斑。内置 68 个成片镜头（AI 渗透教程全片）+ 预装瑞士系统的底盘模板。\n\n亮点:\n- 瑞士设计系统唯一正本：纸 `#F0EFEB` / 墨 `#1C1C1A` / 灰阶 L1-L7（明度即数据）/ 唯一强调橙 `#F5572F`（每页只标一个主角）\n- 图表词汇表 20 种\"内容→图表\"映射，纯 CSS/SVG 实现，零外部图表库\n- 禁用清单一票否决暗色油光全家桶（glow/光斑/渐变/扫描线/弹跳）\n- 入场三式 pop/fade/draw + 快进快停缓动；节拍动画一律 cue+tws 可冻结\n- QA 冻结钩子内置：URL 加 `#auto,t=毫秒` 自动起播冻结，无头截图零改文件\n- 生产纪律：cue 时刻=口播句绝对时间差、数字白名单不编造、不伪造终端回显\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"AI\"翻车时间线\"\"点阵对撞\"\"嵌套剖视\"\"双列对照\"\"热力矩阵\"
AI 循环环
shot-0-1 五幕范本		恶化时间线
四步逐级变深		点阵对撞
15 → 50+ 翻倍		嵌套剖视
宿主机套客户机		双列对照
CTF vs 靶场		热力矩阵
灰阶即数据
\n\n↑ 6 种图表词汇示例 — 打开完整图表词汇表（68 个成片样板可直接运行）。\n\nLinks: [README](./skills/swiss-shot-demos/README.md) · [SKILL.md](./skills/swiss-shot-demos/SKILL.md)\n\n---\n\n\n\n#### `ui2v-motions`\n\n\n\"ui2v-motions\n\n\n**分类:** UI 动效素材库 / 演示画面层即插即用\n**适用于:** 视频演示页、产品页、落地页需要高质量 UI 动效（图表入场/列表滚动/卡片翻转/文字编排/数字滚动/时间线展开…）——给 AI 一座按\"你要讲什么\"查件的动效仓库。\n\n`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 条用途表 + 母版映射索引。\n\n亮点:\n- 1,262 包全量离线（元数据 registry-item.json 齐全），按\"你要讲什么\"查件：镜头用途总览 + CSV 可编程筛 + 母版短名单\n- paused GSAP 时间轴与演示底盘同构，接入配方现成（整段映射/逐句拆拍两种模式）\n- 四条硬约束已文档化：GSAP 本地化（库内 43 包自带副本）、禁 iframe、进来先 pause、720p×1.5\n- 红线清单：terminal 类只借外框弃打字、示例数字不照搬、配色字体按宿主重刷、对外发布前回原站确认授权\n- 官方 CLI 与双语文档随包\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\"badge\"workflow\"\"screenflow\"\"game\"deploy\"chat
hero-badge-earn
徽章赢得动画		codex-workflow
工作流编排		agent-screenflow
屏幕流演示		claw-game-release
发布封面动画		hero-deploy-pipeline
部署管线流动		hero-chat-bubbles
聊天气泡编排
\n\n↑ 6 / 1,262 个动效包截帧 — 打开选型索引与接入配方。\n\nLinks: [README](./skills/ui2v-motions/README.md) · [SKILL.md](./skills/ui2v-motions/SKILL.md)\n\n---\n\n\n\n### 安装\n\n| # | 方式 | 适用于 | 指定版本? |\n|---|------|--------|-----------|\n| A | [`skills` CLI (`npx`)](#option-a--skills-cli-npx) | 任意 Agent，一行安装，按需选择 Skill | ✅ via tag URL |\n| B | Git Clone + 手动复制 | 本地开发 / 魔改 | ✅ via commit |\n| C | GitHub Releases `.zip` | CI / 生产环境固定版本 | ✅ via release tag |\n\n#### Option A · `skills` CLI (npx)\n\n```bash\n# 安装全部 Skill（推荐）\nnpx skills add https://github.com/Unclecheng-li/AI_Animation\n\n# 安装单个 Skill\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ppt-animation\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/flowchart\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/network-protocol-viz\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/dynamic-archify\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/scholar-notes\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/card-theater\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/video-shot-demos\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/phone-ui-demos\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/win11-ui-demos\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/swiss-shot-demos\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/ui2v-motions\nnpx skills add https://github.com/Unclecheng-li/AI_Animation/tree/main/skills/stacked-data-cards\n```\n\n> **默认安装 `main` 分支最新版本。** CLI 会从源码树直接读取每个 Skill 的最新 `SKILL.md`。\n\n#### Option B · Git Clone\n\n```bash\ngit clone https://github.com/Unclecheng-li/AI_Animation.git\n# 将 skills/ 复制到你的 Agent 技能目录\n```\n\n#### Option C · GitHub Releases\n\n前往 [Releases 页面](https://github.com/Unclecheng-li/AI_Animation/releases) 下载 `.zip`，解压后复制到 Agent 技能目录。\n\n### 兼容性\n\n| Agent / Runtime | Skill 存放路径 | 状态 |\n|---|---|---|\n| **WorkBuddy** | `~/.workbuddy/skills//` | ✅ 已测试 |\n| **Claude Code** | `.claude/skills//` | ✅ 兼容 |\n| **Cursor** | `.agents/skills//` | ✅ 兼容 |\n| **Codex CLI** | `.codex/skills//` | ✅ 兼容 |\n| **Gemini CLI** | extension manifest | ✅ 兼容 |\n\n> `SKILL.md` 格式与 Agent 无关，只要 Agent 支持 Skills 规范，将文件夹复制到对应目录即可。\n\n### 快速上手\n\n安装 Skill 后，直接在 AI Agent 中说：\n\n```\n用 ppt-animation 制作一个关于\"HTTP协议\"的演示，暗色主题，5页\n```\n\n```\n用 flowchart 演示 LSTM 的工作原理\n```\n\n```\n用 network-protocol-viz 可视化 TCP 三次握手\n```\n\n```\n用 dynamic-archify 画一个微服务架构图，带流动动画\n```\n\n```\n把以上内容做成学霸笔记，Style A 风格\n```\n\n```\n用 card-theater 演示 IPsec 数据流转过程，需要模式切换（传输模式 / 隧道模式）\n```\n\n```\n用 video-shot-demos 把这期视频的口播稿做成分镜演示动画，每个镜头一个 HTML，输出到 demo/\n```\n\n```\n用 phone-ui-demos 把这个 App 的功能做成手机录屏风格的演示动画，先出分镜表我确认\n```\n\n```\n用 stacked-data-cards 把这三个论点做成叠放数据卡动画，整段 25 秒，橙红主题，结尾整副滑出\n```\n\n```\n用 win11-ui-demos 把这段 Windows 教程的操作过程做成光标演示仿真动画，先出分镜表我确认\n```\n\n```\n用 swiss-shot-demos 把这期视频的口播稿做成演示动画：瑞士风格、图表驱动，先出图表选型分镜表\n```\n\n```\n从 ui2v-motions 挑 2-3 个适合\"三方案对比\"的动效包给我看效果，选中的接入我的演示页 cue 时间轴\n```\n\n### 目录结构\n\n```text\nai-animation-skills/\n├── skills/\n│ ├── SKILL_TEMPLATE.md ← 新增 Skill 的标准模板\n│ ├── ppt-animation/\n│ │ ├── SKILL.md ← Agent 执行指令（核心）\n│ │ ├── README.md ← 人类可读文档\n│ │ ├── references/ ← Prompt 参考\n│ │ └── assets/ ← 模板 HTML 文件\n│ ├── flowchart/\n│ │ ├── SKILL.md\n│ │ ├── README.md\n│ │ ├── references/\n│ │ └── assets/\n│ ├── network-protocol-viz/\n│ │ ├── SKILL.md\n│ │ ├── README.md\n│ │ ├── references/\n│ │ └── assets/\n│ ├── dynamic-archify/\n│ │ ├── SKILL.md\n│ │ ├── README.md\n│ │ ├── renderers/ ← 5 种图表渲染器\n│ │ ├── schemas/ ← JSON Schema 验证\n│ │ ├── examples/ ← 示例 JSON\n│ │ └── assets/ ← 模板 + GIF 导出库\n│ ├── scholar-notes/\n│ ├── SKILL.md\n│ ├── README.md\n│ ├── assets/ ← Style A + Style B 模板\n│ ├── references/ ← 布局库 + 组件手册 + checklist\n│ └── examples/ ← Style A/B 示例（8 个）\n│ ├── card-theater/\n│ ├── SKILL.md\n│ ├── README.md\n│ ├── assets/ ← 5 种模板 HTML\n│ └── references/ ← Prompt 参考\n│ ├── video-shot-demos/\n│ ├── SKILL.md ← 工作流 + 交付标准\n│ ├── README.md\n│ ├── references/ ← 播放器/镜头/音效/风格库/角色 五份规范\n│ ├── assets/ ← 起步骨架 template.html\n│ │ └── examples/ ← 两套成片实例（glm 29 镜头 + doubao 11 镜头，各带安安表情与图标）\n│ └── scripts/ ← 无头截图质检工具\n│ ├── phone-ui-demos/\n│ ├── SKILL.md ← 分镜表确认工作流 + 交付标准\n│ ├── README.md\n│ ├── references/ ← 播放器/手机舞台/大字幕/系统组件 四份规范\n│ └── assets/ ← 起步骨架 + kexue 8 镜头成片实例\n│ ├── stacked-data-cards/\n│ ├── SKILL.md ← 三态卡片机制 + 时间线规范 + 生成标准\n│ ├── README.md\n│ ├── references/ ← Prompt 参考 + 组件规格手册\n│ └── assets/ ← 起步骨架 template.html + 2 个成片实例（橙红/蓝紫）\n│ ├── win11-ui-demos/\n│ ├── SKILL.md ← 光标演出哲学 + cp 工作流 + 交付标准\n│ ├── README.md\n│ ├── references/ ← win11-kit 组件规格 / simulation-patterns 叙事手法\n│ └── assets/ ← Win11 仿真套件模板 + wukong 21 镜头实例 + 预览图\n│ ├── swiss-shot-demos/\n│ ├── SKILL.md ← 图表优先哲学 + cp 工作流 + 交付标准\n│ ├── README.md\n│ ├── references/ ← swiss-system 设计正本 / chart-vocabulary 图表词汇 / production-spec 生产纪律\n│ └── assets/ ← 瑞士底盘模板（tokens+组件库预装）+ 68 镜头实例 + 预览图\n│ ├── ui2v-motions/\n│ ├── SKILL.md ← 选型→接入配方 + 硬约束红线 + Token 纪律\n│ ├── README.md / _先看这里.md\n│ ├── 01_动效库/itelmn/ ← 1,262 个动效包本体（641MB 全量镜像）\n│ ├── 02_官方CLI与文档/ 03_清单与索引/ 04_预览/ 05_抓取日志/\n│ └── assets-preview/ ← 截帧预览图\n├── web_animation/ ← 原始示例 HTML（历史存档）\n├── UI/ ← UI 设计参考图\n├── prompt.md ← Prompt 模板集合\n├── package.json\n├── CONTRIBUTING.md\n└── README.md\n```\n\n---\n\n### 贡献与许可\n\n见 [CONTRIBUTING.md](./CONTRIBUTING.md)，欢迎提交新的动画 Skill！\n\nMIT — for educational use only.\n", "bytes": 39601, "sha": "60e9d10894a5b4713d823871e4b937654e93485b0b1111684f83f022ff7e98e0", "repo_slug": "unclecheng-li/ai_animation", "fonte": "repo", "truncated": false, "api": "https://api.agentalog.com/api/listings/skl_unclecheng_li_ai_animation_video_shot_de_a47d3c90/readme" }