guizang-ppt-skill：2.4 万 Star 的 AI 做 PPT 神技！一句话出瑞士风幻灯片，还自带演讲者模式

开篇：AI 做 PPT 的工具我试了一圈，只有这个让我真的敢拿去线下讲

市面上"AI 一键生成 PPT"的工具至少 20 个，但讲真话：

• Gamma / Tome / 美图 AI PPT：模板感扑面，配色字体全在讨好算法，台下一眼看出是 AI 做的；

• WPS AI / 百度文库：堆字堆图，10 页有 8 页是三段式 bullet；

• Marp / Slidev：程序员审美，技术分享还行，商业发布会用不上；

• 手动 Keynote / PowerPoint：效果最好但费命，一份 30 页的演讲稿得磨两天。

直到上个月被推了 guizang-ppt-skill——一个由独立开发者 歸藏 开源的 Claude Code / Codex Skill，4 个月 GitHub 2.4 万 Star，我才第一次觉得：

AI 生成的 PPT 终于能拿到线下讲了。

原因有三：

1. 双视觉系统：电子杂志风（叙事）+ 瑞士国际主义（事实），不是千篇一律的"玻璃拟态卡片"；

2. 单文件 HTML：不用构建、不用服务器，浏览器双击打开，现场不怕断网；

3. 完整演讲者模式：当前页/下一页预览、备注、计时、激光笔、圈选、黑屏、观众屏双窗口——这是 Keynote 才有的待遇。

这篇是我照着 README 和实操踩了一遍坑后的完整教程。Windows / macOS 都适用。

---

目录

1. guizang-ppt-skill 是什么

2. 双视觉系统：杂志风 vs 瑞士风，怎么选

3. 安装：一行命令

4. 从一句话到一份 PPT 的完整流程

5. 22 种瑞士风版式速查

6. 主题色：9 套预设，不许自定义

7. 配图：GPT-Image 2.0 出图 + 截图美化

8. 封面生成：公众号/小红书/视频号一键出图

9. 演讲者模式：本地双窗口，不用联网

10. 质量自检：3 个校验器

11. 常见坑

12. 适合谁 / 不适合谁

---

一、guizang-ppt-skill 是什么

官方一句话：

一个适配 Claude Code / Codex 等 Agent 环境的网页 PPT 技能，用于生成单文件 HTML 横向翻页 PPT、PPT 配图和多平台封面，并内置完整的排练与演讲者模式。

它不是一个网站，不是一个 SaaS，而是一个 Skill——你装到 Claude Code 或 Codex 里，直接说人话：

帮我基于这篇文章做一份瑞士风 PPT，7 页左右，2-3 张配图。

它就带你走完整个工作流。

输出的是一个 .html 文件：

• 内嵌所有 CSS、JS、SVG、图片；

• 双击浏览器打开；

• 键盘左右翻页、触屏滑动、滚轮、ESC 索引；

• 按 P 进演讲者模式；

• 按 B 关 WebGL 进入低性能静态模式。

关键特性

• 双视觉系统：电子杂志 + 瑞士国际主义；

• 📐 横向左右翻页：键盘 / 滚轮 / 触屏 / 圆点 / ESC；

• 🧩 10 种 Style A 布局 + 22 种 Style B 锁定版式；

• 🎨 9 套主题色（Style A 5 套 + Style B 4 套），不许自己写 hex；

• 🖼 Codex 配图：可用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、UI 情景图；

• 📰 多平台封面：公众号 21:9、1:1 分享卡、小红书 3:4、视频号 16:9；

• 🎤 完整演讲者模式：双窗口、备注、计时、自动翻页、激光笔、圈选、黑屏、故障恢复；

• 📴 低性能退场：按 B 关 WebGL，老爷机也能放；

• 📄 单文件 HTML：零依赖。

---

二、双视觉系统：杂志风 vs 瑞士风，怎么选

这是这个 Skill 最核心的设计选择，先搞清楚再用。

2.1 Style A：电子杂志 × 电子墨水

像 Monocle 贴上了代码。

适合：

• 线下私享会、个人分享；

• 观点表达、故事叙事；

• 强烈个人风格的演讲；

• AI / 创意 / 设计类主题。

视觉特征：

• 衬线/无衬线混排；

• 大字号 hero 页；

• 图片主导；

• 5 套电子墨水主题：墨水经典、靛蓝瓷、森林墨、牛皮纸、沙丘。

2.2 Style B：瑞士国际主义

