縮圖與標題
在此設定您的品牌
編輯 scripts/layout-fullbleed.html 與 scripts/layout-panel.html 最上方的 :root 區塊：
| 設定 | CSS 變數 | 預設值 |
|---|---|---|
| 強調色 | --brand-accent (+ --brand-accent-rgb 以 r,g,b 格式) | #4a90e2 |
| 淺色文字顏色 | --brand-light | #f2f2f2 |
| 深色墨水顏色（描邊、面板背景） | --brand-ink | #0d131a |
| 標題字型（大字） | --font-display | 'Anton','Bebas Neue',Impact,sans-serif |
| 內文字型（小字） | --font-body | 'Inter',sans-serif |
顯示字型必須在本地端安裝，因為渲染會在無頭 Chrome 瀏覽器中從 file:// 協定執行。Anton 與 Bebas Neue 可在 Google Fonts 免費取得。
同時請在 scripts/frames.sh 中設定您的調色 LUT（LUT_DEFAULT），或在每次執行時傳入 LUT=/path/to.cube。
風格預設（可依喜好調整）
- 永遠不要將任何東西覆蓋在臉上。 不要在人物臉上使用漸層遮罩。請使用硬邊面板，讓臉部完全清晰可見，或採用滿版設計，將文字放在空白區域。
- 從原始 4K RAW 素材中提取影格，而非匯出檔。 1080p 匯出檔的影格看起來會很模糊。
- 先對影格進行調色。 Log 素材（如 S-Log3 等）未經調色時會呈現扁平且灰暗。透過
lut3d在frames.sh中烘烤 LUT。若攝影機已使用完成後製的色彩設定檔拍攝，則可跳過 LUT。
來自研究的規則
- 三到五個字，越少越好。 縮圖不是用來解釋影片的地方。
- 臉部表情是關鍵。 大多數爆紅影片都使用臉部。強烈表情比中性表情更有效。
- 一個主要主題、兩到三種顏色、高對比度。
- 在大約 210px 的尺寸下判斷。 大多數觀看決策發生在手機上。如果在那邊無法產生效果，其他都無關緊要。
- 標題與縮圖不應互相重複。 它們是同一個概念的兩個部分。保持標題簡短且具體（約 50-60 個字元，避免被截斷）。
- 在 YouTube Studio 中進行 A/B 測試勝過爭論，因此請提供使用者 2-3 個真實選項。
選擇版面
滿版版面在手機尺寸上效果最佳，為預設選項。 在 210px 尺寸下並排比較時，滿版版面的臉部閱讀大小約為面板版本的兩倍，而面板版本的次要文字則會完全消失。
layout-fullbleed.html：調色後的影格滿版顯示，在顯示字型中使用 1-3 個字，加上濃重的墨水描邊，放置在空白區域（牆壁、門）且絕不覆蓋臉部。預設位置有stab、stat、bottom、band（底部實色強調色帶）。舊版範例變體e、f、g、h。layout-panel.html：人物放置在乾淨的右手邊正方形面板中，文字位於深色左半邊。當需要搭配圖解（點狀網格）或兩行文字時使用。範例變體a-d。
執行
# 1. 從原始素材中，在表情豐富的時刻提取調色後的影格（使用逐字稿來尋找時機）
bash <技能資料夾>/scripts/frames.sh "<您的素材磁碟>/<資料夾>/C0001.MP4" "<工作目錄>" 178 310 459 503
# 2. 在選擇前先查看它們 - 聯絡表勝過猜測
ffmpeg -i hi-*.jpg -filter_complex hstack=... contact.jpg
# 3. 渲染變體 + 手機尺寸的校樣表
WORK=<工作目錄> OUT=<輸出目錄> node <技能資料夾>/scripts/render.mjs variants.json
variants.json：
[{"id":"E-no-time","layout":"fullbleed","v":"e","img":"full-C0001-503.jpg"},
{"id":"S-custom","layout":"fullbleed","img":"full-C0001-310.jpg",
"data":{"preset":"stab","head":"TOO BUSY?","kicker":"TRY THIS"}},
{"id":"B-3x","layout":"panel","v":"b","img":"cut-C0001-97.jpg"}]
每個滿版變體的文字可以透過 data（preset、head、kicker、side、size）傳入，或在版面 HTML 中新增一個舊版 v 區塊。面板文字存在於 layout-panel.html 的 v 區塊中；透過新增區塊來新增變體，文字保持在 3 個字以內。
需要 puppeteer-core：可重複使用 ../video-overlays/scripts/node_modules 或在 scripts 目錄下執行 npm i。render.mjs 會啟動 /Applications/Google Chrome.app/...；請在其他系統上變更路徑。
挑選影格
尋找揚起的眉毛、張開的手、說話中的嘴。使用逐字稿來尋找充滿能量的時刻，然後往後一秒提取影格。眼神呆滯的影格會毀了一切。frames.sh 中的裁切假設來源為 4K（3840x2160）解析度，且人物約佔畫面寬度的 46%；若您的構圖不同，請調整 crop= 的偏移量。
輸出
渲染為 1920x1080（YouTube 能乾淨地降採樣），保持檔案在 2MB 以下。
相關
paper-edit、video-overlays：影片後製管線的其他部分