# Swiss Shot Demos

制作"瑞士国际主义风格（Swiss Style）+...

- Repository: https://github.com/Unclecheng-li/AI_Animation (1689 stars)
- Category: Media
- License: MIT
- Last updated: 2026-10-26
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add Unclecheng-li/AI_Animation --skill swiss-shot-demos -g -a claude-code -y`
Codex: `npx skills add Unclecheng-li/AI_Animation --skill swiss-shot-demos -g -a codex -y`
Cursor: `npx skills add Unclecheng-li/AI_Animation --skill swiss-shot-demos -g -a cursor -y`
Gemini CLI: `npx skills add Unclecheng-li/AI_Animation --skill swiss-shot-demos -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 瑞士风格图表驱动演示动画（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。

The rest: https://github.com/Unclecheng-li/AI_Animation/blob/HEAD/skills/swiss-shot-demos/SKILL.md