Update README and Swiss deck workflow

references/checklist.md

@@ -8,16 +8,202 @@
 
 ## 🔴 P0 · 一定不能犯的错
 
+### 0-S. Swiss locked mode:正文页必须来自原始 22P
+
+**现象**:颜色、字体看起来像 Swiss,但标题跑到中间、图片不在网格上、页面结构和原始 22P 完全不是一套东西。
+
+**根因**:生成时把 Swiss 当成风格包,自由组合了新的 P23/P24/自绘 SVG 页面,没有从原始参考 PPT 的 22 个登记版式里选。
+
+**做法**:
+- 先读 `references/swiss-layout-lock.md`
+- 正文页只能使用 `S01-S22`;新增首页/尾页只能使用 `SWISS-COVER-ASCII` / `SWISS-CLOSING-ASCII`
+- 每个 `<section class="slide">` 必须写 `data-layout="Sxx"`
+- 生成后必须运行:
+
+```bash
+node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
+```
+
+**校验会拦截**:
+- 未登记版式 / 缺少 `data-layout`
+- P23/P24 实验结构
+- SVG 里写可见文字
+- S22 图片未绑定 `s22-hero-21x9`
+- S22 照片使用 `object-position:top center`
+
+### 0-S-2. Swiss 顶部标题默认左上,不是居中
+
+**现象**:最顶上的中文标题在页面中间,像一页自制海报,不再像原始 PPT。
+
+**做法**:
+- 除 `S03/S09/S10` 这类 statement/split 版式外,顶部标题必须贴原始模板的左上内容轴。
+- 不要把小标题放左列、大标题放右侧大列,这会导致标题视觉居中。
+- 如果需要标题 + 说明两列,必须复制原始 `S11` 或 `S17` 的骨架,不要自写 `4fr 8fr`。
+
+### 0-A. 瑞士风画布对齐法则(每一页必查 · 最常踩)
+
+**现象**:页眉 chrome-min 和底部 footer 都靠在 5vw 的边线上,但中间区域往内缩了一截,左右对不齐。
+
+**根因**:`.canvas-card` 已经自带 `padding:5.6vh 5vw 4.4vh`。如果在主体区再写 `padding:5vh 5vw 4vh`,水平方向就变成 `5vw + 5vw = 10vw`,主体比 chrome-min 多内缩 5vw。
+
+**做法**:
+- 主体那层 `padding:0`,只用 grid `gap` 控垂直间距
+- chrome-min 与主体之间的间距由 `.chrome-min{margin-bottom:48px}` 提供,**不要**在主体顶部叠 `margin-top` / `padding-top`
+- split 模式例外:`.slide.split .canvas-card{padding:0}`,两个 `.half` 自己定 `padding:5.6vh 3.6vw 4.4vh`
+
+```html
+<!-- ❌ 错:主体多缩了 5vw,左右对不齐 -->
+<div class="canvas-card">
+  <div class="chrome-min">...</div>
+  <div style="flex:1;padding:5vh 5vw 4vh;...">主体</div>
+</div>
+<!-- ✅ 对 -->
+<div class="canvas-card">
+  <div class="chrome-min">...</div>
+  <div style="flex:1;padding:0;display:grid;grid-template-rows:auto 1fr auto;gap:3vh">主体</div>
+</div>
+```
+
+**自检命令**:`grep "padding:.*5vw" index.html`,如果命中 `padding:Xvh 5vw Yvh` 在 canvas-card 直系子元素里,就是错的(.half / 装饰层除外)。
+
+### 0-B. 瑞士风 head 区:kicker 必须在大标题"上方"(不要左右排)
+
+**现象**:小标题(`.t-meta` / `.t-cat`)和大标题被挤在同一行,左侧一坨小字、右侧一坨大字,头部失去层级。
+
+**根因**:`grid-template-columns:auto 1fr` 把两个本该上下叠的元素压成左右两列。
+
+**做法**:
+```html
+<!-- ❌ 错 -->
+<div data-anim="head" style="display:grid;grid-template-columns:auto 1fr;gap:3vw;align-items:end">
+  <div class="t-meta">METHODOLOGY · 03</div>
+  <h2 class="h-xl-zh">为什么是 N+1</h2>
+</div>
+<!-- ✅ 对 -->
+<div data-anim="head" style="display:flex;flex-direction:column;gap:1.4vh">
+  <div class="t-meta">METHODOLOGY · 03</div>
+  <h2 class="h-xl-zh">为什么是 N+1</h2>
+</div>
+```
+
+例外:head 一行同时承载"左:kicker+大标题(自己上下叠)"和"右:小注脚",外层可以用 `display:grid;grid-template-columns:1fr auto`,但**内层**仍要保持 flex column。
+
+### 0-B-2. 瑞士风封面 / 封底默认:IKB 满屏 + ASCII 呼吸场 + 白色 weight 200(强制)
+
+**现象**:封面用 `slide light` 白底 + 黑字 + 一个大大的"01"——同时 chrome 角标已经写了 `01 / 07`,屏幕上出现两个"01",视觉重复;白底太普通,完全没有"开场打招呼"的仪式感。
+
+**根因**:layouts-swiss.md 旧版默认推荐左 ink + 右 paper 对开,实操中容易写成"白底 + 黑大字 + 编号大字",失去 IKB 这个标志色的开场冲击。
+
+**做法**(瑞士风必守):
+- **封面强制 `<section class="slide accent">`**(满屏 IKB),不要 `slide.light`,也不要 `slide.dark`;在 `.canvas-card` 内**第一个子元素**插入 `<canvas class="ascii-bg">`(ASCII 字符呼吸场,模板自带 IIFE 自动激活)
+- **不要再写"01"等编号大字**:`.chrome-min` 已经显示 `01 / N`,封面再放一个巨大的"01"=同义重复,直接删掉
+- **强调字必须用斜体**:`font-style:italic;font-weight:300`,**禁止**用 `color:var(--accent)`——IKB 蓝压 IKB 蓝,人眼看不见任何强调
+- **封底强制 `slide.split`** 双半屏,左半 `.half.b-accent` + ASCII canvas(与封面色彩闭环),右半 paper 白底放 3 条 takeaway;**第 03 条**用 `var(--accent)` 上色,完成"开场全 IKB ↔ 收尾半 IKB"的色彩闭环
+- ASCII canvas 在模板的 `<style>` 里已经预设 `mix-blend-mode:screen;opacity:.92`,不要去动这个值
+- 封面/封底主标题字号双约束:`min(11.6vw,19vh)` ~ `min(8vw,14vh)`(遵守 Y ≥ X × 1.6 规则)
+
+**自检命令**:
+- `grep -c "ascii-bg" index.html`——封面 + 封底应至少命中 ≥ 2(各一个 canvas)
+- `grep -E '"slide accent"' index.html | head -1`——封面应是 `slide accent` 而非 `slide light`
+- `grep "color:var(--accent)" index.html`——若命中行同时含 `font-style:italic` 即危险信号(蓝压蓝),改为只 italic 不 accent;只有封底"03 takeaway"那一处用 `var(--accent)` 是合法的(此时背景是白色)
+- 目视:打开页面看封面有没有"01"等大编号——有就删
+
+### 0-C. 瑞士风大字号双约束:`min(Xvw, Yvh)` 中 Y ≥ X × 1.6
+
+**现象**:在 16:9 标准屏(MacBook 13/14/16,常见显示器)打开,标题字号比预期小一截,整页内容显得空旷或缩水。
+
+**根因**:1vw : 1vh ≈ 1.78,如果写 `min(7vw, 10vh)`,在 16:9 屏 7vw = 12.46vh,会被 10vh 上限截断到 10vh,字号缩水 20%。
+
+**做法**:推荐数值速查
+| 用途 | 推荐 |
+|---|---|
+| h-hero 巨字宣言 | `min(11.6vw, 19vh)` |
+| h-xl 章节标题 | `min(7vw, 12vh)` ~ `min(7.4vw, 13vh)` |
+| 大数字 KPI | `min(8.4vw, 14vh)` |
+| 中数字 / 编号 | `min(4.6vw, 8.5vh)` ~ `min(5.6vw, 10vh)` |
+| 副标 | `min(7.6vw, 13vh)` |
+
+**自检命令**:`grep -E "font-size:min\([0-9.]+vw,\s*[0-9.]+vh\)" index.html`,把所有命中的 X/Y 看一眼,任何 Y/X < 1.6 都改大。
+
+### 0-D. 瑞士风图片混排:直角、同高、只做证据
+
+**现象**:图片像普通 PPT 插图,圆角、阴影、比例混乱;多张截图高度不一,或 GPT-M 2.0 生成图自带标题/页脚,和页面 chrome 重复。
+
+**根因**:瑞士风的图片不是装饰,而是 grid 里的证据块。没有先选原始版式和图片槽位,就会把任意图片硬塞进页面。
+
+**做法**:
+- 先选版式:单张大图 + KPI 用 `S22`;多图用 `S15/S16` 的原始网格骨架改造
+- S22 生成图比例固定 `21:9`,并在 `<img>` 上写 `data-image-slot="s22-hero-21x9"`
+- 照片默认 `object-position:center 35%` 或 `center center`,不要用 `top center` 截人脸
+- 图片容器只用 `.frame-img`;**不要** `border-radius` / `box-shadow`
+- UI / 信息图 / 流程图若是用户原始截图或文字密集图,使用 `.fit-contain`;若已按槽位重生成,必须用对应比例类铺满容器,例如 `.frame-img.r-21x9`,不能再用固定短高度把图片缩小
+- 多图同组必须统一槽位、比例、高度,不要混用
+- GPT-M 2.0 提示词必须写明:Swiss Style、单一 accent、直角、无渐变/阴影/圆角、无页眉页脚标题角标
+
+**自检命令**:
+- `grep -E "frame-img.*border-radius|box-shadow" index.html`——命中就删
+- `grep -n "data-image-slot" index.html`——每张本地图片都应有槽位声明
+- 目视:图片内部如果自带大标题、页码、页脚、角标,优先重生成,不要在页面里再裁切硬救
+
+### 0-D-2. 瑞士风底部分页安全区:最低处不要碰 nav
+
+**现象**:图片 caption、脚注、timeline 下方 label、底部 KPI 被分页小方块挡住,或者视觉上贴得太近。
+
+**根因**:`#nav` 固定在 `bottom:2vh`,如果主体内容用 `align-self:end` / `align-items:end` / `margin-top:auto` 贴到底,最低处会进入分页区域。
+
+**做法**:
+- 主内容最低边缘与分页组件之间至少留 `3vh` 呼吸空间
+- P23 需要底部对齐时用 `.swiss-img-split.align-image-bottom`,模板已内置 `--nav-safe-bottom:8vh`
+- 其他页面需要贴底时,给主体容器加 `.nav-safe-bottom` 或 `.nav-safe-bottom-tight`
+- 不要手写 `bottom:2vh` / `bottom:0` 放说明文字;这会和 nav 抢位置
+
+**自检**:
+- 视觉:翻到该页,看最后一行 caption/label 是否明显高于分页组件
+- 代码:`grep -E "align-items:end|align-self:end|bottom:0|bottom:2vh|margin-top:auto" index.html`,命中后逐个确认是否有 nav safe zone
+
+---
+
+### 0-E. Swiss 模板还原度守卫:原始 PPT 是 golden source
+
+**现象**:生成页看起来像瑞士风,但和原始参考 PPT 的实际字重、间距、时间线、卡片密度不一致;越迭代越偏离参考。
+
+**根因**:把新增图片版式或实验结构写成了全局样式修改,或无意改动了原始基座类,例如 `.h-hero` / `.h-xl` 字重、`.tl-node` 列宽、`.duo-compare` 间距。
+
+**做法**:
+- 原始参考文件 `/Users/guohao/Documents/op7418的仓库/项目/Thin-Harness-Fat-Skills/ppt/index.html` 是 Swiss 主题的 golden source,但要以**实际页面用法**为准,不要只看未使用的 CSS helper
+- 原始页面的大标题大量使用 `font-weight:200`,强调词/数字用 `300`;`.h-hero` / `.h-xl` / `.h-hero-zh` / `.h-xl-zh` 在本模板里必须保持轻字重,不要恢复成 800/900
+- 除新增封面/封底 ASCII 机制、S22 图片槽位修复、横向时间线 label 居中修复、以及把标题 helper 校正为实际轻字重外,不要改动原始基座 CSS/JS recipe
+- 新增图片能力必须绑定到 S22/S15/S16 原始槽位,不要发明新正文结构
+- 如果要修改 `assets/template-swiss.html`,先做原始参考对比;可接受差异只应是 ASCII 类、S22 图片定位类、轻字重标题 helper 和已知动效修复
+
+**自检命令**:
+- 运行本次测试目录里的 `compare-swiss-base.mjs`,确认输出里 `missing in template: 0`
+- 目视对比原始 PPT 的同类页面:大标题字重、chrome-min 位置、timeline dot/label、卡片密度必须一致
+
+### 0-F. 视觉 + 代码双核对:不要只看 HTML
+
+**现象**:代码看起来类名正确,但实际页面拥挤、图文关系不对、可选组件堆太多,或者用了不适合内容的版式。
+
+**做法**:
+- 同时打开原始参考 PPT、当前模板或生成页、测试 PPT,先做视觉并排判断
+- 等入场动效稳定后再截图或下判断,不要把动画中间态当成内容缺失
+- 先打开网页逐页看视觉:标题字重、头部间距、正文密度、图片对齐、nav 安全区
+- 再回代码看结构:该页是否用了正确版式,必选组件是否齐,可选组件是否过度
+- 对照原始 PPT 时以实际画面为准;raw CSS helper 只能辅助,不能替代视觉判断
+- 判断问题来源:版式选错 / 必选组件缺失 / 可选组件滥用 / 间距和安全区问题
+- 通用版式(S03/S08/S11/S19)可多用;数据专用(S06/S07/S20/S21/S22)必须有真实数据或案例;结构专用(S14/S15/S17)必须有闭环、矩阵或层级关系
+---
+
 ### 0. 生成前必须通过的类名校验(最重要)
 
 **现象**：直接把 layouts.md 的骨架粘到新 HTML,结果样式全部丢失——大标题变成非衬线、数据大字报字体小得像正文、pipeline 多页糊成一坨、图片堆到浏览器底部。
 
