| name | phone-ui-demos |
| description | 把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。 |
手机系统 UI 演示动画（一台"真手机"的电影化录屏）
把任意内容做成一辑看起来像真手机精心编排录屏的网页动画：1920×1080 舞台中央一台 3D 姿态活灵活现的手机，内容通过锁屏通知、聊天、设置页、控制中心、App 界面等系统组件逐镜头呈现。整辑接入电影化播放器（黑场起手 / 虚拟时钟 / 分段进度跳转 / 静音开关），可直接全屏录屏当成片用。
与 video-shot-demos（分镜风格轮换体系）同源的播放器底盘，但本 Skill 的画面法则完全不同：不是 29 种风格轮换，而是全系列统一一套 HyperOS/MIUI 设计语言，靠"壁纸渐变 + 系统场景 + 手机 3D 动作"制造镜头差异。
创作哲学（决定一切产出质量）
- 一切信息都要变成"手机里发生的事"。禁止把普通网页元素（普通段落/按钮/导航栏）铺进屏幕——论点变锁屏通知、对话变聊天气泡、数据变圆环滑条、流程变设置列表。像真录屏，不是 PPT。
- 真机感来自细节：机身侧键与天线带、挖孔摄像头、屏幕反光、实时状态栏、Home 指示条、壁纸视差。观众潜意识里信了这台手机，演示才有说服力。
- 手机是活的演员：有 3D 姿态（摇摆/前倾/横过来/旋走退场），点按会前倾、盖章会震动、强调会转向观众。一台静止的手机=一张截图。
- 镜头连续性是铁律：整辑统一背景氛围；除首镜头外手机直接在场（不重播登场动画），每镜初始姿态"接续上镜余韵"。
- 两侧大字幕是舞台的一部分：口播文案不放底部字幕条，而是放在背景层（手机图层下方）左右两侧，渐变文字 + 多种入场效果，大而有冲击力。
- 每个镜头只讲一件事：一句话 + 一个视觉主体，6–12 秒一次完整的系统交互。
工作流
第 0 步 · 理解输入与分镜表确认
通读用户素材（产品功能清单/大纲/口播稿/知识点），把内容拆成 5–9 个镜头（每个 6–12s），输出分镜表让用户确认后再动工：
镜头 | 时长 | 系统场景(锁屏/通知/聊天/设置/控制中心/弹窗/App页…) | 壁纸渐变主题 | 手机 3D 动作设计 | 承载的信息点
叙事弧参考（实测有效）：锁屏开场（手机登场+通知）→ 核心交互（App 打开/对话/流程）→ 数据沉淀（仪表盘/图谱）→ 锁屏收尾（回顾+熄屏+品牌卡）。
第 1 步 · 逐页实现
从 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。
第 2 步 · 质检
无头截图（虚拟时钟可快进到任意毫秒）：
node ../video-shot-demos/scripts/shot.js 页面.html 6000 _t6s.png
逐张检查：真机感（像录屏吗？）/ 重叠遮挡（两侧大字与手机、屏幕内元素）/ 中间态穿帮（玻璃面板后的孤儿元素）/ 连续性（本镜初始姿态是否接上镜结尾）/ 收尾定格。最后完整播一遍听音效节奏。
第 3 步 · index 总览
与正片同一设计语言的导航页：按幕分组卡片（编号/时长/标题/系统场景标签/壁纸色 glow），页脚标注快捷键与录屏指引。
交付标准（缺一即未完成）
