Graphic Slide Deck 是做什麼的？
從簡短描述、內容筆記或現有檔案生成專業設計的 HTML 投影片組。輸出為單一自包含的 HTML 檔案——可在任何瀏覽器中開啟，無需任何建置工具。
關鍵規則——不可協商：
- 每張投影片必須在 100vh 內完全顯示。投影片內部不可滾動。若內容溢出→拆分成兩張投影片。
- 所有字體大小與間距必須使用
clamp()。任何會縮放的項目都不能使用固定的 px 或 rem。 - 單一自包含 HTML：所有 CSS/JS 皆內嵌。除了字型 CDN 連結外，零外部依賴。
- 切勿將 HTML 直接貼在對話中。儲存為檔案，僅顯示摘要。
- 不允許一般的 AI 草率美學——請對照
references/style-presets.md中的「禁止使用」清單檢查。
步驟 1：簡報接收
需要三樣東西才能開始。如果三者都已存在於訊息中：跳至步驟 2。
若有缺少，請準確詢問：
「要開始進行，我需要三樣東西：
- 目的——這份簡報的用途是什麼？（投資人募資／銷售會議／研討會演講／內部簡報／入職訓練／其他）
- 受眾——誰會觀看？（創投、潛在客戶、你的團隊、高階主管、會議室、LinkedIn）
- 主題或內容——貼上筆記、網址、簡短描述，或上傳檔案」
等待三者齊全後再繼續。
步驟 2：完整接收
在同一則訊息中詢問所有問題，按類別分組。使用者可跳過任何問題——將套用預設值。
「在開始之前，我有幾個問題：
內容
- 關鍵訊息——觀眾離開後必須記住的一句話
- 投影片數量——短（5-10）／中（10-20）／長（20+）？
- 內容來源——所有內容已準備好／粗略筆記（我來整理）／僅主題（我來起草）？
- 現有素材——是否有任何圖片、螢幕截圖或標誌要包含？（是 + 路徑／否）
設計 5. 風格——midnight-editorial / matt-gray / clean-slate / brutalist / mint-pixel-corporate / product-minimal / magazine-red / soft-cloud / "show me options" 6. 長寬比——16:9（1920×1080，預設）／ 1:1（1080×1080，LinkedIn） 7. 內嵌編輯——匯出後文字是否可在瀏覽器中編輯？（是／否）
輸出 8. 輸出格式——僅 HTML / HTML + PDF / HTML + PDF + 部署至網址 9. 簡報名稱——用於檔案／資料夾命名的 slug（例如 "q2-investor-pitch"）；若跳過，我會自行推導」
若跳過時的預設值：
| 問題 | 預設值 |
|---|---|
| 關鍵訊息 | 從目的＋主題推導 |
| 投影片數量 | 12 |
| 內容來源 | 僅主題 |
| 現有素材 | 無 |
| 風格 | clean-slate |
| 長寬比 | 16:9 |
| 內嵌編輯 | 否 |
| 輸出格式 | HTML + PDF |
| 簡報名稱 | 從主題 slug 推導 |
如果風格 = "show me options"：
生成 3 張單張投影片的 HTML 預覽（分別使用適合該簡報目的的 3 種不同風格預設）。儲存至 .claude-design/previews/style-a.html、style-b.html、style-c.html。開啟每個檔案：open .claude-design/previews/style-a.html 等。在步驟 3 之前要求使用者選擇。
步驟 2.5：內部設計方向（不顯示給使用者）
根據步驟 2 的答案，在步驟 3 之前確定：
視覺特性（根據風格推導，若未指定則推斷）：
- midnight-editorial 或 magazine-red →
dark-editorial - clean-slate 或 product-minimal →
light-minimal - matt-gray →
neutral-professional - brutalist →
bold-expressive - mint-pixel-corporate 或 soft-cloud →
fresh-corporate - 未指定風格：投資人募資 → midnight-editorial；銷售 → clean-slate；研討會 → brutalist 或 midnight-editorial；內部簡報 → matt-gray
一張不可錯過的投影片——在步驟 3 之前確定：
- 投資人募資 → stat-highlight（成長動能／指標投影片）
- 銷售簡報 → stat-highlight（ROI／成果投影片）
- 研討會演講 → quote-callout 或 stat-highlight（關鍵見解）
- 內部簡報 → closing-cta（決策／建議投影片）
版型選擇傾向——記錄對此簡報類型最相關的 2-3 種版型，以便在步驟 3 中優先使用。
切勿向使用者詢問設計方向——完全根據他們的答案推導。
步驟 3：結構設計
在規劃之前詳讀 references/layout-library.md。
規劃完整的投影片順序。為每張投影片指派來自 references/layout-library.md 中 13 種版型的一種。
簡報類型→典型結構：
投資人募資簡報（12 張投影片）：
- [title-hero] 公司名稱 + 標語
- [section-divider] 問題
- [text-full] 問題細節
- [text-left-image-right] 解決方案概述
- [image-full] 產品截圖
- [stat-highlight] 成長動能——不可錯過的投影片
- [comparison-table] 與競爭對手比較
- [timeline] 路線圖
- [text-full] 團隊
- [stat-highlight] 市場規模
- [text-left-image-right] 商業模式
- [closing-cta] 請求
銷售簡報（8-10 張投影片）：
- [title-hero]
- [quote-callout] 潛在客戶痛點
- [text-left-image-right] 解決方案
- [image-grid] 產品截圖
- [stat-highlight] ROI／成果——不可錯過
- [comparison-table] 與替代方案比較
- [text-full] 實施／後續步驟
- [closing-cta]
研討會演講（15-20 張投影片）： title-hero → section-dividers → text-full 投影片 → image-full → stat-highlight 或 quote-callout（不可錯過） → timeline → closing-cta
內部簡報（8-12 張投影片）： title-hero → text-full（背景） → stat-highlight（現狀） → two-column-text（選項） → comparison-table → text-full（建議） → closing-cta（決策——不可錯過）
將提議的結構輸出為帶有 [版型] 括號的編號清單。範例：
提議結構（12 張投影片，midnight-editorial 風格）：
1. [title-hero] DataPulse——5 分鐘內做出營收決策
2. [section-divider] 問題
...
12. [closing-cta] 請求 + [email protected]
這個結構可行嗎，還是需要調整任何投影片？
確認後再進入步驟 4。
步驟 4：內容草稿
依序撰寫每張投影片的文案。僅純文字——尚未使用 HTML。
每種版型的文案規則：
title-hero：標題（最多 6 個字） + 副標題（1 句話） + 可選的藥丸標籤文字section-divider：僅 2-4 個字的章節標籤text-full：標題（最多 5 個字） + 4-6 個要點或 2 個段落（同一張投影片上不能同時出現）text-left-image-right／image-left-text-right：標題 + 3-4 個要點 +[IMAGE: 描述]two-column-text：2 個欄位標題 + 各欄最多 3 個要點image-full：[IMAGE: 描述]+ 可選的說明（最多 10 個字）image-grid：最多 6 個[IMAGE: 描述]佔位符，附簡短說明stat-highlight：2-4 個指標，寫成數字 | 標籤（例如3× | 更快成交）。零主體文案。quote-callout：引述（最多 30 個字） + 歸屬（姓名、職稱）comparison-table：欄位標題（最多 3 個） + 4-6 個列標籤 + 儲存格內容（每個 1-3 個字）timeline：3-6 個里程碑（標籤 + 日期 + 1 行描述）closing-cta：標題（最多 5 個字） + CTA 行動文字 + 聯絡資訊（電子郵件 + 網址——兩者皆必填）
禁止使用的詞彙（所有文案中皆不可使用，無例外）： 「強大的」、「無縫的」、「改變遊戲規則的」、「利用」、「創新的」、「革命性的」、「轉型」、「尖端的」、「穩健的」、「解鎖」、「可擴展的」（作為填充形容詞）。
**文案哲學：**碎片化是可接受的。數字優於形容詞。每個字都必須有其存在的價值。
步驟 5：HTML 生成
在生成任何 HTML 之前詳讀所有內容：
此技能的參考資料：
references/design-system.mdreferences/layout-library.mdreferences/style-presets.mdreferences/animation-guide.md
frontend-slides 交叉參考（讀取這些確切檔案）：
/Users/ksd/Desktop/Varnan_skills/frontend-slides/viewport-base.css——將完整內容逐字包含在<style>區塊內/Users/ksd/Desktop/Varnan_skills/frontend-slides/html-template.md——SlidePresentation 類別、鍵盤導航、內嵌編輯系統/Users/ksd/Desktop/Varnan_skills/frontend-slides/animation-patterns.md——入場動畫、背景效果、互動效果
生成規則：
- 單一自包含 HTML。所有 CSS 和 JS 皆內嵌。字型 CDN
<link>是唯一的外部參考。 - 將
viewport-base.css的完整逐字內容包含在<style>區塊內——不要改寫或縮短它。 - 僅使用 Google Fonts 或 Fontshare 的字型。字型選擇來自
references/style-presets.md中選定的預設。 - 使用
html-template.md中的 SlidePresentation 類別。實作完整的鍵盤導航（方向鍵、空白鍵、Page Up/Down）、觸控／滑動、進度條和導覽點。在建構導覽點之前，務必執行navDotsContainer.innerHTML = ""——切勿跳過此步驟。 - 如果選擇內嵌編輯：實作
html-template.md中完整的內嵌編輯系統，包括exportFile()。exportFile()函式在擷取outerHTML之前，必須移除contenteditable、body.edit-active以及.active／.show類別。 - 長寬比：
- 16:9（預設）：投影片使用
width: 100vw; height: 100vh - 1:1（LinkedIn）：新增
--slide-height: min(100vh, 100vw)CSS 自訂屬性，並在.slide上使用它
- 16:9（預設）：投影片使用
- 每個投影片「區段」必須使用
class="slide"——這是 export-pdf.sh 偵測投影片的必要條件。 - 在每個投影片前加入註解：
/* === 投影片 N: 版型類型 === */ - 將步驟 2.5 中的那張「不可錯過的投影片」以最大的視覺份量呈現——最大的字體、最多的動畫、以全力強度使用風格預設的標誌性元素。所有其他投影片在構圖上都更為低調。
- 未提供圖片→使用 CSS 生成的視覺效果（漸層網格、幾何形狀、來自
animation-patterns.md的網格圖案）。這是一個第一等的路徑，而不是備用方案。
字體規範：
- 統計數字：
clamp(3.5rem, 12vw, 9rem)——佔投影片三分之一的指標看起來具有權威性 - 主標題：至少
clamp(2.5rem, 8vw, 6rem)。切勿為了安全而縮小尺寸。 - 在使用者會看到的任何元素上，絕對不要使用固定的 px/rem。全部使用 clamp。
**來自 viewport-base.css 的 CSS 陷阱：**絕對不要在 CSS 中直接編寫 -clamp()、-min()、-max()。如果需要負值，請包裹在 calc(-1 * clamp(...)) 中。
步驟 6：自我品質檢查
檢查每個項目。修正每個失敗——不要跳過。
視埠與渲染：
- 每個
.slide都有height:100vh; height:100dvh; overflow:hidden - 所有字體大小與間距都使用
clamp()——縮放元素上無固定 px - 在 1280×720 視埠下無投影片溢出（根據
layout-library.md的密度限制檢查） - 圖片使用
max-height: min(50vh, 400px) - 存在針對 700px、600px、500px 視埠高度的中斷點（來自 viewport-base.css）
- 存在
prefers-reduced-motion媒體查詢 - CSS 中無
-clamp()、-min()、-max()——如果需要負值，已包裹在calc(-1 * ...)中
結構：
- 投影片數量與步驟 3 的計劃相符
- 每張投影片使用
class="slide" - 每種版型類型根據
references/layout-library.md正確實作 - SlidePresentation 類別存在，並包含鍵盤導航、觸控、進度條、導覽點
- 在建構導覽點之前已執行
navDotsContainer.innerHTML = "" - 如果選擇內嵌編輯：
exportFile()在擷取outerHTML之前會移除編輯狀態
設計品質：
- 那張「不可錯過的投影片」在視覺上佔主導地位——沒有被淹沒在權重相同的投影片中
- 字體層級清晰：展示級 >> 標題 >> 內文（各層級之間至少 2:1 的大小比例）
- 風格預設的標記一致應用（顏色、字型來自
references/style-presets.md） - 無草率模式（根據
references/style-presets.md的「禁止使用」清單檢查）
內容：
- 任何投影片文案中無禁止使用的詞彙
- title-hero 標題為 6 個字或更少
- stat-highlight 中零主體文案與數字競爭
- closing-cta 包含特定的行動 + 聯絡資訊（不只是「謝謝」）
如果任何檢查失敗：當場修正，然後在繼續之前重新執行檢查清單。
步驟 7：輸出
首先儲存主要 HTML：
mkdir -p deck/[name]-slides
寫入：deck/[name]-slides/index.html
開啟它：open deck/[name]-slides/index.html
每張投影片的個別 HTML 檔案（務必生成這些）：
從主要 HTML 中擷取每個 <section class="slide">。針對每個投影片，建立一個獨立的檔案，包含：
- 來自主要 HTML 的完整
<style>區塊（逐字複製） - 包裹在最小 HTML 殼中的個別
<section class="slide"> - 無 SlidePresentation JS（靜態觀看單張投影片，無需導航）
寫入：deck/[name]-slides/slide-001.html、slide-002.html 等。（補零至 3 位數）。
如果要求 PDF：
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/export-pdf.sh \
deck/[name]-slides/index.html \
deck/[name].pdf
注意：首次執行會自動安裝 Playwright（約 30-60 秒）。通知使用者。
如果要求部署：
bash /Users/ksd/Desktop/Varnan_skills/frontend-slides/scripts/deploy.sh \
deck/[name]-slides/
**清理：**如果在步驟 2 中產生了風格預覽檔案，請刪除 .claude-design/previews/。
步驟 8：摘要（對話中無 HTML）
在對話中呈現：
## 投影片組：[簡報名稱]
日期：[今天] | 風格：[風格] | 投影片：[N] | 長寬比：[16:9 或 1:1]
目的：[目的] | 受眾：[受眾]
---
### 檔案
主要： deck/[name]-slides/index.html
每張投影片： deck/[name]-slides/slide-001.html → slide-0NN.html
PDF： deck/[name].pdf [如果已生成]
線上網址： [網址] [如果已部署]
---
### 導航
方向鍵 / 空白鍵 / Page Up/Down —— 前進投影片
點擊導覽點 —— 跳至任何投影片
觸控 / 滑動 —— 可在行動裝置上運作
---
### 自訂
編輯檔案頂部的 :root CSS 變數以更改顏色
更換 @import 字型網址以更改字體
從元素中移除 .reveal 類別以停用入場動畫
---
### 投影片組檢查清單
- [ ] 將 [IMAGE: 描述] 佔位符替換為真實圖片
- [ ] 確認投影片 [N] 上的指標／引述是準確的（那張不可錯過的投影片）
- [ ] 在目標顯示尺寸上測試（[1920×1080 或 1080×1080]）
- [ ] 如果要現場展示：在投影機上測試鍵盤導航
---
### 下一步
- 為所有投影片加入真實圖片
- 如果需要：執行 `deck/[name]-slides/` 以查看更多自訂選項