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

为什么又是 PPT？

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

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

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

这个 Skill 的本质

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

它与传统”PPT 生成工具”的根本区别在于：

Agent 直接写 HTML/CSS 代码 → 浏览器即播放器 → 单文件交付

你拿到的不是 .pptx 文件，而是一个单文件 HTML。浏览器打开就能翻页演示，不用装任何软件。这个设计决策很聪明——.pptx 的排版能力有限，渲染效果依赖 Office 版本；HTML 则恰好相反：CSS Grid 的排版精度、Web 字体的表现力、浏览器的跨平台一致性，天然适合杂志级排版。

歸藏把十年设计经验压缩成约束规则，让 AI 在框架内稳定产出杂志级 HTML 演示文稿。它没有试图让 AI “学会设计”，而是让 AI “遵守设计规则”。

两套视觉系统

guizang-ppt-skill 内置了两套完整的视觉系统，气质迥异：

两套风格各有拥趸。做开源工具分享、技术经验交流这类”有温度的技术内容”时，Style A 电子杂志风是更自然的选择——不冰冷，有阅读感，像在翻一本精心排版的独立杂志。而做产品发布、数据分析时，Style B 的瑞士理性主义则能压住场子。

Style A · 5 套主题色速查

Style A 有一个”霸道”的设计决策：不允许自定义 hex 色值，只能从五套主题中选。歸藏的理由是”保护美学比给自由更重要”——印刷行业从不用纯白底（刺眼），Kindle 从不用纯黑字（暴力）。每套主题只是 6 个 CSS 变量（--ink / --ink-rgb / --paper / --paper-rgb / --paper-tint / --ink-tint）的不同取值：

Style B · 4 套锚点色速查

Style A · 10 种完整版式菜单

与 Style B 的 S01-S22 锁定版式不同，Style A 的 10 种布局更自由——不需要 data-layout 声明，不需要校验脚本。但每种布局仍然有明确的设计骨架和使用场景。它们定义在 references/layouts.md 中，是可粘贴的 <section> HTML 代码块。

注意：Style A 的布局不像 Style B 那样有严格的版式锁（S01-S22 编号），但同样有强制规则——这些布局骨架已经过比例和字号的充分验证，不要改网格结构，不要改字体层级，只换文案和图片路径。

Style A 节奏硬规则

Style A 虽然版式自由，但节奏约束和 Style B 一样严格：

• ❌ 连续 3 页以上同一色调（hero dark 或 light）= P0 错误
• ❌ 8 页以上无 hero dark 页 = 不合格
• ✅ hero 页（暗底大标题）与 non-hero 页（亮底内容）必须交替
• ✅ 每 3-4 页插入 1 个 hero 页，制造翻杂志的呼吸感

完整工作流（6 个阶段）

以下以**”OpenCode 开源工具分享”**为实战场景，梳理完整工作流。假设：20 分钟分享时长，面向开源社区技术爱好者，线下沙龙约 30 人。

阶段 0 · 安装 Skill（一次性）

1

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

或手动克隆：

1

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

验证安装：确认 SKILL.md、assets/、references/ 三个目录/文件都存在。

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

阶段 1 · 需求澄清（动手前必做）

如果已经有完整的大纲和图片素材，可以跳过。 但如果只有一个模糊主题，Agent 会逐项问 7 个问题。这个阶段最关键——结构定错了，后面翻修成本很高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

① 风格选择
   Style A（杂志风）or Style B（瑞士风）？

② 受众与场景
   给谁看？什么场合？决定信息密度和语气

③ 时长与页数
   演讲多长时间？→ 推导合理页数（通常 6-12 页）

④ 素材情况
   有截图吗？有数据吗？需要配图生成吗？

⑤ 主题色（只能从预设中选，不能自定义 hex）
   Style A: 墨水经典/靛蓝瓷/森林墨/牛皮纸/沙丘
   Style B: IKB蓝/柠檬黄/柠檬绿/安全橙

⑥ 图片需求
   需要 Agent 生成配图吗？截图需要再设计吗？

⑦ 硬约束
   有品牌色要求吗？有必须包含/排除的内容吗？

以 OpenCode 分享为例，我们的选择：

阶段 2 · 内容结构设计（先定节奏，再写代码）

在动手写 HTML 之前，必须先做一页主题节奏表。电子杂志风的灵魂在于节奏——不是把内容堆上去就行，要有”翻杂志”的呼吸感。

叙事弧模型

1
2
3
4
5

钩子 (Hook)       → 1 页   : 抛反差/问题/硬数据
定调 (Context)    → 1-2 页 : 背景/你是谁/为什么讲
主体 (Core)       → 3-5 页 : 核心内容，布局穿插
转折 (Shift)      → 1 页   : 打破预期/提出新观点
收束 (Takeaway)   → 1-2 页 : 金句/悬念/行动建议

为 OpenCode 分享设计的节奏表

