菜单
把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Unclecheng-li/AI_Animation --skill phone-ui-demos命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
为视频/课程/解说文案制作"每镜头一个 HTML"的高完成度网页演示动画（分镜演示页、视频配套演示动画、录屏用动画网页、科普/技术/产品发布可视化镜头）。只要用户提到：给视频做演示动画网页、分镜 HTML、shot 页面、把口播稿/大纲做成动画、视频画面设计网页版、录一段网页动画、或要求改造升级一批已有演示页——就用本 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 | phone-ui-demos |
| description | 把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。 |
把任意内容做成一辑看起来像真手机精心编排录屏的网页动画：1920×1080 舞台中央一台 3D 姿态活灵活现的手机，内容通过锁屏通知、聊天、设置页、控制中心、App 界面等系统组件逐镜头呈现。整辑接入电影化播放器（黑场起手 / 虚拟时钟 / 分段进度跳转 / 静音开关），可直接全屏录屏当成片用。
与 video-shot-demos（分镜风格轮换体系）同源的播放器底盘，但本 Skill 的画面法则完全不同：不是 29 种风格轮换，而是全系列统一一套 HyperOS/MIUI 设计语言，靠"壁纸渐变 + 系统场景 + 手机 3D 动作"制造镜头差异。
通读用户素材（产品功能清单/大纲/口播稿/知识点），把内容拆成 5–9 个镜头（每个 6–12s），输出分镜表让用户确认后再动工：
镜头 | 时长 | 系统场景(锁屏/通知/聊天/设置/控制中心/弹窗/App页…) | 壁纸渐变主题 | 手机 3D 动作设计 | 承载的信息点
叙事弧参考（实测有效）：锁屏开场（手机登场+通知）→ 核心交互（App 打开/对话/流程）→ 数据沉淀（仪表盘/图谱）→ 锁屏收尾（回顾+熄屏+品牌卡）。
从 assets/template.html 复制起步——内置全部底盘：虚拟时钟播放器、音效引擎（默认静音+喇叭开关）、1920×1080 舞台 + 统一氛围层、真手机（全细节）、phoneTo 3D 姿态系统、背景大字幕（两种效果示例）、HUD 分段进度 + 镜头跳转、镜头调度。然后只改画面层与 cue。
子系统规范按需读：
references/player-and-navigation.md — 播放器底盘 / HUD 分段跳转 / 静音开关 / 镜头间导航references/phone-stage.md — 手机解剖（机身细节/壁纸/状态栏）与 phoneTo 3D 姿态系统全部动作references/bg-captions.md — 背景层大字幕：11 种入场效果库 + 逐字拆字工具references/system-ui-patterns.md — 系统 UI 组件库（通知/聊天/设置/弹窗/App 打开转场…）+ 内容转译映射表 + 镜头连续性规则写某种系统场景前，先读实例 assets/examples/kexue/ 里的对应镜头（成片级样板，双击 index.html 可运行）。cue 注释标注节拍（// 通知②：AI 出题），DUR = 规定时长 ±0.5s。
无头截图（虚拟时钟可快进到任意毫秒）：
node ../video-shot-demos/scripts/shot.js 页面.html 6000 _t6s.png
逐张检查：真机感（像录屏吗？）/ 重叠遮挡（两侧大字与手机、屏幕内元素）/ 中间态穿帮（玻璃面板后的孤儿元素）/ 连续性（本镜初始姿态是否接上镜结尾）/ 收尾定格。最后完整播一遍听音效节奏。
与正片同一设计语言的导航页：按幕分组卡片（编号/时长/标题/系统场景标签/壁纸色 glow），页脚标注快捷键与录屏指引。