用AI編程 + Remotion Skill，實現直播間刷禮物特效？
整理版優先睇
用AI編程加Remotion Skill，兩個鐘搞掂直播間刷禮物特效
呢篇文章係AI編程驍哥嘅實戰分享，佢用兩個鐘時間，結合Remotion Skill同Agent Browser Skill，由零開始整出一個直播間刷禮物嘅動畫特效。作者想帶出嘅重點係：以前要設計加研發搞半條命嘅嘢，而家普通人用AI編程工具加適當嘅Skill，幾個鐘就搞得掂。
驍哥首先介紹點樣安裝Remotion Skill，然後教大家準備素材——用AI生圖工具整一張純色底圖片，再用AI影片生成工具令佢鬱起嚟，特別提醒要留意底色避免後期誤傷。之後就用Remotion Skill將藍幕影片變成透明底WebM，再用Agent Browser Skill自動預覽效果，最後用three.js加雪花特效提升氣氛。
成個流程示範咗AI編程喺影片特效領域嘅可能性，作者強調呢個技巧唔單止適用於禮物特效，仲可以用喺網頁開場動畫等場景。佢嘅結論係：AI時代一定要跟上，持續學習。
- 用Remotion Skill可以快速處理影片藍幕，做到透明背景效果
- 素材準備要留意底色選擇，避免同主體顏色撞色導致後期誤傷
- 用AI生成純色底圖片再轉影片，比直接生成純色底影片更可靠
- Agent Browser Skill可以自動預覽效果，協助AI自我驗收改良
- 用three.js加雪花特效，可以令成品氛圍感提升，而且仲可以做到分層視覺效果
Remotion Skill
安裝指令：npx skills add remotion-dev/skills；GitHub：
安裝Remotion Skill，鋪路AI編程
驍哥首先同大家重温點樣安裝Remotion Skill，只需要一行指令就得
npx skills add remotion-dev/skills如果唔想用指令，直接將文件夾複製過去都得。裝完之後記住喺AI編程工具確認嚇係咪成功，咁就可以用呢個Skill嚟處理綠幕影片合成。
呢個係前幾期已經講過嘅基礎，新手可以參考之前嘅文章
素材準備：底色揀錯會出事
要整禮物特效，首先要準備素材。驍哥用AI生圖工具（豆包、即夢等）整咗一張藍色底嘅小貓圖片，點解揀藍底？因為小貓身上已經有紅色同綠色，如果再用綠底，後期就好易誤傷小貓。
用純色底圖片生成影片，而唔係直接叫AI生成純色底影片
因為AI成日會幫背景加特效，搞到底色唔純，後期好難處理。所以一定要先用圖片生影片，確保底色乾淨。
用Remotion Skill處理藍幕，整出透明影片
將準備好嘅藍幕影片同截圖一齊畀AI Agent，叫佢用Remotion Skill將藍色變成透明底。技術選型上用WebM（VP9 + alpha），呢個格式支援透明通道。
初版影片出嚟效果唔錯，藍幕處理得好乾淨
然後叫Agent造一個簡單網頁嚟展示透明影片，即時睇到效果。
加three.js雪花特效，氣氛拉滿
基本效果出咗之後，驍哥覺得仲可以更靚，就叫AI用three.js加雪花特效。
- 1 要求雪花同小貓一齊出現同消失
- 2 部分雪花要喺小貓前面，營造小貓喺雪花中飛舞嘅視覺效果
最終成品效果好吸引，完全似直播間禮物動畫
呢個步驟充分發揮咗AI嘅創意同執行力，只需要用自然語言描述想要嘅效果，AI就自動生成代碼。
小結：AI時代，兩個鐘搞掂以前半條命嘅嘢
呢個技巧唔限於禮物特效，仲可以用喺網頁開場動畫等場景
如果你對AI編程有興趣，可以留意驍哥之前嘅文章，包括視頻摳綠幕、Agent Browser攻略等。
呢兩日玩remotion玩到有啲上癮，我哋先睇下效果💁♀️
呢個係驍哥，純用AI編程，做出嚟嘅效果🧑🎨
勁唔勁～手把手教你！🤓
前情提要：Remotion Skill 安裝同基礎技巧
為咗照顧新觀眾，驍哥都係先講下呢個環節🧑🏫
https://github.com/remotion-dev/skills/blob/main/skills/remotion/SKILL.md
👆安裝一下呢個skill，只需要一行指令就裝到👇
npx skills add remotion-dev/skills(如果唔用指令，直接抄個文件夾都得)
安裝完之後，喺對應嘅AI編程工具裏面確認下，睇下係咪裝成功👇
我哋可以用Remotion Skill，嚟完成綠幕影片合成
以上就係我哋前兩期Remotion Skill嘅內容
一句說話令AI編程，完成影片摳綠幕 —— Remotion Skill嘅使用技巧
AI編程可以直接生成影片喇？Remotion Skill 初體驗
跟住，我哋入正片！用Remotion Skill，嚟完成文章開頭呢個好靚嘅禮物特效😼
實戰環節：手把手教你完成刷禮物特效
首先，我哋需要由素材開始準備
是但用邊個生圖工具（豆包、即夢、banana、lovart...都得），生成一張：（藍或綠或紅）純色底嘅圖片❗️
好似驍哥呢個圖，就一定要揀藍色🔵底，點解🧏♀️
因為驍哥呢隻小貓身上，已經有紅色🔴同綠色🟢，如果驍哥仲揀綠色🟢做底色，咁後期小貓就會被誤傷🐱
然後，我哋再用AI影片生成工具（即夢、可靈...都得），令呢張圖片，鬱返🧙
效果如下💁
🧏呢度有個小經驗：
最好係用純色底圖片，嚟生成影片。而唔係叫AI直接生成純色底影片❌
因為AI成日會幫背景加啲特效，搞到背景底色唔純，後期難處理
然後就可以有請我哋嘅主角，AI編程工具出場🙆
今日嘅案例，除咗我哋文章入面嘅remotion skill，仲要用agent-browser呢個skill
agent-browser skill可以賦予Agent感知瀏覽器嘅能力，從而令AI做到效果自我驗收同自動改良🥸（有關agent browser skill可以參考之前文章👉瀏覽器自動化Skill：Agent Browser究極攻略（含登錄態解決方案））
我哋直接將小貓嘅「藍幕」影片，掟畀Agent，最好再是但配一幀影片截圖，等AI對「藍幕」嘅參數有個基本認識
「將呢條影片嘅藍幕變成透明底，令到呢條影片可以透明播放，技術選型上，揀用WebM（VP9 + alpha）」
（WebM同HEVC係瀏覽器影片領域嘅相關技術，有興趣嘅朋友可以自己瞭解）
好！喺remotion skill嘅幫助下，我哋好快就得到初版影片！😀
不過呢個格式嘅影片，本地冇得直接打開，我哋可以透過以下方式嚟預覽👇
「是但整一個網頁，試下呢個透明影片效果」
Agent好快就完成咗一個網頁，我哋可以直接喺瀏覽器預覽效果
嗯，效果都唔錯！可以見到藍幕處理得比較乾淨😃
我哋繼續向Agent提出要求
「而家基於呢套方案，做一個直播間刷禮物嘅小demo」
效果如下，可以話，基本已經成型喇！
但驍哥覺得，效果仲可以更進一步😼
「用three.js，做啲雪花特效，增加氛圍感」
「下雪特效要同小貓一齊出現同消失，然後要有啲雪花喺小貓圖層前面，視覺效果好似小貓喺雪花中飛舞」
（three.js係一個專做3D動畫粒子特效嘅library，有興趣嘅同學可以自己瞭解）
做完喇！🥳
最終成品效果🤩
小結
之前想實現呢個效果，可能要可憐嘅設計同學 + 研發同學，要消耗半條命☠️
但驍哥今日就淨係用咗兩個鐘😂
呢啲就係AI啊...呢啲就係AI時代
一定要跟上時代，持續學習！📚
哦係喺，今日呢個技巧，唔限於刷禮物，對好多場景都適用，例如靚嘅網頁開屏動畫之類🌈
咁今期係咁，我係AI編程驍哥，跟住我，一齊喺AI時代共同進步！😼
往期Skill實踐👇
一句說話令AI編程，完成影片摳綠幕 —— Remotion Skill嘅使用技巧
瀏覽器自動化Skill：Agent Browser究極攻略（含登錄態解決方案）
AI編程可以直接生成影片喇？Remotion Skill 初體驗
呢個SKILL，自動操作我嘅瀏覽器，扒咗我嘅網購記錄出嚟0.0！？
點樣喺Cursor、TRAE入面，用Skills 3分鐘製作精美PPT
這兩天玩remotion有點上癮，我們先來看效果💁♀️
這是驍哥，純用AI編程，實現出來的效果🧑🎨
厲害吧～手把手教會你！🤓
前情提要：Remotion Skill 安裝與基礎技巧
為了照顧新人觀眾，驍哥還是前置講下這個環節🧑🏫
https://github.com/remotion-dev/skills/blob/main/skills/remotion/SKILL.md
👆安裝一下這個skill，只需一行指令，即可安裝👇
npx skills add remotion-dev/skills(如果不用指令，直接拷貝下文件夾也行)
安裝完後，在對應的AI編程工具裏確認下，看是否安裝成功👇
我們可以使用Remotion Skill，來完成綠幕視頻合成
以上就是我們前兩期Remotion Skill的內容
一句話讓AI編程，完成視頻摳綠幕 —— Remotion Skill的使用技巧
AI編程可以直接生成視頻了？Remotion Skill 初體驗
接下來，我們進入正片！用Remotion Skill，來完成文章開頭這個炫酷的，禮物特效😼
實戰環節：手把手教你完成刷禮物特效
首先，我們需要從素材開始準備
先隨便用哪個生圖工具（豆包、即夢、banana、lovart...都行），生成一張：（藍or綠or紅）純色底的圖片❗️
比如驍哥這個圖，就必須選擇藍色🔵底，為啥🧏♀️
因為驍哥這個小貓身上，已經有紅色🔴和綠色🟢了，假如驍哥還選綠色🟢作為底色，那麼後期小貓就會被誤傷🐱
然後，我們再用AI視頻生成工具（即夢、可靈...都行），讓這個圖片，動起來🧙
效果如下💁
🧏這裏有一個小經驗：
最好是用純色底圖片，來生成視頻。而不是讓AI 直接生成純色底視頻❌
因為AI往往給背景加一些特效，導致背景底色不純，後期不好處理
然後就可以有請我們的主角，AI編程工具登場了🙆
今天的案例，除了我們文章中的remotion skill，還要使用agent-browser 這個skill
agent-broswer skill可以賦予Agent感知瀏覽器的能力，從而讓AI實現效果自我驗收和自動改良🥸（有關agent browser skill可以參考之前文章👉瀏覽器自動化Skill：Agent Browser究極攻略（含登錄態解決方案））
我們直接把小貓的“藍幕”視頻，扔給Agent，最好再隨便配一幀視頻截圖，讓AI對“藍幕”的參數有一個基礎認知
“把這個視頻藍幕變成透明底，使得這個視頻可以透明播放，技術選型上，選用WebM（VP9 + alpha）”
（WebM和HEVC是瀏覽器視頻領域的相關技術，感興趣的朋友可以自行了解）
好！在remotion skill的幫助下，我們很快就得到了初版視頻！😀
不過這個格式的視頻，本地無法直接打開，我們可以通過以下方式來進行預覽👇
“隨便做一個網頁，試一下這個透明視頻效果”
Agent很快就完成了一個網頁，我們可以直接在瀏覽器中預覽效果
嗯，效果還不錯！可以看到藍幕處理的比較乾淨了😃
我們繼續對Agent提出要求
“現在基於這套方案，做一個直播間刷禮物的小demo”
效果如下，可以說，基本已經成型了！
但驍哥覺得，效果還可以更近一步😼
“用three.js，做一些雪花特效，增加氛圍感”
“下雪特效要和小貓一起出現和消失，然後要有一些雪花在小貓圖層的前面，視覺效果就像小貓在雪花中飛舞”
（three.js是一個專門做3D動畫粒子特效的庫，感興趣同學可以自行了解）
做完啦！🥳
最終成品效果🤩
小結
之前想要實現這個效果，可能需要可憐的設計同學 + 研發同學，要消耗掉半條命☠️
但驍哥今天就用了兩個小時😂
這就是AI啊...這就是AI時代
一定要跟上時代，持續學習！📚
哦對了，今天這個技巧，不限於刷禮物，對很多場景都適用，比如炫酷的網頁開屏動畫啥的🌈
那本期就這樣，我是AI編程驍哥，跟上我，一起在AI時代共同進步！😼
往期Skill實踐👇
一句話讓AI編程，完成視頻摳綠幕 —— Remotion Skill的使用技巧
瀏覽器自動化Skill：Agent Browser究極攻略（含登錄態解決方案）
AI編程可以直接生成視頻了？Remotion Skill 初體驗
這個SKILL，自動操作我的瀏覽器，扒出了我的網購記錄0.0！？
如何在Cursor、TRAE中，用Skills 3分鐘製作精美PPT