</code></td><td><code>[必填] 替换为 PPT 标题 · Deck Title</code></td><td>实际 deck 标题(如 <code>一种新的工作方式 · Luke Wroblewski</code>)</td></tr></tbody></table><p>每次拷贝完 template.html 第一件事:grep 一下"[必填]" 确认全部替换完。</p><h4>2.2 · 选定主题色(5 套预设 · 不允许自定义)</h4><p>本 skill <strong>只允许从 5 套精心调配的预设里选一套</strong>,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。</p><table><thead><tr><th>#</th><th>主题</th><th>适合</th></tr></thead><tbody><tr><td>---</td><td>------</td><td>------</td></tr><tr><td>1</td><td>🖋 墨水经典</td><td>通用 / 商业发布 / 不知道选啥的默认</td></tr><tr><td>2</td><td>🌊 靛蓝瓷</td><td>科技 / 研究 / 数据 / 技术发布会</td></tr><tr><td>3</td><td>🌿 森林墨</td><td>自然 / 可持续 / 文化 / 非虚构</td></tr><tr><td>4</td><td>🍂 牛皮纸</td><td>怀旧 / 人文 / 文学 / 独立杂志</td></tr><tr><td>5</td><td>🌙 沙丘</td><td>艺术 / 设计 / 创意 / 画廊</td></tr></tbody></table><p><strong>操作</strong>:</p><ol><li>基于内容主题推荐一套,或直接问用户选哪一套</li><li>打开 <code>references/themes.md</code>,找到对应主题的 <code>:root</code> 块</li><li><strong>整体替换</strong> <code>assets/template.html</code>(已拷贝版本)开头 <code>:root{</code> 块里标有"主题色"注释的那几行(<code>--ink</code> / <code>--ink-rgb</code> / <code>--paper</code> / <code>--paper-rgb</code> / <code>--paper-tint</code> / <code>--ink-tint</code>)</li><li>其他 CSS 都走 <code>var(--...)</code>,无需任何其他改动</li></ol><p><strong>硬规则</strong>:</p><ul><li>一份 deck 只用一套主题,不要中途换色</li><li>不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选</li><li>不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和</li></ul><h3>Step 3 · 填充内容</h3><h4>3.0 · 预检:类名必须在模板的 <code><style></code> 里有定义（<strong>最重要</strong>）</h4><p><strong>这是所有生成问题的源头</strong>。layouts 骨架使用了很多类名,如果模板的 <code><style></code> 里没有对应定义,浏览器会 fallback 到默认样式——大标题字体错、卡片挤成一团、pipeline 糊成一行、图片堆到页面底部。</p><p><strong>两种风格类名互不通用</strong>(再次强调):</p><ul><li>风格 A 模板里有 <code>h-hero</code>(衬线)、<code>stat-card</code>、<code>grid-2-7-5</code>、<code>frame</code> 等</li><li>风格 B 模板里有 <code>h-hero</code>(无衬线)、<code>kpi-hero</code>、<code>accent-block</code>、<code>span-N</code>、<code>dots</code>、<code>grid-12</code> 等</li><li>同名 class 在两个模板里<strong>视觉表现完全不同</strong>(例:风格 A 的 <code>h-hero</code> 是 Noto Serif SC 衬线,风格 B 的 <code>h-hero</code> 是 Inter 无衬线)</li></ul><p><strong>在写任何 slide 代码之前:</strong></p><ol><li><strong>先 Read 当前用的模板</strong>(至少读到 <code><style></code> 块末尾):</li><ul><li>风格 A → <code>assets/template.html</code></li><li>风格 B → <code>assets/template-swiss.html</code></li></ul><li><strong>对照对应 layouts 文件的 Pre-flight 列表</strong>,确认你要用的每个类都在 <code><style></code> 里存在</li><li>如果某个类缺失:<strong>在模板的 <code><style></code> 里补上</strong>,不要在每个 slide 里 inline 重写</li><li><strong>模板是唯一的类名来源</strong>——不要发明新类名,如需自定义用 <code>style="..."</code> inline</li></ol><p><strong>风格 A 常见容易遗漏的类</strong>:</p><p><code>h-hero</code> / <code>h-xl</code> / <code>h-sub</code> / <code>h-md</code> / <code>lead</code> / <code>kicker</code> / <code>meta-row</code> / <code>stat-card</code> / <code>stat-label</code> / <code>stat-nb</code> / <code>stat-unit</code> / <code>stat-note</code> / <code>pipeline-section</code> / <code>pipeline-label</code> / <code>pipeline</code> / <code>step</code> / <code>step-nb</code> / <code>step-title</code> / <code>step-desc</code> / <code>grid-2-7-5</code> / <code>grid-2-6-6</code> / <code>grid-2-8-4</code> / <code>grid-3-3</code> / <code>grid-6</code> / <code>grid-3</code> / <code>grid-4</code> / <code>frame</code> / <code>frame-img</code> / <code>img-cap</code> / <code>callout</code> / <code>callout-src</code> / <code>chrome</code> / <code>foot</code></p><p><strong>风格 B 常见容易遗漏的类</strong>(2026-05 重构后):</p><ul><li>画布:<code>canvas-card</code> / <code>chrome-min</code></li><li>排版:<code>h-hero</code>(无衬线 7.4vw weight 200) / <code>h-statement</code>(9.6vw) / <code>h-xl</code> / <code>h-md</code> / <code>t-cat</code>(SemiBold 600 小标) / <code>t-meta</code>(mono uppercase) / <code>lead</code> / <code>num-mega</code> / <code>mono</code></li><li>卡片(四类互斥):<code>card-ink</code> / <code>card-accent</code> / <code>card-fill</code> / <code>card-outlined</code></li><li>网格:<code>grid-12</code> / <code>grid-2-9</code> / <code>grid-2-9-5</code> / <code>span-N</code></li><li>时间线:<code>timeline-v</code> + <code>tl-node</code> + <code>tl-axis</code> + <code>dot</code> / <code>timeline-h</code> + <code>tl-h-node</code> + <code>tl-h-axis</code></li><li>图表:<code>kpi-tower-row</code> + <code>bar-tower</code> / <code>h-bar-chart</code> + <code>bar-row</code> + <code>bar-fill</code> / <code>spec-bars</code> + <code>bar-vert</code></li><li>装饰:<code>dot-mat</code>(SVG mask 实心点)/ <code>ring-mat</code>(描边圆)/ <code>cross-mat</code>(× 网格)/ <code>hr-hairline</code></li><li>版式专属:<code>cover-split</code> / <code>closing-split</code> / <code>duo-compare</code> + <code>vrule</code> / <code>manifesto-top</code> + <code>ink-banner-full</code> / <code>three-forces</code> / <code>loop-diagram</code> / <code>matrix-fill</code> + <code>matrix-cell</code> / <code>brief-grid</code> + <code>brief-card</code> / <code>system-diagram</code> / <code>why-now-grid</code> / <code>four-cards</code> / <code>stacked-ledger</code> + <code>ledger-row</code> / <code>tech-spec</code> / <code>image-hero</code> + <code>hero-img-wrap</code> + <code>hero-overlay-block</code> + <code>hero-stats</code></li><li>图片混排:<code>frame-img</code> / <code>fit-contain</code> / <code>r-21x9</code> / <code>r-16x9</code> / <code>r-16x10</code> / <code>h-22</code> / <code>h-26</code> / <code>swiss-img-split</code> / <code>swiss-img-grid</code> / <code>swiss-img-caption</code> / <code>swiss-keyline</code> / <code>swiss-lined</code></li><li>spacing token:<code>--sp-3</code>...<code>--sp-13</code>(8/12/16/24/32/40/48/64/80/96/160 px)</li></ul><h4>3.0.5 · 规划主题节奏（<strong>和类预检同等重要</strong>)</h4><p><strong>在挑布局之前</strong>,必须先列出每一页的主题 class(<code>hero dark</code> / <code>hero light</code> / <code>light</code> / <code>dark</code>)并写到文档或草稿里对齐。详细规则看 <code>references/layouts.md</code> 开头的"主题节奏规划"一节。</p><p><strong>强制规则</strong>:</p><ul><li>每页 section 必须带 <code>light</code> / <code>dark</code> / <code>hero light</code> / <code>hero dark</code> 之一,不要只写 <code>hero</code></li><li>连续 3 页以上同主题 = 视觉疲劳,不允许</li><li>8 页以上必须有 ≥1 个 <code>hero dark</code> + ≥1 个 <code>hero light</code></li><li>整个 deck 不能只有 <code>light</code> 正文页,必须有 <code>dark</code> 正文页制造呼吸</li><li>每 3-4 页插入 1 个 hero 页(封面/幕封/问题/大引用)</li></ul><p><strong>生成后自检</strong>:<code>grep 'class="slide' index.html</code> 列出所有主题,人工确认节奏合理再交付。</p><h4>3.1 · 挑布局</h4><p><strong>不要从零写 slide</strong>。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 <code><section></code> 代码块。</p><p><strong>风格 A</strong> → <code>references/layouts.md</code>:</p><table><thead><tr><th>Layout</th><th>用途</th></tr></thead><tbody><tr><td>---</td><td>---</td></tr><tr><td>1. 开场封面</td><td>第 1 页</td></tr><tr><td>2. 章节幕封</td><td>每幕开场</td></tr><tr><td>3. 数据大字报</td><td>抛硬数据</td></tr><tr><td>4. 左文右图(Quote + Image)</td><td>身份反差 / 故事</td></tr><tr><td>5. 图片网格</td><td>多图对比 / 截图实证</td></tr><tr><td>6. 两列流水线(Pipeline)</td><td>工作流程</td></tr><tr><td>7. 悬念收束 / 问题页</td><td>幕末 / 收尾</td></tr><tr><td>8. 大引用页(Big Quote)</td><td>衬线金句 / takeaway</td></tr><tr><td>9. 并列对比(Before / After)</td><td>旧模式 vs 新模式</td></tr><tr><td>10. 图文混排(Lead Image + Side Text)</td><td>信息密集的图文页</td></tr></tbody></table><p><strong>风格 B</strong> → 先读 <code>references/swiss-layout-lock.md</code>,再读 <code>references/layouts-swiss.md</code>。</p><p>瑞士主题默认进入 <strong>Swiss locked mode</strong>:</p><ul><li>正文页只能使用原始参考 PPT 登记的 22 个版式 <code>S01-S22</code>;新增首页/尾页只能使用 Skill 明确提供的 <code>SWISS-COVER-ASCII</code> / <code>SWISS-CLOSING-ASCII</code>。</li><li>每个 <code><section class="slide"></code> 必须写 <code>data-layout="Sxx"</code>。没有 <code>data-layout</code> 就视为未登记版式。</li><li>不允许临时发明 <code>P23/P24</code>、<code>Swiss Image Split</code>、<code>Evidence Grid</code> 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。</li><li>顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement/split 版式允许强中心叙事。</li><li>SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格/卡片/caption。</li><li>地理/历史/城市路线/地点关系页使用 <code>S08 + Swiss Map Component</code>:先读 <code>references/swiss-map-component.md</code>,仍保留 <code>data-layout="S08"</code>。</li></ul><p>原始 22 个正文版式如下:</p><table><thead><tr><th>Layout</th><th>用途</th></tr></thead><tbody><tr><td>---</td><td>---</td></tr><tr><td>S01 Index Cover</td><td>原始索引封面</td></tr><tr><td>S02 Vertical Timeline + KPI</td><td>演化对比 / 年代变迁</td></tr><tr><td>S03 Split Statement</td><td>核心论点 / 左右分屏</td></tr><tr><td>S04 Six Cells</td><td>6 项概念定义</td></tr><tr><td>S05 Three Layers</td><td>三层架构</td></tr><tr><td>S06 KPI Tower</td><td>4 项数据视觉化高度差</td></tr><tr><td>S07 H-Bar Chart</td><td>5-10 项排名比较</td></tr><tr><td>S08 Duo Compare</td><td>Before/After 对照</td></tr><tr><td>S09 Dot Matrix Statement</td><td>大引述 / statement</td></tr><tr><td>S10 Split Closing</td><td>收束页</td></tr><tr><td>S11 Horizontal Timeline</td><td>4-7 步流程</td></tr><tr><td>S12 Manifesto + Ink Banner</td><td>阶段性结论</td></tr><tr><td>S13 Three Forces</td><td>3 个对等概念深化</td></tr><tr><td>S14 Loop Form</td><td>自学闭环 / 自动化</td></tr><tr><td>S15 Matrix + Hero Stat</td><td>8-12 项矩阵 + 总数据</td></tr><tr><td>S16 Multi-card Brief</td><td>6 项快讯小卡</td></tr><tr><td>S17 System Diagram</td><td>三层架构 / 生态地图</td></tr><tr><td>S18 Why Now</td><td>三论点 + 数据支撑</td></tr><tr><td>S19 Four Cards</td><td>4 项等权特性</td></tr><tr><td>S20 Stacked KPI Ledger</td><td>纵向账单数据</td></tr><tr><td>S21 Tech Spec Sheet</td><td>产品规格 / benchmark</td></tr><tr><td>S22 Image Hero</td><td>21:9 顶图 + 标题块 + 三列 KPI</td></tr></tbody></table><p><strong>登记扩展</strong>:<code>S08 + Swiss Map Component</code> 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 <code>references/swiss-map-component.md</code> 的点位、连线、卡片和右上角缩放/拖动控制实现。</p><p>选对应 layout,粘过去,改文案和图片路径即可。<strong>务必先完成 3.0 预检</strong>。</p><p><strong>风格 B 版式多样性硬规则</strong>:</p><ul><li>7-8 页 deck 至少使用 <strong>6 个不同 S 编号版式</strong>;10 页以上至少使用 8 个不同版式。</li><li>如果用户说"测试模板 / 看看效果 / 多一点版式",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08/S11/S02)、至少 1 个结构图(S14/S17/S15)、至少 1 个图片版式(S22 或 S15/S16 图片格改造)。</li><li>不允许连续 3 页使用同一种主体结构,例如连续三页 <code>head + grid + card</code>。</li><li>图片页不能偷懒发明新结构。2-3 张图时,用 S15/S16 的原始网格骨架改造成图片格;单张大图用 S22。</li><li>开写 HTML 前先列一张 <code>页码 → data-layout → 选用理由 → 图片槽位</code> 草稿;交付前运行 <code>node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs index.html</code>。</li></ul><h4>3.2 · 图片比例规范</h4><p>永远用<strong>标准比例</strong>,不要用原图奇葩比例(如 <code>2592/1798</code>):</p><table><thead><tr><th>场景</th><th>推荐比例</th></tr></thead><tbody><tr><td>------</td><td>---------</td></tr><tr><td>S22 顶部主图</td><td><strong>21:9</strong>;照片关键主体放中央安全区</td></tr><tr><td>S15/S16 多图格</td><td>统一 21:9 或统一 16:10,不能混用</td></tr><tr><td>左文右图 主图(风格 A)</td><td>16:10 或 4:3 + <code>max-height:56vh</code></td></tr><tr><td>图片网格(风格 A)</td><td><strong>固定 <code>height:26vh</code></strong>,不用 aspect-ratio</td></tr><tr><td>左小图 + 右文字</td><td>1:1 或 3:2</td></tr><tr><td>全屏主视觉</td><td>16:9 + <code>max-height:64vh</code></td></tr><tr><td>图文混排小插图</td><td>3:2 或 3:4</td></tr></tbody></table><p><strong>默认不要让图片 <code>align-self:end</code></strong>——会滑到页面底部,很容易碰到分页组件。用 grid 容器 + <code>align-items:start</code>(template 已预设)让图片贴顶即可;如果确实需要图文底对齐,必须先控制图片高度,再使用模板已有安全区类 <code>.nav-safe-bottom</code> / <code>.nav-safe-bottom-tight</code>,不要让最低处碰到分页组件。</p><p><strong>风格 B 瑞士风额外规则</strong>:</p><ul><li>单张大图用 S22;多图测试用 S15/S16 的原始卡片网格改造,不要用未登记的 P23/P24</li><li>生成图片前先写 <code>data-image-slot</code>:例如 <code>s22-hero-21x9</code> / <code>s15-grid-21x9</code> / <code>s16-brief-21x9</code></li><li>S22 配图默认生成 21:9,提示词必须包含 <code>subject centered in the safe middle area</code>;照片容器用 <code>object-position:center 35%</code>,不要用 <code>top center</code></li><li>图片容器必须直角、无阴影、无圆角;默认背景用白色 <code>var(--paper)</code>,不要用灰底包白底信息图</li><li>白底 GPT 信息图/流程图/UI 图默认不要加外框描边,不要随手套 <code>.swiss-keyline</code>;需要强调时只用 <code>.swiss-lined</code> 的顶部 accent 线</li><li>UI/信息图如果是用户原始截图或文字密集图,才用 <code>.fit-contain</code>;如果已按 S15/S16 槽位重生成,必须用 <code>.frame-img.r-21x9</code> / <code>.frame-img.r-16x10</code> 铺满容器,不要固定 <code>height:18vh</code> 后把图缩小</li><li>多图同组必须统一图片槽位、比例和高度,不能混用</li><li>GPT-M 2.0 生成图使用 <code>image-prompts.md</code> 的"风格 B:瑞士国际主义配图规则"</li><li>任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 <code>.nav-safe-bottom</code> / <code>.nav-safe-bottom-tight</code>,不要手写 <code>bottom:2vh</code></li></ul><h4>3.2.1 · 中文大标题字号分档(风格 B 必做)</h4><p>中文方块字视觉面积大,不能直接套英文 hero 的 6.8-7vw。写中文大标题前先分档:</p><table><thead><tr><th>标题形态</th><th>推荐字号</th></tr></thead><tbody><tr><td>---</td><td>---</td></tr><tr><td>1 行,≤ 8 个中文字符</td><td><code>min(6.4vw,11.2vh)</code></td></tr><tr><td>2 行,每行≤ 8 个中文字符</td><td><code>min(5.8vw,10.2vh)</code></td></tr><tr><td>2 行,任一行 9-12 个中文字符</td><td><code>min(5.2vw,9.2vh)</code></td></tr><tr><td>3 行或更长</td><td>优先改写标题;不得已用 <code>min(4.6vw,8.2vh)</code></td></tr></tbody></table><p>如果标题挤占了图片或正文区域,先压缩标题文案,再降字号;不要靠把下方内容推到底来硬塞。</p><p>组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 <code>references/components.md</code>。</p><h3>Step 4 · 对照检查清单自检</h3><p>生成完一定要打开 <code>references/checklist.md</code>，逐项对照。里面总结了<strong>真实迭代过程中踩过的所有坑</strong>，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。</p><h4>4.0 · 不只看代码:必须打开网页做视觉核对</h4><p>代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:</p><ol><li>同时打开原始参考 PPT、当前模板或生成页、测试 PPT;原始参考是 <code>/Users/guohao/Documents/op7418的仓库/项目/Thin-Harness-Fat-Skills/ppt/index.html</code>。</li><li>截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。</li><li>先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片/说明是否碰到底部分页组件。</li><li>再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。</li><li>对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200/300,不要被 raw CSS 里的 700/800/900 带偏。</li><li>如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距/安全区问题;不要直接靠加 margin 硬救。</li></ol><h4>风格 A · 电子杂志风必查</h4><ol><li><strong>大标题必须是衬线字体</strong>——如果显示成非衬线,99% 是 Step 3.0 预检没做,<code>h-hero</code> 类在 template.html 里缺失</li><li><strong>图片网格里只用 <code>height:Nvh</code>,不用 <code>aspect-ratio</code></strong>(会撑破)</li><li><strong>图片不能堆到页面底部</strong>——不要用 <code>align-self:end</code>,用 grid + <code>align-items:start</code>(见 Step 3.2)</li><li><strong>图片只能用标准比例</strong>(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要复制原图的奇葩比例</li><li><strong>中文大标题 ≤ 5 字且 <code>nowrap</code></strong>(避免 1 字 1 行)</li><li><strong>用 Lucide,不用 emoji</strong></li><li><strong>标题用衬线,正文用非衬线,元数据用等宽</strong></li></ol><h4>风格 B · 瑞士国际主义必查</h4><ol><li><strong>全程无衬线</strong>——任何衬线字体出现都是错的(检查 <code>font-family</code> 没用 <code>--serif</code> 类变量)</li><li><strong>只有一个 accent 色</strong>——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色</li><li><strong>不允许渐变 / 阴影 / 圆角</strong>——所有色块直角纯色,任何 <code>box-shadow</code> / <code>linear-gradient</code> / <code>border-radius</code> > 0 都要砍掉(rule 横线除外)</li><li><strong>极致字号对比</strong>——主标题与正文比例 ≥ 8:1</li><li><strong>大字号必须双约束限高</strong>——<code>font-size:min(Xvw, Yvh)</code>,只用 vw 在标准 16:9 屏会溢出(吸取 P15/P20/P22 教训)</li><li><strong>大字字重 200</strong>(ExtraLight)——字号越大越细,瑞士风灵魂;<strong>禁止</strong> 600/700/800 大字</li><li><strong>卡片填充类型互斥</strong>——<code>card-ink</code> / <code>card-accent</code> / <code>card-fill</code> / <code>card-outlined</code> 四类<strong>不能混用</strong>(禁止"蓝底+蓝描边"、"灰底+描边"等)</li><li><strong>多卡并列时统一样式</strong>——3-12 张卡用同一类(优先 <code>card-fill</code> 灰底);只突出一项时单独换 <code>card-accent</code>,且<strong>只允许一张</strong></li><li><strong>直角到底</strong>——任何 <code>border-radius</code> 都不允许;装饰用 8×8 直角小方块,<strong>不要</strong> 9px 圆形点</li><li><strong>图标用 lucide,不自己画 SVG</strong>——<code><i data-lucide="name"></i></code> + <code>lucide.createIcons()</code>,选棱角风格(避免圆胖)</li><li><strong>时间线对齐</strong>——axis 列固定 12px + dot 绝对定位,<strong>不要</strong>用 grid <code>justify-self</code>(会与虚线错位)</li><li><strong>章节级标题与内容间距 ≥ 9vh</strong>——避免拥挤(吸取 P15/P16 教训)</li><li><strong>每页一个语义化动效 recipe</strong>——不是统一 fade-up,数字 scale 弹入、bar scaleY 拉起、SVG stroke 描线、节点序列点亮等;<strong>禁止</strong>所有页用同一个 generic 配方</li><li><strong>playSlide 入口 reveal 容器</strong>——<code>[data-anim]</code> 容器先强制 opacity:1,recipe 内再用 motion <code>{opacity:[0,1]}</code> 覆盖,否则有些页会"看不见"</li><li><strong>ESC 索引页可见性</strong>——cloned slide 必须有 CSS override 让 <code>[data-anim]</code> 在缩略图里 opacity:1</li><li><strong>Helvetica/Inter 兜底中文字体</strong>——Windows 用户没有"苹方",必须 fallback 到 <code>"Microsoft YaHei UI", "Noto Sans SC"</code></li><li><strong>字体粗细体例</strong>:大字 200 / 正文 300 / <code>t-cat</code> SemiBold 600 / <code>t-meta</code> mono uppercase</li><li><strong>保留低功耗快捷键</strong>——右下角必须提示 <code>B 静态</code>;按 <code>B</code> 切换 <code>body.low-power</code>,停止 WebGL/ASCII canvas RAF 和 Motion 入场动画</li><li><strong>装饰元素严格在 grid 内</strong>——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面</li><li><strong>底部内容预留 nav 空间</strong>——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)</li><li><strong>图片容器直角无阴影</strong>——<code>.frame-img</code> 不加 <code>border-radius</code> / <code>box-shadow</code>;边界只用 hairline</li><li><strong>S15/S16/S22 图片同组一致</strong>——同一组图片统一比例、高度、边距、线条粗细;信息图/UI 图加 <code>.fit-contain</code></li><li><strong>组件角色要正确</strong>——S15/S16 图片格需要 caption 信息锚点;S22 的 KPI/说明是必选;数据专用版式必须有真实数据,不能靠文案硬填</li><li><strong>通用/非通用版式要分清</strong>——S03/S08/S11/S19 较通用;S06/S07/S20/S21/S22 是数据/案例专用;S14/S15/S17 是结构专用</li></ol><h3>Step 5 · 本地预览</h3><p>直接在浏览器打开 <code>index.html</code> 就行。macOS 下：</p><pre><code>open "项目/XXX/ppt/index.html"
</code></pre><p>不需要本地服务器。图片走相对路径 <code>images/xxx.png</code>。</p><h3>Step 6 · 迭代</h3><p>根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 <code>font-size:Xvw</code> / 高度 <code>height:Yvh</code> / 间距 <code>gap:Zvh</code>）。</p><h3>Step 7 · 生成可编辑的 .pptx（可选）</h3><p>如果用户需要可编辑的 PowerPoint 文件（用于 PowerPoint/Keynote/WPS 进一步编辑），可以使用内置脚本将 HTML 转换为 .pptx：</p><p><strong>方案一：Python 脚本（无需浏览器）</strong></p><pre><code>pip install python-pptx
# 风格 A + 墨水经典主题（默认）
python scripts/html_to_pptx.py 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx
# 风格 A + 指定主题
python scripts/html_to_pptx.py 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx A 靛蓝瓷
# 风格 B + IKB蓝主题
python scripts/html_to_pptx.py 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx B IKB蓝
</code></pre><p><strong>方案二：浏览器方案（高精度，推荐）</strong></p><p>使用 Playwright + pptxgenjs，通过浏览器 DOM 的 <code>getBoundingClientRect()</code> 获取精确位置，还原度更高。</p><pre><code>cd scripts/puppeteer
npm install
npx playwright install chromium
# 生成 PPTX
node html_to_pptx_browser.js 项目/XXX/ppt/index.html 项目/XXX/ppt/output.pptx ikb
</code></pre><p><strong>主题选项</strong>（浏览器方案）：</p><ul><li><code>default</code> - 墨水经典</li><li><code>ikb</code> - IKB 克莱因蓝</li><li><code>lemon</code> - 柠檬黄</li><li><code>green</code> - 柠檬绿</li><li><code>orange</code> - 安全橙</li></ul><p><strong>方案对比</strong>：</p><table><thead><tr><th>方案</th><th>精度</th><th>依赖</th><th>适合场景</th></tr></thead><tbody><tr><td>------</td><td>------</td><td>------</td><td>----------</td></tr><tr><td>Python 脚本</td><td>★★★☆☆ CSS 类名推断</td><td>python-pptx</td><td>批量处理、无需浏览器</td></tr><tr><td>浏览器方案</td><td>★★★★★ getBoundingClientRect</td><td>Node.js + Playwright</td><td>高还原度需求</td></tr></tbody></table><p><strong>详细说明</strong>见 <code>references/pptx-guide.md</code>。</p><hr><h2>资源文件导览</h2><pre><code>guizang-ppt-skill/
├── SKILL.md ← 你正在读
├── assets/
│ ├── template.html ← 风格 A · 电子杂志风模板（种子文件）
│ ├── template-swiss.html ← 风格 B · 瑞士国际主义风模板（种子文件）
│ ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套
│ └── motion.min.js ← Motion One 本地副本（离线兜底,约 64KB,共用）
├── scripts/
│ ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐
│ └── html_to_pptx.py ← HTML → .pptx 转换脚本（生成可编辑 PowerPoint）
└── references/
├── components.md ← 组件手册（字体、色、网格、图标、callout、stat、pipeline、动效... 风格 A 适用）
├── layouts.md ← 风格 A · 10 种页面布局骨架（可直接粘贴,含动效标记）
├── swiss-layout-lock.md ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记
├── layouts-swiss.md ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区
├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)
├── themes.md ← 风格 A · 5 套主题色预设（只能选不能自定义）
├── themes-swiss.md ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）
├── image-prompts.md ← GPT-M 2.0 配图类型、比例和基础提示词
├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射
├── pptx-guide.md ← HTML → .pptx 转换指南（生成可编辑 PowerPoint）
└── checklist.md ← 质量检查清单（P0/P1/P2/P3 分级）
</code></pre><p><strong>加载顺序建议</strong>：</p><ol><li>先读完 <code>SKILL.md</code>(这个文件)了解整体</li><li>Step 1 需求澄清<strong>第一问</strong>先确定风格 A 还是 B,然后:</li><ul><li>风格 A:读 <code>themes.md</code> 帮用户选一套主题色</li><li>风格 B:读 <code>themes-swiss.md</code> 帮用户选一套主题色</li></ul><li><strong>动手前 Read 对应模板的 <code><style></code> 块</strong>——这是类名的唯一来源,缺类会导致整页样式崩</li><ul><li>风格 A → <code>assets/template.html</code></li><li>风格 B → <code>assets/template-swiss.html</code></li></ul><li>读对应的 layouts 文件挑布局:</li><ul><li>风格 A → <code>layouts.md</code>(顶部有 Pre-flight 类名清单、主题节奏规划、动效 recipe 决策树)</li><li>风格 B → <strong>先读 <code>swiss-layout-lock.md</code></strong>,再读 <code>layouts-swiss.md</code>;正文页必须从 S01-S22 选择,每页写 <code>data-layout</code></li></ul><li>如果风格 B 需要地点、路线、人物住所或城市关系地图,读 <code>swiss-map-component.md</code></li><li>如果在 Codex 中生成配图,读 <code>image-prompts.md</code> 挑图片类型、比例和基础提示词;如果是用户原始截图,先读 <code>screenshot-framing.md</code>,优先使用 <code>assets/screenshot-backgrounds/</code> 的内置背景资产</li><li>细节调整时读 <code>components.md</code> 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 <code>layouts-swiss.md</code> 附录)</li><li>生成后先运行 <code>node scripts/validate-swiss-deck.mjs path/to/index.html</code>,再读 <code>checklist.md</code> 自检</li></ol><p><strong>动效相关</strong>:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 <code>layouts.md</code> / <code>layouts-swiss.md</code> 的骨架在 HTML 里加 <code>data-anim</code> / <code>data-animate</code> 即可。离线演示靠 <code>assets/motion.min.js</code>,断网时自动降级为"无动画但内容可读"。风格 B 模板必须保留 <code>B</code> 键低功耗模式:切换后停止 WebGL/ASCII canvas RAF,取消正在运行的 Web Animations,并把当前页内容直接 reveal 到静态最终态。</p><h2>核心设计原则（哲学）</h2><h3>风格 A · 电子杂志风（5 轮迭代总结）</h3><p>> 违反其中任何一条，杂志感都会垮。</p><ol><li><strong>克制优于炫技</strong> — WebGL 背景只在 hero 页透出，普通页几乎看不见</li><li><strong>结构优于装饰</strong> — 不用阴影、不用浮动卡片、不用 padding box，一切信息靠<strong>大字号 + 字体对比 + 网格留白</strong></li><li><strong>内容层级由字号和字体共同定义</strong> — 最大衬线 = 主标题，中衬线 = 副标，大非衬线 = lead，小非衬线 = body，等宽 = 元数据</li><li><strong>图片是第一公民</strong> — 图片只裁底部，保证顶部和左右完整；网格用 <code>height:Nvh</code> 固定，不要用 <code>aspect-ratio</code> 撑</li><li><strong>节奏靠 hero 页</strong> — hero 和 non-hero 交替，才不累眼睛</li><li><strong>术语统一</strong> — Skills 就是 Skills，不要中英混合翻译</li></ol><h3>风格 B · 瑞士国际主义风</h3><p>> 违反其中任何一条，画面瞬间从瑞士掉到 PowerPoint。</p><ol><li><strong>单一锚点色</strong> — 一份 deck 只用一个 accent，不允许多色高亮拼贴</li><li><strong>极致字号对比</strong> — 主标题与正文比例 ≥ 8:1,KPI 必须是"Data Hero"(屏幕宽度的 18-22%)</li><li><strong>无衬线只此一家</strong> — Inter / Helvetica / Noto Sans SC,任何衬线都是错的</li><li><strong>直角纯色</strong> — 不允许渐变 / 阴影 / 圆角(rule 横线除外)</li><li><strong>网格至上</strong> — 所有元素吸附到 12-col grid,左对齐 + 大幅留白做非对称美学</li><li><strong>Hairline 是手术刀</strong> — 1px 的极细分割线就够,不要加粗、不要加阴影</li><li><strong>点阵装饰只在 hero 页透出</strong> — 正文页保持纯净底色</li></ol><h2>参考作品</h2><p>本 skill 的两种风格分别参考了：</p><p><strong>风格 A · 电子杂志风</strong>:</p><ul><li>歸藏 "一人公司：被 AI 折叠的组织" 分享（2026-04-22，27 页）</li><li><em>Monocle</em> 杂志的版式</li><li>YC 总裁 Garry Tan "Thin Harness, Fat Skills" 那篇博客的 demo</li></ul><p><strong>风格 B · 瑞士国际主义风</strong>:</p><ul><li>Massimo Vignelli 的 NYC Subway / Unimark 系统</li><li><em>Helvetica Forever</em> 的字体设计语言</li><li>Josef Müller-Brockmann 的网格系统经典著作</li><li>当代设计:Acne Studios / Off-White / IKEA / Beck Design</li></ul><p>可以把它们当做风格锚点。</p></div>
</div>
</div>
<div id="tab-versions" class="detail-content">
<div class="detail-section">
<h2>版本历史</h2>
<p style="margin-bottom:12px;font-size:14px;color:#94a3b8;">共 1 个版本</p>
<ul class="version-list">
<li>
<div>
<span class="version-tag">v1.0.0</span>
<span style="font-size:13px;color:#64748b;margin-left:8px;">Initial release</span> <span style="font-size:11px;color:#5b6abf;margin-left:8px;background:#eef0ff;padding:1px 8px;border-radius:10px;">当前</span> </div>
<div style="font-size:12px;color:#94a3b8;">
2026-05-19 15:38 安全 安全 </div>
</li>
</ul>
</div>
</div>
<div id="tab-security" class="detail-content">
<div class="detail-section">
<h2>安全检测</h2>
<div class="sec-grid"> <div class="sec-card">
<h4>腾讯云安全 (Keen)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://tix.qq.com/search/skill?keyword=5cdceda55b6322f6250433022f941065" target="_blank">查看报告</a> </div>
<div class="sec-card">
<h4>腾讯云安全 (Sanbu)</h4>
<div class="sec-status sec-safe">
安全，无风险 </div>
<a href="https://static.cloudsec.tencent.com/html-report-v2/2026/05/26/460910_171a1a3fad798908dca6adc3d9b35c44.html?q-sign-algorithm=sha1&q-ak=AKID8JMG1bzBC1dz96qNhssfFftujT1NCoFi&q-sign-time=1782199028%3B1813735028&q-key-time=1782199028%3B1813735028&q-header-list=host&q-url-param-list=&q-signature=24c9a7eab10e1c3e444656708c4d9acf512e51c3" target="_blank">查看报告</a> </div>
</div>
</div>
</div>
<!-- Recommended Skills -->
<div style="margin-top:24px;">
<h2 style="font-size:18px;font-weight:600;margin-bottom:16px;">🔗 相关推荐</h2>
<div class="rec-grid">
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">office-efficiency</span>
<h3><a href="/s/gog">Gog</a></h3>
<div class="rec-owner">steipete</div> <div class="rec-desc">Google Workspace 命令行工具，支持 Gmail、日历、云端硬盘、通讯录、表格和文档。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 929</span>
<span style="color:#5b6abf;">📥 187,021</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">design-media</span>
<h3><a href="/s/poster-generate">海报生成</a></h3>
<div class="rec-owner">user_6401b215</div> <div class="rec-desc">专业海报与设计生成器。当你需要“做一张海报”、“生成封面”、“设计书籍封面”或任何视觉设计请求时使用。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 3</span>
<span style="color:#5b6abf;">📥 1,832</span>
</div>
</div>
<div class="rec-card">
<span class="badge-cat" style="margin-bottom:8px;display:inline-block;">office-efficiency</span>
<h3><a href="/s/excel-xlsx">Excel / XLSX</a></h3>
<div class="rec-owner">ivangdavila</div> <div class="rec-desc">创建、检查和编辑 Microsoft Excel 工作簿及 XLSX 文件，支持可靠的公式、日期、类型、格式、重算及模板保留功能。</div>
<div class="rec-stats">
<span style="color:#f39c12;">★ 382</span>
<span style="color:#5b6abf;">📥 145,428</span>
</div>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.querySelectorAll('.detail-tab').forEach(function(btn){
btn.addEventListener('click',function(e){
var tab = this.getAttribute('data-tab');
document.querySelectorAll('.detail-tab').forEach(function(b){b.classList.remove('active')});
document.querySelectorAll('.detail-content').forEach(function(c){c.classList.remove('active')});
this.classList.add('active');
var el = document.getElementById('tab-'+tab);
if(el) el.classList.add('active');
});
});
});
</script>
<div class="footer">
<p>Skill工具集 © 2026</p>
</div></body>
</html> |