Remotion 聯動 Claude Code：用自然語言自動寫程式碼並渲染 MG 動效影片

想給產品做一段帶 3D 動效和 UI 介面的營銷影片，過去通常只有兩條路：要麼開啟 After Effects 手動調關鍵幀，要麼找專業動效設計師排期。

現在，事情有了一點新變化。1 月 19 日，開發者展示了藉助 Remotion 官方 Agent Skills 與 Claude Code，純靠自然語言提示詞自動編寫程式碼並渲染出帶有複雜 3D 動畫的 MG 風格影片。

全過程沒有開啟任何傳統剪輯軟體，Claude Code 自行拆解需求、編寫 React 程式碼、除錯引數，並最終直接輸出了渲染好的影片檔案。

像使喚前端一樣使喚 AI 剪片

這段長約 8 秒的演示影片，起因只是讓 Claude Code 製作一段動畫，用來展示一行命令列安裝指令。

初始設定只是一個 1280x1000 畫素的淺色 macOS 終端視窗。Claude Code 先讀取了現有的 Remotion 專案目錄，隨後自動建立了獨立的終端元件，並按反饋調整背景色和字型排版。

緊接著，智慧體建立了主合成序列，把終端放進主場景，並加入從底部滑入、Y 軸持續旋轉和縮放的多層 3D 動效。

更細節的地方在於，Claude 真實執行了命令列安裝，將終端裡的輸出字元與 ASCII 藝術字抓取出來做成打字動畫，並在結尾串聯了品牌圖示與向攝像機翻轉 90 度的離場動效。

最終通過一行命令直接渲染成片。整個過程中，影片指令碼、介面元件、動畫邏輯與渲染流水線，全部由智慧體自主完成。

什麼是 Remotion Agent Skills

Remotion 本身是一個用 React 寫影片的開源框架，而這套 Agent Skills 則是官方專門餵給 Claude Code、Codex、Kimi Code 或 Cursor 這類程式碼智慧體的最佳實踐規則庫。

開發者只需要在終端執行一行安裝命令，智慧體就能掌握 Remotion 的專門語法。

規則庫裡不僅包含通用的元件佈局、排版、緩動效果和時間軸排程，還細分了地圖動畫、外掛字幕渲染、SaaS 架構整合以及啟動 Studio 即時預覽等專項指令。

說白了，它就像是給程式碼智慧體塞了一本 Remotion 官方團隊編寫的操作手冊，避免 AI 在生成 React 動效程式碼時胡編 API 或踩進效能陷阱。

為什麼重要

我們認為，這件事情最有意思的地方，在於它徹底把影片生產拉進了程式碼工程的陣營。

對開發者和獨立創作者來說，以往最頭疼的往往是為新功能做一段體面的演示影片或年報動畫。AE 門檻高，現成的 AI 影片生成工具又常常在文字排版和 UI 精度上嚴重失真。現在通過 Remotion 加程式碼智慧體，生成的畫面畫素級可控，改動一個字或換個配色只需要在終端裡提一句需求。

對整個行業而言，這代表了 AI 影片工具的另一條演進路線：不是靠大模型直接幻想連續畫素，而是用大模型生成精確的結構化程式碼，再由確定性的渲染引擎把它畫出來。這種方式天然具備精確、輕量、可版本控制的優勢。

當然，這種方式目前主要適合 UI 動效、資料視覺化和軟體推廣等 MG 風格影片，想做複雜的實景敘事依然不現實。但只要你本身有前端基礎或使用 AI 程式碼編輯器的習慣，現在已經完全值得裝上這套技能試一試了。