归藏双风格 HTML 幻灯片
guizang-ppt-skill
把文章、Markdown 或产品文档做成可横向翻页的网页 PPT，排版、配图和封面一次做完。单个 HTML 文件，浏览器打开就能演示。
试试这样做
把这篇长文改成一套网页 PPT，选择电子杂志风并为关键页生成配图。
为这个产品复盘做一份瑞士风 HTML deck，包含 KPI Tower、对比页和结尾宣言。
根据这份大纲生成可演示的 HTML PPT，支持键盘翻页、索引页和主题色预设。
详细介绍
Guizang PPT Skill · 网页 PPT / 配图 / 封面
一个适配 Claude Code / Codex 等 Agent 环境的网页 PPT 技能，用于生成单文件 HTML 横向翻页 PPT、PPT 配图和多平台封面。
内置两套视觉系统：
- Style A：电子杂志 × 电子墨水。像 Monocle 贴上了代码，适合叙事、观点、分享、个人风格表达。
- Style B：瑞士国际主义。网格至上、单一高饱和锚点色、直角、发丝线、极致字号对比，适合事实、产品、分析、方法论表达。
效果预览
旧主题 · Style A 电子杂志风
新主题 · 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 套瑞士高饱和锚点色
- 🖼 Codex 可选配图流程：可用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、系统关系图、UI 情景图，并按模板比例插入
- 📰 多平台封面：可用同一套视觉规则生成公众号 21:9、公众号分享卡 1:1、小红书 3:4、视频号横版等封面
- 📴 低性能静态模式：按
B可关闭 WebGL / canvas 动画，让动态内容退回静态背景 - 📄 单文件 HTML：不需要构建、不需要服务器，浏览器直接打开
工作方式
- 选择风格 — 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 改字号/高度/间距
你需要提供
- 文章、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 配图，保留关键信息，不要画页脚和标题。
选型说明
Style A 电子杂志风
- 适合叙事、观点、分享、个人风格表达
- 5 套主题色预设（墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘）
Style B 瑞士国际主义
- 适合事实、产品、分析、方法论表达
- 4 套主题色预设（克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙）
- 22 种锁定版式，严格校验，不能自定义页面结构
主题色预设
不允许自定义 hex 值，只能从预设主题中选择。
Style A 电子杂志主题
| 预览 | 主题 | 核心色与适合场景 |
|---|---|---|
 |
🖋 墨水经典 | #0a0a0b / #f1efea。通用默认、商业发布、不知道选啥时最稳。 |
 |
🌊 靛蓝瓷 | #0a1f3d / #f1f3f5。科技、研究、AI、技术发布会。 |
 |
🌿 森林墨 | #1a2e1f / #f5f1e8。自然、可持续、文化、非虚构内容。 |
 |
🍂 牛皮纸 | #2a1e13 / #eedfc7。怀旧、人文、阅读、历史、文学分享。 |
 |
🌙 沙丘 | #1f1a14 / #f0e6d2。艺术、设计、创意、时尚和画廊感内容。 |
切换主题只需替换 template.html 开头 :root{} 里的 6 行变量，其他 CSS 全走 var(--...)。
Style B 瑞士主题
| 预览 | 主题 | 锚点色与适合场景 |
|---|---|---|
 |
🔵 克莱因蓝 IKB | #002FA7。通用默认、商业发布、AI 产品、方法论。 |
 |
🟡 柠檬黄 | #FFD500。年轻、运动、零售、消费品、Y2K 复古。 |
 |
🟢 柠檬绿 | #C5E803。生态、可持续、健康、Z 世代品牌。 |
 |
🟠 安全橙 | #FF6B35。警示、新闻、工业、运动、活力主题。 |
如果用户说“瑞士风 PPT”但没有指定颜色，默认推荐克莱因蓝 IKB。
注意事项
- 平台支持：Claude Code 和 Codex 原生支持；Cursor 等本地 Agent 可用（需要能读写文件并执行 shell 命令）；WorkBuddy 适配中；普通 Chatbot 不推荐（没有文件系统和浏览器预览时，很难稳定生成完整 deck）。
- 限制：不适合大段表格数据、培训课件、需要多人协作编辑的场景。
- 低性能静态模式：按
B可关闭 WebGL / canvas 动画，让动态内容退回静态背景。 - 不允许自定义颜色：只能从预设主题中选择，以保护整体风格。
- 配图非必须：没有配图也能生成 PPT，配图流程只在需要时使用。
- 输出为 HTML：当前核心交付是 HTML，不支持导出 PPTX。如果需要 PPTX，建议把 HTML 页面作为视觉稿再转换。
核心设计原则
- 克制优于炫技 — WebGL 背景只在 hero 页透出
- 结构优于装饰 — 信息靠字号 + 字体对比 + 网格留白，不用阴影和浮动卡片
- 图片是第一公民 — 图片要对齐正文内容区，比例稳定，只裁底部，顶部和左右完整
- 配图只做素材 — 生成图只保留核心照片 / 图表 / UI，不要把 PPT 页脚、标题和角标画进图片里
- 节奏靠 hero 页 — hero / non-hero 交替，才不累眼睛
- 低性能可退场 — 按
B能切换到静态模式，动态效果不能成为阅读负担 - 术语统一 — Skills 就是 Skills，不中英混译
- 瑞士风必须守版式 — Style B 优先还原原始 22P 版式，不要为了“多样”发明不存在的页面
视觉参考
- Monocle 杂志的版式
- YC Garry Tan "Thin Harness, Fat Skills"
- Massimo Vignelli / Helvetica Forever / 瑞士国际主义网格系统
- 歸藏线下分享 PPT 系列