影片製作
一條把「文字素材＋截圖＋錄音」變成成品影片的流程。不需要剪輯軟體，全部用 HTML 排版 → headless Chrome 轉圖 → ffmpeg 合成。
這個 skill 的核心不是特效，是「問對問題」。 影片失敗幾乎都不是技術問題，是一開始沒問清楚要給誰看、要他做什麼。 所以下面的階段一到階段五不要跳，也不要一次把所有題目丟給使用者。
第 0 步：環境自檢（一定要先做，30 秒）
在問任何問題之前先跑這個，因為結果會決定哪些選項不能給使用者選：
python3 ~/.claude/skills/video-production/templates/qa_check.py --env
它會回報：ffmpeg／Chrome 在不在、ffmpeg 能不能畫字（多數版本不能）、 有沒有中文 TTS 語音、能不能螢幕錄影、系統有哪些中文字型。
判讀規則
| 自檢結果 | 對使用者的影響 |
|---|---|
| 沒有 ffmpeg 或 Chrome | 停下來，先給安裝指令，不要開始問題目 |
| ffmpeg 不能畫字（沒有 drawtext/libass） | 正常，這是預設路線：所有文字都用 HTML 轉 PNG。不要去用 drawtext 或 subtitles= |
| 沒有中文 TTS | 旁白選項只能給「使用者自己錄音」，不要給「自動旁白」 |
| 不能螢幕錄影 | 3–10 分鐘那一檔要改成「請使用者自己錄畫面交進來」 |
| 缺中文字型 | 用 references/visuals.md 的 fallback 字串，不要只寫 PingFang TC |
| 沒有 Node.js 22+ | Q7 不要給 L4（HyperFrames 動態圖形）。其他三級照常，不影響開工 |
第 1 階段：先問類型與長度（只問這兩題）
用選項卡問，一次兩題。不要在這一步就問配色、音樂、動畫——使用者還不知道 影片會長什麼樣，那些題目現在問只會得到隨便的答案。
Q1. 這支影片是哪一種？
| 類型 | 用來做什麼 | 骨架的重心 |
|---|---|---|
| 發表型 | 新工具／新網站／新制度上線 | 「以前很痛 → 現在很輕鬆 → 去哪裡用」 |
| 回顧型 | 一季／一個活動結束後的回顧 | 「發生了什麼 → 數字 → 誰做到了 → 下一步」 |
| 統整型 | 把散落的資訊整理成一支可傳的片 | 「有幾件事 → 一件一頁 → 一張總表」 |
| 其他 | 上面三種都不像 | 問使用者要什麼，不要硬套 |
Q2. 長度？（這題決定管線，見 references/pipeline.md）
| 檔次 | 適用 | 有沒有旁白 | 使用者要交什麼 |
|---|---|---|---|
| 1 分鐘以內 | LINE 群發、說明會開場 | 沒有（純音樂） | 只要文字重點 |
| 1–3 分鐘 | 說明會主段、教學 | 有 | 文字重點（旁白可自動生） |
| 3–10 分鐘 | 完整教學、季度回顧 | 有，字幕強制 | 文字重點；畫面能自動錄就自動錄，不行才跟他要 |
第 2 階段：問敘事結構（先給建議，讓他改）
不要自己決定結構，也不要開放式問「你想怎麼講」。 做法是：依 Q1 的類型端出一份建議骨架，請他直接改。使用者改比從零寫快十倍。
先說一句話再給骨架：
「我先給你一版骨架，你直接在上面改字或刪段就好。」
發表型（建議骨架）
- 片頭：一句話的主張，幾乎沒有字
- 以前有多麻煩（具體，最好有數字）
- 現在怎麼做（真實畫面）
- 一個動作：去哪個網址、按哪個鍵
回顧型（建議骨架）
- 片頭：這一季的一句話
- 三個關鍵數字
- 一兩個具體的人或故事
- 下一季要做什麼
統整型（建議骨架）
- 片頭：總共幾件事
- 一件一頁
- 一張總表收尾
問完骨架後，同一階段再問這兩題（選項卡）：
Q3. 痛點要不要放具體數字？
- 要，我去查（建議）— 具體數字比形容詞有力十倍。查不到就不放這一頁，不要編。
- 要，數字我給你
- 不用，這支片沒有痛點要講
Q4. 一頁放幾個重點？
- 一頁一個（建議）— 觀眾在手機上看，一頁塞五件事等於零件
- 一頁可以多個，我要資訊密度高一點
第 3 階段：問視覺（選項卡，四題）
Q5. 版面基調？
- 三明治（建議）：深色片頭 → 淺色資訊頁 → 深色收尾。深淺交界處的切換是整支片最有力的一刀
- 全淺色：像文件、像簡報，資訊為主
- 全深色：偏發表會、質感優先
Q6. 配色？（三組都在 references/visuals.md，含可直接貼的 CSS 變數）
- 沿用專案主色（建議，如果專案有網站／簡報已在用的顏色）— 影片和產品同色，看完打開網站是連續的
- 靛藍（
#5b5bd6）：科技、工具、系統 - 暖橘（
#d97706）：活動、人、成果回顧 - 墨綠（
#15803d）：健康、成長、穩健
Q7. 動畫要多少？（等級定義在 references/visuals.md）
- L2 標準（建議）：慢推 ＋ 淡入淡出 ＋ 掃光 ＋ 白閃
- L1 安靜：只有淡入淡出。文件感、資訊為主的片子適合
- L3 加強：L2 再加元素分層進場。只在發表型的片頭用，整片都用會變成很廉價的模板感
- L4 動態圖形（僅在自檢有 Node.js 22+ 時提供）：片頭、關鍵數字頁、收尾這三種場改用
HyperFrames 渲染成真正會動的片段（主標分層進場、數字從 0 跑到目標值、切換點帶音效），
其他資訊頁維持 L2。一支片最多三個 L4 場，全片都做會變成模板感，而且渲染時間從秒變分鐘。
規格在
references/hyperframes.md。發表型、回顧型建議給；統整型通常不需要。 動態性格整片只選一種：說明會、統整、回顧用 Corporate，發表型片頭用 Premium，不用 Playful
Q8. 畫面用什麼？
- 真實截圖為主（建議）：可信度差很多
- 示意圖為主：畫面還不存在、或要講抽象的事（例如「以前很累 vs 現在很輕鬆」）
- 混用：截圖講功能，示意圖講感受
圖片一律用「手繪標註風」，這一項不問使用者。
粗色框（一步一色）＋粗黑箭頭＋粗圓圈標按鍵＋黑底白字橫條＋👆＋飽和顏色＋大字。
完整規格在 references/visuals.md。
理由：乾淨的資訊風看起來像「系統產生的」，收到的人會直接滑掉；手繪標註風看起來像 「有人坐下來幫你標的」，人才會照著做。密度高的內容（進度表、清單）不要硬畫箭頭 ——改用分區粗框＋黑底白字抬頭＋大字級對比，同一套語彙的另一種組合。
唯一例外：觀眾要在 10 秒內掃完一堆並列項目、而且他本來就熟這個領域，才考慮資訊風。
第 4 階段：素材清單先給他確認（不要跳過）
自己先去專案裡把能拿的都拿了，然後列一張兩欄的表給使用者：
我自己能生的：
・網站截圖（我會開瀏覽器截）
・數字（我會去試算表／原始檔查，會標來源）
・所有版面與文字排版
只有你有的（請補給我）：
・○○○ 的原話或錄音（m4a 都可以）
・舊系統的畫面（現在已經關掉了，我截不到）
・你要用的音樂（沒有的話我合成一段）
規則
- 「我自己能生的」要真的自己去生，不要當成問題丟回去
- 數字一律標來源，來源查不到就不要放進影片
- 缺的素材如果不影響開工，先做能做的，最後再補；缺的素材如果是核心（例如 3–10 分鐘的畫面錄影），就先要到再開工
第 5 階段：問音樂與旁白
Q9. 音樂？（Q7 選 L4 的話，切換點音效由 HyperFrames 內建音效庫處理，不在這題問；配樂照這題）
- 我合成一段（建議）— 可以精準對齊分鏡秒數，而且沒有版權問題。這支片會在 說明會公開播、還會傳 LINE 群，用來源不明的音樂是真的風險
- 我給你音檔（skill 會自動做音量正規化與裁切對齊）
- 不要音樂
Q10.（Q9 選合成才問）音樂結構？
- 重磅發表（建議給發表型）：三記重擊 ＋ 兩段爬升 ＋ 明亮和聲收尾
- 輕快：撥奏為主，適合教學、統整
- 沉穩：低頻和聲鋪底，適合回顧
Q11. 旁白？（先看第 0 步的自檢結果，做不到的選項不要給）
- 你自己錄音（建議）：真人聲的說服力，機器音換不來。而且使用者通常本來就在錄
- 自動生成（僅在自檢有中文 TTS 時提供）
- 不要旁白（1 分鐘以內建議這個）
Q12. 字幕？
- 3–10 分鐘：強制上字幕，不問。 這種長度多半在說明會投影或傳 LINE 群，很多人靜音看
- 1–3 分鐘：問他要不要（建議要）
- 1 分鐘以內：沒旁白就不用
第 5.5 階段：最後一題，開放填寫（每一次都要問，不要跳）
前面十二題都是選擇題，而選擇題只能問到「我想得到的事」。 這一題是留給我沒想到的——而那通常才是使用者真正在意的。
用開放式問法，不要給選項，讓他自己寫：
Q13. 還有沒有需要增加的需求？
任何事都可以寫：一定要出現的一句話、不能出現的字、某個人的名字要怎麼寫、 要在什麼場合播、給誰看、參考哪一支片或哪一張圖的感覺、什麼時候要、檔案要放哪…
沒有就回「沒有」，我就開工。
怎麼處理他寫的東西
| 他寫的類型 | 怎麼做 |
|---|---|
| 具體要求（要有某句話、某個數字、某個檔名） | 直接照做，不要問為什麼 |
| 參考某支影片／某張圖的感覺 | 先去看（能開就開、有附圖就看圖），把看到的手法拆成 3–5 條具體規則唸回去給他確認，再動手 |
| 和前面選的答案衝突 | 講清楚衝突在哪、問他哪個優先。不要自己選一個然後不說 |
| 超出這個 skill 的範圍（要 20 分鐘、要真人出鏡、要配音員） | 直說做不到，並給最接近的做法 |
| 模糊的形容詞（「要有溫度」「要重磅」「要高級」） | 不要直接開工。 先把它翻譯成可執行的規則（例如「有溫度」＝真實截圖當主角＋粗框＋粗箭頭＋黑底白字＋大字），唸回去確認，再動手 |
最後一類最重要。形容詞在每個人腦袋裡是不同的畫面，直接開工的結果就是做完被打回。 先翻譯、先確認，再做。
這一題答完才進第 6 步。
第 6 步：製作
先處理 Q13 寫下來的需求，再照下面的規格做。Q13 的要求優先於前面十二題的預設值 ——那是使用者自己補上的，代表他真的在意。
照 references/ 做，不要臨場自己發明做法：
| 要做的事 | 看哪一份 |
|---|---|
| 管線總覽、三種長度的差異、螢幕錄影、旁白 | references/pipeline.md |
| HTML 版面、配色、字型 fallback、動畫等級 | references/visuals.md |
| ffmpeg 合成、時間軸計算、字幕、踩過的坑 | references/ffmpeg.md |
| 音樂合成、外部音檔、音量接縫 | references/audio.md |
| 交片前自檢 | references/qa.md |
| L4 動態圖形：HyperFrames 合約、音效、分鏡→渲染流程、踩過的坑 | references/hyperframes.md |
五個現成的工具，不要自己重寫：
T=~/.claude/skills/video-production/templates
# 版面／疊圖層／字幕 → PNG（ffmpeg 畫不出字，所有文字都走這裡）
python3 $T/render_text.py sc1.html -o sc1.png # 960×540 @2x
python3 $T/render_text.py warm.html -o warm.png --native # 1920×1080 @1x（手繪標註風）
python3 $T/render_text.py layer.html -o l.png --transparent # 透明疊圖層
python3 $T/render_text.py --subs 旁白.srt --out-dir subs/ # 一句一張字幕 PNG
# 配樂（numpy 合成，三種結構）
python3 $T/make_music.py --style launch --dur 7.6 --fade-out 0 \
--target-rms -19.8 --out music_intro.wav # --target-rms 是為了和下一段接順
python3 $T/make_music.py --style light --dur 29.5 --out music_main.wav
# 合成（吃 spec.json，自己算 xfade 的 offset——手算一定會錯）
python3 $T/build_video.py spec.json --print-timeline # 先看時間軸對不對
python3 $T/build_video.py spec.json
# 交片前自檢
python3 $T/qa_check.py 影片.mp4
# L4 動態圖形場次（Q7 選 L4 才用）：先出分鏡給使用者看，點頭後才加 --render
cp $T/hf_scene.html intro.html # 改字、改配色、改時間
python3 $T/hf_scene.py intro.html --at 1.5,4.8 --sfx whoosh-short,impact-bass-1,pop
python3 $T/hf_scene.py intro.html --at 1.5,4.8 --sfx whoosh-short,impact-bass-1,pop --render -o intro.mp4
# → spec.json 裡寫 {"src": "intro.mp4", "dur": 6.0, "kind": "video", "keep_audio": true}
L4 的分鏡是一道閘門，不是建議。 hf_scene.py 不加 --render 只會出 lint ＋ 關鍵格拼圖，
5 秒內有結果；渲染一段要 15 秒以上、第一次還要等一分鐘。方向錯（配色、字級、節奏）在分鏡就看得
出來。拼圖自己先看一次，再給使用者確認，確認了才渲染。
templates/slide.html 是版面樣板（含四組配色的 CSS 變數、片頭、手繪標註風、
資訊風的骨架）。複製一份改，不要從空白開始。
工作檔一律放暫存目錄（scratchpad），只有成品才放使用者的資料夾。
第 7 步：兩項硬性自檢（沒做完不准交片）
python3 ~/.claude/skills/video-production/templates/qa_check.py 影片.mp4
① 抽 9 格拼成一張圖，自己看過。 盯著程式看久了會「看到你以為的」而不是「實際算出來的」。這次靠它抓到三個錯： 慢推把頂端標籤裁掉、按鈕被裁掉一半、一個數字疊到背景文字上。
② 逐秒量音量印成長條圖。 音樂接縫最容易出事。曾經有一段掉到 −29 dB（其他段是 −20 dB），聽起來像音樂斷了。 規則：相鄰段落的 RMS 差不能超過 2 dB。
兩項都過了才進第 8 步。看到問題就回第 6 步修，然後重跑自檢，不要只修不驗。
第 8 步：交付三樣
- 影片本體 — 1920×1080 / 30fps / H.264 crf 20 / AAC 160k / +faststart
- 封面靜圖 — 1920×1080，取片頭主標那一格。可以當 LINE 預覽圖、PPT 首頁
- 各場靜圖 — 給主持人放進自己的 PPT
舊版一律改名保留，不要覆蓋。 例如 開場影片.mp4 → 開場影片-舊版.mp4，
新的才叫 開場影片.mp4。使用者常常會想比較兩版。
交付時講清楚：影片多長、改了什麼、哪一段是新的。
怎麼把這個 skill 交給別人
這個 skill 設計成可以傳給其他人用（他們在自己的 Mac 或 PC 上跑 Claude Code）。
傳法：把整個 video-production 資料夾壓縮傳過去，對方解壓到
~/.claude/skills/（Windows 是 C:\Users\你的名字\.claude\skills\），重開 Claude Code 就會出現。
對方需要先裝的東西（qa_check.py --env 會一項一項告訴他缺什麼）：
| macOS | Windows | |
|---|---|---|
| ffmpeg | brew install ffmpeg | winget install Gyan.FFmpeg |
| Chrome | 從 google.com/chrome 下載 | 同左 |
| Python 套件 | pip3 install numpy Pillow | pip install numpy Pillow |
| Node.js 22+（選配，只有 L4 要） | brew install node | winget install OpenJS.NodeJS.LTS |
Windows 使用者會遇到的四件事（先講，不要讓他自己撞）：
- 沒有蘋方字體 → 版面會用微軟正黑體，字寬不同，版面要重新看過一次
- 沒有系統中文 TTS → 旁白只能自己錄
- 螢幕錄影走
gdigrab而不是avfoundation - L4 的中文會落到微軟正黑體，字寬不同 → 分鏡那一步就會看到，字級降 10% 或換行再渲染
這個 skill 的檔案
video-production/
SKILL.md ← 決策流程與十三題（給任何人看得懂的那一層）
references/
pipeline.md 管線總覽、三種長度、螢幕錄影、旁白
visuals.md 版面、配色、字型 fallback、動畫等級、兩種圖片風格
ffmpeg.md 合成、時間軸公式、字幕、踩過的坑
audio.md 配樂、外部音檔、音量接縫
qa.md 交片前的兩項硬性自檢
hyperframes.md L4 動態圖形：HyperFrames 合約、音效、分鏡→渲染、踩過的坑
templates/
slide.html 版面樣板（配色變數 ＋ 三種骨架）
render_text.py HTML → PNG（版面／疊圖層／字幕）
make_music.py 配樂合成（launch／light／calm）
build_video.py spec.json → mp4（自己算時間軸）
qa_check.py 環境自檢 ＋ 交片前自檢
hf_scene.html L4 場次樣板（片頭 ＋ 關鍵數字，含音效）
hf_scene.py L4：lint → 分鏡拼圖 →（確認後）渲染 mp4
鐵則
- 第一格畫面就是縮圖。 LINE 和 YouTube 都拿開頭當預覽。第一格不要是全黑，也 不要是「以前有多糟」那一頁——那會讓人以為這支片在講壞消息。
- 數字一律要有來源。 查不到就不要放。影片被公開播，講錯的數字會被抓。
- 痛點頁不要用形容詞。 「很麻煩」沒有力量，「5 個檔案 97 個分頁 16.8 MB」有。
- ffmpeg 多半畫不出字。 所有文字都走 HTML 轉 PNG。看到自己想寫
drawtext就停下來，先看第 0 步的自檢結果。 - 字型一定要寫 fallback。 只寫
PingFang TC在 Windows 會默默換字，版面會爆， 而且你在自己機器上看不出來。 - 慢推的縮放上限是 1.025。 再多會把畫面邊緣的內容裁掉，而且要抽格才看得出來。
- 音樂接縫的 RMS 差不能超過 2 dB。
- 示意圖可以用，但不要拿示意圖假裝是真實畫面。 真實截圖就標真實，示意就讓它 看起來像示意。
- 超過 10 分鐘不要接。 那不是影片，那是課程，要拆。
- 圖一律手繪標註風。 1px 細邊框、灰色小字、縮小的截圖、等寬四欄表格 ＝ 冷 ＝ 被滑掉。
- Q13 每次都要問。 使用者最在意的事，常常不在你準備好的選項裡。
- 形容詞要先翻譯成規則再開工。 「有溫度」「重磅」「高級」在每個人腦袋裡是 不同的畫面，直接做的結果就是做完被打回。
- L4 只給片頭、關鍵數字頁、收尾，一支片最多三場。 其他頁維持 PNG。動的東西多了靜態頁 反而顯得死，而且全片動態圖形就是影片教學裡那種「一看就是 AI 生的」模板感。
- L4 分鏡沒給使用者看過，不准渲染。
hf_scene.py不加--render就是這道閘門。 - HyperFrames 只用 CLI，不裝它的 skill。 它的路由 skill 會接管所有「做一支影片」的請求，
裝了會繞過這份 skill 的十三題。要用的規則都抄在
references/hyperframes.md了。