仿 Win11 系统仿真演示动画（1:1 还原 · 光标演出）
【用途】 win11-ui-demos 用于制作“仿 Windows 11 系统 UI”的写实仿真网页演示动画。观众看到的是一台真 Win11 电脑在“自己操作”：Bloom 壁纸桌面、亚克力任务栏、资源管理器逐层打开、系统弹窗报错、蓝屏自动修复。一支会自己操作的鼠标引导观众看完全程，教学标记（问号徽章/警告牌/红圈）在还原界面上叠加解释。每镜头一个独立 HTML，电影化播放器底盘，全屏录屏即成片。
【创作理念】 像素级还原是生命线：窗底 #f3f6fb、accent #0067c0、圆角 10px、双层阴影、亚克力任务栏 rgba(238,244,252,.82)+blur(18px)——观众潜意识信了这台电脑，演示才有说服力。宁可少做一屏，不可做歪一像素。
光标是主角：一支全程可见的鼠标（移动→悬停→单击→双击）就是叙事者，观众跟着它走。没有光标演出的系统演示=截图集。
教学标记层与还原层分离：界面归界面（1:1），讲解归讲解（问号徽章、警告牌、容量爆红、占比浮层——都是“老师的手”搭在真界面上）。
真实系统文案：错误码（0xc0000142）、“存储空间不足”、面包屑路径、状态栏项目数——细节真实感来自真文案。
因果链叙事：乱删 → 报错 → 蓝屏修复，系统界面的“剧情感”天然适合问题→恶化→解决弧线。
每镜头 15–45s，一次完整交互；口播对齐只写 cue 注释（无字幕条）。
【Token 纪律（硬性）】 禁止通读 assets/template.html 与 assets/examples/ 下任何成片页（单个 20–50KB）。 模板 cp 复制后 grep -n "改这里|DUR=" 拿行号，只读标记区改写；成片页仅卡壳时 grep 定位后窗口读 ≤80 行。 组件规格与手法优先查 references/ 两份浓缩文档。
【使用方式 / 工作流】 第 0 步 · 分镜表：通读素材（口播稿/操作流程/知识点），拆成 镜头|时长|系统场景(桌面/资源管理器/对话框/蓝屏…)|交互动作(光标走位)|教学标记 分配表，给用户确认。需要壁纸与角色时： 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 版式”；截图验证无遮挡穿帮。
【适用场景】 适合系统操作教学、软件功能演示、问题排查与解决过程讲解，以及需要把真实系统界面按问题→恶化→解决弧线编排成片的场景。只要用户提到“仿…”，素材可拆分为镜头、时长、系统场景、交互动作与教学标记，即可按上述流程制作。
【限制】 官方资料未提供收费、价格、平台支持范围、运行环境要求、许可证等具体信息，暂未提供。制作过程有硬性 Token 纪律，需避免通读模板与成片页；每镜头时长 15–45s；需通过截图质检确保还原度、光标轨迹与视图同步。