使用 guizang-ppt-skill 制作电子杂志风幻灯片——以 OpenCode 分享为例的工作流最佳实践

为什么又是 PPT？

做技术分享，最让人头疼的不是内容本身——而是把内容变成好看的幻灯片。

你大概经历过这样的场景：花两天把分享内容打磨好，然后打开 Keynote 或 PowerPoint，盯着空白画布发呆。字号用多大？配色怎么搭？这张图放左边还是右边？两小时后，你还在调文本框的间距，而内容一点没推进。

这就是 guizang-ppt-skill 试图解决的问题——把”做幻灯片”这件事，从设计苦役变成”填内容”的乐高游戏。

guizang-ppt-skill 是什么

guizang-ppt-skill 是前大厂 UI/UX 设计师**歸藏（@op7418）**开源的一个 Claude Code / Codex Skill。发布 25 天就在 GitHub 斩获破万 Star，截止目前已超过 18,000 Star。

它的核心理念很直接：把十年设计经验压缩成约束规则，让 AI 在框架内稳定产出杂志级 HTML 演示文稿。

注意关键词——HTML 演示文稿，不是 .pptx 文件。你拿到的是一个单文件 HTML，浏览器打开就能翻页演示，不用装任何软件。

这个设计决策其实很聪明。.pptx 的排版能力有限，渲染效果依赖 Office 版本，而且不同平台打开可能走样。HTML 则恰好相反——CSS Grid 的排版精度、Web 字体的表现力、浏览器的跨平台一致性，天然适合做”杂志级排版”这件事。

两套视觉系统

guizang-ppt-skill 提供了两套截然不同的视觉系统：

两套风格各有拥趸，但如果你是做开源工具分享、技术经验交流这类”有温度的技术内容”，Style A 电子杂志风会是更自然的选择——它不冰冷，有阅读感，像在翻一本精心排版的独立杂志。

Style A 的五套主题色

Style A 有一个很”霸道”的设计决策：不允许自定义色值。你只能从五套主题中五选一。

歸藏的理由是：”保护美学比给自由更重要。”——印刷行业从不用纯白底（刺眼），Kindle 从不用纯黑字（暴力）。每套主题只是 6 个 CSS 变量的不同取值：

对于 OpenCode 这类技术工具分享，靛蓝瓷或墨水经典是最稳妥的起点——冷静但不冷酷，专业但有温度。

安装：一行命令

1

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

安装完成后，在 Claude Code 中直接说”帮我做一份杂志风 PPT”即可触发 Skill。

工作流最佳实践

以下是我以**”OpenCode 开源工具分享”**为场景，梳理出的完整工作流。假设分享时长约 20 分钟，面向有一定技术背景的开源爱好者。

Step 1 · 7 问需求澄清

不要跳过这一步。guizang-ppt-skill 的 Agent 会逐个确认以下问题，诚实回答比快速推进重要得多：

Step 2 · 叙事弧设计

电子杂志风的灵魂在于节奏。不是把内容堆上去就行，要有”翻杂志”的呼吸感。

为 OpenCode 分享设计的叙事弧：

1
2
3
4
5
6
7
8
9

钩子 — 1 页   : "你还在手动配 75 个模型吗？"（抛反差问题）
定调 — 2 页   : OpenCode 是什么？为什么它是 Claude Code 的最强开源平替
主体 — 5 页   : 核心特性拆解（Plan/Build 模式、Sub-agent 架构、
                 Skills 生态、多模型切换、终端体验）
转折 — 1 页   : "但开源 ≠ 免费——它的真正成本在哪？"
收束 — 2 页   : 我的推荐配置 + 一行命令上手 + 社区资源
封面 — 1 页   : 公众号分享封面图（21:9 横版）
────────────────
合计约 12 页 + 封面

hero 页和 non-hero 页必须交替，这是 Style A 的铁律。Hero 页（全屏暗底 + 大标题）负责”停顿和强调”，Non-hero 页负责”传递信息”。一张一弛，观众才不会累。

Step 3 · 匹配布局骨架

Style A 的 10 种布局是预制的 HTML 骨架，每种都是完整可粘贴的 <section> 代码块。你要做的不是”设计”，而是”对号入座”：

你会发现，选布局比做设计快十倍——因为每个布局的视觉规则已经被歸藏验证过了。

Step 4 · 素材准备与图片处理

