開(kāi)源一個(gè) PPT Skill｜壓進(jìn)了我 10 年的設(shè)計(jì)經(jīng)驗(yàn)

上周被李繼剛老師邀請(qǐng)去做了場(chǎng)私享會(huì)，關(guān)于 AI 和組織的訪談。

散場(chǎng)之后，發(fā)現(xiàn)大家問(wèn)得最多的一句話是："那個(gè) PPT 是什么做的，能不能開(kāi)源一下？"

沒(méi)想到副產(chǎn)品成了主產(chǎn)品。

索性就把它開(kāi)源了，叫 guizang-ppt-skill（github.com/op7418/guizang-ppt-skill）。

今天這篇文章聊聊這個(gè) Skill 長(zhǎng)什么樣，以及作為一個(gè)做了十年設(shè)計(jì)的人，我為什么會(huì)覺(jué)得它好看。

它長(zhǎng)什么樣

打開(kāi) Skill 生成的 PPT，第一眼的感覺(jué)大概是：這不太像 AI 做的。

幾個(gè)直觀特征：

封面：墨色底 + 襯線大標(biāo)題，背后一層若隱若現(xiàn)的 WebGL 流體在緩緩流動(dòng)

正文：底色切回紙白，墨字壓在上面，像一本攤開(kāi)的印刷雜志

翻頁(yè)：橫向左右滑動(dòng)，鍵盤、滾輪、觸屏手勢(shì)都行，不是 PowerPoint 的下一頁(yè)

元數(shù)據(jù)：每頁(yè)四個(gè)角落有小號(hào)等寬字，寫著 "Act II · 15 / 25" 這類報(bào)刊頁(yè)碼

我給這套視覺(jué)基調(diào)起了個(gè)名字，叫"電子雜志 × 電子墨水"。

靈感來(lái)源是《Monocle》《衛(wèi)報(bào)》《NYT》這類印刷雜志的版式傳統(tǒng)，疊加 Kindle 電子紙的閱讀美學(xué)，再用當(dāng)代 Web 的交互語(yǔ)法串起來(lái)。

它能做什么

Skill 目前提供 10 種頁(yè)面布局、5 套主題色預(yù)設(shè)，和一套完整的翻頁(yè)交互。

10 種布局覆蓋了一場(chǎng) 15-30 頁(yè)分享會(huì)用到的幾乎所有頁(yè)面類型：

開(kāi)場(chǎng)封面、章節(jié)幕封、數(shù)據(jù)大字報(bào)、左文右圖、圖片網(wǎng)格、Pipeline 流程、懸念問(wèn)題、大引用、Before/After 對(duì)比、圖文混排。

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

5 套主題分別對(duì)應(yīng)不同場(chǎng)景：

墨水經(jīng)典— 商業(yè)發(fā)布、通用默認(rèn)

靛藍(lán)瓷— 科技、研究、AI 發(fā)布會(huì)

森林墨— 自然、可持續(xù)、人文

牛皮紙— 懷舊、文學(xué)、獨(dú)立雜志

沙丘— 藝術(shù)、設(shè)計(jì)、創(chuàng)意

每套主題只是 6 個(gè) CSS 變量的不同取值，切換主題只要替換 :root 里那 6 行代碼。

用戶不允許自定義 hex，后面會(huì)說(shuō)原因。

翻頁(yè)交互支持鍵盤左右箭頭、鼠標(biāo)滾輪、觸屏滑動(dòng)、底部圓點(diǎn)跳轉(zhuǎn)、ESC 鍵打開(kāi)縮略圖索引。

盡量接近在瀏覽器里翻一本真實(shí)雜志的體驗(yàn)。

產(chǎn)物是一個(gè)單文件 HTML，雙擊瀏覽器就能看，發(fā)給別人也只是一個(gè)文件，不用擔(dān)心字體和動(dòng)畫(huà)在別人電腦上亂掉。

怎么用

其實(shí)這份 Skill 真正的價(jià)值不在模板本身，而在它定義了一套人 × AI 協(xié)作做 PPT 的接口。

下面三件事，是我自己用了一周后，覺(jué)得最值得告訴別人的。

先跟 AI 說(shuō)清這 6 件事

Skill 裝好之后，你只需要說(shuō)一句"幫我做一份雜志風(fēng) PPT"，Claude 會(huì)反過(guò)來(lái)主動(dòng)問(wèn)你 6 個(gè)問(wèn)題：

1.

受眾是誰(shuí)、什么場(chǎng)景？（行業(yè)內(nèi)部 / 商業(yè)發(fā)布 / 私享會(huì)）

2.

分享時(shí)長(zhǎng)多久？（15 分鐘 ≈ 10 頁(yè)，30 分鐘 ≈ 20 頁(yè)）

3.

有沒(méi)有原始素材？（文檔、數(shù)據(jù)、舊 PPT、文章鏈接）

4.

有沒(méi)有圖片、放在哪？

5.

想要哪套主題色？（5 套預(yù)設(shè)里選）

6.

有沒(méi)有硬約束？（必須包含 XX 數(shù)據(jù) / 不能出現(xiàn) YY）

你不用一次說(shuō)完，它會(huì)一條條問(wèn)。答完之后，它會(huì)先給你一份大綱和主題節(jié)奏表，對(duì)齊之后再開(kāi)始寫代碼——這一步攔截了我 80% 的返工。