-**根因**：如果 `template.html` 的 `<style>` 里没有这些类的定义,浏览器就 fallback 到默认样式。
+**根因**：如果当前模板的 `<style>` 里没有这些类的定义,浏览器就 fallback 到默认样式。
 
 **做法**：
-- **生成 PPT 前,必须先 `Read` `assets/template.html`**,确认 layouts.md 里用到的类都已定义
+- **生成 PPT 前,必须先 `Read` 当前风格对应模板**:风格 A 读 `assets/template.html`,风格 B 读 `assets/template-swiss.html`,确认 layouts 里用到的类都已定义
 - 最常见遗漏的类:`h-hero / h-xl / h-sub / h-md / lead / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / frame / img-cap / callout-src`
-- 如果某个类确实缺了,**在 template.html 的 `<style>` 里补上**,不要在每页 inline 重写
+- 如果某个类确实缺了,**在模板的 `<style>` 里补上**,不要在每页 inline 重写
 - 生成后打开浏览器,如果看到"大标题是非衬线"或"pipeline 步骤挤在一行",几乎 100% 是这个问题
 
 ### 1. 不要用 emoji 作图标
@@ -243,10 +429,22 @@ Dark hero 可以用 Holographic Dispersion（钛金色散）等带中心结构
 - 流程图/信息图只保留核心图形和必要短标签,PPT 自己负责标题、页脚和 chrome
 - 如果生成图已经带了这些元素,优先重生成;不要在 PPT 里再叠一层 chrome 造成干扰
 
