win11-ui-demos

Files (90)

• README.md
• SKILL.md
• 015_拿镰刀微笑腹黑威胁.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 017_头顶彩虹爆炸头生无可恋.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 020_趴键盘眼神疲惫摆烂无力.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 023_拿喇叭表情严肃通知喊话.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 029_眼睛瞪大旁边数字67惊讶倒计时.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 041_趴键盘愤怒符号抓狂打字.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 043_眼睛圆圈失神嘴巴抿着震惊呆滞.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 047_手指放下巴思考若有所思.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 048_手指向前指微笑指示提醒.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 053_眼睛瞪大微笑惊讶好奇期待.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 082_眼睛瞪大头上汗珠尴尬紧张心虚.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 092_头上问号张嘴疑惑好奇思考.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 124_双手捧脸张嘴惊讶震惊害怕.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 133_眼睛瞪大双手捧脸惊讶震惊害怕.gif · assets/examples/wukong-c-clean/Shark-GIF/
• 06_蹙眉闭唇_窘迫羞恼.png · assets/examples/wukong-c-clean/anan - emotion rename/
• 07_睁眸微张_愕然疑惑.png · assets/examples/wukong-c-clean/anan - emotion rename/
• 08_倦眼半阖_慵懒无力.png · assets/examples/wukong-c-clean/anan - emotion rename/
• 13_掩袖低眸_羞怯暗思.png · assets/examples/wukong-c-clean/anan - emotion rename/
• 15_平举素纸_认真以待.png · assets/examples/wukong-c-clean/anan - emotion rename/
• index.html · assets/examples/wukong-c-clean/
• w11.jfif · assets/examples/wukong-c-clean/material/
• winxp.png · assets/examples/wukong-c-clean/material/
• shot-01_C盘爆红哪个能删.html · assets/examples/wukong-c-clean/
• shot-02_快捷方式与程序本体.html · assets/examples/wukong-c-clean/
• shot-03_对撞卡与虚拟机.html · assets/examples/wukong-c-clean/
• shot-04_删Windows失灵链.html · assets/examples/wukong-c-clean/
• shot-05_蓝色自动修复.html · assets/examples/wukong-c-clean/
• shot-07_本机底子305G.html · assets/examples/wukong-c-clean/
• shot-08_色块画布.html · assets/examples/wukong-c-clean/
• shot-09_钻进AppData.html · assets/examples/wukong-c-clean/
• shot-10_剪映72G拆解.html · assets/examples/wukong-c-clean/
• shot-11_Edge_Temp_updater.html · assets/examples/wukong-c-clean/
• shot-12_串烧快切.html · assets/examples/wukong-c-clean/
• shot-13_占比浮层.html · assets/examples/wukong-c-clean/
• shot-15_根目录导览.html · assets/examples/wukong-c-clean/
• shot-16_WinSxS组件仓库.html · assets/examples/wukong-c-clean/
• shot-17_双窗对比.html · assets/examples/wukong-c-clean/
• shot-18_程序和功能.html · assets/examples/wukong-c-clean/
• shot-19_回收站三步.html · assets/examples/wukong-c-clean/
• shot-21_根目录结论.html · assets/examples/wukong-c-clean/
• shot-41_文件夹选项.html · assets/examples/wukong-c-clean/
• shot-42_hiberfil休眠文件.html · assets/examples/wukong-c-clean/
• shot-43_pagefile虚拟内存.html · assets/examples/wukong-c-clean/
• icon.png · assets/examples/wukong-c-clean/wukong/
• logo-h-black.png · assets/examples/wukong-c-clean/wukong/
• logo-h-color.png · assets/examples/wukong-c-clean/wukong/
• logo-h-white.png · assets/examples/wukong-c-clean/wukong/
• 0添加-彩.png · assets/examples/wukong-c-clean/悟空安全logo+icon/0添加/
• 0添加-白.png · assets/examples/wukong-c-clean/悟空安全logo+icon/0添加/
• 0添加-黑.png · assets/examples/wukong-c-clean/悟空安全logo+icon/0添加/
• 悟空安全0添加-彩.png · assets/examples/wukong-c-clean/悟空安全logo+icon/0添加/
• 悟空安全0添加-白.png · assets/examples/wukong-c-clean/悟空安全logo+icon/0添加/
• 悟空安全0添加-黑.png · assets/examples/wukong-c-clean/悟空安全logo+icon/0添加/
• 中_全彩_组合.png · assets/examples/wukong-c-clean/悟空安全logo+icon/logo/
• 中_全彩_组合无方框.png · assets/examples/wukong-c-clean/悟空安全logo+icon/logo/
• 中_全白_组合.png · assets/examples/wukong-c-clean/悟空安全logo+icon/logo/
• 中_全白_组合无方框.png · assets/examples/wukong-c-clean/悟空安全logo+icon/logo/
• 中_全黑_组合.png · assets/examples/wukong-c-clean/悟空安全logo+icon/logo/
• …and 30 more

SKILL.md (first lines)

# 仿 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 版式"；截图验证无遮挡穿帮

From Unclecheng-li/AI_Animation, MIT.

More from Unclecheng-li/AI_Animation