---
name: swiss-shot-demos
description: 制作"瑞士国际主义风格（Swiss Style）+ 图表驱动"的视频分镜演示动画——纸灰底/炭黑墨/发丝线/唯一强调橙的编辑部级排版，每页用匹配内容的可视化图表（时间线/循环环/流程链/对照表/点阵计数/热力矩阵…）代替文字堆砌，一镜一 HTML，电影化播放器全屏录屏即成片。只要用户提到：瑞士风格演示页、Swiss Style 动画、图表驱动的分镜演示、把口播稿做成可视化动画、信息图风格演示动画、或要求把一批演示页从暗色油光改成瑞士风/杂志编辑风——就用本 Skill。内容完全开放不设限：技术教程、产品发布、安全科普、知识叙事皆可。与 video-shot-demos（风格轮换体系）同底盘，但本 Skill 全系列统一一套瑞士设计语言，靠图表类型与版式变化制造镜头差异。
---

# 瑞士风格图表驱动演示动画（Swiss Style · 一镜一 HTML）

把视频分镜做成**编辑部级排版 + 可视化图表**的演示动画：纸灰底、炭黑墨、发丝线、灰阶明度阶梯、**每页唯一强调橙**；每个镜头的主体是一张与内容匹配的"图表"（时间线、循环环、流程链、双列对照、点阵计数、热力矩阵、泳道、嵌套剖视……），而不是文字堆砌。一镜一 HTML，电影化底盘（黑场起手/虚拟时钟/镜头推拉/WebAudio 音效），全屏录屏即成片。

**反模式就是本 Skill 的诞生理由**：AI 默认生成的演示页永远是"乌漆墨黑+油光锃亮"（黑底+霓虹发光+渐变光斑）——本系统全面禁用，改用瑞士国际主义的平面克制：白纸、墨字、一根发丝线、一点橙。

## 创作哲学

1. **图表优先**：拿到任何一段口播，先问"这是什么图"——流程→链/泳道，循环→环，对比→双列/slopegraph，数量→点阵/计数，时间→时间线，结构→嵌套/分层，分布→热力矩阵。文字只做标题/标签/结论条，主体图形区 ≥55% 面积。
2. **明度即数据**：灰阶阶梯 L1-L7 承载全部层级（重要=最黑），彩色只留一个橙 `#F5572F` 标"本页唯一主角"（最大数字/结论/焦点节点/警示）。
3. **排版即力量**：Inter 大字排版（主标题 64-120px、断言数字 120-260px·800-900、eyebrow 15px uppercase tracking .14em）+ 88px 页边距 + 12 列网格 + 非对称布局（左重右轻）。
4. **克制是美德**：禁 glow/霓虹 text-shadow、径向光斑、光泽渐变、vignette、扫描线、颗粒、大模糊阴影。允许：平面色块、1-2px 发丝线、虚线、反白（墨底纸字）、细网格。
5. **动画快进快停**：quarticOut/cubicOut 缓动；入场三式 pop/fade/draw；禁弹跳闪烁发光。节拍动画一律 cue+tws（可暂停可冻结），纯装饰才用 CSS animation。
6. 每镜头 15-45s；口播不上屏（cue 注释对齐时间戳）；数字不许编（白名单纪律）。

## Token 纪律（硬性）

- **禁止通读** `assets/template.html` 与 `assets/examples/` 下任何成片页。模板 `cp` 复制后 `grep -n "改这里\|DUR="` 拿行号，只读标记区；成片页卡壳时 grep 定位后窗口读 ≤80 行。
- 知识优先取 `references/` 四份浓缩文档（swiss-system 设计正本 / chart-skill-bridge 三技能融合选型 / chart-vocabulary 内建图表词汇 / production-spec 生产纪律）。

## 工作流

**第 0 步 · 分镜表**：通读素材（口播稿带时间戳/大纲/分镜脚本），拆成 `镜头|时长|图表主视觉(选型)|页面分类(A 信息动效 / B 拟真仿真)` 分配表给用户确认。页面分类决定策略：A 类全瑞士+图表最大化；B 类（真机/软件界面仿真）保留仿真本体、只把舞台底/页头/标注/角注/结论条瑞士化。素材复制（勿读内容）：

```bash
cp -r "assets/examples/vulnclaw-tutorial/Shark-GIF" <输出目录>/    # 大肥鱼 GIF（角色位）
```

**第 1 步 · 逐页实现**：`cp assets/template.html <输出目录>/shot-x-x_名称.html` → grep 定位 → 只改【改这里】区：eyebrow+大标题+主图表（从 chart-vocabulary 选型）+ cue 表。底盘/瑞士 tokens/组件库不动。

**图表技能桥接**（主视觉选型时优先查 `references/chart-skill-bridge.md`）：内置 diagram-design（14 型概念示意图，MIT）与 archify（5 型工程图，MIT）于 `assets/chart-skills/`，lieflat-charts（63 型数据图表法典，NC 许可需自行安装）——按"有数字→lieflat / 讲关系→diagram-design / 讲系统→archify / 轻量示意→内建"匹配选择，外部图并入时按桥接文档做 Swiss 换肤（tokens 覆盖/去交互/cue 驱动）。读型文档按需单读，勿通读 gallery。

**第 2 步 · 质检**：底盘自带 QA 钩子——URL 加 `#auto,t=毫秒` 起播后冻结在该时刻，直接无头截图（无需改文件）：

```bash
& "C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --headless --disable-gpu --hide-scrollbars --window-size=1920,1080 --virtual-time-budget=4500 --screenshot="_qa\p_t6000.png" "file:///C:/路径/shot-x-x.html#auto,t=6000"
```

每页 ≥4 时间点（开场/中段/高潮/结尾）+ 控制台零错误。**审美四问逐页过**：① 纸底/墨字/发丝线系统一致？② 无残留发光/渐变/油光？③ 大字层级与网格成立、主视觉 ≥55%？④ 图表词汇真实落位且与内容匹配？

**第 3 步 · index 总览**：按章节分组的调度板（同瑞士系统），列每镜时长/图表类型/分类标签。

## 交付标准

- [ ] 黑场「启动播放」起手；1920×1080 自适应；HUD 底部唤出（进度条墨色）；可暂停重播；DUR 精确
- [ ] 瑞士 tokens 唯一正本（纸 `#F0EFEB`/墨 `#1C1C1A`/橙 `#F5572F`/灰阶阶梯）；Inter+Noto Sans SC+IBM Plex Mono 三件套
- [ ] 主体图形区 ≥55%；eyebrow→大标题→图表 三件套结构；橙每页 ≤3 处、只标一个主角
- [ ] 图表词汇与内容匹配（见 chart-vocabulary 选型表）；零发光/渐变/光斑
- [ ] cue 注释=口播原句+时间戳；口播不上屏；数字白名单不编造
- [ ] 大肥鱼 1-2 次（纸底气泡：白底+1px 墨边+黑字+橙关键词）；角注出处；QA 四问全过