歸藏 HTML PPT 代理技能

適用於 Claude Code、Codex 和類似編碼代理環境的代理技能。它生成單文件 HTML 水平滑動簡報、簡報視覺效果和社交封面頁面。

它附帶兩種視覺系統：

• 風格 A：編輯雜誌 × 電子墨水。想像一下《Monocle》雜誌與程式碼的結合。最適合敘事性演講、觀點、沙龍和個人聲音。
• 風格 B：瑞士國際排版風格。網格優先，一種高飽和度錨點顏色，銳利的矩形，髮絲線條，以及極端的字體對比。最適合事實、產品、分析和框架。

由 Guizang 從「一人公司：AI 折疊的組織」和「一種新的工作方式」等線下演講中提煉。那些簡報中遇到的每一個陷阱都記錄在 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，然後告訴我最新的提交。

然後詢問您的代理：

根據這篇文章創建一個瑞士風格的簡報，大約 7 張投影片，包含 2-3 張生成的視覺效果。

其他有用的提示：

將此 Markdown 文件轉換為編輯雜誌風格的簡報。
從此簡報的核心思想創建一個 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 / 畫布動畫轉換為靜態視覺效果
• 📄 單一 HTML 文件 — 無需構建，無需伺服器，直接在瀏覽器中打開

適用 / 不適用

✅ 適用：線下演講、行業主題演講、私人沙龍、AI 產品發布、演示日、具有強烈個人聲音的簡報

❌ 不適用：數據密集型表格、培訓簡報（密度太低）、多用戶協作編輯（靜態 HTML）

常見用例

為什麼選擇 HTML 簡報

• 代理原生編輯：HTML / CSS 是純文本，因此代理可以直接讀取、編輯和驗證它。
• 比 Markdown 更高的視覺密度：精確的佈局、定位、動態、互動性和封面格式。
• 輕量級交付：一個 HTML 文件可以打開、演示、發送、截圖或錄製。
• 更好的品質門檻：瑞士驗證器可以捕捉佈局漂移、不安全的圖像放置、居中的正文標題和 SVG 文本陷阱。
• 跨輸出的單一視覺系統：簡報、生成的視覺效果、封面和截圖重新設計可以共享相同的樣式規則。

平台支援

安裝

選項 1：一鍵安裝（推薦）

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

選項 2：將此貼到 AI

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

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. 完成後告訴我。之後，說「為我製作一個雜誌風格的簡報」之類的話將觸發此技能。

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

選項 3：手動 CLI

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

如何觸發它

安裝後，Claude Code 會自動偵測技能。觸發短語：

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

工作流程

該技能是一個結構化的工作流程；代理會引導您完成每個步驟：

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 問題必須全部通過；瑞士簡報也必須通過佈局驗證器
7. 預覽 — 在瀏覽器中打開 HTML
8. 迭代 — 使用內聯樣式調整字體大小、高度、間距

完整規格請參閱 SKILL.md。

風格 B 瑞士

瑞士主題是一個嚴格的佈局系統，不僅僅是一個 CSS 外觀。

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

瑞士驗證：

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

Codex 圖像流程

在 Codex 中，當第一個簡報草稿準備好後，代理可以詢問用戶是否需要生成的視覺效果。一旦確認，選擇圖像類型或風格。常見類型包括：

• 紀錄片照片：類似富士 / 徠卡真實世界場景，增加人文氣息
• 資訊圖表 / 流程圖 / 比較圖表 / 系統圖：用於無法用照片很好解釋的概念
• 截圖框架 / 截圖重新設計：首先保留原始截圖，並使用捆綁的背景資產和 CleanShot X 風格的畫布；僅當截圖需要重建時才使用 UI 場景生成
• 數據海報 / 圖表：將關鍵數字轉換為可插入的視覺資產
• 多圖像組合：適用於超寬插槽，其中三個不相關的 16:9 圖像會破壞網格

生成的圖像必須遵循四個核心規則：

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

圖像提示位於 references/image-prompts.md。截圖框架位於 references/screenshot-framing.md。

封面生成

