Remotion Agent Skills：海外瘋傳的神奇技能，用代碼實現視頻創作

最近海外有個神級 skill 俾人瘋傳：Remotion Agent Skills

一句講曬：用前端代碼整片

真係估唔到科技已經發展到呢個地步。

睇下我喺 OpenCode 入面用 Remotion 幫我整嘅「黑客帝國字母雨」片

前後總共用自然語言只係優化咗 3 次就整到呢個效果，而且仲要係冇用頂級模型嘅情況下整出嚟嘅。

相信你嘅創意一定會好過我！！！

01 佢嘅運作原理

首先，Remotion 係一個開源框架。

倉庫地址：https://github.com/remotion-dev/remotion

佢有顛覆性，佢嘅核心概念係將整片嘅過程代碼化、程序化。

佢用咗前端包括 React、TypeScript 同 CSS 呢啲標準 Web 技術棧，以宣告式編程嘅方式整高保真嘅 MP4 片，從而實現由「手動非線性剪接」到「軟件定義影片」嘅範式轉移。

但上面呢層解釋都仲係太技術化，太抽象。我哋普通人仲係睇唔明，理解唔到。

咁我哋試下用大白話打個比喻解釋下。

你細個一定見過嗰啲手翻書效果，或者喺電視度都可能見過，我印象中功夫嗰套戲入面就有咁嘅一個片段。

一本小人書，每一頁都畫咗一個小人嘅唔同動作，你快速翻頁，書入面嘅小人就會形成連貫嘅動作，感覺好似個人鬱咗一樣。

呢本小書入面每一頁嘅畫面，你可以當佢係瀏覽器裏面嘅每一個頁面。

翻書呢個動作係 Remotion 話畀瀏覽器知嘅，瀏覽器每翻一頁，就換一個畫面。如果唔話畀瀏覽器知，就會一直停留喺當前書頁嘅畫面，係靜止嘅狀態。

而 Remotion 喺呢個過程入面唔理呢個翻頁嘅動作，佢只係關心時間同結果。

點樣理解？

例如 Remotion 對瀏覽器講，而家係第 1 幀啊，瀏覽器就將當前網頁「咔嚓」截咗張圖。

然後佢又對瀏覽器講，而家係第 2 幀，瀏覽器翻咗一頁，「咔嚓」又截咗張圖。

當呢個動作重複幾十次甚至幾百、幾千次之後，保存咗幾千張圖嘅快速連續播放就形成咗，最後變咗做片，呢個就等同於手翻書嘅原理。

唔知上面嗰個比喻，你明唔明？

Remotion 就係令開發者好似寫「劇本」咁寫代碼，然後叫瀏覽器做「演員」，每個 Pose（翻一頁）就影一張相，最後串成一部完美嘅片。 

02 點樣用 Remotion Agent Skills

由上面嗰個比喻可以睇到，佢會涉及到瀏覽器自動化同底層媒體處理嘅環境配置。

所以 node.js（≥ 16.0.0）係一定要有嘅，呢個係佢嘅依賴。

其次，一部 Mac 或 Windows 電腦，配置唔好太低就得，畢竟要渲染片。

安裝方法有兩種，我推介用 AI 編程工具幫你快速安裝。

呢度我用 Windows 電腦做例子。

第一種：透過 npm 安裝

1. 先喺你本地電腦入面新建一個項目文件夾，名唔好用中文就得。

2. 複製以下命令到你嘅終端回車執行：

npx create-video@latest

3. 安裝完成之後，揀一個最啱你嘅模版（佢會引導你），建議先由 Hello World 模版開始，比較適合新手去實現一啲簡單嘅影片製作同埋了解佢嘅工作流程。

想進階嘅可以去呢度睇更詳細嘅文檔：https://www.remotion.dev/docs/

第二種：透過 AI 編程工具安裝（推介）

CC、OpenCode 都得，其他編程工具都得，我呢度用 OpenCode 做例子。

1. 用自然語言話畀 OpenCode 知

先轉去 Plan 模式，然後貼上以下提示詞

幫我安裝以下 Github 倉庫入面嘅 skill 到全局目錄 C:\Users\elmin\.config\opencode\skill 入面。

倉庫地址：https://github.com/remotion-dev/remotion

官方文檔：https://www.remotion.dev/docs/

入面嘅全局目錄地址，你要改成你自己嗰個。

2. 揀基於 Remotion 自訂建立 skill

因為 Remotion 倉庫入面並冇直接提供 skill 嘅安裝方式，所以 OpenCode 會自動彈出指引畀你揀。

你就揀基於 Remotion 建立一個新嘅自訂技能就得。

佢會話畀你知具體嘅實施步驟，你需要轉去 Build 模式叫佢開始實施。

3. 安裝 Remotion Agent Skills

等一陣，OpenCode 就會幫你自動完成安裝。

4. 喺新項目入面用

揾一個你本地嘅文件夾（唔好用中文），複製個地址，然後話畀 Opencode 知： 

