Claude Code 做影片實測： 30 秒像素風品牌影片製作流程及 Skill

文／Ring・益盛科技 專案經理

所以我們真的做了一支。
我把影片腳本交給 Claude Code，它用 16 分鐘完成 30 秒影片的畫面，再花 15 分鐘加入配樂與音效。

我覺得只做一支影片有點可惜。
這次花最多心思的，是把「怎麼產生畫面、怎麼渲染、怎麼找音樂、怎麼安排音效、怎麼檢查響度、怎麼處理授權」這整套流程。

所以後來我決定：
把整套影片製作流程整理成 Claude Code Skill。
我把我們公司 Logo、林小虎專屬素材拿掉，留下可以重複使用的流程、範本與腳本，做成 pixel-brand-video，放到 GitHub 開源，歡迎大家下載

下面從第一次做影片開始，記錄配樂與音效處理、成品檢查，一直到怎麼整理成開源 Skill。

Claude Code 做影片實測：16 分鐘完成畫面、15 分鐘完成配樂音效

我貼了一份 10 關的影片腳本給 Claude Code。
先定義畫面比例、影片長度、要不要聲音。

成品是一支 30 秒、1920×1080、每秒 30 格的 MP4，檔案不到 8 MB。
畫面依腳本走過十個關卡：
老舊網站、UI／UX 重新設計、RWD 響應式網頁、AI 功能串接、SEO 搜尋優化、GEO／AI 搜尋曝光、網站速度最佳化、降低長期成本、原始碼自有、網站正式上線，最後是益盛科技的 Logo。

用 Claude Code 做影片要先準備什麼？

這套流程會用到 Claude Code、Node.js 22 以上與 FFmpeg，畫面由 HyperFrames 負責渲染。
另外，我們的 Skill 使用 Python 3 處理 Logo 像素化與音樂節拍估算。

HyperFrames 是 HeyGen 釋出的開源工具，用 HTML 和 CSS 寫畫面，再輸出成 MP4。
它用無頭 Chrome 逐格擷取畫面，交給 FFmpeg 編碼，所以同樣的輸入會得到同樣的影片。
授權是 Apache 2.0。

其實這整支影片的畫面，其實都是 Claude 寫出來的網頁。
想改字或換顏色，只要修一下程式碼重新整理就好，不必使用剪輯軟體。

怎麼讓 AI 做出品牌一致的畫面？

先固定素材和規則，不要每次都讓 AI 重新設計。

為了確保視覺一致，我們預先固定了五個核心元素：
透明 Logo、林小虎、六種品牌色、粗黑框與硬邊陰影的像素風格，以及大標題數量。
腳本裡的大標題被嚴格限制在五組：
AI Ready、SEO、GEO、降低長期成本、原始碼自有。
其餘資訊全部用小字呈現，觀眾才抓得到重點。 到了『成本』這一關，我們改用畫面說話：
傳統平台的月租費、抽成、功能加購和外掛費用，數字開始暴增；
接著林小虎一按按鈕，瞬間切換成自有網站架構，長期成本曲線隨之大幅下降。

畫面要怎麼一步步做出來？

畫面製作分五個步驟，從建立專案到輸出 MP4。

1. 建立專案。
   執行 npx hyperframes init，產生空白的影片專案。


2. 放入素材並寫畫面。
   把 Logo 與林小虎放進專案資料夾，請 Claude 依腳本寫成 HTML，每一關一個場景。


3. 執行檢查。
   HyperFrames 內建檢查指令，會掃出語法與版面問題。


4. 渲染草稿並逐關看圖。
   草稿渲染約 2 分鐘，每一關截一張圖檢查版面。


5. 渲染高品質成品。
   確認沒問題後輸出 MP4，同樣約 2 分鐘。

第 3 與第 4 步，是輸出前最關鍵的品質把關。
我們先透過檢查指令擋下兩個問題：
第一，動畫不能直接修改字距；
第二，系統內建的『新細明體（PMingLiU）』需要另外宣告。
接著在草稿逐關看圖時，我們又微調了四個版面細節：
貼紙位置、插圖顏色、寶箱蓋角度，以及標籤寬度。
最棒的是，這些檢查步驟與注意事項，現在都已經寫進 Skill 的標準流程裡。
下一支影片只要照著跑，就不用再重複檢查一次了。

免費配樂和音效，哪些可以放心商用？

我們用的是 Mixkit 的免費授權素材。
授權頁寫明音樂與音效都可商用，不需署名，不過限制不同。

授權全文： Mixkit 授權頁

記得授權不確定的素材不要用。

音效怎麼配才不會吵？

每個音效只出現在關鍵動作，音量比背景音樂略大，音效出現時音樂會自動壓低。

選歌的條件是每分鐘 110 到 130 拍、沒有人聲、節奏明確的科技感曲子。
Claude 下載了 8 首候選，用程式估算每首的節拍，最後選了 Mixkit 的「Deep Urban」，作者是 Eugenio Mininni，約 124 BPM。

