WIGTN PPT 產生器
用來建立包含 WIGTN 品牌識別的單一 HTML 簡報的技能。 不需要範本 (.pptx)，只需要品牌原則與參考資料，Claude 每次都會重新設計。
核心原則
- 原則為基礎，不依賴範本 — 不依賴固定的範本檔案。每次讀取
references/中的品牌標記 + 佈局原則後即時產生。 - 品牌忠誠度 — 只使用精確的 HEX 色碼。禁止使用「類似顏色」。墨水色
#1E1E28，招牌紫色 (Pantone 265)#9B51E0。 - 招牌紫色圓點重複 — 源自
wigtn.句點的紫色點 (.) 是品牌的標誌。每張投影片都必須至少出現一個紫色圓點元素，且保持一致（例如頁碼旁的點、章節編號的點、角落的點、進度點等）。 - Light / Dark 雙主題 — 根據簡報環境選擇其中一種。同一份簡報中不可混用。
- Viewport 適配 — 所有投影片精確高度為
100vh。絕對禁止投影片內部捲動。 - 禁止只有文字的投影片 — 每張投影片至少包含一個視覺元素（形狀、色塊、圓點、線條、圖示）。
- 展示，不要說明 — 不要用文字詢問設計。只要確認主題/內容就立即產生，透過螢幕截圖展示後再調整。
- 零依賴 — 單一 HTML 檔案。即可在瀏覽器中直接簡報（字型只允許使用 CDN
<link>一行）。
品牌 (摘要)
| 標記 | 值 | 用途 |
|---|---|---|
| Ink (海軍藍) | #1E1E28 | Dark 背景 / Light 文字 |
| Purple (Pantone 265) | #9B51E0 | 招牌圓點、強調、連結 |
| Purple Deep | #6B2EAA | 圓點陰影、深度、漸層末端 |
| White | #FFFFFF | Light 背景 / Dark 文字 |
完整的調色盤 (Light/Dark
:root片段)、標誌變體使用規則、字體排印、圓點標誌規則，必須先閱讀 references/brand.md 後再套用。
工作流程 (4 個階段)
階段 0: 主題 + 內容 (一次 AskUserQuestion)
使用 AskUserQuestion 一次詢問以下資訊：
- 主題 —
Light(明亮的簡報場地·文件型) /Dark(舞台·簡報型)。包含建議。 - 目的 — 會議 / 團隊分享 / 募資簡報 / 教育訓練 / 主管報告
- 篇幅 — 5–10 張 / 10–20 張 / 20 張以上
- 核心訊息與圖片 — 要傳達的內容、是否包含圖片及其位置
同時確認要放入封面中的簡報者姓名、日期、公司/產品名稱等中繼資訊。
階段 1: 結構設計
將內容分解為投影片地圖。密度限制：封面為標題+副標題，內文每張投影片最多 4–6 個要點（或同等的視覺區塊）。超過則自動分割。
基本架構：封面 → 目錄 → (章節劃分 → 內文 N) × 章節 → 結尾 (Thank you)。
每張投影片要使用的內文佈局，請從 references/design-guide.md 中選擇。
階段 2: 圖表 (必要時)
如果需要流程圖或架構圖，請呼叫同系列外掛中的 handdrawn-diagram 技能，建立可提交的圖表 (SVG+PNG) 並插入投影片。如果手繪風格不適合，可以直接使用簡單的 CSS/SVG 形狀繪製。
階段 3: 生成 HTML
- 讀取 references/brand.md 和 references/design-guide.md。
- 撰寫套用了所選主題
:root標記的單一 HTML。必要規則：.slide { height: 100vh; height: 100dvh; overflow: hidden; }- 所有字型與間距使用
clamp(min, pref, max)(禁止單獨使用固定 px) - 使用基於高度的媒體查詢 (
max-height: 700px/600px) 進行逐步縮小 - 進度條 + 導航圓點(紫色) + 鍵盤/觸控/滑動支援 +
prefers-reduced-motion - 每張投影片都要重複招牌紫色圓點
- 插入標誌：遵循下方的「標誌使用」規則
- 填入內容，動畫要節制（專業風格：0.2–0.4s 淡入/滑動）。
階段 4: 驗證與交付
使用螢幕截圖確認 viewport 適配、品牌一致性與圓點標誌。如果環境有 Playwright/Chrome，則渲染每張投影片的 PNG 並以 Read 檢查；否則請使用者在瀏覽器中開啟。
產生完成：
- HTML: docs/{檔案名稱}-presentation.html (在瀏覽器中按 F 全螢幕 → 方向鍵/滑動)
標誌使用
WIGTN 標誌是團隊專用資產，因此不提交到公開外掛中 (已加入 .gitignore)。請依以下優先順序尋找：
${CLAUDE_PLUGIN_ROOT}/skills/wigtn-ppt/assets/logo/— 已打包的標誌 (團隊本機，*.png已 gitignore，公開儲存庫複製時不存在)<project>/docs/images/— 團隊本機品牌資產位置 (同樣 gitignore，公開儲存庫不包含)- CSS/SVG 文字商標備援 — 若上述兩個路徑沒有 PNG (公開複製或新環境的預設狀態)，則直接使用字型/SVG 渲染
wigtn加上紫色圓點 (brand.md 中有片段)。備援方案永遠能正常運作。
使用標誌時，請將要使用的檔案複製到簡報的工作空間 (例如 docs/workspace/)，然後在 HTML 中以相對路徑引用。主題變體請遵循 brand.md 中的對照表 (Light → NAVY 標誌，Dark → WHITE 標誌)。
Anti-Patterns (應避免)
- 使用紫色漸層陳腔濫調 (
#6366f1)、白色背景搭配預設紫色/粉紅色 → 只使用 WIGTN 紫色#9B51E0 - 將 Inter/Roboto/Arial 用作顯示字型 (會破壞品牌調性)
- 所有元素置中對齊、重複使用相同的卡片網格
- 使用
min-height(允許投影片溢出) → 必須使用height - 缺少圓點標誌、混用主題、使用「類似顏色」替代
參考資料
- references/brand.md — WIGTN 品牌系統：Light/Dark 調色盤、標誌變體與擺放、紫色圓點規則、字體排印、CSS 文字商標備援
- references/design-guide.md — 各投影片類型的佈局原則 (封面/目錄/章節/內文/結尾)、viewport 規則、動畫、anti-pattern
design-system-reference技能 — 可重複使用佈局密度、字體層級的想法 (瑞士極簡、編輯風格、極簡企業風最接近 WIGTN 調性)。但顏色、圓點、標誌一律使用 WIGTN 標記覆蓋。handdrawn-diagram技能 — 用於需要圖表的投影片
檢查清單
- 階段 0: 透過 AskUserQuestion 一次收集主題 (Light/Dark) + 內容
- 階段 1: 投影片地圖 + 密度限制
- 階段 2: 識別需要圖表的投影片 (handdrawn-diagram)
- 階段 3: 讀取 brand.md + design-guide.md → 產生單一 HTML (viewport、紫色圓點、標誌)
- 階段 4: 螢幕截圖驗證 → 交付