# 策展 · X (Twitter) 🔥🔥🔥

> 作者：歸藏(guizang.ai) (@op7418) · 平台：X (Twitter) · 日期：2026-04-24

> 原始來源：https://x.com/op7418/status/2047486546300051478

## 中文摘要

# 開源一個 PPT Skill｜壓進了我 10 年的設計經驗

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877816-iaHGohi3qbEAAWq50jpg.jpg)

上週受李繼剛老師邀請，去參加了一場關於 AI 與組織的私享會訪談。

散場之後，發現大家問得最多的一句話是：「那個 PPT 是怎麼做的，能不能開源一下？」

沒想到副產品反而成了主產品。

乾脆就把它開源了，取名為 guizang-ppt-skill（https://github.com/op7418/guizang-ppt-skill）。

今天這篇文章來聊聊這個 Skill 長什麼樣子，以及身為一個做了十年設計的人，為什麼我會覺得它好看。

## 它長什麼樣子

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

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011878843-iaHGohmXqboAAMnqSjpg.jpg)

幾個直觀特徵：

- 封面：墨色底 + 襯線大標題，背後一層若隱若現的 WebGL 流體在緩緩流動。

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

- 翻頁：橫向左右滑動，鍵盤、滾輪、觸控手勢都行，不是 PowerPoint 那種死板的下一頁。

- 元資料：每頁四個角落有小號等寬字，寫著「Act II · 15 / 25」這類報刊頁碼。

我給這套視覺基調起了個名字，叫「電子雜誌 × 電子墨水」。

靈感來源是《Monocle》、《衛報》、《NYT》這類印刷雜誌的版式傳統，疊加 Kindle 電子紙的閱讀美學，再用當代 Web 的互動語法串起來。

## 它能做什麼

Skill 目前提供 10 種頁面佈局、5 套主題色預設，以及一套完整的翻頁互動。

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

開場封面、章節幕封、數據大字報、左文右圖、圖片網格、Pipeline 流程、懸念問題、大引用、Before/After 對比、圖文混排。

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

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877834-iaHGohqZaboAA3wpqjpg.jpg)

5 套主題分別對應不同場景：

- 墨水經典 — 商業發佈、通用預設

- 靛藍瓷 — 科技、研究、AI 發佈會

- 森林墨 — 自然、永續、人文

- 牛皮紙 — 懷舊、文學、獨立雜誌

- 沙丘 — 藝術、設計、創意

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877767-iaHGohtYYbQAAOzxkjpg.jpg)

每套主題只是 6 個 CSS 變數的不同取值，切換主題只要替換 :root 裡那 6 行程式碼。

使用者不允許自訂 hex，後面會說明原因。

翻頁互動支援鍵盤左右箭頭、滑鼠滾輪、觸控滑動、底部圓點跳轉、ESC 鍵打開縮圖索引。

盡量接近在瀏覽器裡翻閱一本真實雜誌的體驗。

產物是一個單檔案 HTML，雙擊瀏覽器就能看，發給別人也只是一個檔案，不用擔心字體和動畫在別人的電腦上跑版。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877829-iaHGohxOnbMAAJBcejpg.jpg)

## 怎麼用

其實這份 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 頁才發現整體方向就是錯的。這套澄清流程把「對齊」前置到了開頭。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877759-iaHGoh2TraYAAf4lwjpg.jpg)

### 圖片這樣塞

圖片放在和 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 裡。

### 字體的三級分工

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877762-iaHGoh9uQbUAAwvgKjpg.jpg)

- 襯線體 → 「觀點」。大標題用襯線體，讀者一眼就覺得「這是一句該被重視的話」。

- 非襯線體 → 「資訊」。正文密度高，閱讀不累。

- 等寬體 → 「元資料」。頁首頁尾的章節號、日期、頁碼，像雜誌頁尾，也像終端機裡的程式碼。

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

### 色彩的紀律

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877808-iaHGoiBXBbsAAbtyPjpg.jpg)

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

純白刺眼、純黑暴力，印刷行業從來不這麼幹，Kindle 也是。

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

每套只暴露 6 個 CSS 變數，SKILL.md 裡寫明：不允許使用者自訂 hex，只能五選一。

約束越嚴，風格越穩。保護美學，比給使用者自由更重要。

### 網格與節奏

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877753-iaHGoiEE9aIAAtQVfjpg.jpg)

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 裡。

![](https://pub-75d4fe1e4e80421b9ecb1245a7ae0d1a.r2.dev/curated/1777011877820-iaHGoiH1kbcAAd6kwjpg.jpg)

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

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

也可以在評論區分享一下你拿這個 Skills 做的 PPT。

## 標籤

Skills, 開源專案, 教學資源, Claude