win11-ui-demos

---
name: win11-ui-demos
description: 制作"仿 Windows 11 系统 UI"的写实仿真网页演示动画——观众像在看一台真 Win11 电脑的精心编排录屏：桌面、任务栏、资源管理器、开始菜单、右键菜单、系统对话框、通知、WinRE 蓝屏 1:1 还原，光标演出引导操作，教学标记层叠加讲解，电影化播放器全屏录屏即成片。只要用户提到：仿 Win11/Windows 演示、系统 UI 仿真动画、电脑教学演示页、软件操作教程动画、把 Windows 操作过程做成动画、或要求改造升级一批系统界面风格演示页——就用本 Skill。内容开放不设限：任何电脑操作、系统知识、软件教程、安全科普都能转译成"真电脑里发生的事"。
---

# 仿 Win11 系统仿真演示动画（1:1 还原 · 光标演出）

观众看到的是一台真 Win11 电脑在"自己操作"：Bloom 壁纸桌面、亚克力任务栏、资源管理器逐层打开、系统弹窗报错、蓝屏自动修复——一支**会自己操作的鼠标**引导观众看完全程，教学标记（问号徽章/警告牌/红圈）在还原界面上叠加解释。每镜头一个独立 HTML，电影化播放器底盘，全屏录屏即成片。

## 创作哲学

1. **像素级还原是生命线**：窗底 `#f3f6fb`、accent `#0067c0`、圆角 10px、双层阴影、亚克力任务栏 `rgba(238,244,252,.82)+blur(18px)`——观众潜意识信了这台电脑，演示才有说服力。宁可少做一屏，不可做歪一像素。
2. **光标是主角**：一支全程可见的鼠标（移动→悬停→单击→双击）就是叙事者，观众跟着它走。没有光标演出的系统演示=截图集。
3. **教学标记层与还原层分离**：界面归界面（1:1），讲解归讲解（问号徽章、警告牌、容量爆红、占比浮层——都是"老师的手"搭在真界面上）。
4. **真实系统文案**：错误码（0xc0000142）、"存储空间不足"、面包屑路径、状态栏项目数——细节真实感来自真文案。
5. **因果链叙事**：乱删 → 报错 → 蓝屏修复，系统界面的"剧情感"天然适合问题→恶化→解决弧线。
6. 每镜头 15–45s，一次完整交互；口播对齐只写 cue 注释（无字幕条）。

## Token 纪律（硬性）

- **禁止通读** `assets/template.html` 与 `assets/examples/` 下任何成片页（单个 20–50KB）。
- 模板 `cp` 复制后 `grep -n "改这里\|DUR="` 拿行号，只读标记区改写；成片页仅卡壳时 grep 定位后窗口读 ≤80 行。
- 组件规格与手法优先查 `references/` 两份浓缩文档。

## 工作流

**第 0 步 · 分镜表**：通读素材（口播稿/操作流程/知识点），拆成 `镜头|时长|系统场景(桌面/资源管理器/对话框/蓝屏…)|交互动作(光标走位)|教学标记` 分配表，给用户确认。需要壁纸与角色时：

```bash
cp -r "assets/examples/wukong-c-clean/material" <输出目录>/     # Bloom 壁纸（或用模板 CSS 渐变兜底）
cp "assets/examples/wukong-c-clean/Shark-GIF/<编号_情绪>.gif" <输出目录>/Shark-GIF/   # 按需 GIF
```

**第 1 步 · 逐页实现**：`cp assets/template.html 输出目录/shot-xx_名称.html` → grep 定位 → 只改【改这里】区（桌面图标/窗口内容/弹窗/cue）。底盘与 WIN11 仿真套件 CSS 不动。cue 注释引用口播节拍（`// (0:07) 想自己清理一下`）。

**第 2 步 · 质检**：`node ../video-shot-demos/scripts/shot.js 页面.html <毫秒> _t.png` 多时间点截图，查：还原度（像 Win11 吗）/ 光标轨迹合理 / 重叠遮挡 / 中间态穿帮 / 状态栏·地址栏与视图同步。

**第 3 步 · index 总览**：按章节分组的导航卡（编号/时长/系统场景标签），并保留"界面为演示还原"声明。

## 交付标准

- [ ] 黑场「启动播放」起手；1920×1080 自适应；HUD 底部唤出；可暂停重播；DUR 准确
- [ ] Win11 Light Fluent 关键色/圆角/阴影/亚克力精确（见 win11-kit.md）；系统字体栈零 webfont
- [ ] 光标演出贯穿：移动有 fly 轨迹、点击有缩放反馈、双击进二级界面
- [ ] 视图切换三同步（标签页/地址栏面包屑/状态栏项目数）；真实系统文案
- [ ] 教学标记不越位（叠在界面上但保持"手"的轻盈）；角色 GIF 吐槽在情绪锚点
- [ ] 角注含"界面为演示还原 · Windows 11 版式"；截图验证无遮挡穿帮

More agent context in Unclecheng-li/AI_Animation

11 other files this repository gives its agents.