bangtutorial/bang-motion

解決什麼問題

Bang Motion 防止 AI 編碼代理在被要求製作影片時創建「幻燈片式」動畫（簡單的淡入淡出和靜態部分）。它提供了一套專業動態設計規則、架構起始模板和風格指南的框架，使代理能夠構建連續的電影級動態圖形——例如產品宣傳片、SaaS 演示和解釋影片——並以單一 index.html 檔案交付。

運作原理

它作為一個「Agent Skill」（一組指令和參考）運行，可以作為 Claude Code 的插件安裝，或手動添加到其他 AI 代理（如 Cursor、Gemini CLI 等）。該系統引導代理遵循特定的工作流程：

1. 風格簡報：代理在編寫程式碼之前，提出基於品牌的調色板和結構。
2. 架構起始模板：代理使用預定義的 HTML/CSS/JS 模板（使用 GSAP 和 Three.js）以確保專業的基礎。
3. 基於規則的驗證：代理根據「反幻燈片」規則（例如，確保持續的主題、避免簡單的淡入淡出、保持移動相機）檢查其程式碼。
4. 交付：輸出是一個自動播放的 HTML 檔案，可以透過提供的 Node.js 腳本匯出為 MP4。

適用對象

• 使用 AI 編碼代理創建高品質行銷資產的開發人員和設計師。
• 需要為產品發布、應用推廣或教育解釋影片快速製作原型的團隊。
• 希望自動化動態設計的 Claude Code、Cursor 或 Gemini CLI 使用者。

亮點

• 多樣化的輸出類型：支持開場白、SaaS 產品導覽、動態排版和複雜的解釋影片。
• 品牌驅動的美學：風格源自使用者的品牌資產，而非通用模板。
• 專業的動態邏輯：實現了諸如「呼吸漂移」、有動機的鏡頭推進和幀精確的影片圖層等概念。
• 靈活的匯出：交付物主要是用於即時查看的 HTML，但可以渲染為 MP4。
• 外部整合：可以透過 Higgsfield MCP 橋接直接在 Adobe After Effects 中構建特定風格。