Communitygithub.com

emrecv/motion-graphics-director

建立並優化快速、乾淨的 Remotion 動態圖像與視覺解說影片,結合強烈的開場鉤子、節制視覺設計、真實圖示與標誌、ElevenLabs 旁白,以及精確的幀為基礎動畫。適用於程式生成的影片,非互動式網站動畫。

motion-graphics-director 是什麼?

Motion Graphics Director 是一個專為 AI 代理(如 Claude Code、Cursor、Codex)設計的技能,用於透過 Remotion 框架建立專業、乾淨且引人入勝的動態圖像與視覺解說影片。其核心哲學是以「前三秒內建立鉤子」為開端,避免冗長的標題卡或商標介紹,直接呈現視覺驚喜或問題轉換,快速抓住觀眾注意力。技能要求使用節制的中性色彩、大量留白、協調的圖示與真實品牌標誌(非假 SVG 佔位符),並以 ElevenLabs 提供的清晰旁白為主,避免背景音樂與過多文字標題。它支援 1080×1920、30 fps 的預設輸出,並提供完整的專案腳本、素材指南與動畫參考(如 motion-and-remotion.md),確保動畫基於幀編號、可獨立渲染與 scrubbing,無 CSS 動畫或未經種子的隨機性。此技能特別適合用於程式碼生成的說明影片、產品展示或教學內容,而非互動式網站動畫。其生產流程包含提取受眾與訊息、撰寫開場視覺與旁白、建立風格框架、錄製旁白、建立開場三秒與代表性轉場,最後透過 review.md 進行嚴謹檢討,確保節奏、因果清晰度與視覺克制。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/emrecv/motion-graphics-director/tree/HEAD/skills/motion-graphics-director

在你喜歡的 AI 中提問

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

說明文件

動態圖像導演

立即讓機制或概念變得有趣。下方的預設創意設定反映了創作者的偏好;使用者明確的專案簡報可以覆蓋這些設定。技術上的成功不代表視覺上的成功。

創意預設

  • 在前三秒內建立鉤子。 以令人驚喜的視覺對比、可識別的問題、轉變或具體的報酬開場。立即開始動作。不要有介紹性標題卡、商標預告或在鉤子之前進行緩慢的解釋。單獨測試前 90 幀(30 fps)。
  • 快速、乾淨的動畫,搭配刻意緩動。 以 1–3 秒的視覺節拍和 8–18 幀的主要動作(30 fps)開始;根據旁白和理解度調整。這些是起始範圍,不是強制剪輯點。推進思路,而不是停留在已完成的場景。保持因果序列易於理解。
  • 一個焦點和充足的負空間。 留白代表呼吸空間,包括在深色背景上。使用節制的中性或柔和色彩,無霓虹或發光效果,無裝飾性邊框或輪廓卡片。使用適度的圓角,在 1080 px 寬度下,中型面板約 12–24 px;保持比例。
  • 旁白承擔解釋。 預設為英文,搭配 ElevenLabs 語音。避免大字標題、段落、常規字幕、步驟計數器、章節標籤、進度條、裝飾性品牌標題和警告/免責聲明疊加。當有助於識別移動中的物體時,允許使用簡短的 1–4 字標題或短標籤。將來源、注意事項和實現說明保留在交付文件中;讓旁白準確,但不要讓畫面雜亂。僅在要求時提供單獨的字幕。
  • 使用精心設計的素材。 從一個連貫的套組中獲取乾淨的現代圖示,並從官方品牌資源中獲取真實的相關產品標誌。不要發明通用的佔位符 SVG 圖示或假標誌。匹配光學尺寸、描邊粗細和風格。請遵循 icons-and-logos.md。
  • 無背景音樂。 使用語音加上選擇性的音效。音效標記重要事件,且必須保持在語音音量以下。Bencho 不是依賴項,其素材也不包含在內。

從專案開始

檢查現有原始碼、素材、腳本、鎖定的依賴項和先前的決策。對於新的 Remotion 專案,執行 python3 <skill>/scripts/new_project.py <new-directory>,然後在該目錄中執行 npm ci。捆綁的專案提供了經過測試的渲染和媒體輔助功能。其 FORM 和 CDN 組合是舊版技術範例,非當前的藝術指導範例:不要將其中的長鏡頭、標題、標籤、顏色或圖示繪製複製到新影片中。

保持內容、視覺代幣、旁白、素材和時間線可單獨編輯。使用本地媒體和已載入的字體進行最終渲染。查閱官方 Remotion 技能以了解不熟悉的 API,並匹配已安裝的版本,而不是無聲升級。

製作流程

  1. 提取觀眾、一個核心訊息、平台、時長、參考資料、素材、語言和語音。預設:1080 × 1920,30 fps,約 20 秒。僅詢問遺漏的資訊。
  2. 一起撰寫開場視覺和第一句旁白。規劃一個簡短的因果鏡頭列表,包含可變長度的節拍。閱讀 art-direction.md;對於流程解釋,也請閱讀 technical-explainers.md。根據主要來源驗證技術說法。
  3. 當風格未定時,展示兩個真正不同的方向,並附上代表性的風格幀。如果使用者已經選擇了外觀,則直接進行。不要引入常規的審批關卡。
  4. 撰寫簡潔的語音腳本,獲取素材,並遵循 audio.md。在鎖定剪輯之前,生成或導入已批准的 ElevenLabs 旁白。如果無法存取語音或選擇語音,則準備腳本和動態腳本;清楚標記預留時間,不要發明完整的旁白。
  5. 建立開場 3 秒和一個代表性的轉場。使用 motion-and-remotion.md。一旦鉤子和動畫效果良好,再擴展影片。修正受影響的場景,而不是重複渲染所有內容。
  6. 使用 review.md 進行審查:開場鉤子、節奏、因果清晰度、節制構圖、語音對齊、選擇性音效、無音樂。在最終 MP4 之前渲染一個全幀率預覽。

實作不變量

從幀編號推導動畫,包括緩動和音訊包絡。無自主 CSS 動畫、牆壁時鐘計時器或未經種子的隨機性。獨立的幀渲染和 scrubbing 必須一致。等待實際字體和素材。使用已載入的字體測量文字;重組長文字而不是無差別地縮小。

快速不等於突兀,緩動不等於彈跳。使用受控的加速和穩定、協調的重疊和適當的直接剪輯。永遠不要僅基於靜態圖或峰值測量就聲稱看過或聽過匯出結果。

交付與改進

交付可播放的影片、可編輯的專案、素材來源以及實際檢查的簡潔記錄。將文件保留在影片本身之外。對於技能變更,使用 evaluation.md;從觀察到的失敗中改進規則,而不是聲稱保證的品質或速度。

相關技能