双视觉系统（杂志风+瑞士极简），22种锁定版式
详细介绍
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 系列
试试这样做
- 把这篇长文改成一套网页 PPT，选择电子杂志风并为关键页生成配图。
- 为这个产品复盘做一份瑞士风 HTML deck，包含 KPI Tower、对比页和结尾宣言。
- 根据这份大纲生成可演示的 HTML PPT，支持键盘翻页、索引页和主题色预设。
作者：èå¸å 产å设计å¸ï¼ä¸æ³¨ AIãLLMãAI å¾åè§é¢ä¸è®¾è®¡ ｜ GitHub Stars 18K ｜ 标签：幻灯片 已认证
来源：colaos.ai ｜ Skill ID：guizang-ppt-skill
留言 0
还没有留言，快来抢沙发