以固定設計約束取代開放式樣板選擇
guizang-ppt-skill 的設計前提是：移除母版選擇，以固定設計系統取代。多數 AI 簡報工具提供大量母版供填空，結果往往收斂為相似的 SaaS 落地頁風格。**這個 Skill 限定兩套視覺系統，由 AI 照規格生成，而非讓使用者自由配置。**技術上，它是一個放在 ~/.claude/skills/guizang-ppt-skill/ 的 Skill，由 Markdown 規格、HTML 模板、版式參考與校驗腳本組成，讓 Claude Code 或 Codex 依固定設計系統生成簡報。
它提供兩套不能混用的視覺系統。Style A 是「電子雜誌 × 電子墨水」：襯線大標、克制留白、Hero 頁才用 WebGL 流體背景，適合人文敘事、產業觀察、個人觀點表達。Style B 是 Swiss International Style：純無襯線、12 欄網格、單一高飽和錨點色、直角與髮絲線，22 個鎖定版式，適合技術產品、資料報告、工程與設計演講。兩者的 class 命名刻意不同，h-hero 在 A 是襯線、在 B 是無襯線，一份簡報只能選一套，選定後不可更換。
輸出永遠是單一 HTML 檔:橫向左右翻頁,鍵盤、滾輪、觸控、底部圓點都能導航,不需要 build、不需要伺服器,雙擊就能在瀏覽器全螢幕放映。內建 B 鍵靜態低耗模式,在效能差的會議室電腦上可以一鍵關掉 WebGL 與動效。設計哲學寫得很直接:克制大於炫技、結構大於裝飾、層級靠字體與尺寸而非顏色、圖片是一等公民。
釐清需求
複製模板
選版式
填內容
品質檢查
本地預覽
迭代
克制大於炫技，結構大於裝飾。層級靠字體與尺寸，不靠顏色。
一條指令將 Skill 安裝至本地目錄
建議使用 npx skills 安裝，一次將 SKILL.md、模板、版式參考與校驗腳本全部部署完畢。安裝後以自然語言對 Claude Code 下指令即可觸發，例如「幫我把這篇文章做成 Swiss 風 8 頁 PPT」。
# 用官方 skills CLI 一行安裝(推薦)
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill偏好手動?直接 git clone 進 Skill 目錄
不想透過 CLI,也可以把 repo 直接 clone 到 Claude Code 的 skills 目錄;Codex 環境則改放到對應的 skills 路徑即可。內容是純資料檔(Markdown + HTML + 一支 .mjs 校驗腳本),沒有編譯步驟。
git clone https://github.com/op7418/guizang-ppt-skill.git \
~/.claude/skills/guizang-ppt-skill從視覺系統到校驗器：產出鏈各環節說明
guizang-ppt-skill 整合兩套視覺系統、三十多個現成版式區塊、預設主題、出圖規範、截圖外框、Swiss 校驗器，以及單檔放映執行環境。以下卡片列出各模組的具體職責。
視覺系統 · 01
Style A
電子雜誌 × 電子墨水
襯線大標、克制留白、Hero 頁才用 WebGL 流體/等高線/色散背景。給人文敘事、產業觀察、個人觀點表達。
視覺系統 · 02
Style B
Swiss International
純無襯線、12 欄網格、單一高飽和錨點色、直角髮絲線。給技術產品、資料報告、工程與設計演講。
版式庫 · 03
Style A · 10 版式
敘事骨架
封面、章節開場、數據卡、圖片網格、流程管線、大引言、對比、混排，提供現成區塊可直接套用。
版式庫 · 04
Style B · S01–S22
鎖定版式
22 個註冊版式,每頁必帶 data-layout="Sxx"。鎖定模式禁止自創未列版式,確保網格不破。
主題 · 05
9 個主題預設
配色不開放
Style A 五套、Style B 四套。Swiss 錨點色限 IKB 藍、檸檬黃、檸檬綠、安全橙;不准自填 hex。
執行環境 · 06
橫向翻頁引擎
單檔放映
鍵盤、滾輪、觸控、底部圓點導航,ESC 看總覽。零 build、零伺服器、零依賴。
執行環境 · 07
B 鍵 · 靜態模式
低耗放映
會議室電腦帶不動?按 B 關掉 WebGL 與 Motion 動效,簡報照常翻,不掉幀。
出圖 · 08
image-prompts.md
Codex 出圖
先定落位與比例再選類型:紀實攝影、雜誌資訊圖、流程圖等七類,標準比例,禁卡通/3D/霓虹。
封面 · 09
多平台封面
一稿多投
同一份內容輸出微信公眾號 21:9、方形卡片 1:1、小紅書 3:4、影片封面 16:9 多種尺寸。
素材 · 10
screenshot-backgrounds
截圖外框
9 套 CleanShot 風格外框,把產品截圖框進簡報而不破壞版面比例與留白節奏。
品質 · 11
validate-swiss-deck.mjs
Swiss 校驗器
靜態檢查 Style B 是否守規:無襯線、單一強調色、無漸層陰影圓角、版式註冊齊全。
品質 · 12
checklist.md
P0–P3 品質閘
沉澱五輪迭代踩過的真實問題:字體層級、圖片落位、比例、底部留白,逐項過關才算完工。
沒有大綱?先按時長估頁數,再套敘事弧
Skill 的需求釐清會先問你「講多久」,因為時長直接決定頁數密度;沒有現成大綱時,它會套一條固定的敘事弧:鉤子 → 背景 → 核心 → 轉折 → 收束。
| 演講時長 | 建議頁數 | 節奏重點 |
|---|---|---|
| 約 15 分鐘 | ≈ 10 頁 | 一個核心觀點,少分支,Hero/非 Hero 交錯防疲勞 |
| 約 30 分鐘 | ≈ 20 頁 | 核心展開 3–5 頁,加一頁明確轉折 |
| 約 45 分鐘 | ≈ 25–30 頁 | 多段核心,章節開場頁分隔,收束 1–2 頁 |
| 無大綱時的預設骨架 | 鉤子(1p) → 背景(1–2p) → 核心(3–5p) → 轉折(1p) → 收束(1–2p) |
SKILL.md 與 references 目錄的配置要點
guizang-ppt-skill 出自 op7418(歸藏)，在 Trendshift、SkillsLLM 等聚合站均有收錄。以下技巧全部來自 SKILL.md 與 references 目錄，依序執行可避免大多數常見的版面問題。
第一個問題永遠是「A 還是 B」
需求釐清的七個問題中，選 Style A 或 Style B 是強制第一題，因為它決定模板、版式檔、主題檔三者。此項目須在開始前確定，避免中途因 class 對不上而需要重做。
來源 · 官方 SKILL.md · Step 1
寫頁面前,先讀模板的 <style>
Step 3.0 的飛行前檢查:你要用的每一個 class 都必須已存在於模板 <style> 裡。少一個 class = 版面直接破。別憑記憶寫 class 名。
來源 · 官方 SKILL.md · Step 3.0
不要從零寫頁,複製版式區塊
Style A 的 10 個版式在 references/layouts.md,Style B 的 22 個在 references/layouts-swiss.md。直接抄整段 <section> 再換內容,比手寫快也不會破網格。
來源 · 官方 SKILL.md · Step 3.1
Swiss 每頁都要有 data-layout
Style B 是鎖定模式:每個 slide 必須帶 data-layout="Sxx",正常段落不准自創 P23/P24 或未列版式。實驗版式只有在使用者明確要求時才開。
來源 · 官方 swiss-layout-lock.md
圖片用 height,別用 aspect-ratio
Style A 圖片網格固定 height:26vh,絕不用 aspect-ratio;且永遠不讓圖片貼齊頁面底部,用 align-items:start 的網格。這是最常見的破版來源。
來源 · 官方 SKILL.md · Step 3.2
出圖先定落位與比例,再選類型
image-prompts.md 的鐵律:先判斷圖片在頁面的落位與比例,再從紀實攝影、雜誌資訊圖、流程圖等七類挑一類。只用標準比例,禁卡通、3D、霓虹、SaaS 模板感。
來源 · 官方 references/image-prompts.md
收尾跑一次 Swiss 校驗器
Style B 完工前跑 node scripts/validate-swiss-deck.mjs,它會靜態抓出殘留襯線、多個強調色、漸層陰影圓角、缺 data-layout 等違規。比肉眼可靠。
來源 · 官方 scripts/validate-swiss-deck.mjs
離線也能跑動效:motion.min.js
repo 內附 64KB 的 assets/motion.min.js 作為 Motion One 離線 fallback,沒網路也能有進場動畫。會議室斷網時,簡報照樣完整放映。
來源 · 官方 repo · assets/
從文章到單檔簡報的完整七步流程
以下以一篇「AI Agent 趨勢」文章為素材，示範 30 分鐘技術分享的完整生成流程：釐清需求、選定 Style B、複製 Swiss 模板、套用主題、依版式填入內容、以 Codex 生成三張插圖、跑校驗器，最後本地預覽。
$ You ›
幫我把 article.md 做成簡報,30 分鐘的技術分享,要配幾張圖。
claude: Claude ›
開工前我需要先定幾件事,第一題是強制的:
hl: Q1 / Style A(電子雜誌)還是 Style B(Swiss)?
技術分享、有資料與架構 → 我建議 Style B。
hl: Q2 / 聽眾與場合?Q3 / 時長?Q4 / 有沒有原始素材?
hl: Q5 / 圖怎麼處理?Q6 / 主題色?Q7 / 硬限制?
$ You ›
Style B。對工程師講,30 分鐘,素材就是 article.md,
配 3 張圖,主題用 IKB 藍,沒有大量表格。
claude: Claude ›
收到。30 分鐘 ≈ 20 頁,套敘事弧:
鉤子 → 背景 → 核心 → 轉折 → 收束。
> mkdir -p talks/ai-agent/ppt/images
> cp SKILL_ROOT/assets/template-swiss.html \
> talks/ai-agent/ppt/index.html
· 封面 SWISS-COVER-ASCII · data-layout 已標
· 核心 6 頁:S04 / S09 / S15 / S22 …
· 收束 SWISS-CLOSING-ASCII
images/01-cover.jpg · 21:9 · 紀實攝影
images/06-pipeline.png · 16:10 · 流程圖
images/14-system.png · 16:10 · 系統關係圖
$ You › 跑一下 Swiss 校驗器
> node scripts/validate-swiss-deck.mjs talks/ai-agent/ppt/index.html
hl: WARN · 第 9 頁標題 6 字未加 nowrap
ok: PASS · 20 頁全數通過 · 0 violation
> open talks/ai-agent/ppt/index.html
ok: 單檔輸出 · 零依賴 · ← → 翻頁 · 按 B 進低耗模式
輸入文章，輸出符合版式規範、可離線放映的單一 HTML 檔。
流程設計的關鍵機制
這套流程的核心機制是：先以七個問題鎖定規格，再依固定版式系統生成。Style 選定後不可更換、每頁均帶 data-layout、完工前有校驗器靜態檢查，產出結果因此具備可重現的一致性。
模板 CSS 採參數化設計：九成的視覺調整只需修改 inline 的 font-size:Xvw、height:Yvh、gap:Zvh，在結構正確的基礎上微調，而非重寫版面。
設計用途限定：演講型簡報，非資料填充工具
客製化與團隊標準化的五個方向
整個 Skill 是純資料檔，由 Markdown 規格、HTML 模板、版式參考與一支 .mjs 校驗腳本構成，無編譯步驟。所有檔案可直接閱讀與修改，可在團隊內標準化使用，無需撰寫應用程式碼。授權為 MIT，可自由 fork。
進階玩法地圖
**1. 在預設約束內微調主題。**打開 references/themes.md 或 references/themes-swiss.md,在現有預設的 :root 變數框架內調整;保持「不自填任意 hex」的紀律,協調性才不會崩。
**2. 用 S08 地圖元件。**需要在 Swiss 簡報放地圖時，參閱 references/swiss-map-component.md。S08 版式內建 MapLibre 擴充，無需自行接入地圖庫。
3. 把截圖外框做成團隊資產。assets/screenshot-backgrounds/ 的 9 套 CleanShot 風格外框,可固定成你產品 demo 的標準呈現,跨簡報重用。
**4. 把校驗器接進流程。**把 node scripts/validate-swiss-deck.mjs 放進你的出稿檢查或 CI,讓 Swiss 規範自動把關,而不是靠人工肉眼複查。
**5. 沉澱你自己的 checklist。**repo 的 checklist.md 是作者五輪迭代的產物;把你團隊踩過的版面坑追加進去,它會越用越貼合你的場景。
最該讀的三份延伸閱讀
① SKILL.md：七步流程、雙視覺系統、設計原則的完整規格。 ② references/checklist.md：P0–P3 品質閘，五輪迭代累積的版面問題清單。 ③ references/layouts-swiss.md：Style B 的 22 個註冊版式與實驗版式說明。
固定設計系統、鎖定版式、自動校驗，產出結果具備可重現的一致性。