JuniverseLi/motion-studio-skill

動態設計工作室

使用時機

當需要利用 AI 編碼代理（例如 Claude Opus 5.5）透過程式碼驅動的動態工程管線來製作簡短的產品發佈影片時（例如 20 秒、1080x1080 解析度），請使用此技能。用於以 React 程式化地編排、迭代、調整參數並渲染影片，使文案、顏色、時間與格式可以在程式碼中直接調整，並以確定性方式重新渲染。

按階段的工具鏈

從 Remotion + Remotion Skills 開始；僅挑選所需的其他模組。組合存在於程式碼中；更改文案/顏色/時間/格式並重新渲染。 循環：簡報 -> 分鏡腳本 -> 資源 -> 佈局 -> 動畫 -> 增加深度 -> 預覽 -> 調整 -> 渲染。

階段	倉庫	網址	用途	使用時機
設計+分鏡	Penpot	https://github.com/penpot/penpot	佈局、可重用元件	需要佈局設計與可重用 UI 元件時
設計+分鏡	Excalidraw	https://github.com/excalidraw/excalidraw	草稿分鏡腳本	繪製視覺分鏡草圖時
設計+分鏡	Fontsource	https://github.com/fontsource/fontsource	自託管字型	自託管印刷樣式與字型時
設計+分鏡	Lucide	https://github.com/lucide-icons/lucide	一致的 SVG 圖示	需要一致的 SVG 圖示系統時
資源+角色	SVGO	https://github.com/svg/svgo	清理向量圖	最佳化與清理向量圖形時
資源+角色	sharp	https://github.com/lovell/sharp	調整/裁切圖片	調整尺寸與裁切點陣圖像時
資源+角色	Lottie-web	https://github.com/airbnb/lottie-web	播放向量動畫	在引擎內播放向量動畫時
資源+角色	Rive Web	https://github.com/rive-app/rive-wasm	角色狀態機	嵌入互動式角色狀態機時
時間軸	Motion	https://github.com/motiondivision/motion	彈簧、佈局轉場	實現彈簧物理與佈局轉場時
時間軸	GSAP	https://github.com/greensock/GSAP	複雜時間軸	編排複雜的程式化動畫時間軸時
時間軸	Anime.js	https://github.com/juliangarnier/anime	SVG/物體編舞	編排 SVG 路徑與物體屬性時
時間軸	Theatre.js	https://github.com/theatre-js/theatre	視覺化動態調整	視覺化微調與調整動態參數時
3D+拋光	Three.js	https://github.com/mrdoob/three.js	3D 渲染	渲染 3D 場景與幾何圖形時
3D+拋光	React Three Fiber	https://github.com/pmndrs/react-three-fiber	Three.js 的 React 包裝	在 React 中建立宣告式 3D 場景時
3D+拋光	Drei	https://github.com/pmndrs/drei	相機、燈光、場景助手	添加相機、燈光與場景佈置助手時
3D+拋光	Postprocessing	https://github.com/pmndrs/postprocessing	光暈、色彩分級	應用光暈、色彩分級與後製處理時
生產+匯出	Remotion	https://github.com/remotion-dev/remotion	在 React 中編排+渲染影片	主要框架；在 React 中編排與渲染影片
生產+匯出	Remotion Skills	https://github.com/remotion-dev/skills	代理手冊，透過 npx remotion skills add 安裝	為編碼代理配備 Remotion 規則與最佳實踐
生產+匯出	FFmpeg	https://github.com/FFmpeg/FFmpeg	編碼/封裝、ffprobe	提取影格、編碼/封裝影片、串流檢查
生產+匯出	Mediabunny	https://github.com/Vanilagy/mediabunny	瀏覽器媒體管線	處理基於瀏覽器的媒體管線

設定

環境需求：Node.js、Claude Code、FFmpeg/FFprobe。

初始化專案：

npx create-video --yes --blank launch-video
cd launch-video
npx remotion skills add
npm run dev

在第二個終端機中執行代理。

目錄佈局：

• public/ - 專案資源與 reference.mp4
• BRIEF.md - 製作簡報與影格規格
• frames/ - 提取的分析影格
• out/ - 渲染的靜態圖與影片匯出

工作流程

1. 參考分析

以低幀率提取參考影片影格，然後圍繞關鍵動作事件提取連續影格：

ffmpeg -i reference.mp4 -vf "fps=2,scale=960:-2" frames/ref-%04d.jpg

