用 Claude Code + Remotion 把廣告片「寫」出來：15 秒產品影片，6 步輸出 MP4

為什麼別人用 Claude 做的廣告片像廣告公司拍的，你的只是投影片在動？大家以為做影片要會 After Effects、剪好幾天。其實 Claude Code 可以用 Remotion 把影片「寫」出來。這篇替一個虛構的冷泡茶品牌「山霧冷泡茶 MOUNTAIN MIST」做了一支 15 秒、直式的產品廣告。下面每一張影片畫面，都是從 Claude Code 實際輸出的 MP4 直接截出來的。

01先搞懂：Remotion 是什麼，為什麼適合交給 Claude Code

Remotion 是用 React 程式碼做影片的工具：每一格畫面都是程式算出來的，最後在你自己的電腦上輸出成 MP4。它出來的是真正的影片檔，尺寸、格數、長度都由你決定，不用螢幕錄影。

整支影片就是一個程式專案，所以 Claude Code 可以直接幫你寫：一鏡一個元件，文字、顏色、產品圖都是可以改的設定。之後要改一句文案或換一支產品，改一行就好，不用重做。

山霧冷泡茶 15 秒廣告的六個鏡頭畫面，依序編號 1 到 6 — 我們的成品：六鏡，每鏡約 2.5 秒。每一張都是從輸出的 MP4 截出來的畫面。

Remotion 官方文件 — 安裝和基本用法
Remotion 官方 Agent Skills（GitHub） — 官方寫明 Claude Code、Codex、Kimi Code、Cursor 都能用

02第 1 步：建立 Remotion 專案，裝官方 skills

電腦先裝好 Node.js 和 Claude Code。
開一個新資料夾，在終端機輸入：npx create-video@latest。官方文件的寫法是 npx create-video@latest --yes --blank my-video，會直接建一個空白專案；我們實際用的是 npx create-video@latest --yes --blank --no-tailwind。
再輸入：npx skills add remotion-dev/skills，裝上 Remotion 官方的 agent skills。
在專案資料夾裡打開 Claude Code。

官方 skills 是寫給 AI 看的 Remotion 使用說明，包括建立專案、寫動畫、開 Studio 預覽、輸出影片等。例如 /remotion-create 的官方範例就是「Make a promo video for a record store」（幫唱片行做一支宣傳影片）。

03第 2 步：先寫分鏡，再叫它寫程式

下指令前，先把分鏡寫好：總長幾秒、分幾鏡、每一鏡畫面上發生什麼事。我們寫了六鏡：疊字開場、瓶子掉落、雙色對切、冷泡 8 小時、原料爆開、結尾。

分鏡提示詞（把［］換成你的）

用 Remotion 幫我做一支［15］秒的產品廣告，直式 1080×1920、30fps。品牌：［品牌名＋英文名］。產品圖在 public/：［檔名］。
參考方向：［平塗色塊＋超大窄體字／同一個字疊好幾行／產品浮在空中、葉子繞著轉］。
分鏡［六］鏡，每鏡約［2.5］秒：1.［大字疊字開場］ 2.［產品從上方落下、彈一下停住，素材繞著產品轉］ 3.［兩個口味雙色對切］ 4.［賣點文字動畫］ 5.［原料從中心爆開，每個配小標籤］ 6.［結尾：產品＋品牌名］。
全部用 spring() 彈簧動畫、元素錯開出場，畫面上沒有任何一刻是靜止的。配色：［3–4 個顏色］，字體從本機檔案載入。每一鏡做成一個獨立元件，用 <Sequence> 排時間軸。要像廣告公司做的品牌片，不要像投影片在動。

Claude Code 照這段寫出六個鏡頭元件（S1Stack 到 S6End），再用 <Sequence> 排成一條時間軸：一共 450 格，也就是 30fps 的 15 秒。

04第 3 步：放進產品圖（去背 PNG）

把去背 PNG 放進專案的 public 資料夾，在提示詞裡寫出檔名就好，Claude 會用 Remotion 的 staticFile() 讀進來。我們放了兩支瓶子和七個素材：茶葉嫩芽、落葉、茉莉花、冰塊、烏龍茶球、茶水飛濺、小水珠。

烏龍和茉莉兩支冷泡茶瓶，加上茶葉、茉莉花、冰塊、茶球、水花等去背素材 — 我們用的產品圖和素材，全部是 ChatGPT 生成的 AI 圖片。

