零設計基礎，我用AI對話的方式做了一條能看的視頻
整理版優先睇
零設計基礎，用AI對話組合技能做出專業級動畫視頻
呢篇文章係作者親身測試紀錄。佢有個做動畫嘅朋友，成日抱怨調一條30秒片嘅節奏就要搞足3日。作者本身對設計一竅不通，但想用AI幫手搞掂。佢發現咗Remotion（用React寫代碼生成視頻）同埋Frontend Design（解決AI產出醜樣問題）呢兩個技能，就諗可唔可以溝埋一齊用。
作者先單獨用Remotion整咗一條片，結果出嚟好醜，典型「程序員風格」。之後佢裝埋Frontend Design技能，叫AI將兩個技能融合，再生成一次。呢次嘅成品連佢個做動畫嘅朋友都以為係請設計師做嘅。作者反思，AI工具嘅真正價值唔係取代人，而係將專業門檻封裝起嚟：你唔使識設計，只需描述想要嘅效果，AI就會幫你轉化成具體嘅設計決策同動畫。
如果你都想復現，可以直接複製文中嘅對話話術俾你嘅AI助手，並逐步調試。呢個組合特別適合科普視頻創作者同教師批量生成統一風格嘅片頭片尾或原理演示，但短劇創作者就未必啱用，因為Remotion本質係用代碼做多幀動畫，生成唔到人像。
- 組合技能（Remotion + Frontend Design）可以令零設計基礎嘅人量產高質動畫視頻
- 先裝Remotion技能生成基本視頻，再裝Frontend Design技能融合並重新生成
- 單用Remotion只係「程序員風格」；加上Frontend Design就變成專業設計
- AI工具嘅真正價值係封裝專業知識，將「描述需求」轉化為「具體執行」
- 如果係科普創作者或教師，可以直接複製文中話術試用；注意逐步調試錯誤
Remotion + Frontend Design 組合技能對話指令
直接複製以下話術發俾AI：第一步：「remotion-best-practices 這是視頻生成skill。安裝命令:npx skills add remotion-dev/skills，remotion官網: Remotion 技能，我要測試用代碼做視頻。」然後要求製作一個科普介紹視頻。第二步：安裝 Frontend Design 技能後，繼續對話：「我們做視頻的 Remotion 本質上是寫前端代碼來實現動態效果，能否把呢個frontend-design結合進去？創建一個新的混合 Skill，借鑑 Frontend Design 的美學原則，專門用於 Remotion 視頻生成。」之後用新技能重新生成視頻。
背景與動機
作者有個做動畫嘅朋友，成日吐槽調一條30秒片嘅節奏都要搞足3日。作者諗，既然AI咁叻，可唔可以幫手搞掂呢？佢本身對設計一竅不通，但發現咗一個叫Remotion嘅工具，可以用React寫代碼直接輸出視頻。問題係，佢唔識設計，驚做出嚟嘅嘢好醜。
於是佢諗，不如叫AI助手皮皮蝦（OpenClaw）幫佢探路
就咁，佢開始咗兩輪測試，睇下可唔可以靠組合技能製作出靚嘅動畫視頻。
兩輪測試：從醜到靚
- 1 第一輪：安裝Remotion技能後，要求生成一個關於Skills嘅科普介紹視頻。結果係「能用，但醜」，典型一眼AI風格。
- 2 第二輪：裝埋Anthropic官方嘅Frontend Design技能，叫佢融合兩個技能，再生成一次。呢次出嚟嘅效果連做動畫嘅朋友都話：「第二個你邊個設計師做㗎？」——完全唔知係代碼生成。
Frontend Design 核心價值係將設計決策封裝成代碼，唔使你識咩叫「非對稱佈局」
核心啟示：組合技能先係王道
經過呢次測試，作者學到三個重點。第一，Remotion本身只係工具，代碼寫成點，出嚟就係點。如果你唔識設計，出嚟就係程序員風格。
Remotion只係工具，唔保證靚
第二，Frontend Design係審美外掛，幫你處理曬字體、配色、佈局呢啲決策，你唔使知點解好睇。
Frontend Design 將設計決策封裝成code
第三，最緊要嘅係組合技能先係正確用法。單獨用任何一個都唔夠好，溝埋一齊就可以量產高質視頻。
復現建議與適合人羣
如果你想試呢個組合，可以直接複製文中嘅對話話術俾你嘅AI助手，無論係OpenClaw、Hermes定ClaudeCode都得。
複製話術後要逐步調試，AI可能會出錯（例如中文顯示錯誤），叫佢自己改就得
Remotion嘅原理係用寫網頁嘅方式做視頻——你寫代碼描述「咩元素喺咩時候出現、點樣動」，Remotion就錄製成視頻。
- 科普視頻創作者：適合批量生成統一風格片頭片尾
- 教師：適合做數學、物理原理演示動畫
- 動畫設計師：需要識代碼，但可以做出更靈活嘅動畫
- 短劇創作者：唔適合，因為Remotion本質係代碼設計多幀動畫，無法生成人像
組合技能嘅力量在於將「描述需求」直接轉化為「專業輸出」
本文記錄我同AI助手皮皮蝦（OpenClaw）嘅真實對話過程，你可以直接複製我嘅講法，令你嘅OpenClaw、Hermes呢啲AI幫你做動畫視頻。
一、講下背景先
我有個做動畫嘅朋友，前幾日同我吐苦水：做一條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，建議試嚇呢個組合。唔使識設計，都可以做出好睇嘅嘢。
本文記錄了我跟 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，建議試試這個組合。不用懂設計，也能做出好看的東西。