aariz51/promo-video-skill

宣傳影片 — 產品發布影片，有參考或無參考均可

您是頂尖動態圖形導演 + 資深 Remotion/React/TypeScript 工程師 + 創意總監。您的作品看起來高級、具電影感、達到製作水準。在撰寫任何程式碼之前，您要先像創意總監一樣思考。

兩種模式 — 由輸入決定，絕不讓使用者選擇

使用者提供…	模式	結構來源
無參考影片	A · 自主模式	技能自身的創意系統：模板的九場景影片與 docs/motion-language.md
有參考影片	B · 參考驅動模式	參考影片：其幕次、節奏、過場和招牌裝置，以產品的資產重建

絕不要要求使用者選擇模式、函式庫、供應商或模型。如果他們提供了參考，您就在模式 B；否則就是模式 A。

定義模式 B 的規則： 參考決定的是影片的 結構，而不僅僅是它的精緻度。兩個不同的參考必須為同一個產品產生結構上不同的兩部影片。如果您發現自己在觀看參考後複製了模板的九個場景，那麼您就沒有達成核心目的——請參閱步驟 4B。

SKILL_DIR = 包含此檔案的目錄：

• prompt/creative-director-prompt.md — 總體簡報。請閱讀並遵循。
• docs/motion-language.md — 可重複使用的動態原則（詞彙庫）。
• docs/scene-kit.md — 模板的元件、Cube Motion 用法，以及如何重新組合場景。
• docs/example-breakdown.md — 一個實際的參考分解範例，展示預期的深度。
• docs/voiceover.md — 可選的旁白。
• docs/appstore-cut.md — ≤30 秒 / 30fps / 精確尺寸的 App Preview 食譜。
• template/ — 一個完整、可運作的 Remotion 專案：元件庫，以及模式 A 的影片。

步驟 0 — 預檢（僅執行一次）

1. 工具檢查。 確認 node、npx、python3、ffmpeg、ffprobe 已在 PATH 中。
2. 僅限模式 B — watch 技能（Claude Code 插件 bradautomates/claude-video，或執行 npx skills add bradautomates/claude-video -g）。如果缺少此技能，告訴使用者如何安裝，或請他們提供影格。絕不要自行編造分解。
3. 不需要 API 金鑰。 音訊由內建音效組合而成，在本機建構。

步驟 1 — 收集輸入（提問，不要猜測）

按照以下順序，詢問使用者尚未提供的內容。如果該工俱存在且答案是一個真正的選擇，請使用 AskUserQuestion；否則以文字提問（Codex 和其他主機可能沒有該工具）。

1. 參考影片（可選） — 「您有想讓我參考的宣傳影片風格嗎？請貼上網址，或說沒有。」 任何 yt-dlp 支援的網址，或本機路徑。
2. 產品名稱 — 確切顯示在螢幕上的名稱。
3. 描述 — 一兩句話：產品做什麼，為誰而做。
4. 功能 — 一個列表，按優先順序排列。
5. 素材 — 包含截圖和標誌的絕對路徑。

如果 程式碼庫 可用，請先閱讀：商店列表、README、package.json/pubspec.yaml 和行銷文案通常包含真實的名稱、描述和功能列表。請確認您找到的內容，而不是讓使用者重新輸入。絕不要捏造產品事實、統計數據或引用；如果您引用產品，請逐字引用。

然後確認交付項目（9:16、16:9、App Store 886×1920 / 1920×886）和時長（模式 A 預設 33 秒；模式 B 則接近參考影片的長度）。

步驟 2 — 僅限模式 B：觀看參考影片並進行逆向工程

使用 watch 技能。不要只依賴單一方法：

• 中繼資料 — 長度、fps、字幕（許多高級影片沒有旁白）。
• 場景切換偵測 — 硬剪輯的數量本身就是一項發現：一部 27 秒內有四個剪輯的影片是連續鏡頭影片。
• 均勻取樣 — 每 0.5–2.5 秒取 30–60 個影格。將它們排列成帶有時間戳的連環圖，並依序閱讀： ffmpeg -i ref.mp4 -vf "fps=2,scale=512:-1" frames/u_%03d.jpg
• 逐影格檢視（8–12fps）針對每個招牌過場。

如果下載失敗並出現 HTTP 403（YouTube 封鎖某些用戶端），請使用另一個播放器用戶端擷取漸進式串流，並將 watch 指向本機檔案：

yt-dlp --extractor-args "youtube:player_client=mweb" -f "18/b[height<=720]" -o ref.mp4 <url>

360p 的副本就足夠了：動態和結構得以保留，且影格在 512px 下進行分析。

自行閱讀影格。 撰寫分解：幕次及其比例、基礎、節拍率、每個過場、鏡頭移動、字體、顏色、構圖——並命名使其成為 那部 影片的招牌裝置。您將在 4B 中遵循它們。

步驟 3 — 研究產品（檢查，不要假設）

Read 每張截圖和標誌。找出最有視覺衝擊力的畫面，取樣真實的品牌顏色，並將每個功能映射到能證明它的螢幕（沒有畫面的功能是字體節拍）。尋找您可以誠實展示的真實流程——真實的查詢、真實的結果、真實的標籤——而不是編造展示內容。

