Magazine Web Ppt
這個技能的作用
生成一個單文件 HTML 的水平滑動式簡報，其視覺風格為：
- 電子雜誌 + 電子墨水的混合風格
- 帶有 WebGL 流體 / 輪廓 / 分散背景（在首頁頁面可見）
- 襯線標題 (Noto Serif SC + Playfair Display) + 無襯線內文 (Noto Sans SC + Inter) + 等寬元數據 (IBM Plex Mono)
- 使用 Lucide 線性圖示（無 emoji）
- 水平左右翻頁（鍵盤 ← →、滾輪、觸控滑動、底部圓點、ESC 目錄）
- 流暢的主題插值：翻到首頁頁面時，顏色和著色器會柔和過渡
這個技能的美學不是「企業 PPT」，也不是「消費網路 UI」：它看起來像是 Monocle 雜誌被縫上了程式碼。
何時使用
適合的場景：
- 離線演講 / 內部產業分享 / 私人沙龍
- AI 新產品發布 / 展示日
- 個人風格強烈的演講
- 想要「一次製作，無需簡報工具」的網頁版投影片
不適合的場景：
- 大量的表格資料、堆疊圖表（請使用一般 PPT）
- 培訓教材（資訊密度過低）
- 多人協作編輯（此為靜態 HTML）
工作流程
步驟 0 · 推斷方向；僅在要求比較時提問
從簡報、聽眾、內容和已知脈絡中推斷五種雜誌方向之一。每個方向都包含其主題顏色、推薦版面、邊框風格和投影片數量。選擇最接近的方向並繼續，無需提問。
僅當使用者明確要求查看或比較方向選項時，才開啟 references/styles.md，並以 direction-cards 問答形式呈現各方向的單行摘要：
1. Monocle Editorial · 國際雜誌風格 ✦ 預設
2. WIRED Tech · 數據 + 工程
3. Kinfolk Slow · 慢生活 / 人文主義
4. Domus Architectural · 建築 / 空間感
5. Lab / Reference · 學術 + 工藝手冊
如果使用者說「我不知道，你推薦」或未提供方向線索：預設為 Monocle Editorial，無需詢問，因為其失敗機率最低。如果使用者提到「AI / 基準 / 技術發布」：選擇 WIRED；「閱讀 / 私人 / 社交圈」：選擇 Kinfolk；「設計 / 建築 / 作品集」：選擇 Domus；「研究 / 學術 / 方法論」：選擇 Lab。
選擇方向後，在專案資料夾中建立或更新 項目記錄.md，第一行清晰標明方向 + 主題顏色 + 聽眾 + 時長（參見 styles.md 末尾的範本）。在任何時候都不要改變方向：中途切換 = 前功盡棄。
步驟 1 · 釐清意圖
如果使用者已經提供了完整的大綱和圖片，可以直接跳到步驟 2。
從簡報、專案元數據、提供的內容和對話中推斷以下清單。如果缺失的答案會實質性地改變簡報且沒有安全的預設值，則僅在一次合併的問答中詢問這些未解決的欄位。不要逐項詢問清單。
6 項釐清問題清單
除非使用者明確要求比較選項，否則方向和主題顏色將在步驟 0 中推斷。
| # | 問題 | 為何詢問 |
|---|---|---|
| 1 | 聽眾是誰？分享場景？（內部產業 / 商業發布 / 展示日 / 私人沙龍） | 決定語言風格和深度 |
| 2 | 演講時長？ | 15 分鐘 ≈ 10 頁，30 分鐘 ≈ 20 頁，45 分鐘 ≈ 25-30 頁（參見 styles.md 中各方向的建議範圍） |
| 3 | 有任何來源資料嗎？（文件 / 數據 / 舊 PPT / 文章連結） | 有資料則基於它構建；沒有則協助建立 |
| 4 | 有任何圖片嗎？它們在哪裡？ | 參見下方的「圖片慣例」 |
| 5 | ✓ 已在步驟 0 由方向決定 | |
| 6 | 有任何硬性限制嗎？（必須包含 XX 數據 / 不能顯示 YY） | 避免返工 |
大綱協助（如果使用者沒有大綱）
使用「敘事弧線」範本構建骨架，然後填充內容：
鉤子 → 1 頁 ：拋出一個對比 / 問題 / 硬數字，讓人們停下思考
脈絡 → 1-2 頁 ：解釋背景 / 你是誰 / 為什麼談這個主題
核心 → 3-5 頁 ：核心內容，交錯使用版面 4/5/6/9/10
轉折 → 1 頁 ：打破預期 / 提出新觀點
要點 → 1-2 頁 ：扣人心弦的結論 / 一個懸念問題 / 行動呼籲
敘事弧線 + 頁數計劃 + 主題節奏表（參見 layouts.md）；在進入步驟 2 之前，先對齊這三個表格。
最好將大綱儲存為 項目記錄.md 或 大綱-v1.md，以便後續疊代。
圖片慣例（告知使用者）
在開始前向使用者說明以下幾點：
- 資料夾位置：在
項目/XXX/ppt/images/下（與index.html同級） - 命名慣例：
{頁碼}-{語義}.{副檔名}，例如01-cover.jpg/03-figma.jpg/05-dashboard.png- 頁碼補零以便排序
- 語義部分使用英文，簡短、具體、與內容匹配
- 規格建議：
- 每張圖片寬度 ≥ 1600px（避免在大螢幕上模糊）
- 照片/截圖使用 JPG，透明 UI/圖表使用 PNG
- 總大小保持在 10MB 以下（影響翻頁流暢度）
- 如何替換：同名覆蓋最穩定（無需更改 HTML 中的路徑）；如果檔案名稱更改，請記住全域搜尋
images/oldname並更改為新名稱 - 如果沒有圖片怎麼辦：與使用者溝通；可以先使用佔位色塊生成結構，後續再填充圖片，但告知他們像版面 4/5/10 這樣的圖文混合頁面，如果沒有圖片就無法驗證其視覺效果
步驟 2 · 複製模板
將 assets/template.html 複製到目標位置（通常是 項目/XXX/ppt/index.html），並建立一個 images/ 資料夾作為同級目錄，準備接收圖片。
mkdir -p "項目/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "項目/XXX/ppt/index.html"
template.html 是一個完整、可執行的檔案：CSS、WebGL 著色器、翻頁 JS、字型/圖示 CDN 均已預設；僅在 <main id="deck"> 內有 3 個範例投影片（封面、章節分隔頁、空白填充頁）。
2.1 · 你必須更改的佔位符（容易被遺漏）
複製後立即更改以下佔位符，否則瀏覽器分頁會顯示像「[必填] 替換為 PPT 標題」這樣尷尬的文字：
| 位置 | 原始內容 | 更改為 |
|---|---|---|
<title> | [必填] 替換為 PPT 標題 · Deck Title | 實際的簡報標題（例如 一種新的工作方式 · Luke Wroblewski） |
每次完成複製 template.html 後要做的第一件事：grep 搜尋「[必填]」以確認所有內容都已替換。
2.2 · 選擇主題顏色（5 個預設 · 不允許自訂）
此技能僅允許從 5 個精心調校的預設主題中選擇；不接受使用者自訂的十六進位色碼：錯誤的顏色搭配會立即破壞視覺效果，保護美學比提供自由度更重要。
| # | 主題 | 最適合 |
|---|---|---|
| 1 | 🖋 Ink Classic | 一般 / 商業發布 / 不知道選什麼時的預設選項 |
| 2 | 🌊 Indigo Porcelain | 科技 / 研究 / 數據 / 技術主題演講 |
| 3 | 🌿 Forest Ink | 自然 / 永續性 / 文化 / 非虛構作品 |
| 4 | 🍂 Kraft Paper | 懷舊 / 人文主義 / 文學 / 獨立雜誌 |
| 5 | 🌙 Dune | 藝術 / 設計 / 創意 / 畫廊 |
如何操作：
- 根據內容主題推薦一個，或直接詢問使用者選擇哪一個
- 開啟
references/themes.md，找到對應主題的:root區塊 - 整體替換
assets/template.html（已複製的版本）開頭:root{區塊中標記有「theme color」註解的行：--ink/--ink-rgb/--paper/--paper-rgb/--paper-tint/--ink-tint - 所有其他 CSS 都透過
var(--...)流式傳遞，無需其他更改
嚴格規則：
- 一個簡報只能使用一個主題，不要中途更改顏色
- 不接受使用者提供的任意十六進位碼：溫和地拒絕並顯示 5 個預設主題供其選擇
- 不要混搭（例如從 Ink Classic 拿墨水色，從 Dune 拿紙張色）：這會完全衝突
步驟 3 · 填充內容
3.0 · 預檢查：類別名稱必須在 template.html 中定義（最重要）
這是所有生成問題的根源。layouts.md 的骨架使用了許多類別名稱（h-hero / h-xl / stat-card / pipeline / grid-2-7-5 等）；如果 assets/template.html 的 <style> 中沒有對應的定義，瀏覽器會回退到預設樣式：大標題變為無襯線，數據卡片擠成一團，流程圖變成一行，圖片堆疊在頁面底部。
在編寫任何投影片程式碼之前：
- 先閱讀
assets/template.html（至少讀完<style>區塊） - 對照 layouts.md 的預檢清單，確認你將要使用的每個類別都存在於
<style>中 - 如果某個類別缺失：將其添加到 template.html 的
<style>中，不要在每個投影片上重寫內聯樣式 - template.html 是類別名稱的唯一來源：不要發明新的類別名稱；如果需要自訂，請使用
style="..."內聯樣式
常見遺漏的類別（必須事先確認存在）：
h-hero / h-xl / h-sub / h-md / lead / kicker / meta-row / stat-card / stat-label / stat-nb / stat-unit / stat-note / pipeline-section / pipeline-label / pipeline / step / step-nb / step-title / step-desc / grid-2-7-5 / grid-2-6-6 / grid-2-8-4 / grid-3-3 / grid-6 / grid-3 / grid-4 / frame / frame-img / img-cap / callout / callout-src / chrome / foot
3.0.5 · 規劃主題節奏（與類別預檢查同樣重要）
在選擇版面之前，你必須先列出每個頁面的主題類別（hero dark / hero light / light / dark），並將其寫入文件或草稿以進行對齊。詳細規則請參閱 references/layouts.md 頂部的「主題節奏規劃」章節。
強制規則：
- 每個頁面部份都必須帶有
light/dark/hero light/hero dark其中之一；不要只寫hero - 連續 3 個以上頁面使用相同主題 = 視覺疲勞，不允許
- 8 頁以上必須至少有 ≥1 個
hero dark+ ≥1 個hero light - 整個簡報不能只有
light內容頁面；必須有一個dark內容頁面來製造呼吸空間 - 每 3-4 頁插入 1 個首頁頁面（封面/分隔頁/問題/大引言）
生成後的自檢：使用 grep 'class="slide' index.html 列出所有主題；在交付前手動確認節奏是合理的。
3.1 · 選擇版面
不要從頭編寫投影片。開啟 references/layouts.md；它有 10 個現成的版面骨架，每個都是一個完整、可直接粘貼的 <section> 程式碼區塊：
| 版面 | 用途 |
|---|---|
| 1. 封面 | 第 1 頁 |
| 2. 章節分隔頁 | 每個章節的開頭 |
| 3. 大數字 | 拋出硬數據 |
| 4. 主圖 + 文字（引言 + 圖片） | 身分對比 / 故事 |
| 5. 圖片網格 | 多圖比較 / 截圖證據 |
| 6. 雙欄流程圖（Pipeline） | 工作流程 |
| 7. 懸念結尾 / 問題頁 | 章節結尾 / 總結 |
| 8. 大引言頁（Big Quote） | 襯線重點 / 要點 |
| 9. 並排比較（Before / After） | 舊模型 vs 新模型 |
| 10. 圖文混合（主圖 + 側邊文字） | 資訊密集的圖文頁 |
選擇對應的版面，粘貼進去，更改文案和圖片路徑。務必先完成 3.0 的預檢查。
3.2 · 圖片比例規則
始終使用標準比例，切勿使用來源圖片的奇怪比例（例如 2592/1798）：
| 場景 | 建議比例 |
|---|---|
| 主圖 + 文字，主要圖片 | 16:10 或 4:3 + max-height:56vh |
| 圖片網格（多圖比較） | 固定 height:26vh，而不是 aspect-ratio |
| 左側小圖 + 右側文字 | 1:1 或 3:2 |
| 全螢幕首頁視覺 | 16:9 + max-height:64vh |
| 圖文混合，小型嵌入圖 | 3:2 或 3:4 |
永遠不要在圖片上使用 align-self:end：它會滑到儲存格底部，被瀏覽器工具列隱藏。使用網格容器 + align-items:start（已在模板中預設），使圖片貼頂；如果你想讓左欄貼底，請使用 flex column + justify-content:space-between。
元件細節（字型、顏色、網格、圖示、callout、stat-card 等）在 references/components.md 中。
步驟 4 · 對照檢查清單進行自檢
生成後，始終開啟 references/checklist.md 並逐項檢查。它總結了實際疊代過程中踩過的所有坑；P0 級別的問題（emoji、圖片溢出、標題換行、字型分工）必須全部通過。
特別需要注意的幾點：
- 大標題必須是襯線字體：如果顯示為無襯線，99% 的情況是沒有執行步驟 3.0 的預檢查，且
h-hero類別在 template.html 中缺失 - 在圖片網格中只使用
height:Nvh，不要使用aspect-ratio（它會溢出） - 圖片不得堆疊在頁面底部：不要使用
align-self:end，使用網格 +align-items:start（參見步驟 3.2） - 圖片只能使用標準比例（16:10 / 4:3 / 3:2 / 1:1 / 16:9），不要複製來源圖片的奇怪比例
- 中文大標題 ≤ 5 個字元並使用
nowrap（避免一個字元一行） - 使用 Lucide 圖示，不要用 emoji
- 標題用襯線字體，內文用無襯線字體，元數據用等寬字體
步驟 5 · 本地預覽
直接在瀏覽器中開啟 index.html。在 macOS 上：
open "項目/XXX/ppt/index.html"
無需本地伺服器。圖片使用相對路徑 images/xxx.png。
步驟 6 · 疊代
根據使用者回饋進行修改：模板的 CSS 高度參數化，90% 的調整只需更改 --ink、--ink-rgb、--paper、--paper-rgb、--paper-tint 和 --ink-tint 這幾個 CSS 變數，或調整文字長度。
使用 项目记录.md 追蹤所有疊代：每次更改時更新「更改日誌」章節，記錄使用者要求、作法及原因。