splatstudio-landing-deck 是做什麼的？
姊妹技能 splatstudio-landing。採用相同的
Atelier Zero 視覺系統（暖色紙質、Inter Tight + Playfair Display、
斜體襯線強調、珊瑚色圓點），但以橫向雜誌風格的滑動簡報呈現，
而非長頁滾動頁面。
導航模式刻意借鑒了
guizang-ppt 技能 — 使用 ←/→ 方向鍵、滾輪 /
滑動、ESC 總覽格 — 讓它感覺像是一本印刷雜誌逐頁翻閱，而不是
網頁投影片的滾動。
inputs.json + ../splatstudio-landing/styles.css
│
└──────────► scripts/compose.ts
│
▼
<out>/index.html
(每張投影片一個視口，水平滑動)
你將獲得
- 一個獨立的單一 HTML 檔案，內含 N 個視口大小的投影片，在單一 轉換後的 flex 軌道上水平排列。
- 鍵盤導航：
←/→·↑/↓· PageUp/PageDown · Space · Home/End。 - 滾輪 + 觸控滑動（具備動量防護，避免單次觸控板輕拂過度）。
- 每張投影片的 chrome 資訊列：品牌標誌、簡報標題、位置、
羅馬數字年份、即時幻燈片計數（
01 / 11）。 - 底部珊瑚色進度條，隨著前進逐漸填滿。
- 底部附近的點狀指示器列；點選任意點可跳轉。
- ESC 總覽格 — 所有投影片的縮放縮圖，點選即可跳轉。與
guizang-ppt的總覽 UX 相同。 - 重複使用姊妹技能的相同 16 插槽圖片庫 — 無重複素材。
投影片類型
| 類型 | 用途 |
|---|---|
cover | 開頭的標題頁。雙欄文案 + 拼貼藝術。 |
section | 章節之間的羅馬數字分隔線。置中，滿版出血。 |
content | 眉題 + 標題 + 正文 + 項目符號 + 可選拼貼藝術。 |
stats | 最多 4 個大型統計區塊（數值 · 標籤 · 副標籤）。 |
quote | 引言 + 作者。右側可選肖像拼貼。 |
cta | 結尾呼籲 + 1-2 個按鈕。 |
end | 大型斜體襯線結尾詞 + 簽名頁尾。 |
典型的 11 張投影片簡報：
1. cover — 標題頁，主視覺拼貼
2. section — "I. 問題"
3. content — 關於 / 宣言，項目符號
4. content — 能力，項目符號
5. stats — 4 個數字
6. section — "II. 感覺如何"
7. content — 方法，項目符號
8. content — 精選作品
9. quote — 客戶推薦
10. cta — 主要 + 次要動作
11. end — 大型結尾詞 + 簽名
工作流程
1. 撰寫 inputs.json
從 inputs.example.json 開始（開放
設計簡報）。品牌區塊、圖片策略和素材路徑與姊妹技能相同 —
如果你已經填寫了 splatstudio-landing 的簡報，直接複製
brand 和 imagery 即可。
對於每張投影片，選擇一個 kind 並填寫來自
schema.ts 的類型化欄位。MixedText（無襯線基線 +
斜體襯線強調區間 + 珊瑚色終止點）是與姊妹技能相同的編碼方式 —
請參閱其 inputs.example.json。
2. (可選) 產生或預留圖片
此技能不附帶自己的圖片產生器或預留腳本 —
它與 splatstudio-landing 共用 16 插槽庫。要重新產生或預留：
# 透過 gpt-image-2 (fal.ai) 產生
FAL_KEY=... npx tsx ../splatstudio-landing/scripts/imagegen.ts ../splatstudio-landing/inputs.example.json --out=../splatstudio-landing/assets/
# 或是紙質紋理的 SVG 佔位符
npx tsx ../splatstudio-landing/scripts/placeholder.ts ../splatstudio-landing/assets/
將簡報的 inputs.imagery.assets_path 設定為這些 PNG 檔案的路徑
（範例中預設：../splatstudio-landing/assets/）。
3. 編譯簡報
npx tsx scripts/compose.ts inputs.json out/index.html
編譯器讀取 inputs.json，載入標準的 Atelier Zero 樣式表
來自 ../splatstudio-landing/styles.css，疊加簡報專用規則
（水平 flex 軌道、幻燈片佈局、HUD、點狀導航、ESC 總覽、鍵盤 /
滾輪 / 觸控處理器），並輸出一個獨立的 HTML 檔案。
4. 自我檢查
- 在新瀏覽器分頁中開啟 HTML；第一張投影片（封面）顯示
右上角 chrome 資訊列顯示
01 / N。 - 按下
→（或 Space，或向下滾動）。平滑地向右滑動一個 視口；點狀導航前進；珊瑚色進度條向前移動。 - 按下
End。跳至最後一張投影片。 - 按下
Home。返回第一張投影片。 - 按下
Esc。出現含有縮放縮圖的總覽格； 點選任意縮圖跳轉並關閉總覽。 - 調整視窗大小至 1080px 和 640px。封面 / 內容幻燈片折疊為 單欄；點狀導航仍然有效；chrome 資訊列縮小。
-
prefers-reduced-motion: reduce（DevTools → Rendering）： 頁面轉場保持順暢，不會引起暈眩。 - Lighthouse：對比度 AA、font-display swap、無版面偏移。
邊界
- 重複使用姊妹技能的樣式表。 編譯器在編譯期間讀取
../splatstudio-landing/styles.css。不要在此處維護重複的副本； 如果 Atelier Zero 代碼演變，請在姊妹技能中一次性編輯。 - 重複使用姊妹技能的圖片庫。 無需重新提示或重新渲染 — 相同的 16 張圖板適用於兩種表面。
- 保持單張投影片在一個視口內。 如果投影片內容無法在 1280×800 的 100vh × 100vw 內容納，將會溢出並感覺擁擠。請修剪 文案或拆分為兩張投影片。
- 不要切換到垂直滾動吸附。 水平滑動的姿態是此技能讓人感覺 像雜誌內頁的關鍵；垂直滾動只會變成一個長頁。
- 不要新增路由。 這是一個單檔成品。多頁簡報不在範圍內； 如需多份簡報體驗，請分別渲染每份簡報並從父索引連結。
參見
splatstudio-landing— 登陸頁面姊妹技能。guizang-ppt— 此技能借鑒的雜誌簡報導航模式。design-systems/atelier-zero/DESIGN.md— 代碼規格說明。