零設計基礎，我用AI對話的方式做了一條能看的視頻
整理版優先睇
用AI對話組合Remotion與前端設計技能，零設計基礎也能生成高質動畫視頻
呢篇文章係作者分享佢點樣用AI助手皮皮蝦（OpenClaw）製作動畫視頻嘅真實經驗。作者有個做動畫嘅朋友，投訴整一條30秒嘅片要花3日調整動畫節奏，於是作者諗住用AI幫手。佢對設計一竅不通，但見到Remotion——可以用React寫代碼出視頻——就想試下用AI輔助克服設計難題。
作者先安裝Remotion技能，生成咗一條影片，但效果「一眼AI風格」，好醜。之後佢諗到結合Anthropic官方嘅Frontend Design技能，呢個技能專門解決AI生成嘢「點解咁醜」嘅問題。作者叫AI融合兩個技能，建立一個混合Skill。再生成嘅影片，畫面設計質素大幅提升，作者嘅朋友仲問係邊個設計師做嘅，完全睇唔出係代碼生成。
作者從中學到嘅係：單獨用Remotion只係工具，出嚟嘅效果取決於代碼質素；Frontend Design係審美外掛，將設計決策封裝成代碼；組合技能先係正確用法——兩個一齊用就可以用代碼量產好睇嘅視頻。作者認為AI工具嘅價值唔係替代人，而係將專業門檻封裝起嚟。
- 結論：用AI對話組合Remotion同Frontend Design技能，可以令零設計基礎嘅人創作出高質嘅動畫視頻。
- 方法：先安裝Remotion技能，再安裝Frontend Design技能，然後叫AI融合兩個技能建立混合Skill，最後用新技能生成視頻。
- 差異：單用Remotion會出「程序員風格」嘅醜片；加上Frontend Design後，畫面設計達到專業水準。
- 啟發：AI工具嘅真正價值係封裝專業知識，令外行人可以透過描述需求得到高質結果。
- 可行動點：直接複製文章入面嘅對話話術俾你嘅Agent，逐步調試直至成功。
安裝Remotion技能並融合Frontend Design的話術
（1）remotion-best-practices這是視頻生成skill。安裝命令:npx skills add remotion-dev/skills （2）安裝 Anthropic 官方的 frontend-design skill （3）我們做視頻的 Remotion 本質上是寫前端代碼來實現動態效果，是否能把呢個frontend-design給結合進去 ...（完整對話請參考原文）
從朋友吐槽到AI初試
作者有個做動畫嘅朋友，投訴整一條30秒嘅片要花3日調整動畫節奏。作者諗住用AI幫手，佢對設計一竅不通，但見到Remotion——可以用React寫代碼出視頻。
一眼AI風格
npx skills add remotion-dev/skills作者先安裝Remotion技能，生成咗一條影片，但效果「一眼AI風格」，好醜。佢話「呢樣嘢如果就咁用，同我朋友手動調3日做出嚟嘅野差距太大」。
融合Frontend Design，畫面質素飛躍
作者諗到用Anthropic官方嘅Frontend Design技能，呢個技能專門解決「AI生成嘅嘢點解咁醜」嘅問題。佢叫AI安裝技能，然後融合兩個技能建立一個混合Skill。
非對稱佈局
Cormorant Garamond
再生成嘅影片畫面設計質素大幅提升，作者個朋友仲問「第二個你找哪個設計師做的？」——完全唔知係代碼生成。
學到嘅經驗與復現方法
- 1 Remotion本身只係工具，代碼寫成點，出嚟嘅效果就係點。
- 2 Frontend Design係審美外掛，將設計決策封裝成代碼。
- 3 組合技能先係正確用法，將兩個技能融合效果最好。
復現好簡單：直接複製上面嘅話術俾你嘅Agent，無論係OpenClaw、Hermes定ClaudeCode，支援Skills嘅工具都得。
直接複製上面的話術
做好逐步調試的準備
唔一定一次成功，出現錯誤可以叫AI再嘗試，例如中文顯示錯誤、Emoji圖標冇顯示，讓AI自己改。
適合咩人用
Remotion嘅本質原理：用寫網頁嘅方式做視頻。你寫一段代碼描述「咩元素喺咩時候出而家邊度、點樣動」，Remotion就將段代碼錄製成視頻。網頁元素一般係文字、線條、色彩塊等。
用寫網頁的方式做視頻
- 科普視頻創作者：✅批量生成統一風格的片頭/片尾
- 教師：✅做數學、物理原理演示動畫
- 動畫設計師：⚠️需要懂代碼，但能做出更靈活的動畫
- 短劇創作者：❌本質上是代碼設計多幀動畫，無法生成人像等
封裝專業門檻，AI嘅真正價值
作者最後意識到：AI工具嘅價值唔在於替代人，而在於將專業門檻封裝起嚟。佢唔識設計，但可以描述想要嘅效果（「像雜誌一樣」）。
將專業門檻封裝起嚟
如果你都用緊OpenClaw，建議試下呢個組合。唔使識設計，都能做出好睇嘅嘢。
本文記錄咗我同 AI 助手皮皮蝦（OpenClaw）嘅真實對話過程，你可以直接複製我嘅說話方式，等你嘅 OpenClaw、Hermes 等幫你整動畫影片。
一、先講講背景
我有個做動畫嘅朋友，前幾日同我呻：做一條 30 秒嘅片，淨係執動畫節奏就用咗 3 日。聽完我就諗，可唔可以用 AI 幫我搞掂呢件事？
啱啱最近睇緊 OpenClaw 嘅生態，發現有個叫 Remotion 嘅嘢——可以用 React 寫程式碼直接出影片。聽落好似幾正，但問題係我對設計一竅不通，做出嚟嘅嘢應該會好醜。
於是我就諗，可唔可以叫皮皮蝦幫我試嚇路先？
二、第一輪測試：安裝 Remotion
我同皮皮蝦講嘅原話：
remotion-best-practices呢個係影片生成 skillll。
安裝指令：npx skills add remotion-dev/skillsremotion
官網: https://www.remotion.dev
幫我安裝 Remotion 技能，我要測試用程式碼整影片。
皮皮蝦查咗嚇，幫我裝咗 remotion-video 技能（基礎版）。然後我問佢：
做一個關於 Skills 嘅科普介紹影片，包括佢嘅起源、發展、結構、作用等等。先去搜尋 Agent Skills 相關知識，進行合理嘅腳本設計，再用我哋呢個 Skill 整出呢條影片。
成品展示
講真，用得，但好醜。就係典型嗰種一眼睇到係 AI 風格。
我當時嘅諗法係：呢件嘢如果就咁用，同我朋友手動執 3 日整出嚟嘅嘢差距太大。但係 Remotion 本身做動畫冇問題，問題係我唔知點樣令佢好睇。
三、第二輪測試：裝上 Frontend Design 技能
我諗咗一陣，Remotion 負責「動」，而「好睇」呢方面要另外諗辦法。啱啱之前 ClaudeCode 開發時，有個 Frontend Design 技能，專門解決「AI 生成嘅嘢點解咁醜」嘅問題。
我同皮皮蝦講嘅原話：
安裝 Anthropic 官方嘅 frontend-design skill
裝完之後，我叫佢將兩個技能融合埋一齊試嚇。繼續對話：
我哋整影片嘅 Remotion 本質上係寫前端程式碼嚟實現動態效果，可唔可以將呢個 frontend-design 結合埋入去，生成嘅影片可以質素提升？
龍蝦會研究點樣結合，可能會同你提議創建一個融合技能。
創建一個新嘅混合 Skill，參考 Frontend Design 嘅美學原則，專門用喺 Remotion 影片生成
創建成功之後，用新嘅技能叫小龍蝦再生成一次 Skills 嘅科普介紹影片。
成品對比
今次出嚟嘅效果完全唔同（淨係講畫面設計嘅樣式，內容可以根據提示詞完整性調整）：
四、我學到咗啲乜
1. Remotion 本身只係工具
佢可以俾你用程式碼整影片，但係程式碼寫成點，出嚟嘅效果就係點。如果你唔識設計，出嚟嘅就係「程式員風格」。
2. Frontend Design 係審美外掛
呢個技能嘅核心價值係：將設計決策封裝成程式碼。你唔需要知道點解 Cormorant Garamond 好睇，亦唔需要知道咩叫「非對稱佈局」，技能已經幫你揀好咗。
3. 組合技能先係正確用法
單獨用 Remotion = 整到影片，但好醜。
單獨用 Frontend Design = 有審美，但唔知用喺邊。
兩個一齊用 = 可以用程式碼量產好睇嘅影片。
五、如果你想重現
直接複製上面嘅說話方式，send 俾你嘅 Agent，無論係 OpenClaw、Hermes 定係 ClaudeCode、Trae 等支援 Skills 嘅工具
準備好逐步除錯：未必一次就成功。出現錯誤可以叫 AI 再試，確保每次成功，我測試 Remotion 第一次用，都出現咗中文顯示錯誤、Emoji 圖標冇顯示嘅問題，叫 AI 自己改。
六、適合邊啲人用
Remotion 嘅本質原理：用寫網頁嘅方式整影片
你寫一段程式碼描述「咩元素喺咩時候出現喺邊度、點樣鬱」，Remotion 就會將呢段程式碼錄製成影片。而網頁元素通常係文字、線條、色塊等。
七、寫喺最後
今次測試令我意識到一件事：AI 工具嘅價值唔在於取代人，而在於將專業門檻封裝起嚟。
我唔識設計，但我可以描述我想要嘅嘢（「好似雜誌咁」）。Frontend Design 幫我將呢個描述翻譯成具體嘅設計決策（字體、配色、佈局），Remotion 幫我將呢啲決策渲染成影片。
最後出嚟嘅效果，我唔講冇人知係程式碼生成嘅。
如果你都用緊 OpenClaw，建議試嚇呢個組合。唔使識設計，都可以整到好睇嘅嘢。
本文記錄了我跟 AI 助手皮皮蝦（OpenClaw）的真實對話過程，你可以直接複製我的話術，讓你的OpenClaw、Hermes等幫你做動畫視頻。
一、先說說背景
我有個做動畫的朋友，前幾天跟我吐槽：做一條 30 秒的片子，光調動畫節奏就花了 3 天。聽完我就想，能不能用 AI 幫我搞定這事兒？
正好最近在看 OpenClaw 的生態，發現有個叫 Remotion 的東西——能用 React 寫代碼直接出視頻。聽起來挺香的，但問題是我對設計一竅不通，做出來的東西估計會很醜。
於是我就想，能不能讓皮皮蝦先幫我探探路？
二、第一輪測試：安裝 Remotion
我跟皮皮蝦說的原話：
remotion-best-practices這是視頻生成skill。
安裝命令:npx skills add remotion-dev/skillsremotion
官網: https://www.remotion.dev
幫我安裝 Remotion 技能，我要測試用代碼做視頻。
皮皮蝦查了一下，給我裝了 remotion-video 技能（基礎版）。然後我問它：
做一個關於Skills的科普介紹視頻，包括其起源、發展、結構、作用等等。先去搜索Agent Skills相關知識，進行合理腳本設計，再用我們這個Skill製作出這個視頻。
成品展示
說實話，能用，但醜。就是那種典型的一眼AI風格。
我當時的想法是：這玩意兒如果就這麼用，跟我朋友手動調 3 天做出來的東西差距太大了。但是 Remotion 本身做動畫沒問題，問題是我不知道怎麼讓它好看。
三、第二輪測試：裝上 Frontend Design 技能
我琢磨了一下，Remotion 負責"動"，那"好看"這塊得另想辦法。正好之前ClaudeCode開發時，有個 Frontend Design 技能，專門解決"AI 生成的東西為什麼都這麼醜"的問題。
我跟皮皮蝦說的原話：
安裝 Anthropic 官方的 frontend-design skill
裝完之後，我讓它把兩個技能融合起來試試。繼續對話：
我們做視頻的 Remotion 本質上是寫前端代碼來實現動態效果，是否能把這個frontend-design給結合進去，生成的視頻能得到質的提升
龍蝦會研究怎麼結合，可能會給你提出創建一個融合技能的建議。
創建一個新的混合 Skill，借鑑 Frontend Design 的美學原則，專門用於 Remotion 視頻生成
創建成功後，用新的技能讓小龍蝦再生成一次Skills的科普介紹視頻。
成品對比
這次出來的效果完全不一樣了（僅論畫面設計的樣式，內容可以根據提示詞完整性調整）：
四、我學到了什麼
1. Remotion 本身只是工具
它能讓你用代碼做視頻，但代碼寫成什麼樣，出來的效果就是什麼樣。如果你不懂設計，出來的就是"程序員風格"。
2. Frontend Design 是審美外掛
這個技能的核心價值是：把設計決策封裝成代碼。你不用懂為什麼 Cormorant Garamond 好看，也不用知道什麼叫"非對稱佈局"，技能已經幫你選好了。
3. 組合技能才是正確用法
單獨用 Remotion = 能做出視頻，但醜。
單獨用 Frontend Design = 有審美，但不知道用在哪。
兩個一起用 = 能用代碼量產好看的視頻。
五、如果你想復現
直接複製上面的話術，發給你的 Agent，不管是OpenClaw、Hermes還是ClaudeCode、Trae等支持Skills的工具
做好逐步調試的準備：不一定能一次就成功。出現錯誤可以讓AI 再嘗試，確保每次能成功，我測試 Remotion 第一次使用，也出現了中文顯示錯誤、Emoji圖標沒顯示的問題，讓 AI 自己改。
六、適合什麼人用
Remotion 的本質原理：用寫網頁的方式做視頻
你寫一段代碼描述"什麼元素在什麼時候出現在哪裏、怎麼動"，Remotion 就把這段代碼錄製成視頻。而網頁元素一般是文字、線條、色彩塊等。
七、寫在最後
這次測試讓我意識到一個事：AI 工具的價值不在於替代人，而在於把專業門檻封裝起來。
我不會設計，但我能描述我想要什麼（"像雜誌一樣"）。Frontend Design 幫我把這個描述翻譯成具體的設計決策（字體、配色、佈局），Remotion 幫我把這些決策渲染成視頻。
最後出來的效果，我不說沒人知道是代碼生成的。
如果你也在用 OpenClaw，建議試試這個組合。不用懂設計，也能做出好看的東西。