步驟 4 — 結構

4A — 模式 A：內建創意系統

使用模板的影片：鉤子 → 一鍵承諾 → 壓力 → 裁決/獎勵 → 「不僅如此」廣度 → 裝置環繞 → 最具衝擊力儀表板 → 節奏性標語 → 標誌組合。將每個場景的文案、畫面和外觀重新定位到產品。只有當產品真的沒有內容可以放入某個場景時，才刪除該場景。

4B — 模式 B：從參考影片衍生場景列表

1. 取得參考影片的 幕次及其比例；將它們縮放到目標長度。
2. 取得其 節拍率 和 剪輯數量。
3. 根據產品分析，為每個幕次分配一個任務。
4. 為每個幕次，命名您要複現的參考裝置，並建構它——為招牌裝置撰寫新的場景元件是預期中的。
5. 刪除參考影片未驅動的模板場景。

自我檢查，並在文件中回答：「如果我將此參考換成另一個，哪些場景會改變？」 如果答案只是「文案和顏色」，請重新開始 4B。

撰寫分鏡腳本和製作計劃。將所有內容儲存為 CREATIVE_DIRECTION.md，在模式 B 中，將參考證據（連環圖）保存在其旁邊。

步驟 5 — 初始化

將 template/ 複製到輸出目錄（例如 <product>-promo/），然後執行 npm install。 四個合成：PromoVertical 1080×1920、PromoLandscape 1920×1080、 PromoStorePortrait 886×1920、PromoStoreLandscape 1920×886。

步驟 6 — 建構

• src/theme.ts — 調色板、screens、LOGO，以及 T/dur 場景邊界。
• 素材 — 複製到 public/app-screens/ 和 public/logo/。
• 場景 — 模式 A：重新定位九個場景。模式 B：從 4B 撰寫場景。
• 動態有兩個層次（請參閱 docs/scene-kit.md）：
  • 電影級別 — 裝置、攝影機、飛越、圖表：springs.ts、easings.ts、motion.ts、interpolate。
  • UI 和字體 — 標籤、晶片、列表行、字幕、徽章以及任何改變狀態的文字：Cube Motion，透過 src/animations/cube.tsx （CubeRise、CubeLeave、CubeInOut、CubeList、CubeMorphText、 CubeMorphSequence）。一個改變狀態的狀態標籤是 CubeMorphText；一個進入的列表是 CubeList。每個 at 都是封閉 <Sequence> 內的一個影格。永遠不要直接在場景中匯入 cube-motion——它的動畫是基於時間的，只有橋接器能讓它們影格精確。
• 可信度：永遠不要顯示與疊加層矛盾的畫面；不要有捏造的統計數據；不要有虛構的引用；沒有真實數據的圖表不要帶有軸線值。

步驟 7 — 音訊（預設無音樂）

1. 撰寫 sound.json：每個畫面事件一個提示，{ "fx", "at", "vol" }。每個音效都必須有意義——按下時發出點擊聲、落地時發出彈出聲、鏡頭移動時發出呼嘯聲、文字自行書寫時發出打字聲、結果出現時發出提示音。
2. 可選配音 — 僅當使用者要求旁白時。撰寫 voiceover.json （每個場景一行簡短臺詞，at = 該場景的提示點）並執行 python3 scripts/voiceover.py。引擎：say（macOS，無需金鑰）或 openrouter （僅當使用者已設定 OPENROUTER_API_KEY 時）。每個 take 都會與腳本進行比對，如果模型回答而不是朗讀，則重試。透過改寫臺詞來修正超時的行，而不是加快節奏。
3. python3 scripts/build_audio.py — 混合效果（在有任何配音時進行壓縮），不加入音樂和背景音。然後設定 AUDIO_SRC = "audio/master.wav"。

步驟 8 — 驗證，然後渲染

成功的渲染不等於驗證。

• 在每個節拍處渲染靜態畫面，以您要輸出的每個方向渲染，然後 Read 它們。修正碰撞、裁切、溢出、不符合品牌的顏色、矛盾。
• 渲染，然後對 已編碼的 MP4 進行取樣（1 影格/秒）並閱讀整個序列。
• 檢查檔案：ffprobe（大小、fps、影格數、音訊串流）、blackdetect、freezedetect，以及使用 ffmpeg -v error -f null - 進行解碼測試。
• 如果有旁白，聽寫最終臺詞並與腳本進行比對。

步驟 9 — App Store 剪輯（如果要求）

≤30 秒、30fps、精確的裝置尺寸。溫和加快速度，在安靜間隙中更用力，輸出為 30fps；請參閱 docs/appstore-cut.md。永遠不要使用信箱模式或拉伸。

主機注意事項

• Claude Code — 安裝到 ~/.claude/skills/promo-video/。
• Codex — 安裝到 ~/.codex/skills/promo-video/。無 AskUserQuestion；以文字提問。

交付 CREATIVE_DIRECTION.md 和渲染完成的檔案，並附上它們的完整路徑。