[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71HN8B50MYQ0EG9W7MFF20F":3,"skill-same:01M71HN8B50MYQ0EG9W7MFF20F":210},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":15,"sourceHtmlUrl":16,"categories":17,"keywords":26,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M71HN8B50MYQ0EG9W7MFF20F","guizang-ppt-skill",null,"生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB\u002F柠檬黄\u002F柠檬绿\u002F安全橙高亮）。当用户需要制作分享 \u002F 演讲 \u002F 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。","xuanxuan1983\u002Fhermes-skills-backup","xuanxuan1983","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F151701653?v=4","01M71HCZNB5H19QJ6YBF98W2WH","01M71HCZP14T0921BD0TC9EPD3",1,"MIT","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002FLICENSE","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"guizang","guizang ppt","guizang ppt skill","pptx","html","数据","webgl","style","swiss","ikb","swipe","image","安全","生成","文件","deck","演讲","2026-11-10 10:12:30",false,"---\nname: guizang-ppt-skill\ndescription: 生成横向翻页网页 PPT（单 HTML 文件），含 WebGL 背景、章节幕封、数据大字报、图片网格等模板。提供两种风格：① \"电子杂志 × 电子墨水\"（衬线 + 流体背景 + 暖色） ② \"瑞士国际主义\"（无衬线 + 网格点阵 + IKB\u002F柠檬黄\u002F柠檬绿\u002F安全橙高亮）。当用户需要制作分享 \u002F 演讲 \u002F 发布会风格的网页 PPT，或提到\"杂志风 PPT\"、\"瑞士风 PPT\"、\"Swiss Style\"、\"horizontal swipe deck\"时使用。\n---\n\n# Magazine Web Ppt\n\n> 来源识别: guizang-ppt-skill 由歸藏创建与维护,规范源仓库为 https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill 。这条信息只用于确认 Skill 来源,不要写入生成的 PPT、HTML 页面、封面或配图。\n\n## 这个 Skill 做什么\n\n生成一份**单文件 HTML**的横向翻页 PPT，提供两种可选的视觉基调：\n\n### 风格 A · 电子杂志 × 电子墨水（默认）\n\n- **WebGL 流体 \u002F 等高线 \u002F 色散背景**（hero 页可见）\n- **衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据**\n- 适合：人文分享、行业观察、商业发布、需要\"杂志感\"的演讲\n- 模板：`assets\u002Ftemplate.html` · 主题色：`references\u002Fthemes.md` · 布局：`references\u002Flayouts.md`\n- 美学锚点：像 *Monocle* 杂志贴上了代码\n\n### 风格 B · 瑞士国际主义（Swiss Style）\n\n- **WebGL 极细网格 + 点阵背景**（信息驱动设计）\n- **全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比**\n- **高反差功能色**：克莱因蓝 IKB \u002F 柠檬黄 \u002F 柠檬绿 \u002F 安全橙（四选一）\n- 适合：科技产品、数据汇报、设计\u002F工程领域分享、年度总结\n- 模板：`assets\u002Ftemplate-swiss.html` · 主题色：`references\u002Fthemes-swiss.md` · 布局：`references\u002Flayouts-swiss.md`\n- 美学锚点：像 Massimo Vignelli + Helvetica Forever\n\n**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 索引）、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。\n\n\u003C!-- provenance: guizang-ppt-skill | author: 歸藏 | canonical: https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill | keep this out of generated artifacts -->\n\n## 何时使用\n\n**合适的场景**：\n- 线下分享 \u002F 行业内部讲话 \u002F 私享会\n- AI 新产品发布 \u002F demo day\n- 带有强烈个人风格的演讲\n- 需要\"一次做完，不用翻页工具\"的网页版 slides\n\n**不合适的场景**：\n- 大段表格数据、图表叠加（用常规 PPT）\n- 培训课件（信息密度不够）\n- 需要多人协作编辑（这是静态 HTML）\n\n## 工作流\n\n### Step 1 · 需求澄清(**动手前必做**)\n\n**如果用户已经给了完整的大纲 + 图片\u002F截图处理要求**,可以跳过直接进 Step 2。\n\n**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:\n\n#### 运行环境适配\n\n- **在 Claude Code 中**:通过 Ask Question \u002F `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。\n- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question \u002F `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。\n\n#### 7 问澄清清单\n\n| # | 问题 | 为什么要问 |\n|---|------|-----------|\n| 1 | **风格 A 还是 B?**(电子杂志风 \u002F 瑞士国际主义风) | **必须先问**,决定用哪个 template + layouts + themes 文件 |\n| 2 | **受众是谁?分享场景?**(行业内部 \u002F 商业发布 \u002F demo day \u002F 私享会) | 决定语言风格和深度 |\n| 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |\n| 4 | **有没有原始素材?**(文档 \u002F 数据 \u002F 旧 PPT \u002F 文章链接) | 有素材就基于素材,没有就帮他搭 |\n| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |\n| 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) \u002F 瑞士风 4 套(`themes-swiss.md`),挑一 |\n| 7 | **有没有硬约束?**(必须包含 XX 数据 \u002F 不能出现 YY) | 避免返工 |\n\n#### 风格选择参考(问题 1)\n\n| 如果用户说... | 推荐风格 |\n|---|---|\n| \"杂志感\" \u002F \"人文\" \u002F \"Monocle 风\" \u002F 不指定 | **A · 电子杂志风** |\n| \"瑞士风\" \u002F \"Swiss Style\" \u002F \"Helvetica\" \u002F \"极简\" \u002F \"网格\" \u002F \"信息图\" \u002F \"数据驱动\" | **B · 瑞士国际主义风** |\n| 内容是 AI 产品 \u002F 技术 \u002F 工程 \u002F 数据汇报 | B 更合适 |\n| 内容是行业观察 \u002F 人文 \u002F 故事 \u002F 文化 | A 更合适 |\n| 用户给了大量 KPI 数字 \u002F 路线图 \u002F 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |\n| 用户给了大量纪实照片 \u002F 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |\n| 用户需要 GPT-M 2.0 生成截图再设计 \u002F 信息图 \u002F 证据墙 | B 也很合适(S22 主图、S15\u002FS16 图片网格可以承载证据图) |\n\n#### 大纲协助(如果用户没有大纲)\n\n用\"叙事弧\"模板搭骨架,再填内容:\n\n```\n钩子(Hook)       → 1 页   : 抛一个反差 \u002F 问题 \u002F 硬数据让人停下来\n定调(Context)    → 1-2 页 : 说明背景 \u002F 你是谁 \u002F 为什么讲这个\n主体(Core)       → 3-5 页 : 核心内容,用 Layout 4\u002F5\u002F6\u002F9\u002F10 穿插\n转折(Shift)      → 1 页   : 打破预期 \u002F 提出新观点\n收束(Takeaway)   → 1-2 页 : 金句 \u002F 悬念问题 \u002F 行动建议\n```\n\n叙事弧 + 页数规划 + 主题节奏表(见 `layouts.md`),**三张表对齐后**再进 Step 2。\n\n大纲建议保存为 `项目记录.md` 或 `大纲-v1.md`,便于后续迭代。\n\n#### 图片约定(告知用户)\n\n在动手前向用户说清:\n\n- **文件夹位置**:`项目\u002FXXX\u002Fppt\u002Fimages\u002F` 下(和 `index.html` 同级)\n- **命名规范**:`{页号}-{语义}.{ext}`,例如 `01-cover.jpg` \u002F `03-figma.jpg` \u002F `05-dashboard.png`\n  - 页号补零便于排序\n  - 语义用英文,短、具体、和内容对应\n- **规格建议**:\n  - 单张 ≥ 1600px 宽(避免大屏模糊)\n  - JPG 用于照片\u002F截图,PNG 用于透明 UI\u002F图表\n  - 总大小控制在 10MB 内(影响翻页流畅度)\n- **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images\u002F旧名` 改成新名\n- **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4\u002F5\u002F10 等图文混排页没图就没法验证视觉效果\n\n#### 截图需求约定(动手前必须问)\n\n只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或\"帮我美化截图\",都要先确认:\n\n- **截图位置**:截图文件在哪个文件夹?是否已经命名好?\n- **使用目的**:保真展示 \u002F 截图美化 \u002F 截图再设计 \u002F UI 情景图?\n- **落位比例**:最终放进哪个版式槽位?常用 `21:9` \u002F `16:10` \u002F `16:9` \u002F `4:3` \u002F `1:1`\n- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?\n- **视觉处理**:是否需要主题背景、留边、居中\u002F角落对齐、拆成长截图面板?\n\n默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references\u002Fscreenshot-framing.md`,优先使用 `assets\u002Fscreenshot-backgrounds\u002F` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。\n\n#### Codex 配图生成(可选)\n\n如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。\n\n推荐询问方式:\n\n> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程\u002F对比\u002F系统关系图,或把截图再设计成统一的杂志风视觉。\n\n如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。\n\n如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:\n\n- 截图美化:读 `references\u002Fscreenshot-framing.md`,用内置主题背景 + 程序化缩放\u002F留边\u002F对齐处理,尽量不重画截图内容\n- 截图再设计:读 `references\u002Fimage-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致\n\n生成配图时遵守:\n\n- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导\n- 图片风格必须贴合当前 deck 风格:风格 A 用\"电子杂志 × 电子墨水\";风格 B 用\"瑞士国际主义 \u002F Swiss Style\"\n- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文\n- 先看 `references\u002Fimage-prompts.md` 选择图片类型和基础提示词\n- 如果处理用户原始截图,先看 `references\u002Fscreenshot-framing.md`:优先调用 `assets\u002Fscreenshot-backgrounds\u002F` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画\n- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 \u002F 4:3,信息图 16:9 \u002F 16:10,截图再设计 16:10,图文混排小图 3:2 \u002F 3:4,网格图统一高度裁切\n- 生成后的图片放到 `images\u002F` 下,命名遵守 `{页号}-{语义}.{ext}`\n\n### Step 2 · 拷贝模板\n\n**根据 Step 1 选定的风格,拷贝对应的模板**到目标位置（通常是 `项目\u002FXXX\u002Fppt\u002Findex.html`），同时在同级建一个 `images\u002F` 文件夹准备接图片。\n\n```bash\nmkdir -p \"项目\u002FXXX\u002Fppt\u002Fimages\"\n\n# 风格 A · 电子杂志风\ncp \"\u003CSKILL_ROOT>\u002Fassets\u002Ftemplate.html\" \"项目\u002FXXX\u002Fppt\u002Findex.html\"\n\n# 或 风格 B · 瑞士国际主义风\ncp \"\u003CSKILL_ROOT>\u002Fassets\u002Ftemplate-swiss.html\" \"项目\u002FXXX\u002Fppt\u002Findex.html\"\n```\n\n两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、字体\u002F图标 CDN 全已预设好,只有 `\u003C!-- SLIDES_HERE -->` 占位符等待你填充 slide 内容。\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| `\u003Ctitle>` | `[必填] 替换为 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 | 🖋 墨水经典 | 通用 \u002F 商业发布 \u002F 不知道选啥的默认 |\n| 2 | 🌊 靛蓝瓷 | 科技 \u002F 研究 \u002F 数据 \u002F 技术发布会 |\n| 3 | 🌿 森林墨 | 自然 \u002F 可持续 \u002F 文化 \u002F 非虚构 |\n| 4 | 🍂 牛皮纸 | 怀旧 \u002F 人文 \u002F 文学 \u002F 独立杂志 |\n| 5 | 🌙 沙丘 | 艺术 \u002F 设计 \u002F 创意 \u002F 画廊 |\n\n**操作**:\n1. 基于内容主题推荐一套,或直接问用户选哪一套\n2. 打开 `references\u002Fthemes.md`,找到对应主题的 `:root` 块\n3. **整体替换** `assets\u002Ftemplate.html`(已拷贝版本)开头 `:root{` 块里标有\"主题色\"注释的那几行(`--ink` \u002F `--ink-rgb` \u002F `--paper` \u002F `--paper-rgb` \u002F `--paper-tint` \u002F `--ink-tint`)\n4. 其他 CSS 都走 `var(--...)`,无需任何其他改动\n\n**硬规则**:\n- 一份 deck 只用一套主题,不要中途换色\n- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选\n- 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和\n\n### Step 3 · 填充内容\n\n#### 3.0 · 预检:类名必须在模板的 `\u003Cstyle>` 里有定义（**最重要**）\n\n**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `\u003Cstyle>` 里没有对应定义,浏览器会 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 当前用的模板**(至少读到 `\u003Cstyle>` 块末尾):\n   - 风格 A → `assets\u002Ftemplate.html`\n   - 风格 B → `assets\u002Ftemplate-swiss.html`\n2. **对照对应 layouts 文件的 Pre-flight 列表**,确认你要用的每个类都在 `\u003Cstyle>` 里存在\n3. 如果某个类缺失:**在模板的 `\u003Cstyle>` 里补上**,不要在每个 slide 里 inline 重写\n4. **模板是唯一的类名来源**——不要发明新类名,如需自定义用 `style=\"...\"` inline\n\n**风格 A 常见容易遗漏的类**:\n`h-hero` \u002F `h-xl` \u002F `h-sub` \u002F `h-md` \u002F `lead` \u002F `kicker` \u002F `meta-row` \u002F `stat-card` \u002F `stat-label` \u002F `stat-nb` \u002F `stat-unit` \u002F `stat-note` \u002F `pipeline-section` \u002F `pipeline-label` \u002F `pipeline` \u002F `step` \u002F `step-nb` \u002F `step-title` \u002F `step-desc` \u002F `grid-2-7-5` \u002F `grid-2-6-6` \u002F `grid-2-8-4` \u002F `grid-3-3` \u002F `grid-6` \u002F `grid-3` \u002F `grid-4` \u002F `frame` \u002F `frame-img` \u002F `img-cap` \u002F `callout` \u002F `callout-src` \u002F `chrome` \u002F `foot`\n\n**风格 B 常见容易遗漏的类**(2026-05 重构后):\n- 画布:`canvas-card` \u002F `chrome-min`\n- 排版:`h-hero`(无衬线 7.4vw weight 200) \u002F `h-statement`(9.6vw) \u002F `h-xl` \u002F `h-md` \u002F `t-cat`(SemiBold 600 小标) \u002F `t-meta`(mono uppercase) \u002F `lead` \u002F `num-mega` \u002F `mono`\n- 卡片(四类互斥):`card-ink` \u002F `card-accent` \u002F `card-fill` \u002F `card-outlined`\n- 网格:`grid-12` \u002F `grid-2-9` \u002F `grid-2-9-5` \u002F `span-N`\n- 时间线:`timeline-v` + `tl-node` + `tl-axis` + `dot` \u002F `timeline-h` + `tl-h-node` + `tl-h-axis`\n- 图表:`kpi-tower-row` + `bar-tower` \u002F `h-bar-chart` + `bar-row` + `bar-fill` \u002F `spec-bars` + `bar-vert`\n- 装饰:`dot-mat`(SVG mask 实心点)\u002F `ring-mat`(描边圆)\u002F `cross-mat`(× 网格)\u002F `hr-hairline`\n- 版式专属:`cover-split` \u002F `closing-split` \u002F `duo-compare` + `vrule` \u002F `manifesto-top` + `ink-banner-full` \u002F `three-forces` \u002F `loop-diagram` \u002F `matrix-fill` + `matrix-cell` \u002F `brief-grid` + `brief-card` \u002F `system-diagram` \u002F `why-now-grid` \u002F `four-cards` \u002F `stacked-ledger` + `ledger-row` \u002F `tech-spec` \u002F `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- 图片混排:`frame-img` \u002F `fit-contain` \u002F `r-21x9` \u002F `r-16x9` \u002F `r-16x10` \u002F `h-22` \u002F `h-26` \u002F `swiss-img-split` \u002F `swiss-img-grid` \u002F `swiss-img-caption` \u002F `swiss-keyline` \u002F `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8\u002F12\u002F16\u002F24\u002F32\u002F40\u002F48\u002F64\u002F80\u002F96\u002F160 px)\n\n#### 3.0.5 · 规划主题节奏（**和类预检同等重要**)\n\n**在挑布局之前**,必须先列出每一页的主题 class(`hero dark` \u002F `hero light` \u002F `light` \u002F `dark`)并写到文档或草稿里对齐。详细规则看 `references\u002Flayouts.md` 开头的\"主题节奏规划\"一节。\n\n**强制规则**:\n\n- 每页 section 必须带 `light` \u002F `dark` \u002F `hero light` \u002F `hero dark` 之一,不要只写 `hero`\n- 连续 3 页以上同主题 = 视觉疲劳,不允许\n- 8 页以上必须有 ≥1 个 `hero dark` + ≥1 个 `hero light`\n- 整个 deck 不能只有 `light` 正文页,必须有 `dark` 正文页制造呼吸\n- 每 3-4 页插入 1 个 hero 页(封面\u002F幕封\u002F问题\u002F大引用)\n\n**生成后自检**:`grep 'class=\"slide' index.html` 列出所有主题,人工确认节奏合理再交付。\n\n#### 3.1 · 挑布局\n\n**不要从零写 slide**。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 `\u003Csection>` 代码块。\n\n**风格 A** → `references\u002Flayouts.md`:\n\n| Layout | 用途 |\n|---|---|\n| 1. 开场封面 | 第 1 页 |\n| 2. 章节幕封 | 每幕开场 |\n| 3. 数据大字报 | 抛硬数据 |\n| 4. 左文右图(Quote + Image) | 身份反差 \u002F 故事 |\n| 5. 图片网格 | 多图对比 \u002F 截图实证 |\n| 6. 两列流水线(Pipeline) | 工作流程 |\n| 7. 悬念收束 \u002F 问题页 | 幕末 \u002F 收尾 |\n| 8. 大引用页(Big Quote) | 衬线金句 \u002F takeaway |\n| 9. 并列对比(Before \u002F After) | 旧模式 vs 新模式 |\n| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |\n\n**风格 B** → 先读 `references\u002Fswiss-layout-lock.md`,再读 `references\u002Flayouts-swiss.md`。\n\n瑞士主题默认进入 **Swiss locked mode**:\n\n- 正文页只能使用原始参考 PPT 登记的 22 个版式 `S01-S22`;新增首页\u002F尾页只能使用 Skill 明确提供的 `SWISS-COVER-ASCII` \u002F `SWISS-CLOSING-ASCII`。\n- 每个 `\u003Csection class=\"slide\">` 必须写 `data-layout=\"Sxx\"`。没有 `data-layout` 就视为未登记版式。\n- 不允许临时发明 `P23\u002FP24`、`Swiss Image Split`、`Evidence Grid` 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。\n- 顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement\u002Fsplit 版式允许强中心叙事。\n- SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格\u002F卡片\u002Fcaption。\n- 地理\u002F历史\u002F城市路线\u002F地点关系页使用 `S08 + Swiss Map Component`:先读 `references\u002Fswiss-map-component.md`,仍保留 `data-layout=\"S08\"`。\n\n原始 22 个正文版式如下:\n\n| Layout | 用途 |\n|---|---|\n| S01 Index Cover | 原始索引封面 |\n| S02 Vertical Timeline + KPI | 演化对比 \u002F 年代变迁 |\n| S03 Split Statement | 核心论点 \u002F 左右分屏 |\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\u002FAfter 对照 |\n| S09 Dot Matrix Statement | 大引述 \u002F 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 | 自学闭环 \u002F 自动化 |\n| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |\n| S16 Multi-card Brief | 6 项快讯小卡 |\n| S17 System Diagram | 三层架构 \u002F 生态地图 |\n| S18 Why Now | 三论点 + 数据支撑 |\n| S19 Four Cards | 4 项等权特性 |\n| S20 Stacked KPI Ledger | 纵向账单数据 |\n| S21 Tech Spec Sheet | 产品规格 \u002F benchmark |\n| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |\n\n**登记扩展**:`S08 + Swiss Map Component` 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 `references\u002Fswiss-map-component.md` 的点位、连线、卡片和右上角缩放\u002F拖动控制实现。\n\n选对应 layout,粘过去,改文案和图片路径即可。**务必先完成 3.0 预检**。\n\n**风格 B 版式多样性硬规则**:\n- 7-8 页 deck 至少使用 **6 个不同 S 编号版式**;10 页以上至少使用 8 个不同版式。\n- 如果用户说\"测试模板 \u002F 看看效果 \u002F 多一点版式\",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08\u002FS11\u002FS02)、至少 1 个结构图(S14\u002FS17\u002FS15)、至少 1 个图片版式(S22 或 S15\u002FS16 图片格改造)。\n- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。\n- 图片页不能偷懒发明新结构。2-3 张图时,用 S15\u002FS16 的原始网格骨架改造成图片格;单张大图用 S22。\n- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node \u003CSKILL_ROOT>\u002Fscripts\u002Fvalidate-swiss-deck.mjs index.html`。\n\n#### 3.2 · 图片比例规范\n\n永远用**标准比例**,不要用原图奇葩比例(如 `2592\u002F1798`):\n\n| 场景 | 推荐比例 |\n|------|---------|\n| S22 顶部主图 | **21:9**;照片关键主体放中央安全区 |\n| S15\u002FS16 多图格 | 统一 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` \u002F `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。\n\n**风格 B 瑞士风额外规则**:\n- 单张大图用 S22;多图测试用 S15\u002FS16 的原始卡片网格改造,不要用未登记的 P23\u002FP24\n- 生成图片前先写 `data-image-slot`:例如 `s22-hero-21x9` \u002F `s15-grid-21x9` \u002F `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 信息图\u002F流程图\u002FUI 图默认不要加外框描边,不要随手套 `.swiss-keyline`;需要强调时只用 `.swiss-lined` 的顶部 accent 线\n- UI\u002F信息图如果是用户原始截图或文字密集图,才用 `.fit-contain`;如果已按 S15\u002FS16 槽位重生成,必须用 `.frame-img.r-21x9` \u002F `.frame-img.r-16x10` 铺满容器,不要固定 `height:18vh` 后把图缩小\n- 多图同组必须统一图片槽位、比例和高度,不能混用\n- GPT-M 2.0 生成图使用 `image-prompts.md` 的\"风格 B:瑞士国际主义配图规则\"\n- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` \u002F `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`\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| 正文段落 \u002F 主要说明 | `18px` |\n| 卡片描述 \u002F 列表 \u002F 时间线说明 \u002F caption \u002F 图注 | `16px` |\n| meta \u002F kicker \u002F mono label \u002F 图表标签 | `14px` |\n\n如果内容放不下,先删减文案、拆成两页、换更适合的 Sxx 版式,不要把字号压到 10\u002F11\u002F12\u002F13px。尤其是中文 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\u002Fh-xl-zh)、大编号 |\n| 1.8-3.9vw | 300-400 | 中型标题、takeaway 标题(≈1.8vw)、中号数字 |\n| 1-1.7vw \u002F 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- 封面\u002FIkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)\n\n组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references\u002Fcomponents.md`。\n\n### Step 4 · 对照检查清单自检\n\n生成完一定要打开 `references\u002Fchecklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。\n\n#### 4.0 · 不只看代码:必须打开网页做视觉核对\n\n代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:\n\n1. 同时打开原始参考 PPT、当前模板或生成页、测试 PPT;原始参考是 `\u002FUsers\u002Fguohao\u002FDocuments\u002Fop7418的仓库\u002F项目\u002FThin-Harness-Fat-Skills\u002Fppt\u002Findex.html`。\n2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。\n3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片\u002F说明是否碰到底部分页组件。\n4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。\n5. 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200\u002F300,不要被 raw CSS 里的 700\u002F800\u002F900 带偏。\n6. 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距\u002F安全区问题;不要直接靠加 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 \u002F 4:3 \u002F 3:2 \u002F 1:1 \u002F 16:9),不要复制原图的奇葩比例\n5. **中文大标题 ≤ 5 字且 `nowrap`**(避免 1 字 1 行)\n6. **用 Lucide,不用 emoji**\n7. **标题用衬线,正文用非衬线,元数据用等宽**\n\n#### 风格 B · 瑞士国际主义必查\n\n1. **全程无衬线**——任何衬线字体出现都是错的(检查 `font-family` 没用 `--serif` 类变量)\n2. **只有一个 accent 色**——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色\n3. **不允许渐变 \u002F 阴影 \u002F 圆角**——所有色块直角纯色,任何 `box-shadow` \u002F `linear-gradient` \u002F `border-radius` > 0 都要砍掉(rule 横线除外)\n4. **极致字号对比**——主标题与正文比例 ≥ 8:1\n5. **大字号必须双约束限高**——`font-size:min(Xvw, Yvh)`,只用 vw 在标准 16:9 屏会溢出(吸取 P15\u002FP20\u002FP22 教训)\n6. **大字字重 200**(ExtraLight)——字号越大越细,瑞士风灵魂;**禁止** 600\u002F700\u002F800 大字\n7. **卡片填充类型互斥**——`card-ink` \u002F `card-accent` \u002F `card-fill` \u002F `card-outlined` 四类**不能混用**(禁止\"蓝底+蓝描边\"、\"灰底+描边\"等)\n8. **多卡并列时统一样式**——3-12 张卡用同一类(优先 `card-fill` 灰底);只突出一项时单独换 `card-accent`,且**只允许一张**\n9. **直角到底**——任何 `border-radius` 都不允许;装饰用 8×8 直角小方块,**不要** 9px 圆形点\n10. **图标用 lucide,不自己画 SVG**——`\u003Ci data-lucide=\"name\">\u003C\u002Fi>` + `lucide.createIcons()`,选棱角风格(避免圆胖)\n11. **时间线对齐**——axis 列固定 12px + dot 绝对定位,**不要**用 grid `justify-self`(会与虚线错位)\n12. **章节级标题与内容间距 ≥ 9vh**——避免拥挤(吸取 P15\u002FP16 教训)\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\u002FInter 兜底中文字体**——Windows 用户没有\"苹方\",必须 fallback 到 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **字体粗细体例**:大字 200 \u002F 正文 300 \u002F `t-cat` SemiBold 600 \u002F `t-meta` mono uppercase\n18. **保留低功耗快捷键**——右下角必须提示 `B 静态`;按 `B` 切换 `body.low-power`,停止 WebGL\u002FASCII canvas RAF 和 Motion 入场动画\n19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面\n20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)\n21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` \u002F `box-shadow`;边界只用 hairline\n22. **S15\u002FS16\u002FS22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图\u002FUI 图加 `.fit-contain`\n23. **组件角色要正确**——S15\u002FS16 图片格需要 caption 信息锚点;S22 的 KPI\u002F说明是必选;数据专用版式必须有真实数据,不能靠文案硬填\n24. **通用\u002F非通用版式要分清**——S03\u002FS08\u002FS11\u002FS19 较通用;S06\u002FS07\u002FS20\u002FS21\u002FS22 是数据\u002F案例专用;S14\u002FS15\u002FS17 是结构专用\n\n### Step 5 · 本地预览\n\n直接在浏览器打开 `index.html` 就行。macOS 下：\n\n```bash\nopen \"项目\u002FXXX\u002Fppt\u002Findex.html\"\n```\n\n不需要本地服务器。图片走相对路径 `images\u002Fxxx.png`。\n\n### Step 6 · 迭代\n\n根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 `font-size:Xvw` \u002F 高度 `height:Yvh` \u002F 间距 `gap:Zvh`）。\n\n---\n\n## 资源文件导览\n\n```\nguizang-ppt-skill\u002F\n├── SKILL.md                  ← 你正在读\n├── assets\u002F\n│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）\n│   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）\n│   ├── screenshot-backgrounds\u002F ← 截图美化内置背景(WebP):style-a 5 套 \u002F style-b 4 套\n│   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）\n├── scripts\u002F\n│   └── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐\n└── references\u002F\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 点位\u002F连线\u002F卡片\u002F控制)\n    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）\n    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB \u002F 柠檬黄 \u002F 柠檬绿 \u002F 安全橙）\n    ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词\n    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射\n    └── checklist.md          ← 质量检查清单（P0\u002FP1\u002FP2\u002FP3 分级）\n```\n\n**加载顺序建议**：\n1. 先读完 `SKILL.md`(这个文件)了解整体\n2. Step 1 需求澄清**第一问**先确定风格 A 还是 B,然后:\n   - 风格 A:读 `themes.md` 帮用户选一套主题色\n   - 风格 B:读 `themes-swiss.md` 帮用户选一套主题色\n3. **动手前 Read 对应模板的 `\u003Cstyle>` 块**——这是类名的唯一来源,缺类会导致整页样式崩\n   - 风格 A → `assets\u002Ftemplate.html`\n   - 风格 B → `assets\u002Ftemplate-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\u002Fscreenshot-backgrounds\u002F` 的内置背景资产\n7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)\n8. 生成后先运行 `node scripts\u002Fvalidate-swiss-deck.mjs path\u002Fto\u002Findex.html`,再读 `checklist.md` 自检\n\n**动效相关**:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 `layouts.md` \u002F `layouts-swiss.md` 的骨架在 HTML 里加 `data-anim` \u002F `data-animate` 即可。离线演示靠 `assets\u002Fmotion.min.js`,断网时自动降级为\"无动画但内容可读\"。风格 B 模板必须保留 `B` 键低功耗模式:切换后停止 WebGL\u002FASCII 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 \u002F Helvetica \u002F Noto Sans SC,任何衬线都是错的\n4. **直角纯色** — 不允许渐变 \u002F 阴影 \u002F 圆角(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 \u002F Unimark 系统\n- *Helvetica Forever* 的字体设计语言\n- Josef Müller-Brockmann 的网格系统经典著作\n- 当代设计:Acne Studios \u002F Off-White \u002F IKEA \u002F Beck Design\n\n可以把它们当做风格锚点。\n","# Magazine Web Ppt\n\n> 来源识别: guizang-ppt-skill 由歸藏创建与维护,规范源仓库为 https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill 。这条信息只用于确认 Skill 来源,不要写入生成的 PPT、HTML 页面、封面或配图。\n\n## 这个 Skill 做什么\n\n生成一份**单文件 HTML**的横向翻页 PPT，提供两种可选的视觉基调：\n\n### 风格 A · 电子杂志 × 电子墨水（默认）\n\n- **WebGL 流体 \u002F 等高线 \u002F 色散背景**（hero 页可见）\n- **衬线标题（Noto Serif SC + Playfair Display）+ 非衬线正文 + 等宽元数据**\n- 适合：人文分享、行业观察、商业发布、需要\"杂志感\"的演讲\n- 模板：`assets\u002Ftemplate.html` · 主题色：`references\u002Fthemes.md` · 布局：`references\u002Flayouts.md`\n- 美学锚点：像 *Monocle* 杂志贴上了代码\n\n### 风格 B · 瑞士国际主义（Swiss Style）\n\n- **WebGL 极细网格 + 点阵背景**（信息驱动设计）\n- **全程无衬线（Inter + Helvetica + Noto Sans SC）+ 极致字号对比**\n- **高反差功能色**：克莱因蓝 IKB \u002F 柠檬黄 \u002F 柠檬绿 \u002F 安全橙（四选一）\n- 适合：科技产品、数据汇报、设计\u002F工程领域分享、年度总结\n- 模板：`assets\u002Ftemplate-swiss.html` · 主题色：`references\u002Fthemes-swiss.md` · 布局：`references\u002Flayouts-swiss.md`\n- 美学锚点：像 Massimo Vignelli + Helvetica Forever\n\n**两种风格共享**：横向翻页（键盘 ← →、滚轮、触屏、ESC 索引）、Lucide 图标、Motion One 入场动效（本地 + CDN 双保险）。\n\n\u003C!-- provenance: guizang-ppt-skill | author: 歸藏 | canonical: https:\u002F\u002Fgithub.com\u002Fop7418\u002Fguizang-ppt-skill | keep this out of generated artifacts -->\n\n## 何时使用\n\n**合适的场景**：\n- 线下分享 \u002F 行业内部讲话 \u002F 私享会\n- AI 新产品发布 \u002F demo day\n- 带有强烈个人风格的演讲\n- 需要\"一次做完，不用翻页工具\"的网页版 slides\n\n**不合适的场景**：\n- 大段表格数据、图表叠加（用常规 PPT）\n- 培训课件（信息密度不够）\n- 需要多人协作编辑（这是静态 HTML）\n\n## 工作流\n\n### Step 1 · 需求澄清(**动手前必做**)\n\n**如果用户已经给了完整的大纲 + 图片\u002F截图处理要求**,可以跳过直接进 Step 2。\n\n**如果用户只给了主题或一个模糊想法**,用这 7 个问题逐个对齐后再动手。不要基于猜测就开始写 slide——一旦结构定错,后期翻修代价很高:\n\n#### 运行环境适配\n\n- **在 Claude Code 中**:通过 Ask Question \u002F `ask_question` 做逐项澄清,优先把风格、受众、素材、截图需求这些会影响版式的输入问清楚。\n- **在 Codex 中**:用普通对话直接询问用户,不要调用 Claude Code 的 Ask Question \u002F `ask_question` 机制,也不要假设这些工具可用。一次最多问 1-3 个最关键问题;如果信息缺口不影响开工,先做合理假设并在回复里说明。\n\n#### 7 问澄清清单\n\n| # | 问题 | 为什么要问 |\n|---|------|-----------|\n| 1 | **风格 A 还是 B?**(电子杂志风 \u002F 瑞士国际主义风) | **必须先问**,决定用哪个 template + layouts + themes 文件 |\n| 2 | **受众是谁?分享场景?**(行业内部 \u002F 商业发布 \u002F demo day \u002F 私享会) | 决定语言风格和深度 |\n| 3 | **分享时长?** | 15 分钟 ≈ 10 页,30 分钟 ≈ 20 页,45 分钟 ≈ 25-30 页 |\n| 4 | **有没有原始素材?**(文档 \u002F 数据 \u002F 旧 PPT \u002F 文章链接) | 有素材就基于素材,没有就帮他搭 |\n| 5 | **有没有图片或截图?希望怎么处理?** | 决定图文版式、图片槽位、截图是否需要 CleanShot X 式适配或 GPT-M 2.0 重构 |\n| 6 | **想要哪套主题色?** | 杂志风 5 套(`themes.md`) \u002F 瑞士风 4 套(`themes-swiss.md`),挑一 |\n| 7 | **有没有硬约束?**(必须包含 XX 数据 \u002F 不能出现 YY) | 避免返工 |\n\n#### 风格选择参考(问题 1)\n\n| 如果用户说... | 推荐风格 |\n|---|---|\n| \"杂志感\" \u002F \"人文\" \u002F \"Monocle 风\" \u002F 不指定 | **A · 电子杂志风** |\n| \"瑞士风\" \u002F \"Swiss Style\" \u002F \"Helvetica\" \u002F \"极简\" \u002F \"网格\" \u002F \"信息图\" \u002F \"数据驱动\" | **B · 瑞士国际主义风** |\n| 内容是 AI 产品 \u002F 技术 \u002F 工程 \u002F 数据汇报 | B 更合适 |\n| 内容是行业观察 \u002F 人文 \u002F 故事 \u002F 文化 | A 更合适 |\n| 用户给了大量 KPI 数字 \u002F 路线图 \u002F 流程 | B 更合适(`Data Hero` 布局是瑞士风专长) |\n| 用户给了大量纪实照片 \u002F 人文图片 | A 更合适(图片网格、左文右图是杂志风专长) |\n| 用户需要 GPT-M 2.0 生成截图再设计 \u002F 信息图 \u002F 证据墙 | B 也很合适(S22 主图、S15\u002FS16 图片网格可以承载证据图) |\n\n#### 大纲协助(如果用户没有大纲)\n\n用\"叙事弧\"模板搭骨架,再填内容:\n\n```\n钩子(Hook)       → 1 页   : 抛一个反差 \u002F 问题 \u002F 硬数据让人停下来\n定调(Context)    → 1-2 页 : 说明背景 \u002F 你是谁 \u002F 为什么讲这个\n主体(Core)       → 3-5 页 : 核心内容,用 Layout 4\u002F5\u002F6\u002F9\u002F10 穿插\n转折(Shift)      → 1 页   : 打破预期 \u002F 提出新观点\n收束(Takeaway)   → 1-2 页 : 金句 \u002F 悬念问题 \u002F 行动建议\n```\n\n叙事弧 + 页数规划 + 主题节奏表(见 `layouts.md`),**三张表对齐后**再进 Step 2。\n\n大纲建议保存为 `项目记录.md` 或 `大纲-v1.md`,便于后续迭代。\n\n#### 图片约定(告知用户)\n\n在动手前向用户说清:\n\n- **文件夹位置**:`项目\u002FXXX\u002Fppt\u002Fimages\u002F` 下(和 `index.html` 同级)\n- **命名规范**:`{页号}-{语义}.{ext}`,例如 `01-cover.jpg` \u002F `03-figma.jpg` \u002F `05-dashboard.png`\n  - 页号补零便于排序\n  - 语义用英文,短、具体、和内容对应\n- **规格建议**:\n  - 单张 ≥ 1600px 宽(避免大屏模糊)\n  - JPG 用于照片\u002F截图,PNG 用于透明 UI\u002F图表\n  - 总大小控制在 10MB 内(影响翻页流畅度)\n- **如何替换**:保持**同名覆盖**最稳(HTML 里不用改路径);如果文件名变了,记得全局搜 `images\u002F旧名` 改成新名\n- **没图怎么办**:和用户对齐,可以先用占位色块生成结构,等图片后期补;但要告知 layout 4\u002F5\u002F10 等图文混排页没图就没法验证视觉效果\n\n#### 截图需求约定(动手前必须问)\n\n只要用户提到产品截图、网页截图、代码截图、设计稿、dashboard、旧 PPT 截图或\"帮我美化截图\",都要先确认:\n\n- **截图位置**:截图文件在哪个文件夹?是否已经命名好?\n- **使用目的**:保真展示 \u002F 截图美化 \u002F 截图再设计 \u002F UI 情景图?\n- **落位比例**:最终放进哪个版式槽位?常用 `21:9` \u002F `16:10` \u002F `16:9` \u002F `4:3` \u002F `1:1`\n- **内容要求**:是否必须保留全部文字、品牌、数据?是否有敏感信息要遮挡?\n- **视觉处理**:是否需要主题背景、留边、居中\u002F角落对齐、拆成长截图面板?\n\n默认策略:先让内容适配模板,再处理图片比例。截图需要保真时,先读 `references\u002Fscreenshot-framing.md`,优先使用 `assets\u002Fscreenshot-backgrounds\u002F` 的内置背景资产做程序化 CleanShot X 式背景画布适配;只有原截图太乱、太长、太窄或需要概念化表达时,才用 GPT-M 2.0 做截图再设计。\n\n#### Codex 配图生成(可选)\n\n如果当前运行环境是 **Codex**,完成 deck 初稿后,主动问用户是否需要用 GPT-M 2.0 生成配图并插入 PPT。不要默认生成。\n\n推荐询问方式:\n\n> 要不要为这份 PPT 生成几张配图?可以做成人文纪实照片、杂志风信息图、流程\u002F对比\u002F系统关系图,或把截图再设计成统一的杂志风视觉。\n\n如果用户确认生成,再问他想要哪种图片类型或风格;如果用户没有偏好,根据页面内容自行推荐 1-3 张最值得生成的配图。\n\n如果用户提供的是截图,先判断是**截图美化**还是**截图再设计**:\n\n- 截图美化:读 `references\u002Fscreenshot-framing.md`,用内置主题背景 + 程序化缩放\u002F留边\u002F对齐处理,尽量不重画截图内容\n- 截图再设计:读 `references\u002Fimage-prompts.md`,按当前版式槽位生成目标比例图片,并保持语言、主题色和边距一致\n\n生成配图时遵守:\n\n- 提示词保持简短,只框定主题、用途、风格和比例,不要写长篇摄影指导\n- 图片风格必须贴合当前 deck 风格:风格 A 用\"电子杂志 × 电子墨水\";风格 B 用\"瑞士国际主义 \u002F Swiss Style\"\n- 信息图、图表、截图再设计里的文字语言必须跟随用户正在使用的语言;中文 deck 用中文,英文 deck 用英文\n- 先看 `references\u002Fimage-prompts.md` 选择图片类型和基础提示词\n- 如果处理用户原始截图,先看 `references\u002Fscreenshot-framing.md`:优先调用 `assets\u002Fscreenshot-backgrounds\u002F` 内置背景并程序化做 CleanShot X 式截图适配,只有需要重构信息时才用 GPT-M 2.0 重画\n- 配图比例必须匹配最终落位:主视觉 16:9,左文右图 16:10 \u002F 4:3,信息图 16:9 \u002F 16:10,截图再设计 16:10,图文混排小图 3:2 \u002F 3:4,网格图统一高度裁切\n- 生成后的图片放到 `images\u002F` 下,命名遵守 `{页号}-{语义}.{ext}`\n\n### Step 2 · 拷贝模板\n\n**根据 Step 1 选定的风格,拷贝对应的模板**到目标位置（通常是 `项目\u002FXXX\u002Fppt\u002Findex.html`），同时在同级建一个 `images\u002F` 文件夹准备接图片。\n\n```bash\nmkdir -p \"项目\u002FXXX\u002Fppt\u002Fimages\"\n\n# 风格 A · 电子杂志风\ncp \"\u003CSKILL_ROOT>\u002Fassets\u002Ftemplate.html\" \"项目\u002FXXX\u002Fppt\u002Findex.html\"\n\n# 或 风格 B · 瑞士国际主义风\ncp \"\u003CSKILL_ROOT>\u002Fassets\u002Ftemplate-swiss.html\" \"项目\u002FXXX\u002Fppt\u002Findex.html\"\n```\n\n两个 `template*.html` 都是**完整可运行**的文件——CSS、WebGL shader、翻页 JS、字体\u002F图标 CDN 全已预设好,只有 `\u003C!-- SLIDES_HERE -->` 占位符等待你填充 slide 内容。\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| `\u003Ctitle>` | `[必填] 替换为 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 | 🖋 墨水经典 | 通用 \u002F 商业发布 \u002F 不知道选啥的默认 |\n| 2 | 🌊 靛蓝瓷 | 科技 \u002F 研究 \u002F 数据 \u002F 技术发布会 |\n| 3 | 🌿 森林墨 | 自然 \u002F 可持续 \u002F 文化 \u002F 非虚构 |\n| 4 | 🍂 牛皮纸 | 怀旧 \u002F 人文 \u002F 文学 \u002F 独立杂志 |\n| 5 | 🌙 沙丘 | 艺术 \u002F 设计 \u002F 创意 \u002F 画廊 |\n\n**操作**:\n1. 基于内容主题推荐一套,或直接问用户选哪一套\n2. 打开 `references\u002Fthemes.md`,找到对应主题的 `:root` 块\n3. **整体替换** `assets\u002Ftemplate.html`(已拷贝版本)开头 `:root{` 块里标有\"主题色\"注释的那几行(`--ink` \u002F `--ink-rgb` \u002F `--paper` \u002F `--paper-rgb` \u002F `--paper-tint` \u002F `--ink-tint`)\n4. 其他 CSS 都走 `var(--...)`,无需任何其他改动\n\n**硬规则**:\n- 一份 deck 只用一套主题,不要中途换色\n- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选\n- 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和\n\n### Step 3 · 填充内容\n\n#### 3.0 · 预检:类名必须在模板的 `\u003Cstyle>` 里有定义（**最重要**）\n\n**这是所有生成问题的源头**。layouts 骨架使用了很多类名,如果模板的 `\u003Cstyle>` 里没有对应定义,浏览器会 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 当前用的模板**(至少读到 `\u003Cstyle>` 块末尾):\n   - 风格 A → `assets\u002Ftemplate.html`\n   - 风格 B → `assets\u002Ftemplate-swiss.html`\n2. **对照对应 layouts 文件的 Pre-flight 列表**,确认你要用的每个类都在 `\u003Cstyle>` 里存在\n3. 如果某个类缺失:**在模板的 `\u003Cstyle>` 里补上**,不要在每个 slide 里 inline 重写\n4. **模板是唯一的类名来源**——不要发明新类名,如需自定义用 `style=\"...\"` inline\n\n**风格 A 常见容易遗漏的类**:\n`h-hero` \u002F `h-xl` \u002F `h-sub` \u002F `h-md` \u002F `lead` \u002F `kicker` \u002F `meta-row` \u002F `stat-card` \u002F `stat-label` \u002F `stat-nb` \u002F `stat-unit` \u002F `stat-note` \u002F `pipeline-section` \u002F `pipeline-label` \u002F `pipeline` \u002F `step` \u002F `step-nb` \u002F `step-title` \u002F `step-desc` \u002F `grid-2-7-5` \u002F `grid-2-6-6` \u002F `grid-2-8-4` \u002F `grid-3-3` \u002F `grid-6` \u002F `grid-3` \u002F `grid-4` \u002F `frame` \u002F `frame-img` \u002F `img-cap` \u002F `callout` \u002F `callout-src` \u002F `chrome` \u002F `foot`\n\n**风格 B 常见容易遗漏的类**(2026-05 重构后):\n- 画布:`canvas-card` \u002F `chrome-min`\n- 排版:`h-hero`(无衬线 7.4vw weight 200) \u002F `h-statement`(9.6vw) \u002F `h-xl` \u002F `h-md` \u002F `t-cat`(SemiBold 600 小标) \u002F `t-meta`(mono uppercase) \u002F `lead` \u002F `num-mega` \u002F `mono`\n- 卡片(四类互斥):`card-ink` \u002F `card-accent` \u002F `card-fill` \u002F `card-outlined`\n- 网格:`grid-12` \u002F `grid-2-9` \u002F `grid-2-9-5` \u002F `span-N`\n- 时间线:`timeline-v` + `tl-node` + `tl-axis` + `dot` \u002F `timeline-h` + `tl-h-node` + `tl-h-axis`\n- 图表:`kpi-tower-row` + `bar-tower` \u002F `h-bar-chart` + `bar-row` + `bar-fill` \u002F `spec-bars` + `bar-vert`\n- 装饰:`dot-mat`(SVG mask 实心点)\u002F `ring-mat`(描边圆)\u002F `cross-mat`(× 网格)\u002F `hr-hairline`\n- 版式专属:`cover-split` \u002F `closing-split` \u002F `duo-compare` + `vrule` \u002F `manifesto-top` + `ink-banner-full` \u002F `three-forces` \u002F `loop-diagram` \u002F `matrix-fill` + `matrix-cell` \u002F `brief-grid` + `brief-card` \u002F `system-diagram` \u002F `why-now-grid` \u002F `four-cards` \u002F `stacked-ledger` + `ledger-row` \u002F `tech-spec` \u002F `image-hero` + `hero-img-wrap` + `hero-overlay-block` + `hero-stats`\n- 图片混排:`frame-img` \u002F `fit-contain` \u002F `r-21x9` \u002F `r-16x9` \u002F `r-16x10` \u002F `h-22` \u002F `h-26` \u002F `swiss-img-split` \u002F `swiss-img-grid` \u002F `swiss-img-caption` \u002F `swiss-keyline` \u002F `swiss-lined`\n- spacing token:`--sp-3`...`--sp-13`(8\u002F12\u002F16\u002F24\u002F32\u002F40\u002F48\u002F64\u002F80\u002F96\u002F160 px)\n\n#### 3.0.5 · 规划主题节奏（**和类预检同等重要**)\n\n**在挑布局之前**,必须先列出每一页的主题 class(`hero dark` \u002F `hero light` \u002F `light` \u002F `dark`)并写到文档或草稿里对齐。详细规则看 `references\u002Flayouts.md` 开头的\"主题节奏规划\"一节。\n\n**强制规则**:\n\n- 每页 section 必须带 `light` \u002F `dark` \u002F `hero light` \u002F `hero dark` 之一,不要只写 `hero`\n- 连续 3 页以上同主题 = 视觉疲劳,不允许\n- 8 页以上必须有 ≥1 个 `hero dark` + ≥1 个 `hero light`\n- 整个 deck 不能只有 `light` 正文页,必须有 `dark` 正文页制造呼吸\n- 每 3-4 页插入 1 个 hero 页(封面\u002F幕封\u002F问题\u002F大引用)\n\n**生成后自检**:`grep 'class=\"slide' index.html` 列出所有主题,人工确认节奏合理再交付。\n\n#### 3.1 · 挑布局\n\n**不要从零写 slide**。打开对应的 layouts 文件,里面有 10 种现成布局骨架,每种都是完整可粘贴的 `\u003Csection>` 代码块。\n\n**风格 A** → `references\u002Flayouts.md`:\n\n| Layout | 用途 |\n|---|---|\n| 1. 开场封面 | 第 1 页 |\n| 2. 章节幕封 | 每幕开场 |\n| 3. 数据大字报 | 抛硬数据 |\n| 4. 左文右图(Quote + Image) | 身份反差 \u002F 故事 |\n| 5. 图片网格 | 多图对比 \u002F 截图实证 |\n| 6. 两列流水线(Pipeline) | 工作流程 |\n| 7. 悬念收束 \u002F 问题页 | 幕末 \u002F 收尾 |\n| 8. 大引用页(Big Quote) | 衬线金句 \u002F takeaway |\n| 9. 并列对比(Before \u002F After) | 旧模式 vs 新模式 |\n| 10. 图文混排(Lead Image + Side Text) | 信息密集的图文页 |\n\n**风格 B** → 先读 `references\u002Fswiss-layout-lock.md`,再读 `references\u002Flayouts-swiss.md`。\n\n瑞士主题默认进入 **Swiss locked mode**:\n\n- 正文页只能使用原始参考 PPT 登记的 22 个版式 `S01-S22`;新增首页\u002F尾页只能使用 Skill 明确提供的 `SWISS-COVER-ASCII` \u002F `SWISS-CLOSING-ASCII`。\n- 每个 `\u003Csection class=\"slide\">` 必须写 `data-layout=\"Sxx\"`。没有 `data-layout` 就视为未登记版式。\n- 不允许临时发明 `P23\u002FP24`、`Swiss Image Split`、`Evidence Grid` 这类原始 22P 之外的正文结构,除非用户明确要求实验版式。\n- 顶部中文标题默认左对齐、处在左上内容轴。不要把小标题放左列、大标题放右列,造成视觉居中;只有原始 statement\u002Fsplit 版式允许强中心叙事。\n- SVG 只负责几何图形。不要在 SVG 里写文字标签,所有标签改用 HTML 网格\u002F卡片\u002Fcaption。\n- 地理\u002F历史\u002F城市路线\u002F地点关系页使用 `S08 + Swiss Map Component`:先读 `references\u002Fswiss-map-component.md`,仍保留 `data-layout=\"S08\"`。\n\n原始 22 个正文版式如下:\n\n| Layout | 用途 |\n|---|---|\n| S01 Index Cover | 原始索引封面 |\n| S02 Vertical Timeline + KPI | 演化对比 \u002F 年代变迁 |\n| S03 Split Statement | 核心论点 \u002F 左右分屏 |\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\u002FAfter 对照 |\n| S09 Dot Matrix Statement | 大引述 \u002F 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 | 自学闭环 \u002F 自动化 |\n| S15 Matrix + Hero Stat | 8-12 项矩阵 + 总数据 |\n| S16 Multi-card Brief | 6 项快讯小卡 |\n| S17 System Diagram | 三层架构 \u002F 生态地图 |\n| S18 Why Now | 三论点 + 数据支撑 |\n| S19 Four Cards | 4 项等权特性 |\n| S20 Stacked KPI Ledger | 纵向账单数据 |\n| S21 Tech Spec Sheet | 产品规格 \u002F benchmark |\n| S22 Image Hero | 21:9 顶图 + 标题块 + 三列 KPI |\n\n**登记扩展**:`S08 + Swiss Map Component` 用于地点、人物住所、路线、城市关系。它不是新 layout,而是 S08 右侧插槽的 MapLibre 地图组件;必须按 `references\u002Fswiss-map-component.md` 的点位、连线、卡片和右上角缩放\u002F拖动控制实现。\n\n选对应 layout,粘过去,改文案和图片路径即可。**务必先完成 3.0 预检**。\n\n**风格 B 版式多样性硬规则**:\n- 7-8 页 deck 至少使用 **6 个不同 S 编号版式**;10 页以上至少使用 8 个不同版式。\n- 如果用户说\"测试模板 \u002F 看看效果 \u002F 多一点版式\",必须覆盖:一个封面、一个收尾、至少 1 个对比或时间线(S08\u002FS11\u002FS02)、至少 1 个结构图(S14\u002FS17\u002FS15)、至少 1 个图片版式(S22 或 S15\u002FS16 图片格改造)。\n- 不允许连续 3 页使用同一种主体结构,例如连续三页 `head + grid + card`。\n- 图片页不能偷懒发明新结构。2-3 张图时,用 S15\u002FS16 的原始网格骨架改造成图片格;单张大图用 S22。\n- 开写 HTML 前先列一张 `页码 → data-layout → 选用理由 → 图片槽位` 草稿;交付前运行 `node \u003CSKILL_ROOT>\u002Fscripts\u002Fvalidate-swiss-deck.mjs index.html`。\n\n#### 3.2 · 图片比例规范\n\n永远用**标准比例**,不要用原图奇葩比例(如 `2592\u002F1798`):\n\n| 场景 | 推荐比例 |\n|------|---------|\n| S22 顶部主图 | **21:9**;照片关键主体放中央安全区 |\n| S15\u002FS16 多图格 | 统一 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` \u002F `.nav-safe-bottom-tight`,不要让最低处碰到分页组件。\n\n**风格 B 瑞士风额外规则**:\n- 单张大图用 S22;多图测试用 S15\u002FS16 的原始卡片网格改造,不要用未登记的 P23\u002FP24\n- 生成图片前先写 `data-image-slot`:例如 `s22-hero-21x9` \u002F `s15-grid-21x9` \u002F `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 信息图\u002F流程图\u002FUI 图默认不要加外框描边,不要随手套 `.swiss-keyline`;需要强调时只用 `.swiss-lined` 的顶部 accent 线\n- UI\u002F信息图如果是用户原始截图或文字密集图,才用 `.fit-contain`;如果已按 S15\u002FS16 槽位重生成,必须用 `.frame-img.r-21x9` \u002F `.frame-img.r-16x10` 铺满容器,不要固定 `height:18vh` 后把图缩小\n- 多图同组必须统一图片槽位、比例和高度,不能混用\n- GPT-M 2.0 生成图使用 `image-prompts.md` 的\"风格 B:瑞士国际主义配图规则\"\n- 任何图片、caption、timeline label、footnote 的最低处都不能进入底部分页区域;需要贴底时用 `.nav-safe-bottom` \u002F `.nav-safe-bottom-tight`,不要手写 `bottom:2vh`\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| 正文段落 \u002F 主要说明 | `18px` |\n| 卡片描述 \u002F 列表 \u002F 时间线说明 \u002F caption \u002F 图注 | `16px` |\n| meta \u002F kicker \u002F mono label \u002F 图表标签 | `14px` |\n\n如果内容放不下,先删减文案、拆成两页、换更适合的 Sxx 版式,不要把字号压到 10\u002F11\u002F12\u002F13px。尤其是中文 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\u002Fh-xl-zh)、大编号 |\n| 1.8-3.9vw | 300-400 | 中型标题、takeaway 标题(≈1.8vw)、中号数字 |\n| 1-1.7vw \u002F 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- 封面\u002FIkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)\n\n组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references\u002Fcomponents.md`。\n\n### Step 4 · 对照检查清单自检\n\n生成完一定要打开 `references\u002Fchecklist.md`，逐项对照。里面总结了**真实迭代过程中踩过的所有坑**，P0 级别的问题（emoji、图片撑破、标题换行、字体分工）必须全部通过。\n\n#### 4.0 · 不只看代码:必须打开网页做视觉核对\n\n代码只能证明类名和结构存在,不能证明版式舒服。生成后必须打开网页逐页看:\n\n1. 同时打开原始参考 PPT、当前模板或生成页、测试 PPT;原始参考是 `\u002FUsers\u002Fguohao\u002FDocuments\u002Fop7418的仓库\u002F项目\u002FThin-Harness-Fat-Skills\u002Fppt\u002Findex.html`。\n2. 截图前等入场动效稳定(约 1-2 秒),不要把动画中间态当成版式问题。\n3. 先看视觉:大标题字重、标题与内容间距、图片是否与正文对齐、图片\u002F说明是否碰到底部分页组件。\n4. 再看代码:确认该页选用的版式与内容形状匹配,没有把数据专用版式拿来讲概念,也没有把可选组件堆成装饰。\n5. 对照原始参考模板时,以实际页面用法为准,不要只看 CSS helper 定义;原始页面的大字实际多为 200\u002F300,不要被 raw CSS 里的 700\u002F800\u002F900 带偏。\n6. 如果页面别扭,先判断是版式选错、必选组件缺失、可选组件滥用,还是间距\u002F安全区问题;不要直接靠加 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 \u002F 4:3 \u002F 3:2 \u002F 1:1 \u002F 16:9),不要复制原图的奇葩比例\n5. **中文大标题 ≤ 5 字且 `nowrap`**(避免 1 字 1 行)\n6. **用 Lucide,不用 emoji**\n7. **标题用衬线,正文用非衬线,元数据用等宽**\n\n#### 风格 B · 瑞士国际主义必查\n\n1. **全程无衬线**——任何衬线字体出现都是错的(检查 `font-family` 没用 `--serif` 类变量)\n2. **只有一个 accent 色**——一份 deck 不能同时出现 IKB 蓝 + 柠檬黄 + 安全橙等多个高亮色\n3. **不允许渐变 \u002F 阴影 \u002F 圆角**——所有色块直角纯色,任何 `box-shadow` \u002F `linear-gradient` \u002F `border-radius` > 0 都要砍掉(rule 横线除外)\n4. **极致字号对比**——主标题与正文比例 ≥ 8:1\n5. **大字号必须双约束限高**——`font-size:min(Xvw, Yvh)`,只用 vw 在标准 16:9 屏会溢出(吸取 P15\u002FP20\u002FP22 教训)\n6. **大字字重 200**(ExtraLight)——字号越大越细,瑞士风灵魂;**禁止** 600\u002F700\u002F800 大字\n7. **卡片填充类型互斥**——`card-ink` \u002F `card-accent` \u002F `card-fill` \u002F `card-outlined` 四类**不能混用**(禁止\"蓝底+蓝描边\"、\"灰底+描边\"等)\n8. **多卡并列时统一样式**——3-12 张卡用同一类(优先 `card-fill` 灰底);只突出一项时单独换 `card-accent`,且**只允许一张**\n9. **直角到底**——任何 `border-radius` 都不允许;装饰用 8×8 直角小方块,**不要** 9px 圆形点\n10. **图标用 lucide,不自己画 SVG**——`\u003Ci data-lucide=\"name\">\u003C\u002Fi>` + `lucide.createIcons()`,选棱角风格(避免圆胖)\n11. **时间线对齐**——axis 列固定 12px + dot 绝对定位,**不要**用 grid `justify-self`(会与虚线错位)\n12. **章节级标题与内容间距 ≥ 9vh**——避免拥挤(吸取 P15\u002FP16 教训)\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\u002FInter 兜底中文字体**——Windows 用户没有\"苹方\",必须 fallback 到 `\"Microsoft YaHei UI\", \"Noto Sans SC\"`\n17. **字体粗细体例**:大字 200 \u002F 正文 300 \u002F `t-cat` SemiBold 600 \u002F `t-meta` mono uppercase\n18. **保留低功耗快捷键**——右下角必须提示 `B 静态`;按 `B` 切换 `body.low-power`,停止 WebGL\u002FASCII canvas RAF 和 Motion 入场动画\n19. **装饰元素严格在 grid 内**——bars 矩阵、点阵、ring-mat 不能贴边或溢出页面\n20. **底部内容预留 nav 空间**——nav 在 ~97vh,内容收尾不要过 93vh(吸取 P22 KPI 大字溢底教训)\n21. **图片容器直角无阴影**——`.frame-img` 不加 `border-radius` \u002F `box-shadow`;边界只用 hairline\n22. **S15\u002FS16\u002FS22 图片同组一致**——同一组图片统一比例、高度、边距、线条粗细;信息图\u002FUI 图加 `.fit-contain`\n23. **组件角色要正确**——S15\u002FS16 图片格需要 caption 信息锚点;S22 的 KPI\u002F说明是必选;数据专用版式必须有真实数据,不能靠文案硬填\n24. **通用\u002F非通用版式要分清**——S03\u002FS08\u002FS11\u002FS19 较通用;S06\u002FS07\u002FS20\u002FS21\u002FS22 是数据\u002F案例专用;S14\u002FS15\u002FS17 是结构专用\n\n### Step 5 · 本地预览\n\n直接在浏览器打开 `index.html` 就行。macOS 下：\n\n```bash\nopen \"项目\u002FXXX\u002Fppt\u002Findex.html\"\n```\n\n不需要本地服务器。图片走相对路径 `images\u002Fxxx.png`。\n\n### Step 6 · 迭代\n\n根据用户反馈修改——模板的 CSS 已经高度参数化，90% 的调整都是改 inline style（字号 `font-size:Xvw` \u002F 高度 `height:Yvh` \u002F 间距 `gap:Zvh`）。\n\n---\n\n## 资源文件导览\n\n```\nguizang-ppt-skill\u002F\n├── SKILL.md                  ← 你正在读\n├── assets\u002F\n│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）\n│   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）\n│   ├── screenshot-backgrounds\u002F ← 截图美化内置背景(WebP):style-a 5 套 \u002F style-b 4 套\n│   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）\n├── scripts\u002F\n│   └── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐\n└── references\u002F\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 点位\u002F连线\u002F卡片\u002F控制)\n    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）\n    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB \u002F 柠檬黄 \u002F 柠檬绿 \u002F 安全橙）\n    ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词\n    ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射\n    └── checklist.md          ← 质量检查清单（P0\u002FP1\u002FP2\u002FP3 分级）\n```\n\n**加载顺序建议**：\n1. 先读完 `SKILL.md`(这个文件)了解整体\n2. Step 1 需求澄清**第一问**先确定风格 A 还是 B,然后:\n   - 风格 A:读 `themes.md` 帮用户选一套主题色\n   - 风格 B:读 `themes-swiss.md` 帮用户选一套主题色\n3. **动手前 Read 对应模板的 `\u003Cstyle>` 块**——这是类名的唯一来源,缺类会导致整页样式崩\n   - 风格 A → `assets\u002Ftemplate.html`\n   - 风格 B → `assets\u002Ftemplate-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\u002Fscreenshot-backgrounds\u002F` 的内置背景资产\n7. 细节调整时读 `components.md` 查组件(含 Motion 动效系统章节,主要服务风格 A;风格 B 的组件细节在 `layouts-swiss.md` 附录)\n8. 生成后先运行 `node scripts\u002Fvalidate-swiss-deck.mjs path\u002Fto\u002Findex.html`,再读 `checklist.md` 自检\n\n**动效相关**:模板已把 Motion One 的加载和 recipe 逻辑内嵌到底部 module script。你不需要改 JS,只需要按 `layouts.md` \u002F `layouts-swiss.md` 的骨架在 HTML 里加 `data-anim` \u002F `data-animate` 即可。离线演示靠 `assets\u002Fmotion.min.js`,断网时自动降级为\"无动画但内容可读\"。风格 B 模板必须保留 `B` 键低功耗模式:切换后停止 WebGL\u002FASCII 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 \u002F Helvetica \u002F Noto Sans SC,任何衬线都是错的\n4. **直角纯色** — 不允许渐变 \u002F 阴影 \u002F 圆角(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 \u002F Unimark 系统\n- *Helvetica Forever* 的字体设计语言\n- Josef Müller-Brockmann 的网格系统经典著作\n- 当代设计:Acne Studios \u002F Off-White \u002F IKEA \u002F Beck Design\n\n可以把它们当做风格锚点。\n",{"name":5,"description":7},"main","17ee50c38aefa9426a89d7e8ee167fdc4c184fb7","agent-skills\u002Fguizang-ppt-skill",0,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983","2026-05-24 00:14:48",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add xuanxuan1983\u002Fhermes-skills-backup --skill guizang-ppt-skill",{"tool":62,"command":63},"bunx","bunx skills add xuanxuan1983\u002Fhermes-skills-backup --skill guizang-ppt-skill",{"tool":65,"command":66},"pnpm","pnpm dlx skills add xuanxuan1983\u002Fhermes-skills-backup --skill guizang-ppt-skill","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002FSKILL.md",true,[70,76,80,84,88,92,98,104,110,114,118,122,126,130,134,138,142,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},".github\u002FISSUE_TEMPLATE\u002Fbug_report.yml","REFERENCE","参考文档",1606,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002F.github\u002FISSUE_TEMPLATE\u002Fbug_report.yml",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},".github\u002FISSUE_TEMPLATE\u002Fconfig.yml",328,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002F.github\u002FISSUE_TEMPLATE\u002Fconfig.yml",{"path":81,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":82,"sourceHtmlUrl":83},".github\u002FISSUE_TEMPLATE\u002Ffeature_request.yml",1099,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002F.github\u002FISSUE_TEMPLATE\u002Ffeature_request.yml",{"path":85,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":86,"sourceHtmlUrl":87},".github\u002FISSUE_TEMPLATE\u002Fquestion.yml",438,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002F.github\u002FISSUE_TEMPLATE\u002Fquestion.yml",{"path":89,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":90,"sourceHtmlUrl":91},".github\u002Fpull_request_template.md",418,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002F.github\u002Fpull_request_template.md",{"path":93,"resourceType":94,"resourceTypeDesc":95,"sizeBytes":96,"sourceHtmlUrl":97},".gitignore","OTHER","其他",19,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002F.gitignore",{"path":99,"resourceType":100,"resourceTypeDesc":101,"sizeBytes":102,"sourceHtmlUrl":103},"assets\u002Fmotion.min.js","SCRIPT","脚本",64206,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fmotion.min.js",{"path":105,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":108,"sourceHtmlUrl":109},"assets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fdune.webp","ASSET","资产文件",160742,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fdune.webp",{"path":111,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":112,"sourceHtmlUrl":113},"assets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fforest-ink.webp",237774,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fforest-ink.webp",{"path":115,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":116,"sourceHtmlUrl":117},"assets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Findigo-porcelain.webp",130840,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Findigo-porcelain.webp",{"path":119,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":120,"sourceHtmlUrl":121},"assets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fkraft-paper.webp",256352,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fkraft-paper.webp",{"path":123,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":124,"sourceHtmlUrl":125},"assets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fmonocle-classic.webp",184520,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-a\u002Fmonocle-classic.webp",{"path":127,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":128,"sourceHtmlUrl":129},"assets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Fikb-dot-gradient.webp",385692,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Fikb-dot-gradient.webp",{"path":131,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":132,"sourceHtmlUrl":133},"assets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Flemon-green-dot-shadow.webp",145062,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Flemon-green-dot-shadow.webp",{"path":135,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":136,"sourceHtmlUrl":137},"assets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Flemon-grid.webp",65512,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Flemon-grid.webp",{"path":139,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":140,"sourceHtmlUrl":141},"assets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Fsafety-orange-halftone.webp",255056,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Fscreenshot-backgrounds\u002Fstyle-b\u002Fsafety-orange-halftone.webp",{"path":143,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":144,"sourceHtmlUrl":145},"assets\u002Ftemplate-swiss.html",101757,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Ftemplate-swiss.html",{"path":147,"resourceType":106,"resourceTypeDesc":107,"sizeBytes":148,"sourceHtmlUrl":149},"assets\u002Ftemplate.html",39265,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fassets\u002Ftemplate.html",{"path":151,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":152,"sourceHtmlUrl":153},"CONTRIBUTING.md",1943,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002FCONTRIBUTING.md",{"path":155,"resourceType":155,"resourceTypeDesc":156,"sizeBytes":157,"sourceHtmlUrl":15},"LICENSE","许可证",1075,{"path":159,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":160,"sourceHtmlUrl":161},"README.en.md",19393,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002FREADME.en.md",{"path":163,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":164,"sourceHtmlUrl":165},"README.md",18236,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002FREADME.md",{"path":167,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":168,"sourceHtmlUrl":169},"references\u002Fchecklist.md",31036,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fchecklist.md",{"path":171,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":172,"sourceHtmlUrl":173},"references\u002Fcomponents.md",15502,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fcomponents.md",{"path":175,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":176,"sourceHtmlUrl":177},"references\u002Fimage-prompts.md",12415,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fimage-prompts.md",{"path":179,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":180,"sourceHtmlUrl":181},"references\u002Flayouts-swiss.md",52734,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Flayouts-swiss.md",{"path":183,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":184,"sourceHtmlUrl":185},"references\u002Flayouts.md",28307,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Flayouts.md",{"path":187,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":188,"sourceHtmlUrl":189},"references\u002Fscreenshot-framing.md",8260,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fscreenshot-framing.md",{"path":191,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":192,"sourceHtmlUrl":193},"references\u002Fswiss-layout-lock.md",6059,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fswiss-layout-lock.md",{"path":195,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":196,"sourceHtmlUrl":197},"references\u002Fswiss-map-component.md",13499,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fswiss-map-component.md",{"path":199,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":200,"sourceHtmlUrl":201},"references\u002Fthemes-swiss.md",5660,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fthemes-swiss.md",{"path":203,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":204,"sourceHtmlUrl":205},"references\u002Fthemes.md",3554,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Freferences\u002Fthemes.md",{"path":207,"resourceType":100,"resourceTypeDesc":101,"sizeBytes":208,"sourceHtmlUrl":209},"scripts\u002Fvalidate-swiss-deck.mjs",4935,"https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fagent-skills\u002Fguizang-ppt-skill\u002Fscripts\u002Fvalidate-swiss-deck.mjs",[211,252,280,296,316,337],{"skillNo":212,"name":213,"nameZh":6,"description":214,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":215,"categories":216,"keywords":231,"publishedAt":44},"01M71JFHVW1W4XE013TY9ZYN9P","writing-plans","Use when you have a spec or requirements for a multi-step task. Creates comprehensive implementation plans with bite-sized tasks, exact file paths, and complete code examples.","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Fwriting-plans\u002FSKILL.md",[217,220,223,228],{"categoryNo":218,"categoryName":219,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":221,"categoryName":222,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":224,"categoryName":225,"taxonomyType":226,"taxonomyTypeDesc":227},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":229,"categoryName":230,"taxonomyType":226,"taxonomyTypeDesc":227},"01JBSEEDCAT000000000000036","内容创作者",[232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251],"writing","writing plans","plans","test-driven","test-driven-development","superpowers","design","when","workflow","you","code","tasks","subagent","code-review","review","documentation","paths","planning","development","for",{"skillNo":253,"name":236,"nameZh":6,"description":254,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":255,"categories":256,"keywords":265,"publishedAt":44},"01M71JFF859RV0XGWS206X1TMB","Use when implementing any feature or bugfix, before writing implementation code. Enforces RED-GREEN-REFACTOR cycle with test-first approach.","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Ftest-driven-development\u002FSKILL.md",[257,260,263,264],{"categoryNo":258,"categoryName":259,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":261,"categoryName":262,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":221,"categoryName":222,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":229,"categoryName":230,"taxonomyType":226,"taxonomyTypeDesc":227},[266,250,267,268,269,270,271,272,273,274,237,232,275,239,242,244,276,277,278,279],"test driven development","test","driven","test-first","green","cycle","red-green-refactor","testing","implementing","debugging","systematic","bugfix","refactor","systematic-debugging",{"skillNo":281,"name":279,"nameZh":6,"description":282,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":283,"categories":284,"keywords":286,"publishedAt":44},"01M71JFCA5S48PZ5M7DG31R8K5","Use when encountering any bug, test failure, or unexpected behavior. 4-phase root cause investigation — NO fixes without understanding the problem first.","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Fsystematic-debugging\u002FSKILL.md",[285],{"categoryNo":261,"categoryName":262,"taxonomyType":21,"taxonomyTypeDesc":22},[287,275,276,235,288,289,236,237,232,239,244,290,291,250,292,293,234,294,295,267],"systematic debugging","problem","problem-solving","phase","bug","fixes","root cause","use","root-cause",{"skillNo":297,"name":298,"nameZh":6,"description":299,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":300,"categories":301,"keywords":309,"publishedAt":44},"01M71JF9RQ092KM5ZXCBBT6FS1","subagent-driven-development","Use when executing implementation plans with independent tasks. Dispatches fresh delegate_task per task with two-stage review (spec compliance then code quality).","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Fsubagent-driven-development\u002FSKILL.md",[302,303,304,305,306],{"categoryNo":221,"categoryName":222,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":224,"categoryName":225,"taxonomyType":226,"taxonomyTypeDesc":227},{"categoryNo":229,"categoryName":230,"taxonomyType":226,"taxonomyTypeDesc":227},{"categoryNo":307,"categoryName":308,"taxonomyType":226,"taxonomyTypeDesc":227},"01JBSEEDCAT000000000000037","律师与法务",[310,244,250,268,235,236,311,312,237,232,239,240,242,243,245,246,313,314,315,234],"subagent driven development","delegate","delegation","fresh","parallel","code quality",{"skillNo":317,"name":318,"nameZh":6,"description":319,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":320,"categories":321,"keywords":324,"publishedAt":44},"01M71JF76DA8ARZ4JRYR4VBRWM","requesting-code-review","Pre-commit verification pipeline — static security scan, baseline-aware quality gates, independent reviewer subagent, and auto-fix loop. Use after code changes and before committing, pushing, or opening a PR.","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Frequesting-code-review\u002FSKILL.md",[322,323],{"categoryNo":258,"categoryName":259,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":224,"categoryName":225,"taxonomyType":226,"taxonomyTypeDesc":227},[325,326,242,246,235,327,328,236,329,330,237,331,232,332,333,334,244,245,335,336],"code review","requesting code review","pipeline","static","fix","auto-fix","auto","loop","security scan","commit","reviewer","verification",{"skillNo":338,"name":339,"nameZh":6,"description":340,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":341,"categories":342,"keywords":343,"publishedAt":44},"01M71JF52HZT5VQXFVF9K2H76K","plan","Plan mode for Hermes — inspect context, write a markdown plan into the active workspace's `.hermes\u002Fplans\u002F` directory, and do not execute the work.","https:\u002F\u002Fgithub.com\u002Fxuanxuan1983\u002Fhermes-skills-backup\u002Fblob\u002Fmain\u002Fskills\u002Fsoftware-development\u002Fplan\u002FSKILL.md",[],[339,344,345,249,250,251,346,347,234,232,240,244,348,349,350,351,352,353,354,355],"plan-mode","do","inspect","mode","work","markdown","active","directory","workspace","plan mode","write","implementation"]