歸藏 HTML PPT 代理技能

一個適用於 Claude Code、Codex 及類似編碼代理環境的 agent skill。它會生成單一 HTML 檔案的水平滑動 deck、deck 視覺和社群封面。

它附帶兩套視覺系統：

• 風格 A：編輯雜誌 × 電子墨水。想像《Monocle》雜誌但縫入程式碼。最適合敘事型演講、觀點、沙龍和個人風格。
• 風格 B：瑞士國際字型風格。網格優先、一種高飽和度錨點顏色、銳利矩形、1px 細線，以及極端的字型對比。最適合事實、產品、分析和框架。

由 Guizang 從線下演講提煉，如「一人公司：AI 折疊的組織」和「一種新的工作方式」等。製作這些 deck 時踩過的每個陷阱都記錄在 checklist.md 中。

舊主題 · 風格 A 編輯雜誌

新主題 · 風格 B 瑞士國際

30 秒快速開始

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

或將以下內容貼到具有 shell 存取權的 AI 代理：

為我安裝 guizang-ppt-skill。將 https://github.com/op7418/guizang-ppt-skill 複製到 ~/.claude/skills/guizang-ppt-skill，然後驗證 SKILL.md、assets/ 和 references/ 是否存在。

如果你已經安裝，請用以下方式更新：

為我更新 guizang-ppt-skill。前往 ~/.claude/skills/guizang-ppt-skill，執行 git pull，然後告訴我最新的提交。

然後向你的代理說：

從這篇文章建立一個瑞士風格的 deck，約 7 張投影片，包含 2-3 個生成的視覺素材。

其他有用的提示：

將這個 Markdown 檔案轉換為編輯雜誌風格的簡報。
根據這個 deck 的核心概念建立一個 21:9 社群封面。
將這個產品螢幕截圖重新設計為 16:10 的投影片視覺。

你會得到

• 🖋 兩套視覺系統：風格 A 的編輯敘事、風格 B 的實證瑞士結構
• 📐 水平滑動導航：← → 箭頭 / 滾輪 / 觸控滑動 / 底部圓點 / ESC 回到索引
• 🧩 風格 A 10 種版面：封面、分隔頁、大數字、圖文、圖片網格、流程圖、對照等
• 🧱 風格 B 22 種鎖定版面：封面、宣言、KPI 塔、循環圖、雙重比較、影像英雄、結尾宣言等
• 🎨 精選主題預設：風格 A 有 5 種電子墨水主題、風格 B 有 4 種瑞士錨點色彩主題
• 🖼 選擇性 Codex 影像流程：使用 GPT-Image 2.0 / GPT-M 2.0 生成紀實照片、資訊圖表、流程圖、系統地圖和 UI 場景，並以模板安全的比例插入
• 📰 社群封面：生成 21:9 微信封面圖片、1:1 分享卡、3:4 小紅書封面、影片縮圖及相關變體
• 📴 低功耗靜態模式：按下 B 將 WebGL / canvas 動畫切換為靜態視覺
• 📄 單一 HTML 檔案 — 無需建置、無需伺服器，直接在瀏覽器中開啟

適合 / 不適合

✅ 適合：線下演講、產業主題演說、私人沙龍、AI 產品發表會、展示日、具有強烈個人風格的簡報

❌ 不適合：資料密集表格、培訓 deck（密度過低）、多使用者協作編輯（靜態 HTML）

常見使用案例

為什麼選擇 HTML deck

• 代理原生編輯：HTML / CSS 是純文字，因此代理可以直接讀取、編輯和驗證。
• 比 Markdown 更高的視覺密度：精確的版面、定位、動態、互動性和封面格式。
• 輕量交付：一個 HTML 檔案即可開啟、展示、傳送、截圖或錄製。
• 更好的品質關卡：瑞士驗證器可以捕捉版面偏移、不安全的圖片放置、置中的內文標題和 SVG 文字陷阱。
• 跨輸出的統一視覺系統：deck、生成視覺、封面和螢幕截圖重新設計可以共享相同的風格規則。

平台支援

安裝

選項 1：一行指令安裝（建議）

npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill

選項 2：將以下內容貼到 AI

為我安裝 guizang-ppt-skill Claude Code skill。步驟：

1. 確保 ~/.claude/skills/ 存在（若無則建立）
2. 執行 git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill
3. 驗證：ls ~/.claude/skills/guizang-ppt-skill/ 應顯示 SKILL.md、assets/、references/
4. 完成後告訴我。之後說出「幫我做一個雜誌風格的 deck」之類的話就會觸發此 skill。

將上方區塊貼到 Claude Code / Cursor / 任何具有 shell 存取權的 AI 代理，它就會處理安裝。

選項 3：手動 CLI

git clone https://github.com/op7418/guizang-ppt-skill.git ~/.claude/skills/guizang-ppt-skill

如何觸發

安裝後，Claude Code 會自動偵測此 skill。觸發詞：