一開始兩支瓶子是分開生成的，玻璃、瓶蓋、瓶頸都不一樣，看起來像兩個品牌。最後茉莉口味是用程式從烏龍那支圖改出來的：把茶色換成淡黃綠，擦掉原本的字，再寫上「茉莉」。

05第 4 步：動作全部用 spring() 彈簧曲線

spring() 是 Remotion 內建的物理彈簧動畫。官方預設值是 mass 1、damping 10、stiffness 100。damping（阻尼）調小，東西就會多彈幾下。

第 2 鏡三格畫面：瓶子傾斜落下、彈一下停住、茶葉和冰塊繞著瓶子轉 — 第 2 鏡：瓶子斜斜掉下來、彈一下停住，茶葉和冰塊再繞著瓶子轉進來。

這一鏡的程式用 damping 9、stiffness 110，比預設多彈一點。素材每個晚 3 格出場，轉到瓶子前面的清楚、轉到後面的加一點模糊，畫面就有前後景深。

第 1 鏡：BREW 疊了五行，上面幾行淺色、最後一行實心，茶葉和冰塊飄在畫面上 — 第 1 鏡：BREW 疊五行，左右交錯甩進來，最後一行實心。

想調整動作時這樣說（把［］換成你的）

第［2］鏡的［瓶子］掉下來時多彈［一兩］下，把 spring 的 damping 調低一點。其他鏡頭不要動。

06第 5 步：npx remotion studio 預覽，一鏡一鏡改

輸入 npx remotion studio（我們的專案也可以用 npm run dev），瀏覽器會打開 Remotion Studio：中間是畫面，下方的時間軸可以一格一格拖著看。

Remotion Studio 介面，預覽第 4 鏡，右側顯示 1080×1920、30fps、15 秒 — Remotion Studio：右邊顯示 1080×1920、30fps、15 秒，下方時間軸每一鏡都是一段 Sequence。

我們改了三輪才定稿，設計檢查從 7 分、8 分到通過。實際修過的地方：

第 2 鏡：瓶子擋住大字中間的字母，手機上讀不出來。改成把 SLOW、BREW 從中間拆開，讓瓶子站在空隙裡。
第 4 鏡：圓環和下方字帶之間空了一大塊。改成「小時」跟著 8 一起彈出來。
結尾：背後的淡色大字被切到只剩「AI S」幾個字母。改成山的剪影。
兩支瓶子不像同一個系列。改成用烏龍瓶做出茉莉瓶（第 3 步）。

第 3 鏡：左邊琥珀色烏龍、右邊淡黃綠茉莉，兩支同款瓶子 — 第 3 鏡：左琥珀「烏龍」、右淡黃綠「茉莉」，兩支瓶子終於像同一個系列。

第 4 鏡兩格畫面：圓環畫到一半數字是 6，畫完一圈停在 8 小時 — 第 4 鏡：圓環畫一圈，數字從 1 跳到 8，「小時」跟著彈出來。

07第 6 步：npx remotion render，輸出 MP4

滿意之後輸入 npx remotion render，後面接影片的名稱（composition ID）和輸出路徑。我們用的是：npx remotion render MountainMist out/mountain-mist-promo.mp4。官方文件說，不寫名稱的話它會讓你從清單裡選。

輸出結果是 1080×1920、30fps、450 格、15 秒、27.3 MB 的 MP4。第一次輸出時，Remotion 自己準備好了算圖用的瀏覽器，我們不用另外設定。

結尾畫面：山霧冷泡茶大字，烏龍和茉莉兩支瓶子並排，下方小字註明虛構品牌 — 第 6 鏡結尾：兩支瓶子並排升起，下方註明「虛構品牌示範・產品圖為 AI 生成」。

08要注意

山霧冷泡茶 MOUNTAIN MIST 是虛構品牌，影片由 Claude Code 用 Remotion 寫成，示範用。
產品圖和素材是 ChatGPT 生成的 AI 圖片，茉莉瓶是用程式從烏龍瓶改色做出來的。真的要賣的商品，請用實拍的產品照。
「冷泡 8 小時」是這個虛構產品的宣稱，畫面上有標註。真實產品的賣點要正確、有根據。
Remotion 授權：個人、員工 3 人以下的營利公司、非營利組織，以及還在評估、沒有商業使用的人可以免費用；其他公司要買 Company License。以官方授權條款為準。
字體從本機檔案載入時，記得用可以商用的字體，例如 Noto Sans TC（SIL OFL 授權）。

Remotion 授權條款 — 免費使用的條件和公司授權