Agent skill

Win11 UI Demos

by Unclecheng-li in Unclecheng-li/AI_Animation

制作"仿 Windows 11 系统 UI"的写实仿真网页演示动画——观众像在看一台真 Win11 电脑的精心编排录屏:桌面、任务栏、资源管理器、开始菜单、右键菜单、系统对话框、通知、WinRE 蓝屏 1:1 还原,光标演出引导操作,教学标记层叠加讲解,电影化播放器全屏录屏即成片。只要用户提到:仿 Win11/Windows 演示、系统 UI 仿真动画、电脑教学演示页、软件操作教程动画、把…

MITAuto-check passed

Install Win11 UI Demos

skills CLI
$ npx skills add Unclecheng-li/AI_Animation --skill win11-ui-demos -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Unclecheng-li/AI_Animation win11-ui-demos --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Unclecheng-li/AI_Animation.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/win11-ui-demos .claude/skills/win11-ui-demos && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
win11-ui-demos
GitHub stars
1.5k
Token cost
~535 tokens
SKILL.md length
119 words
Files
100 (incl. references, assets)
Skills in repo
12
Repo updated
First seen
Licence
MIT

At a glance

制作"仿 Windows 11 系统 UI"的写实仿真网页演示动画——观众像在看一台真 Win11 电脑的精心编排录屏:桌面、任务栏、资源管理器、开始菜单、右键菜单、系统对话框、通知、WinRE 蓝屏 1:1 还原,光标演出引导操作,教学标记层叠加讲解,电影化播放器全屏录屏即成片。只要用户提到:仿 Win11/Windows 演示、系统 UI 仿真动画、电脑教学演示页、软件操作教程动画、把…

  • Works in 6 steps: 像素级还原是生命线:窗底 #f3f6fb、accent #0067c0、圆角… → 光标是主角:一支全程可见的鼠标(移动→悬停→单击→双击)就是叙事者,观众跟着它走。… → 教学标记层与还原层分离:界面归界面(1:1),讲解归讲解(问号徽章、警告牌、容量爆… → …
  • SKILL.md covers 创作哲学, Token 纪律(硬性), 工作流 and 交付标准
  • Calls node

What it does

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

Its SKILL.md is about 540 tokens, which your agent loads only when the skill is triggered. The skill folder holds 103 other files, including reference files and assets (for example `README.md`).

It works with Windows. The repository describes itself as: 本项目整理了用于生成[炫酷 HTML 动画网页]的 AI Prompts,涵盖动画效果、3D 可视化、PPT 风格演示、UI 美化等多个类别。 The licence is MIT.

Example prompts

  • “仿 Windows 11 系统 UI”
  • “真电脑里发生的事”
  • “/win11-ui-demos”

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

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

What it can do on your machine

Read from SKILL.md and the folder at commit d9c521f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • node

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Win11 UI Demos loads about 535 tokens when it runs, and up to ~2.6k if it reads all its reference files. Until then it costs about 76 tokens; SKILL.md has 119 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~76
When it runs · the whole SKILL.md, loaded when a task matches
~535
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Unclecheng-li/AI_Animation at commit d9c521f, republished under its MIT licence (© Unclecheng-li). 119 words, ~535 tokens.

