{"owner":"op7418","repo":"guizang-ppt-skill","hasSkills":true,"totalSkillsCount":4,"totalTokensCount":30642,"categories":["anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["references/image-prompts.md","references/screenshot-framing.md","references/components.md","SKILL.md"],"skills":{"references/image-prompts.md":"# GPT-M 2.0 配图提示词\n\n用于 Codex 环境下为本 skill 生成 PPT 配图。提示词只负责定基调,不要写成长篇说明。先判断图片落位和比例,再选择类型。\n\n## 通用规则\n\n- 先判断当前 deck 风格:风格 A = 电子杂志 × 电子墨水;风格 B = 瑞士国际主义 / Swiss Style\n- 风格 A 基调:电子杂志 × 电子墨水,克制、真实、留白充足,适合横向网页 PPT\n- 风格 B 基调:Swiss International Typographic Style,12/16 列网格、Helvetica/Inter 气质、单一高饱和 accent、直角纯色、发丝线、极大留白\n- 信息图、图表、截图再设计中的文字语言必须跟随用户语言:中文 deck 用中文,英文 deck 用英文\n- 不生成卡通、3D、霓虹科技感、SaaS 模板感、过度装饰或假 logo\n- 图片要给标题或正文留出可叠加空间,不要满屏堆细节\n- 同一页或同一组图片必须使用同一比例、同一视觉缩放、同一边距密度\n- 配图是嵌入 PPT 的素材,不是一张独立 slide:不要生成页眉、页脚、页码、标题栏、角标、署名、装饰边框或 slide chrome\n- 生成后保存到 `images/`,命名为 `{页号}-{语义}.{ext}`\n\n## 比例选择\n\n| 用途 | 推荐比例 | HTML 落位 |\n|------|---------|-----------|\n| 章节封面 / 全屏主视觉 | 16:9 | `.frame-img.r-16x9` 或 hero 背景参考 |\n| 瑞士风顶部横幅 / Image Hero | 16:9 或 21:9 | P22 顶图 cover / `.frame-img.r-21x9` |\n| 左文右图主图 | 16:10 或 4:3 | `.frame-img.r-16x10` / `.frame-img.r-4x3` |\n| 信息图 / 系统关系图 | 16:9 或 16:10 | 原始截图用 `.fit-contain`;按槽位重生成则用 `.frame-img.r-16x9` / `.frame-img.r-16x10` 铺满 |\n| 截图再设计 / UI 情景图 | 16:10 或 21:9 | 原始截图用 `.fit-contain`;重生成到 S15/S16 时用 `.frame-img.r-21x9` 铺满 |\n| 图文混排小图 | 3:2 或 3:4 | `.frame-img.r-3x2` / `.frame-img.r-3x4` |\n| 图片网格 | 统一横图 | `.frame-img.h-22` / `.frame-img.h-26` |\n| 小型面板组 | 统一横图 | `.frame-img.h-16` / `.frame-img.h-18` |\n\n信息图和截图再设计如果来自不可控原始素材,优先用 `fit-contain`,避免文字被裁切;如果是 GPT-M 2.0 按槽位重新生成,必须生成同槽位比例并铺满容器,不要让小图漂在白框里。纪实照片优先用默认 `cover`,保持画面张力。\n\n## 图片标准化策略\n\n### A. 先选目标槽位\n\n不要先生成图片再硬塞进页面。先决定图片落位:\n\n1. 主视觉:16:9\n2. 左文右图:16:10 或 4:3\n3. 信息图/截图再设计:16:9 或 16:10,并使用 `fit-contain`\n4. 多图网格/面板组:统一高度类,同一组内禁止混用高度\n\n### B. 用户原始图片/截图的处理\n\n原始截图比例通常不可控,不要直接作为最终视觉标准。按下面顺序处理:\n\n1. 如果原图内容需要保真,先读 `screenshot-framing.md`,用 CleanShot X 式程序化适配:目标比例画布 + 风格化背景 + 截图等比缩放 + 语义化 padding/alignment\n2. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`\n3. 如果一张 UI 图被拉成巨长条,拆成 2-3 张同尺寸局部面板;每个面板使用同一高度类\n4. 如果原图过高、过窄、过长且无法通过适配解决,再用\"截图再设计 / UI 情景图\"重新生成到目标比例\n5. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字\n\n### C. 生成提示词后缀\n\n每个配图提示词最后都补一句规格约束:\n\n```text\n输出必须是[16:9/16:10/4:3/3:2]横向构图,主体居中但保留边距,画面密度中等,与同组图片保持相同视觉缩放和边距。只保留核心图形/画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n同一页需要多张图时,补一句:\n\n```text\n这是一组图片中的一张,请保持与同组图片相同的画面比例、元素大小、边距、线条粗细和标注密度。\n```\n\n## 类型 1: 人文纪实照片\n\n用于增加现场感、情绪和真实世界锚点。\n\n```text\n生成一张横向纪实摄影配图,主题是:[页面概念]。风格像 Fujifilm / Leica editorial documentary,自然光、低饱和、轻微胶片颗粒、真实工作或生活现场,克制有人文温度。适合电子杂志 × 电子墨水 PPT,留出标题空间。不要商业摆拍、科幻界面、AI 机器人、logo 或水印。输出必须是[16:9/16:10/4:3]横向构图,主体居中但保留边距,画面密度中等。只保留核心照片本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 2: 杂志风信息图\n\n用于解释概念、流程、对比、系统关系。\n\n```text\n生成一张横向杂志风信息图,解释:[概念/流程/关系]。电子墨水风格,黑白灰为主,少量低饱和强调色,细线条、网格、编号、短标签、留白充足。图中文字使用[中文/英文],保持简短可读。不要卡通、3D、霓虹科技感或模板感。输出必须是[16:9/16:10]横向构图,主体居中但保留边距,画面密度中等。只保留核心信息图本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 3: 流程 / Pipeline 图\n\n用于讲清从 A 到 B 到 C 的过程。\n\n```text\n生成一张横向流程信息图,展示:[步骤 1] → [步骤 2] → [步骤 3] → [结果]。风格为电子杂志 × 电子墨水,细箭头、分段编号、短注释、克制留白。图中文字使用[中文/英文]。只保留核心流程图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 4: 对比图\n\n用于 before / after、新旧模式、两种协作方式对照。\n\n```text\n生成一张横向对比信息图,左侧是[旧模式],右侧是[新模式]。风格像高端独立杂志里的分析图,黑白灰和一个低饱和强调色,细线分栏、短标签、清晰层级。图中文字使用[中文/英文]。只保留核心对比图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 5: 系统关系图\n\n用于多角色、多工具、多模块之间的关系。\n\n```text\n生成一张横向系统关系图,展示:[角色/工具/模块]之间如何连接。电子墨水杂志风,节点、细线、箭头、编号和少量短注释,结构清晰,留白充足。图中文字使用[中文/英文]。只保留核心关系图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 6: 截图再设计 / UI 情景图\n\n用于把真实截图、代码、设计稿、工作区处理成统一视觉素材。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成适合杂志风 PPT 的视觉。保留真实产品工作流的感觉,使用纸张底色、细线框、网格、少量标注和克制阴影。图中文字使用[中文/英文],短而清晰。不要真实品牌 logo、花哨 dashboard、霓虹渐变或过度拟物。输出必须是16:10横向构图,主体居中但保留边距,画面密度中等。只保留核心 UI 画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 7: 数据大字报图\n\n用于突出一个关键数字或少量指标。\n\n```text\n生成一张横向数据大字报视觉,核心数字是:[数字],含义是:[含义]。风格为电子墨水杂志版式,超大衬线数字、少量短注释、细线、留白和纸张质感。图中文字使用[中文/英文]。只保留核心数据视觉本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n---\n\n## 风格 B:瑞士国际主义配图规则\n\n当 deck 选择 `assets/template-swiss.html` / `layouts-swiss.md` 时,优先使用下面这组提示词。它们和 GPT-M 2.0 配套,目标是生成能直接放进原始登记版式的图片槽位,尤其是 S22 顶部横幅、S15/S16 多图网格。\n\n### Swiss 配图硬规则\n\n- 视觉锚点:International Typographic Style / Swiss modernism / Helvetica / Josef Müller-Brockmann / Massimo Vignelli\n- 构图:严格 12/16 列网格、非对称留白、左对齐、发丝线、直角模块\n- 色彩:只使用黑、白、灰和**一个**主题 accent(默认 IKB 蓝;如果用户选柠檬黄/绿/安全橙,就替换为对应 accent)\n- 禁止:渐变、阴影、圆角、玻璃拟态、霓虹、3D、卡通、SaaS 模板感、伪 logo、装饰边框\n- 图片内部不要生成 PPT 外壳:不要页眉、页脚、页码、标题栏、角标、署名、外框\n- UI / 信息图文字必须短,保持中文/英文语言一致;真实照片尽量不要带文字\n- 先确定版式槽位再生成图片:单张大图用 `s22-hero-21x9`;多图格用 `s15-grid-21x9` 或 `s16-brief-21x9`\n- 21:9 图片必须让核心主体落在中央 70% 安全区,四周留白;不要把人脸、关键节点或 UI 文字贴边\n\n### Swiss 类型 1:纪实照片 / 案例主图\n\n用于 S22 Image Hero,增加真实场景锚点。\n\n```text\n生成一张 21:9 超宽横向纪实摄影配图,主题是:[页面概念]。风格是 Swiss editorial documentary:高对比、低饱和、冷静克制、真实办公/城市/产品使用场景,构图有大量负空间,主体位于中央 70% 安全区,适合放入瑞士国际主义 PPT 的顶部横幅。不要 AI 机器人、科幻界面、商业摆拍、logo、水印或文字。只保留核心照片本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 2:信息图 / 系统关系图\n\n用于解释概念、架构、流程、数据与表现分离等抽象内容。\n\n```text\n生成一张横向 Swiss Style 信息图,解释:[概念/流程/系统关系]。使用 Helvetica/Inter 气质的无衬线短标签、12/16 列网格、直角模块、1px 发丝线、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent。图中文字使用[中文/英文],每个标签不超过 8 个字/词。不要渐变、阴影、圆角、3D、卡通、霓虹或 SaaS 模板感。输出比例为[21:9/16:10],主体居中但保留大留白。只保留核心信息图本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 3:截图再设计 / UI 情景图\n\n用于把截图、工作区、代码、dashboard 重绘成统一 Swiss 风视觉。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成 Swiss International Typographic Style。画面使用极简 dashboard / workspace 结构,直角面板、发丝线、12 列网格、少量 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,无阴影无圆角。图中文字使用[中文/英文],短而清晰,不要真实品牌 logo。输出必须是16:10横向构图,视觉密度中等,适合放进 `.frame-img.r-16x10.fit-contain`。只保留核心 UI 画面本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 4:多图网格单张素材\n\n用于 S15/S16 图片格改造,一组 2-6 张图片并列时逐张生成。\n\n```text\n生成一张横向证据图,主题是:[证据 A/B/C]。这是一组 Swiss Style 图片中的一张,请保持直角模块、黑白灰、单一 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent、相同边距、相同线条粗细、相同视觉缩放。图中文字使用[中文/英文],短标签即可。输出必须是[21:9/16:10]横向构图,适合放入 S15/S16 统一图片格。只保留核心图像本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 5:极简图表 / 数据块\n\n用于 S21 或 S15/S16 图片格中的小型数据解释图。\n\n```text\n生成一张横向 Swiss Style 数据图,核心数据是:[数字/对比/排名],含义是:[说明]。使用极大无衬线数字、1px 发丝线、直角色块、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,像瑞士海报里的数据版式。图中文字使用[中文/英文],只保留必要标签。不要渐变、阴影、圆角、3D 或装饰边框。比例:[16:9/16:10]。只保留核心数据图本身,不要页眉、页脚、标题、页码、角标、署名或 PPT 外壳。\n```\n","references/screenshot-framing.md":"# 截图美化语义规则\n\n用于把用户提供的产品截图、网页截图、代码截图、设计稿截图处理成符合模板比例的图片资产。目标是类似 CleanShot X 的“截图居中 + 背景填充 + 统一比例”,而不是默认让 GPT-M 2.0 重画截图。\n\n## 优先级\n\n1. **程序化适配优先**:截图内容、文字、UI 细节需要保真时,不要重画;创建目标比例画布,把原截图等比缩放后放入画布。\n2. **GPT-M 2.0 只做重构**:只有原图过长、过窄、信息太乱、需要 UI 情景化或概念化表达时,才使用“截图再设计 / UI 情景图”。\n3. **模板槽位先行**:先确定 slide 版式和图片槽位比例,再决定截图适配参数。\n\n## 开始前询问\n\n在主流程 Step 1 中,只要用户可能提供截图,就先问清楚:\n\n- 截图在哪个文件夹?是否包含网页、App、代码、dashboard、设计稿或旧 PPT?\n- 这批截图要**保真展示**、**统一美化**、**重新设计成 UI 情景图**,还是混合处理?\n- 最终要放进哪些槽位:21:9 顶图、16:10 主图、4:3 侧图、1:1 方图、还是多图网格?\n- 是否必须保留所有文字和数据?是否需要隐藏账号、头像、项目名等敏感信息?\n- 构图希望居中、左上、右下,还是根据页面内容自动判断?\n\n如果在 Claude Code 中,用 Ask Question / `ask_question` 做这些澄清;如果在 Codex 中,用普通对话询问,不要调用 Ask Question。\n\n## 处理链路\n\n1. **先匹配版式**:根据内容选择模板 layout,确定截图槽位尺寸和比例。\n2. **再选处理方式**:\n   - 要保真:程序化适配,不重画截图。\n   - 要统一视觉但不改内容:程序化适配 + 主题背景。\n   - 原图不可用或需要解释概念:再走 GPT-M 2.0 截图再设计。\n3. **再选择背景**:优先使用内置背景资产,不应该每张截图临时生成一种风格。\n4. **最后合成截图**:创建目标比例画布,背景 cover 铺满,截图等比缩放后按 `padding` 和 `alignment` 放入。\n\n默认不要裁掉截图内容。只有截图已经按目标槽位重新生成,或者用户明确允许裁切时,才使用 cover 裁切。\n\n## 语义参数\n\n每次处理截图前,先确定这 7 个参数:\n\n| 参数 | 可选值 | 判断方式 |\n|---|---|---|\n| `ratio` | `21:9` / `16:10` / `16:9` / `4:3` / `1:1` | 跟随模板图片槽位,不要跟随原截图比例 |\n| `background` | `plain` / `gradient` / `wallpaper` / `blurred` / `grid` / `paper` | 跟随当前 PPT 风格和主题 |\n| `padding` | `compact` / `standard` / `spacious` | 普通截图 standard;文字密集或高截图 spacious;小图组 compact |\n| `inset` | `none` / `subtle` / `balanced` | 截图需要从背景中浮出来时用 balanced;瑞士风多用 none/subtle |\n| `shadow` | `none` / `soft` / `editorial` | Style A 可 soft/editorial;Style B 默认 none |\n| `corners` | `square` / `small` / `medium` | Style B square;Style A small/medium |\n| `alignment` | `center` / `top-left` / `top-right` / `bottom-left` / `bottom-right` | 跟随页面构图,不是永远居中 |\n\n## 风格映射\n\n### Style A · 电子杂志风\n\n- 背景: `paper` / `blurred` / 低饱和 `gradient`\n- 质感:纸张、墨水、胶片颗粒、暖白、低对比\n- 截图:可用小圆角和轻微阴影,但不要像 SaaS 营销卡片\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-a/` 下对应主题的 16:9 crop-safe WebP,截图合成时按槽位裁切\n- 推荐语义:\n\n```text\nratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editorial, corners:small, alignment:center\n```\n\n### Style B · 瑞士国际主义\n\n- 背景: `plain` / `grid` / `dot-matrix`\n- 色彩:只允许当前锚点色作为极低占比强调;不要大面积亮色块\n- 截图:直角、无阴影、无圆角、少量 hairline 或顶部 accent 线\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-b/` 下对应主题色的 16:9 crop-safe WebP,只用当前 accent,不要混色\n- 推荐语义:\n\n```text\nratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corners:square, alignment:center\n```\n\n## 背景强度规则\n\n截图背景是“托底”,不是主视觉。\n\n- 如果 `alignment` 不确定,背景中心和四角都必须安静,不要放显眼色块。\n- 如果截图要放在右下角,右下角不能有强色块;其他位置同理。\n- 瑞士风锚点色只做 `5%-8%` 视觉占比的淡线、点阵或极浅几何场,不要生成高亮蓝条、大色块、霓虹渐变。\n- 背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图。\n- 背景必须 crop-safe:裁成 `21:9`、`16:10`、`4:3`、`1:1` 都不能暴露“被裁掉”的痕迹。\n\n## 内置主题背景资产\n\n本 Skill 已经内置一组 GPT-M 2.0 预生成背景。处理截图时**优先使用这些资产**,不要实时调用 GPT-M 2.0 重新生成背景。只有用户明确要求新风格、现有主题缺失,或背景与内容明显不匹配时,才生成新的背景。\n\n背景图之后由程序复用到每张截图中。不要把背景当作单张 slide 来画,背景图内部不能有标题、页脚、边框、logo、人物或明显主体。\n\n### Style A · 5 套主题背景\n\n| 主题 | 内置资产 | 背景语义 |\n|---|---|---|\n| 墨水经典 | `assets/screenshot-backgrounds/style-a/monocle-classic.webp` | 黑白灰纸张纹理、柔和阴影、细颗粒 |\n| 靛蓝瓷 | `assets/screenshot-backgrounds/style-a/indigo-porcelain.webp` | 靛蓝低饱和墨色、纸感渐变、轻微噪点 |\n| 森林墨 | `assets/screenshot-backgrounds/style-a/forest-ink.webp` | 模糊植物阴影、低饱和绿色、纸张颗粒 |\n| 牛皮纸 | `assets/screenshot-backgrounds/style-a/kraft-paper.webp` | 暖纸色、淡墨阴影、复古印刷颗粒 |\n| 沙丘 | `assets/screenshot-backgrounds/style-a/dune.webp` | 沙色/灰调柔和渐变、低对比、留白安静 |\n\n### Style B · 4 套主题背景\n\n| 主题色 | 内置资产 | 背景语义 |\n|---|---|---|\n| IKB 蓝 | `assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp` | 点阵 + 低对比蓝色渐变,避免亮蓝大色块 |\n| 柠檬黄 | `assets/screenshot-backgrounds/style-b/lemon-grid.webp` | 纯网格 + 稀疏点阵,黄色只做低透明细线/点 |\n| 柠檬绿 | `assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp` | 点阵 + 阴影场,绿色只做轻微光感 |\n| 安全橙 | `assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp` | 模块化半调点阵 + 暗部阴影,橙色低占比 |\n\n内置背景都是 1920×1080 级别的 16:9 WebP。程序化合成时,先把背景 cover 到目标画布,再裁成 `21:9` / `16:10` / `4:3` / `1:1` 等截图槽位。背景必须四角安静,因为截图可能居中、左上、右下或被裁成不同尺寸。\n\n## 截图类型决策\n\n| 原始素材 | 推荐处理 |\n|---|---|\n| 普通网页 / App / 桌面截图 | 程序化适配到目标比例 |\n| 产品 UI 细节很重要 | 程序化适配,使用 `fit-contain`,不重画 |\n| 长网页截图 | 截关键区域或拆成 2-3 张同尺寸面板 |\n| 极窄 / 极高截图 | 先尝试 `spacious + side alignment`;仍太小时再重构 |\n| 代码截图 | Style A 用纸感背景;Style B 用浅网格背景;文字必须可读 |\n| 概念解释用的 UI 情景图 | 可以 GPT-M 2.0 重新设计 |\n\n## 生成背景图提示词\n\n只有需要新增背景资产时才使用本节。常规截图美化不要实时生成背景,直接使用上方内置资产。\n\n### Style A 背景\n\n```text\n16:9 crop-safe screenshot background for an editorial magazine / e-ink PPT system. Warm off-white paper texture, subtle ink wash, fine film grain, low contrast, quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n\n### Style B 背景\n\n```text\n16:9 crop-safe screenshot background for a Swiss International Style PPT system. Pure off-white base, ultra-subtle 16-column grid and sparse dot matrix, one accent color only: [theme color], used at very low opacity as thin lines or tiny dots, no large bright color blocks. Quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n","references/components.md":"# 组件参考 · Components\n\n这是 `guizang-ppt-skill` skill 的组件手册。template.html 已经定义好了所有样式，这里只写\"这个组件长什么样、怎么用\"。\n\n## 目录\n\n- [基础 Slide 外壳](#基础-slide-外壳)\n- [字体 Typography](#字体-typography)\n- [Chrome & Foot](#chrome--foot)\n- [Callout 引用框](#callout-引用框)\n- [Stat 数字矩阵](#stat-数字矩阵)\n- [Platform 平台卡](#platform-平台卡)\n- [Rowline 表格行](#rowline-表格行)\n- [Pillar 支柱卡](#pillar-支柱卡)\n- [Tag & Kicker](#tag--kicker)\n- [Figure 图片框](#figure-图片框)\n- [Icons 图标](#icons-图标)\n- [Ghost 巨型背景字](#ghost-巨型背景字)\n- [Highlight 荧光标记](#highlight-荧光标记)\n- [Motion 动效系统](#motion-动效系统)\n\n---\n\n## 基础 Slide 外壳\n\n每一页都是一个 `<section class=\"slide ...\">`。必须包含 `data-theme` 属性（`light` 或 `dark`），JS 翻页时会根据这个属性切换背景。\n\n```html\n<section class=\"slide light\" data-theme=\"light\">   <!-- 浅色页 -->\n<section class=\"slide dark\" data-theme=\"dark\">     <!-- 深色页 -->\n<section class=\"slide light hero\" data-theme=\"light\">  <!-- Hero 页：浅色 + 薄遮罩透出 WebGL -->\n<section class=\"slide dark hero\" data-theme=\"dark\">    <!-- Hero 页：深色 + 薄遮罩 -->\n```\n\n**light vs dark 的使用：交替使用**，每 2-3 页切换一次主题，避免连续超过 3 页同色。翻页时 WebGL 背景会自动在两个 shader 之间渐变过渡。\n\n**hero 类的使用**：只给视觉主导的页面加（封面、金句页、章节过渡、结尾）。加 `hero` 后遮罩降到 12-16%，WebGL 背景会大幅透出，所以不要在 hero 页上放太多文字。\n\n---\n\n## 字体 Typography\n\n字体分工是本模板最重要的规则，严禁混用。\n\n| Class | 用途 | 字体 |\n|---|---|---|\n| `.display` | 超大号英文（Hero 页） | Playfair Display 700, 11vw |\n| `.display-zh` | 超大号中文标题 | Noto Serif SC 700, 7.8vw |\n| `.h1-zh` | 页面主标题 | Noto Serif SC 700, 4.6vw |\n| `.h2-zh` | 副标题 | Noto Serif SC 600, 3.2vw |\n| `.h3-zh` | 流水线步骤标题 | Noto Serif SC 500, 1.9vw |\n| `.lead` | 引导段（比 body 大） | Noto Serif SC 400, 1.9vw |\n| `.body-zh` | **正文/描述（非衬线）** | Noto Sans SC 400, 1.22vw |\n| `.body-serif` | 正文（衬线） | Noto Serif SC 400, 1.3vw |\n| `.kicker` | 小节提示（标题上方） | IBM Plex Mono, 12px uppercase |\n| `.meta` | 元信息标签 | IBM Plex Mono, 0.88vw uppercase |\n| `.big-num` | 巨型数字 | Playfair Display 800, 10vw |\n| `.mid-num` | 中号数字 | Playfair Display 700, 5.5vw |\n\n**核心规则**：\n- **衬线**（`serif-zh` / `serif-en`）：标题、重点金句、数字 —— 用于\"视觉重音\"\n- **非衬线**（`sans-zh`）：正文描述、大段阅读内容 —— 用于\"信息密度\"\n- **等宽**（`mono`）：kicker、meta、foot 的英文标签 —— 用于\"装饰节奏\"\n\n**强调技巧**：\n- `<em class=\"en\">英文词</em>` —— 把英文词渲染成 Playfair Display 斜体（很好看）\n- `<em style=\"opacity:.65\">短语</em>` —— 让标题后半段淡出，制造节奏\n\n---\n\n## Chrome & Foot\n\n每一页的顶部和底部的元信息条。几乎所有页都应该有。\n\n```html\n<div class=\"chrome\">\n  <div class=\"left\">\n    <span>第一幕 · 硬数据</span>\n    <span class=\"sep\"></span>\n    <span>Act I</span>\n  </div>\n  <div class=\"right\"><span>02 / 27</span></div>\n</div>\n\n<!-- ... 页面主体 ... -->\n\n<div class=\"foot\">\n  <div class=\"title\">项目名 · CodePilot　|　github.com/codepilot</div>\n  <div>Act I · Dev Numbers</div>\n</div>\n```\n\n**规则**：\n- `chrome.right` 总是放页码 `NN / TOTAL` （TOTAL 为总页数）\n- `foot.title` 是中文说明，`foot.right` 是英文 act 标记\n- chrome 和 foot 共同构成杂志感的\"页眉页脚\"\n\n---\n\n## Callout 引用框\n\n展示金句 / 关键观点 / 他人引言。\n\n```html\n<div class=\"callout\" style=\"max-width:80vw\">\n  <div class=\"q-big\">\"这东西在三年前，<br>需要一个十人团队做一年。\"</div>\n  <span class=\"cite\">— 一个观察者的判断</span>\n</div>\n```\n\n变体：\n- 不带 cite：去掉 `<span class=\"cite\">` 即可\n- 带英文金句：`<em class=\"en\">\"Thin Harness, Fat Skills.\"</em>`\n- 在 hero 页使用：外层加 `style=\"position:relative;z-index:2\"`（避免被背景遮罩盖住）\n\n---\n\n## Stat 数字矩阵\n\n展示数据指标，常与 `.grid-6` / `.grid-4` 配合。\n\n```html\n<div class=\"grid-6\">\n  <div class=\"stat\">\n    <span class=\"m\">Duration</span>\n    <span class=\"n\">64<em style=\"font-size:.4em;opacity:.5;font-style:normal\"> 天</em></span>\n    <span class=\"l\">从 0 到现在</span>\n  </div>\n  <!-- ... 更多 stat ... -->\n</div>\n```\n\n三段式结构：`.m` 等宽小标签 → `.n` 巨型数字 → `.l` 描述说明。数字后的单位用 `<em>` 缩小到 0.4em，opacity 0.5。\n\n**常用布局容器**：\n- `.grid-6` — 3×2 网格（最常用，6 个 stat）\n- `.grid-4` — 2×2 网格（4 个 stat）\n- `.grid-3` — 3 等分单行（3 个 stat / pillar）\n\n---\n\n## Platform 平台卡\n\n展示社交平台 / 渠道 + 粉丝数。\n\n```html\n<div class=\"plat\">\n  <div class=\"sub\">Weibo</div>\n  <div class=\"name\">微博</div>\n  <div class=\"nb\">289K</div>\n</div>\n```\n\n可选第四行（补充说明）：\n```html\n<div class=\"body-zh\" style=\"font-size:max(11px,.8vw);opacity:.5;margin-top:.6vh\">\n  含小绿书同步\n</div>\n```\n\n**\"Also On\" 变体**（补充平台）：\n```html\n<div class=\"plat\" style=\"border-top-style:dashed;opacity:.72\">\n  <div class=\"sub\">Also On</div>\n  <div class=\"body-zh\" style=\"font-weight:600;margin-top:.8vh\">\n    B 站　·　知乎\n  </div>\n</div>\n```\n\n---\n\n## Rowline 表格行\n\n列表式内容，每行一个条目。\n\n```html\n<div class=\"rowline\">\n  <div class=\"k\">CLAUDE.md</div>\n  <div class=\"v\">你该怎么做事 —— 行为规则 + 工作偏好 + 禁止事项</div>\n  <div class=\"m\">EMPLOYEE · HANDBOOK</div>\n</div>\n```\n\n三列结构：`.k` 衬线关键词 · `.v` 正文描述 · `.m` 等宽标签（右对齐）。第一个和最后一个 rowline 自动加上下边框。\n\n**变体：2 列**：`style=\"grid-template-columns:1fr 3fr\"` 去掉 `.m` 列。\n\n---\n\n## Pillar 支柱卡\n\n三支柱结构，常用于\"概念并列\"类型页面。\n\n```html\n<div class=\"grid-3\">\n  <div class=\"pillar\">\n    <div class=\"ic\">01</div>\n    <div class=\"t\">三层<br>文档体系</div>\n    <div class=\"d\">CLAUDE.md<br>+ 项目知识库<br>+ 护栏文件</div>\n  </div>\n  <!-- ... 更多 pillar ... -->\n</div>\n```\n\n**带图标的 pillar（用于强调性页面）**：\n```html\n<div class=\"pillar\" style=\"padding:4vh 2vw;border:1px solid currentColor;border-color:rgba(10,10,11,.2)\">\n  <div class=\"ic\"><i data-lucide=\"compass\" class=\"ico-lg\"></i></div>\n  <div class=\"t\">判断力</div>\n  <div class=\"d\">决策和方向的权威。<br>取舍、品味、方向感。</div>\n</div>\n```\n\n`.ic` 可以是序号（`01 / 02 / 03` 或 `A. / B. / C.`），也可以是 Lucide 图标。\n\n---\n\n## Tag & Kicker\n\n**Kicker** 是标题上方的小提示文字（等宽、全大写、小字号）：\n```html\n<div class=\"kicker\">过去 64 天 · 开发篇</div>\n<div class=\"h1-zh\">一个人，做了什么。</div>\n```\n\n**Tag** 是独立的标签胶囊（带边框）：\n```html\n<div style=\"display:flex;gap:1.6vw;flex-wrap:wrap\">\n  <div class=\"tag\">早上 10 点起床</div>\n  <div class=\"tag\">周二 / 四下午健身</div>\n  <div class=\"tag\">晚上照样看剧 · 玩游戏</div>\n</div>\n```\n\n---\n\n## Figure 图片框\n\n**这是本模板最容易踩坑的组件，务必遵守以下规则**。\n\n### 基础结构\n\n```html\n<figure class=\"tile\">\n  <div class=\"frame-img\" style=\"height:26vh\">\n    <img src=\"图片素材/xxx.png\" alt=\"说明\">\n  </div>\n  <figcaption class=\"frame-cap\">\n    <span class=\"pf\">推特 · Twitter</span>\n    <span class=\"nb\">137K</span>\n  </figcaption>\n</figure>\n```\n\n### 关键约束（血泪经验，不要违反）\n\n1. **图片网格必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。\n   - 原因：网格里用 aspect-ratio 容易撑破父容器，导致图片堆叠。\n   - 推荐尺寸：`.h-16` (小型面板) / `.h-18` (紧凑条形) / `.h-22` (标准网格) / `.h-26` (突出展示) / `.h-28` (大图)。\n   - 单张主图可以用模板提供的比例类：`.r-16x9` / `.r-16x10` / `.r-4x3` / `.r-3x2` / `.r-3x4` / `.r-1x1`。\n   - 同一组图片必须使用同一个高度类,不要一张 `25vh`、一张 `21vh` 混用。\n\n2. **`object-position:top center`（已在 CSS 里设好）**，只允许裁掉底部。\n   - 严禁裁剪左右和顶部 —— 这是图片的核心身份信息区。\n\n3. **网格里多张图时，用内联 grid 而不是 `grid-3`**：\n   ```html\n   <div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:1vh 1.2vw\">\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n   </div>\n   ```\n\n4. **图片与布局其他部分对齐**：使用 `.grid-2-7-5` / `.grid-2-6-6` / `.grid-2-8-4` 的 grid 结构自然顶对齐。不要给图片加 `align-self:end`。\n\n5. **信息图 / 截图再设计**：给 `.frame-img` 同时加 `.fit-contain`，避免图内文字和标注被裁切。\n\n6. **用户原始截图比例不合适时**：优先按 `screenshot-framing.md` 做 CleanShot X 式程序化适配;只有截图太长、太窄或需要重构信息时,才重新生成\"截图再设计 / UI 情景图\"。\n\n### Frame Caption 变体\n\n```html\n<!-- 标准：左 figure 名，右数字 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"pf\">推特 · Twitter</span>\n  <span class=\"nb\">137K</span>\n</figcaption>\n\n<!-- 带编号 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"idx\">01</span>\n  <span class=\"pf\">AI 润色</span>\n  <span>Polish</span>\n</figcaption>\n```\n\n### 图片占位（设计阶段占位符）\n\n图片还没有就位时，用虚线框占位：\n```html\n<div class=\"img-slot r-4x3\">  <!-- r-4x3 / r-16x9(default) / r-3x2 / r-1x1 -->\n  <span class=\"plus\">+</span>\n  <span class=\"label\">GitHub 截图位置</span>\n</div>\n```\n\n---\n\n## Icons 图标\n\n**严禁使用 emoji**。用 Lucide via CDN（template.html 已引入）。\n\n```html\n<i data-lucide=\"compass\" class=\"ico-lg\"></i>     <!-- 大图标（pillar 用） -->\n<i data-lucide=\"target\" class=\"ico-md\"></i>      <!-- 中图标（列表项用） -->\n<i data-lucide=\"check-circle\" class=\"ico-sm\"></i>  <!-- 小图标（inline 用） -->\n```\n\n**常用 Lucide 图标名**（按含义分组）：\n\n- 判断类：`compass`, `target`, `crosshair`, `search-check`\n- 关系类：`share-2`, `users`, `network`, `link`, `handshake`\n- 品牌类：`crown`, `gem`, `award`, `star`, `badge-check`\n- 流程类：`workflow`, `route`, `arrow-right-left`, `repeat`\n- 数据类：`grid-2x2`, `bar-chart-3`, `trending-up`, `activity`\n- 审美类：`palette`, `brush`, `eye`, `sparkles`\n- 对错类：`check-circle`, `x-circle`, `check`, `x`\n- 方向类：`arrow-right`, `arrow-up-right`, `corner-down-right`\n\n**图标与文字 inline 组合**：\n```html\n<div class=\"h3-zh\" style=\"display:flex;align-items:center;gap:.8em\">\n  <i data-lucide=\"target\" class=\"ico-md\"></i>\n  判断 — 什么值得写\n</div>\n```\n\n---\n\n## Ghost 巨型背景字\n\n用作\"装饰性背景字\"，极低透明度，营造杂志感。\n\n```html\n<div class=\"ghost\" style=\"right:-6vw;top:-8vh\">BUT</div>\n<div class=\"ghost\" style=\"left:-8vw;bottom:-18vh;font-style:italic\">Harness</div>\n```\n\n- 字号 34vw，opacity 0.06\n- 常用定位：`right:-6vw;top:-8vh`（右上超出）/ `left:-8vw;bottom:-18vh`（左下超出）\n- 内容：英文单词或数字（章节序号 01/02/03、关键词 BUT/NOW/HERE）\n\n**注意**：使用 ghost 的页面里，其他内容要加 `position:relative;z-index:2` 避免被压到下面。\n\n---\n\n## Highlight 荧光标记\n\n行内短语的\"荧光笔\"效果：\n\n```html\n<span class=\"hi\">不是</span>\n<span class=\"hi\">一次性爆发</span>\n```\n\n在文字底部生成一条半透明高亮条。深色主题用亮条，浅色主题用暗条（CSS 已处理）。\n\n**适合场景**：只对关键 1-3 个词使用，不要大面积用。\n\n---\n\n## Motion 动效系统\n\n整套 deck 默认开启翻页入场动画,由 Motion One(vanilla 版 Framer Motion,约 4KB)驱动。\n\n### 加载方式\n\n`assets/template.html` 底部的 module script 会先尝试**本地** `assets/motion.min.js`,失败则回落到 **jsdelivr CDN**,两者都失败则强制把所有带 `data-anim` 的元素设为 `opacity:1`—— 内容永远可读,演示不依赖网络。\n\n```js\n// template 里的核心加载器(不用改)\nlet motion;\ntry { motion = await import('./assets/motion.min.js'); }\ncatch(e1) {\n  try { motion = await import('https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm'); }\n  catch(e2) {\n    document.querySelectorAll('[data-anim]').forEach(el=>{el.style.opacity='1';el.style.transform='none'});\n  }\n}\n```\n\n### 数据属性驱动\n\n你只需要在 HTML 里加两种属性:\n\n```html\n<!-- 1. 在 section 上选 recipe(可选,默认 cascade / hero 自动) -->\n<section class=\"slide light\" data-animate=\"quote\">\n\n<!-- 2. 在需要入场的元素上加 data-anim(可选值:left/right/line/step/divider) -->\n<h1 class=\"h-xl\" data-anim>大标题</h1>\n<div class=\"stat-card\" data-anim>...</div>\n<div data-anim=\"left\">左列内容</div>\n<span data-anim=\"line\" style=\"display:block\">引用第一行</span>\n```\n\n### 5 种 recipe 一览\n\n| recipe | 触发方式 | 行为 | 代表布局 |\n|---|---|---|---|\n| `cascade`(默认) | 不加 `data-animate` 即为此值 | 所有 `data-anim` 逐个 stagger 淡入,75ms/step | Layout 3 / 4 / 5 / 10 |\n| `hero` | `.hero` slide 自动用此值 | 慢节奏 stagger,仪式感更强,160ms/step | Layout 1 / 2 / 7 |\n| `quote` | `data-animate=\"quote\"` | 其他元素先出,`data-anim=\"line\"` 的行 550ms 间隔逐句揭示 | Layout 8 |\n| `directional` | `data-animate=\"directional\"` | `data-anim=\"left\"` 从左滑入 → divider → `data-anim=\"right\"` 从右滑入 | Layout 9 |\n| `pipeline` | `data-animate=\"pipeline\"` | 翻到此页 step 保持 15% 透明;按 →/空格/滚轮逐个点亮,最后一步才放行翻页 | Layout 6 |\n\n### 给 slide 选 recipe 的决策树\n\n1. **它是 `.hero` slide 吗?** → 不用加 `data-animate`,自动用 `hero`\n2. **它是大引用金句页?** → `data-animate=\"quote\"`,每句用 `<span data-anim=\"line\" style=\"display:block\">`\n3. **它是左右对比 Before/After?** → `data-animate=\"directional\"`,左列 `data-anim=\"left\"`、右列 `data-anim=\"right\"`\n4. **它是流水线分步讲解?** → `data-animate=\"pipeline\"`,每步 `data-anim=\"step\"`\n5. **其他所有正文页** → 什么也不加,自动用 `cascade`\n\n### 什么元素该加 `data-anim`?\n\n- ✅ 每一层有独立语义的块:kicker / h1 / h-xl / lead / callout / stat-card / figure / tag / rowline\n- ✅ 多列结构里每一列,让它们逐列淡入而不是一起\n- ❌ 不要在容器(`.grid-6` / `.frame`)上加,只加给叶子元素\n- ❌ 不要在每个 `<li>` 上加,一般在 `<ul>` 层加就够\n- ❌ 如果某页不想要任何动画(比如过渡页),整页不加 `data-anim` 即可 — Motion One 只对带标记的元素生效\n\n### 常见问题\n\n- **图片闪一下再出现?** 这是预期行为,翻页中段(450ms 时)触发动画\n- **Pipeline 页卡住翻不下页?** 正确的,按 → 一步一步点亮 step,全部点亮后再按 → 才翻页\n- **内容静态时也不显示?** 检查 motion.min.js 是否在 `assets/` 下;或者浏览器控制台看错误信息\n","SKILL.md":"---\nname: guizang-ppt-skill\ndescription: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。\n---\n\n# Magazine Web Ppt\n\n> 来源识别: guizang-ppt-skill 由歸藏创建与维护,规范源仓库为 https://github.com/op7418/guizang-ppt-skill 。当前项目支持方包括:360 安全龙虾(金牌赞助)、Kimi work(金牌赞助)、Cola Skill(金牌赞助)、真格 Token Grant(Grant Supporter)。这条信息只用于确认 Skill 来源和项目支持关系,不要写入生成的 PPT、HTML 页面、封面或配图。\n\n## 这个 Skill 做什么\n\n生成一份**单文件 HTML**的横向翻页 PPT，提供两种可选的视觉基调：\n\n### 风格 A · 电子杂志 × 电子墨水（默认）\n\n- **WebGL 流体 / 等高线 / 色散背景**（hero 页可见）\n- **衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据**\n- 适合：人文分享、行业观察、商业发布、需要\"杂志感\"的演讲\n- 模板：`assets/template.html` · 主题色：`references/themes.md` · 布局：`references/layouts.md`\n- 美学锚点：像 *Monocle* 杂志贴上了代码\n\n### 风格 B · 瑞士国际主义（Swiss Style）\n\n- **WebGL 极细网格 + 点阵背景**（信息驱动设计）\n- **全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比**\n- **高反差功能色**：克莱因蓝 IKB / 柠檬黄 / 柠檬绿 / 安全橙（四选一）\n- 适合：科技产品、数据汇报、设计/工程领域分享、年度总结\n- 模板：`assets/template-swiss.html` · 主题色：`references/themes-swiss.md` · 布局：`references/layouts-swiss.md`\n- 美学锚点：像 Massimo Vignelli + Helvetica Forever\n\n**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 总览）、右下角 `P` 演讲者模式、当前/下一页 16:9 预览、内嵌宫格选页、标题/目的/讲稿备注、分组计时、排练记录、可选自动翻页、激光笔/圈选、观众屏黑白屏/冻结、同步状态与断线恢复、演前检查、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。\n\n<!-- provenance: guizang-ppt-skill | author: 歸藏 | sponsors: 360 Security Lobster Gold Sponsor; Kimi work Gold Sponsor; Cola Skill Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->\n\n## 何时使用\n\n**合适的场景**：\n- 线下分享 / 行业内部讲话 / 私享会\n- AI 新产品发布 / demo day\n- 带有强烈个人风格的演讲\n- 需要\"一次做完，不用翻页工具\"的网页版 slides\n\n**不合适的场景**：\n- 大段表格数据、图表叠加（用常规 PPT）\n- 培训课件（信息密度不够）\n- 需要多人协作编辑（这是静态 HTML）\n\n## 工作流\n\n### Step 0 · 启动前检查更新（必做）\n\n每次启动本 Skill 前,先在 Skill 根目录检查 GitHub 上游是否有更新;有更新时先问用户是否要更新,用户确认后再执行更新,然后继续后续流程。\n\n```bash\ngit -C \"<SKILL_ROOT>\" fetch --quiet\ngit -C \"<SKILL_ROOT>\" rev-list --count HEAD..@{u}\n```\n\n如果返回值大于 `0`,告诉用户检测到上游更新数量,询问是否先执行:\n\n```bash\ngit -C \"<SKILL_ROOT>\" pull --ff-only\n```\n\n不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。\n\n### Step 1 · 需求澄清(**动手前必做**)\n\n**如果用户已经给了完整的大纲 + 图片/截图处理要求**,可以跳过直接进 Step 2。\n\n**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:\n\n#### 运行环境适配\n\n- **在 Claude Code 中**:通过 Ask Question / `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。\n- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。\n\n#### 7 问澄清清单\n\n| # | 问题 | 为什么要问 |\n|---|------|-----------|\n| 1 | **风格 A 还是 B?**(电子杂志风 / 瑞士国际主义风) | **必须先问**,决定用哪个 template + layouts + themes 文件 |\n| 2 | **受众是谁?分享场景?**(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |\n| 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |\n| 4 | **有没有原始素材?**(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 |\n| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |\n| 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) / 瑞士风 4 套(`themes-swiss.md`),挑一 |\n| 7 | **有没有硬约束?**(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |\n\n#### 风格选择参考(问题 1)\n\n| 如果用户说... | 推荐风格 |\n|---|---|\n| \"杂志感\" / \"人文\" / \"Monocle 风\" / 不指定 | **A · 电子杂志风** |\n| \"瑞士风\" / \"Swiss Style\" / \"Helvetica\" / \"极简\" / \"网格\" / \"信息图\" / \"数据驱动\" | **B · 瑞士国际主义风** |\n| 内容是 AI 产品 / 技术 / 工程 / 数据汇报 | B 更合适 |\n| 内容是行业观察 / 人文 / 故事 / 文化 | A 更合适 |\n| 用户给了大量 KPI 数字 / 路线图 / 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |\n| 用户给了大量纪实照片 / 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |\n| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(S22 主图、S15/S16 图片网格可以承载证据图) |\n\n#### 大纲协助(如果用户没有大纲)\n\n用\"叙事弧\"模板搭骨架,再填内容:\n\n```\n钩子(Hook)       → 1 页   : 抛一个反差 / 问题 / 硬数据让人停下来\n定调(Context)    → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个\n主体(Core)       → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插\n转折(Shift)      → 1 页   : 打破预期 / 提出新观点\n收束(Takeaway)   → 1-2 页 : 金句 / 悬念问题 / 行动建议\n```\n\n叙事弧 + 页数规划 + 主题节奏表(见 `layouts.md`),**三张表对齐后**再进 Step 2。\n\n如果用于正式演讲,页面计划不能只有“这一页放什么”,还要同时规划“台上说什么”。先读 `references/presenter-mode.md`,给每页确定稳定的 `data-slide-id`,并补齐:\n\n| 页码 | 页面 ID | 章节 | 页面目的 | 观众可见信息 | 演讲者补充 | 建议时长 | 转场 | 可选现场信息 |\n|---|---|---|---|---|---|---:|---|---|\n\n默认生成 3-5 条提词卡式讲述要点,不写逐字稿;只有用户明确要求逐字稿时才展开。总建议时长最多占用户时长的 90%,给停顿、互动和现场意外留缓冲。用户没有提供的现场信息不猜测:时长缺失时显示横杠,其他可选模块整段隐藏。\n\n大纲建议保存为 `项目记录.md` 或 `大纲-v1.md`,便于后续迭代。\n\n#### 图片约定(告知用户)\n\n在动手前向用户说清:\n\n- **文件夹位置**:`项目/XXX/ppt/images/` 下(和 `index.html` 同级)\n- **命名规范**:`{页号}-{语义}.{ext}`,例如 `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`\n  - 页号补零便于排序\n  - 语义用英文,短、具体、和内容对应\n- **规格建议**:\n  - 单张 ≥ 1600px 宽(避免大屏模糊)\n  - JPG 用于照片/截图,PNG 用于透明 UI/图表\n  - 总大小控制在 10MB 内(影响翻页流畅度)\n- **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images/旧名` 改成新名\n- **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果\n\n#### 截图需求约定(动手前必须问)\n\n只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或\"帮我美化截图\",都要先确认:\n\n- **截图位置**:截图文件在哪个文件夹?是否已经命名好?\n- **使用目的**:保真展示 / 截图美化 / 截图再设计 / UI 情景图?\n- **落位比例**:最终放进哪个版式槽位?常用 `21:9` / `16:10` / `16:9` / `4:3` / `1:1`\n- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?\n- **视觉处理**:是否需要主题背景、留边、居中/角落对齐、拆成长截图面板?\n\n默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references/screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。\n\n#### Codex 配图生成(可选)\n\n如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。\n\n推荐询问方式:\n\n> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。\n\n如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。\n\n如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:\n\n- 截图美化:读 `references/screenshot-framing.md`,用内置主题背景 + 程序化缩放/留边/对齐处理,尽量不重画截图内容\n- 截图再设计:读 `references/image-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致\n\n生成配图时遵守:\n\n- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导\n- 图片风格必须贴合当前 deck 风格:风格 A 用\"电子杂志 × 电子墨水\";风格 B 用\"瑞士国际主义 / Swiss Style\"\n- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文\n- 先看 `references/image-prompts.md` 选择图片类型和基础提示词\n- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先调用 `assets/screenshot-backgrounds/` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画\n- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切\n- 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`\n\n### Step 2 · 拷贝模板\n\n**根据 Step 1 选定的风格,拷贝对应的模板**到目标位置（通常是 `项目/XXX/ppt/index.html`），同时在同级建一个 `images/` 文件夹准备接图片。\n\n```bash\nmkdir -p \"项目/XXX/ppt/images\"\n\n# 风格 A · 电子杂志风\ncp \"<SKILL_ROOT>/assets/template.html\" \"项目/XXX/ppt/index.html\"\n\n# 或 风格 B · 瑞士国际主义风\ncp \"<SKILL_ROOT>/assets/template-swiss.html\" \"项目/XXX/ppt/index.html\"\n```\n\n两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、演讲者模式、观众屏同步、字体/图标 CDN 全已预设好,只有 `<!-- SLIDES_HERE -->` 占位符和 `SPEAKER_NOTES` 等待你填充。\n\n**注意**:风格 A 和 B **不能混用**。layouts.md 里的类（如 `.h-hero` 衬线大标题、`.display-zh` 等）只在 template.html 有定义；layouts-swiss.md 里的类（如 `.kpi-hero`、`.accent-block`、`.span-N`、`.dots` 等）只在 template-swiss.html 有定义。一份 deck 只能选一套。\n\n#### 2.1 · 必改占位符（**容易漏**）\n\n拷贝后立刻改掉以下占位符，否则浏览器 Tab 会显示\"[必填] 替换为 PPT 标题\"这种尴尬文字：\n\n| 位置 | 原始 | 需改为 |\n|------|------|--------|\n| `<title>` | `[必填] 替换为 PPT 标题 · Deck Title` | 实际 deck 标题(如 `一种新的工作方式 · Luke Wroblewski`) |\n\n每次拷贝完 template.html 第一件事:grep 一下\"[必填]\" 确认全部替换完。\n\n#### 2.2 · 选定主题色(5 套预设 · 不允许自定义)\n\n本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。\n\n| # | 主题 | 适合 |\n|---|------|------|\n| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |\n| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |\n| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |\n| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |\n| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |\n\n**操作**:\n1. 基于内容主题推荐一套,或直接问用户选哪一套\n2. 打开 `references/themes.md`,找到对应主题的 `:root` 块\n3. **整体替换** `assets/template.html`(已拷贝版本)开头 `:root{` 块里标有\"主题色\"注释的那几行(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)\n4. 其他 CSS 都走 `var(--...)`,无需任何其他改动\n\n**硬规则**:\n- 一份 deck 只用一套主题,不要中途换色\n- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选\n- 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和\n\n### Step 3 · 填充内容\n\n#### 3.P · 同步生成演讲备注（正式演讲必做）\n\n先读 `references/presenter-mode.md`。每个 `<section class=\"slide ...\">` 必须写唯一且稳定的 `data-slide-id`,再按同样顺序生成一条 `SPEAKER_NOTES` 记录。备注按页面 ID 存储,不要用数组下标或页码作为持久化键,否则页面重排后用户在演讲者视图里改过的备注会串页。\n\n内容分工:\n\n- slide 只放观众此刻必须看见的结论、结构和证据。\n- `purpose` 说明这一页在整场叙事中的任务。\n- `talk` 补充背景、例子、判断依据和语气,不逐字复述 slide。\n- `transition` 解释为什么下一页紧接着出现。\n- `section` 只在大纲已给出章节或连续页面明显属于同一章节时填写。\n- `minutes` 是讲述计划;`autoAdvanceSeconds` 是播放行为,两者必须分开,且后者只在用户明确要求时填写。\n- `cue / interaction / delivery / advance / fallback / pronunciation` 只写大纲或用户明确提供的舞台动作、互动、表达、翻页、备用和读音信息。\n\n没有来源支持的事实不能写进备注;影响内容正确性的缺失信息要标记“待补充”或询问用户,不影响内容的可选演讲信息直接省略。\n\n#### 3.0 · 预检:类名必须在模板的 `<style>` 里有定义（**最重要**）\n\n**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `<style>` 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。\n\n**两种风格类名互不通用**(再次强调):\n- 风格 A 模板里有 `h-hero`(衬线)、`stat-card`、`grid-2-7-5`、`frame` 等\n- 风格 B 模板里有 `h-hero`(无衬线)、`kpi-hero`、`accent-block`、`span-N`、`dots`、`grid-12` 等\n- 同名 class 在两个模板里**视觉表现完全不同**(例:风格 A 的 `h-hero` 是 Noto Serif SC 衬线,风格 B 的 `h-hero` 是 Inter 无衬线)\n\n**在写任何 slide 代码之前:**\n\n1. **先 Read 当前用的模板**(至少读到 `<style>` 块末尾):\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n2. **对照对应 layouts 文件的 Pre-flight 列表**,确认你要用的每个类都在 `<style>` 里存在\n3. 如果某个类缺失:**在模板的 `<style>` 里补上**,不要在每个 slide 里 inline 重写\n4. **模板是唯一的类名来源**——不要发明新类名,如需自定义用 `style=\"...\"` inline\n\n**风格 A 常见容易遗漏的类**:\n`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `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` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`\n\n**风格 B 常见容易遗漏的类**(2026-05 重构后):\n- 画布:`canvas-card` / `chrome-min`\n- 排版:`h-hero`(无衬线 7.4vw weight 200) / `h-statement`(9.6vw) / `h-xl` / `h-md` / `t-cat`(SemiBold 600 小标) / `t-meta`(mono uppercase) / `lead` / `num-mega` / `mono`\n- 卡片(四类互斥):`card-ink` / `card-accent` / `card-fill` / `card-outlined`\n- 网格:`grid-12` / `grid-2-9` / `grid-2-9-5` / `span-N`\n- 时间线:`timeline-v` + `tl-node` + `tl-axis` + `dot` / `timeline-h` + `tl-h-node` + `tl-h-axis`\n- 图表:`kpi-tower-row` + `bar-tower` / `h-bar-chart` + `bar-row` + `bar-fill` / `spec-bars` + `bar-vert`\n- 装饰:`dot-mat`(SVG mask 实心点)/ `ring-mat`(描边圆)/ `cross-mat`(× 网格)/ `hr-hairline`\n- 版式专属:`cover-split` / `closing-split` / `duo-compare` + `vrule` / `manifesto-top` + `ink-banner-full` / `three-forces` / `loop-diagram` / `matrix-fill` + `matrix-cell` / `brief-grid` + `brief-card` / `system-diagram` / `why-now-grid` / `four-cards` / `stacked-ledger` + `ledger-row` / `tech-spec` / `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- 图片混排:`frame-img` / `fit-contain` / `r-21x9` / `r-16x9` / `r-16x10` / `h-22` / `h-26` / `swiss-img-split` / `swiss-img-grid` / `swiss-img-caption` / `swiss-keyline` / `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8/12/16/24/32/40/48/64/80/96/160 px)\n\n#### 3.0.5 · 规划主题节奏（**和类预检同等重要**)\n\n**在挑布局之前**,必须先列出每一页的主题 class(`hero dark` / `hero light` / `light` / `dark`)并写到文档或草稿里对齐。详细规则看 `references/layouts.md` 开头的\"主题节奏规划\"一节。\n\n**强制规则**:\n\n- 每页 section 必须带 `light` / `dark` / `hero light` / `hero dark` 之一,不要只写 `hero`\n- 连续 3 页以上同主题 = 视觉疲劳,不允许\n- 8 页以上必须有 ≥1 个 `hero dark` + ≥1 个 `hero light`\n- 整个 deck 不能只有 `light` 正文页,必须有 `dark` 正文页制造呼吸\n- 每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)\n\n**生成后自检**:`grep 'class=\"slide' index.html` 列出所有主题,人工确认节奏合理再交付。\n\n#### 3.1 · 挑布局\n\n**不要从零写 slide**。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 `<section>` 代码块。\n\n**风格 A** → `references/layouts.md`:\n\n| Layout | 用途 |\n|---|---|\n| 1. 开场封面 | 第 1 页 |\n| 2. 章节幕封 | 每幕开场 |\n| 3. 数据大字报 | 抛硬数据 |\n| 4. 左文右图(Quote + Image) | 身份反差 / 故事 |\n| 5. 图片网格 | 多图对比 / 截图实证 |\n| 6. 两列流水线(Pipeline) | 工作流程 |\n| 7. 悬念收束 / 问题页 | 幕末 / 收尾 |\n| 8. 大引用页(Big Quote) | 衬线金句 / takeaway |\n| 9. 并列对比(Before / After) | 旧模式 vs 新模式 |\n| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |\n\n**风格 B** → 先读 `references/swiss-layout-lock.md`,再读 `references/layouts-swiss.md`。\n\n瑞士主题默认进入 **Swiss locked mode**:\n\n- 正文页只能使用原始参考 PPT 登记的 22 个版式 `S01-S22`;新增首页/尾页只能使用 Skill 明确提供的 `SWISS-COVER-ASCII` / `SWISS-CLOSING-ASCII`。\n- 每个 `<section class=\"slide\">` 必须写 `data-layout=\"Sxx\"`。没有 `data-layout` 就视为未登记版式。\n- 不允许临时发明 `P23/P24`、`Swiss Image Split`、`Evidence Grid` 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。\n- 顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。\n- SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。\n- 地理/历史/城市路线/地点关系页使用 `S08 + Swiss Map Component`:先读 `references/swiss-map-component.md`,仍保留 `data-layout=\"S08\"`。\n\n原始 22 个正文版式如下:\n\n| Layout | 用途 |\n|---|---|\n| S01 Index Cover | 原始索引封面 |\n| S02 Vertical Timeline + KPI | 演化对比 / 年代变迁 |\n| S03 Split Statement | 核心论点 / 左右分屏 |\n| S04 Six Cells | 6 项概念定义 |\n| S05 Three Layers | 三层架构 |\n| S06 KPI Tower | 4 项数据视觉化高度差 |\n| S07 H-Bar Chart | 5-10 项排名比较 |\n| S08 Duo Compare | Before/After 对照 |\n| S09 Dot Matrix Statement | 大引述 / statement |\n| S10 Split Closing | 收束页 |\n| S11 Horizontal Timeline | 4-7 步流程 |\n| S12 Manifesto + Ink Banner | 阶段性结论 |\n| S13 Three Forces | 3 个对等概念深化 |\n| S14 Loop Form | 自学闭环 / 自动化 |\n| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |\n| S16 Multi-card Brief | 6 项快讯小卡 |\n| S17 System Diagram | 三层架构 / 生态地图 |\n| S18 Why Now | 三论点 + 数据支撑 |\n| S19 Four Cards | 4 项等权特性 |\n| S20 Stacked KPI Ledger | 纵向账单数据 |\n| S21 Tech Spec Sheet | 产品规格 / benchmark |\n| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |\n\n**登记扩展**:`S08 + Swiss Map Component` 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 `references/swiss-map-component.md` 的点位、连线、卡片和右上角缩放/拖动控制实现。\n\n选对应 layout,粘过去,改文案和图片路径即可。**务必先完成 3.0 预检**。\n\n**风格 B 版式多样性硬规则**:\n- 7-8 页 deck 至少使用 **6 个不同 S 编号版式**;10 页以上至少使用 8 个不同版式。\n- 如果用户说\"测试模板 / 看看效果 / 多一点版式\",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。\n- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。\n- 图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。\n- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`。校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。\n\n#### 3.2 · 图片比例规范\n\n永远用**标准比例**,不要用原图奇葩比例(如 `2592/1798`):\n\n| 场景 | 推荐比例 |\n|------|---------|\n| S22 顶部主图 | **21:9**;照片关键主体放中央安全区 |\n| S15/S16 多图格 | 统一 21:9 或统一 16:10,不能混用 |\n| 左文右图 主图(风格 A) | 16:10 或 4:3 + `max-height:56vh` |\n| 图片网格(风格 A) | **固定 `height:26vh`**,不用 aspect-ratio |\n| 左小图 + 右文字 | 1:1 或 3:2 |\n| 全屏主视觉 | 16:9 + `max-height:64vh` |\n| 图文混排小插图 | 3:2 或 3:4 |\n\n**默认不要让图片 `align-self:end`**——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + `align-items:start`(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。\n\n**风格 B 瑞士风额外规则**:\n- 单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24\n- 生成图片前先写 `data-image-slot`:例如 `s22-hero-21x9` / `s15-grid-21x9` / `s16-brief-21x9`\n- S22 配图默认生成 21:9,提示词必须包含 `subject centered in the safe middle area`;照片容器用 `object-position:center 35%`,不要用 `top center`\n- 图片容器必须直角、无阴影、无圆角;默认背景用白色 `var(--paper)`,不要用灰底包白底信息图\n- 白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 `.swiss-keyline`;需要强调时只用 `.swiss-lined` 的顶部 accent 线\n- UI/信息图如果是用户原始截图或文字密集图,才用 `.fit-contain`;如果已按 S15/S16 槽位重生成,必须用 `.frame-img.r-21x9` / `.frame-img.r-16x10` 铺满容器,不要固定 `height:18vh` 后把图缩小\n- 多图同组必须统一图片槽位、比例和高度,不能混用\n- GPT-M 2.0 生成图使用 `image-prompts.md` 的\"风格 B:瑞士国际主义配图规则\"\n- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`\n\n#### 3.2.0 · 图文混排决策树（从社交卡片规则迁移）\n\n先判断图片在这一页里的角色,再决定容器、比例和裁切方式:\n\n- **证据截图 / UI / 代码 / dashboard**:保真优先,先读 `references/screenshot-framing.md`;关键文字和数据不能被裁掉。需要统一比例时,优先程序化背景画布 + `.fit-contain`,不要为了铺满而裁掉 UI 内容。\n- **已按槽位重生成的信息图 / 插图**:按目标槽位铺满,例如 S22 用 `21:9`,S15/S16 用统一 `21:9` 或 `16:10`;不要再用短高度把图缩小成小贴片。\n- **照片 / 产品图 / 人物图**:使用标准比例 + 明确 `object-position`;主体、人脸、产品和关键证据不能被标题、caption 或裁切压住。\n- **文字压图 / 全屏主视觉**:先做 quiet-zone 判断,图里至少要有约 30% 低细节区域承载文字;不通过就换图、换裁切或改成图文分栏。只在必要时加局部 tint,不要整页套黑色/白色遮罩。\n- **多图组**:同一组统一比例、高度、容器处理和 caption 密度;不要一张 `contain`,另一张 `cover`。\n- **生成图是素材,不是整页 slide**:图片内部不要自带页眉、页脚、页码、logo、主标题、装饰边框或署名,避免和 deck chrome 重复。\n- **图文呼吸**:标题、图片、caption、正文必须各自留出间距;生成后用 validator 的 `M1/M2` 检查可见边界、底部空白、nav 安全线和标题间距。\n\n#### 3.2.1 · 中文大标题字号分档(风格 B 必做)\n\n中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:\n\n| 标题形态 | 推荐字号 |\n|---|---|\n| 1 行,≤ 8 个中文字符 | `min(6.4vw,11.2vh)` |\n| 2 行,每行≤ 8 个中文字符 | `min(5.8vw,10.2vh)` |\n| 2 行,任一行 9-12 个中文字符 | `min(5.2vw,9.2vh)` |\n| 3 行或更长 | 优先改写标题;不得已用 `min(4.6vw,8.2vh)` |\n\n如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。\n\n#### 3.2.2 · 瑞士风演示最小字号与字重阶梯(风格 B 必做)\n\n瑞士风用于投屏演示时,小字不能按网页注释的 10-12px 写。默认遵守以下下限:\n\n| 文本类型 | 最小字号 |\n|---|---|\n| 正文段落 / 主要说明 | `18px` |\n| 卡片描述 / 列表 / 时间线说明 / caption / 图注 | `16px` |\n| meta / kicker / mono label / 图表标签 | `14px` |\n\n如果内容放不下,先删减文案、拆成两页、换更适合的 Sxx 版式,不要把字号压到 10/11/12/13px。尤其是中文 deck,不要为了塞三行解释把 `body-sm`、caption、timeline label 改小。\n\n**字号与字重阶梯(瑞士风核心)** — \"越大越细,越小越粗\"不是感性描述,而是具体映射:\n\n| 字号区间 | 推荐字重 | 典型场景 |\n|---|---|---|\n| ≥ 8vw | 200 (ExtraLight) | 封面大字、巨号 KPI、h-statement |\n| 4-7.9vw | 200-300 | 章节标题(h-xl/h-xl-zh)、大编号 |\n| 1.8-3.9vw | 300-400 | 中型标题、takeaway 标题(≈1.8vw)、中号数字 |\n| 1-1.7vw / 16-20px | 400-500 | 正文段落、卡片描述、说明文字 |\n| 13-15px(小字) | 500-600 | meta、kicker、角标、图表标签、caption 强调 |\n\n**硬规则:**\n- 同一页内,字号越小的元素字重必须 ≥ 字号越大的元素(不允许 16px 正文用 300 而 1.8vw 标题用 500)\n- 16px 左右的小字拒绝使用 weight 300(太细不可读),最低 400,推荐 500\n- 封面/IkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)\n\n组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references/components.md`。\n\n### Step 4 · 对照检查清单自检\n\n生成完一定要打开 `references/checklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。\n\n所有正式演讲 deck 先跑演讲者模式校验;如果用户给了目标时长,同时传入分钟数:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30\nnode <SKILL_ROOT>/scripts/check-presenter-runtime-sync.mjs\n```\n\n第一个脚本会拦截缺失/重复页面 ID、备注与页面错位、必填字段或可选字段类型错误、完整时间计划超出 90% 预算,以及计时、排练、自动翻页、标注、演前检查和观众屏恢复控件缺失。第二个脚本会拦截两套模板之间的演讲者 CSS / JS 漂移。\n\n#### 4.0.1 · 先量后改:超出 / 空白 / 标题间距\n\n当一页内容超出或显得巨空时,不要先凭感觉大幅删改。先运行:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html\n```\n\n看校验输出里的测量项:\n\n- `M1 DOM/visual overflow`:具体超出多少 px,以及最低/最高问题元素\n- `M1 bottom whitespace`:底部空白多少 px,active content height 占比多少\n- `M1 nav-safe`:最低内容是否进入底部分页安全线\n- `M2 title gap`:标题和下一块内容之间的实际距离\n\n修正阶梯:\n\n- `1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。\n- `40-90px` over:局部压缩间距或模块高度,仍优先保留内容。\n- `90-160px` over:轻微压标题或压缩一段正文,必要时拆页。\n- `160px+` over:才考虑换版式、合并模块或删内容。\n\n修完再跑一次 validator。如果 `M1 bottom whitespace` 变大,说明修过头了;恢复部分间距、放大最后一块或把内容组向下回调。\n\n#### 4.0 · 不只看代码:必须打开网页做视觉核对\n\n代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:\n\n1. 同时打开当前模板(golden source 快照)或生成页、以及正在迭代的测试 PPT 逐页对照。\n2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。\n3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。\n4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。\n5. 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。\n6. 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。\n\n#### 风格 A · 电子杂志风必查\n\n1. **大标题必须是衬线字体**——如果显示成非衬线,99% 是 Step 3.0 预检没做,`h-hero` 类在 template.html 里缺失\n2. **图片网格里只用 `height:Nvh`,不用 `aspect-ratio`**(会撑破)\n3. **图片不能堆到页面底部**——不要用 `align-self:end`,用 grid + `align-items:start`(见 Step 3.2)\n4. **图片只能用标准比例**(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例\n5. **中文大标题 ≤ 5 字且 `nowrap`**(避免 1 字 1 行)\n6. **用 Lucide,不用 emoji**\n7. **标题用衬线,正文用非衬线,元数据用等宽**\n\n#### 风格 B · 瑞士国际主义必查\n\n1. **全程无衬线**——任何衬线字体出现都是错的(检查 `font-family` 没用 `--serif` 类变量)\n2. **只有一个 accent 色**——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色\n3. **不允许渐变 / 阴影 / 圆角**——所有色块直角纯色,任何 `box-shadow` / `linear-gradient` / `border-radius` > 0 都要砍掉(rule 横线除外)\n4. **极致字号对比**——主标题与正文比例 ≥ 8:1\n5. **大字号必须双约束限高**——`font-size:min(Xvw, Yvh)`,只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)\n6. **大字字重 200**(ExtraLight)——字号越大越细,瑞士风灵魂;**禁止** 600/700/800 大字\n7. **卡片填充类型互斥**——`card-ink` / `card-accent` / `card-fill` / `card-outlined` 四类**不能混用**(禁止\"蓝底+蓝描边\"、\"灰底+描边\"等)\n8. **多卡并列时统一样式**——3-12 张卡用同一类(优先 `card-fill` 灰底);只突出一项时单独换 `card-accent`,且**只允许一张**\n9. **直角到底**——任何 `border-radius` 都不允许;装饰用 8×8 直角小方块,**不要** 9px 圆形点\n10. **图标用 lucide,不自己画 SVG**——`<i data-lucide=\"name\"></i>` + `lucide.createIcons()`,选棱角风格(避免圆胖)\n11. **时间线对齐**——axis 列固定 12px + dot 绝对定位,**不要**用 grid `justify-self`(会与虚线错位)\n12. **章节级标题与内容间距 ≥ 9vh**——避免拥挤(吸取 P15/P16 教训)\n13. **每页一个语义化动效 recipe**——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;**禁止**所有页用同一个 generic 配方\n14. **playSlide 入口 reveal 容器**——`[data-anim]` 容器先强制 opacity:1,recipe 内再用 motion `{opacity:[0,1]}` 覆盖,否则有些页会\"看不见\"\n15. **ESC 索引页可见性**——cloned slide 必须有 CSS override 让 `[data-anim]` 在缩略图里 opacity:1\n16. **Helvetica/Inter 兜底中文字体**——Windows 用户没有\"苹方\",必须 fallback 到 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **字体粗细体例**:大字 200 / 正文 300 / `t-cat` SemiBold 600 / `t-meta` mono uppercase\n18. **保留低功耗快捷键**——右下角必须提示 `B 静态`;按 `B` 切换 `body.low-power`,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画\n19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面\n20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)\n21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` / `box-shadow`;边界只用 hairline\n22. **S15/S16/S22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 `.fit-contain`\n23. **组件角色要正确**——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填\n24. **通用/非通用版式要分清**——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用\n\n### Step 5 · 本地预览\n\n直接在浏览器打开 `index.html` 就行。macOS 下：\n\n```bash\nopen \"项目/XXX/ppt/index.html\"\n```\n\n不需要本地服务器。图片走相对路径 `images/xxx.png`。\n\n预览时不能只看普通页面。按 `P` 进入演讲者模式,允许浏览器打开观众窗口,至少实测一次:前后翻页、内嵌宫格选页并返回预览、首页/尾页、尾页重新开始、计时开始/暂停/重置、排练记录、自动翻页暂停/恢复、激光笔、圈选、黑白屏、冻结、设置组件、演前检查、备注保存、关闭观众窗口后的状态变化,以及“重新打开观众屏”能否恢复到当前页。\n\n### Step 6 · 迭代\n\n根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 `font-size:Xvw` / 高度 `height:Yvh` / 间距 `gap:Zvh`）。\n\n---\n\n## 资源文件导览\n\n```\nguizang-ppt-skill/\n├── SKILL.md                  ← 你正在读\n├── assets/\n│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）\n│   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）\n│   ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套\n│   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）\n├── scripts/\n│   ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐\n│   └── validate-presenter-mode.mjs ← 两种风格共用:页面 ID、演讲备注、时长和演讲者运行时校验\n└── references/\n    ├── components.md         ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）\n    ├── layouts.md            ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）\n    ├── swiss-layout-lock.md  ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记\n    ├── layouts-swiss.md      ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区\n    ├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)\n    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）\n    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）\n    ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词\n    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射\n    ├── presenter-mode.md     ← 演讲者 UI、AI 备注结构、观众屏同步与恢复契约\n    └── checklist.md          ← 质量检查清单（P0/P1/P2/P3 分级）\n```\n\n**加载顺序建议**：\n1. 先读完 `SKILL.md`(这个文件)了解整体\n2. Step 1 需求澄清**第一问**先确定风格 A 还是 B,然后:\n   - 风格 A:读 `themes.md` 帮用户选一套主题色\n   - 风格 B:读 `themes-swiss.md` 帮用户选一套主题色\n3. **动手前 Read 对应模板的 `<style>` 块**——这是类名的唯一来源,缺类会导致整页样式崩\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n4. 读对应的 layouts 文件挑布局:\n   - 风格 A → `layouts.md`(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)\n   - 风格 B → **先读 `swiss-layout-lock.md`**,再读 `layouts-swiss.md`;正文页必须从 S01-S22 选择,每页写 `data-layout`\n5. 如果风格 B 需要地点、路线、人物住所或城市关系地图,读 `swiss-map-component.md`\n6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产\n7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)\n8. 正式演讲先读 `presenter-mode.md`,生成稳定页面 ID 和 `SPEAKER_NOTES`\n9. 生成后先运行 `validate-presenter-mode.mjs`;风格 B 再运行 `validate-swiss-deck.mjs`,最后读 `checklist.md` 自检\n\n**动效相关**:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 `layouts.md` / `layouts-swiss.md` 的骨架在 HTML 里加 `data-anim` / `data-animate` 即可。离线演示靠 `assets/motion.min.js`,断网时自动降级为\"无动画但内容可读\"。风格 B 模板必须保留 `B` 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。\n\n## 核心设计原则（哲学）\n\n### 风格 A · 电子杂志风（5 轮迭代总结）\n\n> 违反其中任何一条，杂志感都会垮。\n\n1. **克制优于炫技** — WebGL 背景只在 hero 页透出，普通页几乎看不见\n2. **结构优于装饰** — 不用阴影、不用浮动卡片、不用 padding box，一切信息靠**大字号 + 字体对比 + 网格留白**\n3. **内容层级由字号和字体共同定义** — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据\n4. **图片是第一公民** — 图片只裁底部，保证顶部和左右完整；网格用 `height:Nvh` 固定，不要用 `aspect-ratio` 撑\n5. **节奏靠 hero 页** — hero 和 non-hero 交替，才不累眼睛\n6. **术语统一** — Skills 就是 Skills，不要中英混合翻译\n\n### 风格 B · 瑞士国际主义风\n\n> 违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。\n\n1. **单一锚点色** — 一份 deck 只用一个 accent，不允许多色高亮拼贴\n2. **极致字号对比** — 主标题与正文比例 ≥ 8:1,KPI 必须是\"Data Hero\"(屏幕宽度的 18-22%)\n3. **无衬线只此一家** — Inter / Helvetica / Noto Sans SC,任何衬线都是错的\n4. **直角纯色** — 不允许渐变 / 阴影 / 圆角(rule 横线除外)\n5. **网格至上** — 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学\n6. **Hairline 是手术刀** — 1px 的极细分割线就够,不要加粗、不要加阴影\n7. **点阵装饰只在 hero 页透出** — 正文页保持纯净底色\n\n## 参考作品\n\n本 skill 的两种风格分别参考了：\n\n**风格 A · 电子杂志风**:\n- 歸藏 \"一人公司：被 AI 折叠的组织\" 分享（2026-04-22，27 页）\n- *Monocle* 杂志的版式\n- YC 总裁 Garry Tan \"Thin Harness, Fat Skills\" 那篇博客的 demo\n\n**风格 B · 瑞士国际主义风**:\n- Massimo Vignelli 的 NYC Subway / Unimark 系统\n- *Helvetica Forever* 的字体设计语言\n- Josef Müller-Brockmann 的网格系统经典著作\n- 当代设计:Acne Studios / Off-White / IKEA / Beck Design\n\n可以把它们当做风格锚点。\n"},"files":{"references/image-prompts.md":"# GPT-M 2.0 配图提示词\n\n用于 Codex 环境下为本 skill 生成 PPT 配图。提示词只负责定基调,不要写成长篇说明。先判断图片落位和比例,再选择类型。\n\n## 通用规则\n\n- 先判断当前 deck 风格:风格 A = 电子杂志 × 电子墨水;风格 B = 瑞士国际主义 / Swiss Style\n- 风格 A 基调:电子杂志 × 电子墨水,克制、真实、留白充足,适合横向网页 PPT\n- 风格 B 基调:Swiss International Typographic Style,12/16 列网格、Helvetica/Inter 气质、单一高饱和 accent、直角纯色、发丝线、极大留白\n- 信息图、图表、截图再设计中的文字语言必须跟随用户语言:中文 deck 用中文,英文 deck 用英文\n- 不生成卡通、3D、霓虹科技感、SaaS 模板感、过度装饰或假 logo\n- 图片要给标题或正文留出可叠加空间,不要满屏堆细节\n- 同一页或同一组图片必须使用同一比例、同一视觉缩放、同一边距密度\n- 配图是嵌入 PPT 的素材,不是一张独立 slide:不要生成页眉、页脚、页码、标题栏、角标、署名、装饰边框或 slide chrome\n- 生成后保存到 `images/`,命名为 `{页号}-{语义}.{ext}`\n\n## 比例选择\n\n| 用途 | 推荐比例 | HTML 落位 |\n|------|---------|-----------|\n| 章节封面 / 全屏主视觉 | 16:9 | `.frame-img.r-16x9` 或 hero 背景参考 |\n| 瑞士风顶部横幅 / Image Hero | 16:9 或 21:9 | P22 顶图 cover / `.frame-img.r-21x9` |\n| 左文右图主图 | 16:10 或 4:3 | `.frame-img.r-16x10` / `.frame-img.r-4x3` |\n| 信息图 / 系统关系图 | 16:9 或 16:10 | 原始截图用 `.fit-contain`;按槽位重生成则用 `.frame-img.r-16x9` / `.frame-img.r-16x10` 铺满 |\n| 截图再设计 / UI 情景图 | 16:10 或 21:9 | 原始截图用 `.fit-contain`;重生成到 S15/S16 时用 `.frame-img.r-21x9` 铺满 |\n| 图文混排小图 | 3:2 或 3:4 | `.frame-img.r-3x2` / `.frame-img.r-3x4` |\n| 图片网格 | 统一横图 | `.frame-img.h-22` / `.frame-img.h-26` |\n| 小型面板组 | 统一横图 | `.frame-img.h-16` / `.frame-img.h-18` |\n\n信息图和截图再设计如果来自不可控原始素材,优先用 `fit-contain`,避免文字被裁切;如果是 GPT-M 2.0 按槽位重新生成,必须生成同槽位比例并铺满容器,不要让小图漂在白框里。纪实照片优先用默认 `cover`,保持画面张力。\n\n## 图片标准化策略\n\n### A. 先选目标槽位\n\n不要先生成图片再硬塞进页面。先决定图片落位:\n\n1. 主视觉:16:9\n2. 左文右图:16:10 或 4:3\n3. 信息图/截图再设计:16:9 或 16:10,并使用 `fit-contain`\n4. 多图网格/面板组:统一高度类,同一组内禁止混用高度\n\n### B. 用户原始图片/截图的处理\n\n原始截图比例通常不可控,不要直接作为最终视觉标准。按下面顺序处理:\n\n1. 如果原图内容需要保真,先读 `screenshot-framing.md`,用 CleanShot X 式程序化适配:目标比例画布 + 风格化背景 + 截图等比缩放 + 语义化 padding/alignment\n2. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`\n3. 如果一张 UI 图被拉成巨长条,拆成 2-3 张同尺寸局部面板;每个面板使用同一高度类\n4. 如果原图过高、过窄、过长且无法通过适配解决,再用\"截图再设计 / UI 情景图\"重新生成到目标比例\n5. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字\n\n### C. 生成提示词后缀\n\n每个配图提示词最后都补一句规格约束:\n\n```text\n输出必须是[16:9/16:10/4:3/3:2]横向构图,主体居中但保留边距,画面密度中等,与同组图片保持相同视觉缩放和边距。只保留核心图形/画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n同一页需要多张图时,补一句:\n\n```text\n这是一组图片中的一张,请保持与同组图片相同的画面比例、元素大小、边距、线条粗细和标注密度。\n```\n\n## 类型 1: 人文纪实照片\n\n用于增加现场感、情绪和真实世界锚点。\n\n```text\n生成一张横向纪实摄影配图,主题是:[页面概念]。风格像 Fujifilm / Leica editorial documentary,自然光、低饱和、轻微胶片颗粒、真实工作或生活现场,克制有人文温度。适合电子杂志 × 电子墨水 PPT,留出标题空间。不要商业摆拍、科幻界面、AI 机器人、logo 或水印。输出必须是[16:9/16:10/4:3]横向构图,主体居中但保留边距,画面密度中等。只保留核心照片本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 2: 杂志风信息图\n\n用于解释概念、流程、对比、系统关系。\n\n```text\n生成一张横向杂志风信息图,解释:[概念/流程/关系]。电子墨水风格,黑白灰为主,少量低饱和强调色,细线条、网格、编号、短标签、留白充足。图中文字使用[中文/英文],保持简短可读。不要卡通、3D、霓虹科技感或模板感。输出必须是[16:9/16:10]横向构图,主体居中但保留边距,画面密度中等。只保留核心信息图本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 3: 流程 / Pipeline 图\n\n用于讲清从 A 到 B 到 C 的过程。\n\n```text\n生成一张横向流程信息图,展示:[步骤 1] → [步骤 2] → [步骤 3] → [结果]。风格为电子杂志 × 电子墨水,细箭头、分段编号、短注释、克制留白。图中文字使用[中文/英文]。只保留核心流程图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 4: 对比图\n\n用于 before / after、新旧模式、两种协作方式对照。\n\n```text\n生成一张横向对比信息图,左侧是[旧模式],右侧是[新模式]。风格像高端独立杂志里的分析图,黑白灰和一个低饱和强调色,细线分栏、短标签、清晰层级。图中文字使用[中文/英文]。只保留核心对比图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 5: 系统关系图\n\n用于多角色、多工具、多模块之间的关系。\n\n```text\n生成一张横向系统关系图,展示:[角色/工具/模块]之间如何连接。电子墨水杂志风,节点、细线、箭头、编号和少量短注释,结构清晰,留白充足。图中文字使用[中文/英文]。只保留核心关系图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 6: 截图再设计 / UI 情景图\n\n用于把真实截图、代码、设计稿、工作区处理成统一视觉素材。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成适合杂志风 PPT 的视觉。保留真实产品工作流的感觉,使用纸张底色、细线框、网格、少量标注和克制阴影。图中文字使用[中文/英文],短而清晰。不要真实品牌 logo、花哨 dashboard、霓虹渐变或过度拟物。输出必须是16:10横向构图,主体居中但保留边距,画面密度中等。只保留核心 UI 画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 7: 数据大字报图\n\n用于突出一个关键数字或少量指标。\n\n```text\n生成一张横向数据大字报视觉,核心数字是:[数字],含义是:[含义]。风格为电子墨水杂志版式,超大衬线数字、少量短注释、细线、留白和纸张质感。图中文字使用[中文/英文]。只保留核心数据视觉本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n---\n\n## 风格 B:瑞士国际主义配图规则\n\n当 deck 选择 `assets/template-swiss.html` / `layouts-swiss.md` 时,优先使用下面这组提示词。它们和 GPT-M 2.0 配套,目标是生成能直接放进原始登记版式的图片槽位,尤其是 S22 顶部横幅、S15/S16 多图网格。\n\n### Swiss 配图硬规则\n\n- 视觉锚点:International Typographic Style / Swiss modernism / Helvetica / Josef Müller-Brockmann / Massimo Vignelli\n- 构图:严格 12/16 列网格、非对称留白、左对齐、发丝线、直角模块\n- 色彩:只使用黑、白、灰和**一个**主题 accent(默认 IKB 蓝;如果用户选柠檬黄/绿/安全橙,就替换为对应 accent)\n- 禁止:渐变、阴影、圆角、玻璃拟态、霓虹、3D、卡通、SaaS 模板感、伪 logo、装饰边框\n- 图片内部不要生成 PPT 外壳:不要页眉、页脚、页码、标题栏、角标、署名、外框\n- UI / 信息图文字必须短,保持中文/英文语言一致;真实照片尽量不要带文字\n- 先确定版式槽位再生成图片:单张大图用 `s22-hero-21x9`;多图格用 `s15-grid-21x9` 或 `s16-brief-21x9`\n- 21:9 图片必须让核心主体落在中央 70% 安全区,四周留白;不要把人脸、关键节点或 UI 文字贴边\n\n### Swiss 类型 1:纪实照片 / 案例主图\n\n用于 S22 Image Hero,增加真实场景锚点。\n\n```text\n生成一张 21:9 超宽横向纪实摄影配图,主题是:[页面概念]。风格是 Swiss editorial documentary:高对比、低饱和、冷静克制、真实办公/城市/产品使用场景,构图有大量负空间,主体位于中央 70% 安全区,适合放入瑞士国际主义 PPT 的顶部横幅。不要 AI 机器人、科幻界面、商业摆拍、logo、水印或文字。只保留核心照片本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 2:信息图 / 系统关系图\n\n用于解释概念、架构、流程、数据与表现分离等抽象内容。\n\n```text\n生成一张横向 Swiss Style 信息图,解释:[概念/流程/系统关系]。使用 Helvetica/Inter 气质的无衬线短标签、12/16 列网格、直角模块、1px 发丝线、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent。图中文字使用[中文/英文],每个标签不超过 8 个字/词。不要渐变、阴影、圆角、3D、卡通、霓虹或 SaaS 模板感。输出比例为[21:9/16:10],主体居中但保留大留白。只保留核心信息图本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 3:截图再设计 / UI 情景图\n\n用于把截图、工作区、代码、dashboard 重绘成统一 Swiss 风视觉。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成 Swiss International Typographic Style。画面使用极简 dashboard / workspace 结构,直角面板、发丝线、12 列网格、少量 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,无阴影无圆角。图中文字使用[中文/英文],短而清晰,不要真实品牌 logo。输出必须是16:10横向构图,视觉密度中等,适合放进 `.frame-img.r-16x10.fit-contain`。只保留核心 UI 画面本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 4:多图网格单张素材\n\n用于 S15/S16 图片格改造,一组 2-6 张图片并列时逐张生成。\n\n```text\n生成一张横向证据图,主题是:[证据 A/B/C]。这是一组 Swiss Style 图片中的一张,请保持直角模块、黑白灰、单一 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent、相同边距、相同线条粗细、相同视觉缩放。图中文字使用[中文/英文],短标签即可。输出必须是[21:9/16:10]横向构图,适合放入 S15/S16 统一图片格。只保留核心图像本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 5:极简图表 / 数据块\n\n用于 S21 或 S15/S16 图片格中的小型数据解释图。\n\n```text\n生成一张横向 Swiss Style 数据图,核心数据是:[数字/对比/排名],含义是:[说明]。使用极大无衬线数字、1px 发丝线、直角色块、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,像瑞士海报里的数据版式。图中文字使用[中文/英文],只保留必要标签。不要渐变、阴影、圆角、3D 或装饰边框。比例:[16:9/16:10]。只保留核心数据图本身,不要页眉、页脚、标题、页码、角标、署名或 PPT 外壳。\n```\n","references/screenshot-framing.md":"# 截图美化语义规则\n\n用于把用户提供的产品截图、网页截图、代码截图、设计稿截图处理成符合模板比例的图片资产。目标是类似 CleanShot X 的“截图居中 + 背景填充 + 统一比例”,而不是默认让 GPT-M 2.0 重画截图。\n\n## 优先级\n\n1. **程序化适配优先**:截图内容、文字、UI 细节需要保真时,不要重画;创建目标比例画布,把原截图等比缩放后放入画布。\n2. **GPT-M 2.0 只做重构**:只有原图过长、过窄、信息太乱、需要 UI 情景化或概念化表达时,才使用“截图再设计 / UI 情景图”。\n3. **模板槽位先行**:先确定 slide 版式和图片槽位比例,再决定截图适配参数。\n\n## 开始前询问\n\n在主流程 Step 1 中,只要用户可能提供截图,就先问清楚:\n\n- 截图在哪个文件夹?是否包含网页、App、代码、dashboard、设计稿或旧 PPT?\n- 这批截图要**保真展示**、**统一美化**、**重新设计成 UI 情景图**,还是混合处理?\n- 最终要放进哪些槽位:21:9 顶图、16:10 主图、4:3 侧图、1:1 方图、还是多图网格?\n- 是否必须保留所有文字和数据?是否需要隐藏账号、头像、项目名等敏感信息?\n- 构图希望居中、左上、右下,还是根据页面内容自动判断?\n\n如果在 Claude Code 中,用 Ask Question / `ask_question` 做这些澄清;如果在 Codex 中,用普通对话询问,不要调用 Ask Question。\n\n## 处理链路\n\n1. **先匹配版式**:根据内容选择模板 layout,确定截图槽位尺寸和比例。\n2. **再选处理方式**:\n   - 要保真:程序化适配,不重画截图。\n   - 要统一视觉但不改内容:程序化适配 + 主题背景。\n   - 原图不可用或需要解释概念:再走 GPT-M 2.0 截图再设计。\n3. **再选择背景**:优先使用内置背景资产,不应该每张截图临时生成一种风格。\n4. **最后合成截图**:创建目标比例画布,背景 cover 铺满,截图等比缩放后按 `padding` 和 `alignment` 放入。\n\n默认不要裁掉截图内容。只有截图已经按目标槽位重新生成,或者用户明确允许裁切时,才使用 cover 裁切。\n\n## 语义参数\n\n每次处理截图前,先确定这 7 个参数:\n\n| 参数 | 可选值 | 判断方式 |\n|---|---|---|\n| `ratio` | `21:9` / `16:10` / `16:9` / `4:3` / `1:1` | 跟随模板图片槽位,不要跟随原截图比例 |\n| `background` | `plain` / `gradient` / `wallpaper` / `blurred` / `grid` / `paper` | 跟随当前 PPT 风格和主题 |\n| `padding` | `compact` / `standard` / `spacious` | 普通截图 standard;文字密集或高截图 spacious;小图组 compact |\n| `inset` | `none` / `subtle` / `balanced` | 截图需要从背景中浮出来时用 balanced;瑞士风多用 none/subtle |\n| `shadow` | `none` / `soft` / `editorial` | Style A 可 soft/editorial;Style B 默认 none |\n| `corners` | `square` / `small` / `medium` | Style B square;Style A small/medium |\n| `alignment` | `center` / `top-left` / `top-right` / `bottom-left` / `bottom-right` | 跟随页面构图,不是永远居中 |\n\n## 风格映射\n\n### Style A · 电子杂志风\n\n- 背景: `paper` / `blurred` / 低饱和 `gradient`\n- 质感:纸张、墨水、胶片颗粒、暖白、低对比\n- 截图:可用小圆角和轻微阴影,但不要像 SaaS 营销卡片\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-a/` 下对应主题的 16:9 crop-safe WebP,截图合成时按槽位裁切\n- 推荐语义:\n\n```text\nratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editorial, corners:small, alignment:center\n```\n\n### Style B · 瑞士国际主义\n\n- 背景: `plain` / `grid` / `dot-matrix`\n- 色彩:只允许当前锚点色作为极低占比强调;不要大面积亮色块\n- 截图:直角、无阴影、无圆角、少量 hairline 或顶部 accent 线\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-b/` 下对应主题色的 16:9 crop-safe WebP,只用当前 accent,不要混色\n- 推荐语义:\n\n```text\nratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corners:square, alignment:center\n```\n\n## 背景强度规则\n\n截图背景是“托底”,不是主视觉。\n\n- 如果 `alignment` 不确定,背景中心和四角都必须安静,不要放显眼色块。\n- 如果截图要放在右下角,右下角不能有强色块;其他位置同理。\n- 瑞士风锚点色只做 `5%-8%` 视觉占比的淡线、点阵或极浅几何场,不要生成高亮蓝条、大色块、霓虹渐变。\n- 背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图。\n- 背景必须 crop-safe:裁成 `21:9`、`16:10`、`4:3`、`1:1` 都不能暴露“被裁掉”的痕迹。\n\n## 内置主题背景资产\n\n本 Skill 已经内置一组 GPT-M 2.0 预生成背景。处理截图时**优先使用这些资产**,不要实时调用 GPT-M 2.0 重新生成背景。只有用户明确要求新风格、现有主题缺失,或背景与内容明显不匹配时,才生成新的背景。\n\n背景图之后由程序复用到每张截图中。不要把背景当作单张 slide 来画,背景图内部不能有标题、页脚、边框、logo、人物或明显主体。\n\n### Style A · 5 套主题背景\n\n| 主题 | 内置资产 | 背景语义 |\n|---|---|---|\n| 墨水经典 | `assets/screenshot-backgrounds/style-a/monocle-classic.webp` | 黑白灰纸张纹理、柔和阴影、细颗粒 |\n| 靛蓝瓷 | `assets/screenshot-backgrounds/style-a/indigo-porcelain.webp` | 靛蓝低饱和墨色、纸感渐变、轻微噪点 |\n| 森林墨 | `assets/screenshot-backgrounds/style-a/forest-ink.webp` | 模糊植物阴影、低饱和绿色、纸张颗粒 |\n| 牛皮纸 | `assets/screenshot-backgrounds/style-a/kraft-paper.webp` | 暖纸色、淡墨阴影、复古印刷颗粒 |\n| 沙丘 | `assets/screenshot-backgrounds/style-a/dune.webp` | 沙色/灰调柔和渐变、低对比、留白安静 |\n\n### Style B · 4 套主题背景\n\n| 主题色 | 内置资产 | 背景语义 |\n|---|---|---|\n| IKB 蓝 | `assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp` | 点阵 + 低对比蓝色渐变,避免亮蓝大色块 |\n| 柠檬黄 | `assets/screenshot-backgrounds/style-b/lemon-grid.webp` | 纯网格 + 稀疏点阵,黄色只做低透明细线/点 |\n| 柠檬绿 | `assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp` | 点阵 + 阴影场,绿色只做轻微光感 |\n| 安全橙 | `assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp` | 模块化半调点阵 + 暗部阴影,橙色低占比 |\n\n内置背景都是 1920×1080 级别的 16:9 WebP。程序化合成时,先把背景 cover 到目标画布,再裁成 `21:9` / `16:10` / `4:3` / `1:1` 等截图槽位。背景必须四角安静,因为截图可能居中、左上、右下或被裁成不同尺寸。\n\n## 截图类型决策\n\n| 原始素材 | 推荐处理 |\n|---|---|\n| 普通网页 / App / 桌面截图 | 程序化适配到目标比例 |\n| 产品 UI 细节很重要 | 程序化适配,使用 `fit-contain`,不重画 |\n| 长网页截图 | 截关键区域或拆成 2-3 张同尺寸面板 |\n| 极窄 / 极高截图 | 先尝试 `spacious + side alignment`;仍太小时再重构 |\n| 代码截图 | Style A 用纸感背景;Style B 用浅网格背景;文字必须可读 |\n| 概念解释用的 UI 情景图 | 可以 GPT-M 2.0 重新设计 |\n\n## 生成背景图提示词\n\n只有需要新增背景资产时才使用本节。常规截图美化不要实时生成背景,直接使用上方内置资产。\n\n### Style A 背景\n\n```text\n16:9 crop-safe screenshot background for an editorial magazine / e-ink PPT system. Warm off-white paper texture, subtle ink wash, fine film grain, low contrast, quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n\n### Style B 背景\n\n```text\n16:9 crop-safe screenshot background for a Swiss International Style PPT system. Pure off-white base, ultra-subtle 16-column grid and sparse dot matrix, one accent color only: [theme color], used at very low opacity as thin lines or tiny dots, no large bright color blocks. Quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n","references/components.md":"# 组件参考 · Components\n\n这是 `guizang-ppt-skill` skill 的组件手册。template.html 已经定义好了所有样式，这里只写\"这个组件长什么样、怎么用\"。\n\n## 目录\n\n- [基础 Slide 外壳](#基础-slide-外壳)\n- [字体 Typography](#字体-typography)\n- [Chrome & Foot](#chrome--foot)\n- [Callout 引用框](#callout-引用框)\n- [Stat 数字矩阵](#stat-数字矩阵)\n- [Platform 平台卡](#platform-平台卡)\n- [Rowline 表格行](#rowline-表格行)\n- [Pillar 支柱卡](#pillar-支柱卡)\n- [Tag & Kicker](#tag--kicker)\n- [Figure 图片框](#figure-图片框)\n- [Icons 图标](#icons-图标)\n- [Ghost 巨型背景字](#ghost-巨型背景字)\n- [Highlight 荧光标记](#highlight-荧光标记)\n- [Motion 动效系统](#motion-动效系统)\n\n---\n\n## 基础 Slide 外壳\n\n每一页都是一个 `<section class=\"slide ...\">`。必须包含 `data-theme` 属性（`light` 或 `dark`），JS 翻页时会根据这个属性切换背景。\n\n```html\n<section class=\"slide light\" data-theme=\"light\">   <!-- 浅色页 -->\n<section class=\"slide dark\" data-theme=\"dark\">     <!-- 深色页 -->\n<section class=\"slide light hero\" data-theme=\"light\">  <!-- Hero 页：浅色 + 薄遮罩透出 WebGL -->\n<section class=\"slide dark hero\" data-theme=\"dark\">    <!-- Hero 页：深色 + 薄遮罩 -->\n```\n\n**light vs dark 的使用：交替使用**，每 2-3 页切换一次主题，避免连续超过 3 页同色。翻页时 WebGL 背景会自动在两个 shader 之间渐变过渡。\n\n**hero 类的使用**：只给视觉主导的页面加（封面、金句页、章节过渡、结尾）。加 `hero` 后遮罩降到 12-16%，WebGL 背景会大幅透出，所以不要在 hero 页上放太多文字。\n\n---\n\n## 字体 Typography\n\n字体分工是本模板最重要的规则，严禁混用。\n\n| Class | 用途 | 字体 |\n|---|---|---|\n| `.display` | 超大号英文（Hero 页） | Playfair Display 700, 11vw |\n| `.display-zh` | 超大号中文标题 | Noto Serif SC 700, 7.8vw |\n| `.h1-zh` | 页面主标题 | Noto Serif SC 700, 4.6vw |\n| `.h2-zh` | 副标题 | Noto Serif SC 600, 3.2vw |\n| `.h3-zh` | 流水线步骤标题 | Noto Serif SC 500, 1.9vw |\n| `.lead` | 引导段（比 body 大） | Noto Serif SC 400, 1.9vw |\n| `.body-zh` | **正文/描述（非衬线）** | Noto Sans SC 400, 1.22vw |\n| `.body-serif` | 正文（衬线） | Noto Serif SC 400, 1.3vw |\n| `.kicker` | 小节提示（标题上方） | IBM Plex Mono, 12px uppercase |\n| `.meta` | 元信息标签 | IBM Plex Mono, 0.88vw uppercase |\n| `.big-num` | 巨型数字 | Playfair Display 800, 10vw |\n| `.mid-num` | 中号数字 | Playfair Display 700, 5.5vw |\n\n**核心规则**：\n- **衬线**（`serif-zh` / `serif-en`）：标题、重点金句、数字 —— 用于\"视觉重音\"\n- **非衬线**（`sans-zh`）：正文描述、大段阅读内容 —— 用于\"信息密度\"\n- **等宽**（`mono`）：kicker、meta、foot 的英文标签 —— 用于\"装饰节奏\"\n\n**强调技巧**：\n- `<em class=\"en\">英文词</em>` —— 把英文词渲染成 Playfair Display 斜体（很好看）\n- `<em style=\"opacity:.65\">短语</em>` —— 让标题后半段淡出，制造节奏\n\n---\n\n## Chrome & Foot\n\n每一页的顶部和底部的元信息条。几乎所有页都应该有。\n\n```html\n<div class=\"chrome\">\n  <div class=\"left\">\n    <span>第一幕 · 硬数据</span>\n    <span class=\"sep\"></span>\n    <span>Act I</span>\n  </div>\n  <div class=\"right\"><span>02 / 27</span></div>\n</div>\n\n<!-- ... 页面主体 ... -->\n\n<div class=\"foot\">\n  <div class=\"title\">项目名 · CodePilot　|　github.com/codepilot</div>\n  <div>Act I · Dev Numbers</div>\n</div>\n```\n\n**规则**：\n- `chrome.right` 总是放页码 `NN / TOTAL` （TOTAL 为总页数）\n- `foot.title` 是中文说明，`foot.right` 是英文 act 标记\n- chrome 和 foot 共同构成杂志感的\"页眉页脚\"\n\n---\n\n## Callout 引用框\n\n展示金句 / 关键观点 / 他人引言。\n\n```html\n<div class=\"callout\" style=\"max-width:80vw\">\n  <div class=\"q-big\">\"这东西在三年前，<br>需要一个十人团队做一年。\"</div>\n  <span class=\"cite\">— 一个观察者的判断</span>\n</div>\n```\n\n变体：\n- 不带 cite：去掉 `<span class=\"cite\">` 即可\n- 带英文金句：`<em class=\"en\">\"Thin Harness, Fat Skills.\"</em>`\n- 在 hero 页使用：外层加 `style=\"position:relative;z-index:2\"`（避免被背景遮罩盖住）\n\n---\n\n## Stat 数字矩阵\n\n展示数据指标，常与 `.grid-6` / `.grid-4` 配合。\n\n```html\n<div class=\"grid-6\">\n  <div class=\"stat\">\n    <span class=\"m\">Duration</span>\n    <span class=\"n\">64<em style=\"font-size:.4em;opacity:.5;font-style:normal\"> 天</em></span>\n    <span class=\"l\">从 0 到现在</span>\n  </div>\n  <!-- ... 更多 stat ... -->\n</div>\n```\n\n三段式结构：`.m` 等宽小标签 → `.n` 巨型数字 → `.l` 描述说明。数字后的单位用 `<em>` 缩小到 0.4em，opacity 0.5。\n\n**常用布局容器**：\n- `.grid-6` — 3×2 网格（最常用，6 个 stat）\n- `.grid-4` — 2×2 网格（4 个 stat）\n- `.grid-3` — 3 等分单行（3 个 stat / pillar）\n\n---\n\n## Platform 平台卡\n\n展示社交平台 / 渠道 + 粉丝数。\n\n```html\n<div class=\"plat\">\n  <div class=\"sub\">Weibo</div>\n  <div class=\"name\">微博</div>\n  <div class=\"nb\">289K</div>\n</div>\n```\n\n可选第四行（补充说明）：\n```html\n<div class=\"body-zh\" style=\"font-size:max(11px,.8vw);opacity:.5;margin-top:.6vh\">\n  含小绿书同步\n</div>\n```\n\n**\"Also On\" 变体**（补充平台）：\n```html\n<div class=\"plat\" style=\"border-top-style:dashed;opacity:.72\">\n  <div class=\"sub\">Also On</div>\n  <div class=\"body-zh\" style=\"font-weight:600;margin-top:.8vh\">\n    B 站　·　知乎\n  </div>\n</div>\n```\n\n---\n\n## Rowline 表格行\n\n列表式内容，每行一个条目。\n\n```html\n<div class=\"rowline\">\n  <div class=\"k\">CLAUDE.md</div>\n  <div class=\"v\">你该怎么做事 —— 行为规则 + 工作偏好 + 禁止事项</div>\n  <div class=\"m\">EMPLOYEE · HANDBOOK</div>\n</div>\n```\n\n三列结构：`.k` 衬线关键词 · `.v` 正文描述 · `.m` 等宽标签（右对齐）。第一个和最后一个 rowline 自动加上下边框。\n\n**变体：2 列**：`style=\"grid-template-columns:1fr 3fr\"` 去掉 `.m` 列。\n\n---\n\n## Pillar 支柱卡\n\n三支柱结构，常用于\"概念并列\"类型页面。\n\n```html\n<div class=\"grid-3\">\n  <div class=\"pillar\">\n    <div class=\"ic\">01</div>\n    <div class=\"t\">三层<br>文档体系</div>\n    <div class=\"d\">CLAUDE.md<br>+ 项目知识库<br>+ 护栏文件</div>\n  </div>\n  <!-- ... 更多 pillar ... -->\n</div>\n```\n\n**带图标的 pillar（用于强调性页面）**：\n```html\n<div class=\"pillar\" style=\"padding:4vh 2vw;border:1px solid currentColor;border-color:rgba(10,10,11,.2)\">\n  <div class=\"ic\"><i data-lucide=\"compass\" class=\"ico-lg\"></i></div>\n  <div class=\"t\">判断力</div>\n  <div class=\"d\">决策和方向的权威。<br>取舍、品味、方向感。</div>\n</div>\n```\n\n`.ic` 可以是序号（`01 / 02 / 03` 或 `A. / B. / C.`），也可以是 Lucide 图标。\n\n---\n\n## Tag & Kicker\n\n**Kicker** 是标题上方的小提示文字（等宽、全大写、小字号）：\n```html\n<div class=\"kicker\">过去 64 天 · 开发篇</div>\n<div class=\"h1-zh\">一个人，做了什么。</div>\n```\n\n**Tag** 是独立的标签胶囊（带边框）：\n```html\n<div style=\"display:flex;gap:1.6vw;flex-wrap:wrap\">\n  <div class=\"tag\">早上 10 点起床</div>\n  <div class=\"tag\">周二 / 四下午健身</div>\n  <div class=\"tag\">晚上照样看剧 · 玩游戏</div>\n</div>\n```\n\n---\n\n## Figure 图片框\n\n**这是本模板最容易踩坑的组件，务必遵守以下规则**。\n\n### 基础结构\n\n```html\n<figure class=\"tile\">\n  <div class=\"frame-img\" style=\"height:26vh\">\n    <img src=\"图片素材/xxx.png\" alt=\"说明\">\n  </div>\n  <figcaption class=\"frame-cap\">\n    <span class=\"pf\">推特 · Twitter</span>\n    <span class=\"nb\">137K</span>\n  </figcaption>\n</figure>\n```\n\n### 关键约束（血泪经验，不要违反）\n\n1. **图片网格必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。\n   - 原因：网格里用 aspect-ratio 容易撑破父容器，导致图片堆叠。\n   - 推荐尺寸：`.h-16` (小型面板) / `.h-18` (紧凑条形) / `.h-22` (标准网格) / `.h-26` (突出展示) / `.h-28` (大图)。\n   - 单张主图可以用模板提供的比例类：`.r-16x9` / `.r-16x10` / `.r-4x3` / `.r-3x2` / `.r-3x4` / `.r-1x1`。\n   - 同一组图片必须使用同一个高度类,不要一张 `25vh`、一张 `21vh` 混用。\n\n2. **`object-position:top center`（已在 CSS 里设好）**，只允许裁掉底部。\n   - 严禁裁剪左右和顶部 —— 这是图片的核心身份信息区。\n\n3. **网格里多张图时，用内联 grid 而不是 `grid-3`**：\n   ```html\n   <div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:1vh 1.2vw\">\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n   </div>\n   ```\n\n4. **图片与布局其他部分对齐**：使用 `.grid-2-7-5` / `.grid-2-6-6` / `.grid-2-8-4` 的 grid 结构自然顶对齐。不要给图片加 `align-self:end`。\n\n5. **信息图 / 截图再设计**：给 `.frame-img` 同时加 `.fit-contain`，避免图内文字和标注被裁切。\n\n6. **用户原始截图比例不合适时**：优先按 `screenshot-framing.md` 做 CleanShot X 式程序化适配;只有截图太长、太窄或需要重构信息时,才重新生成\"截图再设计 / UI 情景图\"。\n\n### Frame Caption 变体\n\n```html\n<!-- 标准：左 figure 名，右数字 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"pf\">推特 · Twitter</span>\n  <span class=\"nb\">137K</span>\n</figcaption>\n\n<!-- 带编号 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"idx\">01</span>\n  <span class=\"pf\">AI 润色</span>\n  <span>Polish</span>\n</figcaption>\n```\n\n### 图片占位（设计阶段占位符）\n\n图片还没有就位时，用虚线框占位：\n```html\n<div class=\"img-slot r-4x3\">  <!-- r-4x3 / r-16x9(default) / r-3x2 / r-1x1 -->\n  <span class=\"plus\">+</span>\n  <span class=\"label\">GitHub 截图位置</span>\n</div>\n```\n\n---\n\n## Icons 图标\n\n**严禁使用 emoji**。用 Lucide via CDN（template.html 已引入）。\n\n```html\n<i data-lucide=\"compass\" class=\"ico-lg\"></i>     <!-- 大图标（pillar 用） -->\n<i data-lucide=\"target\" class=\"ico-md\"></i>      <!-- 中图标（列表项用） -->\n<i data-lucide=\"check-circle\" class=\"ico-sm\"></i>  <!-- 小图标（inline 用） -->\n```\n\n**常用 Lucide 图标名**（按含义分组）：\n\n- 判断类：`compass`, `target`, `crosshair`, `search-check`\n- 关系类：`share-2`, `users`, `network`, `link`, `handshake`\n- 品牌类：`crown`, `gem`, `award`, `star`, `badge-check`\n- 流程类：`workflow`, `route`, `arrow-right-left`, `repeat`\n- 数据类：`grid-2x2`, `bar-chart-3`, `trending-up`, `activity`\n- 审美类：`palette`, `brush`, `eye`, `sparkles`\n- 对错类：`check-circle`, `x-circle`, `check`, `x`\n- 方向类：`arrow-right`, `arrow-up-right`, `corner-down-right`\n\n**图标与文字 inline 组合**：\n```html\n<div class=\"h3-zh\" style=\"display:flex;align-items:center;gap:.8em\">\n  <i data-lucide=\"target\" class=\"ico-md\"></i>\n  判断 — 什么值得写\n</div>\n```\n\n---\n\n## Ghost 巨型背景字\n\n用作\"装饰性背景字\"，极低透明度，营造杂志感。\n\n```html\n<div class=\"ghost\" style=\"right:-6vw;top:-8vh\">BUT</div>\n<div class=\"ghost\" style=\"left:-8vw;bottom:-18vh;font-style:italic\">Harness</div>\n```\n\n- 字号 34vw，opacity 0.06\n- 常用定位：`right:-6vw;top:-8vh`（右上超出）/ `left:-8vw;bottom:-18vh`（左下超出）\n- 内容：英文单词或数字（章节序号 01/02/03、关键词 BUT/NOW/HERE）\n\n**注意**：使用 ghost 的页面里，其他内容要加 `position:relative;z-index:2` 避免被压到下面。\n\n---\n\n## Highlight 荧光标记\n\n行内短语的\"荧光笔\"效果：\n\n```html\n<span class=\"hi\">不是</span>\n<span class=\"hi\">一次性爆发</span>\n```\n\n在文字底部生成一条半透明高亮条。深色主题用亮条，浅色主题用暗条（CSS 已处理）。\n\n**适合场景**：只对关键 1-3 个词使用，不要大面积用。\n\n---\n\n## Motion 动效系统\n\n整套 deck 默认开启翻页入场动画,由 Motion One(vanilla 版 Framer Motion,约 4KB)驱动。\n\n### 加载方式\n\n`assets/template.html` 底部的 module script 会先尝试**本地** `assets/motion.min.js`,失败则回落到 **jsdelivr CDN**,两者都失败则强制把所有带 `data-anim` 的元素设为 `opacity:1`—— 内容永远可读,演示不依赖网络。\n\n```js\n// template 里的核心加载器(不用改)\nlet motion;\ntry { motion = await import('./assets/motion.min.js'); }\ncatch(e1) {\n  try { motion = await import('https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm'); }\n  catch(e2) {\n    document.querySelectorAll('[data-anim]').forEach(el=>{el.style.opacity='1';el.style.transform='none'});\n  }\n}\n```\n\n### 数据属性驱动\n\n你只需要在 HTML 里加两种属性:\n\n```html\n<!-- 1. 在 section 上选 recipe(可选,默认 cascade / hero 自动) -->\n<section class=\"slide light\" data-animate=\"quote\">\n\n<!-- 2. 在需要入场的元素上加 data-anim(可选值:left/right/line/step/divider) -->\n<h1 class=\"h-xl\" data-anim>大标题</h1>\n<div class=\"stat-card\" data-anim>...</div>\n<div data-anim=\"left\">左列内容</div>\n<span data-anim=\"line\" style=\"display:block\">引用第一行</span>\n```\n\n### 5 种 recipe 一览\n\n| recipe | 触发方式 | 行为 | 代表布局 |\n|---|---|---|---|\n| `cascade`(默认) | 不加 `data-animate` 即为此值 | 所有 `data-anim` 逐个 stagger 淡入,75ms/step | Layout 3 / 4 / 5 / 10 |\n| `hero` | `.hero` slide 自动用此值 | 慢节奏 stagger,仪式感更强,160ms/step | Layout 1 / 2 / 7 |\n| `quote` | `data-animate=\"quote\"` | 其他元素先出,`data-anim=\"line\"` 的行 550ms 间隔逐句揭示 | Layout 8 |\n| `directional` | `data-animate=\"directional\"` | `data-anim=\"left\"` 从左滑入 → divider → `data-anim=\"right\"` 从右滑入 | Layout 9 |\n| `pipeline` | `data-animate=\"pipeline\"` | 翻到此页 step 保持 15% 透明;按 →/空格/滚轮逐个点亮,最后一步才放行翻页 | Layout 6 |\n\n### 给 slide 选 recipe 的决策树\n\n1. **它是 `.hero` slide 吗?** → 不用加 `data-animate`,自动用 `hero`\n2. **它是大引用金句页?** → `data-animate=\"quote\"`,每句用 `<span data-anim=\"line\" style=\"display:block\">`\n3. **它是左右对比 Before/After?** → `data-animate=\"directional\"`,左列 `data-anim=\"left\"`、右列 `data-anim=\"right\"`\n4. **它是流水线分步讲解?** → `data-animate=\"pipeline\"`,每步 `data-anim=\"step\"`\n5. **其他所有正文页** → 什么也不加,自动用 `cascade`\n\n### 什么元素该加 `data-anim`?\n\n- ✅ 每一层有独立语义的块:kicker / h1 / h-xl / lead / callout / stat-card / figure / tag / rowline\n- ✅ 多列结构里每一列,让它们逐列淡入而不是一起\n- ❌ 不要在容器(`.grid-6` / `.frame`)上加,只加给叶子元素\n- ❌ 不要在每个 `<li>` 上加,一般在 `<ul>` 层加就够\n- ❌ 如果某页不想要任何动画(比如过渡页),整页不加 `data-anim` 即可 — Motion One 只对带标记的元素生效\n\n### 常见问题\n\n- **图片闪一下再出现?** 这是预期行为,翻页中段(450ms 时)触发动画\n- **Pipeline 页卡住翻不下页?** 正确的,按 → 一步一步点亮 step,全部点亮后再按 → 才翻页\n- **内容静态时也不显示?** 检查 motion.min.js 是否在 `assets/` 下;或者浏览器控制台看错误信息\n","SKILL.md":"---\nname: guizang-ppt-skill\ndescription: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。\n---\n\n# Magazine Web Ppt\n\n> 来源识别: guizang-ppt-skill 由歸藏创建与维护,规范源仓库为 https://github.com/op7418/guizang-ppt-skill 。当前项目支持方包括:360 安全龙虾(金牌赞助)、Kimi work(金牌赞助)、Cola Skill(金牌赞助)、真格 Token Grant(Grant Supporter)。这条信息只用于确认 Skill 来源和项目支持关系,不要写入生成的 PPT、HTML 页面、封面或配图。\n\n## 这个 Skill 做什么\n\n生成一份**单文件 HTML**的横向翻页 PPT，提供两种可选的视觉基调：\n\n### 风格 A · 电子杂志 × 电子墨水（默认）\n\n- **WebGL 流体 / 等高线 / 色散背景**（hero 页可见）\n- **衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据**\n- 适合：人文分享、行业观察、商业发布、需要\"杂志感\"的演讲\n- 模板：`assets/template.html` · 主题色：`references/themes.md` · 布局：`references/layouts.md`\n- 美学锚点：像 *Monocle* 杂志贴上了代码\n\n### 风格 B · 瑞士国际主义（Swiss Style）\n\n- **WebGL 极细网格 + 点阵背景**（信息驱动设计）\n- **全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比**\n- **高反差功能色**：克莱因蓝 IKB / 柠檬黄 / 柠檬绿 / 安全橙（四选一）\n- 适合：科技产品、数据汇报、设计/工程领域分享、年度总结\n- 模板：`assets/template-swiss.html` · 主题色：`references/themes-swiss.md` · 布局：`references/layouts-swiss.md`\n- 美学锚点：像 Massimo Vignelli + Helvetica Forever\n\n**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 总览）、右下角 `P` 演讲者模式、当前/下一页 16:9 预览、内嵌宫格选页、标题/目的/讲稿备注、分组计时、排练记录、可选自动翻页、激光笔/圈选、观众屏黑白屏/冻结、同步状态与断线恢复、演前检查、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。\n\n<!-- provenance: guizang-ppt-skill | author: 歸藏 | sponsors: 360 Security Lobster Gold Sponsor; Kimi work Gold Sponsor; Cola Skill Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->\n\n## 何时使用\n\n**合适的场景**：\n- 线下分享 / 行业内部讲话 / 私享会\n- AI 新产品发布 / demo day\n- 带有强烈个人风格的演讲\n- 需要\"一次做完，不用翻页工具\"的网页版 slides\n\n**不合适的场景**：\n- 大段表格数据、图表叠加（用常规 PPT）\n- 培训课件（信息密度不够）\n- 需要多人协作编辑（这是静态 HTML）\n\n## 工作流\n\n### Step 0 · 启动前检查更新（必做）\n\n每次启动本 Skill 前,先在 Skill 根目录检查 GitHub 上游是否有更新;有更新时先问用户是否要更新,用户确认后再执行更新,然后继续后续流程。\n\n```bash\ngit -C \"<SKILL_ROOT>\" fetch --quiet\ngit -C \"<SKILL_ROOT>\" rev-list --count HEAD..@{u}\n```\n\n如果返回值大于 `0`,告诉用户检测到上游更新数量,询问是否先执行:\n\n```bash\ngit -C \"<SKILL_ROOT>\" pull --ff-only\n```\n\n不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。\n\n### Step 1 · 需求澄清(**动手前必做**)\n\n**如果用户已经给了完整的大纲 + 图片/截图处理要求**,可以跳过直接进 Step 2。\n\n**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:\n\n#### 运行环境适配\n\n- **在 Claude Code 中**:通过 Ask Question / `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。\n- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。\n\n#### 7 问澄清清单\n\n| # | 问题 | 为什么要问 |\n|---|------|-----------|\n| 1 | **风格 A 还是 B?**(电子杂志风 / 瑞士国际主义风) | **必须先问**,决定用哪个 template + layouts + themes 文件 |\n| 2 | **受众是谁?分享场景?**(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |\n| 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |\n| 4 | **有没有原始素材?**(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 |\n| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |\n| 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) / 瑞士风 4 套(`themes-swiss.md`),挑一 |\n| 7 | **有没有硬约束?**(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |\n\n#### 风格选择参考(问题 1)\n\n| 如果用户说... | 推荐风格 |\n|---|---|\n| \"杂志感\" / \"人文\" / \"Monocle 风\" / 不指定 | **A · 电子杂志风** |\n| \"瑞士风\" / \"Swiss Style\" / \"Helvetica\" / \"极简\" / \"网格\" / \"信息图\" / \"数据驱动\" | **B · 瑞士国际主义风** |\n| 内容是 AI 产品 / 技术 / 工程 / 数据汇报 | B 更合适 |\n| 内容是行业观察 / 人文 / 故事 / 文化 | A 更合适 |\n| 用户给了大量 KPI 数字 / 路线图 / 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |\n| 用户给了大量纪实照片 / 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |\n| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(S22 主图、S15/S16 图片网格可以承载证据图) |\n\n#### 大纲协助(如果用户没有大纲)\n\n用\"叙事弧\"模板搭骨架,再填内容:\n\n```\n钩子(Hook)       → 1 页   : 抛一个反差 / 问题 / 硬数据让人停下来\n定调(Context)    → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个\n主体(Core)       → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插\n转折(Shift)      → 1 页   : 打破预期 / 提出新观点\n收束(Takeaway)   → 1-2 页 : 金句 / 悬念问题 / 行动建议\n```\n\n叙事弧 + 页数规划 + 主题节奏表(见 `layouts.md`),**三张表对齐后**再进 Step 2。\n\n如果用于正式演讲,页面计划不能只有“这一页放什么”,还要同时规划“台上说什么”。先读 `references/presenter-mode.md`,给每页确定稳定的 `data-slide-id`,并补齐:\n\n| 页码 | 页面 ID | 章节 | 页面目的 | 观众可见信息 | 演讲者补充 | 建议时长 | 转场 | 可选现场信息 |\n|---|---|---|---|---|---|---:|---|---|\n\n默认生成 3-5 条提词卡式讲述要点,不写逐字稿;只有用户明确要求逐字稿时才展开。总建议时长最多占用户时长的 90%,给停顿、互动和现场意外留缓冲。用户没有提供的现场信息不猜测:时长缺失时显示横杠,其他可选模块整段隐藏。\n\n大纲建议保存为 `项目记录.md` 或 `大纲-v1.md`,便于后续迭代。\n\n#### 图片约定(告知用户)\n\n在动手前向用户说清:\n\n- **文件夹位置**:`项目/XXX/ppt/images/` 下(和 `index.html` 同级)\n- **命名规范**:`{页号}-{语义}.{ext}`,例如 `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`\n  - 页号补零便于排序\n  - 语义用英文,短、具体、和内容对应\n- **规格建议**:\n  - 单张 ≥ 1600px 宽(避免大屏模糊)\n  - JPG 用于照片/截图,PNG 用于透明 UI/图表\n  - 总大小控制在 10MB 内(影响翻页流畅度)\n- **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images/旧名` 改成新名\n- **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果\n\n#### 截图需求约定(动手前必须问)\n\n只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或\"帮我美化截图\",都要先确认:\n\n- **截图位置**:截图文件在哪个文件夹?是否已经命名好?\n- **使用目的**:保真展示 / 截图美化 / 截图再设计 / UI 情景图?\n- **落位比例**:最终放进哪个版式槽位?常用 `21:9` / `16:10` / `16:9` / `4:3` / `1:1`\n- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?\n- **视觉处理**:是否需要主题背景、留边、居中/角落对齐、拆成长截图面板?\n\n默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references/screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。\n\n#### Codex 配图生成(可选)\n\n如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。\n\n推荐询问方式:\n\n> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。\n\n如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。\n\n如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:\n\n- 截图美化:读 `references/screenshot-framing.md`,用内置主题背景 + 程序化缩放/留边/对齐处理,尽量不重画截图内容\n- 截图再设计:读 `references/image-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致\n\n生成配图时遵守:\n\n- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导\n- 图片风格必须贴合当前 deck 风格:风格 A 用\"电子杂志 × 电子墨水\";风格 B 用\"瑞士国际主义 / Swiss Style\"\n- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文\n- 先看 `references/image-prompts.md` 选择图片类型和基础提示词\n- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先调用 `assets/screenshot-backgrounds/` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画\n- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切\n- 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`\n\n### Step 2 · 拷贝模板\n\n**根据 Step 1 选定的风格,拷贝对应的模板**到目标位置（通常是 `项目/XXX/ppt/index.html`），同时在同级建一个 `images/` 文件夹准备接图片。\n\n```bash\nmkdir -p \"项目/XXX/ppt/images\"\n\n# 风格 A · 电子杂志风\ncp \"<SKILL_ROOT>/assets/template.html\" \"项目/XXX/ppt/index.html\"\n\n# 或 风格 B · 瑞士国际主义风\ncp \"<SKILL_ROOT>/assets/template-swiss.html\" \"项目/XXX/ppt/index.html\"\n```\n\n两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、演讲者模式、观众屏同步、字体/图标 CDN 全已预设好,只有 `<!-- SLIDES_HERE -->` 占位符和 `SPEAKER_NOTES` 等待你填充。\n\n**注意**:风格 A 和 B **不能混用**。layouts.md 里的类（如 `.h-hero` 衬线大标题、`.display-zh` 等）只在 template.html 有定义；layouts-swiss.md 里的类（如 `.kpi-hero`、`.accent-block`、`.span-N`、`.dots` 等）只在 template-swiss.html 有定义。一份 deck 只能选一套。\n\n#### 2.1 · 必改占位符（**容易漏**）\n\n拷贝后立刻改掉以下占位符，否则浏览器 Tab 会显示\"[必填] 替换为 PPT 标题\"这种尴尬文字：\n\n| 位置 | 原始 | 需改为 |\n|------|------|--------|\n| `<title>` | `[必填] 替换为 PPT 标题 · Deck Title` | 实际 deck 标题(如 `一种新的工作方式 · Luke Wroblewski`) |\n\n每次拷贝完 template.html 第一件事:grep 一下\"[必填]\" 确认全部替换完。\n\n#### 2.2 · 选定主题色(5 套预设 · 不允许自定义)\n\n本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。\n\n| # | 主题 | 适合 |\n|---|------|------|\n| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |\n| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |\n| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |\n| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |\n| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |\n\n**操作**:\n1. 基于内容主题推荐一套,或直接问用户选哪一套\n2. 打开 `references/themes.md`,找到对应主题的 `:root` 块\n3. **整体替换** `assets/template.html`(已拷贝版本)开头 `:root{` 块里标有\"主题色\"注释的那几行(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)\n4. 其他 CSS 都走 `var(--...)`,无需任何其他改动\n\n**硬规则**:\n- 一份 deck 只用一套主题,不要中途换色\n- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选\n- 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和\n\n### Step 3 · 填充内容\n\n#### 3.P · 同步生成演讲备注（正式演讲必做）\n\n先读 `references/presenter-mode.md`。每个 `<section class=\"slide ...\">` 必须写唯一且稳定的 `data-slide-id`,再按同样顺序生成一条 `SPEAKER_NOTES` 记录。备注按页面 ID 存储,不要用数组下标或页码作为持久化键,否则页面重排后用户在演讲者视图里改过的备注会串页。\n\n内容分工:\n\n- slide 只放观众此刻必须看见的结论、结构和证据。\n- `purpose` 说明这一页在整场叙事中的任务。\n- `talk` 补充背景、例子、判断依据和语气,不逐字复述 slide。\n- `transition` 解释为什么下一页紧接着出现。\n- `section` 只在大纲已给出章节或连续页面明显属于同一章节时填写。\n- `minutes` 是讲述计划;`autoAdvanceSeconds` 是播放行为,两者必须分开,且后者只在用户明确要求时填写。\n- `cue / interaction / delivery / advance / fallback / pronunciation` 只写大纲或用户明确提供的舞台动作、互动、表达、翻页、备用和读音信息。\n\n没有来源支持的事实不能写进备注;影响内容正确性的缺失信息要标记“待补充”或询问用户,不影响内容的可选演讲信息直接省略。\n\n#### 3.0 · 预检:类名必须在模板的 `<style>` 里有定义（**最重要**）\n\n**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `<style>` 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。\n\n**两种风格类名互不通用**(再次强调):\n- 风格 A 模板里有 `h-hero`(衬线)、`stat-card`、`grid-2-7-5`、`frame` 等\n- 风格 B 模板里有 `h-hero`(无衬线)、`kpi-hero`、`accent-block`、`span-N`、`dots`、`grid-12` 等\n- 同名 class 在两个模板里**视觉表现完全不同**(例:风格 A 的 `h-hero` 是 Noto Serif SC 衬线,风格 B 的 `h-hero` 是 Inter 无衬线)\n\n**在写任何 slide 代码之前:**\n\n1. **先 Read 当前用的模板**(至少读到 `<style>` 块末尾):\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n2. **对照对应 layouts 文件的 Pre-flight 列表**,确认你要用的每个类都在 `<style>` 里存在\n3. 如果某个类缺失:**在模板的 `<style>` 里补上**,不要在每个 slide 里 inline 重写\n4. **模板是唯一的类名来源**——不要发明新类名,如需自定义用 `style=\"...\"` inline\n\n**风格 A 常见容易遗漏的类**:\n`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `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` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`\n\n**风格 B 常见容易遗漏的类**(2026-05 重构后):\n- 画布:`canvas-card` / `chrome-min`\n- 排版:`h-hero`(无衬线 7.4vw weight 200) / `h-statement`(9.6vw) / `h-xl` / `h-md` / `t-cat`(SemiBold 600 小标) / `t-meta`(mono uppercase) / `lead` / `num-mega` / `mono`\n- 卡片(四类互斥):`card-ink` / `card-accent` / `card-fill` / `card-outlined`\n- 网格:`grid-12` / `grid-2-9` / `grid-2-9-5` / `span-N`\n- 时间线:`timeline-v` + `tl-node` + `tl-axis` + `dot` / `timeline-h` + `tl-h-node` + `tl-h-axis`\n- 图表:`kpi-tower-row` + `bar-tower` / `h-bar-chart` + `bar-row` + `bar-fill` / `spec-bars` + `bar-vert`\n- 装饰:`dot-mat`(SVG mask 实心点)/ `ring-mat`(描边圆)/ `cross-mat`(× 网格)/ `hr-hairline`\n- 版式专属:`cover-split` / `closing-split` / `duo-compare` + `vrule` / `manifesto-top` + `ink-banner-full` / `three-forces` / `loop-diagram` / `matrix-fill` + `matrix-cell` / `brief-grid` + `brief-card` / `system-diagram` / `why-now-grid` / `four-cards` / `stacked-ledger` + `ledger-row` / `tech-spec` / `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- 图片混排:`frame-img` / `fit-contain` / `r-21x9` / `r-16x9` / `r-16x10` / `h-22` / `h-26` / `swiss-img-split` / `swiss-img-grid` / `swiss-img-caption` / `swiss-keyline` / `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8/12/16/24/32/40/48/64/80/96/160 px)\n\n#### 3.0.5 · 规划主题节奏（**和类预检同等重要**)\n\n**在挑布局之前**,必须先列出每一页的主题 class(`hero dark` / `hero light` / `light` / `dark`)并写到文档或草稿里对齐。详细规则看 `references/layouts.md` 开头的\"主题节奏规划\"一节。\n\n**强制规则**:\n\n- 每页 section 必须带 `light` / `dark` / `hero light` / `hero dark` 之一,不要只写 `hero`\n- 连续 3 页以上同主题 = 视觉疲劳,不允许\n- 8 页以上必须有 ≥1 个 `hero dark` + ≥1 个 `hero light`\n- 整个 deck 不能只有 `light` 正文页,必须有 `dark` 正文页制造呼吸\n- 每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)\n\n**生成后自检**:`grep 'class=\"slide' index.html` 列出所有主题,人工确认节奏合理再交付。\n\n#### 3.1 · 挑布局\n\n**不要从零写 slide**。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 `<section>` 代码块。\n\n**风格 A** → `references/layouts.md`:\n\n| Layout | 用途 |\n|---|---|\n| 1. 开场封面 | 第 1 页 |\n| 2. 章节幕封 | 每幕开场 |\n| 3. 数据大字报 | 抛硬数据 |\n| 4. 左文右图(Quote + Image) | 身份反差 / 故事 |\n| 5. 图片网格 | 多图对比 / 截图实证 |\n| 6. 两列流水线(Pipeline) | 工作流程 |\n| 7. 悬念收束 / 问题页 | 幕末 / 收尾 |\n| 8. 大引用页(Big Quote) | 衬线金句 / takeaway |\n| 9. 并列对比(Before / After) | 旧模式 vs 新模式 |\n| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |\n\n**风格 B** → 先读 `references/swiss-layout-lock.md`,再读 `references/layouts-swiss.md`。\n\n瑞士主题默认进入 **Swiss locked mode**:\n\n- 正文页只能使用原始参考 PPT 登记的 22 个版式 `S01-S22`;新增首页/尾页只能使用 Skill 明确提供的 `SWISS-COVER-ASCII` / `SWISS-CLOSING-ASCII`。\n- 每个 `<section class=\"slide\">` 必须写 `data-layout=\"Sxx\"`。没有 `data-layout` 就视为未登记版式。\n- 不允许临时发明 `P23/P24`、`Swiss Image Split`、`Evidence Grid` 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。\n- 顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。\n- SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。\n- 地理/历史/城市路线/地点关系页使用 `S08 + Swiss Map Component`:先读 `references/swiss-map-component.md`,仍保留 `data-layout=\"S08\"`。\n\n原始 22 个正文版式如下:\n\n| Layout | 用途 |\n|---|---|\n| S01 Index Cover | 原始索引封面 |\n| S02 Vertical Timeline + KPI | 演化对比 / 年代变迁 |\n| S03 Split Statement | 核心论点 / 左右分屏 |\n| S04 Six Cells | 6 项概念定义 |\n| S05 Three Layers | 三层架构 |\n| S06 KPI Tower | 4 项数据视觉化高度差 |\n| S07 H-Bar Chart | 5-10 项排名比较 |\n| S08 Duo Compare | Before/After 对照 |\n| S09 Dot Matrix Statement | 大引述 / statement |\n| S10 Split Closing | 收束页 |\n| S11 Horizontal Timeline | 4-7 步流程 |\n| S12 Manifesto + Ink Banner | 阶段性结论 |\n| S13 Three Forces | 3 个对等概念深化 |\n| S14 Loop Form | 自学闭环 / 自动化 |\n| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |\n| S16 Multi-card Brief | 6 项快讯小卡 |\n| S17 System Diagram | 三层架构 / 生态地图 |\n| S18 Why Now | 三论点 + 数据支撑 |\n| S19 Four Cards | 4 项等权特性 |\n| S20 Stacked KPI Ledger | 纵向账单数据 |\n| S21 Tech Spec Sheet | 产品规格 / benchmark |\n| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |\n\n**登记扩展**:`S08 + Swiss Map Component` 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 `references/swiss-map-component.md` 的点位、连线、卡片和右上角缩放/拖动控制实现。\n\n选对应 layout,粘过去,改文案和图片路径即可。**务必先完成 3.0 预检**。\n\n**风格 B 版式多样性硬规则**:\n- 7-8 页 deck 至少使用 **6 个不同 S 编号版式**;10 页以上至少使用 8 个不同版式。\n- 如果用户说\"测试模板 / 看看效果 / 多一点版式\",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。\n- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。\n- 图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。\n- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`。校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。\n\n#### 3.2 · 图片比例规范\n\n永远用**标准比例**,不要用原图奇葩比例(如 `2592/1798`):\n\n| 场景 | 推荐比例 |\n|------|---------|\n| S22 顶部主图 | **21:9**;照片关键主体放中央安全区 |\n| S15/S16 多图格 | 统一 21:9 或统一 16:10,不能混用 |\n| 左文右图 主图(风格 A) | 16:10 或 4:3 + `max-height:56vh` |\n| 图片网格(风格 A) | **固定 `height:26vh`**,不用 aspect-ratio |\n| 左小图 + 右文字 | 1:1 或 3:2 |\n| 全屏主视觉 | 16:9 + `max-height:64vh` |\n| 图文混排小插图 | 3:2 或 3:4 |\n\n**默认不要让图片 `align-self:end`**——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + `align-items:start`(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。\n\n**风格 B 瑞士风额外规则**:\n- 单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24\n- 生成图片前先写 `data-image-slot`:例如 `s22-hero-21x9` / `s15-grid-21x9` / `s16-brief-21x9`\n- S22 配图默认生成 21:9,提示词必须包含 `subject centered in the safe middle area`;照片容器用 `object-position:center 35%`,不要用 `top center`\n- 图片容器必须直角、无阴影、无圆角;默认背景用白色 `var(--paper)`,不要用灰底包白底信息图\n- 白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 `.swiss-keyline`;需要强调时只用 `.swiss-lined` 的顶部 accent 线\n- UI/信息图如果是用户原始截图或文字密集图,才用 `.fit-contain`;如果已按 S15/S16 槽位重生成,必须用 `.frame-img.r-21x9` / `.frame-img.r-16x10` 铺满容器,不要固定 `height:18vh` 后把图缩小\n- 多图同组必须统一图片槽位、比例和高度,不能混用\n- GPT-M 2.0 生成图使用 `image-prompts.md` 的\"风格 B:瑞士国际主义配图规则\"\n- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`\n\n#### 3.2.0 · 图文混排决策树（从社交卡片规则迁移）\n\n先判断图片在这一页里的角色,再决定容器、比例和裁切方式:\n\n- **证据截图 / UI / 代码 / dashboard**:保真优先,先读 `references/screenshot-framing.md`;关键文字和数据不能被裁掉。需要统一比例时,优先程序化背景画布 + `.fit-contain`,不要为了铺满而裁掉 UI 内容。\n- **已按槽位重生成的信息图 / 插图**:按目标槽位铺满,例如 S22 用 `21:9`,S15/S16 用统一 `21:9` 或 `16:10`;不要再用短高度把图缩小成小贴片。\n- **照片 / 产品图 / 人物图**:使用标准比例 + 明确 `object-position`;主体、人脸、产品和关键证据不能被标题、caption 或裁切压住。\n- **文字压图 / 全屏主视觉**:先做 quiet-zone 判断,图里至少要有约 30% 低细节区域承载文字;不通过就换图、换裁切或改成图文分栏。只在必要时加局部 tint,不要整页套黑色/白色遮罩。\n- **多图组**:同一组统一比例、高度、容器处理和 caption 密度;不要一张 `contain`,另一张 `cover`。\n- **生成图是素材,不是整页 slide**:图片内部不要自带页眉、页脚、页码、logo、主标题、装饰边框或署名,避免和 deck chrome 重复。\n- **图文呼吸**:标题、图片、caption、正文必须各自留出间距;生成后用 validator 的 `M1/M2` 检查可见边界、底部空白、nav 安全线和标题间距。\n\n#### 3.2.1 · 中文大标题字号分档(风格 B 必做)\n\n中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:\n\n| 标题形态 | 推荐字号 |\n|---|---|\n| 1 行,≤ 8 个中文字符 | `min(6.4vw,11.2vh)` |\n| 2 行,每行≤ 8 个中文字符 | `min(5.8vw,10.2vh)` |\n| 2 行,任一行 9-12 个中文字符 | `min(5.2vw,9.2vh)` |\n| 3 行或更长 | 优先改写标题;不得已用 `min(4.6vw,8.2vh)` |\n\n如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。\n\n#### 3.2.2 · 瑞士风演示最小字号与字重阶梯(风格 B 必做)\n\n瑞士风用于投屏演示时,小字不能按网页注释的 10-12px 写。默认遵守以下下限:\n\n| 文本类型 | 最小字号 |\n|---|---|\n| 正文段落 / 主要说明 | `18px` |\n| 卡片描述 / 列表 / 时间线说明 / caption / 图注 | `16px` |\n| meta / kicker / mono label / 图表标签 | `14px` |\n\n如果内容放不下,先删减文案、拆成两页、换更适合的 Sxx 版式,不要把字号压到 10/11/12/13px。尤其是中文 deck,不要为了塞三行解释把 `body-sm`、caption、timeline label 改小。\n\n**字号与字重阶梯(瑞士风核心)** — \"越大越细,越小越粗\"不是感性描述,而是具体映射:\n\n| 字号区间 | 推荐字重 | 典型场景 |\n|---|---|---|\n| ≥ 8vw | 200 (ExtraLight) | 封面大字、巨号 KPI、h-statement |\n| 4-7.9vw | 200-300 | 章节标题(h-xl/h-xl-zh)、大编号 |\n| 1.8-3.9vw | 300-400 | 中型标题、takeaway 标题(≈1.8vw)、中号数字 |\n| 1-1.7vw / 16-20px | 400-500 | 正文段落、卡片描述、说明文字 |\n| 13-15px(小字) | 500-600 | meta、kicker、角标、图表标签、caption 强调 |\n\n**硬规则:**\n- 同一页内,字号越小的元素字重必须 ≥ 字号越大的元素(不允许 16px 正文用 300 而 1.8vw 标题用 500)\n- 16px 左右的小字拒绝使用 weight 300(太细不可读),最低 400,推荐 500\n- 封面/IkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)\n\n组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references/components.md`。\n\n### Step 4 · 对照检查清单自检\n\n生成完一定要打开 `references/checklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。\n\n所有正式演讲 deck 先跑演讲者模式校验;如果用户给了目标时长,同时传入分钟数:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30\nnode <SKILL_ROOT>/scripts/check-presenter-runtime-sync.mjs\n```\n\n第一个脚本会拦截缺失/重复页面 ID、备注与页面错位、必填字段或可选字段类型错误、完整时间计划超出 90% 预算,以及计时、排练、自动翻页、标注、演前检查和观众屏恢复控件缺失。第二个脚本会拦截两套模板之间的演讲者 CSS / JS 漂移。\n\n#### 4.0.1 · 先量后改:超出 / 空白 / 标题间距\n\n当一页内容超出或显得巨空时,不要先凭感觉大幅删改。先运行:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html\n```\n\n看校验输出里的测量项:\n\n- `M1 DOM/visual overflow`:具体超出多少 px,以及最低/最高问题元素\n- `M1 bottom whitespace`:底部空白多少 px,active content height 占比多少\n- `M1 nav-safe`:最低内容是否进入底部分页安全线\n- `M2 title gap`:标题和下一块内容之间的实际距离\n\n修正阶梯:\n\n- `1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。\n- `40-90px` over:局部压缩间距或模块高度,仍优先保留内容。\n- `90-160px` over:轻微压标题或压缩一段正文,必要时拆页。\n- `160px+` over:才考虑换版式、合并模块或删内容。\n\n修完再跑一次 validator。如果 `M1 bottom whitespace` 变大,说明修过头了;恢复部分间距、放大最后一块或把内容组向下回调。\n\n#### 4.0 · 不只看代码:必须打开网页做视觉核对\n\n代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:\n\n1. 同时打开当前模板(golden source 快照)或生成页、以及正在迭代的测试 PPT 逐页对照。\n2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。\n3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。\n4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。\n5. 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。\n6. 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。\n\n#### 风格 A · 电子杂志风必查\n\n1. **大标题必须是衬线字体**——如果显示成非衬线,99% 是 Step 3.0 预检没做,`h-hero` 类在 template.html 里缺失\n2. **图片网格里只用 `height:Nvh`,不用 `aspect-ratio`**(会撑破)\n3. **图片不能堆到页面底部**——不要用 `align-self:end`,用 grid + `align-items:start`(见 Step 3.2)\n4. **图片只能用标准比例**(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例\n5. **中文大标题 ≤ 5 字且 `nowrap`**(避免 1 字 1 行)\n6. **用 Lucide,不用 emoji**\n7. **标题用衬线,正文用非衬线,元数据用等宽**\n\n#### 风格 B · 瑞士国际主义必查\n\n1. **全程无衬线**——任何衬线字体出现都是错的(检查 `font-family` 没用 `--serif` 类变量)\n2. **只有一个 accent 色**——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色\n3. **不允许渐变 / 阴影 / 圆角**——所有色块直角纯色,任何 `box-shadow` / `linear-gradient` / `border-radius` > 0 都要砍掉(rule 横线除外)\n4. **极致字号对比**——主标题与正文比例 ≥ 8:1\n5. **大字号必须双约束限高**——`font-size:min(Xvw, Yvh)`,只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)\n6. **大字字重 200**(ExtraLight)——字号越大越细,瑞士风灵魂;**禁止** 600/700/800 大字\n7. **卡片填充类型互斥**——`card-ink` / `card-accent` / `card-fill` / `card-outlined` 四类**不能混用**(禁止\"蓝底+蓝描边\"、\"灰底+描边\"等)\n8. **多卡并列时统一样式**——3-12 张卡用同一类(优先 `card-fill` 灰底);只突出一项时单独换 `card-accent`,且**只允许一张**\n9. **直角到底**——任何 `border-radius` 都不允许;装饰用 8×8 直角小方块,**不要** 9px 圆形点\n10. **图标用 lucide,不自己画 SVG**——`<i data-lucide=\"name\"></i>` + `lucide.createIcons()`,选棱角风格(避免圆胖)\n11. **时间线对齐**——axis 列固定 12px + dot 绝对定位,**不要**用 grid `justify-self`(会与虚线错位)\n12. **章节级标题与内容间距 ≥ 9vh**——避免拥挤(吸取 P15/P16 教训)\n13. **每页一个语义化动效 recipe**——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;**禁止**所有页用同一个 generic 配方\n14. **playSlide 入口 reveal 容器**——`[data-anim]` 容器先强制 opacity:1,recipe 内再用 motion `{opacity:[0,1]}` 覆盖,否则有些页会\"看不见\"\n15. **ESC 索引页可见性**——cloned slide 必须有 CSS override 让 `[data-anim]` 在缩略图里 opacity:1\n16. **Helvetica/Inter 兜底中文字体**——Windows 用户没有\"苹方\",必须 fallback 到 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **字体粗细体例**:大字 200 / 正文 300 / `t-cat` SemiBold 600 / `t-meta` mono uppercase\n18. **保留低功耗快捷键**——右下角必须提示 `B 静态`;按 `B` 切换 `body.low-power`,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画\n19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面\n20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)\n21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` / `box-shadow`;边界只用 hairline\n22. **S15/S16/S22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 `.fit-contain`\n23. **组件角色要正确**——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填\n24. **通用/非通用版式要分清**——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用\n\n### Step 5 · 本地预览\n\n直接在浏览器打开 `index.html` 就行。macOS 下：\n\n```bash\nopen \"项目/XXX/ppt/index.html\"\n```\n\n不需要本地服务器。图片走相对路径 `images/xxx.png`。\n\n预览时不能只看普通页面。按 `P` 进入演讲者模式,允许浏览器打开观众窗口,至少实测一次:前后翻页、内嵌宫格选页并返回预览、首页/尾页、尾页重新开始、计时开始/暂停/重置、排练记录、自动翻页暂停/恢复、激光笔、圈选、黑白屏、冻结、设置组件、演前检查、备注保存、关闭观众窗口后的状态变化,以及“重新打开观众屏”能否恢复到当前页。\n\n### Step 6 · 迭代\n\n根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 `font-size:Xvw` / 高度 `height:Yvh` / 间距 `gap:Zvh`）。\n\n---\n\n## 资源文件导览\n\n```\nguizang-ppt-skill/\n├── SKILL.md                  ← 你正在读\n├── assets/\n│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）\n│   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）\n│   ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套\n│   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）\n├── scripts/\n│   ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐\n│   └── validate-presenter-mode.mjs ← 两种风格共用:页面 ID、演讲备注、时长和演讲者运行时校验\n└── references/\n    ├── components.md         ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）\n    ├── layouts.md            ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）\n    ├── swiss-layout-lock.md  ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记\n    ├── layouts-swiss.md      ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区\n    ├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)\n    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）\n    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）\n    ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词\n    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射\n    ├── presenter-mode.md     ← 演讲者 UI、AI 备注结构、观众屏同步与恢复契约\n    └── checklist.md          ← 质量检查清单（P0/P1/P2/P3 分级）\n```\n\n**加载顺序建议**：\n1. 先读完 `SKILL.md`(这个文件)了解整体\n2. Step 1 需求澄清**第一问**先确定风格 A 还是 B,然后:\n   - 风格 A:读 `themes.md` 帮用户选一套主题色\n   - 风格 B:读 `themes-swiss.md` 帮用户选一套主题色\n3. **动手前 Read 对应模板的 `<style>` 块**——这是类名的唯一来源,缺类会导致整页样式崩\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n4. 读对应的 layouts 文件挑布局:\n   - 风格 A → `layouts.md`(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)\n   - 风格 B → **先读 `swiss-layout-lock.md`**,再读 `layouts-swiss.md`;正文页必须从 S01-S22 选择,每页写 `data-layout`\n5. 如果风格 B 需要地点、路线、人物住所或城市关系地图,读 `swiss-map-component.md`\n6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产\n7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)\n8. 正式演讲先读 `presenter-mode.md`,生成稳定页面 ID 和 `SPEAKER_NOTES`\n9. 生成后先运行 `validate-presenter-mode.mjs`;风格 B 再运行 `validate-swiss-deck.mjs`,最后读 `checklist.md` 自检\n\n**动效相关**:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 `layouts.md` / `layouts-swiss.md` 的骨架在 HTML 里加 `data-anim` / `data-animate` 即可。离线演示靠 `assets/motion.min.js`,断网时自动降级为\"无动画但内容可读\"。风格 B 模板必须保留 `B` 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。\n\n## 核心设计原则（哲学）\n\n### 风格 A · 电子杂志风（5 轮迭代总结）\n\n> 违反其中任何一条，杂志感都会垮。\n\n1. **克制优于炫技** — WebGL 背景只在 hero 页透出，普通页几乎看不见\n2. **结构优于装饰** — 不用阴影、不用浮动卡片、不用 padding box，一切信息靠**大字号 + 字体对比 + 网格留白**\n3. **内容层级由字号和字体共同定义** — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据\n4. **图片是第一公民** — 图片只裁底部，保证顶部和左右完整；网格用 `height:Nvh` 固定，不要用 `aspect-ratio` 撑\n5. **节奏靠 hero 页** — hero 和 non-hero 交替，才不累眼睛\n6. **术语统一** — Skills 就是 Skills，不要中英混合翻译\n\n### 风格 B · 瑞士国际主义风\n\n> 违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。\n\n1. **单一锚点色** — 一份 deck 只用一个 accent，不允许多色高亮拼贴\n2. **极致字号对比** — 主标题与正文比例 ≥ 8:1,KPI 必须是\"Data Hero\"(屏幕宽度的 18-22%)\n3. **无衬线只此一家** — Inter / Helvetica / Noto Sans SC,任何衬线都是错的\n4. **直角纯色** — 不允许渐变 / 阴影 / 圆角(rule 横线除外)\n5. **网格至上** — 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学\n6. **Hairline 是手术刀** — 1px 的极细分割线就够,不要加粗、不要加阴影\n7. **点阵装饰只在 hero 页透出** — 正文页保持纯净底色\n\n## 参考作品\n\n本 skill 的两种风格分别参考了：\n\n**风格 A · 电子杂志风**:\n- 歸藏 \"一人公司：被 AI 折叠的组织\" 分享（2026-04-22，27 页）\n- *Monocle* 杂志的版式\n- YC 总裁 Garry Tan \"Thin Harness, Fat Skills\" 那篇博客的 demo\n\n**风格 B · 瑞士国际主义风**:\n- Massimo Vignelli 的 NYC Subway / Unimark 系统\n- *Helvetica Forever* 的字体设计语言\n- Josef Müller-Brockmann 的网格系统经典著作\n- 当代设计:Acne Studios / Off-White / IKEA / Beck Design\n\n可以把它们当做风格锚点。\n"},"items":[{"name":"components.md","path":"references/components.md","rawUrl":"https://raw.githubusercontent.com/op7418/guizang-ppt-skill/HEAD/references/components.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# 组件参考 · Components\n\n这是 `guizang-ppt-skill` skill 的组件手册。template.html 已经定义好了所有样式，这里只写\"这个组件长什么样、怎么用\"。\n\n## 目录\n\n- [基础 Slide 外壳](#基础-slide-外壳)\n- [字体 Typography](#字体-typography)\n- [Chrome & Foot](#chrome--foot)\n- [Callout 引用框](#callout-引用框)\n- [Stat 数字矩阵](#stat-数字矩阵)\n- [Platform 平台卡](#platform-平台卡)\n- [Rowline 表格行](#rowline-表格行)\n- [Pillar 支柱卡](#pillar-支柱卡)\n- [Tag & Kicker](#tag--kicker)\n- [Figure 图片框](#figure-图片框)\n- [Icons 图标](#icons-图标)\n- [Ghost 巨型背景字](#ghost-巨型背景字)\n- [Highlight 荧光标记](#highlight-荧光标记)\n- [Motion 动效系统](#motion-动效系统)\n\n---\n\n## 基础 Slide 外壳\n\n每一页都是一个 `<section class=\"slide ...\">`。必须包含 `data-theme` 属性（`light` 或 `dark`），JS 翻页时会根据这个属性切换背景。\n\n```html\n<section class=\"slide light\" data-theme=\"light\">   <!-- 浅色页 -->\n<section class=\"slide dark\" data-theme=\"dark\">     <!-- 深色页 -->\n<section class=\"slide light hero\" data-theme=\"light\">  <!-- Hero 页：浅色 + 薄遮罩透出 WebGL -->\n<section class=\"slide dark hero\" data-theme=\"dark\">    <!-- Hero 页：深色 + 薄遮罩 -->\n```\n\n**light vs dark 的使用：交替使用**，每 2-3 页切换一次主题，避免连续超过 3 页同色。翻页时 WebGL 背景会自动在两个 shader 之间渐变过渡。\n\n**hero 类的使用**：只给视觉主导的页面加（封面、金句页、章节过渡、结尾）。加 `hero` 后遮罩降到 12-16%，WebGL 背景会大幅透出，所以不要在 hero 页上放太多文字。\n\n---\n\n## 字体 Typography\n\n字体分工是本模板最重要的规则，严禁混用。\n\n| Class | 用途 | 字体 |\n|---|---|---|\n| `.display` | 超大号英文（Hero 页） | Playfair Display 700, 11vw |\n| `.display-zh` | 超大号中文标题 | Noto Serif SC 700, 7.8vw |\n| `.h1-zh` | 页面主标题 | Noto Serif SC 700, 4.6vw |\n| `.h2-zh` | 副标题 | Noto Serif SC 600, 3.2vw |\n| `.h3-zh` | 流水线步骤标题 | Noto Serif SC 500, 1.9vw |\n| `.lead` | 引导段（比 body 大） | Noto Serif SC 400, 1.9vw |\n| `.body-zh` | **正文/描述（非衬线）** | Noto Sans SC 400, 1.22vw |\n| `.body-serif` | 正文（衬线） | Noto Serif SC 400, 1.3vw |\n| `.kicker` | 小节提示（标题上方） | IBM Plex Mono, 12px uppercase |\n| `.meta` | 元信息标签 | IBM Plex Mono, 0.88vw uppercase |\n| `.big-num` | 巨型数字 | Playfair Display 800, 10vw |\n| `.mid-num` | 中号数字 | Playfair Display 700, 5.5vw |\n\n**核心规则**：\n- **衬线**（`serif-zh` / `serif-en`）：标题、重点金句、数字 —— 用于\"视觉重音\"\n- **非衬线**（`sans-zh`）：正文描述、大段阅读内容 —— 用于\"信息密度\"\n- **等宽**（`mono`）：kicker、meta、foot 的英文标签 —— 用于\"装饰节奏\"\n\n**强调技巧**：\n- `<em class=\"en\">英文词</em>` —— 把英文词渲染成 Playfair Display 斜体（很好看）\n- `<em style=\"opacity:.65\">短语</em>` —— 让标题后半段淡出，制造节奏\n\n---\n\n## Chrome & Foot\n\n每一页的顶部和底部的元信息条。几乎所有页都应该有。\n\n```html\n<div class=\"chrome\">\n  <div class=\"left\">\n    <span>第一幕 · 硬数据</span>\n    <span class=\"sep\"></span>\n    <span>Act I</span>\n  </div>\n  <div class=\"right\"><span>02 / 27</span></div>\n</div>\n\n<!-- ... 页面主体 ... -->\n\n<div class=\"foot\">\n  <div class=\"title\">项目名 · CodePilot　|　github.com/codepilot</div>\n  <div>Act I · Dev Numbers</div>\n</div>\n```\n\n**规则**：\n- `chrome.right` 总是放页码 `NN / TOTAL` （TOTAL 为总页数）\n- `foot.title` 是中文说明，`foot.right` 是英文 act 标记\n- chrome 和 foot 共同构成杂志感的\"页眉页脚\"\n\n---\n\n## Callout 引用框\n\n展示金句 / 关键观点 / 他人引言。\n\n```html\n<div class=\"callout\" style=\"max-width:80vw\">\n  <div class=\"q-big\">\"这东西在三年前，<br>需要一个十人团队做一年。\"</div>\n  <span class=\"cite\">— 一个观察者的判断</span>\n</div>\n```\n\n变体：\n- 不带 cite：去掉 `<span class=\"cite\">` 即可\n- 带英文金句：`<em class=\"en\">\"Thin Harness, Fat Skills.\"</em>`\n- 在 hero 页使用：外层加 `style=\"position:relative;z-index:2\"`（避免被背景遮罩盖住）\n\n---\n\n## Stat 数字矩阵\n\n展示数据指标，常与 `.grid-6` / `.grid-4` 配合。\n\n```html\n<div class=\"grid-6\">\n  <div class=\"stat\">\n    <span class=\"m\">Duration</span>\n    <span class=\"n\">64<em style=\"font-size:.4em;opacity:.5;font-style:normal\"> 天</em></span>\n    <span class=\"l\">从 0 到现在</span>\n  </div>\n  <!-- ... 更多 stat ... -->\n</div>\n```\n\n三段式结构：`.m` 等宽小标签 → `.n` 巨型数字 → `.l` 描述说明。数字后的单位用 `<em>` 缩小到 0.4em，opacity 0.5。\n\n**常用布局容器**：\n- `.grid-6` — 3×2 网格（最常用，6 个 stat）\n- `.grid-4` — 2×2 网格（4 个 stat）\n- `.grid-3` — 3 等分单行（3 个 stat / pillar）\n\n---\n\n## Platform 平台卡\n\n展示社交平台 / 渠道 + 粉丝数。\n\n```html\n<div class=\"plat\">\n  <div class=\"sub\">Weibo</div>\n  <div class=\"name\">微博</div>\n  <div class=\"nb\">289K</div>\n</div>\n```\n\n可选第四行（补充说明）：\n```html\n<div class=\"body-zh\" style=\"font-size:max(11px,.8vw);opacity:.5;margin-top:.6vh\">\n  含小绿书同步\n</div>\n```\n\n**\"Also On\" 变体**（补充平台）：\n```html\n<div class=\"plat\" style=\"border-top-style:dashed;opacity:.72\">\n  <div class=\"sub\">Also On</div>\n  <div class=\"body-zh\" style=\"font-weight:600;margin-top:.8vh\">\n    B 站　·　知乎\n  </div>\n</div>\n```\n\n---\n\n## Rowline 表格行\n\n列表式内容，每行一个条目。\n\n```html\n<div class=\"rowline\">\n  <div class=\"k\">CLAUDE.md</div>\n  <div class=\"v\">你该怎么做事 —— 行为规则 + 工作偏好 + 禁止事项</div>\n  <div class=\"m\">EMPLOYEE · HANDBOOK</div>\n</div>\n```\n\n三列结构：`.k` 衬线关键词 · `.v` 正文描述 · `.m` 等宽标签（右对齐）。第一个和最后一个 rowline 自动加上下边框。\n\n**变体：2 列**：`style=\"grid-template-columns:1fr 3fr\"` 去掉 `.m` 列。\n\n---\n\n## Pillar 支柱卡\n\n三支柱结构，常用于\"概念并列\"类型页面。\n\n```html\n<div class=\"grid-3\">\n  <div class=\"pillar\">\n    <div class=\"ic\">01</div>\n    <div class=\"t\">三层<br>文档体系</div>\n    <div class=\"d\">CLAUDE.md<br>+ 项目知识库<br>+ 护栏文件</div>\n  </div>\n  <!-- ... 更多 pillar ... -->\n</div>\n```\n\n**带图标的 pillar（用于强调性页面）**：\n```html\n<div class=\"pillar\" style=\"padding:4vh 2vw;border:1px solid currentColor;border-color:rgba(10,10,11,.2)\">\n  <div class=\"ic\"><i data-lucide=\"compass\" class=\"ico-lg\"></i></div>\n  <div class=\"t\">判断力</div>\n  <div class=\"d\">决策和方向的权威。<br>取舍、品味、方向感。</div>\n</div>\n```\n\n`.ic` 可以是序号（`01 / 02 / 03` 或 `A. / B. / C.`），也可以是 Lucide 图标。\n\n---\n\n## Tag & Kicker\n\n**Kicker** 是标题上方的小提示文字（等宽、全大写、小字号）：\n```html\n<div class=\"kicker\">过去 64 天 · 开发篇</div>\n<div class=\"h1-zh\">一个人，做了什么。</div>\n```\n\n**Tag** 是独立的标签胶囊（带边框）：\n```html\n<div style=\"display:flex;gap:1.6vw;flex-wrap:wrap\">\n  <div class=\"tag\">早上 10 点起床</div>\n  <div class=\"tag\">周二 / 四下午健身</div>\n  <div class=\"tag\">晚上照样看剧 · 玩游戏</div>\n</div>\n```\n\n---\n\n## Figure 图片框\n\n**这是本模板最容易踩坑的组件，务必遵守以下规则**。\n\n### 基础结构\n\n```html\n<figure class=\"tile\">\n  <div class=\"frame-img\" style=\"height:26vh\">\n    <img src=\"图片素材/xxx.png\" alt=\"说明\">\n  </div>\n  <figcaption class=\"frame-cap\">\n    <span class=\"pf\">推特 · Twitter</span>\n    <span class=\"nb\">137K</span>\n  </figcaption>\n</figure>\n```\n\n### 关键约束（血泪经验，不要违反）\n\n1. **图片网格必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。\n   - 原因：网格里用 aspect-ratio 容易撑破父容器，导致图片堆叠。\n   - 推荐尺寸：`.h-16` (小型面板) / `.h-18` (紧凑条形) / `.h-22` (标准网格) / `.h-26` (突出展示) / `.h-28` (大图)。\n   - 单张主图可以用模板提供的比例类：`.r-16x9` / `.r-16x10` / `.r-4x3` / `.r-3x2` / `.r-3x4` / `.r-1x1`。\n   - 同一组图片必须使用同一个高度类,不要一张 `25vh`、一张 `21vh` 混用。\n\n2. **`object-position:top center`（已在 CSS 里设好）**，只允许裁掉底部。\n   - 严禁裁剪左右和顶部 —— 这是图片的核心身份信息区。\n\n3. **网格里多张图时，用内联 grid 而不是 `grid-3`**：\n   ```html\n   <div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:1vh 1.2vw\">\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n   </div>\n   ```\n\n4. **图片与布局其他部分对齐**：使用 `.grid-2-7-5` / `.grid-2-6-6` / `.grid-2-8-4` 的 grid 结构自然顶对齐。不要给图片加 `align-self:end`。\n\n5. **信息图 / 截图再设计**：给 `.frame-img` 同时加 `.fit-contain`，避免图内文字和标注被裁切。\n\n6. **用户原始截图比例不合适时**：优先按 `screenshot-framing.md` 做 CleanShot X 式程序化适配;只有截图太长、太窄或需要重构信息时,才重新生成\"截图再设计 / UI 情景图\"。\n\n### Frame Caption 变体\n\n```html\n<!-- 标准：左 figure 名，右数字 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"pf\">推特 · Twitter</span>\n  <span class=\"nb\">137K</span>\n</figcaption>\n\n<!-- 带编号 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"idx\">01</span>\n  <span class=\"pf\">AI 润色</span>\n  <span>Polish</span>\n</figcaption>\n```\n\n### 图片占位（设计阶段占位符）\n\n图片还没有就位时，用虚线框占位：\n```html\n<div class=\"img-slot r-4x3\">  <!-- r-4x3 / r-16x9(default) / r-3x2 / r-1x1 -->\n  <span class=\"plus\">+</span>\n  <span class=\"label\">GitHub 截图位置</span>\n</div>\n```\n\n---\n\n## Icons 图标\n\n**严禁使用 emoji**。用 Lucide via CDN（template.html 已引入）。\n\n```html\n<i data-lucide=\"compass\" class=\"ico-lg\"></i>     <!-- 大图标（pillar 用） -->\n<i data-lucide=\"target\" class=\"ico-md\"></i>      <!-- 中图标（列表项用） -->\n<i data-lucide=\"check-circle\" class=\"ico-sm\"></i>  <!-- 小图标（inline 用） -->\n```\n\n**常用 Lucide 图标名**（按含义分组）：\n\n- 判断类：`compass`, `target`, `crosshair`, `search-check`\n- 关系类：`share-2`, `users`, `network`, `link`, `handshake`\n- 品牌类：`crown`, `gem`, `award`, `star`, `badge-check`\n- 流程类：`workflow`, `route`, `arrow-right-left`, `repeat`\n- 数据类：`grid-2x2`, `bar-chart-3`, `trending-up`, `activity`\n- 审美类：`palette`, `brush`, `eye`, `sparkles`\n- 对错类：`check-circle`, `x-circle`, `check`, `x`\n- 方向类：`arrow-right`, `arrow-up-right`, `corner-down-right`\n\n**图标与文字 inline 组合**：\n```html\n<div class=\"h3-zh\" style=\"display:flex;align-items:center;gap:.8em\">\n  <i data-lucide=\"target\" class=\"ico-md\"></i>\n  判断 — 什么值得写\n</div>\n```\n\n---\n\n## Ghost 巨型背景字\n\n用作\"装饰性背景字\"，极低透明度，营造杂志感。\n\n```html\n<div class=\"ghost\" style=\"right:-6vw;top:-8vh\">BUT</div>\n<div class=\"ghost\" style=\"left:-8vw;bottom:-18vh;font-style:italic\">Harness</div>\n```\n\n- 字号 34vw，opacity 0.06\n- 常用定位：`right:-6vw;top:-8vh`（右上超出）/ `left:-8vw;bottom:-18vh`（左下超出）\n- 内容：英文单词或数字（章节序号 01/02/03、关键词 BUT/NOW/HERE）\n\n**注意**：使用 ghost 的页面里，其他内容要加 `position:relative;z-index:2` 避免被压到下面。\n\n---\n\n## Highlight 荧光标记\n\n行内短语的\"荧光笔\"效果：\n\n```html\n<span class=\"hi\">不是</span>\n<span class=\"hi\">一次性爆发</span>\n```\n\n在文字底部生成一条半透明高亮条。深色主题用亮条，浅色主题用暗条（CSS 已处理）。\n\n**适合场景**：只对关键 1-3 个词使用，不要大面积用。\n\n---\n\n## Motion 动效系统\n\n整套 deck 默认开启翻页入场动画,由 Motion One(vanilla 版 Framer Motion,约 4KB)驱动。\n\n### 加载方式\n\n`assets/template.html` 底部的 module script 会先尝试**本地** `assets/motion.min.js`,失败则回落到 **jsdelivr CDN**,两者都失败则强制把所有带 `data-anim` 的元素设为 `opacity:1`—— 内容永远可读,演示不依赖网络。\n\n```js\n// template 里的核心加载器(不用改)\nlet motion;\ntry { motion = await import('./assets/motion.min.js'); }\ncatch(e1) {\n  try { motion = await import('https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm'); }\n  catch(e2) {\n    document.querySelectorAll('[data-anim]').forEach(el=>{el.style.opacity='1';el.style.transform='none'});\n  }\n}\n```\n\n### 数据属性驱动\n\n你只需要在 HTML 里加两种属性:\n\n```html\n<!-- 1. 在 section 上选 recipe(可选,默认 cascade / hero 自动) -->\n<section class=\"slide light\" data-animate=\"quote\">\n\n<!-- 2. 在需要入场的元素上加 data-anim(可选值:left/right/line/step/divider) -->\n<h1 class=\"h-xl\" data-anim>大标题</h1>\n<div class=\"stat-card\" data-anim>...</div>\n<div data-anim=\"left\">左列内容</div>\n<span data-anim=\"line\" style=\"display:block\">引用第一行</span>\n```\n\n### 5 种 recipe 一览\n\n| recipe | 触发方式 | 行为 | 代表布局 |\n|---|---|---|---|\n| `cascade`(默认) | 不加 `data-animate` 即为此值 | 所有 `data-anim` 逐个 stagger 淡入,75ms/step | Layout 3 / 4 / 5 / 10 |\n| `hero` | `.hero` slide 自动用此值 | 慢节奏 stagger,仪式感更强,160ms/step | Layout 1 / 2 / 7 |\n| `quote` | `data-animate=\"quote\"` | 其他元素先出,`data-anim=\"line\"` 的行 550ms 间隔逐句揭示 | Layout 8 |\n| `directional` | `data-animate=\"directional\"` | `data-anim=\"left\"` 从左滑入 → divider → `data-anim=\"right\"` 从右滑入 | Layout 9 |\n| `pipeline` | `data-animate=\"pipeline\"` | 翻到此页 step 保持 15% 透明;按 →/空格/滚轮逐个点亮,最后一步才放行翻页 | Layout 6 |\n\n### 给 slide 选 recipe 的决策树\n\n1. **它是 `.hero` slide 吗?** → 不用加 `data-animate`,自动用 `hero`\n2. **它是大引用金句页?** → `data-animate=\"quote\"`,每句用 `<span data-anim=\"line\" style=\"display:block\">`\n3. **它是左右对比 Before/After?** → `data-animate=\"directional\"`,左列 `data-anim=\"left\"`、右列 `data-anim=\"right\"`\n4. **它是流水线分步讲解?** → `data-animate=\"pipeline\"`,每步 `data-anim=\"step\"`\n5. **其他所有正文页** → 什么也不加,自动用 `cascade`\n\n### 什么元素该加 `data-anim`?\n\n- ✅ 每一层有独立语义的块:kicker / h1 / h-xl / lead / callout / stat-card / figure / tag / rowline\n- ✅ 多列结构里每一列,让它们逐列淡入而不是一起\n- ❌ 不要在容器(`.grid-6` / `.frame`)上加,只加给叶子元素\n- ❌ 不要在每个 `<li>` 上加,一般在 `<ul>` 层加就够\n- ❌ 如果某页不想要任何动画(比如过渡页),整页不加 `data-anim` 即可 — Motion One 只对带标记的元素生效\n\n### 常见问题\n\n- **图片闪一下再出现?** 这是预期行为,翻页中段(450ms 时)触发动画\n- **Pipeline 页卡住翻不下页?** 正确的,按 → 一步一步点亮 step,全部点亮后再按 → 才翻页\n- **内容静态时也不显示?** 检查 motion.min.js 是否在 `assets/` 下;或者浏览器控制台看错误信息\n","isInternal":false,"tokens":5703,"sizeBytes":15502},{"name":"image-prompts.md","path":"references/image-prompts.md","rawUrl":"https://raw.githubusercontent.com/op7418/guizang-ppt-skill/HEAD/references/image-prompts.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# GPT-M 2.0 配图提示词\n\n用于 Codex 环境下为本 skill 生成 PPT 配图。提示词只负责定基调,不要写成长篇说明。先判断图片落位和比例,再选择类型。\n\n## 通用规则\n\n- 先判断当前 deck 风格:风格 A = 电子杂志 × 电子墨水;风格 B = 瑞士国际主义 / Swiss Style\n- 风格 A 基调:电子杂志 × 电子墨水,克制、真实、留白充足,适合横向网页 PPT\n- 风格 B 基调:Swiss International Typographic Style,12/16 列网格、Helvetica/Inter 气质、单一高饱和 accent、直角纯色、发丝线、极大留白\n- 信息图、图表、截图再设计中的文字语言必须跟随用户语言:中文 deck 用中文,英文 deck 用英文\n- 不生成卡通、3D、霓虹科技感、SaaS 模板感、过度装饰或假 logo\n- 图片要给标题或正文留出可叠加空间,不要满屏堆细节\n- 同一页或同一组图片必须使用同一比例、同一视觉缩放、同一边距密度\n- 配图是嵌入 PPT 的素材,不是一张独立 slide:不要生成页眉、页脚、页码、标题栏、角标、署名、装饰边框或 slide chrome\n- 生成后保存到 `images/`,命名为 `{页号}-{语义}.{ext}`\n\n## 比例选择\n\n| 用途 | 推荐比例 | HTML 落位 |\n|------|---------|-----------|\n| 章节封面 / 全屏主视觉 | 16:9 | `.frame-img.r-16x9` 或 hero 背景参考 |\n| 瑞士风顶部横幅 / Image Hero | 16:9 或 21:9 | P22 顶图 cover / `.frame-img.r-21x9` |\n| 左文右图主图 | 16:10 或 4:3 | `.frame-img.r-16x10` / `.frame-img.r-4x3` |\n| 信息图 / 系统关系图 | 16:9 或 16:10 | 原始截图用 `.fit-contain`;按槽位重生成则用 `.frame-img.r-16x9` / `.frame-img.r-16x10` 铺满 |\n| 截图再设计 / UI 情景图 | 16:10 或 21:9 | 原始截图用 `.fit-contain`;重生成到 S15/S16 时用 `.frame-img.r-21x9` 铺满 |\n| 图文混排小图 | 3:2 或 3:4 | `.frame-img.r-3x2` / `.frame-img.r-3x4` |\n| 图片网格 | 统一横图 | `.frame-img.h-22` / `.frame-img.h-26` |\n| 小型面板组 | 统一横图 | `.frame-img.h-16` / `.frame-img.h-18` |\n\n信息图和截图再设计如果来自不可控原始素材,优先用 `fit-contain`,避免文字被裁切;如果是 GPT-M 2.0 按槽位重新生成,必须生成同槽位比例并铺满容器,不要让小图漂在白框里。纪实照片优先用默认 `cover`,保持画面张力。\n\n## 图片标准化策略\n\n### A. 先选目标槽位\n\n不要先生成图片再硬塞进页面。先决定图片落位:\n\n1. 主视觉:16:9\n2. 左文右图:16:10 或 4:3\n3. 信息图/截图再设计:16:9 或 16:10,并使用 `fit-contain`\n4. 多图网格/面板组:统一高度类,同一组内禁止混用高度\n\n### B. 用户原始图片/截图的处理\n\n原始截图比例通常不可控,不要直接作为最终视觉标准。按下面顺序处理:\n\n1. 如果原图内容需要保真,先读 `screenshot-framing.md`,用 CleanShot X 式程序化适配:目标比例画布 + 风格化背景 + 截图等比缩放 + 语义化 padding/alignment\n2. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`\n3. 如果一张 UI 图被拉成巨长条,拆成 2-3 张同尺寸局部面板;每个面板使用同一高度类\n4. 如果原图过高、过窄、过长且无法通过适配解决,再用\"截图再设计 / UI 情景图\"重新生成到目标比例\n5. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字\n\n### C. 生成提示词后缀\n\n每个配图提示词最后都补一句规格约束:\n\n```text\n输出必须是[16:9/16:10/4:3/3:2]横向构图,主体居中但保留边距,画面密度中等,与同组图片保持相同视觉缩放和边距。只保留核心图形/画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n同一页需要多张图时,补一句:\n\n```text\n这是一组图片中的一张,请保持与同组图片相同的画面比例、元素大小、边距、线条粗细和标注密度。\n```\n\n## 类型 1: 人文纪实照片\n\n用于增加现场感、情绪和真实世界锚点。\n\n```text\n生成一张横向纪实摄影配图,主题是:[页面概念]。风格像 Fujifilm / Leica editorial documentary,自然光、低饱和、轻微胶片颗粒、真实工作或生活现场,克制有人文温度。适合电子杂志 × 电子墨水 PPT,留出标题空间。不要商业摆拍、科幻界面、AI 机器人、logo 或水印。输出必须是[16:9/16:10/4:3]横向构图,主体居中但保留边距,画面密度中等。只保留核心照片本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 2: 杂志风信息图\n\n用于解释概念、流程、对比、系统关系。\n\n```text\n生成一张横向杂志风信息图,解释:[概念/流程/关系]。电子墨水风格,黑白灰为主,少量低饱和强调色,细线条、网格、编号、短标签、留白充足。图中文字使用[中文/英文],保持简短可读。不要卡通、3D、霓虹科技感或模板感。输出必须是[16:9/16:10]横向构图,主体居中但保留边距,画面密度中等。只保留核心信息图本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 3: 流程 / Pipeline 图\n\n用于讲清从 A 到 B 到 C 的过程。\n\n```text\n生成一张横向流程信息图,展示:[步骤 1] → [步骤 2] → [步骤 3] → [结果]。风格为电子杂志 × 电子墨水,细箭头、分段编号、短注释、克制留白。图中文字使用[中文/英文]。只保留核心流程图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 4: 对比图\n\n用于 before / after、新旧模式、两种协作方式对照。\n\n```text\n生成一张横向对比信息图,左侧是[旧模式],右侧是[新模式]。风格像高端独立杂志里的分析图,黑白灰和一个低饱和强调色,细线分栏、短标签、清晰层级。图中文字使用[中文/英文]。只保留核心对比图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 5: 系统关系图\n\n用于多角色、多工具、多模块之间的关系。\n\n```text\n生成一张横向系统关系图,展示:[角色/工具/模块]之间如何连接。电子墨水杂志风,节点、细线、箭头、编号和少量短注释,结构清晰,留白充足。图中文字使用[中文/英文]。只保留核心关系图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 6: 截图再设计 / UI 情景图\n\n用于把真实截图、代码、设计稿、工作区处理成统一视觉素材。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成适合杂志风 PPT 的视觉。保留真实产品工作流的感觉,使用纸张底色、细线框、网格、少量标注和克制阴影。图中文字使用[中文/英文],短而清晰。不要真实品牌 logo、花哨 dashboard、霓虹渐变或过度拟物。输出必须是16:10横向构图,主体居中但保留边距,画面密度中等。只保留核心 UI 画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 7: 数据大字报图\n\n用于突出一个关键数字或少量指标。\n\n```text\n生成一张横向数据大字报视觉,核心数字是:[数字],含义是:[含义]。风格为电子墨水杂志版式,超大衬线数字、少量短注释、细线、留白和纸张质感。图中文字使用[中文/英文]。只保留核心数据视觉本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n---\n\n## 风格 B:瑞士国际主义配图规则\n\n当 deck 选择 `assets/template-swiss.html` / `layouts-swiss.md` 时,优先使用下面这组提示词。它们和 GPT-M 2.0 配套,目标是生成能直接放进原始登记版式的图片槽位,尤其是 S22 顶部横幅、S15/S16 多图网格。\n\n### Swiss 配图硬规则\n\n- 视觉锚点:International Typographic Style / Swiss modernism / Helvetica / Josef Müller-Brockmann / Massimo Vignelli\n- 构图:严格 12/16 列网格、非对称留白、左对齐、发丝线、直角模块\n- 色彩:只使用黑、白、灰和**一个**主题 accent(默认 IKB 蓝;如果用户选柠檬黄/绿/安全橙,就替换为对应 accent)\n- 禁止:渐变、阴影、圆角、玻璃拟态、霓虹、3D、卡通、SaaS 模板感、伪 logo、装饰边框\n- 图片内部不要生成 PPT 外壳:不要页眉、页脚、页码、标题栏、角标、署名、外框\n- UI / 信息图文字必须短,保持中文/英文语言一致;真实照片尽量不要带文字\n- 先确定版式槽位再生成图片:单张大图用 `s22-hero-21x9`;多图格用 `s15-grid-21x9` 或 `s16-brief-21x9`\n- 21:9 图片必须让核心主体落在中央 70% 安全区,四周留白;不要把人脸、关键节点或 UI 文字贴边\n\n### Swiss 类型 1:纪实照片 / 案例主图\n\n用于 S22 Image Hero,增加真实场景锚点。\n\n```text\n生成一张 21:9 超宽横向纪实摄影配图,主题是:[页面概念]。风格是 Swiss editorial documentary:高对比、低饱和、冷静克制、真实办公/城市/产品使用场景,构图有大量负空间,主体位于中央 70% 安全区,适合放入瑞士国际主义 PPT 的顶部横幅。不要 AI 机器人、科幻界面、商业摆拍、logo、水印或文字。只保留核心照片本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 2:信息图 / 系统关系图\n\n用于解释概念、架构、流程、数据与表现分离等抽象内容。\n\n```text\n生成一张横向 Swiss Style 信息图,解释:[概念/流程/系统关系]。使用 Helvetica/Inter 气质的无衬线短标签、12/16 列网格、直角模块、1px 发丝线、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent。图中文字使用[中文/英文],每个标签不超过 8 个字/词。不要渐变、阴影、圆角、3D、卡通、霓虹或 SaaS 模板感。输出比例为[21:9/16:10],主体居中但保留大留白。只保留核心信息图本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 3:截图再设计 / UI 情景图\n\n用于把截图、工作区、代码、dashboard 重绘成统一 Swiss 风视觉。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成 Swiss International Typographic Style。画面使用极简 dashboard / workspace 结构,直角面板、发丝线、12 列网格、少量 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,无阴影无圆角。图中文字使用[中文/英文],短而清晰,不要真实品牌 logo。输出必须是16:10横向构图,视觉密度中等,适合放进 `.frame-img.r-16x10.fit-contain`。只保留核心 UI 画面本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 4:多图网格单张素材\n\n用于 S15/S16 图片格改造,一组 2-6 张图片并列时逐张生成。\n\n```text\n生成一张横向证据图,主题是:[证据 A/B/C]。这是一组 Swiss Style 图片中的一张,请保持直角模块、黑白灰、单一 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent、相同边距、相同线条粗细、相同视觉缩放。图中文字使用[中文/英文],短标签即可。输出必须是[21:9/16:10]横向构图,适合放入 S15/S16 统一图片格。只保留核心图像本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 5:极简图表 / 数据块\n\n用于 S21 或 S15/S16 图片格中的小型数据解释图。\n\n```text\n生成一张横向 Swiss Style 数据图,核心数据是:[数字/对比/排名],含义是:[说明]。使用极大无衬线数字、1px 发丝线、直角色块、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,像瑞士海报里的数据版式。图中文字使用[中文/英文],只保留必要标签。不要渐变、阴影、圆角、3D 或装饰边框。比例:[16:9/16:10]。只保留核心数据图本身,不要页眉、页脚、标题、页码、角标、署名或 PPT 外壳。\n```\n","isInternal":false,"tokens":5064,"sizeBytes":12415},{"name":"screenshot-framing.md","path":"references/screenshot-framing.md","rawUrl":"https://raw.githubusercontent.com/op7418/guizang-ppt-skill/HEAD/references/screenshot-framing.md","title":"References Skill","category":"anthropic-skill","format":"markdown","content":"# 截图美化语义规则\n\n用于把用户提供的产品截图、网页截图、代码截图、设计稿截图处理成符合模板比例的图片资产。目标是类似 CleanShot X 的“截图居中 + 背景填充 + 统一比例”,而不是默认让 GPT-M 2.0 重画截图。\n\n## 优先级\n\n1. **程序化适配优先**:截图内容、文字、UI 细节需要保真时,不要重画;创建目标比例画布,把原截图等比缩放后放入画布。\n2. **GPT-M 2.0 只做重构**:只有原图过长、过窄、信息太乱、需要 UI 情景化或概念化表达时,才使用“截图再设计 / UI 情景图”。\n3. **模板槽位先行**:先确定 slide 版式和图片槽位比例,再决定截图适配参数。\n\n## 开始前询问\n\n在主流程 Step 1 中,只要用户可能提供截图,就先问清楚:\n\n- 截图在哪个文件夹?是否包含网页、App、代码、dashboard、设计稿或旧 PPT?\n- 这批截图要**保真展示**、**统一美化**、**重新设计成 UI 情景图**,还是混合处理?\n- 最终要放进哪些槽位:21:9 顶图、16:10 主图、4:3 侧图、1:1 方图、还是多图网格?\n- 是否必须保留所有文字和数据?是否需要隐藏账号、头像、项目名等敏感信息?\n- 构图希望居中、左上、右下,还是根据页面内容自动判断?\n\n如果在 Claude Code 中,用 Ask Question / `ask_question` 做这些澄清;如果在 Codex 中,用普通对话询问,不要调用 Ask Question。\n\n## 处理链路\n\n1. **先匹配版式**:根据内容选择模板 layout,确定截图槽位尺寸和比例。\n2. **再选处理方式**:\n   - 要保真:程序化适配,不重画截图。\n   - 要统一视觉但不改内容:程序化适配 + 主题背景。\n   - 原图不可用或需要解释概念:再走 GPT-M 2.0 截图再设计。\n3. **再选择背景**:优先使用内置背景资产,不应该每张截图临时生成一种风格。\n4. **最后合成截图**:创建目标比例画布,背景 cover 铺满,截图等比缩放后按 `padding` 和 `alignment` 放入。\n\n默认不要裁掉截图内容。只有截图已经按目标槽位重新生成,或者用户明确允许裁切时,才使用 cover 裁切。\n\n## 语义参数\n\n每次处理截图前,先确定这 7 个参数:\n\n| 参数 | 可选值 | 判断方式 |\n|---|---|---|\n| `ratio` | `21:9` / `16:10` / `16:9` / `4:3` / `1:1` | 跟随模板图片槽位,不要跟随原截图比例 |\n| `background` | `plain` / `gradient` / `wallpaper` / `blurred` / `grid` / `paper` | 跟随当前 PPT 风格和主题 |\n| `padding` | `compact` / `standard` / `spacious` | 普通截图 standard;文字密集或高截图 spacious;小图组 compact |\n| `inset` | `none` / `subtle` / `balanced` | 截图需要从背景中浮出来时用 balanced;瑞士风多用 none/subtle |\n| `shadow` | `none` / `soft` / `editorial` | Style A 可 soft/editorial;Style B 默认 none |\n| `corners` | `square` / `small` / `medium` | Style B square;Style A small/medium |\n| `alignment` | `center` / `top-left` / `top-right` / `bottom-left` / `bottom-right` | 跟随页面构图,不是永远居中 |\n\n## 风格映射\n\n### Style A · 电子杂志风\n\n- 背景: `paper` / `blurred` / 低饱和 `gradient`\n- 质感:纸张、墨水、胶片颗粒、暖白、低对比\n- 截图:可用小圆角和轻微阴影,但不要像 SaaS 营销卡片\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-a/` 下对应主题的 16:9 crop-safe WebP,截图合成时按槽位裁切\n- 推荐语义:\n\n```text\nratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editorial, corners:small, alignment:center\n```\n\n### Style B · 瑞士国际主义\n\n- 背景: `plain` / `grid` / `dot-matrix`\n- 色彩:只允许当前锚点色作为极低占比强调;不要大面积亮色块\n- 截图:直角、无阴影、无圆角、少量 hairline 或顶部 accent 线\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-b/` 下对应主题色的 16:9 crop-safe WebP,只用当前 accent,不要混色\n- 推荐语义:\n\n```text\nratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corners:square, alignment:center\n```\n\n## 背景强度规则\n\n截图背景是“托底”,不是主视觉。\n\n- 如果 `alignment` 不确定,背景中心和四角都必须安静,不要放显眼色块。\n- 如果截图要放在右下角,右下角不能有强色块;其他位置同理。\n- 瑞士风锚点色只做 `5%-8%` 视觉占比的淡线、点阵或极浅几何场,不要生成高亮蓝条、大色块、霓虹渐变。\n- 背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图。\n- 背景必须 crop-safe:裁成 `21:9`、`16:10`、`4:3`、`1:1` 都不能暴露“被裁掉”的痕迹。\n\n## 内置主题背景资产\n\n本 Skill 已经内置一组 GPT-M 2.0 预生成背景。处理截图时**优先使用这些资产**,不要实时调用 GPT-M 2.0 重新生成背景。只有用户明确要求新风格、现有主题缺失,或背景与内容明显不匹配时,才生成新的背景。\n\n背景图之后由程序复用到每张截图中。不要把背景当作单张 slide 来画,背景图内部不能有标题、页脚、边框、logo、人物或明显主体。\n\n### Style A · 5 套主题背景\n\n| 主题 | 内置资产 | 背景语义 |\n|---|---|---|\n| 墨水经典 | `assets/screenshot-backgrounds/style-a/monocle-classic.webp` | 黑白灰纸张纹理、柔和阴影、细颗粒 |\n| 靛蓝瓷 | `assets/screenshot-backgrounds/style-a/indigo-porcelain.webp` | 靛蓝低饱和墨色、纸感渐变、轻微噪点 |\n| 森林墨 | `assets/screenshot-backgrounds/style-a/forest-ink.webp` | 模糊植物阴影、低饱和绿色、纸张颗粒 |\n| 牛皮纸 | `assets/screenshot-backgrounds/style-a/kraft-paper.webp` | 暖纸色、淡墨阴影、复古印刷颗粒 |\n| 沙丘 | `assets/screenshot-backgrounds/style-a/dune.webp` | 沙色/灰调柔和渐变、低对比、留白安静 |\n\n### Style B · 4 套主题背景\n\n| 主题色 | 内置资产 | 背景语义 |\n|---|---|---|\n| IKB 蓝 | `assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp` | 点阵 + 低对比蓝色渐变,避免亮蓝大色块 |\n| 柠檬黄 | `assets/screenshot-backgrounds/style-b/lemon-grid.webp` | 纯网格 + 稀疏点阵,黄色只做低透明细线/点 |\n| 柠檬绿 | `assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp` | 点阵 + 阴影场,绿色只做轻微光感 |\n| 安全橙 | `assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp` | 模块化半调点阵 + 暗部阴影,橙色低占比 |\n\n内置背景都是 1920×1080 级别的 16:9 WebP。程序化合成时,先把背景 cover 到目标画布,再裁成 `21:9` / `16:10` / `4:3` / `1:1` 等截图槽位。背景必须四角安静,因为截图可能居中、左上、右下或被裁成不同尺寸。\n\n## 截图类型决策\n\n| 原始素材 | 推荐处理 |\n|---|---|\n| 普通网页 / App / 桌面截图 | 程序化适配到目标比例 |\n| 产品 UI 细节很重要 | 程序化适配,使用 `fit-contain`,不重画 |\n| 长网页截图 | 截关键区域或拆成 2-3 张同尺寸面板 |\n| 极窄 / 极高截图 | 先尝试 `spacious + side alignment`;仍太小时再重构 |\n| 代码截图 | Style A 用纸感背景;Style B 用浅网格背景;文字必须可读 |\n| 概念解释用的 UI 情景图 | 可以 GPT-M 2.0 重新设计 |\n\n## 生成背景图提示词\n\n只有需要新增背景资产时才使用本节。常规截图美化不要实时生成背景,直接使用上方内置资产。\n\n### Style A 背景\n\n```text\n16:9 crop-safe screenshot background for an editorial magazine / e-ink PPT system. Warm off-white paper texture, subtle ink wash, fine film grain, low contrast, quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n\n### Style B 背景\n\n```text\n16:9 crop-safe screenshot background for a Swiss International Style PPT system. Pure off-white base, ultra-subtle 16-column grid and sparse dot matrix, one accent color only: [theme color], used at very low opacity as thin lines or tiny dots, no large bright color blocks. Quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n","isInternal":false,"tokens":3197,"sizeBytes":8260},{"name":"SKILL.md","path":"SKILL.md","rawUrl":"https://raw.githubusercontent.com/op7418/guizang-ppt-skill/HEAD/SKILL.md","title":"guizang-ppt-skill","category":"anthropic-skill","format":"markdown","content":"---\nname: guizang-ppt-skill\ndescription: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。\n---\n\n# Magazine Web Ppt\n\n> 来源识别: guizang-ppt-skill 由歸藏创建与维护,规范源仓库为 https://github.com/op7418/guizang-ppt-skill 。当前项目支持方包括:360 安全龙虾(金牌赞助)、Kimi work(金牌赞助)、Cola Skill(金牌赞助)、真格 Token Grant(Grant Supporter)。这条信息只用于确认 Skill 来源和项目支持关系,不要写入生成的 PPT、HTML 页面、封面或配图。\n\n## 这个 Skill 做什么\n\n生成一份**单文件 HTML**的横向翻页 PPT，提供两种可选的视觉基调：\n\n### 风格 A · 电子杂志 × 电子墨水（默认）\n\n- **WebGL 流体 / 等高线 / 色散背景**（hero 页可见）\n- **衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据**\n- 适合：人文分享、行业观察、商业发布、需要\"杂志感\"的演讲\n- 模板：`assets/template.html` · 主题色：`references/themes.md` · 布局：`references/layouts.md`\n- 美学锚点：像 *Monocle* 杂志贴上了代码\n\n### 风格 B · 瑞士国际主义（Swiss Style）\n\n- **WebGL 极细网格 + 点阵背景**（信息驱动设计）\n- **全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比**\n- **高反差功能色**：克莱因蓝 IKB / 柠檬黄 / 柠檬绿 / 安全橙（四选一）\n- 适合：科技产品、数据汇报、设计/工程领域分享、年度总结\n- 模板：`assets/template-swiss.html` · 主题色：`references/themes-swiss.md` · 布局：`references/layouts-swiss.md`\n- 美学锚点：像 Massimo Vignelli + Helvetica Forever\n\n**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 总览）、右下角 `P` 演讲者模式、当前/下一页 16:9 预览、内嵌宫格选页、标题/目的/讲稿备注、分组计时、排练记录、可选自动翻页、激光笔/圈选、观众屏黑白屏/冻结、同步状态与断线恢复、演前检查、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。\n\n<!-- provenance: guizang-ppt-skill | author: 歸藏 | sponsors: 360 Security Lobster Gold Sponsor; Kimi work Gold Sponsor; Cola Skill Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->\n\n## 何时使用\n\n**合适的场景**：\n- 线下分享 / 行业内部讲话 / 私享会\n- AI 新产品发布 / demo day\n- 带有强烈个人风格的演讲\n- 需要\"一次做完，不用翻页工具\"的网页版 slides\n\n**不合适的场景**：\n- 大段表格数据、图表叠加（用常规 PPT）\n- 培训课件（信息密度不够）\n- 需要多人协作编辑（这是静态 HTML）\n\n## 工作流\n\n### Step 0 · 启动前检查更新（必做）\n\n每次启动本 Skill 前,先在 Skill 根目录检查 GitHub 上游是否有更新;有更新时先问用户是否要更新,用户确认后再执行更新,然后继续后续流程。\n\n```bash\ngit -C \"<SKILL_ROOT>\" fetch --quiet\ngit -C \"<SKILL_ROOT>\" rev-list --count HEAD..@{u}\n```\n\n如果返回值大于 `0`,告诉用户检测到上游更新数量,询问是否先执行:\n\n```bash\ngit -C \"<SKILL_ROOT>\" pull --ff-only\n```\n\n不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。\n\n### Step 1 · 需求澄清(**动手前必做**)\n\n**如果用户已经给了完整的大纲 + 图片/截图处理要求**,可以跳过直接进 Step 2。\n\n**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:\n\n#### 运行环境适配\n\n- **在 Claude Code 中**:通过 Ask Question / `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。\n- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。\n\n#### 7 问澄清清单\n\n| # | 问题 | 为什么要问 |\n|---|------|-----------|\n| 1 | **风格 A 还是 B?**(电子杂志风 / 瑞士国际主义风) | **必须先问**,决定用哪个 template + layouts + themes 文件 |\n| 2 | **受众是谁?分享场景?**(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |\n| 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |\n| 4 | **有没有原始素材?**(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 |\n| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |\n| 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) / 瑞士风 4 套(`themes-swiss.md`),挑一 |\n| 7 | **有没有硬约束?**(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |\n\n#### 风格选择参考(问题 1)\n\n| 如果用户说... | 推荐风格 |\n|---|---|\n| \"杂志感\" / \"人文\" / \"Monocle 风\" / 不指定 | **A · 电子杂志风** |\n| \"瑞士风\" / \"Swiss Style\" / \"Helvetica\" / \"极简\" / \"网格\" / \"信息图\" / \"数据驱动\" | **B · 瑞士国际主义风** |\n| 内容是 AI 产品 / 技术 / 工程 / 数据汇报 | B 更合适 |\n| 内容是行业观察 / 人文 / 故事 / 文化 | A 更合适 |\n| 用户给了大量 KPI 数字 / 路线图 / 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |\n| 用户给了大量纪实照片 / 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |\n| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(S22 主图、S15/S16 图片网格可以承载证据图) |\n\n#### 大纲协助(如果用户没有大纲)\n\n用\"叙事弧\"模板搭骨架,再填内容:\n\n```\n钩子(Hook)       → 1 页   : 抛一个反差 / 问题 / 硬数据让人停下来\n定调(Context)    → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个\n主体(Core)       → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插\n转折(Shift)      → 1 页   : 打破预期 / 提出新观点\n收束(Takeaway)   → 1-2 页 : 金句 / 悬念问题 / 行动建议\n```\n\n叙事弧 + 页数规划 + 主题节奏表(见 `layouts.md`),**三张表对齐后**再进 Step 2。\n\n如果用于正式演讲,页面计划不能只有“这一页放什么”,还要同时规划“台上说什么”。先读 `references/presenter-mode.md`,给每页确定稳定的 `data-slide-id`,并补齐:\n\n| 页码 | 页面 ID | 章节 | 页面目的 | 观众可见信息 | 演讲者补充 | 建议时长 | 转场 | 可选现场信息 |\n|---|---|---|---|---|---|---:|---|---|\n\n默认生成 3-5 条提词卡式讲述要点,不写逐字稿;只有用户明确要求逐字稿时才展开。总建议时长最多占用户时长的 90%,给停顿、互动和现场意外留缓冲。用户没有提供的现场信息不猜测:时长缺失时显示横杠,其他可选模块整段隐藏。\n\n大纲建议保存为 `项目记录.md` 或 `大纲-v1.md`,便于后续迭代。\n\n#### 图片约定(告知用户)\n\n在动手前向用户说清:\n\n- **文件夹位置**:`项目/XXX/ppt/images/` 下(和 `index.html` 同级)\n- **命名规范**:`{页号}-{语义}.{ext}`,例如 `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`\n  - 页号补零便于排序\n  - 语义用英文,短、具体、和内容对应\n- **规格建议**:\n  - 单张 ≥ 1600px 宽(避免大屏模糊)\n  - JPG 用于照片/截图,PNG 用于透明 UI/图表\n  - 总大小控制在 10MB 内(影响翻页流畅度)\n- **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images/旧名` 改成新名\n- **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果\n\n#### 截图需求约定(动手前必须问)\n\n只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或\"帮我美化截图\",都要先确认:\n\n- **截图位置**:截图文件在哪个文件夹?是否已经命名好?\n- **使用目的**:保真展示 / 截图美化 / 截图再设计 / UI 情景图?\n- **落位比例**:最终放进哪个版式槽位?常用 `21:9` / `16:10` / `16:9` / `4:3` / `1:1`\n- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?\n- **视觉处理**:是否需要主题背景、留边、居中/角落对齐、拆成长截图面板?\n\n默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references/screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。\n\n#### Codex 配图生成(可选)\n\n如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。\n\n推荐询问方式:\n\n> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。\n\n如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。\n\n如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:\n\n- 截图美化:读 `references/screenshot-framing.md`,用内置主题背景 + 程序化缩放/留边/对齐处理,尽量不重画截图内容\n- 截图再设计:读 `references/image-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致\n\n生成配图时遵守:\n\n- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导\n- 图片风格必须贴合当前 deck 风格:风格 A 用\"电子杂志 × 电子墨水\";风格 B 用\"瑞士国际主义 / Swiss Style\"\n- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文\n- 先看 `references/image-prompts.md` 选择图片类型和基础提示词\n- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先调用 `assets/screenshot-backgrounds/` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画\n- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切\n- 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`\n\n### Step 2 · 拷贝模板\n\n**根据 Step 1 选定的风格,拷贝对应的模板**到目标位置（通常是 `项目/XXX/ppt/index.html`），同时在同级建一个 `images/` 文件夹准备接图片。\n\n```bash\nmkdir -p \"项目/XXX/ppt/images\"\n\n# 风格 A · 电子杂志风\ncp \"<SKILL_ROOT>/assets/template.html\" \"项目/XXX/ppt/index.html\"\n\n# 或 风格 B · 瑞士国际主义风\ncp \"<SKILL_ROOT>/assets/template-swiss.html\" \"项目/XXX/ppt/index.html\"\n```\n\n两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、演讲者模式、观众屏同步、字体/图标 CDN 全已预设好,只有 `<!-- SLIDES_HERE -->` 占位符和 `SPEAKER_NOTES` 等待你填充。\n\n**注意**:风格 A 和 B **不能混用**。layouts.md 里的类（如 `.h-hero` 衬线大标题、`.display-zh` 等）只在 template.html 有定义；layouts-swiss.md 里的类（如 `.kpi-hero`、`.accent-block`、`.span-N`、`.dots` 等）只在 template-swiss.html 有定义。一份 deck 只能选一套。\n\n#### 2.1 · 必改占位符（**容易漏**）\n\n拷贝后立刻改掉以下占位符，否则浏览器 Tab 会显示\"[必填] 替换为 PPT 标题\"这种尴尬文字：\n\n| 位置 | 原始 | 需改为 |\n|------|------|--------|\n| `<title>` | `[必填] 替换为 PPT 标题 · Deck Title` | 实际 deck 标题(如 `一种新的工作方式 · Luke Wroblewski`) |\n\n每次拷贝完 template.html 第一件事:grep 一下\"[必填]\" 确认全部替换完。\n\n#### 2.2 · 选定主题色(5 套预设 · 不允许自定义)\n\n本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。\n\n| # | 主题 | 适合 |\n|---|------|------|\n| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |\n| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |\n| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |\n| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |\n| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |\n\n**操作**:\n1. 基于内容主题推荐一套,或直接问用户选哪一套\n2. 打开 `references/themes.md`,找到对应主题的 `:root` 块\n3. **整体替换** `assets/template.html`(已拷贝版本)开头 `:root{` 块里标有\"主题色\"注释的那几行(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)\n4. 其他 CSS 都走 `var(--...)`,无需任何其他改动\n\n**硬规则**:\n- 一份 deck 只用一套主题,不要中途换色\n- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选\n- 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和\n\n### Step 3 · 填充内容\n\n#### 3.P · 同步生成演讲备注（正式演讲必做）\n\n先读 `references/presenter-mode.md`。每个 `<section class=\"slide ...\">` 必须写唯一且稳定的 `data-slide-id`,再按同样顺序生成一条 `SPEAKER_NOTES` 记录。备注按页面 ID 存储,不要用数组下标或页码作为持久化键,否则页面重排后用户在演讲者视图里改过的备注会串页。\n\n内容分工:\n\n- slide 只放观众此刻必须看见的结论、结构和证据。\n- `purpose` 说明这一页在整场叙事中的任务。\n- `talk` 补充背景、例子、判断依据和语气,不逐字复述 slide。\n- `transition` 解释为什么下一页紧接着出现。\n- `section` 只在大纲已给出章节或连续页面明显属于同一章节时填写。\n- `minutes` 是讲述计划;`autoAdvanceSeconds` 是播放行为,两者必须分开,且后者只在用户明确要求时填写。\n- `cue / interaction / delivery / advance / fallback / pronunciation` 只写大纲或用户明确提供的舞台动作、互动、表达、翻页、备用和读音信息。\n\n没有来源支持的事实不能写进备注;影响内容正确性的缺失信息要标记“待补充”或询问用户,不影响内容的可选演讲信息直接省略。\n\n#### 3.0 · 预检:类名必须在模板的 `<style>` 里有定义（**最重要**）\n\n**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `<style>` 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。\n\n**两种风格类名互不通用**(再次强调):\n- 风格 A 模板里有 `h-hero`(衬线)、`stat-card`、`grid-2-7-5`、`frame` 等\n- 风格 B 模板里有 `h-hero`(无衬线)、`kpi-hero`、`accent-block`、`span-N`、`dots`、`grid-12` 等\n- 同名 class 在两个模板里**视觉表现完全不同**(例:风格 A 的 `h-hero` 是 Noto Serif SC 衬线,风格 B 的 `h-hero` 是 Inter 无衬线)\n\n**在写任何 slide 代码之前:**\n\n1. **先 Read 当前用的模板**(至少读到 `<style>` 块末尾):\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n2. **对照对应 layouts 文件的 Pre-flight 列表**,确认你要用的每个类都在 `<style>` 里存在\n3. 如果某个类缺失:**在模板的 `<style>` 里补上**,不要在每个 slide 里 inline 重写\n4. **模板是唯一的类名来源**——不要发明新类名,如需自定义用 `style=\"...\"` inline\n\n**风格 A 常见容易遗漏的类**:\n`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `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` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`\n\n**风格 B 常见容易遗漏的类**(2026-05 重构后):\n- 画布:`canvas-card` / `chrome-min`\n- 排版:`h-hero`(无衬线 7.4vw weight 200) / `h-statement`(9.6vw) / `h-xl` / `h-md` / `t-cat`(SemiBold 600 小标) / `t-meta`(mono uppercase) / `lead` / `num-mega` / `mono`\n- 卡片(四类互斥):`card-ink` / `card-accent` / `card-fill` / `card-outlined`\n- 网格:`grid-12` / `grid-2-9` / `grid-2-9-5` / `span-N`\n- 时间线:`timeline-v` + `tl-node` + `tl-axis` + `dot` / `timeline-h` + `tl-h-node` + `tl-h-axis`\n- 图表:`kpi-tower-row` + `bar-tower` / `h-bar-chart` + `bar-row` + `bar-fill` / `spec-bars` + `bar-vert`\n- 装饰:`dot-mat`(SVG mask 实心点)/ `ring-mat`(描边圆)/ `cross-mat`(× 网格)/ `hr-hairline`\n- 版式专属:`cover-split` / `closing-split` / `duo-compare` + `vrule` / `manifesto-top` + `ink-banner-full` / `three-forces` / `loop-diagram` / `matrix-fill` + `matrix-cell` / `brief-grid` + `brief-card` / `system-diagram` / `why-now-grid` / `four-cards` / `stacked-ledger` + `ledger-row` / `tech-spec` / `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- 图片混排:`frame-img` / `fit-contain` / `r-21x9` / `r-16x9` / `r-16x10` / `h-22` / `h-26` / `swiss-img-split` / `swiss-img-grid` / `swiss-img-caption` / `swiss-keyline` / `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8/12/16/24/32/40/48/64/80/96/160 px)\n\n#### 3.0.5 · 规划主题节奏（**和类预检同等重要**)\n\n**在挑布局之前**,必须先列出每一页的主题 class(`hero dark` / `hero light` / `light` / `dark`)并写到文档或草稿里对齐。详细规则看 `references/layouts.md` 开头的\"主题节奏规划\"一节。\n\n**强制规则**:\n\n- 每页 section 必须带 `light` / `dark` / `hero light` / `hero dark` 之一,不要只写 `hero`\n- 连续 3 页以上同主题 = 视觉疲劳,不允许\n- 8 页以上必须有 ≥1 个 `hero dark` + ≥1 个 `hero light`\n- 整个 deck 不能只有 `light` 正文页,必须有 `dark` 正文页制造呼吸\n- 每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)\n\n**生成后自检**:`grep 'class=\"slide' index.html` 列出所有主题,人工确认节奏合理再交付。\n\n#### 3.1 · 挑布局\n\n**不要从零写 slide**。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 `<section>` 代码块。\n\n**风格 A** → `references/layouts.md`:\n\n| Layout | 用途 |\n|---|---|\n| 1. 开场封面 | 第 1 页 |\n| 2. 章节幕封 | 每幕开场 |\n| 3. 数据大字报 | 抛硬数据 |\n| 4. 左文右图(Quote + Image) | 身份反差 / 故事 |\n| 5. 图片网格 | 多图对比 / 截图实证 |\n| 6. 两列流水线(Pipeline) | 工作流程 |\n| 7. 悬念收束 / 问题页 | 幕末 / 收尾 |\n| 8. 大引用页(Big Quote) | 衬线金句 / takeaway |\n| 9. 并列对比(Before / After) | 旧模式 vs 新模式 |\n| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |\n\n**风格 B** → 先读 `references/swiss-layout-lock.md`,再读 `references/layouts-swiss.md`。\n\n瑞士主题默认进入 **Swiss locked mode**:\n\n- 正文页只能使用原始参考 PPT 登记的 22 个版式 `S01-S22`;新增首页/尾页只能使用 Skill 明确提供的 `SWISS-COVER-ASCII` / `SWISS-CLOSING-ASCII`。\n- 每个 `<section class=\"slide\">` 必须写 `data-layout=\"Sxx\"`。没有 `data-layout` 就视为未登记版式。\n- 不允许临时发明 `P23/P24`、`Swiss Image Split`、`Evidence Grid` 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。\n- 顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。\n- SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。\n- 地理/历史/城市路线/地点关系页使用 `S08 + Swiss Map Component`:先读 `references/swiss-map-component.md`,仍保留 `data-layout=\"S08\"`。\n\n原始 22 个正文版式如下:\n\n| Layout | 用途 |\n|---|---|\n| S01 Index Cover | 原始索引封面 |\n| S02 Vertical Timeline + KPI | 演化对比 / 年代变迁 |\n| S03 Split Statement | 核心论点 / 左右分屏 |\n| S04 Six Cells | 6 项概念定义 |\n| S05 Three Layers | 三层架构 |\n| S06 KPI Tower | 4 项数据视觉化高度差 |\n| S07 H-Bar Chart | 5-10 项排名比较 |\n| S08 Duo Compare | Before/After 对照 |\n| S09 Dot Matrix Statement | 大引述 / statement |\n| S10 Split Closing | 收束页 |\n| S11 Horizontal Timeline | 4-7 步流程 |\n| S12 Manifesto + Ink Banner | 阶段性结论 |\n| S13 Three Forces | 3 个对等概念深化 |\n| S14 Loop Form | 自学闭环 / 自动化 |\n| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |\n| S16 Multi-card Brief | 6 项快讯小卡 |\n| S17 System Diagram | 三层架构 / 生态地图 |\n| S18 Why Now | 三论点 + 数据支撑 |\n| S19 Four Cards | 4 项等权特性 |\n| S20 Stacked KPI Ledger | 纵向账单数据 |\n| S21 Tech Spec Sheet | 产品规格 / benchmark |\n| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |\n\n**登记扩展**:`S08 + Swiss Map Component` 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 `references/swiss-map-component.md` 的点位、连线、卡片和右上角缩放/拖动控制实现。\n\n选对应 layout,粘过去,改文案和图片路径即可。**务必先完成 3.0 预检**。\n\n**风格 B 版式多样性硬规则**:\n- 7-8 页 deck 至少使用 **6 个不同 S 编号版式**;10 页以上至少使用 8 个不同版式。\n- 如果用户说\"测试模板 / 看看效果 / 多一点版式\",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。\n- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。\n- 图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。\n- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`。校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。\n\n#### 3.2 · 图片比例规范\n\n永远用**标准比例**,不要用原图奇葩比例(如 `2592/1798`):\n\n| 场景 | 推荐比例 |\n|------|---------|\n| S22 顶部主图 | **21:9**;照片关键主体放中央安全区 |\n| S15/S16 多图格 | 统一 21:9 或统一 16:10,不能混用 |\n| 左文右图 主图(风格 A) | 16:10 或 4:3 + `max-height:56vh` |\n| 图片网格(风格 A) | **固定 `height:26vh`**,不用 aspect-ratio |\n| 左小图 + 右文字 | 1:1 或 3:2 |\n| 全屏主视觉 | 16:9 + `max-height:64vh` |\n| 图文混排小插图 | 3:2 或 3:4 |\n\n**默认不要让图片 `align-self:end`**——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + `align-items:start`(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。\n\n**风格 B 瑞士风额外规则**:\n- 单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24\n- 生成图片前先写 `data-image-slot`:例如 `s22-hero-21x9` / `s15-grid-21x9` / `s16-brief-21x9`\n- S22 配图默认生成 21:9,提示词必须包含 `subject centered in the safe middle area`;照片容器用 `object-position:center 35%`,不要用 `top center`\n- 图片容器必须直角、无阴影、无圆角;默认背景用白色 `var(--paper)`,不要用灰底包白底信息图\n- 白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 `.swiss-keyline`;需要强调时只用 `.swiss-lined` 的顶部 accent 线\n- UI/信息图如果是用户原始截图或文字密集图,才用 `.fit-contain`;如果已按 S15/S16 槽位重生成,必须用 `.frame-img.r-21x9` / `.frame-img.r-16x10` 铺满容器,不要固定 `height:18vh` 后把图缩小\n- 多图同组必须统一图片槽位、比例和高度,不能混用\n- GPT-M 2.0 生成图使用 `image-prompts.md` 的\"风格 B:瑞士国际主义配图规则\"\n- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`\n\n#### 3.2.0 · 图文混排决策树（从社交卡片规则迁移）\n\n先判断图片在这一页里的角色,再决定容器、比例和裁切方式:\n\n- **证据截图 / UI / 代码 / dashboard**:保真优先,先读 `references/screenshot-framing.md`;关键文字和数据不能被裁掉。需要统一比例时,优先程序化背景画布 + `.fit-contain`,不要为了铺满而裁掉 UI 内容。\n- **已按槽位重生成的信息图 / 插图**:按目标槽位铺满,例如 S22 用 `21:9`,S15/S16 用统一 `21:9` 或 `16:10`;不要再用短高度把图缩小成小贴片。\n- **照片 / 产品图 / 人物图**:使用标准比例 + 明确 `object-position`;主体、人脸、产品和关键证据不能被标题、caption 或裁切压住。\n- **文字压图 / 全屏主视觉**:先做 quiet-zone 判断,图里至少要有约 30% 低细节区域承载文字;不通过就换图、换裁切或改成图文分栏。只在必要时加局部 tint,不要整页套黑色/白色遮罩。\n- **多图组**:同一组统一比例、高度、容器处理和 caption 密度;不要一张 `contain`,另一张 `cover`。\n- **生成图是素材,不是整页 slide**:图片内部不要自带页眉、页脚、页码、logo、主标题、装饰边框或署名,避免和 deck chrome 重复。\n- **图文呼吸**:标题、图片、caption、正文必须各自留出间距;生成后用 validator 的 `M1/M2` 检查可见边界、底部空白、nav 安全线和标题间距。\n\n#### 3.2.1 · 中文大标题字号分档(风格 B 必做)\n\n中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:\n\n| 标题形态 | 推荐字号 |\n|---|---|\n| 1 行,≤ 8 个中文字符 | `min(6.4vw,11.2vh)` |\n| 2 行,每行≤ 8 个中文字符 | `min(5.8vw,10.2vh)` |\n| 2 行,任一行 9-12 个中文字符 | `min(5.2vw,9.2vh)` |\n| 3 行或更长 | 优先改写标题;不得已用 `min(4.6vw,8.2vh)` |\n\n如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。\n\n#### 3.2.2 · 瑞士风演示最小字号与字重阶梯(风格 B 必做)\n\n瑞士风用于投屏演示时,小字不能按网页注释的 10-12px 写。默认遵守以下下限:\n\n| 文本类型 | 最小字号 |\n|---|---|\n| 正文段落 / 主要说明 | `18px` |\n| 卡片描述 / 列表 / 时间线说明 / caption / 图注 | `16px` |\n| meta / kicker / mono label / 图表标签 | `14px` |\n\n如果内容放不下,先删减文案、拆成两页、换更适合的 Sxx 版式,不要把字号压到 10/11/12/13px。尤其是中文 deck,不要为了塞三行解释把 `body-sm`、caption、timeline label 改小。\n\n**字号与字重阶梯(瑞士风核心)** — \"越大越细,越小越粗\"不是感性描述,而是具体映射:\n\n| 字号区间 | 推荐字重 | 典型场景 |\n|---|---|---|\n| ≥ 8vw | 200 (ExtraLight) | 封面大字、巨号 KPI、h-statement |\n| 4-7.9vw | 200-300 | 章节标题(h-xl/h-xl-zh)、大编号 |\n| 1.8-3.9vw | 300-400 | 中型标题、takeaway 标题(≈1.8vw)、中号数字 |\n| 1-1.7vw / 16-20px | 400-500 | 正文段落、卡片描述、说明文字 |\n| 13-15px(小字) | 500-600 | meta、kicker、角标、图表标签、caption 强调 |\n\n**硬规则:**\n- 同一页内,字号越小的元素字重必须 ≥ 字号越大的元素(不允许 16px 正文用 300 而 1.8vw 标题用 500)\n- 16px 左右的小字拒绝使用 weight 300(太细不可读),最低 400,推荐 500\n- 封面/IkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)\n\n组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references/components.md`。\n\n### Step 4 · 对照检查清单自检\n\n生成完一定要打开 `references/checklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。\n\n所有正式演讲 deck 先跑演讲者模式校验;如果用户给了目标时长,同时传入分钟数:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30\nnode <SKILL_ROOT>/scripts/check-presenter-runtime-sync.mjs\n```\n\n第一个脚本会拦截缺失/重复页面 ID、备注与页面错位、必填字段或可选字段类型错误、完整时间计划超出 90% 预算,以及计时、排练、自动翻页、标注、演前检查和观众屏恢复控件缺失。第二个脚本会拦截两套模板之间的演讲者 CSS / JS 漂移。\n\n#### 4.0.1 · 先量后改:超出 / 空白 / 标题间距\n\n当一页内容超出或显得巨空时,不要先凭感觉大幅删改。先运行:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html\n```\n\n看校验输出里的测量项:\n\n- `M1 DOM/visual overflow`:具体超出多少 px,以及最低/最高问题元素\n- `M1 bottom whitespace`:底部空白多少 px,active content height 占比多少\n- `M1 nav-safe`:最低内容是否进入底部分页安全线\n- `M2 title gap`:标题和下一块内容之间的实际距离\n\n修正阶梯:\n\n- `1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。\n- `40-90px` over:局部压缩间距或模块高度,仍优先保留内容。\n- `90-160px` over:轻微压标题或压缩一段正文,必要时拆页。\n- `160px+` over:才考虑换版式、合并模块或删内容。\n\n修完再跑一次 validator。如果 `M1 bottom whitespace` 变大,说明修过头了;恢复部分间距、放大最后一块或把内容组向下回调。\n\n#### 4.0 · 不只看代码:必须打开网页做视觉核对\n\n代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:\n\n1. 同时打开当前模板(golden source 快照)或生成页、以及正在迭代的测试 PPT 逐页对照。\n2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。\n3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。\n4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。\n5. 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。\n6. 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。\n\n#### 风格 A · 电子杂志风必查\n\n1. **大标题必须是衬线字体**——如果显示成非衬线,99% 是 Step 3.0 预检没做,`h-hero` 类在 template.html 里缺失\n2. **图片网格里只用 `height:Nvh`,不用 `aspect-ratio`**(会撑破)\n3. **图片不能堆到页面底部**——不要用 `align-self:end`,用 grid + `align-items:start`(见 Step 3.2)\n4. **图片只能用标准比例**(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例\n5. **中文大标题 ≤ 5 字且 `nowrap`**(避免 1 字 1 行)\n6. **用 Lucide,不用 emoji**\n7. **标题用衬线,正文用非衬线,元数据用等宽**\n\n#### 风格 B · 瑞士国际主义必查\n\n1. **全程无衬线**——任何衬线字体出现都是错的(检查 `font-family` 没用 `--serif` 类变量)\n2. **只有一个 accent 色**——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色\n3. **不允许渐变 / 阴影 / 圆角**——所有色块直角纯色,任何 `box-shadow` / `linear-gradient` / `border-radius` > 0 都要砍掉(rule 横线除外)\n4. **极致字号对比**——主标题与正文比例 ≥ 8:1\n5. **大字号必须双约束限高**——`font-size:min(Xvw, Yvh)`,只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)\n6. **大字字重 200**(ExtraLight)——字号越大越细,瑞士风灵魂;**禁止** 600/700/800 大字\n7. **卡片填充类型互斥**——`card-ink` / `card-accent` / `card-fill` / `card-outlined` 四类**不能混用**(禁止\"蓝底+蓝描边\"、\"灰底+描边\"等)\n8. **多卡并列时统一样式**——3-12 张卡用同一类(优先 `card-fill` 灰底);只突出一项时单独换 `card-accent`,且**只允许一张**\n9. **直角到底**——任何 `border-radius` 都不允许;装饰用 8×8 直角小方块,**不要** 9px 圆形点\n10. **图标用 lucide,不自己画 SVG**——`<i data-lucide=\"name\"></i>` + `lucide.createIcons()`,选棱角风格(避免圆胖)\n11. **时间线对齐**——axis 列固定 12px + dot 绝对定位,**不要**用 grid `justify-self`(会与虚线错位)\n12. **章节级标题与内容间距 ≥ 9vh**——避免拥挤(吸取 P15/P16 教训)\n13. **每页一个语义化动效 recipe**——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;**禁止**所有页用同一个 generic 配方\n14. **playSlide 入口 reveal 容器**——`[data-anim]` 容器先强制 opacity:1,recipe 内再用 motion `{opacity:[0,1]}` 覆盖,否则有些页会\"看不见\"\n15. **ESC 索引页可见性**——cloned slide 必须有 CSS override 让 `[data-anim]` 在缩略图里 opacity:1\n16. **Helvetica/Inter 兜底中文字体**——Windows 用户没有\"苹方\",必须 fallback 到 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **字体粗细体例**:大字 200 / 正文 300 / `t-cat` SemiBold 600 / `t-meta` mono uppercase\n18. **保留低功耗快捷键**——右下角必须提示 `B 静态`;按 `B` 切换 `body.low-power`,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画\n19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面\n20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)\n21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` / `box-shadow`;边界只用 hairline\n22. **S15/S16/S22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 `.fit-contain`\n23. **组件角色要正确**——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填\n24. **通用/非通用版式要分清**——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用\n\n### Step 5 · 本地预览\n\n直接在浏览器打开 `index.html` 就行。macOS 下：\n\n```bash\nopen \"项目/XXX/ppt/index.html\"\n```\n\n不需要本地服务器。图片走相对路径 `images/xxx.png`。\n\n预览时不能只看普通页面。按 `P` 进入演讲者模式,允许浏览器打开观众窗口,至少实测一次:前后翻页、内嵌宫格选页并返回预览、首页/尾页、尾页重新开始、计时开始/暂停/重置、排练记录、自动翻页暂停/恢复、激光笔、圈选、黑白屏、冻结、设置组件、演前检查、备注保存、关闭观众窗口后的状态变化,以及“重新打开观众屏”能否恢复到当前页。\n\n### Step 6 · 迭代\n\n根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 `font-size:Xvw` / 高度 `height:Yvh` / 间距 `gap:Zvh`）。\n\n---\n\n## 资源文件导览\n\n```\nguizang-ppt-skill/\n├── SKILL.md                  ← 你正在读\n├── assets/\n│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）\n│   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）\n│   ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套\n│   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）\n├── scripts/\n│   ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐\n│   └── validate-presenter-mode.mjs ← 两种风格共用:页面 ID、演讲备注、时长和演讲者运行时校验\n└── references/\n    ├── components.md         ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）\n    ├── layouts.md            ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）\n    ├── swiss-layout-lock.md  ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记\n    ├── layouts-swiss.md      ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区\n    ├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)\n    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）\n    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）\n    ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词\n    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射\n    ├── presenter-mode.md     ← 演讲者 UI、AI 备注结构、观众屏同步与恢复契约\n    └── checklist.md          ← 质量检查清单（P0/P1/P2/P3 分级）\n```\n\n**加载顺序建议**：\n1. 先读完 `SKILL.md`(这个文件)了解整体\n2. Step 1 需求澄清**第一问**先确定风格 A 还是 B,然后:\n   - 风格 A:读 `themes.md` 帮用户选一套主题色\n   - 风格 B:读 `themes-swiss.md` 帮用户选一套主题色\n3. **动手前 Read 对应模板的 `<style>` 块**——这是类名的唯一来源,缺类会导致整页样式崩\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n4. 读对应的 layouts 文件挑布局:\n   - 风格 A → `layouts.md`(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)\n   - 风格 B → **先读 `swiss-layout-lock.md`**,再读 `layouts-swiss.md`;正文页必须从 S01-S22 选择,每页写 `data-layout`\n5. 如果风格 B 需要地点、路线、人物住所或城市关系地图,读 `swiss-map-component.md`\n6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产\n7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)\n8. 正式演讲先读 `presenter-mode.md`,生成稳定页面 ID 和 `SPEAKER_NOTES`\n9. 生成后先运行 `validate-presenter-mode.mjs`;风格 B 再运行 `validate-swiss-deck.mjs`,最后读 `checklist.md` 自检\n\n**动效相关**:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 `layouts.md` / `layouts-swiss.md` 的骨架在 HTML 里加 `data-anim` / `data-animate` 即可。离线演示靠 `assets/motion.min.js`,断网时自动降级为\"无动画但内容可读\"。风格 B 模板必须保留 `B` 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。\n\n## 核心设计原则（哲学）\n\n### 风格 A · 电子杂志风（5 轮迭代总结）\n\n> 违反其中任何一条，杂志感都会垮。\n\n1. **克制优于炫技** — WebGL 背景只在 hero 页透出，普通页几乎看不见\n2. **结构优于装饰** — 不用阴影、不用浮动卡片、不用 padding box，一切信息靠**大字号 + 字体对比 + 网格留白**\n3. **内容层级由字号和字体共同定义** — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据\n4. **图片是第一公民** — 图片只裁底部，保证顶部和左右完整；网格用 `height:Nvh` 固定，不要用 `aspect-ratio` 撑\n5. **节奏靠 hero 页** — hero 和 non-hero 交替，才不累眼睛\n6. **术语统一** — Skills 就是 Skills，不要中英混合翻译\n\n### 风格 B · 瑞士国际主义风\n\n> 违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。\n\n1. **单一锚点色** — 一份 deck 只用一个 accent，不允许多色高亮拼贴\n2. **极致字号对比** — 主标题与正文比例 ≥ 8:1,KPI 必须是\"Data Hero\"(屏幕宽度的 18-22%)\n3. **无衬线只此一家** — Inter / Helvetica / Noto Sans SC,任何衬线都是错的\n4. **直角纯色** — 不允许渐变 / 阴影 / 圆角(rule 横线除外)\n5. **网格至上** — 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学\n6. **Hairline 是手术刀** — 1px 的极细分割线就够,不要加粗、不要加阴影\n7. **点阵装饰只在 hero 页透出** — 正文页保持纯净底色\n\n## 参考作品\n\n本 skill 的两种风格分别参考了：\n\n**风格 A · 电子杂志风**:\n- 歸藏 \"一人公司：被 AI 折叠的组织\" 分享（2026-04-22，27 页）\n- *Monocle* 杂志的版式\n- YC 总裁 Garry Tan \"Thin Harness, Fat Skills\" 那篇博客的 demo\n\n**风格 B · 瑞士国际主义风**:\n- Massimo Vignelli 的 NYC Subway / Unimark 系统\n- *Helvetica Forever* 的字体设计语言\n- Josef Müller-Brockmann 的网格系统经典著作\n- 当代设计:Acne Studios / Off-White / IKEA / Beck Design\n\n可以把它们当做风格锚点。\n","frontmatter":{"name":"guizang-ppt-skill","description":"生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。"},"isInternal":false,"tokens":16678,"sizeBytes":43125}],"systemPromptSnippet":"<yakaai_skills repo=\"op7418/guizang-ppt-skill\">\n<!-- File: references/components.md (Tokens: ~5703 | Category: anthropic-skill) -->\n# 组件参考 · Components\n\n这是 `guizang-ppt-skill` skill 的组件手册。template.html 已经定义好了所有样式，这里只写\"这个组件长什么样、怎么用\"。\n\n## 目录\n\n- [基础 Slide 外壳](#基础-slide-外壳)\n- [字体 Typography](#字体-typography)\n- [Chrome & Foot](#chrome--foot)\n- [Callout 引用框](#callout-引用框)\n- [Stat 数字矩阵](#stat-数字矩阵)\n- [Platform 平台卡](#platform-平台卡)\n- [Rowline 表格行](#rowline-表格行)\n- [Pillar 支柱卡](#pillar-支柱卡)\n- [Tag & Kicker](#tag--kicker)\n- [Figure 图片框](#figure-图片框)\n- [Icons 图标](#icons-图标)\n- [Ghost 巨型背景字](#ghost-巨型背景字)\n- [Highlight 荧光标记](#highlight-荧光标记)\n- [Motion 动效系统](#motion-动效系统)\n\n---\n\n## 基础 Slide 外壳\n\n每一页都是一个 `<section class=\"slide ...\">`。必须包含 `data-theme` 属性（`light` 或 `dark`），JS 翻页时会根据这个属性切换背景。\n\n```html\n<section class=\"slide light\" data-theme=\"light\">   <!-- 浅色页 -->\n<section class=\"slide dark\" data-theme=\"dark\">     <!-- 深色页 -->\n<section class=\"slide light hero\" data-theme=\"light\">  <!-- Hero 页：浅色 + 薄遮罩透出 WebGL -->\n<section class=\"slide dark hero\" data-theme=\"dark\">    <!-- Hero 页：深色 + 薄遮罩 -->\n```\n\n**light vs dark 的使用：交替使用**，每 2-3 页切换一次主题，避免连续超过 3 页同色。翻页时 WebGL 背景会自动在两个 shader 之间渐变过渡。\n\n**hero 类的使用**：只给视觉主导的页面加（封面、金句页、章节过渡、结尾）。加 `hero` 后遮罩降到 12-16%，WebGL 背景会大幅透出，所以不要在 hero 页上放太多文字。\n\n---\n\n## 字体 Typography\n\n字体分工是本模板最重要的规则，严禁混用。\n\n| Class | 用途 | 字体 |\n|---|---|---|\n| `.display` | 超大号英文（Hero 页） | Playfair Display 700, 11vw |\n| `.display-zh` | 超大号中文标题 | Noto Serif SC 700, 7.8vw |\n| `.h1-zh` | 页面主标题 | Noto Serif SC 700, 4.6vw |\n| `.h2-zh` | 副标题 | Noto Serif SC 600, 3.2vw |\n| `.h3-zh` | 流水线步骤标题 | Noto Serif SC 500, 1.9vw |\n| `.lead` | 引导段（比 body 大） | Noto Serif SC 400, 1.9vw |\n| `.body-zh` | **正文/描述（非衬线）** | Noto Sans SC 400, 1.22vw |\n| `.body-serif` | 正文（衬线） | Noto Serif SC 400, 1.3vw |\n| `.kicker` | 小节提示（标题上方） | IBM Plex Mono, 12px uppercase |\n| `.meta` | 元信息标签 | IBM Plex Mono, 0.88vw uppercase |\n| `.big-num` | 巨型数字 | Playfair Display 800, 10vw |\n| `.mid-num` | 中号数字 | Playfair Display 700, 5.5vw |\n\n**核心规则**：\n- **衬线**（`serif-zh` / `serif-en`）：标题、重点金句、数字 —— 用于\"视觉重音\"\n- **非衬线**（`sans-zh`）：正文描述、大段阅读内容 —— 用于\"信息密度\"\n- **等宽**（`mono`）：kicker、meta、foot 的英文标签 —— 用于\"装饰节奏\"\n\n**强调技巧**：\n- `<em class=\"en\">英文词</em>` —— 把英文词渲染成 Playfair Display 斜体（很好看）\n- `<em style=\"opacity:.65\">短语</em>` —— 让标题后半段淡出，制造节奏\n\n---\n\n## Chrome & Foot\n\n每一页的顶部和底部的元信息条。几乎所有页都应该有。\n\n```html\n<div class=\"chrome\">\n  <div class=\"left\">\n    <span>第一幕 · 硬数据</span>\n    <span class=\"sep\"></span>\n    <span>Act I</span>\n  </div>\n  <div class=\"right\"><span>02 / 27</span></div>\n</div>\n\n<!-- ... 页面主体 ... -->\n\n<div class=\"foot\">\n  <div class=\"title\">项目名 · CodePilot　|　github.com/codepilot</div>\n  <div>Act I · Dev Numbers</div>\n</div>\n```\n\n**规则**：\n- `chrome.right` 总是放页码 `NN / TOTAL` （TOTAL 为总页数）\n- `foot.title` 是中文说明，`foot.right` 是英文 act 标记\n- chrome 和 foot 共同构成杂志感的\"页眉页脚\"\n\n---\n\n## Callout 引用框\n\n展示金句 / 关键观点 / 他人引言。\n\n```html\n<div class=\"callout\" style=\"max-width:80vw\">\n  <div class=\"q-big\">\"这东西在三年前，<br>需要一个十人团队做一年。\"</div>\n  <span class=\"cite\">— 一个观察者的判断</span>\n</div>\n```\n\n变体：\n- 不带 cite：去掉 `<span class=\"cite\">` 即可\n- 带英文金句：`<em class=\"en\">\"Thin Harness, Fat Skills.\"</em>`\n- 在 hero 页使用：外层加 `style=\"position:relative;z-index:2\"`（避免被背景遮罩盖住）\n\n---\n\n## Stat 数字矩阵\n\n展示数据指标，常与 `.grid-6` / `.grid-4` 配合。\n\n```html\n<div class=\"grid-6\">\n  <div class=\"stat\">\n    <span class=\"m\">Duration</span>\n    <span class=\"n\">64<em style=\"font-size:.4em;opacity:.5;font-style:normal\"> 天</em></span>\n    <span class=\"l\">从 0 到现在</span>\n  </div>\n  <!-- ... 更多 stat ... -->\n</div>\n```\n\n三段式结构：`.m` 等宽小标签 → `.n` 巨型数字 → `.l` 描述说明。数字后的单位用 `<em>` 缩小到 0.4em，opacity 0.5。\n\n**常用布局容器**：\n- `.grid-6` — 3×2 网格（最常用，6 个 stat）\n- `.grid-4` — 2×2 网格（4 个 stat）\n- `.grid-3` — 3 等分单行（3 个 stat / pillar）\n\n---\n\n## Platform 平台卡\n\n展示社交平台 / 渠道 + 粉丝数。\n\n```html\n<div class=\"plat\">\n  <div class=\"sub\">Weibo</div>\n  <div class=\"name\">微博</div>\n  <div class=\"nb\">289K</div>\n</div>\n```\n\n可选第四行（补充说明）：\n```html\n<div class=\"body-zh\" style=\"font-size:max(11px,.8vw);opacity:.5;margin-top:.6vh\">\n  含小绿书同步\n</div>\n```\n\n**\"Also On\" 变体**（补充平台）：\n```html\n<div class=\"plat\" style=\"border-top-style:dashed;opacity:.72\">\n  <div class=\"sub\">Also On</div>\n  <div class=\"body-zh\" style=\"font-weight:600;margin-top:.8vh\">\n    B 站　·　知乎\n  </div>\n</div>\n```\n\n---\n\n## Rowline 表格行\n\n列表式内容，每行一个条目。\n\n```html\n<div class=\"rowline\">\n  <div class=\"k\">CLAUDE.md</div>\n  <div class=\"v\">你该怎么做事 —— 行为规则 + 工作偏好 + 禁止事项</div>\n  <div class=\"m\">EMPLOYEE · HANDBOOK</div>\n</div>\n```\n\n三列结构：`.k` 衬线关键词 · `.v` 正文描述 · `.m` 等宽标签（右对齐）。第一个和最后一个 rowline 自动加上下边框。\n\n**变体：2 列**：`style=\"grid-template-columns:1fr 3fr\"` 去掉 `.m` 列。\n\n---\n\n## Pillar 支柱卡\n\n三支柱结构，常用于\"概念并列\"类型页面。\n\n```html\n<div class=\"grid-3\">\n  <div class=\"pillar\">\n    <div class=\"ic\">01</div>\n    <div class=\"t\">三层<br>文档体系</div>\n    <div class=\"d\">CLAUDE.md<br>+ 项目知识库<br>+ 护栏文件</div>\n  </div>\n  <!-- ... 更多 pillar ... -->\n</div>\n```\n\n**带图标的 pillar（用于强调性页面）**：\n```html\n<div class=\"pillar\" style=\"padding:4vh 2vw;border:1px solid currentColor;border-color:rgba(10,10,11,.2)\">\n  <div class=\"ic\"><i data-lucide=\"compass\" class=\"ico-lg\"></i></div>\n  <div class=\"t\">判断力</div>\n  <div class=\"d\">决策和方向的权威。<br>取舍、品味、方向感。</div>\n</div>\n```\n\n`.ic` 可以是序号（`01 / 02 / 03` 或 `A. / B. / C.`），也可以是 Lucide 图标。\n\n---\n\n## Tag & Kicker\n\n**Kicker** 是标题上方的小提示文字（等宽、全大写、小字号）：\n```html\n<div class=\"kicker\">过去 64 天 · 开发篇</div>\n<div class=\"h1-zh\">一个人，做了什么。</div>\n```\n\n**Tag** 是独立的标签胶囊（带边框）：\n```html\n<div style=\"display:flex;gap:1.6vw;flex-wrap:wrap\">\n  <div class=\"tag\">早上 10 点起床</div>\n  <div class=\"tag\">周二 / 四下午健身</div>\n  <div class=\"tag\">晚上照样看剧 · 玩游戏</div>\n</div>\n```\n\n---\n\n## Figure 图片框\n\n**这是本模板最容易踩坑的组件，务必遵守以下规则**。\n\n### 基础结构\n\n```html\n<figure class=\"tile\">\n  <div class=\"frame-img\" style=\"height:26vh\">\n    <img src=\"图片素材/xxx.png\" alt=\"说明\">\n  </div>\n  <figcaption class=\"frame-cap\">\n    <span class=\"pf\">推特 · Twitter</span>\n    <span class=\"nb\">137K</span>\n  </figcaption>\n</figure>\n```\n\n### 关键约束（血泪经验，不要违反）\n\n1. **图片网格必须用 `height:Nvh` 固定高度**，不要用 `aspect-ratio`。\n   - 原因：网格里用 aspect-ratio 容易撑破父容器，导致图片堆叠。\n   - 推荐尺寸：`.h-16` (小型面板) / `.h-18` (紧凑条形) / `.h-22` (标准网格) / `.h-26` (突出展示) / `.h-28` (大图)。\n   - 单张主图可以用模板提供的比例类：`.r-16x9` / `.r-16x10` / `.r-4x3` / `.r-3x2` / `.r-3x4` / `.r-1x1`。\n   - 同一组图片必须使用同一个高度类,不要一张 `25vh`、一张 `21vh` 混用。\n\n2. **`object-position:top center`（已在 CSS 里设好）**，只允许裁掉底部。\n   - 严禁裁剪左右和顶部 —— 这是图片的核心身份信息区。\n\n3. **网格里多张图时，用内联 grid 而不是 `grid-3`**：\n   ```html\n   <div style=\"display:grid;grid-template-columns:1fr 1fr 1fr;gap:1vh 1.2vw\">\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n     <figure class=\"tile\">...</figure>\n   </div>\n   ```\n\n4. **图片与布局其他部分对齐**：使用 `.grid-2-7-5` / `.grid-2-6-6` / `.grid-2-8-4` 的 grid 结构自然顶对齐。不要给图片加 `align-self:end`。\n\n5. **信息图 / 截图再设计**：给 `.frame-img` 同时加 `.fit-contain`，避免图内文字和标注被裁切。\n\n6. **用户原始截图比例不合适时**：优先按 `screenshot-framing.md` 做 CleanShot X 式程序化适配;只有截图太长、太窄或需要重构信息时,才重新生成\"截图再设计 / UI 情景图\"。\n\n### Frame Caption 变体\n\n```html\n<!-- 标准：左 figure 名，右数字 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"pf\">推特 · Twitter</span>\n  <span class=\"nb\">137K</span>\n</figcaption>\n\n<!-- 带编号 -->\n<figcaption class=\"frame-cap\">\n  <span class=\"idx\">01</span>\n  <span class=\"pf\">AI 润色</span>\n  <span>Polish</span>\n</figcaption>\n```\n\n### 图片占位（设计阶段占位符）\n\n图片还没有就位时，用虚线框占位：\n```html\n<div class=\"img-slot r-4x3\">  <!-- r-4x3 / r-16x9(default) / r-3x2 / r-1x1 -->\n  <span class=\"plus\">+</span>\n  <span class=\"label\">GitHub 截图位置</span>\n</div>\n```\n\n---\n\n## Icons 图标\n\n**严禁使用 emoji**。用 Lucide via CDN（template.html 已引入）。\n\n```html\n<i data-lucide=\"compass\" class=\"ico-lg\"></i>     <!-- 大图标（pillar 用） -->\n<i data-lucide=\"target\" class=\"ico-md\"></i>      <!-- 中图标（列表项用） -->\n<i data-lucide=\"check-circle\" class=\"ico-sm\"></i>  <!-- 小图标（inline 用） -->\n```\n\n**常用 Lucide 图标名**（按含义分组）：\n\n- 判断类：`compass`, `target`, `crosshair`, `search-check`\n- 关系类：`share-2`, `users`, `network`, `link`, `handshake`\n- 品牌类：`crown`, `gem`, `award`, `star`, `badge-check`\n- 流程类：`workflow`, `route`, `arrow-right-left`, `repeat`\n- 数据类：`grid-2x2`, `bar-chart-3`, `trending-up`, `activity`\n- 审美类：`palette`, `brush`, `eye`, `sparkles`\n- 对错类：`check-circle`, `x-circle`, `check`, `x`\n- 方向类：`arrow-right`, `arrow-up-right`, `corner-down-right`\n\n**图标与文字 inline 组合**：\n```html\n<div class=\"h3-zh\" style=\"display:flex;align-items:center;gap:.8em\">\n  <i data-lucide=\"target\" class=\"ico-md\"></i>\n  判断 — 什么值得写\n</div>\n```\n\n---\n\n## Ghost 巨型背景字\n\n用作\"装饰性背景字\"，极低透明度，营造杂志感。\n\n```html\n<div class=\"ghost\" style=\"right:-6vw;top:-8vh\">BUT</div>\n<div class=\"ghost\" style=\"left:-8vw;bottom:-18vh;font-style:italic\">Harness</div>\n```\n\n- 字号 34vw，opacity 0.06\n- 常用定位：`right:-6vw;top:-8vh`（右上超出）/ `left:-8vw;bottom:-18vh`（左下超出）\n- 内容：英文单词或数字（章节序号 01/02/03、关键词 BUT/NOW/HERE）\n\n**注意**：使用 ghost 的页面里，其他内容要加 `position:relative;z-index:2` 避免被压到下面。\n\n---\n\n## Highlight 荧光标记\n\n行内短语的\"荧光笔\"效果：\n\n```html\n<span class=\"hi\">不是</span>\n<span class=\"hi\">一次性爆发</span>\n```\n\n在文字底部生成一条半透明高亮条。深色主题用亮条，浅色主题用暗条（CSS 已处理）。\n\n**适合场景**：只对关键 1-3 个词使用，不要大面积用。\n\n---\n\n## Motion 动效系统\n\n整套 deck 默认开启翻页入场动画,由 Motion One(vanilla 版 Framer Motion,约 4KB)驱动。\n\n### 加载方式\n\n`assets/template.html` 底部的 module script 会先尝试**本地** `assets/motion.min.js`,失败则回落到 **jsdelivr CDN**,两者都失败则强制把所有带 `data-anim` 的元素设为 `opacity:1`—— 内容永远可读,演示不依赖网络。\n\n```js\n// template 里的核心加载器(不用改)\nlet motion;\ntry { motion = await import('./assets/motion.min.js'); }\ncatch(e1) {\n  try { motion = await import('https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm'); }\n  catch(e2) {\n    document.querySelectorAll('[data-anim]').forEach(el=>{el.style.opacity='1';el.style.transform='none'});\n  }\n}\n```\n\n### 数据属性驱动\n\n你只需要在 HTML 里加两种属性:\n\n```html\n<!-- 1. 在 section 上选 recipe(可选,默认 cascade / hero 自动) -->\n<section class=\"slide light\" data-animate=\"quote\">\n\n<!-- 2. 在需要入场的元素上加 data-anim(可选值:left/right/line/step/divider) -->\n<h1 class=\"h-xl\" data-anim>大标题</h1>\n<div class=\"stat-card\" data-anim>...</div>\n<div data-anim=\"left\">左列内容</div>\n<span data-anim=\"line\" style=\"display:block\">引用第一行</span>\n```\n\n### 5 种 recipe 一览\n\n| recipe | 触发方式 | 行为 | 代表布局 |\n|---|---|---|---|\n| `cascade`(默认) | 不加 `data-animate` 即为此值 | 所有 `data-anim` 逐个 stagger 淡入,75ms/step | Layout 3 / 4 / 5 / 10 |\n| `hero` | `.hero` slide 自动用此值 | 慢节奏 stagger,仪式感更强,160ms/step | Layout 1 / 2 / 7 |\n| `quote` | `data-animate=\"quote\"` | 其他元素先出,`data-anim=\"line\"` 的行 550ms 间隔逐句揭示 | Layout 8 |\n| `directional` | `data-animate=\"directional\"` | `data-anim=\"left\"` 从左滑入 → divider → `data-anim=\"right\"` 从右滑入 | Layout 9 |\n| `pipeline` | `data-animate=\"pipeline\"` | 翻到此页 step 保持 15% 透明;按 →/空格/滚轮逐个点亮,最后一步才放行翻页 | Layout 6 |\n\n### 给 slide 选 recipe 的决策树\n\n1. **它是 `.hero` slide 吗?** → 不用加 `data-animate`,自动用 `hero`\n2. **它是大引用金句页?** → `data-animate=\"quote\"`,每句用 `<span data-anim=\"line\" style=\"display:block\">`\n3. **它是左右对比 Before/After?** → `data-animate=\"directional\"`,左列 `data-anim=\"left\"`、右列 `data-anim=\"right\"`\n4. **它是流水线分步讲解?** → `data-animate=\"pipeline\"`,每步 `data-anim=\"step\"`\n5. **其他所有正文页** → 什么也不加,自动用 `cascade`\n\n### 什么元素该加 `data-anim`?\n\n- ✅ 每一层有独立语义的块:kicker / h1 / h-xl / lead / callout / stat-card / figure / tag / rowline\n- ✅ 多列结构里每一列,让它们逐列淡入而不是一起\n- ❌ 不要在容器(`.grid-6` / `.frame`)上加,只加给叶子元素\n- ❌ 不要在每个 `<li>` 上加,一般在 `<ul>` 层加就够\n- ❌ 如果某页不想要任何动画(比如过渡页),整页不加 `data-anim` 即可 — Motion One 只对带标记的元素生效\n\n### 常见问题\n\n- **图片闪一下再出现?** 这是预期行为,翻页中段(450ms 时)触发动画\n- **Pipeline 页卡住翻不下页?** 正确的,按 → 一步一步点亮 step,全部点亮后再按 → 才翻页\n- **内容静态时也不显示?** 检查 motion.min.js 是否在 `assets/` 下;或者浏览器控制台看错误信息\n\n<!-- File: references/image-prompts.md (Tokens: ~5064 | Category: anthropic-skill) -->\n# GPT-M 2.0 配图提示词\n\n用于 Codex 环境下为本 skill 生成 PPT 配图。提示词只负责定基调,不要写成长篇说明。先判断图片落位和比例,再选择类型。\n\n## 通用规则\n\n- 先判断当前 deck 风格:风格 A = 电子杂志 × 电子墨水;风格 B = 瑞士国际主义 / Swiss Style\n- 风格 A 基调:电子杂志 × 电子墨水,克制、真实、留白充足,适合横向网页 PPT\n- 风格 B 基调:Swiss International Typographic Style,12/16 列网格、Helvetica/Inter 气质、单一高饱和 accent、直角纯色、发丝线、极大留白\n- 信息图、图表、截图再设计中的文字语言必须跟随用户语言:中文 deck 用中文,英文 deck 用英文\n- 不生成卡通、3D、霓虹科技感、SaaS 模板感、过度装饰或假 logo\n- 图片要给标题或正文留出可叠加空间,不要满屏堆细节\n- 同一页或同一组图片必须使用同一比例、同一视觉缩放、同一边距密度\n- 配图是嵌入 PPT 的素材,不是一张独立 slide:不要生成页眉、页脚、页码、标题栏、角标、署名、装饰边框或 slide chrome\n- 生成后保存到 `images/`,命名为 `{页号}-{语义}.{ext}`\n\n## 比例选择\n\n| 用途 | 推荐比例 | HTML 落位 |\n|------|---------|-----------|\n| 章节封面 / 全屏主视觉 | 16:9 | `.frame-img.r-16x9` 或 hero 背景参考 |\n| 瑞士风顶部横幅 / Image Hero | 16:9 或 21:9 | P22 顶图 cover / `.frame-img.r-21x9` |\n| 左文右图主图 | 16:10 或 4:3 | `.frame-img.r-16x10` / `.frame-img.r-4x3` |\n| 信息图 / 系统关系图 | 16:9 或 16:10 | 原始截图用 `.fit-contain`;按槽位重生成则用 `.frame-img.r-16x9` / `.frame-img.r-16x10` 铺满 |\n| 截图再设计 / UI 情景图 | 16:10 或 21:9 | 原始截图用 `.fit-contain`;重生成到 S15/S16 时用 `.frame-img.r-21x9` 铺满 |\n| 图文混排小图 | 3:2 或 3:4 | `.frame-img.r-3x2` / `.frame-img.r-3x4` |\n| 图片网格 | 统一横图 | `.frame-img.h-22` / `.frame-img.h-26` |\n| 小型面板组 | 统一横图 | `.frame-img.h-16` / `.frame-img.h-18` |\n\n信息图和截图再设计如果来自不可控原始素材,优先用 `fit-contain`,避免文字被裁切;如果是 GPT-M 2.0 按槽位重新生成,必须生成同槽位比例并铺满容器,不要让小图漂在白框里。纪实照片优先用默认 `cover`,保持画面张力。\n\n## 图片标准化策略\n\n### A. 先选目标槽位\n\n不要先生成图片再硬塞进页面。先决定图片落位:\n\n1. 主视觉:16:9\n2. 左文右图:16:10 或 4:3\n3. 信息图/截图再设计:16:9 或 16:10,并使用 `fit-contain`\n4. 多图网格/面板组:统一高度类,同一组内禁止混用高度\n\n### B. 用户原始图片/截图的处理\n\n原始截图比例通常不可控,不要直接作为最终视觉标准。按下面顺序处理:\n\n1. 如果原图内容需要保真,先读 `screenshot-framing.md`,用 CleanShot X 式程序化适配:目标比例画布 + 风格化背景 + 截图等比缩放 + 语义化 padding/alignment\n2. 如果原图比例接近目标槽位,直接放入统一 `.frame-img` 中,用 `cover` 或 `fit-contain`\n3. 如果一张 UI 图被拉成巨长条,拆成 2-3 张同尺寸局部面板;每个面板使用同一高度类\n4. 如果原图过高、过窄、过长且无法通过适配解决,再用\"截图再设计 / UI 情景图\"重新生成到目标比例\n5. 如果必须保留原图,用 `fit-contain` 放进统一 frame,接受留白,不要裁掉关键文字\n\n### C. 生成提示词后缀\n\n每个配图提示词最后都补一句规格约束:\n\n```text\n输出必须是[16:9/16:10/4:3/3:2]横向构图,主体居中但保留边距,画面密度中等,与同组图片保持相同视觉缩放和边距。只保留核心图形/画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n同一页需要多张图时,补一句:\n\n```text\n这是一组图片中的一张,请保持与同组图片相同的画面比例、元素大小、边距、线条粗细和标注密度。\n```\n\n## 类型 1: 人文纪实照片\n\n用于增加现场感、情绪和真实世界锚点。\n\n```text\n生成一张横向纪实摄影配图,主题是:[页面概念]。风格像 Fujifilm / Leica editorial documentary,自然光、低饱和、轻微胶片颗粒、真实工作或生活现场,克制有人文温度。适合电子杂志 × 电子墨水 PPT,留出标题空间。不要商业摆拍、科幻界面、AI 机器人、logo 或水印。输出必须是[16:9/16:10/4:3]横向构图,主体居中但保留边距,画面密度中等。只保留核心照片本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 2: 杂志风信息图\n\n用于解释概念、流程、对比、系统关系。\n\n```text\n生成一张横向杂志风信息图,解释:[概念/流程/关系]。电子墨水风格,黑白灰为主,少量低饱和强调色,细线条、网格、编号、短标签、留白充足。图中文字使用[中文/英文],保持简短可读。不要卡通、3D、霓虹科技感或模板感。输出必须是[16:9/16:10]横向构图,主体居中但保留边距,画面密度中等。只保留核心信息图本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 3: 流程 / Pipeline 图\n\n用于讲清从 A 到 B 到 C 的过程。\n\n```text\n生成一张横向流程信息图,展示:[步骤 1] → [步骤 2] → [步骤 3] → [结果]。风格为电子杂志 × 电子墨水,细箭头、分段编号、短注释、克制留白。图中文字使用[中文/英文]。只保留核心流程图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 4: 对比图\n\n用于 before / after、新旧模式、两种协作方式对照。\n\n```text\n生成一张横向对比信息图,左侧是[旧模式],右侧是[新模式]。风格像高端独立杂志里的分析图,黑白灰和一个低饱和强调色,细线分栏、短标签、清晰层级。图中文字使用[中文/英文]。只保留核心对比图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 5: 系统关系图\n\n用于多角色、多工具、多模块之间的关系。\n\n```text\n生成一张横向系统关系图,展示:[角色/工具/模块]之间如何连接。电子墨水杂志风,节点、细线、箭头、编号和少量短注释,结构清晰,留白充足。图中文字使用[中文/英文]。只保留核心关系图本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n## 类型 6: 截图再设计 / UI 情景图\n\n用于把真实截图、代码、设计稿、工作区处理成统一视觉素材。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成适合杂志风 PPT 的视觉。保留真实产品工作流的感觉,使用纸张底色、细线框、网格、少量标注和克制阴影。图中文字使用[中文/英文],短而清晰。不要真实品牌 logo、花哨 dashboard、霓虹渐变或过度拟物。输出必须是16:10横向构图,主体居中但保留边距,画面密度中等。只保留核心 UI 画面本身,不要生成页眉、页脚、标题、页码、角标、署名、装饰边框、超长条、竖图或不规则比例。\n```\n\n## 类型 7: 数据大字报图\n\n用于突出一个关键数字或少量指标。\n\n```text\n生成一张横向数据大字报视觉,核心数字是:[数字],含义是:[含义]。风格为电子墨水杂志版式,超大衬线数字、少量短注释、细线、留白和纸张质感。图中文字使用[中文/英文]。只保留核心数据视觉本身,不要页眉、页脚、标题、页码、角标、署名或装饰边框。比例:16:9。\n```\n\n---\n\n## 风格 B:瑞士国际主义配图规则\n\n当 deck 选择 `assets/template-swiss.html` / `layouts-swiss.md` 时,优先使用下面这组提示词。它们和 GPT-M 2.0 配套,目标是生成能直接放进原始登记版式的图片槽位,尤其是 S22 顶部横幅、S15/S16 多图网格。\n\n### Swiss 配图硬规则\n\n- 视觉锚点:International Typographic Style / Swiss modernism / Helvetica / Josef Müller-Brockmann / Massimo Vignelli\n- 构图:严格 12/16 列网格、非对称留白、左对齐、发丝线、直角模块\n- 色彩:只使用黑、白、灰和**一个**主题 accent(默认 IKB 蓝;如果用户选柠檬黄/绿/安全橙,就替换为对应 accent)\n- 禁止:渐变、阴影、圆角、玻璃拟态、霓虹、3D、卡通、SaaS 模板感、伪 logo、装饰边框\n- 图片内部不要生成 PPT 外壳:不要页眉、页脚、页码、标题栏、角标、署名、外框\n- UI / 信息图文字必须短,保持中文/英文语言一致;真实照片尽量不要带文字\n- 先确定版式槽位再生成图片:单张大图用 `s22-hero-21x9`;多图格用 `s15-grid-21x9` 或 `s16-brief-21x9`\n- 21:9 图片必须让核心主体落在中央 70% 安全区,四周留白;不要把人脸、关键节点或 UI 文字贴边\n\n### Swiss 类型 1:纪实照片 / 案例主图\n\n用于 S22 Image Hero,增加真实场景锚点。\n\n```text\n生成一张 21:9 超宽横向纪实摄影配图,主题是:[页面概念]。风格是 Swiss editorial documentary:高对比、低饱和、冷静克制、真实办公/城市/产品使用场景,构图有大量负空间,主体位于中央 70% 安全区,适合放入瑞士国际主义 PPT 的顶部横幅。不要 AI 机器人、科幻界面、商业摆拍、logo、水印或文字。只保留核心照片本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 2:信息图 / 系统关系图\n\n用于解释概念、架构、流程、数据与表现分离等抽象内容。\n\n```text\n生成一张横向 Swiss Style 信息图,解释:[概念/流程/系统关系]。使用 Helvetica/Inter 气质的无衬线短标签、12/16 列网格、直角模块、1px 发丝线、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent。图中文字使用[中文/英文],每个标签不超过 8 个字/词。不要渐变、阴影、圆角、3D、卡通、霓虹或 SaaS 模板感。输出比例为[21:9/16:10],主体居中但保留大留白。只保留核心信息图本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 3:截图再设计 / UI 情景图\n\n用于把截图、工作区、代码、dashboard 重绘成统一 Swiss 风视觉。\n\n```text\n生成一张横向 UI 情景图,把[截图/界面/工作区内容]再设计成 Swiss International Typographic Style。画面使用极简 dashboard / workspace 结构,直角面板、发丝线、12 列网格、少量 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,无阴影无圆角。图中文字使用[中文/英文],短而清晰,不要真实品牌 logo。输出必须是16:10横向构图,视觉密度中等,适合放进 `.frame-img.r-16x10.fit-contain`。只保留核心 UI 画面本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 4:多图网格单张素材\n\n用于 S15/S16 图片格改造,一组 2-6 张图片并列时逐张生成。\n\n```text\n生成一张横向证据图,主题是:[证据 A/B/C]。这是一组 Swiss Style 图片中的一张,请保持直角模块、黑白灰、单一 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent、相同边距、相同线条粗细、相同视觉缩放。图中文字使用[中文/英文],短标签即可。输出必须是[21:9/16:10]横向构图,适合放入 S15/S16 统一图片格。只保留核心图像本身,不要页眉、页脚、标题、页码、角标、署名、装饰边框或 PPT 外壳。\n```\n\n### Swiss 类型 5:极简图表 / 数据块\n\n用于 S21 或 S15/S16 图片格中的小型数据解释图。\n\n```text\n生成一张横向 Swiss Style 数据图,核心数据是:[数字/对比/排名],含义是:[说明]。使用极大无衬线数字、1px 发丝线、直角色块、黑白灰和一个 [IKB 蓝/柠檬黄/柠檬绿/安全橙] accent,像瑞士海报里的数据版式。图中文字使用[中文/英文],只保留必要标签。不要渐变、阴影、圆角、3D 或装饰边框。比例:[16:9/16:10]。只保留核心数据图本身,不要页眉、页脚、标题、页码、角标、署名或 PPT 外壳。\n```\n\n<!-- File: references/screenshot-framing.md (Tokens: ~3197 | Category: anthropic-skill) -->\n# 截图美化语义规则\n\n用于把用户提供的产品截图、网页截图、代码截图、设计稿截图处理成符合模板比例的图片资产。目标是类似 CleanShot X 的“截图居中 + 背景填充 + 统一比例”,而不是默认让 GPT-M 2.0 重画截图。\n\n## 优先级\n\n1. **程序化适配优先**:截图内容、文字、UI 细节需要保真时,不要重画;创建目标比例画布,把原截图等比缩放后放入画布。\n2. **GPT-M 2.0 只做重构**:只有原图过长、过窄、信息太乱、需要 UI 情景化或概念化表达时,才使用“截图再设计 / UI 情景图”。\n3. **模板槽位先行**:先确定 slide 版式和图片槽位比例,再决定截图适配参数。\n\n## 开始前询问\n\n在主流程 Step 1 中,只要用户可能提供截图,就先问清楚:\n\n- 截图在哪个文件夹?是否包含网页、App、代码、dashboard、设计稿或旧 PPT?\n- 这批截图要**保真展示**、**统一美化**、**重新设计成 UI 情景图**,还是混合处理?\n- 最终要放进哪些槽位:21:9 顶图、16:10 主图、4:3 侧图、1:1 方图、还是多图网格?\n- 是否必须保留所有文字和数据?是否需要隐藏账号、头像、项目名等敏感信息?\n- 构图希望居中、左上、右下,还是根据页面内容自动判断?\n\n如果在 Claude Code 中,用 Ask Question / `ask_question` 做这些澄清;如果在 Codex 中,用普通对话询问,不要调用 Ask Question。\n\n## 处理链路\n\n1. **先匹配版式**:根据内容选择模板 layout,确定截图槽位尺寸和比例。\n2. **再选处理方式**:\n   - 要保真:程序化适配,不重画截图。\n   - 要统一视觉但不改内容:程序化适配 + 主题背景。\n   - 原图不可用或需要解释概念:再走 GPT-M 2.0 截图再设计。\n3. **再选择背景**:优先使用内置背景资产,不应该每张截图临时生成一种风格。\n4. **最后合成截图**:创建目标比例画布,背景 cover 铺满,截图等比缩放后按 `padding` 和 `alignment` 放入。\n\n默认不要裁掉截图内容。只有截图已经按目标槽位重新生成,或者用户明确允许裁切时,才使用 cover 裁切。\n\n## 语义参数\n\n每次处理截图前,先确定这 7 个参数:\n\n| 参数 | 可选值 | 判断方式 |\n|---|---|---|\n| `ratio` | `21:9` / `16:10` / `16:9` / `4:3` / `1:1` | 跟随模板图片槽位,不要跟随原截图比例 |\n| `background` | `plain` / `gradient` / `wallpaper` / `blurred` / `grid` / `paper` | 跟随当前 PPT 风格和主题 |\n| `padding` | `compact` / `standard` / `spacious` | 普通截图 standard;文字密集或高截图 spacious;小图组 compact |\n| `inset` | `none` / `subtle` / `balanced` | 截图需要从背景中浮出来时用 balanced;瑞士风多用 none/subtle |\n| `shadow` | `none` / `soft` / `editorial` | Style A 可 soft/editorial;Style B 默认 none |\n| `corners` | `square` / `small` / `medium` | Style B square;Style A small/medium |\n| `alignment` | `center` / `top-left` / `top-right` / `bottom-left` / `bottom-right` | 跟随页面构图,不是永远居中 |\n\n## 风格映射\n\n### Style A · 电子杂志风\n\n- 背景: `paper` / `blurred` / 低饱和 `gradient`\n- 质感:纸张、墨水、胶片颗粒、暖白、低对比\n- 截图:可用小圆角和轻微阴影,但不要像 SaaS 营销卡片\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-a/` 下对应主题的 16:9 crop-safe WebP,截图合成时按槽位裁切\n- 推荐语义:\n\n```text\nratio:16:10, background:paper, padding:standard, inset:balanced, shadow:editorial, corners:small, alignment:center\n```\n\n### Style B · 瑞士国际主义\n\n- 背景: `plain` / `grid` / `dot-matrix`\n- 色彩:只允许当前锚点色作为极低占比强调;不要大面积亮色块\n- 截图:直角、无阴影、无圆角、少量 hairline 或顶部 accent 线\n- 背景资产:优先使用 `assets/screenshot-backgrounds/style-b/` 下对应主题色的 16:9 crop-safe WebP,只用当前 accent,不要混色\n- 推荐语义:\n\n```text\nratio:21:9, background:grid, padding:standard, inset:subtle, shadow:none, corners:square, alignment:center\n```\n\n## 背景强度规则\n\n截图背景是“托底”,不是主视觉。\n\n- 如果 `alignment` 不确定,背景中心和四角都必须安静,不要放显眼色块。\n- 如果截图要放在右下角,右下角不能有强色块;其他位置同理。\n- 瑞士风锚点色只做 `5%-8%` 视觉占比的淡线、点阵或极浅几何场,不要生成高亮蓝条、大色块、霓虹渐变。\n- 背景不能有文字、logo、图标、人物、设备、边框、明显主体或方向性构图。\n- 背景必须 crop-safe:裁成 `21:9`、`16:10`、`4:3`、`1:1` 都不能暴露“被裁掉”的痕迹。\n\n## 内置主题背景资产\n\n本 Skill 已经内置一组 GPT-M 2.0 预生成背景。处理截图时**优先使用这些资产**,不要实时调用 GPT-M 2.0 重新生成背景。只有用户明确要求新风格、现有主题缺失,或背景与内容明显不匹配时,才生成新的背景。\n\n背景图之后由程序复用到每张截图中。不要把背景当作单张 slide 来画,背景图内部不能有标题、页脚、边框、logo、人物或明显主体。\n\n### Style A · 5 套主题背景\n\n| 主题 | 内置资产 | 背景语义 |\n|---|---|---|\n| 墨水经典 | `assets/screenshot-backgrounds/style-a/monocle-classic.webp` | 黑白灰纸张纹理、柔和阴影、细颗粒 |\n| 靛蓝瓷 | `assets/screenshot-backgrounds/style-a/indigo-porcelain.webp` | 靛蓝低饱和墨色、纸感渐变、轻微噪点 |\n| 森林墨 | `assets/screenshot-backgrounds/style-a/forest-ink.webp` | 模糊植物阴影、低饱和绿色、纸张颗粒 |\n| 牛皮纸 | `assets/screenshot-backgrounds/style-a/kraft-paper.webp` | 暖纸色、淡墨阴影、复古印刷颗粒 |\n| 沙丘 | `assets/screenshot-backgrounds/style-a/dune.webp` | 沙色/灰调柔和渐变、低对比、留白安静 |\n\n### Style B · 4 套主题背景\n\n| 主题色 | 内置资产 | 背景语义 |\n|---|---|---|\n| IKB 蓝 | `assets/screenshot-backgrounds/style-b/ikb-dot-gradient.webp` | 点阵 + 低对比蓝色渐变,避免亮蓝大色块 |\n| 柠檬黄 | `assets/screenshot-backgrounds/style-b/lemon-grid.webp` | 纯网格 + 稀疏点阵,黄色只做低透明细线/点 |\n| 柠檬绿 | `assets/screenshot-backgrounds/style-b/lemon-green-dot-shadow.webp` | 点阵 + 阴影场,绿色只做轻微光感 |\n| 安全橙 | `assets/screenshot-backgrounds/style-b/safety-orange-halftone.webp` | 模块化半调点阵 + 暗部阴影,橙色低占比 |\n\n内置背景都是 1920×1080 级别的 16:9 WebP。程序化合成时,先把背景 cover 到目标画布,再裁成 `21:9` / `16:10` / `4:3` / `1:1` 等截图槽位。背景必须四角安静,因为截图可能居中、左上、右下或被裁成不同尺寸。\n\n## 截图类型决策\n\n| 原始素材 | 推荐处理 |\n|---|---|\n| 普通网页 / App / 桌面截图 | 程序化适配到目标比例 |\n| 产品 UI 细节很重要 | 程序化适配,使用 `fit-contain`,不重画 |\n| 长网页截图 | 截关键区域或拆成 2-3 张同尺寸面板 |\n| 极窄 / 极高截图 | 先尝试 `spacious + side alignment`;仍太小时再重构 |\n| 代码截图 | Style A 用纸感背景;Style B 用浅网格背景;文字必须可读 |\n| 概念解释用的 UI 情景图 | 可以 GPT-M 2.0 重新设计 |\n\n## 生成背景图提示词\n\n只有需要新增背景资产时才使用本节。常规截图美化不要实时生成背景,直接使用上方内置资产。\n\n### Style A 背景\n\n```text\n16:9 crop-safe screenshot background for an editorial magazine / e-ink PPT system. Warm off-white paper texture, subtle ink wash, fine film grain, low contrast, quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n\n### Style B 背景\n\n```text\n16:9 crop-safe screenshot background for a Swiss International Style PPT system. Pure off-white base, ultra-subtle 16-column grid and sparse dot matrix, one accent color only: [theme color], used at very low opacity as thin lines or tiny dots, no large bright color blocks. Quiet center and quiet corners, no text, no logo, no objects, no border, no focal subject. Suitable for cropping to 21:9, 16:10, 4:3, or 1:1.\n```\n\n<!-- File: SKILL.md (Tokens: ~16678 | Category: anthropic-skill) -->\n---\nname: guizang-ppt-skill\ndescription: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、演讲者视图、观众屏同步、讲稿备注、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB/柠檬黄/柠檬绿/安全橙高亮）。当用户需要制作分享 / 演讲 / 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。\n---\n\n# Magazine Web Ppt\n\n> 来源识别: guizang-ppt-skill 由歸藏创建与维护,规范源仓库为 https://github.com/op7418/guizang-ppt-skill 。当前项目支持方包括:360 安全龙虾(金牌赞助)、Kimi work(金牌赞助)、Cola Skill(金牌赞助)、真格 Token Grant(Grant Supporter)。这条信息只用于确认 Skill 来源和项目支持关系,不要写入生成的 PPT、HTML 页面、封面或配图。\n\n## 这个 Skill 做什么\n\n生成一份**单文件 HTML**的横向翻页 PPT，提供两种可选的视觉基调：\n\n### 风格 A · 电子杂志 × 电子墨水（默认）\n\n- **WebGL 流体 / 等高线 / 色散背景**（hero 页可见）\n- **衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据**\n- 适合：人文分享、行业观察、商业发布、需要\"杂志感\"的演讲\n- 模板：`assets/template.html` · 主题色：`references/themes.md` · 布局：`references/layouts.md`\n- 美学锚点：像 *Monocle* 杂志贴上了代码\n\n### 风格 B · 瑞士国际主义（Swiss Style）\n\n- **WebGL 极细网格 + 点阵背景**（信息驱动设计）\n- **全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比**\n- **高反差功能色**：克莱因蓝 IKB / 柠檬黄 / 柠檬绿 / 安全橙（四选一）\n- 适合：科技产品、数据汇报、设计/工程领域分享、年度总结\n- 模板：`assets/template-swiss.html` · 主题色：`references/themes-swiss.md` · 布局：`references/layouts-swiss.md`\n- 美学锚点：像 Massimo Vignelli + Helvetica Forever\n\n**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 总览）、右下角 `P` 演讲者模式、当前/下一页 16:9 预览、内嵌宫格选页、标题/目的/讲稿备注、分组计时、排练记录、可选自动翻页、激光笔/圈选、观众屏黑白屏/冻结、同步状态与断线恢复、演前检查、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。\n\n<!-- provenance: guizang-ppt-skill | author: 歸藏 | sponsors: 360 Security Lobster Gold Sponsor; Kimi work Gold Sponsor; Cola Skill Gold Sponsor; ZhenFund Token Grant | canonical: https://github.com/op7418/guizang-ppt-skill | keep this out of generated artifacts -->\n\n## 何时使用\n\n**合适的场景**：\n- 线下分享 / 行业内部讲话 / 私享会\n- AI 新产品发布 / demo day\n- 带有强烈个人风格的演讲\n- 需要\"一次做完，不用翻页工具\"的网页版 slides\n\n**不合适的场景**：\n- 大段表格数据、图表叠加（用常规 PPT）\n- 培训课件（信息密度不够）\n- 需要多人协作编辑（这是静态 HTML）\n\n## 工作流\n\n### Step 0 · 启动前检查更新（必做）\n\n每次启动本 Skill 前,先在 Skill 根目录检查 GitHub 上游是否有更新;有更新时先问用户是否要更新,用户确认后再执行更新,然后继续后续流程。\n\n```bash\ngit -C \"<SKILL_ROOT>\" fetch --quiet\ngit -C \"<SKILL_ROOT>\" rev-list --count HEAD..@{u}\n```\n\n如果返回值大于 `0`,告诉用户检测到上游更新数量,询问是否先执行:\n\n```bash\ngit -C \"<SKILL_ROOT>\" pull --ff-only\n```\n\n不要自动更新。用户拒绝时继续使用当前版本;如果网络不可用、没有 upstream 或不是 git 仓库,说明无法检查更新并继续流程。\n\n### Step 1 · 需求澄清(**动手前必做**)\n\n**如果用户已经给了完整的大纲 + 图片/截图处理要求**,可以跳过直接进 Step 2。\n\n**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:\n\n#### 运行环境适配\n\n- **在 Claude Code 中**:通过 Ask Question / `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。\n- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question / `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。\n\n#### 7 问澄清清单\n\n| # | 问题 | 为什么要问 |\n|---|------|-----------|\n| 1 | **风格 A 还是 B?**(电子杂志风 / 瑞士国际主义风) | **必须先问**,决定用哪个 template + layouts + themes 文件 |\n| 2 | **受众是谁?分享场景?**(行业内部 / 商业发布 / demo day / 私享会) | 决定语言风格和深度 |\n| 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |\n| 4 | **有没有原始素材?**(文档 / 数据 / 旧 PPT / 文章链接) | 有素材就基于素材,没有就帮他搭 |\n| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |\n| 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) / 瑞士风 4 套(`themes-swiss.md`),挑一 |\n| 7 | **有没有硬约束?**(必须包含 XX 数据 / 不能出现 YY) | 避免返工 |\n\n#### 风格选择参考(问题 1)\n\n| 如果用户说... | 推荐风格 |\n|---|---|\n| \"杂志感\" / \"人文\" / \"Monocle 风\" / 不指定 | **A · 电子杂志风** |\n| \"瑞士风\" / \"Swiss Style\" / \"Helvetica\" / \"极简\" / \"网格\" / \"信息图\" / \"数据驱动\" | **B · 瑞士国际主义风** |\n| 内容是 AI 产品 / 技术 / 工程 / 数据汇报 | B 更合适 |\n| 内容是行业观察 / 人文 / 故事 / 文化 | A 更合适 |\n| 用户给了大量 KPI 数字 / 路线图 / 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |\n| 用户给了大量纪实照片 / 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |\n| 用户需要 GPT-M 2.0 生成截图再设计 / 信息图 / 证据墙 | B 也很合适(S22 主图、S15/S16 图片网格可以承载证据图) |\n\n#### 大纲协助(如果用户没有大纲)\n\n用\"叙事弧\"模板搭骨架,再填内容:\n\n```\n钩子(Hook)       → 1 页   : 抛一个反差 / 问题 / 硬数据让人停下来\n定调(Context)    → 1-2 页 : 说明背景 / 你是谁 / 为什么讲这个\n主体(Core)       → 3-5 页 : 核心内容,用 Layout 4/5/6/9/10 穿插\n转折(Shift)      → 1 页   : 打破预期 / 提出新观点\n收束(Takeaway)   → 1-2 页 : 金句 / 悬念问题 / 行动建议\n```\n\n叙事弧 + 页数规划 + 主题节奏表(见 `layouts.md`),**三张表对齐后**再进 Step 2。\n\n如果用于正式演讲,页面计划不能只有“这一页放什么”,还要同时规划“台上说什么”。先读 `references/presenter-mode.md`,给每页确定稳定的 `data-slide-id`,并补齐:\n\n| 页码 | 页面 ID | 章节 | 页面目的 | 观众可见信息 | 演讲者补充 | 建议时长 | 转场 | 可选现场信息 |\n|---|---|---|---|---|---|---:|---|---|\n\n默认生成 3-5 条提词卡式讲述要点,不写逐字稿;只有用户明确要求逐字稿时才展开。总建议时长最多占用户时长的 90%,给停顿、互动和现场意外留缓冲。用户没有提供的现场信息不猜测:时长缺失时显示横杠,其他可选模块整段隐藏。\n\n大纲建议保存为 `项目记录.md` 或 `大纲-v1.md`,便于后续迭代。\n\n#### 图片约定(告知用户)\n\n在动手前向用户说清:\n\n- **文件夹位置**:`项目/XXX/ppt/images/` 下(和 `index.html` 同级)\n- **命名规范**:`{页号}-{语义}.{ext}`,例如 `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`\n  - 页号补零便于排序\n  - 语义用英文,短、具体、和内容对应\n- **规格建议**:\n  - 单张 ≥ 1600px 宽(避免大屏模糊)\n  - JPG 用于照片/截图,PNG 用于透明 UI/图表\n  - 总大小控制在 10MB 内(影响翻页流畅度)\n- **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images/旧名` 改成新名\n- **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4/5/10 等图文混排页没图就没法验证视觉效果\n\n#### 截图需求约定(动手前必须问)\n\n只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或\"帮我美化截图\",都要先确认:\n\n- **截图位置**:截图文件在哪个文件夹?是否已经命名好?\n- **使用目的**:保真展示 / 截图美化 / 截图再设计 / UI 情景图?\n- **落位比例**:最终放进哪个版式槽位?常用 `21:9` / `16:10` / `16:9` / `4:3` / `1:1`\n- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?\n- **视觉处理**:是否需要主题背景、留边、居中/角落对齐、拆成长截图面板?\n\n默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references/screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。\n\n#### Codex 配图生成(可选)\n\n如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。\n\n推荐询问方式:\n\n> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程/对比/系统关系图,或把截图再设计成统一的杂志风视觉。\n\n如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。\n\n如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:\n\n- 截图美化:读 `references/screenshot-framing.md`,用内置主题背景 + 程序化缩放/留边/对齐处理,尽量不重画截图内容\n- 截图再设计:读 `references/image-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致\n\n生成配图时遵守:\n\n- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导\n- 图片风格必须贴合当前 deck 风格:风格 A 用\"电子杂志 × 电子墨水\";风格 B 用\"瑞士国际主义 / Swiss Style\"\n- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文\n- 先看 `references/image-prompts.md` 选择图片类型和基础提示词\n- 如果处理用户原始截图,先看 `references/screenshot-framing.md`:优先调用 `assets/screenshot-backgrounds/` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画\n- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 / 4:3,信息图 16:9 / 16:10,截图再设计 16:10,图文混排小图 3:2 / 3:4,网格图统一高度裁切\n- 生成后的图片放到 `images/` 下,命名遵守 `{页号}-{语义}.{ext}`\n\n### Step 2 · 拷贝模板\n\n**根据 Step 1 选定的风格,拷贝对应的模板**到目标位置（通常是 `项目/XXX/ppt/index.html`），同时在同级建一个 `images/` 文件夹准备接图片。\n\n```bash\nmkdir -p \"项目/XXX/ppt/images\"\n\n# 风格 A · 电子杂志风\ncp \"<SKILL_ROOT>/assets/template.html\" \"项目/XXX/ppt/index.html\"\n\n# 或 风格 B · 瑞士国际主义风\ncp \"<SKILL_ROOT>/assets/template-swiss.html\" \"项目/XXX/ppt/index.html\"\n```\n\n两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、演讲者模式、观众屏同步、字体/图标 CDN 全已预设好,只有 `<!-- SLIDES_HERE -->` 占位符和 `SPEAKER_NOTES` 等待你填充。\n\n**注意**:风格 A 和 B **不能混用**。layouts.md 里的类（如 `.h-hero` 衬线大标题、`.display-zh` 等）只在 template.html 有定义；layouts-swiss.md 里的类（如 `.kpi-hero`、`.accent-block`、`.span-N`、`.dots` 等）只在 template-swiss.html 有定义。一份 deck 只能选一套。\n\n#### 2.1 · 必改占位符（**容易漏**）\n\n拷贝后立刻改掉以下占位符，否则浏览器 Tab 会显示\"[必填] 替换为 PPT 标题\"这种尴尬文字：\n\n| 位置 | 原始 | 需改为 |\n|------|------|--------|\n| `<title>` | `[必填] 替换为 PPT 标题 · Deck Title` | 实际 deck 标题(如 `一种新的工作方式 · Luke Wroblewski`) |\n\n每次拷贝完 template.html 第一件事:grep 一下\"[必填]\" 确认全部替换完。\n\n#### 2.2 · 选定主题色(5 套预设 · 不允许自定义)\n\n本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。\n\n| # | 主题 | 适合 |\n|---|------|------|\n| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |\n| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |\n| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |\n| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |\n| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |\n\n**操作**:\n1. 基于内容主题推荐一套,或直接问用户选哪一套\n2. 打开 `references/themes.md`,找到对应主题的 `:root` 块\n3. **整体替换** `assets/template.html`(已拷贝版本)开头 `:root{` 块里标有\"主题色\"注释的那几行(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)\n4. 其他 CSS 都走 `var(--...)`,无需任何其他改动\n\n**硬规则**:\n- 一份 deck 只用一套主题,不要中途换色\n- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选\n- 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和\n\n### Step 3 · 填充内容\n\n#### 3.P · 同步生成演讲备注（正式演讲必做）\n\n先读 `references/presenter-mode.md`。每个 `<section class=\"slide ...\">` 必须写唯一且稳定的 `data-slide-id`,再按同样顺序生成一条 `SPEAKER_NOTES` 记录。备注按页面 ID 存储,不要用数组下标或页码作为持久化键,否则页面重排后用户在演讲者视图里改过的备注会串页。\n\n内容分工:\n\n- slide 只放观众此刻必须看见的结论、结构和证据。\n- `purpose` 说明这一页在整场叙事中的任务。\n- `talk` 补充背景、例子、判断依据和语气,不逐字复述 slide。\n- `transition` 解释为什么下一页紧接着出现。\n- `section` 只在大纲已给出章节或连续页面明显属于同一章节时填写。\n- `minutes` 是讲述计划;`autoAdvanceSeconds` 是播放行为,两者必须分开,且后者只在用户明确要求时填写。\n- `cue / interaction / delivery / advance / fallback / pronunciation` 只写大纲或用户明确提供的舞台动作、互动、表达、翻页、备用和读音信息。\n\n没有来源支持的事实不能写进备注;影响内容正确性的缺失信息要标记“待补充”或询问用户,不影响内容的可选演讲信息直接省略。\n\n#### 3.0 · 预检:类名必须在模板的 `<style>` 里有定义（**最重要**）\n\n**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `<style>` 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。\n\n**两种风格类名互不通用**(再次强调):\n- 风格 A 模板里有 `h-hero`(衬线)、`stat-card`、`grid-2-7-5`、`frame` 等\n- 风格 B 模板里有 `h-hero`(无衬线)、`kpi-hero`、`accent-block`、`span-N`、`dots`、`grid-12` 等\n- 同名 class 在两个模板里**视觉表现完全不同**(例:风格 A 的 `h-hero` 是 Noto Serif SC 衬线,风格 B 的 `h-hero` 是 Inter 无衬线)\n\n**在写任何 slide 代码之前:**\n\n1. **先 Read 当前用的模板**(至少读到 `<style>` 块末尾):\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n2. **对照对应 layouts 文件的 Pre-flight 列表**,确认你要用的每个类都在 `<style>` 里存在\n3. 如果某个类缺失:**在模板的 `<style>` 里补上**,不要在每个 slide 里 inline 重写\n4. **模板是唯一的类名来源**——不要发明新类名,如需自定义用 `style=\"...\"` inline\n\n**风格 A 常见容易遗漏的类**:\n`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `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` / `grid-6` / `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`\n\n**风格 B 常见容易遗漏的类**(2026-05 重构后):\n- 画布:`canvas-card` / `chrome-min`\n- 排版:`h-hero`(无衬线 7.4vw weight 200) / `h-statement`(9.6vw) / `h-xl` / `h-md` / `t-cat`(SemiBold 600 小标) / `t-meta`(mono uppercase) / `lead` / `num-mega` / `mono`\n- 卡片(四类互斥):`card-ink` / `card-accent` / `card-fill` / `card-outlined`\n- 网格:`grid-12` / `grid-2-9` / `grid-2-9-5` / `span-N`\n- 时间线:`timeline-v` + `tl-node` + `tl-axis` + `dot` / `timeline-h` + `tl-h-node` + `tl-h-axis`\n- 图表:`kpi-tower-row` + `bar-tower` / `h-bar-chart` + `bar-row` + `bar-fill` / `spec-bars` + `bar-vert`\n- 装饰:`dot-mat`(SVG mask 实心点)/ `ring-mat`(描边圆)/ `cross-mat`(× 网格)/ `hr-hairline`\n- 版式专属:`cover-split` / `closing-split` / `duo-compare` + `vrule` / `manifesto-top` + `ink-banner-full` / `three-forces` / `loop-diagram` / `matrix-fill` + `matrix-cell` / `brief-grid` + `brief-card` / `system-diagram` / `why-now-grid` / `four-cards` / `stacked-ledger` + `ledger-row` / `tech-spec` / `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- 图片混排:`frame-img` / `fit-contain` / `r-21x9` / `r-16x9` / `r-16x10` / `h-22` / `h-26` / `swiss-img-split` / `swiss-img-grid` / `swiss-img-caption` / `swiss-keyline` / `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8/12/16/24/32/40/48/64/80/96/160 px)\n\n#### 3.0.5 · 规划主题节奏（**和类预检同等重要**)\n\n**在挑布局之前**,必须先列出每一页的主题 class(`hero dark` / `hero light` / `light` / `dark`)并写到文档或草稿里对齐。详细规则看 `references/layouts.md` 开头的\"主题节奏规划\"一节。\n\n**强制规则**:\n\n- 每页 section 必须带 `light` / `dark` / `hero light` / `hero dark` 之一,不要只写 `hero`\n- 连续 3 页以上同主题 = 视觉疲劳,不允许\n- 8 页以上必须有 ≥1 个 `hero dark` + ≥1 个 `hero light`\n- 整个 deck 不能只有 `light` 正文页,必须有 `dark` 正文页制造呼吸\n- 每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)\n\n**生成后自检**:`grep 'class=\"slide' index.html` 列出所有主题,人工确认节奏合理再交付。\n\n#### 3.1 · 挑布局\n\n**不要从零写 slide**。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 `<section>` 代码块。\n\n**风格 A** → `references/layouts.md`:\n\n| Layout | 用途 |\n|---|---|\n| 1. 开场封面 | 第 1 页 |\n| 2. 章节幕封 | 每幕开场 |\n| 3. 数据大字报 | 抛硬数据 |\n| 4. 左文右图(Quote + Image) | 身份反差 / 故事 |\n| 5. 图片网格 | 多图对比 / 截图实证 |\n| 6. 两列流水线(Pipeline) | 工作流程 |\n| 7. 悬念收束 / 问题页 | 幕末 / 收尾 |\n| 8. 大引用页(Big Quote) | 衬线金句 / takeaway |\n| 9. 并列对比(Before / After) | 旧模式 vs 新模式 |\n| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |\n\n**风格 B** → 先读 `references/swiss-layout-lock.md`,再读 `references/layouts-swiss.md`。\n\n瑞士主题默认进入 **Swiss locked mode**:\n\n- 正文页只能使用原始参考 PPT 登记的 22 个版式 `S01-S22`;新增首页/尾页只能使用 Skill 明确提供的 `SWISS-COVER-ASCII` / `SWISS-CLOSING-ASCII`。\n- 每个 `<section class=\"slide\">` 必须写 `data-layout=\"Sxx\"`。没有 `data-layout` 就视为未登记版式。\n- 不允许临时发明 `P23/P24`、`Swiss Image Split`、`Evidence Grid` 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。\n- 顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。\n- SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。\n- 地理/历史/城市路线/地点关系页使用 `S08 + Swiss Map Component`:先读 `references/swiss-map-component.md`,仍保留 `data-layout=\"S08\"`。\n\n原始 22 个正文版式如下:\n\n| Layout | 用途 |\n|---|---|\n| S01 Index Cover | 原始索引封面 |\n| S02 Vertical Timeline + KPI | 演化对比 / 年代变迁 |\n| S03 Split Statement | 核心论点 / 左右分屏 |\n| S04 Six Cells | 6 项概念定义 |\n| S05 Three Layers | 三层架构 |\n| S06 KPI Tower | 4 项数据视觉化高度差 |\n| S07 H-Bar Chart | 5-10 项排名比较 |\n| S08 Duo Compare | Before/After 对照 |\n| S09 Dot Matrix Statement | 大引述 / statement |\n| S10 Split Closing | 收束页 |\n| S11 Horizontal Timeline | 4-7 步流程 |\n| S12 Manifesto + Ink Banner | 阶段性结论 |\n| S13 Three Forces | 3 个对等概念深化 |\n| S14 Loop Form | 自学闭环 / 自动化 |\n| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |\n| S16 Multi-card Brief | 6 项快讯小卡 |\n| S17 System Diagram | 三层架构 / 生态地图 |\n| S18 Why Now | 三论点 + 数据支撑 |\n| S19 Four Cards | 4 项等权特性 |\n| S20 Stacked KPI Ledger | 纵向账单数据 |\n| S21 Tech Spec Sheet | 产品规格 / benchmark |\n| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |\n\n**登记扩展**:`S08 + Swiss Map Component` 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 `references/swiss-map-component.md` 的点位、连线、卡片和右上角缩放/拖动控制实现。\n\n选对应 layout,粘过去,改文案和图片路径即可。**务必先完成 3.0 预检**。\n\n**风格 B 版式多样性硬规则**:\n- 7-8 页 deck 至少使用 **6 个不同 S 编号版式**;10 页以上至少使用 8 个不同版式。\n- 如果用户说\"测试模板 / 看看效果 / 多一点版式\",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。\n- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。\n- 图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。\n- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html`。校验器会先做静态结构检查;如果环境中能解析到 Playwright,还会做真实渲染后的可见边界、底部空白、nav 安全线和标题间距测量。\n\n#### 3.2 · 图片比例规范\n\n永远用**标准比例**,不要用原图奇葩比例(如 `2592/1798`):\n\n| 场景 | 推荐比例 |\n|------|---------|\n| S22 顶部主图 | **21:9**;照片关键主体放中央安全区 |\n| S15/S16 多图格 | 统一 21:9 或统一 16:10,不能混用 |\n| 左文右图 主图(风格 A) | 16:10 或 4:3 + `max-height:56vh` |\n| 图片网格(风格 A) | **固定 `height:26vh`**,不用 aspect-ratio |\n| 左小图 + 右文字 | 1:1 或 3:2 |\n| 全屏主视觉 | 16:9 + `max-height:64vh` |\n| 图文混排小插图 | 3:2 或 3:4 |\n\n**默认不要让图片 `align-self:end`**——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + `align-items:start`(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。\n\n**风格 B 瑞士风额外规则**:\n- 单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24\n- 生成图片前先写 `data-image-slot`:例如 `s22-hero-21x9` / `s15-grid-21x9` / `s16-brief-21x9`\n- S22 配图默认生成 21:9,提示词必须包含 `subject centered in the safe middle area`;照片容器用 `object-position:center 35%`,不要用 `top center`\n- 图片容器必须直角、无阴影、无圆角;默认背景用白色 `var(--paper)`,不要用灰底包白底信息图\n- 白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 `.swiss-keyline`;需要强调时只用 `.swiss-lined` 的顶部 accent 线\n- UI/信息图如果是用户原始截图或文字密集图,才用 `.fit-contain`;如果已按 S15/S16 槽位重生成,必须用 `.frame-img.r-21x9` / `.frame-img.r-16x10` 铺满容器,不要固定 `height:18vh` 后把图缩小\n- 多图同组必须统一图片槽位、比例和高度,不能混用\n- GPT-M 2.0 生成图使用 `image-prompts.md` 的\"风格 B:瑞士国际主义配图规则\"\n- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` / `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`\n\n#### 3.2.0 · 图文混排决策树（从社交卡片规则迁移）\n\n先判断图片在这一页里的角色,再决定容器、比例和裁切方式:\n\n- **证据截图 / UI / 代码 / dashboard**:保真优先,先读 `references/screenshot-framing.md`;关键文字和数据不能被裁掉。需要统一比例时,优先程序化背景画布 + `.fit-contain`,不要为了铺满而裁掉 UI 内容。\n- **已按槽位重生成的信息图 / 插图**:按目标槽位铺满,例如 S22 用 `21:9`,S15/S16 用统一 `21:9` 或 `16:10`;不要再用短高度把图缩小成小贴片。\n- **照片 / 产品图 / 人物图**:使用标准比例 + 明确 `object-position`;主体、人脸、产品和关键证据不能被标题、caption 或裁切压住。\n- **文字压图 / 全屏主视觉**:先做 quiet-zone 判断,图里至少要有约 30% 低细节区域承载文字;不通过就换图、换裁切或改成图文分栏。只在必要时加局部 tint,不要整页套黑色/白色遮罩。\n- **多图组**:同一组统一比例、高度、容器处理和 caption 密度;不要一张 `contain`,另一张 `cover`。\n- **生成图是素材,不是整页 slide**:图片内部不要自带页眉、页脚、页码、logo、主标题、装饰边框或署名,避免和 deck chrome 重复。\n- **图文呼吸**:标题、图片、caption、正文必须各自留出间距;生成后用 validator 的 `M1/M2` 检查可见边界、底部空白、nav 安全线和标题间距。\n\n#### 3.2.1 · 中文大标题字号分档(风格 B 必做)\n\n中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:\n\n| 标题形态 | 推荐字号 |\n|---|---|\n| 1 行,≤ 8 个中文字符 | `min(6.4vw,11.2vh)` |\n| 2 行,每行≤ 8 个中文字符 | `min(5.8vw,10.2vh)` |\n| 2 行,任一行 9-12 个中文字符 | `min(5.2vw,9.2vh)` |\n| 3 行或更长 | 优先改写标题;不得已用 `min(4.6vw,8.2vh)` |\n\n如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。\n\n#### 3.2.2 · 瑞士风演示最小字号与字重阶梯(风格 B 必做)\n\n瑞士风用于投屏演示时,小字不能按网页注释的 10-12px 写。默认遵守以下下限:\n\n| 文本类型 | 最小字号 |\n|---|---|\n| 正文段落 / 主要说明 | `18px` |\n| 卡片描述 / 列表 / 时间线说明 / caption / 图注 | `16px` |\n| meta / kicker / mono label / 图表标签 | `14px` |\n\n如果内容放不下,先删减文案、拆成两页、换更适合的 Sxx 版式,不要把字号压到 10/11/12/13px。尤其是中文 deck,不要为了塞三行解释把 `body-sm`、caption、timeline label 改小。\n\n**字号与字重阶梯(瑞士风核心)** — \"越大越细,越小越粗\"不是感性描述,而是具体映射:\n\n| 字号区间 | 推荐字重 | 典型场景 |\n|---|---|---|\n| ≥ 8vw | 200 (ExtraLight) | 封面大字、巨号 KPI、h-statement |\n| 4-7.9vw | 200-300 | 章节标题(h-xl/h-xl-zh)、大编号 |\n| 1.8-3.9vw | 300-400 | 中型标题、takeaway 标题(≈1.8vw)、中号数字 |\n| 1-1.7vw / 16-20px | 400-500 | 正文段落、卡片描述、说明文字 |\n| 13-15px(小字) | 500-600 | meta、kicker、角标、图表标签、caption 强调 |\n\n**硬规则:**\n- 同一页内,字号越小的元素字重必须 ≥ 字号越大的元素(不允许 16px 正文用 300 而 1.8vw 标题用 500)\n- 16px 左右的小字拒绝使用 weight 300(太细不可读),最低 400,推荐 500\n- 封面/IkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)\n\n组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references/components.md`。\n\n### Step 4 · 对照检查清单自检\n\n生成完一定要打开 `references/checklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。\n\n所有正式演讲 deck 先跑演讲者模式校验;如果用户给了目标时长,同时传入分钟数:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html\nnode <SKILL_ROOT>/scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30\nnode <SKILL_ROOT>/scripts/check-presenter-runtime-sync.mjs\n```\n\n第一个脚本会拦截缺失/重复页面 ID、备注与页面错位、必填字段或可选字段类型错误、完整时间计划超出 90% 预算,以及计时、排练、自动翻页、标注、演前检查和观众屏恢复控件缺失。第二个脚本会拦截两套模板之间的演讲者 CSS / JS 漂移。\n\n#### 4.0.1 · 先量后改:超出 / 空白 / 标题间距\n\n当一页内容超出或显得巨空时,不要先凭感觉大幅删改。先运行:\n\n```bash\nnode <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html\n```\n\n看校验输出里的测量项:\n\n- `M1 DOM/visual overflow`:具体超出多少 px,以及最低/最高问题元素\n- `M1 bottom whitespace`:底部空白多少 px,active content height 占比多少\n- `M1 nav-safe`:最低内容是否进入底部分页安全线\n- `M2 title gap`:标题和下一块内容之间的实际距离\n\n修正阶梯:\n\n- `1-40px` over:只微调,上移内容组或收紧一个 gap/padding,不要删内容。\n- `40-90px` over:局部压缩间距或模块高度,仍优先保留内容。\n- `90-160px` over:轻微压标题或压缩一段正文,必要时拆页。\n- `160px+` over:才考虑换版式、合并模块或删内容。\n\n修完再跑一次 validator。如果 `M1 bottom whitespace` 变大,说明修过头了;恢复部分间距、放大最后一块或把内容组向下回调。\n\n#### 4.0 · 不只看代码:必须打开网页做视觉核对\n\n代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:\n\n1. 同时打开当前模板(golden source 快照)或生成页、以及正在迭代的测试 PPT 逐页对照。\n2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。\n3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。\n4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。\n5. 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。\n6. 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。\n\n#### 风格 A · 电子杂志风必查\n\n1. **大标题必须是衬线字体**——如果显示成非衬线,99% 是 Step 3.0 预检没做,`h-hero` 类在 template.html 里缺失\n2. **图片网格里只用 `height:Nvh`,不用 `aspect-ratio`**(会撑破)\n3. **图片不能堆到页面底部**——不要用 `align-self:end`,用 grid + `align-items:start`(见 Step 3.2)\n4. **图片只能用标准比例**(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例\n5. **中文大标题 ≤ 5 字且 `nowrap`**(避免 1 字 1 行)\n6. **用 Lucide,不用 emoji**\n7. **标题用衬线,正文用非衬线,元数据用等宽**\n\n#### 风格 B · 瑞士国际主义必查\n\n1. **全程无衬线**——任何衬线字体出现都是错的(检查 `font-family` 没用 `--serif` 类变量)\n2. **只有一个 accent 色**——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色\n3. **不允许渐变 / 阴影 / 圆角**——所有色块直角纯色,任何 `box-shadow` / `linear-gradient` / `border-radius` > 0 都要砍掉(rule 横线除外)\n4. **极致字号对比**——主标题与正文比例 ≥ 8:1\n5. **大字号必须双约束限高**——`font-size:min(Xvw, Yvh)`,只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)\n6. **大字字重 200**(ExtraLight)——字号越大越细,瑞士风灵魂;**禁止** 600/700/800 大字\n7. **卡片填充类型互斥**——`card-ink` / `card-accent` / `card-fill` / `card-outlined` 四类**不能混用**(禁止\"蓝底+蓝描边\"、\"灰底+描边\"等)\n8. **多卡并列时统一样式**——3-12 张卡用同一类(优先 `card-fill` 灰底);只突出一项时单独换 `card-accent`,且**只允许一张**\n9. **直角到底**——任何 `border-radius` 都不允许;装饰用 8×8 直角小方块,**不要** 9px 圆形点\n10. **图标用 lucide,不自己画 SVG**——`<i data-lucide=\"name\"></i>` + `lucide.createIcons()`,选棱角风格(避免圆胖)\n11. **时间线对齐**——axis 列固定 12px + dot 绝对定位,**不要**用 grid `justify-self`(会与虚线错位)\n12. **章节级标题与内容间距 ≥ 9vh**——避免拥挤(吸取 P15/P16 教训)\n13. **每页一个语义化动效 recipe**——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;**禁止**所有页用同一个 generic 配方\n14. **playSlide 入口 reveal 容器**——`[data-anim]` 容器先强制 opacity:1,recipe 内再用 motion `{opacity:[0,1]}` 覆盖,否则有些页会\"看不见\"\n15. **ESC 索引页可见性**——cloned slide 必须有 CSS override 让 `[data-anim]` 在缩略图里 opacity:1\n16. **Helvetica/Inter 兜底中文字体**——Windows 用户没有\"苹方\",必须 fallback 到 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **字体粗细体例**:大字 200 / 正文 300 / `t-cat` SemiBold 600 / `t-meta` mono uppercase\n18. **保留低功耗快捷键**——右下角必须提示 `B 静态`;按 `B` 切换 `body.low-power`,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画\n19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面\n20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)\n21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` / `box-shadow`;边界只用 hairline\n22. **S15/S16/S22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 `.fit-contain`\n23. **组件角色要正确**——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填\n24. **通用/非通用版式要分清**——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用\n\n### Step 5 · 本地预览\n\n直接在浏览器打开 `index.html` 就行。macOS 下：\n\n```bash\nopen \"项目/XXX/ppt/index.html\"\n```\n\n不需要本地服务器。图片走相对路径 `images/xxx.png`。\n\n预览时不能只看普通页面。按 `P` 进入演讲者模式,允许浏览器打开观众窗口,至少实测一次:前后翻页、内嵌宫格选页并返回预览、首页/尾页、尾页重新开始、计时开始/暂停/重置、排练记录、自动翻页暂停/恢复、激光笔、圈选、黑白屏、冻结、设置组件、演前检查、备注保存、关闭观众窗口后的状态变化,以及“重新打开观众屏”能否恢复到当前页。\n\n### Step 6 · 迭代\n\n根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 `font-size:Xvw` / 高度 `height:Yvh` / 间距 `gap:Zvh`）。\n\n---\n\n## 资源文件导览\n\n```\nguizang-ppt-skill/\n├── SKILL.md                  ← 你正在读\n├── assets/\n│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）\n│   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）\n│   ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套\n│   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）\n├── scripts/\n│   ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐\n│   └── validate-presenter-mode.mjs ← 两种风格共用:页面 ID、演讲备注、时长和演讲者运行时校验\n└── references/\n    ├── components.md         ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）\n    ├── layouts.md            ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）\n    ├── swiss-layout-lock.md  ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记\n    ├── layouts-swiss.md      ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区\n    ├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)\n    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）\n    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）\n    ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词\n    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射\n    ├── presenter-mode.md     ← 演讲者 UI、AI 备注结构、观众屏同步与恢复契约\n    └── checklist.md          ← 质量检查清单（P0/P1/P2/P3 分级）\n```\n\n**加载顺序建议**：\n1. 先读完 `SKILL.md`(这个文件)了解整体\n2. Step 1 需求澄清**第一问**先确定风格 A 还是 B,然后:\n   - 风格 A:读 `themes.md` 帮用户选一套主题色\n   - 风格 B:读 `themes-swiss.md` 帮用户选一套主题色\n3. **动手前 Read 对应模板的 `<style>` 块**——这是类名的唯一来源,缺类会导致整页样式崩\n   - 风格 A → `assets/template.html`\n   - 风格 B → `assets/template-swiss.html`\n4. 读对应的 layouts 文件挑布局:\n   - 风格 A → `layouts.md`(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)\n   - 风格 B → **先读 `swiss-layout-lock.md`**,再读 `layouts-swiss.md`;正文页必须从 S01-S22 选择,每页写 `data-layout`\n5. 如果风格 B 需要地点、路线、人物住所或城市关系地图,读 `swiss-map-component.md`\n6. 如果在 Codex 中生成配图,读 `image-prompts.md` 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 `screenshot-framing.md`,优先使用 `assets/screenshot-backgrounds/` 的内置背景资产\n7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)\n8. 正式演讲先读 `presenter-mode.md`,生成稳定页面 ID 和 `SPEAKER_NOTES`\n9. 生成后先运行 `validate-presenter-mode.mjs`;风格 B 再运行 `validate-swiss-deck.mjs`,最后读 `checklist.md` 自检\n\n**动效相关**:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 `layouts.md` / `layouts-swiss.md` 的骨架在 HTML 里加 `data-anim` / `data-animate` 即可。离线演示靠 `assets/motion.min.js`,断网时自动降级为\"无动画但内容可读\"。风格 B 模板必须保留 `B` 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。\n\n## 核心设计原则（哲学）\n\n### 风格 A · 电子杂志风（5 轮迭代总结）\n\n> 违反其中任何一条，杂志感都会垮。\n\n1. **克制优于炫技** — WebGL 背景只在 hero 页透出，普通页几乎看不见\n2. **结构优于装饰** — 不用阴影、不用浮动卡片、不用 padding box，一切信息靠**大字号 + 字体对比 + 网格留白**\n3. **内容层级由字号和字体共同定义** — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据\n4. **图片是第一公民** — 图片只裁底部，保证顶部和左右完整；网格用 `height:Nvh` 固定，不要用 `aspect-ratio` 撑\n5. **节奏靠 hero 页** — hero 和 non-hero 交替，才不累眼睛\n6. **术语统一** — Skills 就是 Skills，不要中英混合翻译\n\n### 风格 B · 瑞士国际主义风\n\n> 违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。\n\n1. **单一锚点色** — 一份 deck 只用一个 accent，不允许多色高亮拼贴\n2. **极致字号对比** — 主标题与正文比例 ≥ 8:1,KPI 必须是\"Data Hero\"(屏幕宽度的 18-22%)\n3. **无衬线只此一家** — Inter / Helvetica / Noto Sans SC,任何衬线都是错的\n4. **直角纯色** — 不允许渐变 / 阴影 / 圆角(rule 横线除外)\n5. **网格至上** — 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学\n6. **Hairline 是手术刀** — 1px 的极细分割线就够,不要加粗、不要加阴影\n7. **点阵装饰只在 hero 页透出** — 正文页保持纯净底色\n\n## 参考作品\n\n本 skill 的两种风格分别参考了：\n\n**风格 A · 电子杂志风**:\n- 歸藏 \"一人公司：被 AI 折叠的组织\" 分享（2026-04-22，27 页）\n- *Monocle* 杂志的版式\n- YC 总裁 Garry Tan \"Thin Harness, Fat Skills\" 那篇博客的 demo\n\n**风格 B · 瑞士国际主义风**:\n- Massimo Vignelli 的 NYC Subway / Unimark 系统\n- *Helvetica Forever* 的字体设计语言\n- Josef Müller-Brockmann 的网格系统经典著作\n- 当代设计:Acne Studios / Off-White / IKEA / Beck Design\n\n可以把它们当做风格锚点。\n</yakaai_skills>"}