网格至上、单一高饱和锚点色、直角、发丝线、极致字号对比。

适合：

• 产品发布、方法论；

• 技术分享、数据分析；

• 商业评审、行业洞察；

• 任何"靠事实说话"的场合。

视觉特征：

• 16 列 grid；

• 无阴影、无渐变、无圆角；

• 1px 发丝线；

• 4 套锚点色：克莱因蓝 IKB、柠檬黄、柠檬绿、安全橙；

• 22 个具名版式（S01-S22）不能乱发明。

2.3 怎么选

场景	选什么
"我想讲一个故事"	Style A
"我要讲清楚一件事"	Style B
技术会议/产品发布会	Style B（克莱因蓝默认）
个人品牌/TED 式	Style A
不确定	从 Style B 开始，最稳

---

三、安装：一行命令

3.1 前置

• Node.js 18+（用校验器需要）；

• Claude Code 或 Codex；

• Git。

3.2 一行命令安装（推荐）

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

Windows PowerShell 同样适用。

3.3 或者：直接把这段话发给你的 AI

帮我安装 guizang-ppt-skill。请把 https://github.com/op7418/guizang-ppt-skill 克隆到 ~/.claude/skills/guizang-ppt-skill，安装完成后检查 SKILL.md、assets/、references/ 是否存在。

AI 会自己执行 git clone 并校验。

3.4 手动安装

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

Windows 路径改成：

git clone https://github.com/op7418/guizang-ppt-skill.git $env:USERPROFILE\.claude\skills\guizang-ppt-skill

3.5 验证

在 Claude Code 里说：

列出你现在有的 skill，找到 guizang-ppt-skill 告诉我。

它能找到就装好了。

---

四、从一句话到一份 PPT 的完整流程

4.1 触发词

装好以后，Claude Code 会自动识别这些话：

• "帮我做一份杂志风 PPT"

• "帮我做一份瑞士风 PPT"

• "生成一个 horizontal swipe deck"

• "editorial magazine style presentation"

• "基于这篇文章做一张公众号 21:9 封面"

• "给这份 PPT 补齐演讲备注，并用演讲者模式排练"

4.2 Agent 会走的 10 步

Skill 本身是结构化工作流，不是一次性 prompt：

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. 生成演讲备注 — 每页目的、讲述要点、转场、计划时长；

7. 自检 — 对照 references/checklist.md，P0 问题全过；

8. 预览 — 浏览器打开；

9. 排练/演讲 — 按 P 进演讲者模式；

10. 迭代 — 调字号、间距、节奏。

4.3 完整示例 prompt

帮我基于这篇文章（贴文章链接或粘贴文本）生成一份 8 页的瑞士风 PPT。 受众是 Java 后端开发者，技术分享 20 分钟。 用克莱因蓝 IKB 主题。 需要 3 张配图，主图比例 21:9。 给每页生成演讲备注和计划时长。 完成后跑瑞士风校验器。

发出去，喝杯水，回来 deck 就好了。

---

五、22 种瑞士风版式速查

Style B 强到"不给你自由"——只能从 S01 到 S22 选，每个版式有固定用途。

常用的几个：

版式	用途
S01 Cover	封面：大标题 + 副标题 + 锚点色
S02 Statement	一句话大字报
S03 KPI Tower	关键数字竖排
S04 Loop Diagram	循环流程
S05 Duo Compare	左右对比
S06 Image Hero	21:9 主图 + 文字
S07 Pipeline	横向流程图
S08 Three Up	三栏并列
S09 Quote	大引号
S10 Data Table	数据表格（有限信息密度）
S11 Timeline	时间线
S12 Closing Manifesto	结尾宣言

完整 22 个在 references/layouts-swiss.md。

为什么要锁版式？ 因为 AI 最容易出问题的地方就是"自由发挥"——它会发明你从没见过的奇怪布局，然后字号、对齐全崩。锁定 22 个经过设计的版式，AI 只需要选+填，质量稳定。

如果你确实要扩展，需要同步改：

• assets/template-swiss.html；

• references/layouts-swiss.md；

• references/swiss-layout-lock.md；

• scripts/validate-swiss-deck.mjs。

---

六、主题色：9 套预设，不许自定义

6.1 Style A 电子杂志主题

主题	核心色	适合
🖋 墨水经典	#0a0a0b / #f1efea	通用默认、商业发布、最稳
🌊 靛蓝瓷	#0a1f3d / #f1f3f5	科技、研究、AI、技术发布
🌿 森林墨	#1a2e1f / #f5f1e8	自然、可持续、文化、非虚构
🍂 牛皮纸	#2a1e13 / #eedfc7	怀旧、人文、阅读、历史、文学
🌙 沙丘	#1f1a14 / #f0e6d2	艺术、设计、创意、时尚

