前端簡報 是做什麼的？
建立零依賴、動畫豐富的 HTML 簡報，完全在瀏覽器中執行。
靈感來自 zarazhangrui 所展示的視覺探索方法（致謝：@zarazhangrui）。
啟用時機
- 建立演講投影片、提案簡報、工作坊教材或內部報告
- 將
.ppt或.pptx投影片轉換為 HTML 簡報 - 改善現有 HTML 簡報的佈局、動畫或排版
- 與尚未確定設計偏好的使用者一起探索簡報風格
不可妥協的事項
- 零依賴：預設為一個自含式 HTML 檔案，內嵌 CSS 與 JS。
- 視窗適配為強制：每張投影片必須完全符合一個視窗高度，不得有內部捲軸。
- 展示而非告知：使用視覺預覽，而非抽象風格問卷。
- 獨特設計：避免通用的紫色漸層、Inter 字體白底、模板式簡報。
- 生產級品質：程式碼需加入註解、具備無障礙性、響應式且效能良好。
產生前，請閱讀 STYLE_PRESETS.md，了解視窗安全 CSS 基礎、密度限制、預設樣式目錄與 CSS 注意事項。
工作流程
1. 偵測模式
選擇一條路徑：
- 新簡報：使用者有主題、筆記或完整草稿
- PPT 轉換：使用者有
.ppt或.pptx檔案 - 增強：使用者已有 HTML 投影片，希望改善
2. 探索內容
僅詢問最低限度的資訊：
- 目的：提案、教學、會議演講、內部更新
- 長度：短（5-10 張）、中（10-20 張）、長（20 張以上）
- 內容狀態：已完成文稿、粗略筆記、僅主題
如果使用者有內容，請他們在設定樣式前貼上內容。
3. 探索風格
預設使用視覺探索。
如果使用者已經知道想要的預設樣式，則跳過預覽，直接使用該樣式。
否則：
- 詢問簡報應營造何種感受：印象深刻、充滿活力、專注、靈感啟發。
- 在
.ecc-design/slide-previews/中產生 3 個單張投影片預覽檔案。 - 每個預覽必須為自含式，清楚展示字體、色彩與動畫，且投影片內容大致少於 100 行。
- 詢問使用者要保留哪個預覽，或要混合哪些元素。
在對應情緒與樣式時，使用 STYLE_PRESETS.md 中的預設樣式指南。
4. 建立簡報
輸出以下任一檔案：
presentation.html[簡報名稱].html
僅在簡報包含擷取或使用者提供的圖片時使用 assets/ 資料夾。
必備結構：
- 語意化的投影片區段
- 來自
STYLE_PRESETS.md的視窗安全 CSS 基礎 - 用於主題值的 CSS 自訂屬性
- 負責鍵盤、滑鼠滾輪與觸控導覽的簡報控制器類別
- 用於觸發顯現動畫的 Intersection Observer
- 支援
prefers-reduced-motion
5. 強制視窗適配
將此視為嚴格門檻。
規則：
- 每個
.slide必須使用height: 100vh; height: 100dvh; overflow: hidden; - 所有字型與間距必須使用
clamp()縮放 - 當內容無法容納時，將其拆分為多張投影片
- 切勿為了適應溢出而將字體縮小到難以閱讀的大小
- 絕不允許投影片內出現捲軸
請使用 STYLE_PRESETS.md 中的密度限制與強制 CSS 區塊。
6. 驗證
在以下尺寸檢查完成的簡報：
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375
如果瀏覽器自動化工具可用，請使用它驗證無投影片溢出，且鍵盤導覽正常運作。
7. 交付
在交接時：
- 刪除暫存預覽檔案（除非使用者希望保留）
- 使用適合平台的開啟指令開啟簡報（若有用）
- 總結檔案路徑、使用的預設樣式、投影片數量與易於自訂主題的點
使用正確的開啟指令（依目前作業系統）：
- macOS：
open 檔案.html - Linux：
xdg-open 檔案.html - Windows：
start "" 檔案.html
PPT / PPTX 轉換
對於 PowerPoint 轉換：
- 優先使用
python3搭配python-pptx來擷取文字、圖片與備註。 - 如果
python-pptx不可用，詢問是否安裝，或改用人工 / 匯出方式的工作流程。 - 保留投影片順序、備忘錄與擷取的素材。
- 擷取完成後，執行與新簡報相同的樣式選擇工作流程。
保持轉換流程跨平台。不要依賴僅限 macOS 的工具，如果 Python 可以完成工作。
實作需求
HTML / CSS
- 除非使用者明確要求多檔案專案，否則使用內嵌 CSS 與 JS。
- 字型可來自 Google Fonts 或 Fontshare。
- 偏好氛圍背景、強烈的字型層級結構與清晰的視覺方向。
- 使用抽象形狀、漸層、網格、噪點與幾何圖形，而非插圖。
JavaScript
包含：
- 鍵盤導覽
- 觸控 / 滑動導覽
- 滑鼠滾輪導覽
- 進度指示器或投影片編號
- 進入時觸發動畫的觸發器
無障礙性
- 使用語意化結構（
main、section、nav） - 保持對比度可讀
- 支援僅鍵盤導覽
- 尊重
prefers-reduced-motion
內容密度限制
除非使用者明確要求更密集的投影片且可讀性仍成立，否則使用以下上限：
| 投影片類型 | 限制 |
|---|---|
| 標題 | 1 個標題 + 1 個副標題 + 可選標語 |
| 內容 | 1 個標題 + 4-6 個項目或 2 個短段落 |
| 功能網格 | 最多 6 張卡片 |
| 程式碼 | 最多 8-10 行 |
| 引言 | 1 段引言 + 出處 |
| 圖片 | 1 張圖片，受限於視窗範圍 |
反模式
- 沒有視覺識別的通用新創漸層
- 非刻意編輯用途的系統字型簡報
- 長篇條列式文字牆
- 需要捲動的程式碼區塊
- 會在短螢幕上溢位的固定高度內容區塊
- 無效的否定 CSS 函式，例如
-clamp(...)
相關 ECC 技能
frontend-patterns：用於簡報周圍的元件與互動模式liquid-glass-design：當簡報刻意採用 Apple 玻璃美學時使用e2e-testing：如果需要自動化瀏覽器驗證最終簡報
交付檢查清單
- 簡報可在瀏覽器中從本機檔案執行
- 每張投影片都符合視窗大小，無需捲動
- 風格獨特且具有意圖
- 動畫有意義，不嘈雜
- 尊重減少動畫設定
- 在交接時說明檔案路徑與自訂點