• "幫我做一個雜誌風格的 deck"
• "幫我做一個瑞士風格的 deck"
• "生成一個水平滑動 deck"
• "編輯雜誌風格的簡報"
• "為我的演講製作電子墨水投影片"
• "從這篇文章建立一個 21:9 微信封面"
• "從這個 deck 建立一個 1:1 分享卡"

工作流程

此 skill 是一個結構化工作流程；代理會引導你完成每個步驟：

1. 選擇風格 — 風格 A 編輯雜誌，或風格 B 瑞士國際
2. 釐清意圖 — 7 題清單：風格、觀眾、時長、素材來源、圖片/螢幕截圖、主題、硬性限制
3. 複製模板 — 風格 A 使用 assets/template.html；風格 B 使用 assets/template-swiss.html
4. 填入內容 — 建立節奏計劃，然後選擇並調整對應的版面骨架
5. 選擇性圖片生成 — 在 Codex 中，詢問是否要使用 GPT-Image 2.0 / GPT-M 2.0 圖片，然後以適合頁面的比例插入
6. 自我檢查 — 對照 references/checklist.md；P0 問題必須全部通過；瑞士 deck 還必須通過版面驗證器
7. 預覽 — 在瀏覽器中開啟 HTML
8. 迭代 — 使用內聯樣式調整字型大小、高度、間距

完整規格在 SKILL.md 中。

風格 B 瑞士

瑞士主題是一個嚴格的版面系統，而不僅僅是 CSS 外觀。

• 22 種命名版面：內文投影片必須使用 S01 到 S22；不要發明新結構
• 4 種錨點顏色：國際克萊茵藍、檸檬黃、檸檬綠、安全橙
• 網格鎖定：16 欄網格、銳利矩形、1px 細線、無陰影、無漸層、無圓角卡片
• 中文標題縮放：全中文標題應縮小一級，以保留內容和圖片的空間
• 圖片/文字底部對齊：在左/右圖片版面中，文字和圖片區塊應底部對齊，同時避開分頁控制項
• 圖片插槽：圖片必須放置在模板定義的 data-image-slot 區域中，通常以 21:9 或 16:10 比例生成
• 嚴格驗證：驗證器會捕捉置中內文標題、實驗性版面、可見的 SVG 文字和放置在插槽外的圖片

瑞士驗證：

node scripts/validate-swiss-deck.mjs path/to/index.html

Codex 影像流程

在 Codex 中，當第一個 deck 草稿準備好後，代理可以詢問使用者是否要生成視覺素材。確認後，選擇圖片類型或風格。常見類型包括：

• 紀實照片：類似富士/徠卡風格的現實場景，增添人情味
• 資訊圖表 / 流程圖 / 對照圖表 / 系統地圖：用於難以用照片解釋的概念
• 螢幕截圖裱框 / 螢幕截圖重新設計：先使用捆綁的背景素材和 CleanShot X 風格的畫布保留原始螢幕截圖；僅在螢幕截圖需要重建時才使用 UI 場景生成
• 數據海報 / 圖表：將關鍵數字轉換為可插入的視覺資產
• 多圖組合：適用於超寬插槽，若三張不相關的 16:9 圖片會破壞網格時使用

生成的圖片必須遵循四項核心規則：

• 將圖片視為嵌入式資產，而非獨立的投影片：無頁尾、頁面底部、標題、頁碼、角標、簽名或裝飾性邊框
• 配合 deck 語言：中文 deck 的資訊圖表內使用中文標籤，英文 deck 使用英文標籤
• 生成前配合插槽比例：許多瑞士英雄插槽為 21:9，常見主視覺為 16:9 / 16:10，UI 場景為 16:10，圖片網格使用固定等高
• 當原始螢幕截圖必須保持忠實時，請先閱讀 references/screenshot-framing.md，並使用捆綁的 assets/screenshot-backgrounds/ 背景，加上程式化縮放、內距和對齊，而不是預設重繪螢幕截圖

圖片提示詞存放在 references/image-prompts.md。螢幕截圖裱框存放在 references/screenshot-framing.md。

封面生成

此 skill 也可以將文章或 deck 概念轉換為平台封面：

• 微信主封面：21:9，標題優先，搭配一個視覺錨點
• 微信分享卡：1:1，與 21:9 封面視覺搭配
• 小紅書封面 / 輪播圖：3:4，大標題，整批一致的字級比例
• 影片縮圖：16:9，標題 + 副標題 + 一個焦點視覺

相同規則適用：使用幾個強而有力的關鍵字，將標題作為視覺中心，不要用內文填滿畫布。

提示詞範例

將以下任一提示詞複製到你的代理中，然後附上你的文章、Markdown 檔案或圖片素材：

從這篇文章建立一個 8 張投影片的瑞士風格 deck，搭配 3 個與模板圖片插槽匹配的生成視覺。

將這份產品分析文件轉換為具有強烈敘事節奏的編輯雜誌風格 deck。

從這個 deck 的核心概念，建立兩個封面：一個 21:9 主封面和一個視覺搭配的 1:1 分享卡。

將這些產品螢幕截圖重新設計為一致的 16:10 投影片視覺。保留關鍵 UI 資訊；不要在圖片內加入投影片標題或頁尾。

