Communitygithub.com

Motion Studio

將一個提示轉換為完成的動態圖形影片(MP4)——腳本、分鏡、動畫場景(動態文字、3D、轉場、鏡頭移動)、配音、同步字幕、音效、音樂閃避以及音量正規化的混音。當使用者要求宣傳片、解說片、發布預告、TikTok/Reels/Shorts、產品演示或任何動畫影片時使用。

Motion Studio 是什麼?

Motion Studio 是一個全端 AI 代理技能,可將單一提示自動轉換為專業動態圖形影片,無需 After Effects 或傳統剪輯軟體。它整合了腳本撰寫、分鏡生成、基於 Chromium 的無頭渲染、多供應商語音合成(包括 Edge-TTS、ElevenLabs 和 Piper)、自動字幕、音樂閃避以及符合 LUFS 標準的音訊混音。支援多種長寬比(9:16、16:9、1:1、4:5)和自訂場景模組,開發者可透過 JavaScript 擴展內建場景類型。該技能強調迭代工作流程:預覽靜態幀、檢查文字可讀性與佈局,然後以平行瀏覽器頁面進行全解析度渲染。適用於 Claude Code、Cursor、Codex 等支援本地腳本執行的平台。

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

在你喜歡的 AI 中提問

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

說明文件

Motion Studio 是做什麼的?

你是動態設計師、剪輯師和混音師。你編寫 storyboard.json;這個資料夾中的腳本會在無頭 Chromium 中逐幀渲染,添加語音、字幕、音效設計和音樂,並輸出完成的 MP4。無需 After Effects,無需時間軸。

以下所有路徑皆相對於此技能資料夾(SKILL_DIR)。使用 python3 SKILL_DIR/scripts/... 執行腳本。

工作流程

1. 簡報(只詢問你無法推斷的資訊)

確定:目標和受眾、平台/格式(9:16 TikTok/Reels/Shorts - 預設,16:9 YouTube,1:1,4:5)、長度(預設 20-40 秒)、語言、行動呼籲、品牌顏色。如果使用者提供足夠資訊,不要追問——用一句話說明你的假設並繼續進行。

2. 腳本

  • 在頭 2 秒內鉤住觀眾:一個大膽的主張、一個問題或一個數字。
  • 每個場景一個構想,4-8 個場景。約每秒 2.5 個口語詞。
  • 簡短的句子。以應被朗讀的方式書寫數字。
  • 以一個明確的行動(CTA)結尾。

3. 分鏡

建立一個專案資料夾(例如 ./videos/<slug>/),內含 storyboard.json。 閱讀 references/storyboard.md 了解每個欄位、場景類型和屬性。 從 templates/storyboard.vertical.json 或 templates/storyboard.horizontal.json 開始。

經驗法則(更多內容請見 references/motion-design.md):

  • 螢幕上的文字是標題,而非旁白。每個場景 2-6 個字。
  • 將關鍵詞包在 *星號* 中,以強調色凸顯。
  • 變化場景類型和轉場;避免連續三次使用相同轉場。
  • 將使用者的截圖/標誌放入 <project>/assets/ 並使用 image 場景。
  • 場景時長會自動跟隨語音;僅對無聲場景設定 duration。

4. 檢查設定(首次使用)

python3 SKILL_DIR/scripts/doctor.py - 修正所有標記為 ✗ 的項目。它本身不安裝任何東西;build.py 在首次使用時執行 npm install。若要使用自然免費語音:pip install edge-tts。

5. 預覽靜態幀並檢查

python3 SKILL_DIR/scripts/build.py <project> --stills 然後用你的圖片檢視器/讀取工具開啟 <project>/build/contact_sheet.png(以及 build/stills/ 中的單幀)並檢查:文字是否適合且可讀、沒有內容藏在字幕後面、層級關係清晰、顏色有對比。修正分鏡後重複此步驟。切勿跳過此步驟——這比完整渲染快得多。

6. 渲染

python3 SKILL_DIR/scripts/build.py <project> → <project>/out/<title>.mp4 (--preview 以半解析度渲染以便快速檢查動態,--workers N 設定平行瀏覽器頁面,--voice edge|elevenlabs|piper|say|espeak|silent 強制指定供應商。)

7. 驗證與交付

  • 使用 ffprobe 檢查 MP4:時長、解析度、是否有音訊流。
  • 提取 2-3 幀(ffmpeg -ss 5 -i out.mp4 -frames:v 1 f.png)並檢查。
  • 告知使用者檔案位置、使用哪個語音供應商,以及 build/captions.srt 存在以供支援字幕檔案的平台使用。
  • 如果語音回退到 espeak 或 silent,請說明並提供如何取得更好語音的方法。

自訂場景

當內建類型不夠用時,請在專案中編寫場景模組(<project>/scenes/my-scene.js)並使用 "type": "custom", "module": "scenes/my-scene.js"。API 與範例:references/scene-api.md。動畫必須是時間的純函數——絕不使用 CSS 過渡、setTimeout、requestAnimationFrame 或 Date.now()。

音訊

  • 語音供應商,依自動順序:ElevenLabs(ELEVENLABS_API_KEY)→ edge-tts(免費,線上)→ Piper(離線,PIPER_MODEL)→ macOS say → espeak-ng → silent。
  • 音樂:預設為生成的背景音樂("music": {"generate": "pulse"|"pad"});優先選擇使用者的免版稅音軌:"music": {"file": "assets/track.mp3", "volume_db": -16}。音樂會自動在語音下方閃避。"music": "none" 可停用。
  • 音效會自動放置在轉場、列表項目、計數器和 CTA 點擊處。可透過每個場景的 "sfx": [{"name": "impact", "at": 0.4}] 添加更多。內建名稱:whoosh、whoosh2、pop、click、tick、impact、riser、ding。可透過放置 <project>/assets/sfx/<name>.wav 覆蓋任何音效。使用 "sfx": false 停用自動音效。
  • 最終混音會正規化為 -14 LUFS / -1 dBTP(可透過 "loudness_lufs" 更改)。

疑難排解

  • Chromium 無法啟動 → cd SKILL_DIR/scripts && npx playwright install chromium,或設定 CHROME_PATH 指向已安裝的 Chrome。
  • 文字溢出 → 縮短文字;標題會自動調整,但長列表/終端機行不會。
  • 3D 場景為黑色 → GPU 不可用;渲染器已使用 SwiftShader,僅速度較慢。
  • 渲染緩慢 → 迭代時使用 --preview;在多核心機器上使用 --workers 4。
  • 字幕不同步 → 供應商未提供單詞時間戳(piper/say/espeak);時間為估計值。edge-tts 和 ElevenLabs 提供精確時間。

相關技能