記住一定要使用Webpage 來生成，必須詢問使用者用什麼語言輸出。

產生"電子雜誌× 電子墨水"風格的橫向翻頁網頁PPT（單HTML 檔案），含WebGL 流體背景、襯線標題+ 非襯線正文、章節幕封、資料大字報、圖片網格等範本。當使用者需要製作分享/ 演講/ 發表會風格的網頁PPT，或提到"雜誌風PPT"、"horizo​​ntal swipe deck"、"editorial magazine"、"e-ink presentation"時使用

# Magazine Web Ppt

## 這個Skill 做什麼

產生一份**單一檔案HTML**的橫向翻頁PPT，視覺基調是：

- **電子雜誌+ 電子墨水**混合風格

- **WebGL 流體/ 等高線/ 色散背景**（hero 頁可見）

- **襯線標題（Noto Serif SC + Playfair Display）+ 非襯線正文（Noto Sans SC + Inter）+ 等寬元素資料（IBM Plex Mono）**

- **Lucide 線性圖示**（不用emoji）

- **橫向左右翻頁**（鍵盤← →、滾輪、觸控螢幕滑動、底部圓點、ESC 索引）

- **主題平滑插值**：翻到hero 頁時顏色和shader 柔順過渡

這個skill 的美學不是"商務PPT"，也不是"消費互聯網UI"——它像*Monocle* 雜誌貼上了代碼後的樣子。

## 何時使用

**合適的場景**：

- 線下分享/ 業界內部演講/ 私享會

- AI 新產品發布/ demo day

- 帶有強烈個人風格的演講

- 需要"一次做完，不用翻頁工具"的網頁版slides

**不合適的場景**：

- 大段表格資料、圖表疊加（用常規PPT）

- 訓練課件（資訊密度不夠）

- 需要多人協作編輯（這是靜態HTML）

### Step 1 · 需求澄清(**動手前必做**)

**如果使用者已經給了完整的大綱+ 圖片**,可以跳過直接進Step 2。

**如果使用者只給了主題或一個模糊想法**,用這6 個問題逐個對齊後再動手。不要基於猜測就開始寫slide－一旦結構定錯,後期翻修代價很高: 提問時你可以用askUserQuestion tool

#### 6 問澄清清單

| # | 問題| 為什麼要問|

|---|------|-----------|

| 1 | **受眾是誰?分享場景?**(行業內部/ 商業發布/ demo day / 私享會) | 決定語言風格和深度|

| 2 | **分享長度?** | 15 分鐘≈ 10 頁,30 分鐘≈ 20 頁,45 分鐘≈ 25-30 頁|

| 3 | **有沒有原始素材?**(文檔/ 資料/ 舊PPT / 文章連結) | 有素材就基於素材,沒有就幫他搭|

| 4 | **有沒有圖片?放在哪裡?** | 詳見下方"圖片約定" |

| 5 | **想要哪套主題色?** | 見@themes.md ,5 套預設挑一|

| 6 | **有沒有硬約束?**(必須包含XX 資料/ 不能出現YY) | 避免返工|

#### 大綱協助(如果使用者沒有大綱)

用"敘事弧"模板搭骨架,再填內容:

```

鉤子(Hook) → 1 頁: 拋出一個反差/ 問題/ 硬數據讓人停下來

定調(Context) → 1-2 頁: 說明背景/ 你是誰/ 為什麼要講這個

主體(Core) → 3-5 頁: 核心內容,用Layout 4/5/6/9/10 穿插

轉折(Shift) → 1 頁: 打破預期/ 提出新觀點

收束(Takeaway) → 1-2 頁: 金句/ 懸念問題/ 行動建議

```

敘事弧+ 頁數規劃+ 主題節奏表(見@layouts.md ),**三張表對齊後**再進Step 2。

大綱建議儲存為`項目記錄` 或`大綱-v1`,便於後續迭代。

#### 圖片約定(告知使用者)

在動手之前向用戶說清:

- **圖片位置**: 是board 中的哪張圖片，或是上傳的哪張圖片

- **沒圖怎麼辦**:和使用者對齊,可以先用佔位色塊生成結構,等圖片後期補;但要告知layout 4/5/10 等圖文混排頁沒圖就沒法驗證視覺效果