关键规则：hero 页和 non-hero 页必须交替。 Hero 页（全屏暗底 + 大标题）负责”停顿和强调”，Non-hero 页负责”传递信息”。连续 3 页同类型 = P0 级错误。一张一弛，观众才不会累。

如果是 Style B（瑞士风），节奏表还需要遵守额外的硬性规则：

• 7-8 页 deck 至少使用 6 个不同 S 编号版式
• 不允许连续 3 页使用同一种主体结构
• 每个 <section> 必须写 data-layout="Sxx"

阶段 3 · 代码生成（Agent 写 HTML）

这是 Agent 的核心工作阶段。把节奏表交给 Agent，让它逐页填充。

代码生成流程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Step 3a: 拷贝选定的模板
  Style A → assets/template.html
  Style B → assets/template-swiss.html（2419 行完整骨架）
  命名为 index.html

Step 3b: 逐页填充（按节奏表顺序）
  对每一页：
    ① 从 references/layouts.md（或 layouts-swiss.md）找到对应布局的 HTML 骨架
    ② 粘贴骨架到 template 的对应位置
    ③ 替换文案、数据、图片路径
    ④ 确保遵守 P0 对齐法则（见下文）
    ⑤ 检查字号/字重阶梯是否匹配

Step 3c: 全局调整
  - 替换主题色 CSS 变量（从 themes.md 或 themes-swiss.md 选定的那套）
  - 更新 chrome（页眉）和 foot（页脚）的标题/页码
  - 统一检查所有图片槽位绑定

P0 对齐法则（违反 = 整页报废）

无论选哪种风格，这五条对齐规则是硬性的：

1. 不二次叠加水平 padding — .canvas-card 已自带 5vw 左右 padding，主体内容不要再加
2. kicker 在大标题上方，不压成左右
3. 双约束限高 min(Xvw, Yvh) 中 Y ≥ X × 1.6
4. canvas-card 子元素用 grid gap，不用 margin 堆
5. 底部分页安全区 — 主内容最低处不要触及 nav（底部 8vh 是安全区）

字号与字重阶梯（瑞士风硬规则）

Style B 有一条”反直觉”的铁律——越大越细，越小越粗：

演示最小字号下限

阶段 4 · 配图生成（可选）

如果 deck 需要配图，Agent 会根据版面槽位生成。这主要适用于 Codex 环境（可调用 GPT-Image 2.0）。

配图四条规则：

1. 图片不要自带页脚、标题、角标、页码、装饰边框——这些交给 HTML
2. 图片语言跟随 deck 语言
3. 图片比例必须先匹配落位槽位
4. 用户截图优先用内置背景资产做程序化适配，不要默认重画

素材准备的实用技巧：

• 命名规范：01-hero.jpg / 03-arch.png（页号补零 + 英文语义）
• 照片用 .jpg，截图用 .png，单张 ≥ 1600px 宽
• 无损换图：新图同名覆盖旧图，HTML 一个字不改
• 素材到位了，十分钟出片不是夸张

阶段 5 · 质量检查（自检 + 校验）

这是最容易被跳过、但也最重要的步骤。

手工自检（对照 checklist.md 分级）

P0 · 一定不能犯的错：

• 正文页都来自合法布局（Style B 必须 S01-S22，不能自己发明 P23/P24）
• 顶部中文标题默认左上对齐，没有居中
• 字号不低于下限（正文 ≥ 18px，caption ≥ 14px）
• 字重阶梯正确（越大越细，越小越粗）
• Hero 页与 non-hero 页交替，没有连续 3 页同类型
• 字体三级分工正确：衬线→观点，非衬线→信息，等宽→元数据
• 页脚元数据完整：章节号、日期、页码
• 主题色 CSS 变量完整替换
• 所有链接可点击
• 图片后缀正确（照片 .jpg，截图 .png）
• 无溢出行（浏览器 16:9 视口下内容不截断）
• 没有在 SVG 里写可见文字（标签放 HTML 里）
• 所有图片都在 data-image-slot 里
• S22 图片用 object-position:center 35%，不是 top center

瑞士风校验脚本（自动化）

1

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

这个脚本会拦截：未登记版式 / 缺少 data-layout / P23/P24 实验结构 / SVG 内写文字 / S22 图片未绑定 / 居中标题等硬伤。

阶段 6 · 预览与迭代

1
2
3
4

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

操作方式：

迭代原则：

Agent 直接修改 HTML 的 inline style，改完刷新浏览器即可看到效果。调的是微调级别——字号 ±2px、间距 ±0.5rem。不要改网格结构，不要改字体层级；一旦动了骨架，连锁问题会让你后悔。

可以继续对话：”把第三页的 KPI 数字改大一点”、”第五页的图片换成 16:10”。

完整示例：一次典型对话

假设你已经有了 OpenCode 相关素材，对话流程如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

你：
"帮我基于这份内容做一份杂志风 PPT，控制在 10 页左右，
 主题用靛蓝瓷，需要配几张终端截图和一张架构图"

