# 歸藏 HTML PPT 代理技能
> 透過此 PPT 代理技能生成具有兩種獨特視覺風格的 HTML 簡報，並包含圖像生成和跨平台封面創作。在幾秒鐘內製作出專業且視覺吸引人的簡報。
- Canonical: https://nanoskill.ai/tw/skills/ppt-agent-skill
- Markdown: https://nanoskill.ai/tw/skills/ppt-agent-skill.md
- Author: op7418
- Published: 2026-05-22T08:33:57.477Z
- Updated: 2026-07-25T04:34:45.899Z
- Language: zh-TW
- Source type: github
- Popularity signal: 11121
## Sources
- https://github.com/op7418/guizang-ppt-skill
## Install
```shell
npx skills add https://github.com/op7418/guizang-ppt-skill
```
## About
歸藏 HTML PPT 代理技能讓 AI 代理能夠輕鬆生成專業的單文件 HTML 簡報。此技能專為克勞德代碼和法典等平台設計，簡化了創建視覺吸引人的內容的流程，提供兩種獨特的美學系統：以敘事為中心的電子雜誌風格和以事實為導向的瑞士國際主義風格。用戶可以快速將文章轉換為引人入勝的演示稿，製作詳細的產品分析，並生成一致的跨平台封面，同時保持高視覺品質。
此技能透過提供輕量級的 HTML 輸出而脫穎而出，無需複雜設定即可輕鬆分享和檢視。它整合了先進功能，例如透過法典中的 GPT-圖片 2.0 / GPT-M 2.0 進行 AI 驅動的圖片生成，從而實現具備上下文感知的視覺效果和資訊圖表。此外，它還提供結構化佈局和嚴格的設計原則，特別是針對瑞士風格，確保從幻燈片到社交媒體封面的所有生成內容外觀精美且一致。
適用於各種場景，從內部演講、產品發布到個人分享和方法展示，歸藏 HTML PPT 代理技能簡化了內容創作工作流程。它讓用戶能夠將長篇內容轉換為簡潔的簡報，增強產品截圖以適應特定的模板比例，並確保在所有溝通渠道上保持一致的視覺識別。該技能專注於結構化工作流程和預定義的視覺規則，以最小的努力確保高品質、美觀的結果。
## Key features
- **雙重視覺系統**: 在「風格 A：電子雜誌 × 電子墨水」（適合敘事和個人表達）和「風格 B：瑞士國際主義」（適合事實、產品分析和方法論）之間選擇，確保你的訊息有效傳達。
- **單文件 HTML 輸出**: 生成輕量、自包含的 HTML 簡報，無需構建過程或伺服器，易於在任何網路瀏覽器中直接打開、分享和演示。
- **AI 代理兼容性**: 專為 Claude Code、Codex 和其他具有 shell 訪問權限的 AI 代理設計，允許通過自然語言指令無縫生成、修改和迭代 HTML PPT。
- **Codex 圖片生成**: 在 Codex 中整合 GPT-Image 2.0 / GPT-M 2.0，生成高質量、能感知上下文的圖片、資訊圖表和 UI 場景，完美縮放並插入到你的投影片中。
- **多平台封面生成**: 根據你的簡報核心內容，自動為各種平台（如微信公眾號（21:9, 1:1）、小紅書（3:4）和影音號（16:9））創建一致且視覺統一的封面。
## Use cases
- **將文章轉化為簡報**: 將長篇文章或文件轉化為簡潔、引人入勝的 HTML 簡報，用於演講、內部談話或私人分享會，提取核心思想並將其結構化為引人入勝的敘述。
- **創建專業的產品分析**: 利用結構化的「風格 B：瑞士國際主義」來呈現產品分析、方法論或 AI 產品發布，重點關注事實、數據和清晰的視覺溝通。
- **設計一致的多平台內容**: 為你的簡報、附帶圖片和各種社交媒體封面生成統一的視覺識別，確保在所有溝通渠道中保持品牌一致性和影響力。
- **增強 PPT 截圖**: 重新設計並調整產品截圖以適應簡報模板，保持關鍵資訊的同時實現適合專業 HTML PPT 的統一視覺風格。
## Result preview
查看由此代理技能根據文章生成的實際簡報。
## Result walkthrough
### 步驟 1：安裝
將此技能添加到您的代理中。
### 步驟 2：提供內容
輸入主題、筆記，或上傳現有素材（例如報告、大綱、想法）。
### 步驟 3：獲取您的簡報
檢閱您可以直接使用的 HTML 簡報。
## Skill definition
一個適用於 Claude Code、Codex 及類似編碼代理環境的 agent skill。它會生成**單一 HTML 檔案的水平滑動 deck**、deck 視覺和社群封面。
它附帶兩套視覺系統：
- **風格 A：編輯雜誌 × 電子墨水**。想像《Monocle》雜誌但縫入程式碼。最適合敘事型演講、觀點、沙龍和個人風格。
- **風格 B：瑞士國際字型風格**。網格優先、一種高飽和度錨點顏色、銳利矩形、1px 細線，以及極端的字型對比。最適合事實、產品、分析和框架。
> 由 [Guizang](https://x.com/op7418) 從線下演講提煉，如「一人公司：AI 折疊的組織」和「一種新的工作方式」等。製作這些 deck 時踩過的每個陷阱都記錄在 `checklist.md` 中。
**舊主題 · 風格 A 編輯雜誌**
**新主題 · 風格 B 瑞士國際**
## 30 秒快速開始
```bash
npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill
```
或將以下內容貼到具有 shell 存取權的 AI 代理：
```text
為我安裝 guizang-ppt-skill。將 https://github.com/op7418/guizang-ppt-skill 複製到 ~/.claude/skills/guizang-ppt-skill，然後驗證 SKILL.md、assets/ 和 references/ 是否存在。
```
如果你已經安裝，請用以下方式更新：
```text
為我更新 guizang-ppt-skill。前往 ~/.claude/skills/guizang-ppt-skill，執行 git pull，然後告訴我最新的提交。
```
然後向你的代理說：
```text
從這篇文章建立一個瑞士風格的 deck，約 7 張投影片，包含 2-3 個生成的視覺素材。
```
其他有用的提示：
```text
將這個 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）
## 常見使用案例
| 任務 | 建議流程 |
|------|----------|
| 長文章轉為演講 deck | 提取核心論點，然後建立 6-10 張投影片的節奏 |
| 框架 / 產品分析 | 使用風格 B 瑞士風格，搭配鎖定版面和 21:9 英雄視覺 |
| 個人演講 / 觀點文章 | 使用風格 A 編輯雜誌以獲得更強的敘事節奏 |
| Deck 視覺 | 在 Codex 中，生成照片、資訊圖表、流程圖、系統地圖或 UI 場景 |
| 社群封面 | 從相同概念生成 21:9 主封面、1:1 分享卡、3:4 垂直封面和影片縮圖 |
| 螢幕截圖標準化 | 在插入投影片前，將原始螢幕截圖重新設計為模板安全比例 |
## 為什麼選擇 HTML deck
- **代理原生編輯**：HTML / CSS 是純文字，因此代理可以直接讀取、編輯和驗證。
- **比 Markdown 更高的視覺密度**：精確的版面、定位、動態、互動性和封面格式。
- **輕量交付**：一個 HTML 檔案即可開啟、展示、傳送、截圖或錄製。
- **更好的品質關卡**：瑞士驗證器可以捕捉版面偏移、不安全的圖片放置、置中的內文標題和 SVG 文字陷阱。
- **跨輸出的統一視覺系統**：deck、生成視覺、封面和螢幕截圖重新設計可以共享相同的風格規則。
## 平台支援
| 平台 | 狀態 | 備註 |
|----------|--------|-------|
| Claude Code | 支援 | 原生 Skill 工作流程，用於建立和迭代 HTML deck |
| Codex | 支援 | 適合 deck 生成、圖片生成和基於瀏覽器的視覺 QA |
| Cursor / 其他本地代理 | 可行 | 需要檔案系統存取和 shell 執行 |
| WorkBuddy | 改編中 | 市場就緒版本正在獨立準備中 |
| 純聊天機器人 | 不建議 | 沒有檔案系統和瀏覽器預覽，完整的 deck 生成難以穩定 |
## 安裝
### 選項 1：一行指令安裝（建議）
```bash
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
```bash
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`](./SKILL.md) 中。
## 風格 B 瑞士
瑞士主題是一個嚴格的版面系統，而不僅僅是 CSS 外觀。
- **22 種命名版面**：內文投影片必須使用 `S01` 到 `S22`；不要發明新結構
- **4 種錨點顏色**：國際克萊茵藍、檸檬黃、檸檬綠、安全橙
- **網格鎖定**：16 欄網格、銳利矩形、1px 細線、無陰影、無漸層、無圓角卡片
- **中文標題縮放**：全中文標題應縮小一級，以保留內容和圖片的空間
- **圖片/文字底部對齊**：在左/右圖片版面中，文字和圖片區塊應底部對齊，同時避開分頁控制項
- **圖片插槽**：圖片必須放置在模板定義的 `data-image-slot` 區域中，通常以 21:9 或 16:10 比例生成
- **嚴格驗證**：驗證器會捕捉置中內文標題、實驗性版面、可見的 SVG 文字和放置在插槽外的圖片
瑞士驗證：
```bash
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/image-prompts.md)。螢幕截圖裱框存放在 [`references/screenshot-framing.md`](./references/screenshot-framing.md)。
## 封面生成
此 skill 也可以將文章或 deck 概念轉換為平台封面：
- 微信主封面：21:9，標題優先，搭配一個視覺錨點
- 微信分享卡：1:1，與 21:9 封面視覺搭配
- 小紅書封面 / 輪播圖：3:4，大標題，整批一致的字級比例
- 影片縮圖：16:9，標題 + 副標題 + 一個焦點視覺
相同規則適用：使用幾個強而有力的關鍵字，將標題作為視覺中心，不要用內文填滿畫布。
## 提示詞範例
將以下任一提示詞複製到你的代理中，然後附上你的文章、Markdown 檔案或圖片素材：
```text
從這篇文章建立一個 8 張投影片的瑞士風格 deck，搭配 3 個與模板圖片插槽匹配的生成視覺。
```
```text
將這份產品分析文件轉換為具有強烈敘事節奏的編輯雜誌風格 deck。
```
```text
從這個 deck 的核心概念，建立兩個封面：一個 21:9 主封面和一個視覺搭配的 1:1 分享卡。
```
```text
將這些產品螢幕截圖重新設計為一致的 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 編輯主題
| 預覽 | 主題 | 核心顏色與最適合 |
|---------|-------|--------------------------|
| 
| 🖋 **墨韻經典** | `#0a0a0b` / `#f1efea`。通用預設、商業發表、無頭緒時使用。 |
| 
| 🌊 **靛藍瓷** | `#0a1f3d` / `#f1f3f5`。科技、研究、AI、技術主題演講。 |
| 
| 🌿 **森林墨** | `#1a2e1f` / `#f5f1e8`。自然、永續、文化、非虛構。 |
| 
| 🍂 **牛皮紙** | `#2a1e13` / `#eedfc7`。懷舊、人本、文學、獨立雜誌。 |
| 
| 🌙 **沙丘** | `#1f1a14` / `#f0e6d2`。藝術、設計、創意、時尚、藝廊風 deck。 |
切換主題只需更換 `template.html` 中 `:root{}` 區塊頂部的 6 個變數 — 所有其他 CSS 皆透過 `var(--...)` 流動。
### 風格 B 瑞士主題
從 `references/themes-swiss.md` 選擇。此處也**不允許自訂 hex 色碼**。
| 預覽 | 主題 | 錨點顏色與最適合 |
|---------|-------|---------------------------|
| 
| 🔵 **國際克萊茵藍** | `#002FA7`。預設、商業發表、AI 產品、框架。 |
| 
| 🟡 **檸檬黃** | `#FFD500`。年輕、運動、零售、消費性商品、Y2K 復古。 |
| 
| 🟢 **檸檬綠** | `#C5E803`。生態、永續、健康、Z世代品牌。 |
| 
| 🟠 **安全橙** | `#FF6B35`。警示、新聞、工業主題、運動、活力主題。 |
如果使用者要求瑞士風格 deck 但未指定顏色，預設使用國際克萊茵藍。
## 核心設計原則
1. **克制勝過炫目** — WebGL 背景僅在英雄頁面上透出
2. **結構勝過裝飾** — 透過字級 + 字型 + 網格留白建立資訊階層，而非陰影或浮動卡片
3. **圖片是一等公民** — 將其與內文區域對齊，保持比例穩定，僅從底部裁切，並保留頂部/側邊
4. **生成視覺是資產** — 只保留核心照片/圖表/UI；不要在圖片內呈現投影片標題、頁尾或角標
5. **節奏存在於英雄頁面** — 英雄/非英雄交替可避免視覺疲勞
6. **動態效果必須可選** — `B` 切換靜態模式，讓動畫永不成為閱讀負擔
7. **術語保持一致** — Skills 就是 Skills；不混用翻譯
8. **瑞士版面保持鎖定** — 風格 B 應恢復並重複使用原始的 22 頁版面系統，而非發明不相關的頁面
## 視覺參考
- [*Monocle*](https://monocle.com) 雜誌版面
- 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](https://github.com/op7418)
## FAQ
### 什麼是歸葬 HTML PPT 代理技能？
歸葬 HTML PPT 技能是一個兼容 AI 代理的工具，用於生成單文件 HTML 簡報、附帶圖片和多平台封面。它提供兩種獨特的視覺風格：電子雜誌和瑞士國際主義。
### 如何安裝歸葬 HTML PPT 代理技能？
你可以通過在終端機中運行 \`npx skills add https://github.com/op7418/guizang-ppt-skill --skill guizang-ppt-skill\` 來安裝它，或者指示一個支援 shell 的 AI 代理將倉庫複製到你的技能目錄中。
### 我可以自定義我的 HTML PPT 的顏色嗎？
不可以，不允許自定義 HEX 值。該技能為風格 A（電子雜誌）和風格 B（瑞士國際主義）提供了一系列預設主題，以確保美學一致性和高質量的輸出。
### 提供哪兩種視覺風格？
風格 A，「電子雜誌 × 電子墨水」，非常適合敘事、觀點和個人表達。風格 B，「瑞士國際主義」，最適合以網格基礎的極簡設計呈現事實、產品分析和方法論。
### 是否可以將 HTML PPT 匯出為 PPTX 格式？
核心交付的是 HTML，可以直接在瀏覽器中演示、截圖或錄製。雖然直接匯出 PPTX 不是主要功能，但你可以將 HTML 頁面用作轉換的視覺草稿，如果需要轉換的話。
### 該技能支援為我的 HTML PPT 生成圖片嗎？
是的，在 Codex 環境中使用時，該技能可以利用 GPT-Image 2.0 / GPT-M 2.0 生成各種類型的圖片、資訊圖表和 UI 場景，然後根據模板比例將它們插入到你的簡報中。