by Rain Chu | 8 月 29, 2026 | AI , claude , codex , OpenAI , 圖型處理 , 影片製作 , 繪圖
AI 做動畫已經不只是叫模型生一段畫面。更實用的方向,是把動畫規則、鏡頭語言、渲染流程和品質檢查包成 Skill,讓 Codex、Claude Code 或其他 coding agent 知道該怎麼完成一支片。
這次整理的七個 AI 動畫 Skills,剛好涵蓋七種常見需求,從網頁動效、Logo 開場、數據動畫,到產品廣告、手繪故事和動態設計原則都有。它們不是同一類工具,也不需要全部安裝。先看自己要做什麼,再選對 Skill,會比堆一大包能力有效得多。
先講結論,短片該選哪一個
如果目標是快速做社群短片,我會先選 HyperFrames,它讓 Agent 用 HTML、CSS 和 JavaScript 描述畫面,再輸出成影片,對 Codex 很直覺,若內容以數字、圖表或年度回顧為主,Remotion 會更適合。產品網站想做成有電影感的廣告,可以直接看 video-shotcraft。
Logo 動畫 選 Pixel2Motion,中文故事轉手繪 日記選 story-to-handdrawn-video。GSAP AI Skills 負責把網頁互動 做得更有彈性和節奏,LottieFiles motion-design-skill 則像一位動態設計導演 ,幫 Agent 先把時機、緩動和編排想清楚。
Skill 最適合的任務 主要輸出 我會怎麼選 HyperFrames 網頁式動畫、短影音、產品解說 HTML 影片工程 想用 Codex 快速做片先選它 GSAP AI Skills 網頁互動、滾動動畫、UI 動效 可執行的前端動畫 網站看起來太硬時使用 Pixel2Motion Logo reveal、品牌開場 SVG、HTML、GIF 或影片預覽 手上只有點陣 Logo 時使用 Remotion Agent Skills 數據、圖表、字幕、批次影片 React 影片工程 需要精準時間軸與可重複生成時使用 video-shotcraft 產品宣傳片、網站功能廣告 電影感 Remotion 成片 有真實產品畫面時最有價值 story-to-handdrawn-video 中文故事、手繪日記動畫 直式手繪無聲影片 敘事型短片可以直接套流程 motion-design-skill 節奏、緩動、動態設計審查 設計規則與改進建議 搭配其他 Skill 一起用
Skill 和動畫工具有什麼不同
GSAP、Remotion 和 HyperFrames 是能真正執行動畫或渲染影片的工具,Skill 則是給 AI Agent 的工作說明,裡面會放最佳做法、檔案結構、動效規則、操作命令、常見失敗和驗收方式,它不會讓模型突然變成動畫師,但可以減少 Agent 亂猜 API、亂排時間軸和做出模板感畫面的機會。
如果你還不熟悉這種能力包,可以先看我整理的自訂 Skill 完整教學 ,它的重點不是多一個聊天指令,而是把可重複的製作方法交給 Agent。
1. HyperFrames,把網頁變成可渲染的影片
HeyGen HyperFrames 的核心很簡單,先用 HTML 寫畫面,再把瀏覽器中的動畫確定性地渲染成影片,Agent 可以處理分鏡、CSS、GSAP、素材、字幕、音訊和輸出,因此很適合做產品解說、社群短片、動態圖表與網站展示。
它和傳統剪輯軟體的差別,是畫面本身可以被程式控制,只要資料結構固定,同一套模板就能換內容重新輸出,想深入理解它的架構,可以接著看HyperFrames 用 HTML 寫影片 。
npx hyperframes init my-video --example blank
cd my-video
npx hyperframes preview
npx hyperframes render
2. GSAP AI Skills,讓網頁動效不再只是淡入淡出
GSAP AI Skills 是官方提供給 coding agent 的動畫知識包,涵蓋核心時間軸、Tween、ScrollTrigger、Flip、MorphSVG 和常見清理方式。它適合處理會浮、會彈、會跟著捲動改變的網站互動。
GSAP 的價值不是特效多,而是時間軸和控制能力成熟。Agent 知道怎麼設定 easing、stagger、觸發條件和資源清理後,做出來的動畫會比隨手拼 CSS transition 穩定很多。
npx skills add greensock/gsap-skills
3. Pixel2Motion,一張 Logo 變成品牌動態開場
Pixel2Motion 會先把 PNG、JPG 或截圖中的 Logo 重建成平滑 SVG,再設計 motion、logo reveal 和 HTML 動態展示,它不是單純把圖片放大縮小,而是先處理向量結構,再對圖形部件安排動作。
這個流程很適合品牌開場、App 啟動畫面和社群短片片頭,官方專案也加入幾何比對、動作幀截圖和最終畫面檢查,讓 Agent 不只產出會動的檔案,也留下可審查的證據。
npx skills add nolangz/pixel2motion
4. Remotion Agent Skills,用 React 做精準影片
Remotion Agent Skills 把 Remotion 的動畫、字幕、音訊、3D、圖表、渲染與元件設計規則交給 Agent。Remotion 本身以 React 組成影片,每一幀都能由程式和資料決定,因此很適合年度回顧、排行榜、圖表動畫、批次內容和字幕短片。
它的學習成本比單純 HTML 高,但大型專案會更好維護。之前整理的Codex 動態圖表和短影片工作流 ,就很適合拿 Remotion 處理需要精準幀數與資料驅動的部分。
npx skills add remotion-dev/skills
npx create-video@latest
5. video-shotcraft,把產品畫面剪成電影感廣告
video-shotcraft 是一套以 Remotion 為基礎的產品影片製作 Skill。它提供超過一百張鏡頭配方卡、可預覽的動作樣式、2.5D 運鏡、節奏卡點、音效和可直接替換內容的完整模板。
最實際的用法,是把網站或桌面產品的真實畫面交給 Agent,再指定想使用的鏡頭卡。它會處理素材採集、分鏡、運鏡、轉場、聲音和品質檢查。相比只生成幾張氣氛圖,這條路更能把真正的產品功能講清楚。
npx skills add Vincentwei1021/video-shotcraft
6. story-to-handdrawn-video,中文故事轉手繪日記動畫
story-to-handdrawn-video 能把中文故事或排序好的圖片,轉成直式手繪日記動畫,它會安排手寫文字、黑白線稿、彩色插圖與翻頁轉場,輸出可再加入旁白的 H.264 畫面。
這個 Skill 適合個人故事、知識小品、品牌創辦歷程和情緒型內容。它的風格很明確,不適合硬套在科技產品展示,但用在敘事題材時能快速建立一致的視覺語言。
git clone https://github.com/gnipbao/story-to-handdrawn-video.git
cd story-to-handdrawn-video
npm install
7. motion-design-skill,先教 Agent 什麼叫手感
LottieFiles motion-design-skill 不綁定特定動畫框架。它教的是 timing、easing、choreography、情緒意圖和改寫成 UI 動效的經典動畫原則。CSS、GSAP、Framer Motion、Lottie 都能使用這套思考方式。
很多 AI 動畫技術上能跑,卻沒有重量、停頓和節奏,原因通常不是少一個套件,而是 Agent 沒先決定動作要傳達什麼。這個 Skill 最適合當成第二層能力,搭配 HyperFrames、GSAP 或 Remotion 一起使用。
npx skills add LottieFiles/motion-design-skill
可以直接貼給 Codex 的繁體中文提示詞
不要只寫「幫我做一支動畫」。先把目的、尺寸、時長、素材、節奏和驗收條件講清楚。下面這份可以直接改主題使用。
請使用適合的動畫 Skill,製作一支 15 秒直式短片,比例 9:16。
目的
用最短時間介紹我的產品如何把文字整理成可搜尋的知識庫。
素材
使用專案中的真實產品截圖與品牌色,不要使用無關的 AI 圖片。
結構
0 到 3 秒呈現使用者找不到資料的痛點
3 到 8 秒展示匯入、整理與搜尋流程
8 到 12 秒用數字動畫顯示節省的時間
12 到 15 秒顯示產品名稱與行動文字
動效
畫面轉場要乾淨
數字使用平滑遞增
卡片進場要有重量感與短暫停頓
不要讓所有元素同時移動
限制
不要藍紫科技風
不要粒子背景
不要讓文字互相遮擋
不要使用未授權素材
驗收
先做 5 秒風格原型
確認手機畫面可讀後再完成全片
最後檢查每一幀是否有文字裁切、元素重疊和空白畫面
我的建議組合
社群短片選 HyperFrames,加 motion-design-skill 控制節奏
網站互動選 GSAP AI Skills,加 motion-design-skill 做動態審查
數據影片選 Remotion Agent Skills
產品廣告選 video-shotcraft,再用真實頁面截圖
品牌片頭選 Pixel2Motion
故事內容選 story-to-handdrawn-video,再補旁白、字幕和音效
更完整的製作管線可以參考OpenMontage 本地 AI 影片工作流 。它把研究、腳本、素材、渲染和驗收串起來,而這七個 Skill 比較像其中的專業工位。先把一個工位用熟,再擴大成自動化流水線,成功率會高很多。
FAQ
完全不會寫程式也能用嗎?
可以從提示詞開始,但仍要看得懂 Agent 建立了哪些檔案、如何預覽和輸出。HyperFrames 與 video-shotcraft 對成品導向較友善,Remotion 更適合願意維護 React 專案的人。
只想做短片,最推薦哪一個 Skill?
一般社群短片先選 HyperFrames。數據類短片選 Remotion。產品宣傳片選 video-shotcraft。風格容易僵硬時,再加 motion-design-skill 幫 Agent 調整節奏。
安裝很多 Skill 會不會讓 Agent 更強?
不一定。能力太多會增加選擇和上下文成本。每次任務只啟用一個主要製作 Skill,再搭配一個設計或品質檢查 Skill,通常會比較穩定。
by Rain Chu | 8 月 28, 2026 | AI , GGUF , Stable Diffusion , 圖型處理 , 影片製作 , 繪圖
LTX 2.3 把畫面、聲音、人物動作與鏡頭運動放進同一套生成流程,還能透過 ComfyUI 在本機執行,對只有 8GB 顯存的使用者來說,社群 GGUF 量化工作流確實打開了一扇門,但「能跑」不等於完整模型全放進顯存,也不代表每台電腦都能在不到一分鐘內完成。
我會把 LTX 2.3 定位成一個適合實驗同步影音、角色短片與圖生影片的本地模型,它可以成為 OpenMontage 本地 AI 影片工作流 裡的生成引擎,也可以獨立放在 ComfyUI 裡反覆調整。真正要先弄清楚的,是權重版本、顯存、系統記憶體與工作流之間的關係。
LTX 2.3 改進了什麼
LTX 2.3 官方頁面 把這次更新整理成幾個核心方向。新的 VAE 改善髮絲、材質與邊緣細節,較大的文字連接器能理解多主體、空間關係、動作與鏡頭指令,圖生影片減少了畫面凍結與只做平移縮放的情況,音訊也換上新的 vocoder,降低雜音、靜音缺口與突然中斷。
支援文生影片與圖生影片
能在同一個流程生成畫面與同步音訊
改善人物微表情、動作與鏡頭運動
原生支援最高 1080×1920 的直式影片
提供完整權重、Distilled、FP8 與社群量化方案
官方也提醒,LTX 2.3 採用新的 latent space,舊版 LoRA 不能直接當成完全相容的資產,通常需要重新訓練。這點比單純更新模型檔更重要,已經累積大量 LTX 2 工作流的人要先做相容性測試。
8GB 顯卡能跑,但要先拆掉一句話裡的誤會
官方 ComfyUI 文件 把標準本地工作流的前置條件列為 32GB 以上顯存與 100GB 以上可用磁碟空間。8GB 顯卡路線使用的是社群 GGUF 量化權重、模型卸載與系統記憶體,不是把 BF16 完整權重硬塞進 8GB 顯存。
版本 適合用途 主要取捨 BF16 Dev 品質驗證與正式輸出 硬體需求最高 Distilled 快速迭代與工作流測試 速度優先 FP8 較低顯存的官方量化路線 品質與資源需求折衷 GGUF Q4 或 Q5 8GB 到 16GB 顯存的社群工作流 依賴 CPU offload、系統記憶體與相容節點
以 QuantStack 的 LTX 2.3 GGUF 為例,Q5_K_S 檔案約 18.5GB,已經大於 8GB 顯存。能在 8GB 顯卡執行的關鍵,是工作流不要求所有資料同時留在 GPU。代價是更吃系統記憶體與資料搬移時間。想進一步理解 GGUF 與量化的角色,也可以對照站內的本地模型推理框架比較 。
GGUF 檔案大小不等於最低顯存需求,但能直接看出為什麼 8GB 路線必須依賴卸載與系統記憶體
我的硬體建議很簡單。,GB 顯存可以從 Q4 或經驗證的低顯存工作流開始,系統記憶體最好準備 32GB 以上,12GB 到 16GB 顯存會比較有調整空間。若要使用 BF16、較高解析度、長片段或多階段放大,32GB 以上顯存才接近官方設定,實際速度還會受 GPU 架構、RAM、磁碟、解析度、影格數與節點版本影響。
最省事的安裝方法是官方模板
第一次安裝不要急著手動搬十幾個檔案,先把 ComfyUI 更新到支援 LTX 2.3 的版本,再用模板庫建立一條能正常執行的基準工作流,這和我整理 Ideogram 4 的 ComfyUI 本機部署 時採用的思路一樣,先跑通官方基線,再加入量化與自訂節點。
開啟 ComfyUI Desktop 或現有 ComfyUI
完成程式與前端更新後重新啟動
進入 Templates 並切換到 Video
搜尋 LTX-2.3
先安裝 Image to Video 與 Text to Video 模板
按下 Download all 取得必要模型
重新啟動後先用低解析度與少量影格測試
官方建議先用 480×720 與 41 到 81 個影格確認流程,工作流穩定後,再提高解析度、片長與品質。這一步看起來保守,卻能很快分辨問題來自模型、節點、顯存,還是提示詞。
手動安裝時,模型應該放在哪裡
ComfyUI Desktop、Portable 與自行安裝版的根目錄可能不同,最穩的方法是從 ComfyUI 介面打開模型資料夾,再依下面的相對路徑放置。不要直接照抄別人的 Windows 使用者名稱。
檔案類型 建議路徑 用途 官方主模型 models/checkpoints/LTX-Video BF16、Distilled 或官方檢查點 社群 GGUF models/unet 交給 GGUF Loader 載入 文字編碼器 models/text_encoders Gemma 3 與 LTX 文字投影 視訊與音訊 VAE models/vae 解碼影像、聲音與預覽 LTX 2.3 LoRA models/loras/LTX-2.3 Distilled、風格或控制能力
原始權重可從 LTX 2.3 Hugging Face 取得。官方推理程式與訓練工具位於 Lightricks LTX-2 GitHub ,ComfyUI 節點與範例工作流則在 ComfyUI-LTXVideo 。
匯入工作流後出現紅色節點怎麼辦
紅色節點通常不是模型壞掉,而是工作流引用了本機尚未安裝的自訂節點。先在錯誤視窗選擇 Install Missing Custom Nodes,完成後按 Apply Changes 並重新啟動,若仍缺少 Fast Groups Bypasser 類節點,可在 Manager 搜尋並安裝 rgthree-comfy 。
GGUF 權重還需要 ComfyUI-GGUF 。安裝後重新啟動,在畫布空白處搜尋 GGUF Loader,把原本模型載入器的輸出改接到工作流的 model 輸入,再重新整理節點並選擇 Q4 或 Q5 檔案。
一個可以直接改寫的繁中提示詞
LTX 2.3 的提示詞不要只寫「讓照片動起來」。把人物動作、對白、聲音、鏡頭、畫質與禁止項目分開,模型比較容易理解時間順序與同步關係。
場景與動作
一名年輕女子站在安靜的室內,先看向鏡頭,再輕輕吸一口氣,以略帶緊張但自然的神情說話。嘴唇清楚說出指定的中文台詞,嘴型與發音準確同步。
聲音
自然的年輕華語女聲,語氣柔和、真實、略帶緊張,像日常交談,不要誇張。保留輕微呼吸聲與安靜室內環境音,不要配樂。
鏡頭
鏡頭緩慢推近臉部,只有很輕微的手持感。淺景深,焦點穩定,自然室內光線。
畫面品質
寫實電影感,皮膚紋理自然,眼神與微表情細膩,髮絲運動合理,動作流暢,人物身份保持一致。
避免項目
不要字幕,不要畫面文字,不要額外人物,不要旁白,不要機械聲,不要誇張表情,不要臉部變形,不要嘴唇變形,不要突然移動鏡頭。
實際使用時,把第一段換成你的角色、場景、動作與台詞即可。先固定一個鏡頭與一個主要動作,再逐步增加人物、轉場與複雜聲場。一次要求太多事件,往往比模型能力不足更容易造成身份漂移。
中文對白可用,但字幕最好留給後製
實測裡最值得記下來的缺點,是中文畫面文字仍可能出現亂碼,即使官方表示文字渲染已改善,這不代表長句中文字幕已經可靠,若提示詞要求中文對白,模型有時還會自行生成錯誤字幕。
提示詞明確加入「不要字幕、不要畫面文字」
先生成乾淨畫面與聲音
輸出後再用剪輯軟體或字幕工具加入繁中字幕
若聲音品質不穩,可把畫面生成與語音生成拆成兩條工作流
需要更細的角色音色控制時,可以搭配Qwen3-TTS 音色設計工作流 ,讓 LTX 2.3 專注畫面,再由語音模型與後製負責台詞品質,這通常比強迫單一模型同時把中文聲音與中文字都做到完美更務實。
本地還是雲端,差別不只在費用
本地工作流的優點是素材不必上傳第三方、模型與節點可自行調整,而且安裝完成後沒有逐秒 API 費用,缺點是模型檔很大,節點版本容易衝突,還要自己處理顯存與輸出速度。若你比較在意快速試模板與交付,也可以對照RunningHub 的雲端 ComfyUI 工作流 ,再決定控制權與便利性哪個重要。
解除限制版本不是品質保證
社群常用「無審查」或「解除限制」描述修改版權重。這只代表輸入限制可能不同,不代表畫質、授權、安全性或商用條件比官方版本更好。下載前要確認模型來源、授權條款與檔案雜湊,人物照片與聲音也必須取得同意。
尤其是換臉、移除人物、替換台詞與生成擬真人物時,更要避免冒用身份、未經同意的私密內容與誤導性成品。LTX 官方也有商業授權條件,企業使用前應直接閱讀最新授權,而不是只看模型能不能下載。
下載與參考資源
我的結論
如果目標是直式角色短片、圖生影片、帶環境音的短場景,LTX 2.3 很值得測,若目標是穩定中文字、長篇敘事或大量商業輸出,仍要把字幕、語音、剪輯與品質檢查拆成獨立步驟。模型負責生成,工作流負責把結果變成可以交付的作品。
FAQ
LTX 2.3 真的能在 8GB 顯卡執行嗎
可以,但通常要使用 GGUF 量化權重、CPU offload 與足夠的系統記憶體。8GB 指的是可嘗試的顯存門檻,不代表完整模型全放在 GPU,也不保證固定生成速度。
新手應該選 BF16、FP8 還是 GGUF
先用官方 Distilled 或 FP8 模板確認工作流。顯存不足再改用 GGUF。BF16 適合硬體充足並且重視品質的人,GGUF 適合願意接受卸載、速度與相容性取捨的低顯存使用者。
為什麼匯入工作流後有紅色節點
多半是缺少自訂節點或節點版本太舊。先執行 Install Missing Custom Nodes,再更新 ComfyUI、ComfyUI-LTXVideo、rgthree-comfy 與 ComfyUI-GGUF,完成後重新啟動。
中文對白為什麼會出現亂碼字幕
模型可能把對白理解成需要同步生成的畫面文字,而中文長句仍不穩定。提示詞加入不要字幕與不要畫面文字,先生成乾淨影音,再於後製加入繁中字幕最可靠。
LTX 2.3 可以離線使用嗎
模型、節點與依賴下載完成後可以在本機執行。首次安裝、更新模型或補齊節點仍需要網路,並且要預留足夠磁碟空間。
by Rain Chu | 8 月 27, 2026 | AI , DeepSeek , 模型
把兩台小型 AI 超級電腦接在一起,最先增加的不是單一請求速度,而是可承載的模型規模、上下文長度與同時服務能力,MSI EdgeXpert 採用 NVIDIA GB10 平台,每台有 128GB 統一記憶體,雙節點可讓 284B 的 DeepSeek V4 Flash、397B 的 Qwen3.5 MoE 與 230B 的 MiniMax M2 進入本地推理測試範圍。
我會把這類設備看成桌上型 AI 伺服器,而不是高階遊戲電腦,它最有價值的地方,是統一記憶體、低功耗、200GbE 高速互連,以及把敏感資料留在本地的能力,若只想偶爾聊天或寫程式,雲端 API 通常更省錢,若要處理長時間視覺串流、企業內網資料、批次 Agent 或需要 100GB 以上權重,本地設備才開始顯出意義。
MSI EdgeXpert 是什麼
EdgeXpert MS-C931 是基於 NVIDIA DGX Spark 平台思路打造的小型 AI 工作站,核心採 GB10 Grace Blackwell Superchip,把 20 核 Arm CPU、Blackwell GPU 與 128GB LPDDR5X 統一記憶體放進 151mm 見方的機身,重量約 1.2kg,儲存空間為 4TB NVMe M.2。
項目 EdgeXpert 規格 實際意義 處理器 10 顆 Cortex-X925 加 10 顆 Cortex-A725 適合資料處理、服務調度與模型前後處理 GPU NVIDIA GB10 Grace Blackwell 6144 CUDA 核心,第 5 代 Tensor Core 統一記憶體 128GB LPDDR5X CPU 與 GPU 共用,適合大型權重 記憶體頻寬 273GB/s 容量很大,但頻寬低於高階獨立顯卡 高速網路 2 個 200GbE QSFP56 可用雙鏈路連接兩個節點 一般網路 10GbE RJ-45 管理、檔案傳輸與區域網路服務 其他連接 4 個 USB 3.2 Type-C、HDMI 2.1a、Wi-Fi 7、藍牙 5.4 方便接相機、儲存裝置與顯示器 功耗 140W TDP 比傳統多卡工作站更容易放進辦公環境
GB10 與 RTX 5070 都有 6144 CUDA 核心,但定位完全不同,GB10 有 128GB 統一記憶體與最高 1000 AI TOPS,記憶體頻寬約 273GB/s,RTX 5070 只有 12GB GDDR7,頻寬約 672GB/s,前者能裝下大模型,後者在權重能完整放入顯存時通常跑得更快,容量和頻寬不能只選一個數字判斷。
雙機互連不是把速度直接乘二
兩個節點透過 QSFP56 連接後,模型權重會分散到兩台機器,每完成一層或一段運算,節點之間就要交換張量,這讓單台放不下的模型能夠執行,也能增加併發量,但同時帶來網路同步、序列化與等待成本。
容量擴張 :雙節點約有 256GB 統一記憶體可供系統與模型使用。
模型並行 :大型權重被切到兩台機器,任何一台故障都會讓服務中斷。
鏈路聚合 :兩條 200GbE 能降低通訊瓶頸,但收益取決於模型本身的計算與通訊比例。
延遲代價 :併發越高,P95 尾端延遲通常越明顯。
有人實際把四台同類設備做環形連接,確實能執行更大的模型,但速度不一定理想,節點增加後,容量會先變大,通訊路徑與維運難度也一起增加。這也是為什麼 273GB/s 記憶體頻寬與網路拓撲,比單看 AI TOPS 更值得注意。
三個大型 MoE 模型的雙機測試
測試固定使用 200G RoCE,透過 OpenAI 相容的 completions 介面送出三組工作提示。併發從 1、2、4、6 增加到 8,每個設定重複三次,觀察聚合吞吐量、P95 延遲、失敗請求與異常輸出。
模型 總參數與啟用參數 量化 模型載入量 每節點記憶體 測試上下文 Qwen3.5 397B A17B 397B、啟用 17B INT4 AutoRound 約 226GB 98.24GiB 262K DeepSeek V4 Flash 284B、啟用 13B FP4 加 FP8 約 160GB 75.8GiB 500K MiniMax M2 AWQ 230B、啟用 10B AWQ 4-bit 約 121GB 56.38GiB 128K
雙鏈路對 Qwen3.5 與 DeepSeek V4 Flash 有明顯幫助,對 MiniMax M2 的增幅很小。資料為每組三次測試平均。
模型 單鏈路 tokens/s 雙鏈路 tokens/s 增幅 Qwen3.5 397B 42.3 48.1 13.5% DeepSeek V4 Flash 48.3 53.9 11.6% MiniMax M2 AWQ 123.4 124.2 0.6%
結果很清楚,雙鏈路只會改善被節點通訊限制的模型,Qwen3.5 與 DeepSeek 的吞吐量分別增加約 13.5% 與 11.6%,MiniMax M2 幾乎沒有變化,代表它在這組設定下的主要瓶頸不在互連。
這組數字也不能直接拿來比較模型聰明程度,三者的量化格式、啟用專家數、上下文與模型大小都不同,MiniMax 速度最快,不代表回答品質最高,Qwen3.5 能用 262K 上下文啟動,DeepSeek V4 Flash 能用 500K 上下文啟動,這些容量優勢本身就是雙機部署的重要價值。
本地部署和 API 到底怎麼選
設備畫面標示單台價格為台幣 20 萬元,兩台還要加上高速線材、交換器、儲存與維護成本,若每月只是少量使用,雲端 API 很可能更划算,若每天持續分析大量影像、處理敏感文件、需要固定延遲,或模型呼叫量足以抵銷硬體成本,本地部署才有機會回本。
我比較在意的是混合部署,一般聊天與高難度推理交給雲端模型,持續監控、文件整理、影像理解與私有資料處理留在本地,這比要求一套設備取代所有 API 更務實,推理框架的選擇也會直接影響吞吐量,可以延伸閱讀 vLLM、SGLang、llama.cpp、MLX 與 Ollama 比較 。若手上已經有 DGX Spark,也可參考 DGX Spark 搭配 llama.cpp 的部署筆記 。
JoyAI-VL-Interaction 不只是看圖問答
JoyAI-VL-Interaction 是京東 JoyAI 團隊開源的即時視覺語言互動模型。它採 8B 級規模,真正特別的地方不是再回答一張圖片裡有什麼,而是持續觀看直播流,自己判斷現在應該開口、保持安靜,還是把困難工作交給背景 Agent。
一般 VLM 是回合制。使用者先問,它才回答。JoyAI 把行動時機訓練進模型,每秒做一次決策。火爐上的鍋開始冒煙、運動員出現關鍵動作、商店貨架少了一項商品,都不必等人先提出問題。這讓它更接近監控助手、直播解說員與現場操作夥伴。
決策 輸出 適合情境 保持安靜 silence 畫面沒有重要變化,避免持續打擾 直接回應 response 加文字 即時提醒、解說、計數與操作指引 委派工作 delegate 加任務 需要搜尋、推理、程式或外部 API 的複雜問題
官方公開超過 400 萬筆時間對齊的視覺互動樣本,並用強化學習調整說話時機,系統以約 1 fps 接收影像,把短期畫面、問答紀錄與長期記憶一起交給 VLM,每累積一段畫面就壓成摘要,再把多段摘要整理成長期記憶。
這種架構很適合長時間串流,但仍要注意 token 成本,官方把 AdaCodec 描述為只對重要變化保留完整細節的預測式視覺編碼方向,實際部署時要確認目前下載的模型與服務版本是否已啟用對應能力,不能只看架構圖就當成預設功能。
JoyAI 可以做什麼
居家安全 :觀察煙霧、跌倒、危險區域與幼兒動作,在需要時主動提醒。
體育與直播 :即時解說、關鍵事件判斷、計數與彈幕式評論。
零售與操作引導 :辨識貨架、產品與手機介面變化,逐步帶使用者完成任務。
RTSP 監控 :接入網路攝影機,讓視覺模型持續理解而不只是傳統動作偵測。
企業背景 Agent :把需要查資料或產生報告的工作交給 Codex 或其他 API,同時不中斷眼前的畫面監看。
官方在 26 個離線理解基準的平均分數為 57.53,高於 Qwen3-VL-8B-Instruct 的 54.16。這不代表它在所有聊天問題都勝過大型閉源模型。它真正的優勢區,是視覺觸發的主動性、回應時機、時間感與長串流記憶。若想了解另一種文件與 OCR 導向的 VLM,可參考 InternVL3 本地多模態整理 。
JoyAI 完整部署命令
官方目前建議 Linux、NVIDIA GPU、CUDA 12.x、535 以上驅動與 Python 3.12。先從最小服務開始,確認視覺推理和 WebUI 能正常工作。
git clone https://github.com/jd-opensource/JoyAI-VL-Interaction.git
cd JoyAI-VL-Interaction
./install/install.sh --with-all
./install/download-models.sh --all
./services/scripts/run.sh minimal
啟動後在瀏覽器開啟以下網址。第一次使用會遇到自簽憑證提示,僅在確認是自己的主機後繼續。
https://127.0.0.1:8099
若需要語音輸入、語音輸出與背景 Agent,可以啟動完整服務。
./install/install-audio-runtime.sh --all
./services/scripts/run.sh all
完整系統預設把主 VLM 放在 GPU 0,摘要模型放在 GPU 1,ASR 與 TTS 放在 GPU 2。兩台 EdgeXpert 比較適合先跑最小服務,再把 ASR、TTS 或背景 Agent 改接另一台主機或外部 API。若把所有服務硬塞進同一組節點,記憶體餘裕與即時延遲都要重新測量。
需要完整語音體驗時,JoyAI 預設可搭配 Qwen3-ASR 1.7B 與 Qwen3-TTS 1.7B。想先了解本地聲音設計與 TTS 部署,可閱讀 Qwen3-TTS 音色設計與本地工作流 。
把雙機分工用在 JoyAI
雙機不一定要只跑一個超大模型。對即時視覺系統來說,服務分工可能更有效率。
節點 A :JoyAI 主視覺模型、WebUI、攝影機或 RTSP 輸入。
節點 B :摘要模型、ASR、TTS、向量資料庫與背景 Agent。
高速鏈路 :交換畫面摘要、長期記憶與委派結果,不必讓每一層模型張量都跨節點。
雲端補位 :只有複雜推理與大型搜尋才呼叫 API,平常監看留在本地。
這種拆法不會得到 256GB 的單一權重空間,但可減少模型並行的同步成本,讓即時互動更穩定。若目標是部署 284B 或 397B 權重,才改用跨節點模型並行。先定義工作負載,再決定是合併記憶體還是拆分服務。
隱私與維運不能省略
JoyAI 會持續接收相機與麥克風資料,本地部署能降低內容離開內網的機率,但不代表自動安全,WebUI、OpenAI 相容 API、RTSP、背景 Agent 與檔案權限都要分別控管。不要把服務連接埠直接暴露到公網,也不要讓背景 Agent 在沒有確認的情況下執行刪除、付款或外部發布。
模型判斷也會出錯。居家安全、工廠告警與醫療照護不能只依賴單一 VLM,重要事件應保留傳統感測器、規則引擎、人工複核與完整日誌。開放權重帶來可控性,也把測試責任交回部署者。
我的判斷
EdgeXpert 雙機最吸引人的不是把 tokens/s 翻倍,而是用 256GB 級統一記憶體打開大型 MoE、超長上下文與私有化多模態服務。雙 200GbE 對通訊密集模型確實有幫助,但 0.6% 到 13.5% 的差異也提醒我們,瓶頸可能在記憶體頻寬、模型計算、量化核心或排程。
JoyAI 更像這類硬體的合理應用,它不只等待問題,而是長時間留在場景裡,知道何時說話、何時安靜、何時交給另一個 Agent,真正值得做的不是把所有模型都搬回家,而是把持續、敏感、可重複的工作留在本地,把偶發而困難的任務交給更強的雲端模型。
參考資料
FAQ
兩台 EdgeXpert 會讓推理速度變成兩倍嗎?
不會。雙節點主要增加可用記憶體與併發空間。實測中雙鏈路讓 Qwen3.5 增加約 13.5%,DeepSeek V4 Flash 增加約 11.6%,MiniMax M2 只增加約 0.6%。
JoyAI 一定要三張 GPU 嗎?
最小服務只需要主視覺模型與 WebUI。官方完整預設才會把主模型、摘要模型、ASR 與 TTS 分配到三張 GPU。資源較少時可停用語音與背景 Agent,或把它們接到其他服務。
JoyAI 和一般 VLM 最大差異是什麼?
一般 VLM 多半等使用者提問。JoyAI 持續觀察即時畫面,每秒自主決定保持安靜、直接回應或委派任務,適合監控、直播、操作引導與長時間互動。
本地 AI 一定比雲端 API 便宜嗎?
不一定。低用量通常是 API 更便宜。本地部署適合高頻使用、敏感資料、固定延遲與需要客製化服務的人。評估時要把硬體、電力、儲存、網路與維護時間全部算進去。
by Rain Chu | 8 月 26, 2026 | 未分類
DeepSeek V4 Flash 0731 最值得注意的,不只是模型跑得更快,而是 Agent 能力明顯補強,它可以在 Agent 框架裡撰寫程式、呼叫工具、修正錯誤,完成遊戲、互動網頁與自動化任務,這是一個 284B 總參數的 MoE 大模型,即使每次只啟用 13B 參數,完整權重仍然很大。
模型權重採 MIT 授權,可以免費下載,但本機部署並不便宜,Unsloth 的 3-bit GGUF 約 103GB,建議至少準備 110GB 可用記憶體,接近無損的 Q4 版本約 155GB,較適合 192GB 記憶體工作站或多卡伺服器,一般 16GB、32GB,甚至 64GB 電腦都不適合硬跑完整模型。
DeepSeek V4 Flash 0731 是什麼
DeepSeek V4 Flash 0731 是 V4 Flash 的正式開源版本,官方模型卡表示,新版延續 Flash DSpark 架構,加入 speculative decoding 模組,並針對 Agent 任務完成新的後訓練。模型總參數為 284B,每次推理啟用約 13B 參數,最大上下文為 1,048,576 tokens。
項目 規格 實際意義 總參數 284B 權重檔案很大,不能用 13B 模型的硬體需求估算 啟用參數 13B MoE 每次只啟用部分專家,有助降低運算量 最大上下文 1M tokens 理論上可處理超長任務,但 KV cache 會大量吃記憶體 授權 MIT 可下載、修改與商業使用,仍需遵守授權條款 主要強項 Agent 與工具使用 適合程式開發、工具呼叫與長流程自動化
這裡最容易誤會的是 13B 啟用參數,它代表單次前向運算只會用到部分專家,不代表只需要載入 13B 權重。完整 MoE 權重依然要放進記憶體,所以本機部署需求遠高於一般 13B 模型。
Agent 能力提升多少
官方模型卡列出的 Agent 評測顯示,0731 版比 V4 Pro Preview 進步很多,Terminal Bench 2.1 從 72.1 提升到 82.7,DeepSWE 從 12.8 提升到 54.4,Toolathlon Verified 從 55.9 提升到 70.3,AutomationBench Public 則從 12.8 提升到 25.1。
DeepSeek V4 Flash 0731 的 Agent 評測大幅領先 Preview,但多數項目仍略低於 Opus 4.8。資料來自官方模型卡。
評測 V4 Flash 0731 V4 Pro Preview Opus 4.8 Terminal Bench 2.1 82.7 72.1 85.0 DeepSWE 54.4 12.8 58.0 Toolathlon Verified 70.3 55.9 76.2 AutomationBench Public 25.1 12.8 27.2
這些分數不能直接等同於所有人的使用體驗,但是各大 AI 網紅們都給予極高的肯定,官方的程式 Agent 評測使用 DeepSeek Harness minimal mode,搭配 max reasoning、temperature 1.0 與 top_p 0.95。部分 DSBench 項目也是內部資料集,模型、Agent 框架、提示詞、工具權限和驗證流程都會影響最後結果。
為什麼能做出 2D、3D 遊戲和太陽系
實際展示涵蓋 2D 平台遊戲、3D 闖關遊戲、太陽系模擬、圖片生成與影片生成流程。這些結果證明它很適合放進 Hermes Agent 一類的工具框架,但不能解讀成模型本身具備完整視覺能力。
DeepSeek V4 Flash 0731 的核心仍是文字模型,它會產生 HTML、JavaScript、Three.js 或其他程式碼,再由 Agent 啟動瀏覽器、執行程式與呼叫外部圖片工具,若 Agent 沒有截圖回饋或視覺模型協助,它無法像多模態模型一樣直接看見成果,前端展示看起來很完整,功勞來自模型能力與 Agent 工具鏈的組合。
要評估這類展示,我會看三件事
第一是第一次產出的可用程度.
第二是 Agent 能否自行執行並找出錯誤。
第三是移除人工協助後能否重複成功。
免費到底指什麼
「免費」至少有三種不同意思,最好分開看。
開源權重免費 :模型採 MIT 授權,可以從 Hugging Face 下載。
網頁聊天免費 :官方網站可能提供免費額度,但服務規則可能調整。
API 免費活動 :公測或限時額度不代表永久免費,串接正式服務前應重新查價。
截至 2026 年 8 月 1 日,DeepSeek 官方 API 文件已列出 deepseek-v4-flash 的計費資訊,每百萬 input tokens 在 cache hit 時為 0.0028 美元,cache miss 為 0.14 美元,output 為 0.28 美元。價格與活動可能隨時改變,上線前應以官方定價頁 為準。
本機執行雖然沒有按 token 付 API 費用,卻要負擔記憶體、GPU、儲存空間、電力與維護成本。對偶爾使用的人來說,API 可能反而比較便宜。對需要大量批次處理、資料不能離開內網,或想研究 Agent 框架的人,本機部署才更有價值。
Q4 為什麼還要約 155GB
DeepSeek V4 Flash 0731 在訓練時已採用量化感知訓練,約 96% 的 routed experts 原生使用 MXFP4,其餘權重使用 FP8 或 BF16,Q4 並不是把一個完整 BF16 模型全部壓成四分之一,而是保留原本已經是 4-bit 的專家,再量化其他張量。
這也解釋了為什麼 Unsloth 的 UD-Q4_K_XL 仍約 155.1GB,和官方參考權重 156.4GB 很接近,它的重點不是極端縮小檔案,而是在維持原生 MXFP4 專家的前提下,降低非專家張量的空間。UD-Q8_K_XL 約 161.9GB,Unsloth 將它定位為接近位元層級重建的無損版本。
量化版本 約略大小 建議記憶體 適合情境 1-bit 約 92GB 至少 96GB 以能跑為優先,品質犧牲較大 2-bit 約 102GB 至少 110GB 記憶體緊張的測試用途 UD-IQ3_XXS 約 103GB 110GB 到 128GB 128GB 裝置的實用起點 UD-Q4_K_XL 約 155GB 建議 192GB 接近無損品質 UD-Q8_K_XL 約 162GB 建議 192GB 以上 重視精度與重現性
表格只算模型權重仍不夠,作業系統、llama.cpp、KV cache 與長上下文都需要額外空間,128GB 機器即使用 103GB 版本,也不應一開始就把 context 設成 1M,先從 32K 或更低開始,確認速度與記憶體餘裕,再逐步增加。
量化概念也可以參考我整理的 MXFP8、NVFP4 與不同量化格式比較 ,不要只看檔名裡的 Q4,還要看原始權重格式和哪些張量被量化。
用 Unsloth Studio 安裝
想用圖形介面管理模型,可以先裝 Unsloth Studio,macOS、Linux 與 WSL 使用下面的命令。
curl -fsSL https://unsloth.ai/install.sh | sh
Windows PowerShell 使用下面的命令。
irm https://unsloth.ai/install.ps1 | iex
安裝完成後啟動服務。
unsloth studio -H 0.0.0.0 -p 8888
如果只在本機使用,建議不要對外開放 8888 連接埠。需要從區域網路操作時,應搭配防火牆、反向代理與登入驗證。
用 llama.cpp 下載與執行 GGUF
Unsloth 官方文件提供 Hugging Face 直接載入方式。以下先以 UD-IQ3_S 為例。記憶體更緊張時,可在模型頁改選 UD-IQ3_XXS。
export LLAMA_CACHE="unsloth/DeepSeek-V4-Flash-0731-GGUF"
./llama.cpp/llama-cli \
-hf unsloth/DeepSeek-V4-Flash-0731-GGUF:UD-IQ3_S \
--ctx-size 32768 \
--temp 1.0 \
--top-p 1.0 \
--min-p 0.0
若要先完整下載指定分片,可以使用 Hugging Face CLI。
hf download unsloth/DeepSeek-V4-Flash-0731-GGUF \
--local-dir unsloth/DeepSeek-V4-Flash-0731-GGUF \
--include "*UD-IQ3_S*"
大型 GGUF 往往分成多個檔案,下載前先確認磁碟空間與網路穩定度。不同作業系統、CPU、GPU offload 比例與記憶體頻寬都會影響速度,想比較其他引擎,可以看 vLLM、SGLang、llama.cpp、MLX 與 Ollama 推理框架比較 ,若使用 DGX Spark,也可參考 DGX Spark 搭配 GGUF 與 llama.cpp 的實作方式 。
推理參數怎麼設
官方與 Unsloth 建議 temperature 1.0。一般對話可用 top_p 1.0,Agent 任務則可改成 top_p 0.95。Think High 是預設的深度推理模式。Think Max 需要更大的輸出與上下文空間,官方建議至少預留 384K,並不適合記憶體剛好壓線的本機環境。
一般對話:temperature 1.0,top_p 1.0
Agent 任務:temperature 1.0,top_p 0.95
本機初次測試:context 從 16K 或 32K 開始
長任務:先監看記憶體與輸出速度,再增加 context
本機執行與隱私安全
把開源權重放在自己的機器上,可以降低提示詞和文件傳送到第三方服務的需求,但不代表自動安全,仍要確認模型來源、雜湊值、推理程式、下載腳本與網路連線,處理公司資料時,也要記錄哪些 Agent 工具有檔案、終端和瀏覽器權限。
Agent 會執行模型產生的程式碼,風險比單純聊天高,建議使用容器、虛擬機或權限受限的工作目錄,並在刪除檔案、安裝套件、登入網站、發送資料與付費操作前要求人工確認,模型能完成任務,不代表每個操作都值得信任。
若你希望在本機開發工具裡使用模型,可以延伸閱讀 Claude Code 搭配 LM Studio 與 Ollama 的零 API 成本環境 ,再依自己的硬體改用 llama.cpp 或相容 API。
誰適合部署
DeepSeek V4 Flash 0731 適合擁有 128GB 以上統一記憶體工作站、多卡伺服器、DGX Spark 類設備,並且真的需要 Agent、自動化或大量私有資料處理的人,它也適合研究 MoE、推測解碼和量化感知訓練。
如果只是想體驗模型能力,先用官方網頁或 API 更合理。16GB 到 64GB 電腦不必為了完整模型勉強選極低位元量化,你會付出很長的載入時間、很慢的生成速度和明顯品質損失,最後還不一定比雲端便宜。
我的判斷
DeepSeek V4 Flash 0731 真正的進步,是從擅長回答問題,往可以在工具環境中完成工作的方向前進,Agent 評測已經逼近高階閉源模型,開源權重也讓企業有機會把資料和推理留在自己的環境。
它仍不是一般消費級電腦的輕量模型,284B 總參數決定了權重與記憶體成本,13B 啟用參數無法改變這件事,對多數人最務實的路線,是先用 API 驗證工作流,只有在使用量、隱私或客製化需求足夠明確時,再投資 128GB 到 192GB 的本機部署環境。
參考資料
FAQ
DeepSeek V4 Flash 0731 可以在 64GB 電腦執行嗎?
不建議。Unsloth 最小的實用量化仍接近 92GB,3-bit 推薦版本約 103GB,還要保留 KV cache 與系統空間。較合理的起點是 110GB 可用記憶體,128GB 裝置會比較實際。
為什麼只有 13B 啟用參數,權重卻超過 100GB?
13B 是每次推理被路由啟用的參數量。模型共有 284B 參數,完整專家權重仍要載入記憶體,因此硬體需求不能用一般 13B 模型估算。
DeepSeek V4 Flash 0731 是多模態模型嗎?
它主要是文字與程式模型。遊戲和視覺成果通常由 Agent 執行程式碼或呼叫外部工具產生。若要讓 Agent 看見並判斷畫面,還需要瀏覽器截圖回饋或另外接入視覺模型。
DeepSeek V4 Flash 0731 完全免費嗎?
模型權重採 MIT 授權,可免費下載。官方網頁可能有免費額度,API 則應依當下定價。自行部署還有硬體、電力、儲存與維護成本。
by Rain Chu | 8 月 25, 2026 | 3D , AI , claude
用 Claude Code 或 Codex 產生 Remotion 專案並不難,真正困難的是讓動畫從「可以播放」進步到「看起來像專業設計」,只下一句提示詞,AI 通常能把元件放進時間軸,卻很難同時掌握分鏡、節奏、視覺層級、轉場與品牌質感。
比較可靠的方法,是先把 Remotion 的 Agent Skill 安裝到開發代理,接著把需求拆成分鏡、時間、版面與動態規則,先完成短片段,再逐幀檢查並反覆修正。本文會從安裝開始,整理一套 Claude Code 與 Codex 都能使用的流程,也會說明 GSAP、D3.js、Lottie、Three.js、Canvas 與 Blender 各自適合處理什麼工作。
Remotion 是什麼
Remotion 是一套以 React 撰寫影片的框架。畫面被拆成 Composition,每個 Composition 會定義尺寸、幀率與總幀數,元件再依目前幀數計算位置、透明度、縮放與其他狀態。最後可以在 Studio 預覽,也能透過命令列輸出影片。
這種逐幀且可重現的設計很適合 AI 代理。代理可以讀取程式碼、修改元件、調整時間點,再重新輸出指定幀進行比對。它也適合大量產生不同文案、數據或尺寸的影片,而不是每次都回到剪輯軟體手動修改。
為什麼一句提示詞通常做不好
空白專案只提供了一堆可以組合的零件,沒有現成的鏡頭語言、元件規則與品質標準,當需求只有「做一支有質感的 SaaS 動畫」,代理還要自行猜測品牌顏色、字級、轉場、每一幕的長度,以及什麼才算有質感,結果自然容易變成普通投影片。
沒有分鏡,所以所有資訊同時出現
沒有明確時間點,所以動畫速度忽快忽慢
沒有動態規則,所以每個元素使用不同節奏
沒有參考幀,所以代理只能猜測版面與層級
沒有驗收步驟,所以第一版直接被當成完成品
Agent Skill 的價值,就是先把 Remotion 的正確用法、常見陷阱與輸出流程交給代理,這和建立 Claude Code 自訂 Skill 的概念相同,先提供可重複使用的方法,再讓代理處理當次任務。
Claude Code 與 Codex 都能使用 Remotion Skill
Remotion 官方的 Agent Skills 文件 已列出 Claude Code 與 Codex 等開發代理。先確認電腦已安裝 Node.js,再建立空白專案並加入 Skill。
npx create-video@latest --yes --blank my-video
cd my-video
npm i
npx remotion skills add
npm run dev
如果希望把官方 Skill 安裝成全域能力,可以執行下面的指令。
npx -y skills@latest add remotion-dev/skills -g -y
官方能力不只包含基本規範,也有建立作品、字幕、地圖、SaaS 產品動畫、互動播放器、媒體處理、版本升級與輸出等分工
這表示 Codex 並不是只能修改既有 Remotion 程式,也能從規格開始建立專案並完成輸出。
可直接使用的繁體中文提示詞
提示詞不要只描述主題,也要同時定義格式、時間軸、視覺系統、動態語言與驗收方式.
下面這份範本可以直接貼給 Claude Code 或 Codex,再替換中括號內的內容。
請先讀取目前可用的 Remotion Skill 與專案規範,再建立一個可直接輸出的 Remotion Composition。
影片主題
[要傳達的產品或故事]
輸出格式
1920 x 1080
30 fps
總長 20 秒
Composition ID 使用 ProductLaunch
視覺方向
使用深灰、米白、青色與珊瑚紅
畫面安靜、精準、有產品發表會質感
禁止套用通用科技藍紫漸層
文字必須保留安全邊界並在手機縮圖中可讀
分鏡
0 到 3 秒顯示品牌名稱與一句核心價值
3 到 8 秒展示產品介面與主要操作
8 到 14 秒用三個步驟說明工作流程
14 到 18 秒顯示成果數據
18 到 20 秒收尾並顯示行動文字
動態規則
所有動畫都要由 useCurrentFrame、interpolate 或 spring 驅動
每次只讓一個主要資訊成為視覺焦點
入場使用淡入、位移與輕微縮放
不要使用無法由幀數重現的 CSS transition
不要使用 Math.random、目前日期或即時網路狀態
工作方式
先建立 5 秒的第一幕作為品質樣本
輸出第 0、30、60、90、120 與 149 幀供我檢查
確認沒有文字溢出、遮擋、跳動與空白畫面後,再完成全部分鏡
最後列出 Composition ID、預覽方式與輸出指令
這個範本刻意要求先做 5 秒樣本。若第一幕的字體、間距與動態節奏不對,先修正視覺系統會比做完 20 秒後重來省下更多時間。
若想深入理解 Codex 產生動態內容的提示架構,可以延伸閱讀Codex 做動態圖表和短影片的工作流程 。
模仿參考動畫時要先拆解畫面
把整段參考素材轉成大量截圖,再一次交給代理,通常只能得到顏色和版面大致相近的結果。,集畫面缺少元素對應、時間關係與動態方向,代理不容易判斷一個物件是移動、被遮罩,還是切換成另一個元件。
每 0.5 到 1 秒擷取一張代表幀
標記每個鏡頭的開始時間與結束時間
列出背景、主體、文字、裝飾與遮罩等圖層
描述物件從哪裡進入、移動到哪裡、使用何種緩動
先重建最具代表性的 3 到 5 秒
輸出相同時間點的幀並排比較
軌跡動畫也可以用一張乾淨的路徑草圖輔助。把路徑、起點、終點與移動方向畫清楚,再要求代理將路徑轉成 SVG 或座標資料,通常比只用文字描述「繞一圈再飛出去」更準確。參考作品應作為鏡頭與節奏研究,不要直接複製商標、字體、插圖或其他受保護素材。
Remotion 與各種動畫工具怎麼選
工具 擅長內容 適合情境 Remotion 原生能力 React 元件、分鏡、字幕、影片組合 產品介紹、教學短片、批次影片 GSAP 時間軸、緩動、複雜介面動態 SaaS 首頁、產品發表、投影片式轉場 D3.js 資料轉換、SVG、客製圖表 統計變化、架構圖、地圖與路徑 Lottie JSON 向量動畫 圖示、付款流程、節慶與微動畫 Three.js 即時 3D 場景與模型 低多邊形場景、設備與空間示意 Fabric.js 與 p5.js Canvas 繪圖與自訂視覺 白板、手繪、幾何圖形與實驗動畫 Blender 建模、材質、燈光與高品質 3D 產品模型、車輛、角色與複雜鏡頭
Remotion 加 GSAP
GSAP 的 Timeline 很適合管理多段 Tween,也方便安排重疊、標籤與緩動。它能讓產品頁面以投影片般的節奏逐幕展開。不過 Remotion 最終仍要對每一幀得到固定結果,因此整合時應由目前幀數控制 GSAP 的進度,避免依賴瀏覽器實際經過的時間。
Remotion 加 D3.js
D3.js 是自由度很高的資料視覺化工具,關於人口統計變化、系統架構、交通路線與歷史路徑都很適合先由 D3 計算比例尺、座標與 SVG,再由 Remotion 控制每一段資料何時出現,資料來源應保存在專案內或在輸出前完成下載,避免輸出時受到外部 API 波動影響。
Remotion 加 Lottie
Lottie 適合圖示、付款成功、條碼掃描與簡短節慶動畫,官方套件需要安裝 @remotion/lottie 與 lottie-web。部分 Lottie expression 無法保證逐幀一致,正式輸出前應特別檢查是否閃爍。
npm i @remotion/lottie lottie-web
Remotion 加 Three.js
Three.js 適合在 React Three Fiber 中載入 3D 模型,再用 Remotion 的目前幀數控制相機、模型與燈光,官方提供 @remotion/three 進行整合,低多邊形產品展示、工廠流程或地圖空間化很合適,複雜建模與擬真材質則應交給 Blender。
npm i three @react-three/fiber @remotion/three @types/three
Blender 與 MCP 的正確分工
Blender 可以完成建模、材質、燈光、相機與骨架動畫,透過合適的 MCP 連接器,Claude Code 或 Codex 可以呼叫 Blender 執行部分操作,但這不代表代理已具備專業 3D 美術判斷,最有效率的分工,是由 Blender 建立複雜 3D 資產與鏡頭,再輸出透明影片或圖片序列,最後交給 Remotion 疊加文字、圖表、字幕與音訊。
MCP 連接器屬於第三方整合時,要先檢查原始碼、權限範圍與維護狀態。不要讓來源不明的工具取得整台電腦或敏感專案的存取權。
如何輸出透明字卡與動畫覆蓋層
透明背景不能只把 CSS 背景設成透明,輸出格式也必須保留 Alpha 通道,若要放進 Final Cut Pro、Premiere 或 DaVinci Resolve,Remotion 官方建議使用支援 Alpha 的 ProRes 4444 或 4444 XQ,影格格式選 PNG,像素格式使用 yuva444p10le。
npx remotion render ProductLaunch out/overlay.mov --image-format=png --pixel-format=yuva444p10le --codec=prores --prores-profile=4444
網頁若需要透明影片,可以輸出 VP8 或 VP9 的 WebM,搭配 PNG 影格與 yuva420p,瀏覽器支援並不一致,正式網站最好同時準備不透明的備用版本。
從需求到成品的完整工作流程
寫清楚目的 先決定受眾、平台、時長與希望觀眾記住的唯一重點
拆分分鏡 每幕只安排一個主要訊息,標出開始與結束時間
定義視覺系統 固定顏色、字體、間距、圓角、陰影與安全邊界
安裝 Skill 讓代理先讀取 Remotion 的官方規範與相關能力
先做短樣本 用 3 到 5 秒確認設計方向,不要直接生成整支作品
檢查代表幀 至少檢查開頭、中段、轉場前後與結尾
加入專用工具 依需求選 GSAP、D3、Lottie、Three.js 或 Blender
加入音訊 最後才對齊旁白、音效與背景音樂
輸出與複查 完整播放成品,也要檢查文字是否溢出與畫面是否閃爍
預覽完成後,可以先列出 Composition,再輸出指定作品。
npx remotion compositions
npx remotion render ProductLaunch out/video.mp4
Remotion 與用 HTML 寫影片的 HyperFrames 都把畫面轉成代理可修改的程式碼。Remotion 更接近 React 生態與逐幀影片管線,HyperFrames 則適合直接以 HTML 組合動態內容。選擇重點不是哪一套比較新,而是哪一套更符合現有技術與交付格式。
一定要用 Remotion 嗎
不一定。若只是把現成網頁動畫輸出成一次性的短片,可以用 GSAP 或 D3 建立網頁,透過 Playwright 等瀏覽器工具逐幀截圖,再交給 FFmpeg 合成,這條路徑簡單直接,也能保留原本的前端互動程式。
Remotion 的優勢在於 Composition、時間軸、媒體同步、參數化、Studio 預覽與標準輸出流程,當作品包含多個分鏡、字幕、音訊、不同尺寸,或需要批次套用資料時,這些能力會明顯降低維護成本,單次實驗可以選瀏覽器截圖加 FFmpeg,長期內容管線則更適合 Remotion。
常見問題
Codex 可以取代 Claude Code 完成這套流程嗎
可以,Remotion 官方 Agent Skills 文件已把 Codex 列為適用代理,差異主要來自代理讀取到的 Skill、專案上下文、提示詞完整度與驗收流程,而不是只能使用某一個品牌的開發工具。
為什麼參考圖很多,結果還是不像
大量截圖不等於完整動態規格,需要補上每個圖層的名稱、時間區間、位移方向、遮罩關係與緩動方式,先重建一個短鏡頭,再逐幀對照,會比一次交付整段素材更有效。
什麼工具最適合動態圖表
D3.js 適合需要客製比例尺、座標、路徑與 SVG 的資料視覺化,一般長條圖或折線圖不必為了技術感增加過多特效,先確保數據正確、標籤可讀與變化有清楚的時間順序。
透明影片輸出後為什麼變成黑底
通常是編碼器、像素格式或影格格式沒有保留 Alpha,剪輯軟體可用 ProRes 4444 搭配 PNG 與 yuva444p10le,網頁則可測試 VP8 或 VP9 WebM 搭配 yuva420p。
結論
Claude Code、Codex 與 Remotion 的組合確實能做出高品質動畫,但品質不是來自一句神奇提示詞。真正有效的做法,是先讓代理掌握 Skill,再把需求寫成可驗收的分鏡與逐幀規則,最後依內容選擇 GSAP、D3、Lottie、Three.js、Canvas 或 Blender。
把第一版當成可以修改的動畫原型,而不是最終成品,先完成短樣本、檢查代表幀、修正視覺系統,再擴充完整時間軸,AI 才會從快速生成工具變成穩定的動態設計工作夥伴。
延伸資料
近期留言