Agent：
"好的。先确认几个问题：
 ① 受众是内部技术分享还是对外公开演讲？
 ② 有没有需要保留的原始截图？
 ③ 需要生成配图，还是用你已有的截图？
 ④ 演讲时长大概多久？"

你：
"对外公开分享，开源社区线下沙龙。
 有我自己的终端截图和架构草图。
 不需要生成配图。
 大概 20 分钟。"

Agent：
"明白了。我先规划一下页面节奏表：

  1. 悬念问题页 — '你还在手动配 75 个模型吗？'
  2. 开场封面 — OpenCode 标题 + 副标题
  3. 左文右图 — Claude Code vs OpenCode 对比 + 架构图
  4. Pipeline 流程 — Plan → Build → Review 工作流
  5. 图文混排 — Sub-agent 架构解析
  6. 图片网格 — 3 张终端截图并排
  7. 数据大字报 — Skills 数量、Star 数、月活
  8. Before/After — 传统开发 vs OpenCode 效率对比
  9. 大引用页 — '开源 ≠ 免费，它的真正成本在哪？'
 10. 左文右图 — 推荐配置 + 一行安装命令
 11. 章节幕封 — 致谢 + 二维码

 hero/non-hero 交替：11 页中有 5 个 hero 页 + 6 个 non-hero 页 ✓
 布局多样性：使用了 7 种不同布局 ✓

 确认这个结构可以开始生成吗？"

你："可以，开始吧"

Agent：[生成 index.html，逐页填充内容，替换主题色变量，调整图片槽位]

你："在浏览器看了效果，第 7 页的 KPI 数字字号可以再大一点吗？
     还有第 4 页的流程图箭头不太清晰。"

Agent："第 7 页 KPI 数字从 6vw 调整到 7.5vw；
      第 4 页 Pipeline step 线条加粗 1px，箭头增大。
      你刷新看看。"

... 迭代 2-3 轮直到满意

瑞士风 22 种锁定版式速查

如果你选择 Style B，以下是完整版式菜单。正文页只能从这 22 种中选——不能自己发明 P23。

核心设计原则

不管选哪种风格，这七条设计原则贯穿始终：

1. 克制优于炫技 — WebGL 背景只在 hero 页透出，正文页收敛
2. 结构优于装饰 — 信息靠字号 + 字体对比 + 网格留白，不用阴影和浮动卡片
3. 图片是第一公民 — 图片对齐正文内容区，比例稳定，只裁底部
4. 配图只做素材 — 生成图只保留核心图像，不把页脚、标题、角标画进图片里
5. 节奏靠 hero 页 — hero / non-hero 交替，避免视觉疲劳
6. 低性能可退场 — 按 B 切换到静态模式
7. 瑞士风必须守版式 — Style B 优先还原原始 22P 版式，不做自由发挥

Skill 目录结构

了解目录结构有助于理解 Skill 的内部机制：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

guizang-ppt-skill/
├── SKILL.md                  ← Skill 主文件：工作流、原则、常见错误
├── README.md                 ← 本说明
├── assets/
│   ├── template.html         ← Style A 电子杂志风模板
│   ├── template-swiss.html   ← Style B 瑞士国际主义模板（2419 行）
│   ├── motion.min.js         ← Motion One 动效库（本地 fallback）
│   └── screenshot-backgrounds/ ← 截图美化内置背景（WebP）
├── scripts/
│   └── validate-swiss-deck.mjs ← 瑞士风版式校验器
└── references/
    ├── components.md         ← 组件手册（字体、色、网格、图标、动效）
    ├── layouts.md            ← Style A 10 种页面布局骨架
    ├── layouts-swiss.md      ← Style B 22 种锁定版式
    ├── swiss-layout-lock.md  ← 瑞士风还原度和版式硬约束
    ├── themes.md             ← Style A 5 套主题色预设
    ├── themes-swiss.md       ← Style B 4 套锚点色
    ├── image-prompts.md      ← 配图类型、比例和提示词
    ├── screenshot-framing.md ← 截图适配语义
    ├── swiss-map-component.md ← 地图组件文档
    └── checklist.md          ← 质量检查清单（P0/P1/P2/P3 分级）

延伸能力

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

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

对 Agent 说一句”基于这份 PPT 的核心观点，生成一张公众号 21:9 头图”即可。歸藏还有一个姊妹项目 guizang-social-card-skill，专门做小红书图文和公众号封面对。

适合 / 不适合

实战心得

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

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

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

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

4. Style A 适合有”观点”的分享。 如果你只是罗列事实，用 Style B 瑞士风更高效。但如果你有自己的判断和态度，Style A 的叙事节奏会让观点更有力量。

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

总结

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

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

1
2

# 一行命令，立即开始
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
• 告别土味 PPT！歸藏开源的 guizang-ppt-skill 让 Agent 生成杂志级演示稿