+### 13e. Swiss 图文混排不能只用一种
+
+- 7-8 页 Swiss 测试 deck 至少使用 6 个不同 P 编号版式
+- 有 2-3 张配图时,至少使用两种图片承载方式:P22 主视觉 / P23 单图解释 / P24 证据墙 / P15 矩阵 / P16 小报
+- P23 默认底对齐:文字块和图片底部对齐,不要因为担心 nav 就退回顶部对齐;先控制图片高度
+- 白底信息图容器必须白底、无描边;不要用灰框包白图
+
+### 13f. Swiss 中文大标题要降级
+
+- 中文 2 行标题默认从 `min(5.8vw,10.2vh)` 起步,不要直接用英文页的 `6.8vw-7vw`
+- 任一行 9-12 个中文字符时降到 `min(5.2vw,9.2vh)`
+- 3 行标题优先改写,不能为了标题大而挤掉下方图文内容
+
 ### 14. 图片的微弱圆角
 
-所有 `.frame-img` 和 `.frame-img img` 都加 `border-radius:4px`，视觉上"柔和"但不软。**不要超过 8px**，否则像消费 app UI。
-
+风格 A 可以有轻微圆角。风格 B Swiss 必须直角: `.frame-img` 和图片本身都不要圆角、阴影或消费 app 式卡片感。
 ---
 
 ## 🔵 P3 · 操作细节
