Communitygithub.com

mryunkaka/remotion-visual-direction

設計 Remotion 影片,讓視覺具有個性、背景與動態更具生命力,避免淪為普通的幻燈片。在製作分鏡或場景時使用。

remotion-visual-direction 是什麼?

此技能專注於引導使用者運用 Remotion 框架,打造富有情感、動態與深度的視覺化影片,而非死板的投影片。它強調從敘事節奏的情感與資訊出發,選擇最適合故事表現的媒體類型(如插畫、授權素材、2D 形狀、SVG、Canvas 或 3D),並為色彩、形狀、光線、紋理、焦點與運動建立一致但有變化的規則。針對每個鏡頭,需明確設定主體/焦點、前景背景、比例、運動方向、攝影機運動與轉場理由,並將背景設計成可辨識的空間,透過大小、重疊、視差、光線或焦點變化構築深度。運動設計應包含一至兩個主要動作與流暢的次要動作,各鏡頭使用不同的攝影機運動(如平移、追蹤、推軌、環繞、傾斜)並搭配有意義的緩動與停頓。若故事需要人物,則根據風格選擇最合適的表現方式(插畫、2.5D 角色、授權素材或象徵性形狀),並確保角色設計各鏡頭一致,動畫時注意關節、重心轉移、預期動作與跟隨動作,避免所有部件以相同彈簧效果跳動。最後,強調 Remotion 的確定性與幀為基礎特性,建議透過靜止幀、聯絡表與動態預覽檢查設計,確保在目標螢幕上文字簡短可讀、位於安全區域,且不強制使用任何通用轉場或特效。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mryunkaka/remotion-video/tree/HEAD/.opencode/skills/remotion-visual-direction

在你喜歡的 AI 中提問

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

說明文件

視覺與動態指導方針

從敘事節拍的情感與資訊出發。選擇最適合故事的媒介與構圖:圖形插畫、授權素材、拼貼、2D 形狀、SVG、Canvas 或 3D(若確實支援)。建立一致的色板、形狀、光線、紋理、焦點與動態規則,但在各節拍之間提供變化。

針對每個鏡頭,設定主體/焦點、前景-背景、比例、動作方向、攝影機與轉場理由。將背景設計成可辨識的空間:環境形狀、表面、地平線、遠近距離、光線與情境細節。不要停留在只有漸層與幾個方塊的空白背景。透過大小、重疊、視差、光線或焦點變化來構築深度。僅在藝術風格確實需要時才加入霧氣效果。

設計一至兩個主要動作與流暢的次要動作。在不同鏡頭間選擇不同的攝影機運動——例如平移、追蹤、推軌、環繞、傾斜或靜止攝影機——並使用具有意圖的緩動與停頓。不要在所有場景中使用相同的縮放。僅在與場景相關時才賦予元素有機形狀。

角色與身體

若故事確實需要呈現人物,判斷哪種風格最合適:插畫風格、2.5D 角色、授權素材或象徵性形狀。不要使用不具說服力的形狀來繪製擬真人物。確保角色設計在各鏡頭間一致。對於分層插畫,應以合理的樞軸點為肩膀、手肘、手腕、頭部、視線、頭髮/衣物設定動畫;若鏡頭時間夠長,加入重心轉移、預期動作、跟隨動作與細微的呼吸動態。根據情緒調整時間,不要讓所有部件都以相同的彈簧效果跳動。避免人物看起來像一堆矩形疊加,除非這是刻意選擇的圖形風格。

若程式生成的角色品質降低成果,請簡化風格為整潔的剪影/剪紙,或選擇有明確授權的圖片/素材,而不是強行使用呆板的人物。避免漂浮物體、過度噪點紋理,以及模糊主題的虛假細節。

Remotion 必須是確定性且基於幀的。檢視場景的靜止幀、聯絡表與動態預覽,以偵測那些在程式碼中看起來不錯但在觀看時卻很差的設計。文字應簡短、在目標螢幕上可讀,且位於安全區域內。沒有通用的轉場、故障、粒子、顆粒或光效是必須強制使用的。

相關技能