該技能還可以將文章或簡報想法轉換為平台封面：

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

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

範例提示

將以下任何提示複製到您的代理中，然後附上您的文章、Markdown 文件或圖像資產：

根據這篇文章創建一個 8 張投影片的瑞士風格簡報，其中包含 3 張與模板圖像插槽匹配的生成視覺效果。

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

根據此簡報的核心思想，創建兩個封面：一個 21:9 的主封面和一個視覺配對的 1:1 分享卡。

將這些產品截圖重新設計為一致的 16:10 投影片視覺效果。保留關鍵 UI 信息；不要在圖像內部添加投影片標題或頁腳。

目錄

guizang-ppt-skill/
├── SKILL.md              ← 主要技能文件：工作流程、原則、常見錯誤
├── README.md             ← 中文 README
├── README.en.md          ← 此文件
├── assets/
│   ├── template.html         ← 風格 A 編輯雜誌模板
│   ├── template-swiss.html   ← 風格 B 瑞士模板
│   └── screenshot-backgrounds/ ← 捆綁的 WebP 截圖背景：5 種風格 A / 4 種風格 B
├── 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 中選擇。不允許自定義十六進制值 — 保護美學比選擇自由更重要。

風格 A 編輯主題

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

風格 B 瑞士主題

從 references/themes-swiss.md 中選擇。這裡也不允許自定義十六進制值。

如果用戶要求瑞士風格的簡報但未指定顏色，則預設為國際克萊因藍。

核心設計原則

1. 克制而非炫耀 — WebGL 背景僅在英雄頁面透出
2. 結構而非裝飾 — 透過字體大小 + 字體 + 網格留白來建立信息層次，而不是陰影或浮動卡片
3. 圖像是一等公民 — 將它們與正文內容區域對齊，保持比例穩定，僅從底部裁剪，並保留頂部/側面
4. 生成的視覺效果是資產 — 僅保留核心照片 / 圖表 / UI；不要在圖像內部渲染投影片標題、頁腳或角標
5. 節奏存在於英雄頁面 — 英雄 / 非英雄交替使眼睛不易疲勞
6. 動態效果必須是可選的 — B 切換靜態模式，因此動畫永遠不會成為閱讀負擔
7. 術語保持一致 — 技能就是技能；不要混用翻譯
8. 瑞士佈局保持鎖定 — 風格 B 應恢復並重用原始的 22 頁佈局系統，而不是發明不相關的頁面

視覺參考

• 《Monocle》雜誌佈局
• YC Garry Tan — 「薄型線束，厚實技能」
• Massimo Vignelli / Helvetica Forever / 瑞士國際排版風格
• 歸藏的線下演講系列簡報

路線圖

• 增加更多真實世界的範例和可打開的 HTML 簡報演示
• 擴展更多發布平台的封面格式
• 增加更多瑞士佈局驗證規則
• 改進截圖重新設計和資訊圖表生成工作流程
• 準備市場特定變體，例如 WorkBuddy
• 增加更多精選主題包，同時限制自定義顏色

常見問題

它可以導出為 PPTX 嗎？ 主要輸出是 HTML。您可以在瀏覽器中演示、截圖或錄製它。PPTX 轉換可以作為一個單獨的工作流程完成，但目前不是核心路徑。

為什麼不允許自定義顏色？ 該技能旨在提供穩定的視覺輸出。任意顏色通常會破壞系統，因此簡報必須使用精選預設。

我可以添加自己的佈局嗎？ 可以。風格 A 佈局可以在 references/layouts.md 中擴展。風格 B 更嚴格：同時更新 template-swiss.html、layouts-swiss.md、swiss-layout-lock.md 和驗證器。

Codex 圖像生成是必需的嗎？ 不是。簡報可以在沒有生成圖像的情況下工作。圖像流程僅在您需要照片、資訊圖表、UI 場景或封面時使用。

如何更新技能？ 再次運行安裝命令，或在您的本地技能目錄中運行 git pull。

貢獻

歡迎提交錯誤、佈局問題、新佈局請求 — 歡迎提出問題和拉取請求。優先順序：

• 首先將新類別添加到 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