目錄

guizang-ppt-skill/
├── SKILL.md              ← 主要 skill 檔案：工作流程、原則、常見錯誤
├── README.md             ← 中文 README
├── README.en.md          ← 此檔案
├── assets/
│   ├── template.html         ← 風格 A 編輯雜誌模板
│   ├── template-swiss.html   ← 風格 B 瑞士模板
│   └── screenshot-backgrounds/ ← 捆綁的 WebP 螢幕截圖背景：風格 A 5 張 / 風格 B 4 張
├── scripts/
│   └── validate-swiss-deck.mjs ← 瑞士版面驗證器
└── references/
    ├── components.md     ← 組件目錄（類型、顏色、網格、圖示、標註、統計、管線）
    ├── layouts.md        ← 10 種版面骨架（可直接貼上）
    ├── layouts-swiss.md  ← 22 種鎖定的瑞士版面
    ├── swiss-layout-lock.md ← 瑞士保真度和版面硬性規則
    ├── themes.md         ← 5 種主題預設（選擇使用，不要自訂）
    ├── themes-swiss.md   ← 4 種瑞士錨點顏色主題
    ├── image-prompts.md  ← GPT-Image 2.0 / GPT-M 2.0 圖片類型、比例和基礎提示詞
    ├── screenshot-framing.md ← CleanShot X 風格螢幕截圖裱框語義
    └── checklist.md      ← 品質檢查清單（P0 / P1 / P2 / P3 等級）

主題預設

從 references/themes.md 選擇。不允許自訂 hex 色碼 — 保護美感比選擇自由更重要。

風格 A 編輯主題

切換主題只需更換 template.html 中 :root{} 區塊頂部的 6 個變數 — 所有其他 CSS 皆透過 var(--...) 流動。

風格 B 瑞士主題

從 references/themes-swiss.md 選擇。此處也不允許自訂 hex 色碼。

如果使用者要求瑞士風格 deck 但未指定顏色，預設使用國際克萊茵藍。

核心設計原則

1. 克制勝過炫目 — WebGL 背景僅在英雄頁面上透出
2. 結構勝過裝飾 — 透過字級 + 字型 + 網格留白建立資訊階層，而非陰影或浮動卡片
3. 圖片是一等公民 — 將其與內文區域對齊，保持比例穩定，僅從底部裁切，並保留頂部/側邊
4. 生成視覺是資產 — 只保留核心照片/圖表/UI；不要在圖片內呈現投影片標題、頁尾或角標
5. 節奏存在於英雄頁面 — 英雄/非英雄交替可避免視覺疲勞
6. 動態效果必須可選 — B 切換靜態模式，讓動畫永不成為閱讀負擔
7. 術語保持一致 — Skills 就是 Skills；不混用翻譯
8. 瑞士版面保持鎖定 — 風格 B 應恢復並重複使用原始的 22 頁版面系統，而非發明不相關的頁面

視覺參考

• Monocle 雜誌版面
• YC Garry Tan — 「細馬具，胖技能」
• Massimo Vignelli / Helvetica Forever / 瑞士國際字型風格
• Guizang 的線下演講 deck 系列

發展路線

• 加入更多真實範例和可開啟的 HTML deck 展示
• 擴展更多發佈平台的封面格式
• 加入更多瑞士版面驗證規則
• 改進螢幕截圖重新設計和資訊圖表生成工作流程
• 準備市集特定變體，如 WorkBuddy
• 加入更多精選主題包，同時維持自訂顏色的限制

常見問題

可以匯出成 PPTX 嗎？ 主要輸出是 HTML。你可以在瀏覽器中展示、截圖或錄影。PPTX 轉換可作為獨立工作流程進行，但目前不是核心路徑。

為什麼不允許自訂顏色？ 此 skill 旨在提供穩定的視覺輸出。任意顏色常會破壞系統，因此 deck 必須使用精選的預設值。

我可以加入自己的版面嗎？ 可以。風格 A 的版面可以在 references/layouts.md 擴展。風格 B 較嚴格：需同步更新 template-swiss.html、layouts-swiss.md、swiss-layout-lock.md 和驗證器。

Codex 圖片生成是必需的嗎？ 否。deck 不需生成圖片即可運作。圖片流程僅在你需要照片、資訊圖表、UI 場景或封面時使用。

如何更新此 skill？ 再次執行安裝指令，或在你本機的 skill 目錄中執行 git pull。

貢獻

錯誤、版面問題、新版面請求 — 歡迎 Issues 和 PR。優先事項：

• 先在 template.html 加入新類別；不要讓 layouts.md 引用未定義的類別
• 變更 template-swiss.html 時，要一併更新 layouts-swiss.md 和 swiss-layout-lock.md
• 新增瑞士規則時，要更新 scripts/validate-swiss-deck.mjs
• 將陷阱記錄到 checklist.md 對應的 P0 / P1 / P2 / P3 等級
• 新主題顏色放入 themes.md 並附上建議使用案例

授權

MIT © 2026 op7418