归藏双风格 HTML 幻灯片

一个适配 Claude Code / Codex 等 Agent 环境的网页 PPT 技能，把文章、Markdown 或产品文档做成单文件 HTML 横向翻页 PPT，排版、配图与封面一次做完，浏览器打开即可演示。内置两套视觉系统：「电子杂志 × 电子墨水」负责叙事、观点与个人风格表达，「瑞士国际主义」以网格、单一高饱和锚点色和 22 种锁定版式承载事实、产品与分析。相比套模板的 PPT 工具，它交付的是无需构建、无需服务器的单个 HTML 文件，还能顺带生成公众号 21:9、小红书 3:4、视频号横版等多平台封面。

技能介绍

归藏双风格 HTML 幻灯片（guizang-ppt-skill）是产品设计师藏师傅做的一个网页 PPT 技能，适配 Claude Code / Codex 等 Agent 环境，用于生成单文件 HTML 横向翻页 PPT、PPT 配图和多平台封面。定位是把文章、Markdown 或产品文档变成可演示的网页 deck：排版、配图和封面一次做完，输出的单个 HTML 文件在浏览器里打开就能演示。

它内置两套视觉系统：

Style A：电子杂志 × 电子墨水。像 Monocle 贴上了代码，适合叙事、观点、分享、个人风格表达。
Style B：瑞士国际主义。网格至上、单一高饱和锚点色、直角、发丝线、极致字号对比，适合事实、产品、分析、方法论表达。

适用场景

✅ 合适：线下分享 / 行业内部讲话 / 私享会 / AI 产品发布 / demo day / 带强烈个人风格的演讲。

❌ 不合适：大段表格数据 / 培训课件（信息密度不够）/ 需要多人协作编辑（静态 HTML）。

↔ 左右滑动查看完整表格

任务	推荐方式
长文章变演讲 PPT	先抽核心观点，再按 6-10 页节奏生成 deck
方法论 / 产品分析	用 Style B 瑞士风，优先使用锁定版式和 21:9 主图
个人分享 / 观点表达	用 Style A 电子杂志风，保留更强叙事感
PPT 配图	在 Codex 中用 GPT-Image 2.0 / GPT-M 2.0 生成照片、信息图、流程图、UI 情景图
多平台封面	从同一份内容生成公众号 21:9、1:1 分享卡、小红书 3:4、视频号横版封面
截图统一风格	把原始截图重新生成到模板需要的比例，再插入 PPT

核心能力

双视觉系统：电子杂志风负责叙事，瑞士风负责事实表达。
横向左右翻页：键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点 / ESC 索引。
Style A 10 种布局：封面、章节、数据大字报、图文、图片网格、Pipeline、对比等。
Style B 22 种锁定版式：Cover、Statement、KPI Tower、Loop Diagram、Duo Compare、Image Hero、Closing Manifesto 等。
主题色预设：Style A 5 套电子墨水主题，Style B 4 套瑞士高饱和锚点色；不允许自定义 hex 值，只能从预设主题中选择。
Codex 可选配图流程：可用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、系统关系图、UI 情景图，并按模板比例插入。
多平台封面：可用同一套视觉规则生成公众号 21:9、公众号分享卡 1:1、小红书 3:4、视频号横版等封面。
低性能静态模式：按 B 可关闭 WebGL / canvas 动画，让动态内容退回静态背景。
单文件 HTML：不需要构建、不需要服务器，浏览器直接打开。

主题色预设：Style A 有墨水经典（#0a0a0b/#f1efea）、靛蓝瓷（#0a1f3d/#f1f3f5）、森林墨（#1a2e1f/#f5f1e8）、牛皮纸（#2a1e13/#eedfc7）、沙丘（#1f1a14/#f0e6d2）；Style B 有克莱因蓝 IKB（#002FA7）、柠檬黄（#FFD500）、柠檬绿（#C5E803）、安全橙（#FF6B35）。切换主题只需替换 template.html 开头 :root{} 里的 6 行变量，其他 CSS 全走 var(--...)。用户说"瑞士风 PPT"但没指定颜色时，默认推荐克莱因蓝 IKB。

核心设计原则：克制优于炫技（WebGL 背景只在 hero 页透出）；结构优于装饰（信息靠字号 + 字体对比 + 网格留白，不用阴影和浮动卡片）；图片是第一公民（对齐正文内容区，比例稳定，只裁底部）；配图只做素材（不要把 PPT 页脚、标题和角标画进图片里）；节奏靠 hero 页交替；低性能可退场；术语统一（Skills 就是 Skills，不中英混译）；瑞士风必须守版式（不发明不存在的页面）。

注意事项：当前核心交付是 HTML，不支持导出 PPTX，需要 PPTX 时建议把 HTML 页面作为视觉稿再转换；配图非必须，没有配图也能生成 PPT。

效果预览

旧主题 · Style A 电子杂志风

新主题 · Style B 瑞士国际主义

工作方式

选择风格 — Style A 电子杂志风，或 Style B 瑞士国际主义。
需求澄清 — 7 问清单：风格、受众、时长、素材、图片/截图需求、主题色、硬约束。
拷贝模板 — Style A 用 assets/template.html，Style B 用 assets/template-swiss.html。
填充内容 — 先做主题节奏表，再从对应 layout 骨架里挑、粘、改文案。
可选配图 — 在 Codex 中询问是否用 GPT-Image 2.0 / GPT-M 2.0 生成配图，再按页面比例插入。
自检 — 对照 references/checklist.md，P0 级问题必须全过；瑞士风还要运行版式校验器。
预览 — 浏览器直接打开。
迭代 — inline style 改字号/高度/间距。

平台支持：Claude Code 和 Codex 原生支持；Cursor 等本地 Agent 可用（需要能读写文件并执行 shell 命令）；WorkBuddy 适配中；普通 Chatbot 不推荐（没有文件系统和浏览器预览时，很难稳定生成完整 deck）。

你需要提供

文章、Markdown 或素材文件。
明确的风格偏好（Style A 或 Style B）。
对图片、截图、封面等附加需求描述。
可选：主题色、页数、受众等约束。

你会获得

一份可直接在浏览器中打开和演示的单文件 HTML 横向翻页 PPT。
按需生成的 PPT 配图（纪实照片、信息图、流程图、UI 情景图等）。
多平台封面（公众号 21:9、1:1 分享卡、小红书 3:4、视频号横版等）。

使用示例

向 Agent 描述你的需求，例如：

帮我基于这篇文章生成一份 8 页左右的瑞士风 PPT，需要 3 张配图，图片比例跟模板槽位匹配。

帮我把这个产品分析文档做成电子杂志风 PPT，重点突出观点和叙事节奏。

基于这份 PPT 的主题，做两张封面：公众号 21:9 头图和 1:1 分享卡，视觉保持一致。

把这些产品截图重新设计成统一的 16:10 PPT 配图，保留关键信息，不要画页脚和标题。

页面上的「试试这样做」示例：

把这篇长文改成一套网页 PPT，选择电子杂志风并为关键页生成配图。
为这个产品复盘做一份瑞士风 HTML deck，包含 KPI Tower、对比页和结尾宣言。
根据这份大纲生成可演示的 HTML PPT，支持键盘翻页、索引页和主题色预设。

视觉参考：Monocle 杂志的版式、YC Garry Tan "Thin Harness, Fat Skills"、Massimo Vignelli / Helvetica Forever / 瑞士国际主义网格系统、歸藏线下分享 PPT 系列。