YouTube Slides 製作系統 — Brainstorm
日期： 2026-03-27 標籤： youtube content-system brainstorm DLS
核心概念
做 YouTube 影片唔用傳統 PowerPoint，改用三層架構：
三層架構
| 層次 | 工具 | 作用 |
|---|---|---|
| 結構層 | HTML / React（code） | Layout、動畫、組件 — 穩定、可重用 |
| 視覺層 | AI 生圖（Ideogram / Nano Banana） | 每張 slide 嘅圖片 — 有變化、唔悶 |
| 規則層 | DLS（Design Language System） | 品牌色、字體、spacing — 全部片一致 |
為何唔用 PowerPoint
- 每次要手動排版，費時
- AI（Claude）直接寫 HTML slides，一次過搞掂
- 唔需要安裝任何軟件，瀏覽器打開就錄
為何唔純粹用 AI 生圖
- 純 AI 生圖每次唔同，風格唔一致（randomness 高）
- DLS 定死規則之後，AI 生成嘅嘢就變穩定
為何加 DLS
- 定一次：品牌色、字體大細、component 樣式
- 之後所有片沿用同一 design，唔使每次重新講
- 減少「random card」問題
工作流程
- 俾 Claude 一個影片 topic
- Claude 生成 HTML slides（用定好嘅 DLS template）
- 需要圖片嘅位置 → Claude 用 Ideogram / Nano Banana 生成
- Claude iterate 直到滿意
- 你 screenshare 錄片
- 交同事剪輯（外包，便宜）
工具清單
- Claude Code — 生成 HTML slides、管理 DLS
- Ideogram — AI 生圖（最適合有文字嘅 marketing 圖）
- Flux via fal.ai — AI 生圖（一般視覺圖，更平）
- Miro / FigJam — 如果需要白板協作（可選）
- Gamma.app — 另一個快速 AI slides 工具（外部，可選）
下一步
- 定義 Remarkable Marketing 嘅 DLS（品牌色、字體、layout 規則）
- 建立 HTML slides template（以 DLS 為基礎）
- 測試完整 workflow：topic → slides → 錄片
參考
- 龍蝦 slides demo：
http://76.13.189.126/slides/lobster.html - DLS 相關影片已有分析存入 YouTube 摘要資料夾