### Step 2 · 參考模板

@template.txt是一個**完整可運行**的html 檔案－CSS、WebGL shader、翻頁JS、字體/圖示CDN 全已預設好，只有`<main id="deck">` 裡面是3 個範例slide（封面、章節幕封、空白填頁）

#### 2.1 · 必改佔位符（**容易漏**）

拷貝後立刻改掉以下佔位符，否則瀏覽器Tab 會顯示"[必填] 替換為PPT 標題"這種尷尬文字：

| 位置| 原| 需改為|

|------|------|--------|

| `<title>` | `[必填] 替換為PPT 標題· Deck Title` | 實際deck 標題(如`一種新的工作方式· Luke Wroblewski`) |

#### 2.2 · 選取主題色(5 套預設· 不允許自訂)

本skill **只允許從5 套精心調配的預設裡選一套**,不接受用戶自訂hex 值－顏色搭配錯了畫面瞬間變醜,保護美學比給自由更重要。

| # | 主題| 適合|

|---|------|------|

| 1 | 🖋 墨水經典| 通用/ 商業發布/ 不知道選啥的預設|

| 2 | 🌊 靛藍瓷| 科技/ 研究/ 數據/ 技術發布會|

| 3 | 🌿 森林墨| 自然/ 永續/ 文化/ 非虛構|

| 4 | 🍂 牛皮紙| 懷舊/ 人文/ 文學/ 獨立雜誌|

| 5 | 🌙 沙丘| 藝術/ 設計/ 創意/ 畫廊|

**操作**:

1. 基於內容主題推薦一套,或直接問用戶選哪一套

2. 開啟@themes.md ,找到對應主題的`:root` 區塊

3. **整體替換** @template.txt開頭`:root{` 區塊裡標示"主題色"註解的那幾行(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint)

4. 其他CSS 都走`var(--...)`,無需任何其他改動

**硬規則**:

- 一份deck 只用一套主題,不要中途換色

- 不要接受用戶給的任意hex 值－委婉拒絕並展示5 套讓選

- 不要混搭(例如ink 取墨水經典、paper 取沙丘)——會徹底違和

### Step 3 · 填充內容

#### 3.0 · 預檢:類別名稱必須在@template.txt裡有定義（**最重要**）

**這是所有生成問題的源頭**。 @layouts.md的骨架使用了許多類別名稱(`h-hero` / `h-xl` / `stat-card` / `pipeline` / `grid-2-7-5` 等),如果`assets/template.html` 的`<style>` 裡沒有對應定義,瀏覽器會變成大字頭樣式一檔標題、下段式資料框糊成一行、圖片堆到頁面底部。

**在寫任何slide 程式碼之前:**

1. **先Read @template.txt **(至少讀到`<style>` 區塊結尾)

2. **對照@layouts.md的Pre-flight 列表**,確認你要用的每個類別都在`<style>` 裡存在

3. 如果某個類別缺失:**在@template.txt的`<style>` 裡補上**,不要在每個slide 裡inline 重寫

4. ** @template.txt是唯一的類別名稱來源**—不要發明新類別名稱,如需自訂用`style="..."` inline

常見容易遺漏的類別(必須預先確認存在):

