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：不需要构建、不需要服务器，浏览器直接打开

工作方式

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

核心设计原则

1. 克制优于炫技 — WebGL 背景只在 hero 页透出
2. 结构优于装饰 — 信息靠字号 + 字体对比 + 网格留白，不用阴影和浮动卡片
3. 图片是第一公民 — 图片要对齐正文内容区，比例稳定，只裁底部，顶部和左右完整
4. 配图只做素材 — 生成图只保留核心照片 / 图表 / UI，不要把 PPT 页脚、标题和角标画进图片里
5. 节奏靠 hero 页 — hero / non-hero 交替，才不累眼睛
6. 低性能可退场 — 按 B 能切换到静态模式，动态效果不能成为阅读负担
7. 术语统一 — Skills 就是 Skills，不中英混译
8. 瑞士风必须守版式 — Style B 优先还原原始 22P 版式，不要为了“多样”发明不存在的页面

视觉参考

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