Communitygithub.com

製作宣傳影片

用於使用程式碼 (Remotion) 製作、規劃、編輯、重新計時或重新渲染宣傳片、產品發佈影片、產品更新或社交媒體影片,包含運鏡、音樂同步、配音、音效以及直式/橫式影片。

製作宣傳影片 是什麼?

此技能提供一個以程式碼驅動的宣傳影片製作工作流程,基於 Remotion 框架(將 React 元件逐幀渲染)。其核心概念是使用一個「同步地圖」(sync map)來驅動所有元素——畫面、運鏡、音樂和音效——確保在調整時間時,所有內容能自動保持同步。此技能鼓勵「先選角再剪輯」的流程,讓導演在實際修改影片前,先聽到並看到各種選項(如配音、音樂、畫面風格),並強制要求先產出預覽版本再產出最終版本。 此技能適用於所有支援 Remotion 的開發環境,例如 Claude Code、Cursor 或 Codex。它詳細說明了專案結構(每個影片一個分支、專屬資料夾 `src/videos/<name>/`)、從範本複製檔案 `templates/` 到設定檔、音訊處理規則(如畫面與音訊分開渲染後再合成以避免延遲、使用有商業授權的 TTS 和素材庫)、以及嚴格的品質保證檢查清單(如音量、音效時間點、QR code 解析度)。最後,它明確列出了常見錯誤及其修正方法,能有效引導 AI 代理或開發者避免標準流程中的陷阱。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/HenryCh-hong/making-promo-videos/tree/main/skills/making-promo-videos

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

用程式碼製作宣傳影片

概述

一部用程式碼製作的宣傳片 (Remotion:React 元件逐幀渲染)。它遵循四個原則:

  1. 一個同步地圖驅動一切。 畫面、運鏡、音樂和音效都讀取名稱命中的標記,因此重新計時一段就會重新計時所有相關段落。
  2. 先選角再剪輯。 導演在影片改變之前,先聽到並看到各種選項。
  3. 先有預覽,後有成品。
  4. 每一項宣稱都與產品相符。

首要規則: 在執行任何其他操作之前,先閱讀視頻儲存庫自身的規則:其 README、CLAUDE.md,或儲存庫根目錄下的 house-rules.md。這些規則優先於下面的預設值。此文件夾中的 house-rules.example.md 是一個用於編寫規則的範本。

設定新影片

  • 每個影片使用一個分支或工作樹,且位於僅有影片的儲存庫中,絕不能放在產品應用程式內部。每個影片都有自己的文件夾:src/videos/<name>/。
  • 從此技能複製 templates/ 到該文件夾:
    • sections.ts:同步地圖、HITS、TRACK_BPM
    • film-camera.tsx:2.5D 攝影機
    • shots.ts:鏡頭列表
    • Film.tsx:合成骨架,其標頭中包含 Root.tsx 註冊
  • 將 templates/render.sh 和 scripts/*.py 複製到儲存庫的 scripts/ 中。
  • 相依套件,需一起固定在一個確切版本:remotion、@remotion/cli、@remotion/motion-blur。對於音訊腳本:ffmpeg,以及 numpy 和 soundfile。
  • 一個合成從一個 format props 渲染兩種格式(橫式 1920x1080,直式 1080x1920)。每種格式都獨立排版,絕不加上黑邊。

工作流程

  1. 分鏡腳本規格(如果已安裝,可使用 superpowers:brainstorming 技能)。將其寫入 docs/.../YYYY-MM-DD-<name>-design.md。對照產品的程式碼和實際功能標誌,檢查畫面上的每一項宣稱,並使用產品自身的措辭。
  2. 在進行任何影片編輯之前,先製作選角板。 展示聲音(包括朗讀台詞)、打字聲、幾種音樂選項,以及外觀或角色草稿,每個選項都附上代碼(A1、B4、M1…)。將視覺草稿渲染成小型的合成版面,私下發布該頁面,然後等待導演的挑選。永遠不要默默選擇聲音、配樂或外觀。
  3. 建置。
    • 複製和時間設定存在於配置中。
    • 場景、鏡頭和聲音都引用 HITS 的名稱,而不是原始數值。
    • 運鏡:請閱讀 camera.md。
  4. 720p 預覽 (scripts/render.sh <Comp> <format> preview <name>-preview-vN-720p)。回報您驗證了什麼、無法測試什麼,以及您所做的任何超出要求的變更。
  5. 僅在批准後才產出成品: 全尺寸,兩種格式。如果機器進入睡眠,長時間的渲染會失敗,因此請先檢查電源設定。
  6. 在影片的分支上進行提交。 僅在要求時才合併或推送。較早的影片必須保持渲染結果不變。

音訊規則

規則原因
先將畫面靜音渲染,然後再執行一個獨立的 --codec=wav 渲染,最後執行 scripts/mux.py(-15 LUFS 加上限制器)。Remotion 在渲染時生成的 AAC 會使整個音軌延遲 43 毫秒。
音樂必須是商業授權或生成的,並且每個檔案都記錄在 CREDITS.md 中。有些「免費」音效包並未授權商業使用。
若要配合選定的配樂:使用 scripts/beatgrid.py track [bars] [arc] 取得 BPM 和重拍。設定 TRACK_BPM,然後使用 music-edit.py(整小節,在重拍處交叉淡化)或 fit-track.py(一個直接的時間視窗)來剪輯配樂。影片是配合配樂來調整時間,而不是反過來。
配音只能來自具有商業授權的 TTS (Kokoro-82M 是 Apache-2.0)。絕不要使用 macOS 的 say。say 的授權是個人用途,不可商用。
音效是確定性生成的。每個新音效都應使用自己的 PRNG,並附加在文件末尾。否則後續的每個檔案變更都會影響先前的音效。
絕不在渲染中呼叫 Math.random()。請使用 film-camera.tsx 中的 hash()。每一幀都必須每次都渲染出相同的結果。

交付前的品質保證

  • 類型檢查。
  • 響度約為 -15 LUFS,真實峰值低於 -1 dBTP (ffmpeg -af ebur128)。原始 WAV 峰值保持在 0.99 以下,因此不會有削波。
  • 音效準確落在其擊中幀上。
  • 任何 QR Code 在 1080p 和 720p 下都能解碼。
  • 以兩種格式渲染每個變更區段的靜止幀 (Remotion renderStill),然後親自檢查它們。審閱代理可能會錯過裁切邊緣,而且由小型、快速的模型進行的審查不算數。

常見錯誤

錯誤修正方法
動畫關鍵幀綁定到原始幀數、節拍或秒數在 sections.ts 中新增一個具名擊中點並引用它。
鏡頭的旋轉或傾斜洩漏到後續鏡頭關鍵幀值會延續,因此請重置該欄位 (roll: 0)。
在批准前渲染了成品先發送 720p 預覽。
使用了導演從未聽過或看過的語音、配樂或外觀先將其放在選角板上。
一次性渲染出含音訊的 mp4先渲染靜音畫面,接著渲染 WAV,然後再合成。
將多日期的影片暫存檔案放在 /tmp 下系統會清理它。請使用一個真正的工作樹文件夾。
在自動模式下使用 $(...) 或迴圈的 Shell 單行指令將邏輯放入一個腳本文件中。

相關技能