| name | video-shot-demos |
| description | 为视频/课程/解说文案制作"每镜头一个 HTML"的高完成度网页演示动画（分镜演示页、视频配套演示动画、录屏用动画网页、科普/技术/产品发布可视化镜头）。只要用户提到：给视频做演示动画网页、分镜 HTML、shot 页面、把口播稿/大纲做成动画、视频画面设计网页版、录一段网页动画、或要求改造升级一批已有演示页——就用本 Skill。核心是统一的电影化播放器机制 + 每页完全不同的视觉风格 + 镜头语言 + 同步音效 + 角色表情吐槽，内容完全开放不设限。 |
视频分镜演示动画（每镜头一个 HTML）
一个镜头 = 一个独立 HTML，统一播放器底盘 + 每页一种完全不同的视觉风格，全屏录屏即成片。内容开放（技术实测/产品发布/课程/叙事皆可），不变的是电影化机制、镜头语言与完成度标准。
创作哲学
- 风格轮换：连续镜头绝不同风格。问"这段内容若是一件实物/一个场所，它是什么"——复古报纸、POS 小票、审讯室、像素游戏……把抽象内容具象成一个世界观，页面就活了。
- 禁默认科技暗色：黑底+霓虹+玻璃拟态的"乌漆墨黑油光锃亮"两页即疲劳，除非内容本身是终端主题。
- 想象力优先：底盘之上放开写——会砸下的印章、会掉进存钱罐的硬币，用户要惊喜感。
- 完成度是纪律：元素有入有出（或定格）、无重叠遮挡、无孤儿元素、结尾有重播暗示、数据有出处角注。
- 音画同步：关键动作有音效、镜头移动配 whoosh；安静也是设计。
Token 纪律（硬性）
- 禁止通读
assets/template.html 与 assets/examples/ 下任何成片页（单个 20–50KB，读完耗尽预算）。
- 模板一律
cp 复制后只读标记区域（第 1 步）；成片页仅当写完仍卡壳时，grep 定位后按行号窗口读 ≤80 行。
- 机制与风格知识优先取自
references/ 三份浓缩文档，不要现场读源码反推。
工作流
第 0 步 · 输入与风格分配表：通读素材（大纲/口播稿/画面设计/口述），拿到分镜列表 + 口播时间戳（时间轴对齐基准）+ 角色素材。排表 镜头|时长|视觉风格|字体组合|主色：相邻不同风格、整辑不重复、同一实体全系列锁同一颜色（观众靠颜色跨页追踪）。表给用户确认后再动工。素材复制（勿读内容）：
cp -r "assets/examples/<项目>/anan - emotion rename" <输出目录>/
cp -r "assets/shery - emotion rename" <输出目录>/
第 1 步 · 逐页实现（cp 起步，只读标记区）：
cp assets/template.html "<输出目录>/shot-x-x_名称.html"
grep -n "改这里\|DUR=" "<输出目录>/shot-x-x_名称.html"
用 Read 的 offset/limit 只读标记行附近区域（字体 link+舞台底色 / 画面层 CSS / 画面 HTML / cue 表+DUR），逐一替换：① 字体与配色（Google Fonts 随风格）；② 重画画面层；③ 按口播时间戳写 cue（注释引用口播句，如 // 5:20「正常充值」）；④ DUR=规定时长±0.5s。底盘（引导脚本/音效引擎/时间轴/镜头调度/HUD）不动。
按需读参考（都很小）：references/mechanics.md 播放器+镜头+音效机制 ｜ references/style-cards.md 40 种风格卡片（字体/主色/材质/样板页号） ｜ references/character-reactions.md 双角色吐槽体系（安安×橘雪莉情绪表、中段快闪切立绘、双人同框 cue、气泡强约束模板）。
第 2 步 · 质检：node scripts/shot.js 页面.html <毫秒> _t.png [fx fy scale] 多时间点无头截图，逐张查重叠遮挡/中间态穿帮/收尾定格，最后完整播一遍。
第 3 步 · index 总览：按章节分组的导航卡（编号/时长/标题/风格标签），自成一种风格。
翻新已有页面时：先盘点并列清单（用户点名保留的页面一字不动）→ 底盘统一注入 → 逐页重设计画面层 → 补角色/镜头/音效 cue → 质检。
交付标准
