2026 年 10 月 1 日，AI 自動化頻道 Jay E | RoboNuggets（約 18.7 萬訂閱）發布 15 分 46 秒的影片 《Turn Claude Into a Video Editing GENIUS (in 3 simple steps)》，上線 12 小時累積約 3 萬次觀看。他要驗證的是一個很具體的問題：Sonnet 5.5 只要 Opus 5.5 一半的 token 成本，它能不能做出幾乎一樣好的影片剪輯與動態圖像？
他給的答案是肯定的，而且整條流程完全沒有用到任何 AI 影片生成模型——畫面上的文字、鏡頭運動、粒子效果，全部是模型自己寫出來並執行的程式碼（JavaScript、HTML、CSS、GSAP）。這也是為什麼每個元素事後都還能編輯，而不是一段無法回頭的黑盒子影片。
⚠️ 揭露：該影片說明欄含多個聯盟連結（Blotato、n8n、Make、ElevenLabs、Apify）與其付費社群推廣，本文不嵌入這些連結。文中提到的 Rubric Editor 是作者為自己社群開發的工具，非公開產品。本文以影片逐字稿為主要依據，並在文末列出方法限制與批判。
一、先分清楚：這套做法跟「AI 生成影片」不是同一件事
很多人看到「AI 剪片」直覺想到 Sora、Veo 那類生成模型。Jay 示範的路線完全相反：
| 面向 | AI 影片生成模型 | 本文這套做法（Claude + 程式碼） |
|---|---|---|
| 輸入 | 文字提示詞 | 真實拍攝素材（談話性影片） |
| 產出本質 | 模型生成的像素 | 程式碼渲染（HTML／JS／GSAP） |
| 可編輯性 | 幾乎不可逆，重做成本高 | 每個元素都能單獨關掉、改色、換字 |
| 風格一致性 | 難複製 | 把風格寫成「設計系統」即可重複使用 |
| 適合場景 | 憑空創造畫面 | 剪輯、壓縮、加動態圖像在既有素材上 |
換句話說，價值不在「生成」，而在壓縮與編排——把冗長的原始素材變成人看得完的成品。
二、Step 1：先轉錄，讓模型知道哪一段該剪掉
談話性影片的第一個問題是廢話太多：停頓、口誤、同一個開場講三次。傳統做法是人工聽完再剪；這裡的做法是先讓模型讀逐字稿。
Jay 的提示詞非常樸素——把素材路徑給 Claude，然後說：
把這段影片用 Assembly AI 轉錄。
接著他再要求模型：「取最後一次 take」（get the latest take）：因為真人重講時，最後一次通常最完整。模型看懂逐字稿後，就能自己判斷哪些是失敗的 take、哪些是純停頓，直接把成品 MP4 交出來。
轉錄工具的取捨（這是整支影片最實用的比較之一）：
| 工具 | 成本 | 速度 | 備註 |
|---|---|---|---|
| Assembly AI | 需 API key（作者稱初期有免費額度） | 1 小時音訊約 42 秒 | 作者實測最快，非贊助 |
| Whisper（開源） | 免費 | 1 小時音訊約 15–50 分鐘（純 CPU，看機器） | 不上傳素材，隱私最佳 |
| ElevenLabs | 訂閱制，每小時成本合理 | 比 Assembly AI 慢一些 | 已有訂閱者可直接沿用 |
作者的提醒很直白：本機跑 Whisper 沒有 GPU 加速時很慢，如果你一小時素材要等半小時，那「自動化」的体感會大打折扣。
回饋迴圈才是關鍵：他用的 Rubric Editor（自家工具）讓他能像在 Premiere 裡一樣拖動剪點，而且每則註解都帶上精確時間戳與畫面位置；把整批註解貼回 Claude，再請它校準剪輯用的 skill——下一次剪同一種口條的素材就會更準。他用一句話總結這個設計：你不需要自己做一套介面，但做了會省很多事。
三、Step 2：用「設計系統」驅動動畫，而不是通用提示詞
第二個步驟是讓 Sonnet 5.5 把剪好的素材加上動態圖像。Jay 特地示範了反面案例：同一段素材只用通用提示詞請 Claude 加動畫，得到的是「AI vibecoded slop」——也就是到處都看得到的預設樣式。他的說法很尖銳：AI slop 的來源，就是初學者在不指定任何設計系統的情況下提示模型。
解法是先建立設計系統，再宣告使用。影片中示範過的風格包括：
| 風格 | 特徵 |
|---|---|
| Flat vector（平面向量） | 簡潔、適合教學與 B2B |
| Isometric（等角） | 有立體結構感但非寫實 |
| 3D render | 材質與光影較重，適合產品展示 |
| Liquid motion／Glassmorphism | 流動與玻璃質感，視覺華麗 |
| Cutout／Collage（Vox 風格） | 拼貼剪紙感，說故事性強 |
設計系統從哪來？ 他推薦三個資源：
- styles.refero.design——提供 design markdown 檔，複製給 Claude 就能請它建立設計系統（主要針對網頁設計）。
- skill.dev、watchships.com——動態圖像／產品發表影片的作品集，多數附出處與起始提示詞。
- 逆向工程：當某個風格沒有公開提示詞時，他直接把參考影片的連結給 Claude，請它用 FFmpeg 抓出截圖拼版（contact sheet），再分析畫面，藉此複製出可重用的設計系統。他強調 FFmpeg 是存在超過 20 年、非常適合 agent 呼叫的開源工具。
兩個實務細節（很容易被忽略）：
- 主動要 SVG。請 Claude 產出圖示、插圖、示意圖時，要求 SVG 格式——可無限縮放不失真、能直接開檔改色，也能被動畫化。這是「拿回編輯權」的關鍵。
- 設計系統要寫成 skill。當某個風格定下來，就請 Claude 把它變成技能（例如
/slush-design），之後一句話就能套用同一套視覺語言。
HyperFrames 本身則用兩個指令安裝：
npx hyperframes@latest
npx skills add heygen-com/hyperframes # 加入 /hyperframes、/gsap、/website-to-hyperframes
四、Step 3：導演式回饋，並把學習成果「寫回技能」
Jay 很誠實地說：一個提示詞最多帶你到 80–90%，剩下的要靠第三步。
做法是看著成品給回饋，而不是在對話框裡空想。他示範的實例很具體：某段講 Claude 設計工具的影音，第一版用的是線條插畫動畫（他自己評價「還行，但可以更好」），於是他註解：「直接顯示 Claude 的 UI」；第二版就把真實介面做進動畫裡，觀眾看到的東西立刻變得熟悉、也更有說服力。
回饋的介面帶來的差異是時間戳：在 Rubric Editor 上點畫面的任一位置留註解，那則註解會自動附上精確時間點與位置。跑完整輪後一次複製全部註解貼回 Claude，比在聊天視窗一句一句描述高效得多。
最後一步是大多數人不會做的：把這輪的學習寫回技能檔。 他請 Claude 把這次 session 的所有回饋codify 進 /animate 技能——若技能已存在，就請它依技能撰寫最佳實務更新。下一次要動畫化影片時，品味已經被固化下來，不用重新教一次。
這一步也正是「同一個模型、不同產出」的分水嶺：差別不在模型，而在你有沒有一個會自我累積的技能庫。
五、配套資源：hyperframes-helper 的三個等級
Jay 同時開源了 hyperframes-helper，把 HeyGen 的開源 HTML→MP4 渲染器 HyperFrames 接上 AI 編碼代理。裝進專案的方法是：
git clone https://github.com/robonuggets/hyperframes-helper
cp -r hyperframes-helper/.claude/skills/hyperframes-helper YOUR_PROJECT/.claude/skills/
它的設計是把工作按複雜度分成三級：
| 等級 | 適用情境 | 做法 |
|---|---|---|
| Level 1：網站轉影片 | 已有一個會動的網頁／元件，想要 6–15 秒 MP4 | 用 HyperFrames 內建的 /website-to-hyperframes，素材可參考 21st.dev |
| Level 2：分鏡（Storyboard） | 原創動態圖像影片，先規劃版面再正式製作 | 用 HTML 分鏡樣板視覺化迭代——每輪約 1 分鐘，對比在 Studio 裡每輪約 15 分鐘 |
| Level 3：引導式影片 | 談話性影片加上動態圖像 | 三步全上：剪輯 → 分鏡標題卡 → 動態圖像疊加 |
內含的東西也值得一提：SKILL.md（工作流程＋16 個 lint 陷阱）、composition-template.html、storyboard-template.html、recipes.md（10 個可直接複製的動態圖像樣式，如毛玻璃、綠幕去背、D3 地球），以及兩段式剪輯管線的三支腳本：
silence-cut.sh——用 FFmpeg 自動偵測並剪掉靜音段落。transcribe-whisper.py——用faster-whisper產出詞級逐字稿。cut-retakes.py——以「最後一次 take 優先」規則自動剪掉早期口誤，只留最乾淨的那次。
此外 repo 也記錄了多剪輯片段用 data-media-start 保持在 Studio 可編輯的技巧，以及最高品質輸出的配方 --quality high --crf 16 --gpu。
六、省下的時間：三個可驗證的數字
| 環節 | 舊做法 | 這套流程 | 差距 |
|---|---|---|---|
| 逐字稿 | 本機 Whisper，1 小時音訊 15–50 分鐘 | Assembly AI，約 42 秒 | 最快約 85 倍 |
| 分鏡迭代 | 在剪輯軟體裡每輪約 15 分鐘 | HTML 分鏡每輪約 1 分鐘 | 約 15 倍 |
| 初版成品 | 人工剪輯數小時 | 單一提示詞即可到 80–90% | 人力前移變為「審片」 |
要注意這些數字的性質：42 秒是雲端 API 的成績、15 分鐘是軟體操作的體感，兩者不是同一種基準，不該直接相乘成「整體快幾倍」。真正穩定成立的是迭代成本的下降——這才是讓人願意多試幾版的原因。
七、需要保留的懷疑與限制
- 「一半價格」是相對 Opus 5.5，不是絕對便宜。整條流程要跑多輪渲染與迭代，token 總量取決於你回頭修幾次；越要求成品，成本越接近你所花的時間。
- 不是 one-shot 魔法。作者自己講明：單一提示詞只到 80–90%，Step 3 才是量產品質的來源。任何聲稱「一句話出片」的說法都略過了這一步。
- 設計系統是門檻，不是選配。沒有設計系統就會得到他口中的 AI slop。而建立設計系統需要審美判斷——這部分無法自動化。
- 工具鏈有依賴。Assembly AI 要 API key、HyperFrames 要 Node 18+ 與 Chrome Headless、本機 Whisper 要有耐心。影片沒有給出跨平台（Windows）的完整驗證。
- 來源性質：本文主要依影片逐字稿與其開源 repo 撰寫，作者同時經營付費社群並使用聯盟連結，敘事上傾向樂觀；文中數字皆為其自述，未經第三方複驗。
- 渲染品質與時間未量化。影片展示了成品效果，但沒有公布「一段 60 秒影片實際渲染多久」，這對評估可行性其實很關鍵。
八、想跟著做的最短路徑
- 安裝 HyperFrames：
npx hyperframes@latest，再npx skills add heygen-com/hyperframes。 - 把 hyperframes-helper 放進專案的
.claude/skills/。 - 用 Claude Code（Sonnet 5.5 即可）先跑 Step 1：給素材路徑，請它轉錄並剪掉停頓與 NG take。
- 挑一個設計系統（可從 styles.refero.design 取 markdown，或請 Claude 用 FFmpeg 逆向參考影片）。
- 看成品留時間戳註解 → 一次貼回 Claude → 滿意後請它把學習寫進你的
/animate技能。
真正的複利在第 5 步：每支影片都讓技能更貼近你的品味，而不是每次都從零開始提示。
資料來源
- Turn Claude Into a Video Editing GENIUS (in 3 simple steps)（Jay E | RoboNuggets，2026-10-01）
- robonuggets/hyperframes-helper（GitHub）
- HeyGen HyperFrames（開源 HTML-to-MP4 渲染器）