`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` / `kicker` / `meta-row` / `stat-card` / `stat-label` / `stat-nb` / `stat-unp-`p. `pipeline-label` / `pipeline` / `step` / `step-nb` / `step-title` / `step-desc` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-7-5` / `grid-2-6-6` / `grid-2-8-4` /( `grid-3` / `grid-4` / `frame` / `frame-img` / `img-cap` / `callout` / `callout-src` / `chrome` / `foot`chrome

#### 3.0.5 · 規劃主題節奏（**和類別預檢同等重要**)

**在挑選佈局之前**,必須先列出每一頁的主題class(`hero dark` / `hero light` / `light` / `dark`)並寫到文檔或草稿裡對齊。詳細規則看@layouts.md開頭的"主題節奏規劃"一節。

**強制規則**:

- 每頁section 必須帶`light` / `dark` / `hero light` / `hero dark` 之一,不要只寫`hero`

- 連續3 頁以上同主題= 視覺疲勞,不允許

- 8 頁以上必有≥1 個`hero dark` + ≥1 個`hero light`

- 整個deck 不能只有`light` 正文頁,必須有`dark` 正文頁製造呼吸

- 每3-4 頁插入1 個hero 頁(封面/幕封/問題/大引用)

**產生後自檢**:`grep 'class="slide' index.html` 列出所有主題,人工確認節奏合理再交付。

#### 3.1 · 挑佈局

**不要從零寫slide**。打開@layouts.md ,裡面有10 種現成佈局骨架,每種都是完整可貼上的`<section>` 程式碼區塊:

| Layout | 用途|

|---|---|

| 1. 開場封面| 第1 頁|

| 2. 章節幕封| 每幕開場|

| 3. 資料大字報| 拋硬資料|

| 4. 左文右圖(Quote + Image) | 認同反差/ 故事|

| 5. 圖片網格| 多圖對比/ 截圖實證|

| 6. 兩列管線(Pipeline) | 工作流程|

| 7. 懸念收束/ 問題頁| 幕末/ 收尾|

| 8. 大引用頁(Big Quote) | 襯線金句/ takeaway |

| 9. 並列比較(Before / After) | 舊模式vs 新模式|

| 10. 圖文混排(Lead Image + Side Text) | 資訊密集的圖文頁|

選對應layout,黏過去,改文案和圖片路徑即可。 **務必先完成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`**——會滑到cell 底被瀏覽器工具列遮擋。用grid 容器+ `align-items:start`(template 已預設)讓圖片貼頂即可;左列若想貼底,用flex column + `justify-content:space-between`。

組件細節(字體、顏色、網格、圖示、callout、stat-card 等)在@components.md 。

### Step 4 · 對照檢查清單自我檢測

生成完一定要打開@checklist.md ，逐項對照。裡面總結了**真實迭代過程中踩過的所有坑**，P0 等級的問題（emoji、圖片撐破、標題換行、字體分工）必須全部通過。

特別要注意的幾條：

1. **大標題必須是襯線字體**——如果顯示成非襯線,99% 是Step 3.0 預檢沒做,`h-hero` 類別在template.html 裡缺失

2. **圖片格裡只用`height:Nvh`,不用`aspect-ratio`**(會撐破)

3. **圖片不能堆在頁面底部**——不要用`align-self:end`,用grid + `align-items:start`(見Step 3.2)

4. **圖片只能用標準比例**(16:10 / 4:3 / 3:2 / 1:1 / 16:9),不要複製原圖的奇葩比例

5. **中文大標題≤ 5 字且`nowrap`**(避免1 字1 行)

6. **用Lucide,不用emoji**

7. **標題用襯線,正文用非襯線,元資料用等寬**

### Step 5 · 迭代

根據使用者回饋修改－模板的CSS 已高度參數化，90% 的調整都是改inline style（字號`font-size:Xvw` / 高度`height:Yvh` / 間距`gap:Zvh`）。

## 核心設計原則（哲學）

> 這些原則是"一人公司"分享PPT 的5 輪迭代總結出來的。違反其中任何一條，視覺感都會垮。

1. **克制優於炫技** — WebGL 背景只在hero 頁透出，普通頁幾乎看不見

2. **結構優於裝飾** — 不用陰影、不用浮動卡片、不用padding box，一切資訊都靠著**大字號+ 字體比較+ 網格留白**

3. **內容層級由字號和字體共同定義** — 最大襯線= 主標題，中襯線= 副標，大非襯線= lead，小非襯線= body，等寬= 元數據

4. **圖片是第一公民** — 圖片只裁底部，保證頂部和左右完整；網格用`height:Nvh` 固定，不要用`aspect-ratio` 撐

5. **節奏靠hero 頁** — hero 和non-hero 交替，才不累眼睛

6. **術語統一** — Skills 就是Skills，不要中英混合翻譯

## 參考作品

本skill 的視覺基調參考了：

- 歸藏"一人公司：被AI 折疊的組織" 分享（2026-04-22，27 頁）

- *Monocle* 雜誌的版式

- YC 總裁Garry Tan "Thin Harness, Fat Skills" 那篇部落格的demo

可以把它們當作風格錨點。