✦ 工作室精選
Halden Solace · 16:9
由此 Skill 渲染
一個開源 Skill，讓 AI 助手變成動效設計師。它從你的品牌推導風格，提出三個構想並推薦一個，然後搭出一個 index.html：鏡頭在動，主體始終在場，色塊換色都有看得見的觸發。10 種風格、19 種開場結構、6 種講解影片風格，還能逐格匯出 MP4。
更新於 2026年11月2日
你將得到
- 一個播放起來像影片的 index.html：自動播放、循環，加 ?debug=1 有進度列
- 一份風格簡報：三個構想、一個推薦、註明來源的配色
- 依 Skill 防投影片規則做的關鍵格檢查
- 可選的逐格 MP4 匯出，60fps
適合
- 新品發表和網店宣傳
- App 開場、SaaS 導覽和品牌片頭
- 用照片、去背圖或卡通做的講解影片
不適合
- 剪輯你已經拍好的實拍素材
- 真人出鏡的影片
關於此 Skill
你只需說
/bang-motion 用 flat pop with photos 風格幫我們的跑鞋做一支 30 秒宣傳片，16:9。用我們的產品照片，再生成一位穿著這雙鞋的虛構跑者。最後落在 logo 和「Shop the drop」上。
讓 AI 助手做宣傳片、開場片、產品導覽或講解影片。Bang Motion 讓它像真正的動效設計師一樣工作：風格來自你的品牌，結構從一份構想選單裡挑，成片動起來像電影。人物和產品從畫面邊緣彈進來，標籤貼在它們身上，巨大的單字壓在它們身後，色塊被觸發才換色，鏡頭推進到下一個場景，而不是淡入淡出。
運作方式
- 簡報：告訴助手產品、受眾、長度和畫面比例，交給它你的 logo、網站、截圖或照片。
- 風格簡報：它給出三個構想、一個推薦、結構大綱，以及每種顏色都註明來源的配色。你在寫任何程式碼之前確認或修改。
- 素材：優先用你自己的照片和 logo；沒有的話，可以用圖像工具生成虛構的人物和產品，或者選一個不需要照片的構想。
- 搭建：它用 HTML、CSS 和 GSAP 寫出一個 index.html，按自己的規則檢查關鍵格（不能有淡入淡出的投影片、主體始終在場、文字最多兩層、手機上看得清），不合格就修。
- 交付：雙擊檔案就能播放，加上 ?debug=1 可以拖曳進度，也可以用附帶的腳本逐格匯出 MP4（需要 Node.js、Puppeteer 和 FFmpeg）。
小提醒
- 說風格，別列場景：「flat pop with photos」「grainy gradient」「poster color-block」或「product tour with claims」。
- 交出真實的品牌素材，配色和形狀都從這裡推導。
- 文字要短：開場片只傳達一種感覺，講解影片只講一個論點。
- 每支新影片開一個新對話，免得之前的決定帶進來。
開源
Bang Motion 由 Bang Tutorial 製作（bangtutorial/bang-motion），以 MIT 授權開源。下載的是 GitHub 上發布的 Skill。它的說明檔是印尼語寫的，README 是英文；AI 助手兩種都能讀，並用你的語言工作。
開始前需要準備
- 你需提供
- 你的產品、logo 和品牌素材，長度和畫面比例，有照片就帶上；沒有也可以生成虛構的人物和產品。
- 依賴
- Google Chrome（或 CHROME_PATH）——必要 · 圖像模型金鑰——選用
- 外部費用
- 搭建和觀看都不花錢。用圖像模型生成照片是選用的，由該服務商收費。
- 最近測試
- v1.19.0 —
使用者評價
還沒有評價。安裝這個 Skill，成為第一個評分的人。
常見問題
為什麼看起來不像投影片？
這個 Skill 會檢查自己的程式碼裡有沒有投影片習慣：不能有淡入淡出的段落，主體或場景要一直在，文字最多兩層，背景始終在動，換色一定有看得見的觸發。
能做哪些風格？
10 種視覺風格，從電影感暗色、海報色塊到 flat pop with photos 和顆粒漸層，搭配 19 種開場結構和 6 種講解風格。你可以點名一種，也可以讓它推薦。
能拿到 MP4 嗎？
你會拿到一個在任何瀏覽器都能播放的 HTML 檔。附帶的匯出腳本會逐格算繪成 MP4，不掉格；需要 Node.js、Puppeteer 和 FFmpeg。
為什麼免費？
Bang Motion 是 Bang Tutorial 的開源 Skill。我們原樣上架，樣片是在我們自家的跑鞋 Halden Solace 上執行它做出來的。
