技能概述
Replit Deck 係一個單文件水平滑動 HTML Deck 技能，提供 8 種來自 replit.com/slides 畫廊嘅主題。每種主題係一個完整嘅視覺系統（調色板 + 字體 + accent），一旦選定就唔好混合主題 token。
適合 pitch deck、board report、brand memo、campaign reveal — 當用戶明確想要「Replit Slides 風格」時使用。唔依賴項目嘅 DESIGN.md，每種主題自帶完整視覺定義。
8 種主題
| 主題 | 風格 | 適合場景 |
|---|---|---|
| helix | 現代極簡 · 淺灰 · 墨色 + 電光藍 | SaaS 指標 / board update |
| holm | 編輯襯線 · 奶油色 · 墨色 + 深栗色 | Legal memo / finance pre-read |
| vance | Gallery · 奶油色 · 奶油襯線配黑色條 | Art catalog / showcase |
| bevel | Y2K 編輯 · 黑色 · display type + product photo grid | Fashion campaign / lookbook |
| world-dark | 金融深綠 · 深綠 · 薄荷 + 霓虹黃 | Policy report / finance analysis |
| world-mint | 金融淺綠 · 薄荷 · 深綠 + 霓虹黃 | ESG / wellness finance |
| atlas | 博物館 · 黑色 · 襯線 + 硃紅 | Long-form narrative / chapter deck |
| bluehouse | 消費卡片 · 深海軍藍 · 漸變卡片 + 蜜桃→珊瑚 | Product showcase / real estate |
觸發關鍵字
- replit deck、replit slides、replit 風格 ppt、replit style deck、helix deck、holm memo、atlas chapter、bluehouse、bevel campaign
什麼時候用
- 用戶明確要求 Replit Slides 畫廊美學風格
- 需要其中一種 token-frozen 視覺身份
- 唔想依賴項目 DESIGN.md，想要 deck 自己嘅風格
- Board update / legal memo / campaign / product showcase 等具體場景
使用方法
自然語言觸發
Make a helix deck for our SaaS board update
Holm memo for investor pre-read
Atlas chapter deck for quarterly history
Bluehouse product showcase
工作流程
Step 0 — Pre-flight（必讀）
讀取 assets/template.html、references/themes.md、references/layouts.md、references/checklist.md。
Step 1 — 選定一種主題
從簡報匹配主題，寫低選擇同原因。一旦選定，每張幻燈片只用該主題嘅 tokens。<body data-theme="helix"> 係單一真相源。
Step 2 — 規劃幻燈片節奏 寫出幻燈片節奏 BEFORE 任何 HTML，例如（helix, 6 slides）：
01 cover hero + title + subtitle
02 kpi-row-6 6 metrics with ▲/▼ deltas
03 split-insight left stat + right paragraph
04 chapter-plate section divider
05 three-up three parallel columns
06 closing one bold number or CTA
Step 3 — 複製 seed，綁定主題
複製 template.html 為 index.html，設定 <body data-theme="<chosen>">，刪除 placeholder slides。
Step 4 — 粘貼布局，填入真實文案
每張幻燈片從 layouts.md 複製對應 <section>，替換所有 [REPLACE] 為具體內容。每張幻燈片標註 data-screen-label。
Step 5 — Self-check 通過 P0 主題鎖定 gate + 5 維度 1-5 critique，任何維度 ≤3 則重做。
Step 6 — 輸出 artifact
輸出格式
單文件 HTML artifact：
- 水平 scroll-snap 幻燈片
- 鍵盤導航：
←/→/ Space / Home/End - Chrome counter + progress bar + hint
- 每張幻燈片帶
data-screen-label - 無 Replit logo / brand lockup
視覺規則
- 一個 Deck 只有一種主題 —
data-theme設喺<body>，絕對唔好逐張幻燈片覆蓋 - 數字要真實或 absent — 無 invented metrics，用
—或灰色 block 做 honest placeholder - Display 字體跟主題 — helix/world-dark/world-mint/bluehouse 用 sans Display；holm/vance/atlas 用 serif Display；bevel 用 Y2K display
- Accent 每張幻燈片最多 1-2 次 — 絕對唔好 gradient-spam
- 唔好重寫 nav script — 佢解決咗 5 個 iframe nav bugs
- 單一 HTML 文件 — 內聯所有 CSS，無外部字體
主題鎖定 P0 Gate
grep -E 'data-theme|style="--' index.html | head
如果任何 style="--accent:..." 或主題覆蓋出現喺單獨幻燈片上， revert。一個 deck 一種主題。
實際例子
例子 1：SaaS Board Update（Helix）
用戶：「Make a helix deck for our Q4 board update」
生成 6 張幻燈片：
- 01 Cover: 標題 + subtitle
- 02 KPI Row: 6 metrics with ▲/▼ deltas
- 03 Split Insight: left stat + right paragraph
- 04 Chapter Plate: section divider
- 05 Three-Up: three parallel columns
- 06 Closing: one bold CTA
例子 2：Legal Memo（Holm）
用戶：「Holm memo for investor pre-read」
生成 4 張幻燈片：
- Cover: 正式標題
- Content: memo body with editorial serif
- Stats: key numbers
- Closing: next steps
與其他 Deck 技能比較
| 技能 | 何時選用 |
|---|---|
simple-deck |
需要匹配項目 DESIGN.md 嘅普通 deck |
magazine-web-ppt |
需要 Monocle / WIRED / Kinfolk 風格，WebGL fluid 背景 |
replit-deck |
需要 8 種 token-frozen 視覺身份之一，無 DESIGN.md 依賴 |