以前用 AI 做 PPT 最痛的是什么？是它直接開(kāi)始寫，等你看到第 10 頁(yè)才發(fā)現(xiàn)整體方向就是錯(cuò)的。這套澄清流程把"對(duì)齊"前置到了開(kāi)頭。

圖片這樣塞

圖片放在和 index.html 同級(jí)的 images/ 文件夾，文件名有規(guī)則：

ppt/

├── index.html

└── images/

├── 01-cover.jpg

├── 03-figma.png

└── 05-dashboard.png

頁(yè)號(hào)補(bǔ)零 + 英文語(yǔ)義——01 不是 1，cover 不是 fengmian。方便按順序排，AI 引用也清晰

照片用 JPG，截圖用 PNG——截圖帶文字，PNG 保真不糊

單張 ≥ 1600px 寬——大屏投影才不糊

你只需要告訴 Claude"第 3 頁(yè)是 Figma 界面截圖"，它會(huì)自動(dòng)寫成 images/03-figma.png，你把同名文件丟進(jìn)文件夾就行。

無(wú)損換圖的秘訣：同名覆蓋

文案改完想換張圖，結(jié)果要全局搜替換路徑，一不小心就把 HTML 改壞了。

正確做法只有一句話：新圖用同名覆蓋舊圖，HTML 一個(gè)字不改。

為什么長(zhǎng)成這樣

聊完怎么用，聊聊它為什么是這個(gè)樣子。

好看不是玄學(xué)，是一套可以拆解的決策。我做的事，本質(zhì)上是把雜志行業(yè)一百年沉淀下來(lái)的排版語(yǔ)言，搬到了 HTML 里。

字體的三級(jí)分工

襯線 → "觀點(diǎn)"。大標(biāo)題用襯線，讀者一眼就覺(jué)得"這是一句該被重視的話"。

非襯線 → "信息"。正文密度高、閱讀不累。

等寬 → "元數(shù)據(jù)"。頁(yè)眉頁(yè)腳的章節(jié)號(hào)、日期、頁(yè)碼，像雜志頁(yè)腳，也像終端里的代碼。

讀者不用費(fèi)勁想，眼睛自己就知道這句話是正文還是附注。

色彩的紀(jì)律

紙白、墨色，加一個(gè)重點(diǎn)色，就夠了。

純白刺眼、純黑暴力，印刷行業(yè)從來(lái)不這么干，Kindle 也是。

Skill 的 5 套主題，底色沒(méi)有一個(gè)是 ，字色沒(méi)有一個(gè)是 。

每套只暴露 6 個(gè) CSS 變量，SKILL.md 里寫明：不允許用戶自定義 hex，只能五選一。

約束越嚴(yán)，風(fēng)格越穩(wěn)。 保護(hù)美學(xué)，比給用戶自由更重要。

網(wǎng)格與節(jié)奏

7:5、6:6、8:4 幾套固定網(wǎng)格保證單頁(yè)秩序。

hero 頁(yè)和 non-hero 頁(yè)必須交替，保證整本的節(jié)奏。

一頁(yè)密、一頁(yè)疏，就是翻雜志時(shí)那種呼吸感。

Skill 里寫了條硬規(guī)則：連續(xù)三頁(yè)以上相同主題會(huì)被判為 P0 錯(cuò)誤。

沒(méi)有節(jié)奏的 PPT 就是一沓 slide 堆成的 PDF。

上面這些規(guī)則，沒(méi)有一條是我發(fā)明的。

我做了十年設(shè)計(jì)，UI、交互、AI 特效都干過(guò)，這些其實(shí)都是行業(yè)常識(shí)。

我只是把它們一條條寫進(jìn)了 SKILL.md 和 checklist.md，讓 AI 能替我逐條執(zhí)行而已。

換句話說(shuō)，這個(gè) Skill 就是我這十年審美的一個(gè)壓縮包。

以前做一份像樣的 PPT，我得花兩天手動(dòng)調(diào)網(wǎng)格、選字號(hào)、摳色值。

現(xiàn)在把素材丟給 AI，它按照這些規(guī)則直接拼出來(lái)，我只需要檢查一下。

也正因?yàn)檫@樣，我才敢把它開(kāi)源。

規(guī)則本來(lái)就不是我的獨(dú)家，《Monocle》的設(shè)計(jì)師比我早用了幾十年，我只是把它 copy 到了 2026 年的 HTML 里。

Skill 已經(jīng)放在 GitHub 上：github.com/op7418/guizang-ppt-skill

README 里有一段"給 AI 的安裝 prompt"，復(fù)制粘貼給你的 Claude Code或其他 AI Agent，它會(huì)自動(dòng)完成安裝。

裝好之后對(duì)它說(shuō)一句"幫我做一份雜志風(fēng) PPT"就會(huì)觸發(fā)。

也可以在 Bloome 這個(gè) Agent 里面用，目前是免費(fèi)的：

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

如果覺(jué)得內(nèi)容對(duì)你有幫助的話，可以幫我點(diǎn)個(gè)贊，或者分享給你需要的朋友。

也可以在評(píng)論區(qū)分享一下你拿這個(gè) Skill 做的 PPT。