昨天答应的 PPTSkill 来了!
- 包含 10 个板式、5 套主题,覆盖各种场景
- WebGL 流体动画背景,非常炫酷
- AI 会帮你规划大纲、选主题、支持图片匹配和添加
聊聊它长什么样、怎么用,以及作为一个做了十年设计的人,我为什么觉得它好看👇
Skill 在这里:github.com/op7418/guizang-ppt-skill
======
它不太像 AI 做的
打开 Skill 生成的 PPT,第一眼的感觉是:这东西真不像 AI 做的。
封面是墨色底 + 衬线大标题,背后一层 WebGL 流体在缓缓流动。正文切回纸白,墨字压在上面,像一本摊开的印刷杂志。翻页是横向左右滑动,键盘、滚轮、触屏手势都行,不是 PowerPoint 的下一页。
我给这套视觉起了个名字,叫"电子杂志 × 电子墨水"。
灵感来源是《Monocle》《卫报》《NYT》这类印刷杂志的版式,叠加 Kindle 电子纸的阅读美学,再用当代 Web 的交互语法串起来。
------
能做什么
目前提供 10 种页面布局、5 套主题色预设,一个单文件 HTML 就是最终产物。
10 种布局覆盖了一场 15-30 页分享会的几乎所有页面类型:封面、章节幕封、数据大字报、左文右图、图片网格、Pipeline 流程、悬念问题、大引用、Before/After、图文混排。改掉文字和图片就能用。
5 套主题色分别对应不同场景:
▸ 墨水经典 — 商业发布、通用默认
▸ 靛蓝瓷 — 科技、研究、AI 发布会
▸ 森林墨 — 自然、可持续、人文
▸ 牛皮纸 — 怀旧、文学、独立杂志
▸ 沙丘 — 艺术、设计、创意
每套只是 6 个 CSS 变量的不同取值,不允许用户自定义 hex,只能五选一。后面会说为什么。
产物是一个单文件 HTML,双击浏览器就能看,发给别人也只是一个文件,不用担心字体和动画在别人电脑上乱掉。
======
怎么跟 AI 协作做 PPT
这份 Skill 真正的价值其实不在模板本身,而在它定义了一套人和 AI 协作做 PPT 的接口。
三件事,我自己用了一周之后,觉得最值得告诉别人。
------
先跟 AI 说清这 6 件事
装好之后你只需要说一句"帮我做一份杂志风 PPT",Claude 会反过来主动问你 6 个问题:
▸ 受众是谁、什么场景(行业内部 / 商业发布 / 私享会)
▸ 分享时长多久(15 分钟 ≈ 10 页,30 分钟 ≈ 20 页)
▸ 有没有原始素材(文档、数据、旧 PPT、文章链接)
▸ 有没有图片、放在哪
▸ 想要哪套主题色
▸ 有没有硬约束(必须包含 XX / 不能出现 YY)
答完之后它会先给你一份大纲和主题节奏表,对齐之后再开始写代码。这一步拦截了我 80% 的返工。
以前用 AI 做 PPT 最痛的是什么?是它直接开始写,等你翻到第 10 页才发现整体方向就是错的。这套澄清流程把"对齐"前置到了开头。
------
图片这样塞
图片放在和 index.html 同级的 images/ 文件夹,文件名要按规则:页号补零 + 英文语义,比如 01-cover.jpg、03-figma.png、05-dashboard.png。
照片用 JPG,截图用 PNG,单张 ≥ 1600px 宽。你只需要告诉 Claude"第 3 页是 Figma 界面截图",它会自动写成 images/03-figma.png,你把同名文件丢进文件夹就行。
------
无损换图的秘诀:同名覆盖
这是我踩过最大的坑——文案改完想换张图,结果要全局搜替换路径,一不小心就把 HTML 改坏了。
正确做法只有一句:新图用同名覆盖旧图,HTML 一个字不改。
养成这个习惯之后你可以先用占位色块把整本结构调好,内容定稿了再统一替换真图;也可以 A/B 测试不同图片,丢一张看一眼,完全不动代码;还可以把图片处理外包给设计师,只要返回同名文件,你不用碰 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 里。