---

name: win11-ui-demos

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

win11-ui-demos

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

Star: 1,505
分类: 前端与设计
许可证: MIT
最近提交: 2026年10月5日

安装

将下方内容发给 Claude Code、Codex 或 Cursor。智能体先检查 Skill 内容，经你确认后安装。

读取 https://funcoding.ai/skills/unclecheng-li/ai_animation/win11-ui-demos/install.md ，按里面的步骤帮我安装这个 Skill。

Star 趋势

近 7 天: +60
近 30 天: +230

1.5k

2026年4月11日2026年10月13日

Star 趋势
2026年4月11日	38
2026年7月16日	944
2026年7月20日	965
2026年7月24日	985
2026年7月28日	1012
2026年8月1日	1040
2026年8月5日	1064
2026年8月9日	1082
2026年8月13日	1100
2026年8月17日	1117
2026年8月21日	1147
2026年8月25日	1164
2026年8月29日	1179
2026年9月2日	1204
2026年9月6日	1227
2026年9月10日	1257
2026年9月14日	1281
2026年9月18日	1299
2026年9月22日	1346
2026年9月26日	1376
2026年9月30日	1408
2026年10月4日	1431
2026年10月8日	1459
2026年10月12日	1502
2026年10月13日	1505

来源仓库

Unclecheng-li/AI_Animation

本项目整理了用于生成[炫酷 HTML 动画网页]的 AI Prompts，涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。

在 GitHub 上查看

同仓库的其他 Skill29

查看全部

skills/win11-ui-demos/SKILL.md

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

观众看到的是一台真 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 总览：按章节分组的导航卡（编号/时长/系统场景标签），并保留"界面为演示还原"声明。