Azdmjiny/html-ppt-creator

HTML PPT Creator

建立一份清晰、視覺上有意圖的 HTML 幻燈片簡報，可直接在瀏覽器中開啟。預設生成單一自含的 presentation.html 檔案，內含內嵌 CSS 與 JavaScript，無需建置步驟。

工作流程

1. 檢查使用者的需求說明、來源文字、資料、品牌素材以及要求的輸出位置。
2. 針對遺漏的細節推斷合理的預設值。僅在受眾、目的、語言、幻燈片數量或視覺方向會實質影響結果且無法推斷時，才提出問題。
3. 設計簡潔的幻燈片序列。每張投影片只承載一個任務，並給予有用的標題；在開始編碼前移除重複內容。
4. 選擇符合主題的視覺系統。定義 CSS 自訂屬性來管理顏色、字體、間距、邊框、陰影與動畫，然後一致地使用它們。
5. 從頭開始建立時，複製 assets/starter.html 作為基礎。取代所有範例投影片與主題代號，不要將範例樣式視為強制主題。
6. 實作完整簡報。使用語意化的 <section class="slide"> 元素、固定 16:9 比例且會縮放至視窗大小的舞台，以及鍵盤/點擊/觸控導覽。
7. 在最終品質檢查前閱讀 references/QUALITY.md。當瀏覽器控制可用時，在瀏覽器中開啟簡報，檢查每張投影片，修正溢出與互動缺陷，然後交付 HTML 檔案。

除非使用者要求迭代工作流程，否則不要引入規劃檢查點或要求逐章核准。

輸出合約

• 預設產生 presentation.html。僅在使用者要求或簡報確實需要可重複使用的本地素材或大量應用邏輯時，才使用多檔案資料夾。
• 讓預設簡報具備離線能力：內嵌 CSS 與 JavaScript；使用本地或內嵌的圖片與字型。除非使用者同意，否則避免使用 CDN 依賴。
• 保留提供的 facts、措辭限制、引用、標誌與品牌規則。切勿虛構統計數據或來源。
• 在適當時包含標題投影片、連貫的內文以及有目的的結尾投影片；當要求的格式另有規定時，不要強制添加。
• 支援 ArrowLeft、ArrowRight、Space、PageUp、PageDown、Home 和 End 鍵；支援點擊/觸控導覽以及觸控滑動。使用 F 鍵切換全螢幕。
• 顯示淡出的幻燈片計數器或進度指示器。讓控制項在視覺上保持低調且不影響簡報。
• 加入列印用 CSS，使每張投影片以橫向 A4 紙張大小列印，並隱藏裝飾性控制項。
• 尊重 prefers-reduced-motion。謹慎使用動畫，切勿依賴動畫來揭示重要資訊。
• 除非明確要求，否則不要加入演講者備註、旁白腳本、音訊、自動播放、錄製輔助工具、影片時間軸或 TTS 基礎架構。

內容與視覺規則

• 每張投影片只提出一個主要主張。優先使用 3-6 個簡潔的支援項目，而非段落。
• 根據關係類型選擇正確的視覺形式：比較、流程、時間軸、層級結構、指標、引用、圖片、圖表或示意圖。
• 優先使用真實內容、簡單的 SVG、CSS 示意圖與有意義的圖表，而非裝飾性填充。
• 維持強大的層級結構與充足的留白。設計供遠距離觀看，而非文件閱讀。
• 在整個簡報中保持連貫的主題，同時允許版面變化。避免讓每張投影片都變成相同的圓角卡片網格。
• 避免通用的 AI 風格：無謂的紫色漸層、過度的發光、隨機的玻璃面板、表情符號裝飾、假的應用程式介面，以及沒有資料的裝飾性圖表。
• 確保文字對比度、可見的焦點狀態、有用的替代文字以及合理的 DOM 閱讀順序。
• 如果內容無法容納，請縮短內容或拆分投影片。不要將內文文字縮小到技術上可容納的程度。

編輯現有簡報

除非使用者要求重新設計，否則保留目前的架構與設計語言。進行最小的一致變更，然後重新檢查導覽、投影片編號、溢出、列印版面與響應式縮放。

完成檢查

在報告完成之前：

1. 驗證要求的訊息、數字、引用與投影片順序。
2. 測試第一/最後投影片邊界以及每種導覽方式。
3. 以 16:9 桌面尺寸以及至少一種較小視窗尺寸檢查所有投影片。
4. 檢查是否有文字被裁剪、元素重疊、字型過小、媒體損壞、主控台錯誤以及意外滾動。
5. 確認檔案無需建置步驟即可開啟，且在未經批准外部依賴的情況下仍可離線使用。
6. 在交付結果前修正所有問題。