喺呢個 D:\OpenCodeProjects 新項目入面用

佢會喺你揀嘅本地文件夾入面自動建立一個叫「remotion-video-project」嘅新文件夾出嚟，呢度就係未來你透過 remotion skill 建立個人化片嘅存放位置。

OpenCode 仲會俾你一份總結，包括項目結構、當前狀態、點樣用同自訂配置等內容。

而佢仲會自動打開你嘅本地默認瀏覽器，幫你建立並展示由 remotion 驅動嘅 HelloWorld 基礎動畫演示同 MyComposition 進階動畫演示，呢兩個動畫都比較適合新手，可以拎佢哋練習下先。

另外，喺上圖嘅本地控制枱入面，你唔止睇到影片預覽視窗，仲可以控制影片嘅播放/暫停、音量、影片倍速等功能。影片預覽視窗下面仲有一個類似剪映嘅時間軸控制區域，支援鼠標拖曳定位去影片嘅唔同時間位置。

5. 完成本地影片渲染

當你睇完上面嗰兩個影片演示之後，如果覺得條片滿意，就可以直接試下㩒右邊嘅「Render」操作嚟進行本地影片渲染。

支援影片、聲音同圖片嘅渲染。如果呢個操作框入面嘅各種選項你唔識，咁就照佢嘅默認選項嚟做，直接㩒右上角 Render Video 掣就可以開始渲染。

渲染完成之後，佢會自動生成 .mp4 格式嘅檔案並保存喺你本地項目文件夾嘅 /out 目錄入面。

注意：呢度我踩過一個坑，可能你都可能會遇到。最開始影片渲染一直唔成功，我問 OpenCode 點解決，佢話要想成功完成本地渲染（非雲端）需要配置一個 chrome-headless-shell 嘅無頭檔案，OpenCode 幫我試咗各種方式去安裝呢個配置，但始終都解決唔到（用咗足足差唔多 1 個鐘頭）。最後佢畀咗我兩個方案，一係我自己下載呢個檔案（呢個係佢推介嘅方式）並解壓到項目根目錄。二係透過雲端渲染，但雲端渲染一定要有 AWS 户口，會好麻煩。所以我呢度都提供 chrome-headless-shell 檔案嘅下載地址，嚟自 Google 官方，萬一你都遇到呢類情況可以直接避開！

下載地址：https://googlechromelabs.github.io/chrome-for-testing/

到呢度，Remotion 就完全配置好曬。

下面你就可以去發揮你嘅創意，叫佢幫你整片喇。

既然睇到呢度，如果覺得唔錯，幫手順手㩒個「讚」、「在看」、「轉發」三連；如果想第一時間收到推送，都可以加我個星標★，非常感謝！

最近海外有一款神級 skill 被瘋傳：Remotion Agent Skills

一句話總結：用前端代碼實現視頻製作

真是想不到科技已經發展到如此地步。

看看我在 OpenCode 中讓 Remotion 幫我創建的「黑客帝國字母雨」視頻

前後總共用自然語言只優化了 3 次就實現出了這樣的效果，而且這還是在沒用頂級模型的前提下做出來的。

相信你的創意一定會比我更好！！！

01 它的工作原理

首先，Remotion 是一個開源框架。

倉庫地址：https://github.com/remotion-dev/remotion

它具有顛覆性，其核心理念在於將視頻製作的過程代碼化、程序化。

它使用了前端包括 React、TypeScript 和 CSS 等標準 Web 技術棧，以聲明式編程的方式構建高保真的 MP4 視頻，從而實現了從“手動非線性編輯”到“軟件定義視頻”的範式轉移 。

但上面這層解釋還是太技術化，太抽象了。我們普通人還是看不明白，不理解。

那咱們就試着用大白話做個比喻解釋一下。

你小時候肯定見過那種手翻書的效果，或者在電視裏可能也見過，在我印象裏功夫那部電影中就有那麼一個片段。

一本小人書，每一頁都畫了一個小人的不同動作，你快速翻頁書裏的小人就會形成連貫的動作，感覺像是人活了一樣。

這本小書裏每一頁的畫面，你可以把它看成是瀏覽器裏的每一個頁面。

翻書這個動作是 Remotion 告訴瀏覽器的，瀏覽器每翻一頁，則換一個畫面。如果不告訴瀏覽器，則始終停留在當前書頁的畫面上，是靜止的狀態。

而 Remotion 在這個過程當中不關心這個翻頁的動作，它只關心時間與結果。

怎麼理解？

比如 Remotion 對瀏覽器說，現在是第 1 幀啊，瀏覽器把當前網頁“咔嚓”截了張圖。

然後它又對瀏覽器說，現在是第 2 幀，瀏覽器翻了一頁，“咔嚓”又截了張圖。

當這個動作重複幾十次乃至幾百、幾千次之後，保存了幾千張圖的快速連續播放就形成了，最終變成了視頻，這就等同於手翻書的原理。

