告別剪映！Claude Skills能直接剪輯視頻了
整理版優先睇
Remotion Skills 令你直接用自然語言剪片，告別傳統剪映。
呢篇文章係由作者江楓分享，佢試用咗 Remotion-dev 團隊最近封裝嘅 Skills，發現可以用 Claude 直接生成影片，效果仲唔錯。佢想解決嘅問題係：點樣用 AI 取代傳統影片剪輯工具，好似剪映咁，但係更加高效同埋自然。佢嘅整體結論係：Remotion 係一個顛覆傳統嘅開源框架，用 React 組件嚟渲染每一幀，再透過 FFmpeg 合成影片，而家封裝成 Skills 之後，就可以用自然語言指令直接出片，某程度上完全唔需要再開剪映。
作者透過實測展示咗成個流程，由安裝 Skills、用自然語言生成基本影片，到逐步優化畫面細節，例如加動畫、調整尺寸，最後合成多個動畫。佢仲提到可以結合其他 Skills 例如配音同出圖，令效果更好。文章最後俾咗 GitHub 連結，鼓勵讀者自己試玩。
呢篇文章係作者親身經驗，佢詳細記錄咗自己點樣一步步用 Remotion Skills 做片，包括遇到咩問題同點樣解決，對於想接觸呢個工具嘅人嚟講好有參考價值。
- Remotion 嘅核心係用 React 組件渲染每一幀，再用 FFmpeg 合成影片，顛覆傳統時間軸邏輯。
- 透過 Remotion Skills，你可以直接用自然語言指令生成影片，唔需要懂代碼。
- 安裝好 Skills 後，用 Claude Code 就可以下指令，例如「顯示 npx 安裝過程」，就會自動生成動畫。
- 生成嘅影片可以逐步優化，好似加 Logo、調整尺寸、加更多細節，全部用對話完成。
- 最大啟發係：Skills 嘅玩法好多，可以結合 TTS、素材下載等 Skill 做出更豐富嘅效果，萬物皆可 Skills。
Remotion Skills GitHub 倉庫
官方 GitHub 倉庫，包含 Remotion Skills 嘅源碼同文檔，可以直接 clone 試玩。
Remotion 係乜？點解咁犀利？
Remotion 係一個顛覆傳統影片剪輯邏輯嘅開源框架，佢嘅核心理念係：像寫網頁一樣寫影片。傳統軟件用圖層加時間軸，但 Remotion 認為影片本質係一秒內連續播放嘅幾十張圖片加音頻。
Remotion 用 React 組件 渲染當前時間點，透過 useCurrentFrame 呢啲 Hook 令代碼知道而家要畫乜，最後 call FFmpeg 將啲圖片序列剪成影片。
安裝同基本使用：用自然語言出片
- 1 執行 npx skills add remotion-dev/skills 安裝 Skills。
- 2 喺 Claude Code 入面就可以用 remotion-best-practices 呢個技能。
- 3 用自然語言同 Claude 講你想做嘅影片，例如「製作一個顯示 npx 安裝過程嘅動畫」。
- 4 生成完之後，喺本地執行 npm install 裝依賴，然後 npm start 預覽動畫。
- 5 覺得冇問題就執行 npm run build TerminalAnimation，喺 out 文件夾就會生成 MP4 影片。
作者第一版就係用呢個流程整咗個 npx 指令執行動畫，效果已經唔錯。
逐步優化：加 Logo、調尺寸、合成動畫
作者覺得第一版太單調，就繼續用自然語言要求改進。例如佢叫 AI「將命令執行嘅輸出內容加到影片入面」，AI 就自動喺本地執行咗命令，擷取輸出結果更新影片。
跟住佢要求加啲宣傳畫面，例如展示 Remotion 同 Claude、OpenCode 嘅關係。AI 就創建咗一個 LogoComposition，包含三個 Logo，仲有「+」符號。預覽嗰陣可以揀 LogoComposition 睇效果。
- 然後佢要求將兩個動畫合成一個，AI 就生成了 CombinedAnimation 動畫庫。注意 build 指令要改做 npm run build CombinedAnimation。
- 最後佢覺得 Logo 太大，叫 AI「縮小 1/3 尺寸」，調整後觀感好好多。
寫在最後：Skills 玩法多，萬物皆可 Skills
作者總結話，如果將 Remotion 同其他 Skills 結合，例如 配音 Skills、出圖 Skills，效果會更加好。佢最近仲用 Skills 復刻咗一個 美圖秀秀軟件，真係「萬物皆可 Skills」。
成篇文嘅啟發係：Skills 唔止可以用嚟寫文章或編程，連影片剪輯、設計工具呢啲傳統認為好複雜嘅任務，都開始可以用自然語言搞掂。
大家好，我係江楓
當你仲用緊Skills出文章嘅時候，已經有人用Skills剪片，效果仲幾好
呢個就係Remotion-dev團隊最近封裝嘅Skills
週末嘅時候玩咗下，效果好唔錯，喺某程度上完全唔再需要用剪映嚟剪片，用自然語言直接輸出
睇幾個效果
1 簡單嘅文字顯示
2 npx安裝過程嘅示範
3 黑客帝國混剪版
上面呢個黑客帝國混剪係網友整嘅，結合咗多種skills: Remotion + 素材下載skill + tts Skills。遲啲我會出篇文章拆解成個過程
Remotion係乜嘢，點解咁勁？簡單介紹下
Remotion係一個顛覆傳統剪片邏輯嘅開源框架，佢嘅核心概念係：好似寫網頁咁樣寫片
傳統剪片軟件係基於圖層+時間軸嘅圖形界面工具。但係片本質上可以理解為：一秒鐘內連續播放嘅幾十張圖片+音頻。
Remotion用React組件渲染當前時間點，提供useCurrentFrame呢啲Hook，等代碼知道而家要畫啲乜
最後調用FFmpeg將呢啲圖片序列剪輯成影片檔案
而Remotion Skills就係將呢一切完全封裝成一個Skills。咁樣喺大模型裏面就可以用自然語言生成影片
喺Skills裏面，有好多MD檔案，包含動畫、音頻、渲染配置等功能。
介紹咗咁多，跟住落嚟實操下，睇下點玩Remotion
01
安裝同構建影片
安裝命令：npx skills add remotion-dev/skills
喺Claude Code裏面就可以見到remotion-best-practices呢個Skills
跟住，你就可以用自然語言嚟製作影片。我準備用一條片嚟示範remotion-skills嘅安裝過程
製作完成會喺本地生成代碼檔案
唔需要睇得明代碼，直接構建就得，分別執行下面三條命令
1. 安裝依賴：
npm install
2. 預覽動畫：
npm start
3. 渲染影片：
npm run build TerminalAnimation
其中第二步預覽動畫嘅時候，會彈出瀏覽器睇動畫。
冇問題嘅話，繼續執行npm run build就得。本地會喺out文件夾生成MP4嘅影片
呢個係第一版嘅效果，顯示咗npx命令執行嘅過程
02
影片優化
第一版效果都唔錯，跟住繼續更新，我需要命令執行嘅效果
請親自執行命令「npx skills install remotion-dev/skills」。睇嚇輸出內容，並將輸出嘅開頭部分作為終端內容加入
喺本地環境中執行咗安裝命令，並將結果更新咗落條片度
重新構建一次
喺條片入面，我需要更多細節例如倉庫克隆等
請添加更多輸出嘅行，包括倉庫克隆、技能檢測同安裝完成訊息。
完整過程有咗，而家我需要喺開頭加返啲宣傳畫面，例如展示Remotion同Claude以及OpenCode嘅關係
創建一個新嘅組合並將佢加到Root.tsx。佢應該將Remotion標誌以圖片形式展示（無標題（淺色模式））
（https://remotion.dev/brand）以及一個「+」，仲有一個Claude代碼標誌同OpenCode標誌
呢度就有2個動畫，一個係終端執行嘅動畫，一個係標誌展示嘅動畫
喺預覽嘅時候，撳LogoComposition就可以睇到效果
下面就係將2個動畫合成一個
將LogoComposition合成加到主合成度，作為終端輸出完成前嘅一個序列。LogoCombo應該喺終端後面，輸出完畢後，再次撳終端
新生成咗CombinedAnimation動畫庫。
執行build嘅時候，命令需要改下
npm run build CombinedAnimation
但係軟件嘅圖標太大，影響觀看體驗。跟住就係對影片進行優化
LogoComposition入面Claude同OpenCode嘅圖標太大，請縮細三分之一嘅尺寸
調整之後，尺寸的確好咗唔少。
寫喺最後
今日呢篇文章主要介紹咗Remotion Skills嘅用法。如果將Remotion同其他Skills結合，例如配音、出圖，做出嚟嘅效果會更好
Skills嘅玩法其實好多，最近我就用Skills復刻咗一個美圖秀秀軟件。真係萬物皆可Skills
GitHub地址：
https://github.com/remotion-dev/skills
如果覺得內容唔錯嘅話，請幫手一鍵三連，轉發俾你嘅朋友
另外想第一時間收到推送，記得將公眾號加個星標啊
大家好，我是江楓
當你還在用Skills出文章的時候，已經有人在用Skills剪輯視頻了，且效果還不錯
這就是Remotion-dev團隊最近封裝的Skills
週末的時候玩了下，效果很不錯，在一定程度上完全不再需要剪映來剪輯視頻了，通過自然語言直出
看幾個效果
1 簡單的文字顯示
2 npx安裝過程的演示
3 黑客帝國混剪版
上面這個黑客帝國混剪是網友做的，結合了多種skills: Remotion + 素材下載skill+ tts Skills。 後面我會來篇文章拆解整個過程
Remotion是啥，為啥這麼牛？簡單介紹下
Remotion是一個顛覆傳統視頻剪輯邏輯的開源框架，它的核心理念是：像寫網頁一樣寫視頻
傳統視頻軟件是基於圖層+時間軸的圖形界面工具。但視頻本質上可以理解為：一秒鐘內連續播放的數十張圖片+ 音頻。
Remotion使用React組件渲染當前時間點，提供 useCurrentFrame 等 Hook，讓代碼知道現在該畫什麼
最後調用FFmpeg將這些圖片序列剪輯成視頻文件
而remotion skills則是把這一切完全封裝成一個skills。這樣在大模型中就可以通過自然語言生成視頻
在skills裏面，有非常多的MD文件，包含動畫，音頻，渲染配置等功能。
介紹了這麼多，下面來實操，看看怎麼玩remotion
01
安裝和構建視頻
安裝命令：npx skills add remotion-dev/skills
在Claude Code中就可以看到remotion-best-practices這個skills
接下來，你就可以用自然語言進行視頻製作了。我準備用一個視頻來演示remotion-skills的安裝過程
製作完成會在本地生成代碼文件
不需要看懂代碼，直接構建即可，分別執行下面三條命令
1. 安裝依賴：
npm install
2. 預覽動畫：
npm start
3. 渲染視頻：
npm run build TerminalAnimation
其中第二步預覽動畫的時候，會彈出瀏覽器查看動畫。
沒問題的話，繼續執行npm run build就可以了。本地會out文件夾生成MP4的視頻
這是第一版的效果，顯示了npx命令執行的過程
02
視頻優化
第一版效果還不賴，接下來繼續更新，我需要命令執行的效果
請親自執行命令“npx skills install remotion-dev/skills”。查看輸出內容，並將輸出的開頭部分作為終端內容添加
在本地環境中執行了安裝命令，並將結果更新到了視頻中
重新來構建一把
在視頻中，我需要更多的細節比如倉庫克隆等
請添加了更多輸出行，包括倉庫克隆、技能檢測和安裝完成消息。
完整過程有了，現在我需要再開頭加上一些宣傳畫面，比如展示remotion和Claude以及OpenCode的關係
創建一個新的組合並將其添加到Root.tsx中。它應該將remotion標誌以圖片形式展示（無標題（淺色模式））
（https://remotion.dev/brand）以及一個“+”，還有一個Claude代碼標誌和OpenCode標誌
在這裏就有2個動畫，一個是終端執行動畫，一個是標誌展示動畫
在預覽的時候，點擊LogoCompostion就能看到效果
下面就是把2個動畫合成成一個
將LogoComposition合成添加到主合成中，作為終端輸出完成前的一個序列。logocombo應在終端後面，輸出完畢後，再次按下終端
新生成了CombinedAnimation動畫庫。
執行build的時候，命令需要改變下了
npm run build CombinedAnimation
但是軟件的圖標太大了，影響觀看體驗。接下來是對視頻進行優化了
LogoComposition中Claude和OpenCode的圖標太大了，請縮小1/3的尺寸
調整後，尺寸確實要好不少了。
寫在最後
今天的這篇文章主要介紹了remotion skills的用法。如果把remotion和其他的skills結合起來，比如配音的，出圖的，做出來的效果會更好
Skills的玩法其實非常多，最近我就用Skills復刻了一個美圖秀秀軟件。真的是萬物皆可Skills
github地址：
https://github.com/remotion-dev/skills
如果覺得內容不錯的話，請幫一鍵三連，轉發給你的朋友
另外想第一時間收到推送，記得將公眾號加個星標哦