Download SKILL.mdSave it as .claude/skills/win11-ui-demos/SKILL.md (or your agent's skills folder). This skill also uses 99 other files; get the full folder from GitHub.
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 版式";截图验证无遮挡穿帮

© Unclecheng-li, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 99 other files (references, assets) in skills/win11-ui-demos of Unclecheng-li/AI_Animation.

  • SKILL.md
  • README.md
  • assets/examples/wukong-c-clean/Shark-GIF/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/anan - emotion rename
  • … and 83 more

Open the folder on GitHubat commit d9c521f

Compare with similar skills

Win11 UI Demos next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Win11 UI Demos compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Win11 UI Demos this skillUnclecheng-li/AI_Animation1.5k—~535Automated safety check: PassMIT
Translation Diff ExportDevolutions/UniGetUI26k—~1.1kAutomated safety check: PassMIT
Translation Diff ImportDevolutions/UniGetUI26k—~750Automated safety check: PassMIT
Translation Diff TranslateDevolutions/UniGetUI26k—~934Automated safety check: PassMIT
Translation ReviewDevolutions/UniGetUI26k—~1.3kAutomated safety check: PassMIT
Translation Source SyncDevolutions/UniGetUI26k—~1.2kAutomated safety check: PassMIT

Similar skills

  • Translation Diff Export

    Devolutions/UniGetUI

    Compares UniGetUI JSON locale files against English, identifies untranslated or source-changed keys, and generates patch, reference, and handoff files for a target language.

    26k GitHub stars~1.1k tokensUpdated yesterday
    Writing & ContentAuto-check passed
  • Translation Diff Import

    Devolutions/UniGetUI

    Merges translated key-value pairs from a UniGetUI JSON localization patch back into the full language file and validates the merged result.

    26k GitHub stars~750 tokensUpdated yesterday
    Writing & ContentAuto-check passed
  • Translation Diff Translate

    Devolutions/UniGetUI

    Translates a sparse UniGetUI JSON language patch, writes completed entries into the working copy, preserves placeholders and terminology, and prepares the patch for merge-back.

    26k GitHub stars~934 tokensUpdated yesterday
    Writing & ContentAuto-check passed
  • Translation Review

    Devolutions/UniGetUI

    Reviews UniGetUI .json language files for localization quality, detects parity issues, English-equal entries, wrong-script content, and cross-language outliers, then generates a dataset for…

    26k GitHub stars~1.3k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Translation Source Sync

    Devolutions/UniGetUI

    Synchronizes the UniGetUI English language file with source-code usage, identifies missing translation keys, removes unused entries, reports localization drift, and can reorder locale files to match…

    26k GitHub stars~1.2k tokensUpdated yesterday
    Writing & ContentAuto-check passed
  • Winui App

    LanceMcCarthy/DevOpsExamples

    Bootstrap, develop, and design modern WinUI 3 desktop applications with C and the Windows App SDK using official Microsoft guidance, WinUI Gallery patterns, Windows App SDK samples, and…

    172 GitHub starsUsed in 1 repo~2.8k tokens
    DevOps & CloudAuto-check passed

More from Unclecheng-li/AI_Animation

All 12 skills in this repo
  • Archify Diagram Builder

    Unclecheng-li/AI_Animation

    Builds validated architecture, workflow, sequence, data-flow and lifecycle diagrams as standalone interactive HTML from a small JSON spec, with optional motion and image export.

    1.5k GitHub starsUsed in 2 repos~4.1k tokens
    Auto-check passed
  • Video Shot Demo Pages

    Unclecheng-li/AI_Animation

    Produces one self-contained HTML animation page per video shot, sharing a cinematic player base but giving each page its own visual style, sound cues and characters.

    1.5k GitHub stars~617 tokensUpdated 6 days ago
    Auto-check passed
  • Card Theater

    Unclecheng-li/AI_Animation

    Generates a single-file HTML presentation that pairs a narrated sidebar with a 3D card carousel, for walking through protocols, product features or step-by-step processes.

    1.5k GitHub stars~877 tokensUpdated 6 days ago
    Auto-check passed
  • Phone UI Demo Animations

    Unclecheng-li/AI_Animation

    Turns a product, lesson or script into a cinematic web animation staged inside a realistic phone interface, with lock screens, chats, settings and a virtual-clock player.

    1.5k GitHub stars~703 tokensUpdated 6 days ago
    Auto-check passed
  • Plotbeat Data Videos

    Unclecheng-li/AI_Animation

    Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.

    1.5k GitHub stars~2.6k tokensUpdated 6 days ago
    Auto-check passed
  • Stacked Data Cards Animation

    Unclecheng-li/AI_Animation

    Generates a single-file HTML animation in which white argument cards pop up in turn, older ones stack to the left and data widgets animate in, timed to a voiceover.

    1.5k GitHub stars~1.1k tokensUpdated 6 days ago
    Auto-check passed

Works with

Questions about Win11 UI Demos

What does Win11 UI Demos do?

制作"仿 Windows 11 系统 UI"的写实仿真网页演示动画——观众像在看一台真 Win11 电脑的精心编排录屏:桌面、任务栏、资源管理器、开始菜单、右键菜单、系统对话框、通知、WinRE 蓝屏 1:1 还原,光标演出引导操作,教学标记层叠加讲解,电影化播放器全屏录屏即成片。只要用户提到:仿 Win11/Windows 演示、系统 UI 仿真动画、电脑教学演示页、软件操作教程动画、把…. Win11 UI Demos is an agent skill from Unclecheng-li/AI_Animation.

How do I install Win11 UI Demos in Claude Code?

Run `npx skills add Unclecheng-li/AI_Animation --skill win11-ui-demos -a claude-code`. Or copy the skill folder (skills/win11-ui-demos in Unclecheng-li/AI_Animation) into .claude/skills/win11-ui-demos in your project. Claude Code loads it when a task matches its description.

How do I install Win11 UI Demos in Codex?

Run `npx skills add Unclecheng-li/AI_Animation --skill win11-ui-demos -a codex`. Or copy the skill folder (skills/win11-ui-demos in Unclecheng-li/AI_Animation) into .agents/skills/win11-ui-demos in your project. Codex loads it when a task matches its description.

Can I use Win11 UI Demos in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Unclecheng-li/AI_Animation --skill win11-ui-demos -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/win11-ui-demos, .gemini/skills/win11-ui-demos, .github/skills/win11-ui-demos and .opencode/skills/win11-ui-demos in your project.

What does Win11 UI Demos need to run?

Going by SKILL.md and its folder, Win11 UI Demos needs the command-line tools its instructions call (node).

Does Win11 UI Demos access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Win11 UI Demos safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Win11 UI Demos use?

Win11 UI Demos is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Win11 UI Demos use?

About 535 tokens (SKILL.md is roughly 2.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 2.1k tokens, read only when the agent opens those files.

What are the alternatives to Win11 UI Demos?

Skills that share tags, products or a category with Win11 UI Demos: Translation Diff Export (Devolutions/UniGetUI, 26k stars), Translation Diff Import (Devolutions/UniGetUI, 26k stars), Translation Diff Translate (Devolutions/UniGetUI, 26k stars) and Translation Review (Devolutions/UniGetUI, 26k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Win11 UI Demos?

Unclecheng-li (a GitHub user) maintains it in Unclecheng-li/AI_Animation, which has 1,478 GitHub stars. The repository holds 12 skills in this directory. The repository was last updated on October 5, 2026.

Source: Unclecheng-li/AI_Animation on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.