FireAmun/remotion-dev-video-kit

每日影片：點子 → 研究 → 審核 → 建置 → 預覽 → 渲染 → Buffer

請先閱讀 .claude/CLAUDE.md，它是所有品牌規則、影片規範、語音風格和安全區域的真理來源。 本技能為逐步執行流程。流程中設有兩個強制審核點，必須等待創作者同意：提案（步驟 2）與預覽（步驟 5）。 絕不可跳過。

以下路徑使用 <date> 代表今天的日期，格式為 YYYY-MM-DD（時區：亞洲/利雅德）。單集資料夾路徑：public/episodes/<date>/。

視覺與風格：每集必須完全相同

每一集都必須看起來與第一集一模一樣——這個系列正是靠它的視覺風格被觀眾辨識。因此：

• 僅使用現有的元件。 請使用既有的場景、綁定好的角色、姿勢、動作、道具和物品。在每日運行中，不得修改 src/theme.ts、字型、顏色、角色美術、章節條、字幕樣式或音效。新的視覺元素（新場景、姿勢、道具或物品）屬於創作者額外提出的任務；當創作者提出時，請以相同黑金風格建置，並將其加入本技能的清單中。
• 保持相同結構。 解析度 1080×1920、30 fps、長度 ≤ 60 秒。頂端顯示「EP NN」標籤與 7 章節條，底部為逐詞字幕（亮色顯示當下唸出的詞，暗色顯示即將唸出的詞，每行一個金色關鍵詞）。一句對應一個場景；角色為每一句話進行表演；道具/物品在唸到該詞時出現；每 1.5-3 秒有一次視覺變化；場景切換時有「咻」的音效。
• 保持相同節奏。 前 2 秒鉤子 → 早期「追蹤」提示（追蹤按鈕場景） → 內容章節 → 結尾卡片（顯示 yoursite.com 與完全相同的結尾台詞） → 「明日預告：<下個主題>」彩蛋。
• 保持相同語音。 使用 Qwen3-TTS 搭配 assets/voice/reference_energy.wav，使用相同種子參數，並以充滿活力的標點符號來表現情緒。
• 保持相同發布流程。 利雅德時間晚上 7:00，發布至 Instagram Reel（分享至動態消息）+ TikTok + LinkedIn。Instagram 和 TikTok 必須開啟 AI 生成標籤（語音為 AI 複製，誠實標註既能保護帳號）。
• 集數從 topics-log.json 中遞增計算（下一集編號 = 最後一集編號 + 1）。

1. 研究

1. 讀取 topics-log.json：不要重複已經做過的主題；如果上一集曾預告「下一集」的主題，優先使用該主題。
2. 網路搜尋：尋找 2 到 4 個可靠來源（官方文件、GitHub README、學術論文、廠商官方頁面）。驗證每一個數字、價格、版本或宣稱。對於變化快速的資訊，請加上「截至 <日期>」。絕對不能虛構事實、基準測試或程式碼。
3. 定位：以一位真實開發者提供有用技巧的角度來呈現，避免誇大宣傳或「看看 AI 做了什麼」的口吻。將工具類主題包裝成一個開發技巧。

2. 提案 — 停止等待審核

在聊天中向創作者展示以下簡短內容：

• 鉤子（前 2 秒）：一個具體的利害關係、數字或宣稱。不要有問候語。
• 場景表格，每句對應一列（5-8 個章節，約 12-16 個場景，總長 30-60 秒，語速約每秒 2.5-3.5 個詞）： # | 章節 | 台詞 | 場景 | 角色動作 | 物品在唸到哪個詞時出現 章節順序為：鉤子、是什麼、為什麼重要、怎麼做、重點、試試看、下一集。鉤子之後立即插入追蹤提示場景。 最後一句必須完全是：「Visit my website yoursite.com and hit the follow button for more.」
• 事實與來源（網址），以及任何需要創作者確認的事項（例如以創作者口吻表達的觀點、工具名稱）。
• 字幕：為 Instagram/TikTok 準備的版本（鉤子句、利害句、行動呼籲、主題標籤），以及另一組更專業的 LinkedIn 版本（3 個主題標籤）。

等待「開始」/同意或修改意見。若修改幅度較大，請套用修改後再次展示。

