tutorial-publish-pipelinelisted

# Tutorial Publish Pipeline — 跨平台規則 > 給 Claude Videos 專案的教學片管線(`src/tutorial/` + `public/screenshots/<name>/steps.json` 流程)。短片管線(`src/content.ts`)不適用,但 publish API 部分相同。 > > 跟其他 skill 的關係:這份是「影片本體 + 跨平台 publish 流程」共用層;細部 token / API 限制看 `youtube-publishing-rules` / `instagram-publishing-rules` / `threads-publishing-rules` / `threads-algorithm-rules`。 --- ## 0. 整套管線心智模型(macro 線性 5 階段 + 對話/預覽 內部 iterative) ``` 工作目錄 → 對話 ⇆ 預覽 → 後製 → 發佈 │ └─ 字幕 / BGM / 縮圖 / 配音(全自動) ``` - **macro 順序線性**:5 階段先後不可換(不能先後製再對話) - **對話 ⇆ 預覽 內部 iterative**:預覽不滿意回對話改劇本,熱重載立刻看,反覆來回直到滿意才推到後製 詳細各階段: - **工作目錄** = `git worktree add` 開新分支,主目錄不亂、多支同時改不衝突(細節見 CLAUDE.md) - **對話** = 跟 Claude Code 講「拍 X 主題」,AI 寫 `steps.json`(blocks + voiceover 文字)+ 配 `config.ts`(brand / intro / outro / thumbnail) - **預覽** = `npm run dev` 開 Remotion Studio,改 steps.json 熱重載立刻看效果;**這層跟對話 iterative**,不滿意回對話階段改劇本再來 - **後製**(0 人介入,Remotion 一次合成)= 4 項自動產出: - **字幕** = `<SubtitleOverlay>` 元件(`src/tutorial/SubtitleOverlay.tsx`),React 直接畫進 frame,**不經 ffmpeg burn-in**(細節見 §3) - **BGM** = `<Audio src="music/bgm.mp3" loop volume={0.2}>` 在 `TutorialComposition` 直接放,render 時 mix - **縮圖** = `<Still>` composition(Root.tsx 註冊 `ThumbnailYT/IG/Reel`),跟影片同源 `config.ts.thumbnail`,render 時順便產 PNG - **配音** = `npm run voiceover:tutorial` 用 ElevenLabs V3 產 wav → `public/voiceover/<name>/`;Remotion `<Audio>` 引用 - **發佈** = 一行 `node scripts/publish-tutorial.mjs` 同時上 YT(16:9) + IG Reel