開源一個 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 套主題，底色沒有一個是 ，字色沒有一個是 。

每套只暴露 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。