3. 語音（GPU 任務；期間 GPU 上不執行其他任務）

建立 public/episodes/<date>/narration.txt：每個 TTS 段落為一個段落（段落間以空行分隔），通常每個段落包含 1-3 個句子。請按照實際口語的方式書寫： 你的網站需拼寫為口語形式（例如 "my site dot com"）、N P X create video、Qwen three T-T-S、pip install Qwen T-T-S，數字有歧義時請用文字表示。鉤子句請使用 !（模型會根據標點符號來表現情緒）。

.venv-qwen\Scripts\python scripts\tts_qwen.py public\episodes\<date>\narration.txt
.venv-qwen\Scripts\python scripts\timestamps.py public\episodes\<date>\narration.wav --hint "<5-10 個技術詞彙>"

• 語音 = Qwen3-TTS 1.7B 零樣本，參考音檔 assets/voice/reference_energy.wav（以及其 .txt 逐字稿）。絕不使用付費語音服務。
• 絕不要將整份稿件作為提示傳給 Whisper（會導致循環）；僅使用 --hint 傳入少量詞彙。
• 檢查旁白長度（必須 ≤ 60 秒，包含結尾 1.5 秒的尾音），並略覽 narration.json 的文字是否有誤聽的情況。
• tts_qwen.py 會自動調整音量（scripts/audio_level.py：壓縮器 → -16 LUFS → -1 dBFS 峰值）。src/components/Sfx.tsx 中的音效已根據此音量調整（約比語音低 12 dB）；請勿提高音效音量。如果旁白是以其他方式產生的，請先對其執行 scripts/audio_level.py。

4. 建置單集（僅資料檔 — 每日運行中不得新增元件程式碼）

建立 public/episodes/<date>/plan.json，然後執行：

.venv-qwen\Scripts\python scripts\build_episode.py public\episodes\<date>
npm run lint

plan.json 的結構（完整範例請見 public/episodes/example/plan.json）：

{
  "episode": 2, "date": "<date>", "title": "...", "keywords": ["word,", "..."], "tailMs": 1500,
  "sources": [{ "title": "...", "url": "https://..." }],
  "scenes": [{
    "chapter": "HOOK",
    "display": "字幕應顯示的句子（書面形式：yoursite.com, npx create-video）",
    "set": "stage", "setVariant": "", "zoom": 1.05,
    "actor": { "x": 540, "scale": 0.9, "facing": "right", "enterFrom": "right",
               "beats": [{ "atMs": 0, "pose": "talk" }, { "atWord": "build", "pose": "pointUp", "motion": "talk" }] },
    "items": [{ "kind": "label", "text": "...", "atWord": "camera!", "untilWord": "...", "x": 540, "y": 420 }]
  }]
}

• 所有場景的 display 串接起來後，必須與口語旁白逐字相同（書面形式可以不同，例如 "Qwen3-TTS" 對應 "Qwen three T-T-S"）。若一個場景是某個 TTS 段落的開頭，則其時間點必須與 TTS 精確對齊；其他場景則從其第一個口語詞開始計時。
• 時間關鍵字：atWord / crossAtWord / untilWord（比對時忽略大小寫與標點符號）、occurrence 用於重複出現的詞、offsetMs 用於微調，或直接使用 atMs。
• 姿勢（src/rig/poses.ts）：idle、talk、explain、shrug、wave、point、pointUp、pointViewer、celebrate、think、search、laptop、holdUp、thumbsUp、headScratch。動作： talk（手勢跟隨語音）、wave、shake、celebrate、search、type、still。手持道具： magnifier、phone、trophy；"laptop": true 代表手持筆電。facing: "left" 會讓角色左右翻轉（指向左邊的東西）。
• 場景（src/sets/Sets.tsx）：stage、coderoom、desk（桌子會遮住腿部；右側有螢幕）、sky（setVariant 為 "sunrise" 或 "timelapse"）、chalkboard（黑板在左側）、library、blueprint（海軍藍背景上的金色技術圖紙 — 用於 HOW / 「它是如何運作的」場景）、plain。每個場景都有飄動的金色粒子（"particles": false 可關閉）。
• 物品（src/scene/Items.tsx）：icon（相機/時間軸，使用 crossAtWord）、label（金色/淺色）、code（飛行的晶片，使用 fromX/fromY）、window（終端機或 "style": "chalk"，內含 kind 為 command/code/output 的行）、counter、stamp、steps、waveform、calendar（從→到）、banner、confetti、book、follow、end（網址 + 行動呼籲，裝飾藝術風格邊框）、kinetic（大字逐個強力飛入；highlight 詞為金色；size、stagger 影格 — 最適合鉤子句）、splitflap（機場翻牌顯示數字，最多 10 個字元，可選 label — 最適合鉤子中的數字）。
• 卡片會自動套用磨砂玻璃風格（玻璃擬態）。風格預覽請見 StyleTest 合成。
• 物品必須填入真實內容（實際程式碼、真實終端機輸出、真實數字），絕不使用填充內容。