6.2 Style B 瑞士主题

主题	锚点色	适合
🔵 克莱因蓝 IKB	#002FA7	通用默认、商业、AI、方法论
🟡 柠檬黄	#FFD500	年轻、运动、零售、Y2K
🟢 柠檬绿	#C5E803	生态、可持续、健康、Z 世代
🟠 安全橙	#FF6B35	警示、新闻、工业、运动

6.3 为什么不让自定义颜色

自由选色很容易破坏整体风格，所以只允许从预设主题里选。

切主题只需要替换模板开头 :root{} 里的 6 行 CSS 变量。

---

七、配图：GPT-Image 2.0 出图 + 截图美化

7.1 配图流程

在 Codex 环境里，deck 初稿完成后 Agent 会主动问：

需不需要生成配图？

确认后再问类型，常用 5 类：

类型	用途
人文纪实照片	富士/徕卡感真实场景，增加表现力
信息图/流程图/对比图/系统关系图	解释抽象概念
截图美化/再设计	CleanShot X 式背景画布，不重画内容
数据大字报	关键数字做成视觉素材
多图拼贴	极宽图片槽位

7.2 四个铁律

Agent 会被强制要求遵守：

1. 图片是嵌入素材，不能自带页脚、页底、标题、角标、页码、装饰边框；

2. 图片语言跟随 deck 语言：中文 deck 信息图用中文标签；

3. 比例必须先匹配落位：瑞士风主图 21:9，通用主图 16:9/16:10，截图 16:10；

4. 截图保真优先：用内置 assets/screenshot-backgrounds/ 背景做缩放/留边，不默认重画。

7.3 不用 GPT-Image 也行

你可以给 Agent 本地图片路径，它会复制到 assets 目录并按槽位插入。

---

八、封面生成：公众号/小红书/视频号一键出图

同一套视觉规则，能一次生成四种封面：

平台	比例	要点
公众号头图	21:9	主标题优先，右侧视觉锚点
公众号分享卡	1:1	和头图共用主题色、关键词
小红书封面/轮播	3:4	大标题，多张统一字号节奏
视频号/横版	16:9	标题 + 副标题 + 单一视觉焦点

Prompt 示例：

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

---

九、演讲者模式：本地双窗口，不用联网

这是这个 Skill 最"专业"的部分，也是大多数 HTML PPT 框架缺失的。

打开 deck 后，点击右下角 P 进入演讲者视图。浏览器会同时打开一个干净的观众屏。

9.1 演讲者能看到什么

• 当前页与下一页：上下排列，16:9 预览，小屏等比缩放；

• 宫格选页：原位切换总览，点选回到双预览，观众屏同步；

• 结构化备注：标题、本页目的、讲述要点、转场必填；

• 进度状态：当前页/总页数、完成百分比、观众屏连接状态；

• 时间：已进行、本页、剩余/超时；

• 排练模式：记录每页实际时长和整场汇总，存浏览器本地；

• 自动翻页：默认关闭，只有大纲给了停留秒数才启用。

9.2 现场工具

• 激光笔、圈选、清除（同步到观众屏）；

• 一键黑屏 / 白屏；

• 冻结观众屏；

• 观众屏关闭后明确显示"未连接"，可重开；

• 退出演讲自动关观众窗。

9.3 快捷键

键	作用
← / →	翻页
Home / End	首页/尾页
G	宫格选页
L	激光笔
C	圈选
B / W	黑屏/白屏
F	冻结观众屏
P	进/出演讲者模式
?	完整快捷键
B（非演讲中）	切换低性能静态模式

9.4 故障恢复

• 观众窗关了 → 心跳超时显示"未连接"，点"重新打开观众屏"；

• 浏览器不允许自关 → 观众端显示"演示已结束"；

• 演前检查覆盖弹窗、全屏、字体、图片/视频、16:9 预览，并提醒人工确认 HDMI、转接器、投影仪。

9.5 为什么我敢线下用

因为它纯本地：

• 不依赖实时字幕、云端中继、手机遥控、AI 教练；

• 没有"网络断了 PPT 就废了"的风险；

• 单文件 HTML 拷 U 盘里，会场电脑随便开。

---

十、质量自检：3 个校验器