鏡頭事件的生命週期如下： 起始狀態 -> 游標移至動作 -> 按壓 -> 顯示結果 -> 可讀停留

參考時間軸範例 (30fps)：

• 影格 120：卡片穩定
• 影格 150：游標靠近
• 影格 180：游標在按鈕上
• 影格 195：按鈕按下
• 影格 210：結果出現
• 影格 234：標籤可讀
• 影格 420：結束轉場

注意：代理的空間估計為近似值；請針對提取的影像驗證所有座標。

分析 reference.mp4。回報尺寸、fps 與持續時間。將影格提取至 frames/ref-%04d.jpg。產生 REFERENCE.md，記錄進入、落地、停留與切出的時間戳記與影格編號；邊界框；移動方向、持續時間、縮放、不透明度與超調；顯示順序；以及閱讀停留時間。將所有值標記為測量值、估計值或創意值。使用我們的資源提出一個原創鏡頭。列出遺失的資源。在實作前回報計畫。

2. 簡報

結構化 BRIEF.md 並包含明確的座標與時間規格：

• 組合：啟動組合 1080x1080，30fps，總共 600 個影格（全域包含的影格編號）。
• 佈局：明確的像素座標、調色板（#101318 背景、#F5F7FA 文字、#8AD8B0 強調色）、64px 邊距、標題框最多 2 行、產品卡片矩形、明確的圖層順序。
• 開場（影格 0–119）：標題在影格 0–18 進入，卡片在影格 18–42 進入（三次方 ease-out 夾止），停留。
• 產品（影格 120–419）：游標路徑避開文字，按壓縮放 1 -> 0.92 -> 1 於影格 192/195/201，顯示於影格 210–234，停留。
• 結束（影格 420–599）。
• 實作規則：從 useCurrentFrame 驅動數值，公開常數、固定種子，將音訊點擊對齊影格 195、重擊對齊影格 210。
• 階段性審查：先建立開場，在影格 0、18、42、60、119 渲染靜態圖並加上預覽；回報狀態並等待回饋。稍後檢查影格 120、195、234、419、420、540、599。

讀取 BRIEF.md 與 Remotion 指引。檢查 public/。總結佈局座標、事件影格編號與緩動曲線。標記任何衝突的規格或遺失的輸入。僅實作第一個審查階段（影格 0-119）。在影格 0、18、42、60、119 渲染靜態圖與預覽片段。回報更改的檔案、視覺檢查，並在繼續前等待回饋。

3. 階段性建構

根據簡報逐場景實作：

• 使用 interpolate 或 spring 從 useCurrentFrame 驅動所有動態數值。
• 絕不使用 CSS 轉場（會導致渲染閃爍）。
• 使用確定性、已設定種子的隨機數值。
• 將所有時間從秒明確轉換為影格（例如，0.6s = 18 frames @ 30fps）。
• 將進入參數保留在程式碼中相鄰位置。
• 將佈局、時間與動態參數暴露為常數。

4. 審查靜態圖

渲染關鍵靜態圖以驗證視覺合成：

npx remotion still Launch out/opening.png --frame=60
npx remotion still Launch out/product.png --frame=240
npx remotion still Launch out/closing.png --frame=540

審查檢查：

• 文字可讀嗎？
• 結果可見嗎？
• 有裁切或重疊元素嗎？
• 結束空間足夠嗎？

在邊界影格間渲染部分轉場：

npx remotion render Launch out/transition.mp4 --frames=90-149 --codec=h264

5. 修正

使用四個明確欄位格式化所有錯誤報告與調整請求：

1. 位置（影格編號與元件）
2. 觀察到的問題
3. 需要的更改
4. 保持不變的部分

優先順序：遺失資訊與不可讀文字 -> 時間調整 -> 細節打磨。 在獨立會話中執行獨立批評，將批次限制在最多 5 個特定影格的修正。 修正執行循環：缺陷 -> 一個範圍內的編輯 -> 受影響的影格 -> 場景邊界 -> 正常速度播放。 區分場景局部與全域影格編號（例如，從 120 開始的序列中局部影格 30 等於全域影格 150）。

修正缺陷：游標在全域影格 210 重疊標籤。
位置：產品場景，影格 204-210。
觀察到的問題：游標路徑在影格 210 與標籤文字相交。
更改：在影格 204-210 之間調整按壓後游標路徑，使其與標籤保持 24px 間距。
保持不變的部分：保留按壓關鍵影格 (192/195/201)、顯示時機 (210-234)、卡片幾何、文案與音訊對齊。
在影格 195、210、222 與 240 渲染靜態圖，並在影格 180-249 渲染移動預覽。回報更新的座標。

