Communitygithub.com

igorcacerez/motion-video-studio

透過程式碼建立動態設計影片、廣告、解說影片與 2D/3D Reels,使用 Three.js、逐鏡頭參考、動態字體、真實 UI、同步音訊與確定性渲染。可與 Claude Code 或 Codex 搭配使用,製作此類影片或進行視覺重建。

motion-video-studio 是什麼?

Motion Video Studio 是一個 AI 代理技能,旨在將簡報轉換為可編輯的原始碼、審查過的影格、音訊和 MP4 影片。它基於 Movez 課程,提供完整的生產管道,從參考分析、腳本和分鏡規劃,到使用 Three.js 的確定性渲染、動態排版和音訊同步。此技能支援多種模式,包括產品影片、UI 變形/循環、3D 元素和長片,並針對 Claude Code 和 Codex 進行了最佳化。它強調嚴謹的審查流程,要求至少三輪記錄在案的審查,並檢查渲染的 MP4 檔案,以確保輸出品質。其核心引擎會強制執行確定性渲染規則(禁止 `Math.random`、時鐘、`requestAnimationFrame`),並提供用於素材收集、節拍偵測、音訊合成和品質保證的腳本。

相容平台✓Claude Code✓Codex CLI✓Cursor
npx skills add https://github.com/igorcacerez/motion-video-studio-skill/tree/HEAD

在你喜歡的 AI 中提問

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

說明文件

Motion Video Studio

將簡報轉換為可編輯的原始碼、審查過的影格、音訊和 MP4。本技能基於 Movez 課程;請參閱 12 章對照表。啟用此技能不代表能保證專業品質:請自行製作、檢查並修正成品。

從正確的模式開始

  • 與範例類似的參考影片: 閱讀 逐鏡頭分析 和 效果配方。參考影片位於 examples/reference/original.mp4;這是學習材料,其版權與程式碼分開。
  • 產品影片: 執行 npm run gather -- --url URL --out assets/brand(只使用提供的 URL;會生成桌面/行動裝置截圖、圖片/圖示、顏色、字型,以及授權為「未驗證」的 inventory.json),同時也要收集 URL、真實畫面截圖、商標、字型、顏色、已核准的文字和 CTA。範本中包含明確標示為虛構的 UI;在宣傳現有產品前,請先將它替換為真實圖片。
  • UI 變形/循環: 使用 assets/morph/ 中的說明和範本。請閱讀 production.md 中的循環章節。
  • 3D 元素: 閱讀 threejs-guide.md,重複使用 scripts/three-helpers.mjs 和範本 assets/three/。Three.js 0.187.0 依賴項已包含在套件中;94 份官方文件 附在裡面供查詢。使用攝影機、幾何體、材質、光源和隨 t 變化的動畫;不要將手冊中的即時循環直接搬進渲染器。
  • 長片/角色: 閱讀 assets/brief-template.md 中的導演範本;為每個專案維護一份角色身分聖經和動畫指南。
  • 局部修改: 保留現有原始碼,並只使用 --start 和 --duration 渲染受影響的片段。

在 prompts.md 中選擇你的目標層級(L1 煙霧測試 … L5 長片):它會決定你要問多少問題、要審查多少次,以及何時停止。一句話的提示只測試引擎,不是測試想法;要為自己的作品負責,就必須要求提出論點、參考資料和可驗證的事實。

以下指令是相對於包含此 SKILL.md 的資料夾。請在環境中找出該資料夾;不要假設當前目錄就是技能所在。請為每部電影製作一份套件的副本,並保留可重複使用的安裝檔。npm run new -- --dir ../my-movie 會建立 docs/(簡報、風格指南、分鏡表 md/json、變形規格、審查記錄)、refs/、assets/、audio/ 和 out/,且不會覆寫既有檔案;請每個品牌使用一個資料夾/工作階段。