不知道上面的比喻，你能否理解。

Remotion 就是讓開發者像寫“劇本”一樣寫代碼，然後讓瀏覽器充當“演員”，每擺好一個 Pose（翻一頁）就拍一張照，最後連成一部完美的視頻。 

02 如何使用 Remotion Agent Skills

從上面那個比喻能夠看出，它會涉及到瀏覽器自動化與底層媒體處理的環境配置。

因此 node.js（≥ 16.0.0）是必須的，這是它的依賴。

其次，一台 Mac 或 Windows 電腦，配置別太低就行，畢竟要渲染視頻。

安裝方法有兩種，我推薦用 AI 編程工具幫你快速安裝。

這裏我以 Windows 電腦為例。

第一種：通過 npm 安裝

1. 先在你本地電腦中新建一個項目文件夾，名字別用中文就行。

2. 複製以下命令到你的終端回車執行：

npx create-video@latest

3. 安裝完成以後，選擇一個最適合你的模版（它會引導你），建議先從 Hello World 模型開始，比較適合初手實現一些簡單的視頻製作並瞭解其工作流程。

想進階可以到這裏查看更詳細的文檔：https://www.remotion.dev/docs/

第二種：通過 AI 編程工具安裝（推薦）

CC、OpenCode 都可以，其他編程工具也行，我這裏以 OpenCode 為例。

1. 用自然語言告訴 OpenCode

先切換 Plan 模式，然後粘貼以下提示詞

幫我安裝以下Github倉庫裏的skill到全局目錄 C:\Users\elmin\.config\opencode\skill 中。

倉庫地址：https://github.com/remotion-dev/remotion

官方文檔：https://www.remotion.dev/docs/

裏面的全局目錄地址，你需要變成你自己的。

2. 選擇基於 Remotion 自定義創建 skill

因為 Remotion 倉庫中並沒有直接提供 skill 的安裝方式，所以 OpenCode 會自動彈出指引讓你選擇。

你就選基於 Remotion 創建一個新的自定義技能即可。

它會把具體的實施步驟告訴你，你需要的是切換到 Build 模式開始讓它實施。

3. 安裝 Remotion Agent Skills

稍等片刻，OpenCode 就會幫你自動完成安裝。

4. 在新項目中使用

找一個你本地文件夾（別用中文），複製一下地址，然後告訴 Opencode： 

在這個 D:\OpenCodeProjects 新項目中使用

它會在你選擇的本地文件夾中自動創建一個叫做“remotion-video-project”的新文件夾出來，這裏就是未來你通過 remotion skill 創建個性化視頻存儲的位置。

OpenCode 也會給你出具一份總結，包括項目結構、當前狀態、如何使用以及自定義配置等內容。

而它還會自動打開你的本地默認瀏覽器，為你創建並展示由 remotion 驅動的 HelloWorld 基礎動畫演示以及 MyComposition 高級動畫演示，這兩個動畫都比較適合初手，可以拿它們先練習練習。

另外，在上圖的本地控制枱中，你不僅能看到視頻預覽窗口，還可控制視頻的播放/暫停、聲音大小、視頻倍速等功能。視頻預覽窗口下面還有一個類似於剪映的時間軸控制區域，支持鼠標拖拽定位到視頻的不同時間位置。

5. 完成本地視頻渲染

當你看完上面那兩個視頻演示之後，如果覺得視頻滿意，就可以直接嘗試點擊右側的「Render」操作來進行本地視頻渲染。

支持視頻、聲音與圖片的渲染。如果這個操作框中各種選項你搞不懂，那就先按照它的默認選項來就行，直接點右上角 Render Video 按鈕即可開始渲染。

渲染完成後，它會自動生成 .mp4 格式的文件並保存在你本地項目文件夾下/out 目錄中。

注意：這裏我踩過一個坑，有可能你也會遇到。最開始視頻渲染一直不成功，我問 OpenCode 怎麼解決，它告訴我想要成功完成本地渲染（非雲端）需要配置一個 chrome-headless-shell 的無頭文件，OpenCode 幫我嘗試了各種方式去安裝這個配置，但始終都沒能解決（耗費了足足有快1個小時的時間）。最後它給了我兩個方案，一是我自行下載這個文件（這是它推薦的方式）並解壓到項目根目錄下。二是通過雲端渲染，但云端渲染必須得有 AWS賬户，會非常麻煩。所以我這裏也提供一下 chrome-headless-shell 文件的下載地址，來自 Google 官方，萬一你也遇到這類情況可直接避免！

下載地址：https://googlechromelabs.github.io/chrome-for-testing/

至此，Remotion 就完全配置完成。

下面你就可以去發揮你的創意，讓它幫你創建視頻了。

既然看到這兒了，如果覺得還不錯，幫忙隨手點個「贊」、「在看」、「轉發」三連；如果想第一時間收到推送，也可給我加個星標★，非常感謝！