菜单
为视频/课程/解说文案制作"每镜头一个 HTML"的高完成度网页演示动画（分镜演示页、视频配套演示动画、录屏用动画网页、科普/技术/产品发布可视化镜头）。只要用户提到：给视频做演示动画网页、分镜 HTML、shot 页面、把口播稿/大纲做成动画、视频画面设计网页版、录一段网页动画、或要求改造升级一批已有演示页——就用本 Skill。核心是统一的电影化播放器机制 + 每页完全不同的视觉风格 + 镜头语言 + 同步音效 + 角色表情吐槽，内容完全开放不设限。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Unclecheng-li/AI_Animation --skill video-shot-demos命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。
生成侧边栏叙事 + 3D 卡片轮播的演示动画 HTML 页面。支持滚动翻页、Coverflow 3D、Focus 展开等多种交互模式，内置模式切换（如传输/隧道）、荧光笔高亮、水印图标等效果。适合协议流程演示、产品特性展示、分步讲解场景。
Create professional architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as standalone animated HTML files with SVG graphics, flowing animation effects, a built-in dark/light theme toggle, and one-click export to PNG / JPEG / WebP / SVG / GIF / WebM. Accepts plain-language descriptions or pasted Mermaid code and lays the diagram out from scratch. Use when the user asks for system architecture diagrams, infrastructure diagrams, cloud architecture visualizations, security diagrams, network topology, technical workflows, approval flows, runbooks, CI/CD flows, process diagrams, API call sequences, request lifecycles, data pipelines, ETL/ELT maps, PII boundaries, data lineage, state machines, lifecycle diagrams, status transitions, or asks to convert/beautify a Mermaid diagram.
正在显示 SKILL.md
| name | video-shot-demos |
| description | 为视频/课程/解说文案制作"每镜头一个 HTML"的高完成度网页演示动画（分镜演示页、视频配套演示动画、录屏用动画网页、科普/技术/产品发布可视化镜头）。只要用户提到：给视频做演示动画网页、分镜 HTML、shot 页面、把口播稿/大纲做成动画、视频画面设计网页版、录一段网页动画、或要求改造升级一批已有演示页——就用本 Skill。核心是统一的电影化播放器机制 + 每页完全不同的视觉风格 + 镜头语言 + 同步音效 + 角色表情吐槽，内容完全开放不设限。 |
一个镜头 = 一个独立 HTML，统一播放器底盘 + 每页一种完全不同的视觉风格，全屏录屏即成片。内容开放（技术实测/产品发布/课程/叙事皆可），不变的是电影化机制、镜头语言与完成度标准。
assets/template.html 与 assets/examples/ 下任何成片页（单个 20–50KB，读完耗尽预算）。cp 复制后只读标记区域（第 1 步）；成片页仅当写完仍卡壳时，grep 定位后按行号窗口读 ≤80 行。references/ 三份浓缩文档，不要现场读源码反推。第 0 步 · 输入与风格分配表：通读素材（大纲/口播稿/画面设计/口述），拿到分镜列表 + 口播时间戳（时间轴对齐基准）+ 角色素材。排表 镜头|时长|视觉风格|字体组合|主色：相邻不同风格、整辑不重复、同一实体全系列锁同一颜色（观众靠颜色跨页追踪）。表给用户确认后再动工。素材复制（勿读内容）：
cp -r "assets/examples/<项目>/anan - emotion rename" <输出目录>/ # 安安 15 情绪立绘；图标同理
cp -r "assets/shery - emotion rename" <输出目录>/ # 橘雪莉 20 情绪（笨蛋吐槽役，重点页与安安同框）
第 1 步 · 逐页实现（cp 起步，只读标记区）：
cp assets/template.html "<输出目录>/shot-x-x_名称.html"
grep -n "改这里\|DUR=" "<输出目录>/shot-x-x_名称.html" # 行号地图（7 处改这里 + DUR）
用 Read 的 offset/limit 只读标记行附近区域（字体 link+舞台底色 / 画面层 CSS / 画面 HTML / cue 表+DUR），逐一替换：① 字体与配色（Google Fonts 随风格）；② 重画画面层；③ 按口播时间戳写 cue（注释引用口播句，如 // 5:20「正常充值」）；④ DUR=规定时长±0.5s。底盘（引导脚本/音效引擎/时间轴/镜头调度/HUD）不动。
按需读参考（都很小）：references/mechanics.md 播放器+镜头+音效机制 ｜ references/style-cards.md 40 种风格卡片（字体/主色/材质/样板页号） ｜ references/character-reactions.md 双角色吐槽体系（安安×橘雪莉情绪表、中段快闪切立绘、双人同框 cue、气泡强约束模板）。
第 2 步 · 质检：node scripts/shot.js 页面.html <毫秒> _t.png [fx fy scale] 多时间点无头截图，逐张查重叠遮挡/中间态穿帮/收尾定格，最后完整播一遍。
第 3 步 · index 总览：按章节分组的导航卡（编号/时长/标题/风格标签），自成一种风格。
翻新已有页面时：先盘点并列清单（用户点名保留的页面一字不动）→ 底盘统一注入 → 逐页重设计画面层 → 补角色/镜头/音效 cue → 质检。