guizang-ppt-skill 自带 Node.js 校验脚本，AI 生成完会自动跑：

10.1 瑞士风版式校验

node scripts/validate-swiss-deck.mjs path/to/index.html

会检查：

• 有没有用未授权的版式；

• 标题是不是被居中（瑞士风不允许）；

• SVG 内有没有写字；

• 图片是不是在预留槽位里；

• 有 Playwright 时还能量化真实渲染后的 overflow、底部空白、标题间距。

10.2 演讲备注校验

node scripts/validate-presenter-mode.mjs path/to/index.html
node scripts/validate-presenter-mode.mjs path/to/index.html --target-minutes 30

检查：

• 每页有没有目的、要点、转场；

• 计划时长总和是否符合目标分钟数；

• 运行时元素是否完整。

10.3 演讲者运行时防漂移

node scripts/check-presenter-runtime-sync.mjs

防止 Style A 和 Style B 两套模板的演讲者代码在迭代中分叉。

这三个校验器把"AI 乱生成"的风险压到最低。

---

十一、常见坑

Q1：Claude Code 说找不到这个 skill

检查：

ls ~/.claude/skills/guizang-ppt-skill/

Windows：

dir $env:USERPROFILE\.claude\skills\guizang-ppt-skill\

应该看到 SKILL.md、assets/、references/。没有就重装。

Q2：生成的 HTML 打开是空白

• 确认浏览器是现代浏览器（Chrome/Edge/Firefox/Safari 最新版）；

• 不要用 IE；

• 如果本地双击被 CSP 拦，python -m http.server 8000 起个本地服务。

Q3：中文字体在别人电脑上变型式

模板里用的是系统字体栈（PingFang SC、Microsoft YaHei、Noto Sans CJK 等），大多数字体都有 fallback。不要自定义字体引入外部文件，单文件 HTML 会变巨大。

Q4：瑞士风校验器报错 "centered title not allowed"

瑞士风标题不允许居中。这是设计硬约束，不要想绕过，按校验器提示改。

Q5：Codex 配图生成失败

• 确认你有 GPT-Image 2.0 或 GPT-M 2.0 的访问权限；

• 网络问题可以跳过配图，先把 deck 做完，手动补图。

Q6：能不能导出 PPTX？

当前核心交付是 HTML。 可以：

• 浏览器全屏演示；

• 用浏览器"打印 → PDF"导出 PDF；

• 用截图/录屏做素材。

PPTX 不是主流程。如果一定要 PPTX，建议把 HTML 当视觉稿，手动在 Keynote / PowerPoint 复刻。

Q7：观众窗口弹不出来

浏览器拦截了弹窗。地址栏应该有提示，允许弹窗后再按 P。

Q8：可以加自己的版式吗

• Style A：可以，直接在 references/layouts.md 扩展；

• Style B：更严格，需要同步改模板、layouts 文档、锁定文档、校验器四个文件。

Q9：商用授权？

AGPL-3.0。如果只是内部演示、公开演讲，免费随便用。如果要把它集成到商业产品里分发，需要遵守 AGPL（开源你修改后的代码）。用于公司内部演示不触发分发条款。

---

十二、适合谁 / 不适合谁

✅ 适合

• 线下分享、行业内部讲话、私享会；

• AI / 科技产品发布、demo day；

• 有强烈个人风格的演讲者；

• 技术会议、方法论分享；

• 不想花钱买 SaaS PPT 工具；

• 想要一份"断网也能放"的 deck。

❌ 不适合

• 大段表格数据（信息密度不够，用 LaTeX/beamer 或 Marp）；

• 培训课件（一屏几十条 bullet，不是它的强项）；

• 需要多人协作编辑（HTML 文本不适合多人改）；

• 必须交 .pptx 文件给公司的场景。

---

最后总结

guizang-ppt-skill 最让我佩服的一点是它的克制：

• 不做"无限模板"，只给两套经过设计的视觉系统；

• 不给自定义颜色，只给 9 套调色板；

• 不让 AI 发明版式，只给 22 个锁定布局；

• 不做云端协作，只做单文件 HTML；

• 不做花哨动效，只做必要的 hero 转场。

正是这些"不做"，才让 AI 生成的东西能看、能讲、敢放出街。

花半小时装好玩一下，你会重新理解"AI 做 PPT"这件事。

项目地址：https://github.com/op7418/guizang-ppt-skill 作者 X：https://x.com/op7418 360 安全龙虾版：https://claw.360.cn Cola Skill：guizang-ppt-skill - Cola Skill