6. 音效

• 將音訊點擊直接與可見的按鈕按壓同步（例如影格 195）。
• 將視覺顯示重擊與視覺出現同步（例如影格 210）。
• 透過音訊波形定位重擊並套用必要的偏移。
• 維護一個與視覺時間軸事件並列放置的音訊提示列表。
• 將音訊元素保持在獨立軌道上。
• 在耳機與手機喇叭上檢查最終音訊平衡。

7. 匯出

渲染最終影片：

npx remotion render Launch out/launch.mp4 --codec=h264

使用 ffprobe 檢查影片屬性：

ffprobe -v error -select_streams v:0 -show_entries stream=width,height,avg_frame_rate,duration -of json out/launch.mp4

預期輸出：1080x1080 解析度，30/1 幀率，約 20 秒持續時間。 以正常播放速度觀看渲染的檔案。將最終渲染結果與 BRIEF.md、時序資料及音訊提示列表一併保存。

8. 較長影片

• 定義每個場景的進場與出場狀態。
• 跨場景維護共享設定（字型、調色板、間距）。
• 一次建立一個場景。
• 考慮相鄰場景間的轉場重疊。
• 每當進行局部編輯時，驗證兩個場景的邊界。
• 提取並保存可重用元件。

品質檢查表

• 文案與排版：測試最長的標題；如果達到 3 行，請停止並縮短文案、加寬容器或重新定位。在匯出的影格中檢查真實字型渲染。
• 可重現性：所有數值透過 interpolate 或 spring 從 useCurrentFrame 驅動。無 CSS 轉場（防止閃爍）。確定性隨機種子。明確的秒數到影格轉換 (0.6s = 18f @ 30fps)。進入參數保持相鄰排列。
• 動作意圖：將動作分類為進入、停留、游標或轉場。一次調整一個參數來調整彈簧阻尼與剛度，並設定固定目標。
• 編舞：將標題到標籤的進入時間錯開約 0.1 秒。在 3 秒內添加微妙的推壓縮放 1.00 -> 1.03。在停留期間確保穩定的輔助動作。
• 注意力歸屬：將焦點導向按鈕直到動作回應，然後轉移到結果。游標路徑必須避免穿越標題文字。
• 閱讀窗口：驗證可讀性；8 個影格 (0.27s) 太短。以正常速度大聲朗讀文字。在手機顯示尺寸下檢查標籤。僅在入口處套用動態模糊；確保影格在閱讀停留期間清晰。
• 靜態圖與邊界：在影格 60、240、540 檢查靜態圖，確認文字可讀、結果可見、無裁切/重疊缺陷以及有足夠結束空間。透過部分渲染驗證轉場邊界。
• 音訊與匯出：將點擊音訊對齊可見按壓，將重擊音訊對齊視覺顯示。在耳機與手機喇叭上審查。使用 ffprobe 確認 1080x1080、30fps、約 20 秒持續時間，並以正常播放速度觀看。

選用付費快剪包裝（價格僅供示意）

提供「快剪」試行方案，示意價格為 $150：

• 範圍：一個功能、經核准的腳本、一個 20 秒 1080x1080 MP4、一張封面圖片、一輪修改。
• 準備：首先使用自有或已獲許可的資源建立樣本；計時製作工作。
• 合作：與即將推出產品的開發者合作；預先同意腳本、資源、截止日期、付款條件、修改範圍以及使用/作品集權利。
• 交付節奏：先發送 3 張審查靜態圖，然後是預覽片段，最後是最終輸出。
• 修改：要求客戶回饋嚴格與影格編號掛鉤。
• 合規性：檢查 Remotion 商業使用的授權要求。

來源

• 倉庫列表：@beamnxw，https://x.com/beamnxw/status/2110408774737432738（截至 2026-10-15，所有 20 個倉庫經確認存在於 GitHub；一行用途說明為該推文作者所寫，未經獨立測試）
• 工作流程、提示與方案：@beamnxw 的 X 文章「Motion Engineering with Opus 5.5: Build Launch Videos You Can Sell」，https://x.com/beamnxw/status/2108616740846420354（經改寫；影格編號、顏色與座標為該文章的實作範例，非強制要求）
• Remotion 文件：https://www.remotion.dev/docs/ai/coding-agents