技能概述
Open Design Landing Deck 係 Open Design Landing 嘅姊妹技能，同樣採用 Atelier Zero 視覺系統（暖色紙張、Inter Tight + Playfair Display、italic serif 強調、珊瑚色點），但改用水平雜誌式 swipe 分頁代替長滾動頁面。
導航模型借用自 guizang-ppt：←/→ 箭頭鍵、滾輪、滑動、ESC 概覽網格。感覺好似翻閱印刷雜誌，多過傳統滾動式 slide deck。支持 6-15 張視口鎖定的幻燈片，8-15 張係最佳範圍。
觸發關鍵字
- slide deck、演示文稿、pitch deck、keynote、editorial slides、atelier zero deck、open design deck、open design landing deck
什麼時候用
- 創始人 pitch（投資人、合作夥伴）
- 會議演講 / conference talk
- 內部 review / quarterly update
- 需要 editorial / restrained / premium 感覺嘅品牌 deck
使用方法
自然語言觸發
Build me an 11-slide pitch deck for "Lumen Field"
整一個 Atelier Zero 風格嘅 slide deck
Editorial pitch deck, 8-12 slides, coral accent
工作流程
Step 1 — 編寫 inputs.json
從 inputs.example.json 開始。如果已經填過 open-design-landing 簡報，直接 copy brand 同 imagery 過來。每張幻燈片選一種 kind 並填入對應字段。
Step 2 —（可選）生成或佔位圖片 複用姊妹技能嘅 16-slot 圖片庫，無需重複資產。
Step 3 — 組合 Deck
npx tsx scripts/compose.ts inputs.json out/index.html
Composer 讀取 inputs.json，加載 Atelier Zero stylesheet，疊加 deck-specific 規則，輸出單一自包含 HTML。
幻燈片類型
| 類型 | 用途 |
|---|---|
cover |
標題頁，2 欄文案 + 拼貼藝術 |
section |
羅馬數字章節分隔，全頁居中 |
content |
Eyebrow + 標題 + 正文 + bullets + 可選拼貼 |
stats |
最多 4 個大數字單元格 |
quote |
Pull quote + 作者，可選肖像拼貼 |
cta |
結尾推介 + 1-2 個按鈕 |
end |
Mega italic-serif kicker + 簽名 footer |
典型 11-slide pitch：
- cover → 2. section (I) → 3. content (about) → 4. content (capabilities) → 5. stats → 6. section (II) → 7. content (method) → 8. content (work) → 9. quote → 10. cta → 11. end
輸出格式
單文件 HTML Deck：
- N 張視口大小幻燈片，水平排列於 flex track
- 鍵盤導航：
←/→、↑/↓、PageUp/PageDown、Space、Home/End - 滾輪 + 觸摸滑動（帶 momentum guard 防 overshoot）
- 每頁 chrome strip：brand mark、deck title、location、羅馬數字年份、slide counter（
01 / 11） - 珊瑚色進度條 + dot indicator strip（可點擊跳轉）
- ESC 概覽網格：縮略圖預覽，點擊跳轉
- 復用姊妹技能嘅 16-slot 圖片庫
設計要點
| 元素 | 規格 |
|---|---|
| 視覺系統 | Atelier Zero（暖色紙張、Inter Tight + Playfair Display） |
| 導航 | 水平 swipe + 鍵盤 + 滾輪 + 觸摸 |
| Chrome strip | 每頁頂部：brand mark + title + counter |
| 進度條 | 珊瑚色，隨前進填充 |
| ESC 網格 | 所有幻燈片縮略圖 |
| 響應式 | 1080px / 640px 單列堆疊 |
視覺規則
- 複用姊妹技能嘅 stylesheet — 從
../open-design-landing/styles.css讀取，唔好維護副本 - 複用姊妹技能嘅圖片庫 — 同一套 16 張拼貼，唔好重新生成
- 每張幻燈片單一視口 — 100vh × 100vw 內放得落，超出就拆分
- 唔好切換垂直 scroll-snap — 水平 swipe 先係雜誌感嘅關鍵
- 唔好加 router — 單文件 artifact，多頁 deck 唔在範圍內
Self-check 清單
- 打開 HTML，slide 1 (cover) 顯示，chrome strip 顯示
01 / N - 按
→/ Space / 滾輪，平滑移動一屏，dot nav 前進，珊瑚進度條移動 - 按
End跳到最後一張，按Home返回第一張 - 按
Esc出現概覽網格，點擊跳轉 - 1080px 同 640px 下，cover/content 堆疊為單列，dot nav 正常
-
prefers-reduced-motion: reduce下唔會引起眩暈 - Lighthouse：contrast AA、font-display swap、無 layout shift
實際例子
用戶：「Build me an 11-slide pitch deck for 'Lumen Field', a focus-soundscape studio. Cover with hero plate, two section dividers, two product content slides with bullets, a stats slide showing 12 soundscapes / 4 presets / 1 daily ritual, a customer quote, a closing CTA, and an end card. Reuse the open-design-landing image library.」
生成 11 張幻燈片：
- Slide 1: Cover — 標題 + hero collage
- Slide 2: Section I — The problem
- Slide 3-4: Content — about + capabilities with bullets
- Slide 5: Stats — 3 個數字
- Slide 6: Section II — How it feels
- Slide 7-8: Content — method + selected work
- Slide 9: Quote — customer testimonial
- Slide 10: CTA — primary + secondary action
- Slide 11: End — mega kicker + signature