# Phone UI Demos

> 把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。

- Skill: `unclecheng-li/phone-ui-demos` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds add unclecheng-li/phone-ui-demos`
- Raw SKILL.md: https://api.skillmd.com/api/skills/unclecheng-li/phone-ui-demos/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: Unclecheng-li (https://skillmd.com/u/unclecheng-li)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/unclecheng-li/phone-ui-demos

---


# 手机系统 UI 演示动画（一台"真手机"的电影化录屏）

把任意内容做成一辑**看起来像真手机精心编排录屏**的网页动画：1920×1080 舞台中央一台 3D 姿态活灵活现的手机，内容通过锁屏通知、聊天、设置页、控制中心、App 界面等**系统组件**逐镜头呈现。整辑接入电影化播放器（黑场起手 / 虚拟时钟 / 分段进度跳转 / 静音开关），可直接全屏录屏当成片用。

与 `video-shot-demos`（分镜风格轮换体系）同源的播放器底盘，但本 Skill 的画面法则完全不同：**不是 29 种风格轮换，而是全系列统一一套 HyperOS/MIUI 设计语言**，靠"壁纸渐变 + 系统场景 + 手机 3D 动作"制造镜头差异。

## 创作哲学（决定一切产出质量）

1. **一切信息都要变成"手机里发生的事"**。禁止把普通网页元素（普通段落/按钮/导航栏）铺进屏幕——论点变锁屏通知、对话变聊天气泡、数据变圆环滑条、流程变设置列表。像真录屏，不是 PPT。
2. **真机感来自细节**：机身侧键与天线带、挖孔摄像头、屏幕反光、实时状态栏、Home 指示条、壁纸视差。观众潜意识里信了这台手机，演示才有说服力。
3. **手机是活的演员**：有 3D 姿态（摇摆/前倾/横过来/旋走退场），点按会前倾、盖章会震动、强调会转向观众。一台静止的手机=一张截图。
4. **镜头连续性是铁律**：整辑统一背景氛围；除首镜头外手机直接在场（不重播登场动画），每镜初始姿态"接续上镜余韵"。
5. **两侧大字幕是舞台的一部分**：口播文案不放底部字幕条，而是放在背景层（手机图层下方）左右两侧，渐变文字 + 多种入场效果，大而有冲击力。
6. **每个镜头只讲一件事**：一句话 + 一个视觉主体，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 步 · 质检

无头截图（虚拟时钟可快进到任意毫秒）：

```bash
node ../video-shot-demos/scripts/shot.js 页面.html 6000 _t6s.png
```

逐张检查：**真机感**（像录屏吗？）/ **重叠遮挡**（两侧大字与手机、屏幕内元素）/ **中间态穿帮**（玻璃面板后的孤儿元素）/ **连续性**（本镜初始姿态是否接上镜结尾）/ **收尾定格**。最后完整播一遍听音效节奏。

### 第 3 步 · index 总览

与正片同一设计语言的导航页：按幕分组卡片（编号/时长/标题/系统场景标签/壁纸色 glow），页脚标注快捷键与录屏指引。

## 交付标准（缺一即未完成）

- [ ] 黑场「启动播放」起手；1920×1080 舞台自适应；HUD 默认隐藏、底部唤出
- [ ] HUD 分段进度条（每镜头一段）可点击跳转；Space 暂停 / R 重播 / ←→ 切镜头
- [ ] 音效 WebAudio 合成、**默认静音**、HUD 喇叭开启
- [ ] 手机全细节：侧键/天线带/挖孔/反光/状态栏 SVG 图标/Home 条；壁纸视差 + Ken Burns
- [ ] 全系列统一背景氛围；每镜头独立壁纸渐变，实体颜色全系列锁定
- [ ] 首镜头手机 3D 登台；其余镜头手机直接在场、初始姿态接续上镜
- [ ] 每镜头 ≥2 次手机 3D 动作（摇摆/前倾/横转…）；标志性 App 打开转场 ≥1 次
- [ ] 口播文案在背景层左右两侧：渐变文字、大字号、每镜换效果
- [ ] 屏幕内一切元素都是系统组件；图标全内联 SVG；无 emoji、无真实品牌商标
- [ ] 弹性入场 cubic-bezier(.34,1.56,.64,1)；列表 stagger 60–80ms；毛玻璃层级 ≥2 层
- [ ] 无重叠遮挡、无中间态穿帮；结尾定格体面（收尾镜头熄屏 + 品牌卡）
- [ ] index.html 总览可逐页打开