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

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

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

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

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

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

它長什么樣

打開 Skill 生成的 PPT，第一眼的感覺大概是：這不太像 AI 做的。

幾個直觀特征：

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

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

翻頁：橫向左右滑動，鍵盤、滾輪、觸屏手勢都行，不是 PowerPoint 的下一頁

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

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

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

它能做什么

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

10 種布局覆蓋了一場 15-30 頁分享會用到的幾乎所有頁面類型：

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

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

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

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

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

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

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

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

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

用戶不允許自定義 hex，后面會說原因。

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

盡量接近在瀏覽器里翻一本真實雜志的體驗。

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

怎么用

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

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

先跟 AI 說清這 6 件事

Skill 裝好之后，你只需要說一句"幫我做一份雜志風(fēng) PPT"，Claude 會反過來主動問你 6 個問題：

1.

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

2.

分享時長多久？（15 分鐘 ≈ 10 頁，30 分鐘 ≈ 20 頁）

3.

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

4.

有沒有圖片、放在哪？

5.

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

6.

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

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

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

圖片這樣塞

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

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，你把同名文件丟進(jìn)文件夾就行。

無損換圖的秘訣：同名覆蓋

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

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

為什么長成這樣

聊完怎么用，聊聊它為什么是這個樣子。

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

字體的三級分工

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

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

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

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

色彩的紀(jì)律

紙白、墨色，加一個重點色，就夠了。

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

Skill 的 5 套主題，底色沒有一個是 ，字色沒有一個是 。

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

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

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

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

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

一頁密、一頁疏，就是翻雜志時那種呼吸感。

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

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

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

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

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

換句話說，這個 Skill 就是我這十年審美的一個壓縮包。

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

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

也正因為這樣，我才敢把它開源。

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

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

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

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

也可以在 Bloome 這個 Agent 里面用，目前是免費的：

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

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

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