生產合約

  1. 只收集缺少的輸入項目:主題/產品、目標、片長、格式、品牌、參考資料、配樂/旁白、預算和交付項目。善用已提供的內容。記錄可逆的假設。
  2. 在開始動畫前分析參考資料。執行 npm run analyze -- --input VIDEO --fps 4 --out out/reference。打開影格。記錄風格、鏡次、節奏、遮罩、連續性和音訊;區分觀察、假設和測量。若要精準計時,請檢視原始影片中的連續影格。
  3. 撰寫 docs/style_guide.md 和 docs/shotlist.md,包含開始/結束、訊息、主要物體、入場、停留、出場、連續性、攝影機和音效提示。使用 assets/brief-template.md。必要時提交這些文件以做出創意決策。文章包含要求核准的提示:切勿因沉默而假設核准。若已獲准進行完整工作,則繼續執行可逆的本地操作。 3b. 將 docs/shotlist.json 轉換為節拍網格計畫:npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json。它會指出偏離節拍的鏡頭、超過 4 秒沒有新內容的間隔,並為 sfx 生成提示。在撰寫動畫前顯示結果。
  4. 使用 scripts/beats.py 測量現有配樂;確認拍號和強拍。如果沒有音樂,請使用 npm run audio 合成原創音樂。使敘述與語音同步,並將網格作為輔助;不要為了配合節拍而刪減文字。 4b. 在渲染任何新頁面之前,請執行 npm run lint -- --input FOLDER:它會檢查 Math.random、時鐘、計時器、requestAnimationFrame、CSS 轉場、will-change、光暈,以及缺少 window.seek。錯誤會阻止渲染。
  5. 在完成修飾前先建立關鍵影格和動態分鏡。預設使用引擎 A(assets/starter/)。只有在需求證明必要時才選擇 Remotion/HyperFrames:路由架構在 references/production.md 中。不要養成安裝所有引擎的習慣。
  6. 在 docs/review_log.md 中進行至少三輪有文件記錄的審查:每個鏡次 3–5 張劇照、按節拍的聯絡表、360 像素測試,以及過渡區的影格範圍。在每一輪中,記錄三個最嚴重的問題及其時間戳記,修正後再審查。評估鉤子、可讀性、動態、多樣性、構圖、品牌和同步性,分數為 1 到 10。目標:全部 ≥8,並有證據;當你無法看到/聽到時,不要憑空捏造分數。
  7. 渲染主版本、混合音訊、執行 qa 並準備 review。重新評估編碼後的 MP4,而不只是畫布。對於每種長寬比,重新構圖版面;不要裁剪橫向影片來製作直向影片。
  8. 交付 MP4、海報、全程聯絡表、原始碼、簡報、素材/版權清單和限制事項。只有在影片需要循環時才生成拼接測試。說明哪些部分已測試過,哪些仍需要人工審查。發佈、付費服務和上傳需要使用者明確授權。

引擎與視覺語言規則

  • window.seek(t) 必須以確定性方式繪製完整影格。影格之間不得有狀態、真實時鐘、Math.random、計時器、CSS 轉場或 requestAnimationFrame 出現在渲染路徑中。在繪圖時根據種子重新創建 PRNG,或根據時間索引雜訊。
  • 在第一個影格之前就緒字型和素材。使用輸出解析度的畫布、deviceScaleFactor:1 和本地資料。不要在攝影機放大的文字上使用 will-change。
  • 使用解析彈簧;對於多個目標,透過 track 加總階躍響應。排版:無明顯 overshoot;UI:低調;吉祥物:如果方向允許則富有表現力。常數和輔助函數位於 scripts/motion.mjs 中。
  • 文章方向:避免中央標題疊在漸層上、所有東西都淡入、角落的裝飾標籤、邊框、UI 上的光暈,以及通用的粒子效果。除不同方向指導外,使用一種顯示字型、一種 UI 字型和一組強調色。參考影片中表示費用的語意紅色是功能性例外。
  • 每 2–4 秒在敘事上創造新意;在長片中,每 3–5 秒安排一個回報。在前 2 秒內建立鉤子。不要將新奇誤認為持續的騷動。
  • 在場景之間保留物體:大 → 小 → 周邊錨點 → 繼續。變形文字在變形開始後才出現,並在下一次變形前消失。游標和點擊必須對應實際動作。
  • 對現有產品使用真實畫面截圖和數據。不要虛構指標、推薦或功能。對於概念,明確宣告 UI 是虛構的。
  • 對於循環,要求影像、位置、速度和音訊的連續性。t % duration 只重複時鐘:測試拼接點,並讓狀態收斂。
  • 文章參考主版本:60 fps,每影格四個子影格,H.264 yuv420p,CRF 16。--fps 30 --sub 1 --scale 0.5 是經濟的動態分鏡,不是這個主版本。
  • 音訊:目標 −14 LUFS 整體響度;保留峰值空間(此套件中目標真實峰值 −1.5 dBTP)。在混音和編碼後測量。提供的音樂檔案保持原始狀態;為混音製作副本。

現成腳本

所有參數和範例請參閱 scripts.md。不要重寫已存在的輔助函數。

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../my-movie
npm run gather -- --url https://produto.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

渲染器只透過 loopback 開啟本地素材,並在瀏覽器中封鎖外部網路。這並不表示外部程式碼是安全的:執行前請閱讀程式碼,並尊重環境的權限。請勿列印金鑰或將 .env 納入共用的專案中。基礎套件無需 API 或付費額度即可運作。

相關技能