swiss-shot-demos

瑞士风格图表驱动演示动画（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 类（真机/软件界面仿真）保留仿真本体、只把舞台底/页头/标注/角注/结论条瑞士化。素材复制（勿读内容）：

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=毫秒 起播后冻结在该时刻，直接无头截图（无需改文件）：

& "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 四问全过