開源一個 PPT Skill｜壓進了我 10 年的設計經驗
整理版優先睇
開源一個 PPT Skill，用 HTML 做出雜誌風簡報，壓曬十年設計經驗
作者 op7418 係一個做咗十年設計嘅人，範疇涵蓋 UI、交互同 AI 特效。上週佢被李繼剛老師邀請去搞私享會，點知分享完之後最多人問嘅竟然係「嗰份 PPT 係用咩整嘅」，副產品變成咗主角。佢索性就將呢套 PPT 生成工具開源，命名做 guizang-ppt-skill。
呢個 Skill 嘅核心價值唔係一堆現成模板，而係一套人配合 AI 協作嘅介面——佢定義咗六個問題，等 AI 喺動手之前先搞清楚受眾、時長、素材、主題色同埋硬約束，先至開始生成。呢個前置對齊流程，幫作者攔截咗八成嘅返工。
視覺風格方面，作者將《Monocle》、《衞報》呢類印刷雜誌嘅排版語言搬曬去 HTML 度，配合 Kindle 電子紙嘅閲讀美學，再加埋 Web 交互語法，命名為「電子雜誌 × 電子墨水」。作者強調，好睇唔係玄學，而係可以拆解嘅決策——字體三級分工、色彩紀律、固定網格，全部都係行業常識，只係佢寫曬入 SKILL.md，等 AI 幫佢執行。
- 產物係單文件 HTML，雙擊瀏覽器就睇得，發俾人唔使擔心字體同動畫走樣，仲有 10 種頁面佈局、5 套主題色預設可以直接用
- 用嘅時候只要對 AI 講「幫我做一份雜誌風 PPT」，佢會主動問你六個問題——受眾、時長、素材、圖片、主題色、硬約束——答完先出大綱，呢個前置對齊流程可以攔截八成返工
- 圖片放喺 images/ 資料夾，頁號補零加英文語義，例如 01-cover.jpg、03-figma.png，單張要 ≥ 1600px 闊，先至唔會喺大屏投影時變糊
- 好睇嘅關鍵係紀律：襯線字用喺大標題、非襯線用喺正文、等寬字用喺元數據；底色唔用純白、字色唔用純黑；固定網格比例配合 hero/non-hero 交替，保持翻頁呼吸感
- 作者將十年審美壓縮成 SKILL.md 同 checklist.md，規則全部係行業常識——襯線字、三級字體、色彩紀律、網格節奏——而唔係佢發明嘅嘢，只係 copy 去 2026 年嘅 HTML 度
上星期俾李繼剛老師邀請去搞咗場私享會，係關於 AI 同組織嘅訪談。
散場之後，發覺大家問得最多嘅一句就係：「嗰份 PPT 係咩整嘅，可唔可以開源？」
估唔到副產品變成咗主產品。
索性就將佢開源，叫 guizang-ppt-skill（github.com/op7418/guizang-ppt-skill）。
今日呢篇文章就講下呢個 Skill 係咩樣嘅，同埋做咗十年設計嘅我，點解會覺得佢靚。
佢係咩樣
打開 Skill 生成嘅 PPT，第一眼嘅感覺大概係：呢個唔太似 AI 整嘅。
幾個一眼睇到嘅特點：
封面：墨色底 + 襯線大標題，背後有一層隱隱約約嘅 WebGL 流體慢慢郁
正文：底色變返紙白，墨字壓喺上面，似一本攤開嘅印刷雜誌
翻頁：橫向左右郁，鍵盤、滾輪、觸屏手勢都得，唔係 PowerPoint 嗰種下一頁
metadata：每頁四個角落有小號等寬字，寫住「Act II · 15 / 25」呢類報刊頁碼
我幫呢套視覺基調改咗個名叫「電子雜誌 × 電子墨水」。
靈感嚟自《Monocle》《衞報》《NYT》呢類印刷雜誌嘅版式傳統，再加上 Kindle 電子紙嘅閱讀美學，再用當代 Web 嘅交互語法串埋一齊。
佢做到咩
Skill 目前提供 10 種頁面佈局、5 套主題色預設，同埋一套完整嘅翻頁交互。
10 種佈局包攬咗一場 15-30 頁分享會用到嘅幾乎所有頁面類型：
開場封面、章節幕封、數據大字報、左文右圖、圖片網格、Pipeline 流程、懸念問題、大引用、Before/After 對比、圖文混排。
每種都係一段可以直接 paste 嘅 HTML 骨架，改下文字同圖片就可以用。
5 套主題分別對應唔同場景：
墨水經典 — 商業發佈、通用預設
靛藍瓷 — 科技、研究、AI 發佈會
森林墨 — 自然、可持續、人文
牛皮紙 — 懷舊、文學、獨立雜誌
沙丘 — 藝術、設計、創意
每套主題只係 6 個 CSS 變量嘅唔同取值，切換主題只要替換 :root 入面嗰 6 行代碼就得。
唔准用家自訂 hex，後面會話你知原因。
翻頁交互支援鍵盤左右箭頭、Mouse 滾輪、觸屏滑動、底部圓點跳轉、ESC 鍵打開縮圖索引。
盡量接近喺瀏覽器入面翻一本真正雜誌嘅體驗。
生出嚟嘅係一個單文件 HTML，撳兩下瀏覽器就可以睇，發俾人都只係一個文件，唔使擔心字體同動畫喺人哋部電腦度出事。
怎麼用
其實呢份 Skill 真正嘅價值唔喺模板本身，而係喺佢定義咗一套人 × AI 协作做 PPT 嘅接口。
以下三樣嘢，係我自己用咗一星期之後，覺得最值得同大家分享嘅。
先同 AI 講清呢 6 樣嘢
Skill 裝好之後，你淨係需要講一句「幫我做一份雜誌風 PPT」，Claude 會主動問你 6 個問題：
受眾係邊個、咩場景？（行業內部 / 商業發佈 / 私享會）
分享幾耐？（15 分鐘 ≈ 10 頁，30 分鐘 ≈ 20 頁）
有冇原始素材？（文件、數據、舊 PPT、文章連結）
有冇圖片、放喺邊？
想要邊套主題色？（5 套預設入面揀）
有冇硬限制？（必須包含 XX 數據 / 唔可以出現 YY）
你唔使一次過講晒，佢會一條條問。答完之后，佢會先俾你一份大綱同主題節奏表，對齊之後先再開始寫 code——呢步攔截咗我 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 入面。
字體嘅三級分工
襯線 → 「觀點」。大標題用襯線，讀者一眼就覺得「呢句係一句應該被重視嘅說話」。
非襯線 → 「資訊」。正文密度高、睇得舒服。
等寬 → 「metadata」。頁眉頁腳嘅章節號、日期、頁碼，似雜誌頁腳，亦似 Terminal 入面嘅 code。
讀者唔使靠估，眼自己就知呢句說話係正文定係附註。
色彩嘅紀律
紙白、墨色，加一個重點色，就夠。
純白刺眼、純黑暴力，印刷行業從來唔會咁做，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」，copy 貼俾你嘅 Claude Code或其他 AI Agent，佢會自動搞掂安裝。
裝好之後同佢講句「幫我做份雜誌風 PPT」就會觸發。
亦都可以喺 Bloome 呢個 Agent 度用，目前係免費嘅：
如果覺得內容幫到你，可以帮我 cap 個讚，或者分享俾你有需要嘅朋友。
亦都可以喺留言區分享一下你用呢個 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。
✦