tutorial-voiceover-stylelisted

# Tutorial 配音風格與模型規範 這支 skill 規範寫教學片配音字串的三件事:**何時動配音**、**講什麼**、**怎麼合成**。 --- ## 1. 工作流程順序 兩條順序規則,合在一起就是教學片完整工作流程。 ### 1.1 先鎖圖,後寫配音 **強制順序:** 先把 step 所有 `image` / `code` / `callout` block 鎖定(視覺骨架先定死,圖檔名都填進 `steps.json`)→ 才動 `voiceovers` / `intro.voiceover` / `outro.voiceover` 字串 → 才跑 `generate-tutorial-voiceover.ts`。 **Why:** 內容規則(2.1)要求「畫面上看得到的重點全部要點到」—— 不知道畫面是什麼,寫不出對的配音。圖如果之後再改,配音多半要重寫,ElevenLabs credit 燒兩次。 ### 1.2 圖鎖好直接產 wav,**先驗配音、配音 OK 才上字幕**,字幕也 OK 才 render **強制順序(兩輪預覽,字幕分開驗):** 1. 圖鎖好 → voiceover 字串寫完 → **直接**跑 `generate-tutorial-voiceover.ts` 產 wav(不插無音訊視覺預覽) 2. **第一輪預覽:帶配音、不上字幕** → 跑 `npm run dev`,使用者驗 step 對位 / pageBreak 時機 / 配音停頓 / 排版 / 圖片對焦 3. 配音不對 → 改字串 → 重產對應 clip 的 wav → 重新預覽(可能多輪) 4. 使用者確認**配音定稿** → 才把字幕打開(`<SubtitleOverlay>`) 5. **第二輪預覽:帶配音 + 字幕** → 驗字幕不擋關鍵畫面 / 無換行錯誤 / 無超框 / 句子不過長 6. 字幕不對 → 改 SubtitleOverlay 設定(切句邏輯 / 字級 / 位置)→ 再預覽 7. 兩輪都 OK + **使用者明確說「render / 出片 / ship / OK 出片」** → 才跑 `npm run render:tutorial` **Why(為什麼字幕等配音 OK 才上):** 字幕直接從 voiceover 字串��出來。配音還在調(改字 / 拆 pageBreak / 換詞 / 重產 wav 改 timing)的時候上字幕,字幕會跟著動 —— 等於每改一次配音就要重驗字幕,工白做。先把配音鎖死,字幕只驗排版層(切句長度、遮不遮畫面),一次到位。 **Why(為什麼不先視覺預覽再產 wav):** scene duration 是 `max(預設 frames, audio frames + tail)`。wav 沒生時 Sequence 還是預設時長,studio 看到的 timing / pageBreak 節奏 / 配音停頓位置跟成片不一樣,等於白看。先產 wav 把 duration 鎖死,預覽才有鑑別力。 **Why(為什麼不能直接 render):** render 一次 5–10 分鐘,沒預覽就 render 通常要重來。AI 不要自己決定 render 時機。 **目前實作限制:** `TutorialComposition.tsx` 一律渲染 `<SubtitleOverlay>`,沒 toggle。第一輪「不上字幕」目前要靠**手動把那一行註解掉**(或加 config fl