这是实际使用中最容易被低估的一步。guizang-ppt-skill 不负责”帮你生成内容”——它负责”把你准备好的内容排好看”。

图片命名规范：

1
2
3

01-hero.jpg        # 页号补零 + 英文语义
03-arch.png        # 照片用 JPG，截图用 PNG
05-terminal.png    # 单张 ≥ 1600px 宽

无损换图技巧： 如果后续想换图，只需用同名文件覆盖，HTML 一个字都不用改。

Codex 环境加成： 如果你用的是 Codex（而非 Claude Code），Agent 可以调用 GPT-Image 2.0 直接生成配图——信息图、流程图、系统关系图甚至 UI 情景图都能现场出图，按模板比例槽位插入即可。

Step 5 · 自检清单

这是最容易被跳过、但也最重要的步骤。guizang-ppt-skill 提供了 references/checklist.md，P0 项必须全部通过：

如果是 Style B（瑞士风），还可以运行校验脚本：

1

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

Step 6 · 预览与迭代

1
2
3

# 直接用浏览器打开
open index.html   # macOS
start index.html  # Windows

键盘操作：

• ← → 翻页
• 滚轮 上下翻页
• 触屏 左右滑动
• ESC 进入索引模式
• B 切换低性能模式（关闭 WebGL 流体动画）
• 底部圆点 直接跳转

迭代建议：只调 inline style 的微调级别——字号微调 ±2px、间距微调 ±0.5rem。不要改网格结构，不要改字体层级；一旦动了骨架，连锁问题会让你后悔。

Step 7 · 生成配套封面

分享做完后，guizang-ppt-skill 还能顺手生成多平台封面：

• 📱 公众号头图 — 21:9 横版
• 📲 朋友圈分享卡 — 1:1 方形
• 📕 小红书封面 — 3:4 竖版
• 🎬 视频号封面 — 16:9 横版

对 Agent 说一句”基于这份 PPT 的核心观点，生成一张公众号 21:9 头图”即可。

实战心得

用 guizang-ppt-skill 做了几场分享后，几个体会：

1. “限制”反而是最大的生产力。 不允许自定义配色、布局只能从骨架里选——这些限制一开始让人觉得”不自由”，但实际用起来发现，它们消除了 90% 的无意义决策。你不用纠结”这个蓝色好看吗”，因为靛蓝瓷已经替你纠结过了。

2. 先有内容，再开 Skill。 guizang-ppt-skill 的强项是排版，不是帮你写稿。建议先在笔记工具里把分享内容的文字稿定下来，然后一次性丢给 Agent。边想内容边排版 = 两边都做不好。

3. 素材准备是隐形的时间杀手。 截图、架构图、数据图表——这些东西 Agent 不会替你变出来。建议在启动 Skill 之前就准备好，并按命名规范重命名。素材到位了，十分钟出片不是夸张。

4. 电子杂志风非常适合有”观点”的分享。 如果你只是罗列事实（”这个 API 有三个参数”），用 Style B 瑞士风更高效。但如果你有自己的判断和态度（”开源编程 Agent 正在改变什么”），Style A 的叙事节奏会让观点更有力量。

5. 单文件 HTML 的交付体验超出预期。 不需要对方装软件、不需要上传到某个平台、不需要担心版本兼容——一个 HTML 文件，浏览器打开即用。你甚至可以把它托管在 GitHub Pages 上，生成一个链接直接分享。

总结

guizang-ppt-skill 做了一件很聪明的事：它没有试图让 AI “学会设计”，而是让 AI “遵守设计规则”。 通过严格的视觉约束（不能自定义配色、布局从骨架选取、hero/non-hero 交替节奏），把 AI 的”创意”关进了”品质”的笼子里。

对于技术人来说，这意味着你再也不用在 Keynote 里调文本框到凌晨两点了。把你的专业用在内容上，把排版交给歸藏的十年设计经验。

安装只需要一行命令：

1

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

然后对 Claude Code 说：“帮我做一份电子杂志风的 PPT，主题是 OpenCode。”

参考资源

• guizang-ppt-skill GitHub 仓库
• 歸藏的 X (Twitter)
• 案例拆解：让 AI Agent 生成专业级 HTML 演讲幻灯片
• 谁还在用 PowerPoint？这个「电子杂志风」开源 PPT 技能，让我做演讲 slides 像排一本 Monocle