Skip to content
FunCoding

win11-ui-demos

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

Star
1,505
Category
Frontend & design
License
MIT
Last commit
Oct 5, 2026

skills/win11-ui-demos/SKILL.md

View on GitHub

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

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

Similar Skills

prototype

MAmattpocock/skills288k10,178 new stars in the last 7 days

angular-developer

AFaffaan-m/ECC278k4,046 new stars in the last 7 days

Official

firecrawl-build-scrape

FIfirecrawl/firecrawl191k2,010 new stars in the last 7 days

Featured

frontend-design

Set visual direction and typography for UI, avoiding templated defaults.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

theme-factory

Apply color and font themes to slides, docs and web pages, with 10 built-in themes.

ANanthropics/skills181k1,119 new stars in the last 7 days

Featured

web-artifacts-builder

Build complex HTML artifacts with React, Tailwind CSS, state management and routing.

ANanthropics/skills181k1,119 new stars in the last 7 days