歸藏: 昨天答应的 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 里。