從經驗中學到的版面規則（1080×1920）：

• 頂部列（EP 標籤 + 章節）結束於約 y 215 處：物品頂部需保持在 ~230 以下（注意場景縮放會將物品向上推）。
• 地板 y 1440；字幕 y 1490；保持兩側 60 像素的邊界。
• 角色縮放 0.9 → 頭頂約 y 570；0.8 → 約 670；0.7 → 約 760。大型物品（視窗、波形圖、結尾卡片）需要角色縮放 0.58-0.8，或將角色移至側邊（x≈790，面向左）。
• 在預設大小下，標籤約為每字元 38 像素：請保持簡短，否則會跑出畫面。
• 絕對不要用物品遮住角色的臉；請將標籤放在視窗旁邊或下方。

5. 預覽 — 停止等待審核

1. Studio：npx remotion studio → http://localhost:3000/Episode （可能已在執行中）。
2. 以 0.4 倍縮放渲染每個場景的單張靜止畫面，並自行先檢查：是否有重疊、文字跑出畫面、臉部被遮擋、物品時間點錯誤。修正、重新建置、再次檢查。
3. 將 Studio 連結顯示給創作者（並提及任何您無法驗證的事項，例如發音）。等待同意或截圖回饋 — 並精確修正創作者指出的問題。

6. 渲染

npx remotion render Episode out/<date>/video.mp4 --codec=h264 --crf=18

（請在 src/Root.tsx 中將 Episode 合成的 episodeFile 預設屬性設定為新的資料夾，或傳入 --props='{"episodeFile":"episodes/<date>/episode.json","episode":null}'。） 驗證：長度 ≤ 60 秒、1080×1920、30 fps、含有音訊，且語音音量明顯大於所有音效（語音約 -16 LUFS）。建立 out/<date>/caption.txt（IG/TikTok）和 out/<date>/caption-linkedin.txt。

7. Buffer 草稿（創作者自行附加影片）

Buffer 的 API 僅接受來自公開網址的影片，因此請建立草稿，並將其時間設定為利雅德時間 19:00；創作者會在 Buffer 中開啟每個草稿，附加 out/<date>/video.mp4，然後按下排程。

• 組織 ID：<你的 Buffer 組織 ID>（使用 Buffer MCP 的 get_account 取得；免費方案允許 10 篇排程貼文）。
• 頻道：Instagram <id>、TikTok <id>、LinkedIn <id>（使用 list_channels 取得）。
• 使用 mode: "customScheduled"、dueAt: "<date>T19:00:00+03:00"、saveToDraft: true、schedulingType: "automatic" 來呼叫 create_post。
  • Instagram：metadata.instagram = { type: "reel", shouldShareToFeed: true, isAiGenerated: true }。
  • TikTok：metadata.tiktok = { title: "<簡短鉤子>", isAiGenerated: true }（語音為 AI 複製 — 務必揭露）。
  • LinkedIn：專業的說明文字，不需要中繼資料。
• 如果 19:00 已過，請詢問創作者希望設定的時間，不要自行猜測。未經創作者同意，絕對不可發布或排程任何內容。

8. 結尾

• 將該集資訊附加到 topics-log.json（日期、集數、標題、主題、「下一集」預告、來源）。
• 告知創作者：影片路徑、三篇 Buffer 草稿以及他需要手動附加影片的事項，還有下一集預告的主題。