這首歌前段是安靜的鋪陳，接著節奏全開。
我們把節奏全開的位置對到影片的 5.6 秒，也就是 AI Ready 出現的那一刻。
為了讓 16 個小節剛好填滿 30 秒，速度從 124 BPM 加快到 128 BPM，約快 3%。

音效共有 31 個檔案，排出 151 個音效事件（含自己合成的 8-bit 短音）。
每個事件都寫成「影片第幾秒、多大聲、要不要升降音高」。

聲音的比例大約是 80% 現代科技音效、20% 8-bit。
8-bit 短音由 FFmpeg 以基礎波形自行合成，這部分沒有使用第三方音效素材。
轉場只放很輕的像素噪音和短促的掃頻聲，重低音只留給幾個關鍵時刻，像是 AI Ready、寶箱解鎖和 Logo 出現。

成品要怎麼檢查，才能放心發布？

先讓 Claude 用數據跑過一遍檢查，最後再由人工親自試聽確認。
下表是這次的檢查項目與結果，響度用 LUFS 表示，它衡量整支影片聽起來的平均音量。

在製作通用範本時，順便確認了音訊長度：
30 秒的影片，混出來的音訊一度只有 28.46 秒，而且結尾還沒有淡出。
查了才發現，問題出在『音效出現時自動壓低音樂』這個功能。
它的輸出長度會以『較短的那條音軌』為準，而最後一個音效正好在 28.5 秒就結束了。
現在混音腳本會自動補上靜音，直接撐滿 30 秒，套用範本的人不用手動調整。
像之前的益盛版影片，因為最後一個音效剛好拖到 30 秒，才沒有撞到這個 Bug。
雖然 Claude Code 會幫忙包辦響度、峰值、音軌長度和畫面對位等數據檢查，
但發布前，還是要記得自己親自完整聽一遍！

怎麼把整套影片製作流程做成 Claude Code Skill，並開源到 GitHub？

Skill 是一個資料夾，裡面有寫流程的 SKILL.md，加上範本和腳本。
放在 ~/.claude/skills/<名稱>/ 所有專案都能用，放在專案的 .claude/skills/<名稱>/ 只給該專案。
這是 Claude Code 官方文件的說明。

Skill 保存的是『怎麼做出下一支影片』的流程，成品影片只是其中一次的結果。
在第一次製作成功後，我們把固定的部分全部抽出來：
包括畫面規則、渲染步驟、配樂挑選、音效排程、混音以及成品檢查，完整寫進 SKILL.md。
這套流程已放上 GitHub，採用 MIT 授權，大家都可以免費下載、修改與使用。
只要換上你自己的 Logo、品牌色和腳本，就能快速產出專屬的品牌影片。
另外要注意，通用版並沒有附帶任何音樂或音效檔案。
因為 Mixkit 的授權條款不允許單獨轉散布，所以腳本會引導大家直接從 Mixkit 下載，並自動為每一個使用到的素材產生授權紀錄。

重開 Claude Code 後，直接說需求就好，例如：

用 pixel-brand-video 幫我做一支 30 秒影片。品牌「XX 科技」，Logo 在 logo.png，主題是「電商網站改版」，三個重點：速度、SEO、金流串接。要配樂和音效，直接做完不用問我。

AI真正幫你省時間的方式，不是每一次都重新提問，而是把成功的流程，變成可重複執行的 Skill。

用 Claude Code 做影片的常見問題

pixel-brand-video 是什麼，可以免費用嗎？

它是益盛版流程去掉公司專屬素材後的通用版 Claude Code Skill，採 MIT 授權，可以免費下載、修改與使用。
範本不含音樂與音效檔，需要自己從 Mixkit 下載。

不會寫程式也能做嗎？

可以。
程式由 Claude 寫，你需要的是能安裝 Node.js 和 FFmpeg，並看得懂 Claude 的回報。
遇到錯誤時，把訊息貼給 Claude，它會自己修。

做出來的影片可以商用嗎？

可以用在商業專案，但素材授權要分開確認。
HyperFrames 採 Apache 2.0 授權；Mixkit 的免費音樂與音效也允許商業專案、不需署名。
音樂不能用在電視、廣播與電玩遊戲，音效的使用範圍較寬，但不能單獨轉散布，兩者都不能登記到版權管理服務，細節見上表。
Logo、字型和圖片由你自己確認授權。

可以做直式 9:16 或其他長度嗎？

範本是 16:9、30 秒。
直式或其他長度要重新調整版面和時間軸，這部分可以請 Claude 修改，我們還沒有實測所需時間。

換成自己的品牌，要改哪裡？

在範本檔案裡搜尋 EDIT 註解：
改文字、六個品牌色、關卡名稱，再換上你的 Logo 和吉祥物圖檔。
Logo 的像素版可以用附的腳本自動產生。

這一次，我們留下來的不只是一支 30 秒的影片，還有一套整理好的 Skill。
第一次花時間摸索出來的流程，下一次就能直接重複執行
pixel-brand-video 已經放到 GitHub 開源，想自己試的人可以直接拿去改。

益盛科技 專案經理 Ring