前端投影片 是做什麼的？
建立零依賴、動畫豐富的 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
- 減少動畫支援
5. 強制視窗適應
將此視為嚴格關卡。
規則：
- 每個
.slide必須使用height: 100vh; height: 100dvh; overflow: hidden; - 所有字型和間距必須使用
clamp()縮放 - 當內容無法容納時，分割成多個投影片
- 絕不透過將文字縮小到無法閱讀的大小來解決溢出問題
- 絕不允許投影片內部出現捲軸
請使用 STYLE_PRESETS.md 中的密度限制和強制 CSS 區塊。
6. 驗證
在以下尺寸檢查完成的投影片組：
- 1920x1080
- 1280x720
- 768x1024
- 375x667
- 667x375
如果瀏覽器自動化工具可用，使用它來驗證沒有投影片溢出，且鍵盤導覽正常運作。
7. 交付
在交接時：
- 刪除暫存預覽檔案，除非使用者希望保留它們
- 在適用的情況下，使用平台合適的開啟器開啟投影片組
- 摘要說明檔案路徑、使用的預設樣式、投影片數量以及易於自訂主題的點
使用目前作業系統的正確開啟器：
- macOS：
open file.html - Linux：
xdg-open file.html - Windows：
start "" file.html
PPT / PPTX 轉換
針對 PowerPoint 轉換：
- 優先使用
python3搭配python-pptx來擷取文字、圖片和備忘稿。 - 如果
python-pptx不可用，詢問使用者是要安裝它，還是改用手動 / 匯出為主的工作流程。 - 保留投影片順序、備忘稿和擷取的素材。
- 擷取後，執行與新簡報相同的樣式選擇工作流程。
保持轉換跨平台。當 Python 可以完成工作時，不要依賴僅限 macOS 的工具。
實作需求
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：如果需要對最終投影片組進行自動化瀏覽器驗證
交付檢查清單
- 簡報可從本機檔案在瀏覽器中執行
- 每個投影片都符合視窗大小，無需捲動
- 風格獨特且有目的性
- 動畫有意義，而非雜亂
- 減少動畫已受尊重
- 交接時說明檔案路徑和自訂點