@@ -280,6 +478,11 @@ JS 会动态算总页数并扩展底部翻页圆点，但 `.chrome` 里的 `XX /
   □ 已画出"主题节奏表":每页明确 hero dark / hero light / light / dark
   □ 节奏表满足硬规则:无连续 3 页同主题 / 有 ≥1 hero dark + ≥1 hero light(8 页以上) / 至少有 1 个 dark 正文页
   □ `<title>` 已改为实际 deck 标题(grep "[必填]" 应无结果)
+  □ 瑞士风:封面是 `slide accent` 满屏 IKB + `<canvas class="ascii-bg">`(不是 `slide light` 白底)
+  □ 瑞士风:封底是 `slide split` + 左 `b-accent` + ASCII canvas / 右 paper 3 条 takeaway,第 03 条用 var(--accent)
+  □ 瑞士风:`grep -c "ascii-bg" index.html` ≥ 2(封面 + 封底各一)
+  □ 瑞士风:封面没有"01"等大编号(chrome 已显示 01/N,不要重复)
+  □ 瑞士风:IKB 背景上的强调字用 `font-style:italic`,禁止用 `color:var(--accent)`(蓝压蓝)
 
 内容
   □ 每一幕的页数比例合理(不会头重脚轻)
@@ -305,9 +508,11 @@ JS 会动态算总页数并扩展底部翻页圆点，但 `.chrome` 里的 `XX /
   □ 底部圆点数量与总页数匹配
   □ chrome 里的页码和实际页号一致
   □ ESC 键触发索引视图（如果保留）
+  □ B 键触发静态/低功耗模式,右下角提示在 `B 静态` / `B 动态` 之间切换
 
 动效
   □ `assets/motion.min.js` 存在(本地兜底)
+  □ 低功耗模式下 WebGL/ASCII canvas 不再挂 RAF 循环,当前页内容仍全部可见
   □ 翻页时内容逐个淡入,不是"啪"一下全出
   □ 大引用页 `<section>` 带 `data-animate="quote"`,每行 `<span data-anim="line">`
   □ Before/After 对比页 `<section>` 带 `data-animate="directional"`,左右列标 left/right