开源一个 PPT Skill｜压进了我 10 年的设计经验

上周被李继刚老师邀请去做了场私享会，关于 AI 和组织的访谈。

散场之后，发现大家问得最多的一句话是："那个 PPT 是什么做的，能不能开源一下？"

没想到副产品成了主产品。

索性就把它开源了，叫 guizang-ppt-skill（github.com/op7418/guizang-ppt-skill）。

今天这篇文章聊聊这个 Skill 长什么样，以及作为一个做了十年设计的人，我为什么会觉得它好看。

它长什么样

打开 Skill 生成的 PPT，第一眼的感觉大概是：这不太像 AI 做的。

几个直观特征：

• 封面：墨色底 + 衬线大标题，背后一层若隐若现的 WebGL 流体在缓缓流动

• 正文：底色切回纸白，墨字压在上面，像一本摊开的印刷杂志

• 翻页：横向左右滑动，键盘、滚轮、触屏手势都行，不是 PowerPoint 的下一页

• 元数据：每页四个角落有小号等宽字，写着 "Act II · 15 / 25" 这类报刊页码

我给这套视觉基调起了个名字，叫"电子杂志 × 电子墨水"。

灵感来源是《Monocle》《卫报》《NYT》这类印刷杂志的版式传统，叠加 Kindle 电子纸的阅读美学，再用当代 Web 的交互语法串起来。

它能做什么

Skill 目前提供 10 种页面布局、5 套主题色预设，和一套完整的翻页交互。

10 种布局覆盖了一场 15-30 页分享会用到的几乎所有页面类型：

开场封面、章节幕封、数据大字报、左文右图、图片网格、Pipeline 流程、悬念问题、大引用、Before/After 对比、图文混排。

每种都是一段可以直接粘贴的 HTML 骨架，改掉文字和图片就能用。

5 套主题分别对应不同场景：

墨水经典 — 商业发布、通用默认

靛蓝瓷 — 科技、研究、AI 发布会

森林墨 — 自然、可持续、人文

牛皮纸 — 怀旧、文学、独立杂志

沙丘 — 艺术、设计、创意

每套主题只是 6 个 CSS 变量的不同取值，切换主题只要替换 :root 里那 6 行代码。

用户不允许自定义 hex，后面会说原因。

翻页交互支持键盘左右箭头、鼠标滚轮、触屏滑动、底部圆点跳转、ESC 键打开缩略图索引。

尽量接近在浏览器里翻一本真实杂志的体验。

产物是一个单文件 HTML，双击浏览器就能看，发给别人也只是一个文件，不用担心字体和动画在别人电脑上乱掉。

怎么用

其实这份 Skill 真正的价值不在模板本身，而在它定义了一套人 × AI 协作做 PPT 的接口。

下面三件事，是我自己用了一周后，觉得最值得告诉别人的。

先跟 AI 说清这 6 件事

Skill 装好之后，你只需要说一句"帮我做一份杂志风 PPT"，Claude 会反过来主动问你 6 个问题：

1.受众是谁、什么场景？（行业内部 / 商业发布 / 私享会）

2.分享时长多久？（15 分钟 ≈ 10 页，30 分钟 ≈ 20 页）

3.有没有原始素材？（文档、数据、旧 PPT、文章链接）

4.有没有图片、放在哪？

5.想要哪套主题色？（5 套预设里选）

6.有没有硬约束？（必须包含 XX 数据 / 不能出现 YY）

你不用一次说完，它会一条条问。答完之后，它会先给你一份大纲和主题节奏表，对齐之后再开始写代码——这一步拦截了我 80% 的返工。

以前用 AI 做 PPT 最痛的是什么？是它直接开始写，等你看到第 10 页才发现整体方向就是错的。这套澄清流程把"对齐"前置到了开头。

图片这样塞

图片放在和 index.html 同级的 images/ 文件夹，文件名有规则：

ppt/ 

├── index.html 

└── images/     

    ├── 01-cover.jpg     

    ├── 03-figma.png     

    └── 05-dashboard.png

• 页号补零 + 英文语义——01 不是 1，cover 不是 fengmian。方便按顺序排，AI 引用也清晰

• 照片用 JPG，截图用 PNG——截图带文字，PNG 保真不糊

• 单张 ≥ 1600px 宽——大屏投影才不糊

你只需要告诉 Claude"第 3 页是 Figma 界面截图"，它会自动写成 images/03-figma.png，你把同名文件丢进文件夹就行。

无损换图的秘诀：同名覆盖

文案改完想换张图，结果要全局搜替换路径，一不小心就把 HTML 改坏了。

正确做法只有一句话：新图用同名覆盖旧图，HTML 一个字不改。

为什么长成这样

聊完怎么用，聊聊它为什么是这个样子。

好看不是玄学，是一套可以拆解的决策。我做的事，本质上是把杂志行业一百年沉淀下来的排版语言，搬到了 HTML 里。

字体的三级分工

• 衬线 → "观点"。大标题用衬线，读者一眼就觉得"这是一句该被重视的话"。

• 非衬线 → "信息"。正文密度高、阅读不累。

• 等宽 → "元数据"。页眉页脚的章节号、日期、页码，像杂志页脚，也像终端里的代码。

读者不用费劲想，眼睛自己就知道这句话是正文还是附注。

色彩的纪律

纸白、墨色，加一个重点色，就够了。

纯白刺眼、纯黑暴力，印刷行业从来不这么干，Kindle 也是。

Skill 的 5 套主题，底色没有一个是 #FFFFFF，字色没有一个是 #000000。

每套只暴露 6 个 CSS 变量，SKILL.md 里写明：不允许用户自定义 hex，只能五选一。

约束越严，风格越稳。 保护美学，比给用户自由更重要。

网格与节奏

7:5、6:6、8:4 几套固定网格保证单页秩序。

hero 页和 non-hero 页必须交替，保证整本的节奏。

一页密、一页疏，就是翻杂志时那种呼吸感。

Skill 里写了条硬规则：连续三页以上相同主题会被判为 P0 错误。

没有节奏的 PPT 就是一沓 slide 堆成的 PDF。

写在最后

上面这些规则，没有一条是我发明的。

我做了十年设计，UI、交互、AI 特效都干过，这些其实都是行业常识。

我只是把它们一条条写进了 SKILL.md 和 checklist.md，让 AI 能替我逐条执行而已。

换句话说，这个 Skill 就是我这十年审美的一个压缩包。

以前做一份像样的 PPT，我得花两天手动调网格、选字号、抠色值。

现在把素材丢给 AI，它按照这些规则直接拼出来，我只需要检查一下。

也正因为这样，我才敢把它开源。

规则本来就不是我的独家，《Monocle》的设计师比我早用了几十年，我只是把它 copy 到了 2026 年的 HTML 里。

Skill 已经放在 GitHub 上：github.com/op7418/guizang-ppt-skill

README 里有一段"给 AI 的安装 prompt"，复制粘贴给你的 Claude Code或其他 AI Agent，它会自动完成安装。

装好之后对它说一句"帮我做一份杂志风 PPT"就会触发。

也可以在 Bloome 这个 Agent 里面用，目前是免费的：

https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G

如果觉得内容对你有帮助的话，可以帮我点个赞，或者分享给你需要的朋友。

也可以在评论区分享一下你拿这个 Skill 做的 PPT。

文章来自于"歸藏的AI工具箱"，作者 "歸藏的AI工具箱"。