開源一個 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 套主題，底色沒有一個是 #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 裏。Skill 已經放在 GitHub 上：github.com/op7418/guizang-ppt-skillREADME 裏有一段"給 AI 的安裝 prompt"，複製粘貼給你的 Claude Code或其他 AI Agent，它會自動完成安裝。裝好之後對它說一句"幫我做一份雜誌風 PPT"就會觸發。也可以在 Bloome 這個 Agent 裏面用，目前是免費的：https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G如果覺得內容對你有幫助的話，可以幫我點個贊，或者分享給你需要的朋友。也可以在評論區分享一下你拿這個 Skill 做的 PPT。✦
上週被李繼剛老師邀請去做了場私享會，關於 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 頁分享會用到的幾乎所有頁面類型：開場封面、章節幕封、數據大字報、左文右圖、圖片網格、Pipeli…
- 開源一個 PPT Skill｜壓進了我 10 年的設計經驗
- 開源一個 PPT Skill｜壓進了我 10 年的設計經驗｜重點 2
- 開源一個 PPT Skill｜壓進了我 10 年的設計經驗｜重點 3
- 開源一個 PPT Skill｜壓進了我 10 年的設計經驗｜重點 4
- 開源一個 PPT Skill｜壓進了我 10 年的設計經驗｜重點 5
可記低 Prompt
上週被李繼剛老師邀請去做了場私享會，關於 AI 和組織的訪談。散場之後，發現大家問得最多的一句話是："那個 PPT 是什麼做的，能不能開源一下？"沒想到副產品成了主產品。索性就把它開源了，叫 guizang-ppt-skill（github…
整理版
上週被李繼剛老師邀請去做了場私享會，關於 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 套主題，底色沒有一個是 #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 裏。Skill 已經放在 GitHub 上：github.com/op7418/guizang-ppt-skillREADME 裏有一段"給 AI 的安裝 prompt"，複製粘貼給你的 Claude Code或其他 AI Agent，它會自動完成安裝。裝好之後對它說一句"幫我做一份雜誌風 PPT"就會觸發。也可以在 Bloome 呢個 Agent 裏面用，目前是免費的：https://bloome.im/agent/join/iKXCLtkD?ref=wNL9Ew2G如果覺得內容對你有幫助的話，可以幫我點個贊，或者分享給你需要的朋友。也可以在評論區分享一下你拿呢個 Skill 做的 PPT。✦
上週被李繼剛老師邀請去做了場私享會，關於 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 個問題：
受眾是誰、什麼場景？（行業內部 / 商業發佈 / 私享會）
分享時長多久？（15 分鐘 ≈ 10 頁，30 分鐘 ≈ 20 頁）
有沒有原始素材？（文檔、數據、舊 PPT、文章連結）
有沒有圖片、放在哪？
想要哪套主題色？（5 套預設裏選）
有沒有硬約束？（必須包含 XX 數據 / 不能出現 YY）
你不用一次說完，它會一條條問。答完之後，它會先給你一份大綱和主題節奏表，對齊之後再開始寫代碼——這一步攔截了我 80% 的返工。
以前用 AI 做 PPT 最痛的是什麼？是它直接開始寫，等你看到第 10 頁才發現整體方向就是錯的。這套澄清流程把"對齊"前置到了開頭。
圖片這樣塞
圖片放在和 index.html 同級的 images/ 文件夾，文件名有規則：
頁號補零 + 英文語義——01 不是 1，cover 不是 fengmian。方便按順序排，AI 引用也清晰
照片用 JPG，截圖用 PNG——截圖帶文字，PNG 保真不糊
單張 ≥ 1600px 寬——大屏投影才不糊
你只需要告訴 Claude"第 3 頁是 Figma 界面截圖"，它會自動寫成 images/03-figma.png，你把同名文件丟進文件夾就行。
無損換圖的秘訣：同名覆蓋
文案改完想換張圖，結果要全局搜替換路徑，一不小心就把 HTML 改壞了。
正確做法只有一句話：新圖用同名覆蓋舊圖，HTML 一個字不改。
為什麼長成這樣
聊完怎麼用，聊聊它為什麼是這個樣子。
好看不是玄學，是一套可以拆解的決策。我做的事，本質上是把雜誌行業一百年沉澱下來的排版語言，搬到了 HTML 裏。
字體的三級分工
襯線 → "觀點"。大標題用襯線，讀者一眼就覺得"這是一句該被重視的話"。
非襯線 → "信息"。正文密度高、閲讀不累。
等寬 → "元數據"。頁眉頁腳的章節號、日期、頁碼，像雜誌頁腳，也像終端裏的代碼。
讀者不用費勁想，眼睛自己就知道這句話是正文還是附註。
色彩的紀律
紙白、墨色，加一個重點色，就夠了。
純白刺眼、純黑暴力，印刷行業從來不這麼幹，Kindle 也是。
每套只暴露 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 裏面用，目前是免費的：
如果覺得內容對你有幫助的話，可以幫我點個贊，或者分享給你需要的朋友。
也可以在評論區分享一下你拿這個 Skill 做的 PPT。
✦