Individual skill

phone-ui-demos

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

skills/phone-ui-demos/SKILL.md

Read pinned source

Source commit 3d17ba3eb0b0ea631b593bc646b01b83c8d861e4

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Local scripts
Last checked: Nov 9, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 1,766
Repository last updated: Oct 26, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

css Repository topic
html5 Repository topic
front-end Repository topic
javascript Repository topic
ppt Repository topic
ai Repository topic
ai-agents Repository topic
dsh-plugin Repository topic
dsh-plugins Repository topic
prompt Repository topic
design Derived category
design-interface Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

README.mddoc · 4,879 bytes
SKILL.mdcore · 6,197 bytes
SKILL.mdcore · 6,197 bytes
assets/examples/kexue/index.htmlasset · 12,552 bytes
assets/examples/kexue/shot-1.htmlasset · 31,470 bytes
assets/examples/kexue/shot-2.htmlasset · 41,266 bytes
assets/examples/kexue/shot-3.htmlasset · 35,307 bytes
assets/examples/kexue/shot-4.htmlasset · 37,956 bytes
assets/examples/kexue/shot-5.htmlasset · 38,145 bytes
assets/examples/kexue/shot-6.htmlasset · 42,184 bytes
assets/examples/kexue/shot-7.htmlasset · 40,690 bytes
assets/examples/kexue/shot-8.htmlasset · 33,232 bytes
assets/template.htmlasset · 29,874 bytes
references/bg-captions.mddoc · 2,997 bytes
references/phone-stage.mddoc · 3,996 bytes
references/player-and-navigation.mddoc · 2,855 bytes
references/system-ui-patterns.mddoc · 5,124 bytes

Read excerpt


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

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

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

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

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