vibe-motion/skills

解決的問題

本專案提供了一系列「技能」（模組化動畫與渲染工具），允許 AI Agent（如 Claude Code）生成高品質、透過程式設計驅動的視覺效果、動態圖形和宣傳影片。透過為 Agent 提供特定的渲染引擎與動畫規則，彌合了基於文本的 AI 提示詞與專業級視覺輸出之間的鴻溝。

工作原理

使用者透過互動式指令碼（npx skills add vibe-motion/skills）安裝技能。隨後，AI Agent 使用這些工具執行特定的渲染任務。該函式庫包含多種專業渲染器：

• 向量與 Logo 動畫： pixel2motion 等工具可將位圖轉換為 SVG 並進行動畫處理，而 svg-assembly-animator 則可建立高能量的組裝效果。
• 影片製作： brand-launch-video-star 可根據網站 URL 或產品圖片建立快節奏的宣傳影片，remotion-vinyl-player 可建立音樂播放器動畫。
• 3D 與物理模擬： 用於渲染 3D 地球飛行路徑（threejs-earth-render）、3D Chladni 粒子系統（3d-chladni-render）以及互動式 p5.js 窗簾模擬（printed-curtain-render）的工具。
• UI/UX 動畫： 用於渲染 WeChat 風格聊天動畫（wechat-2d-render）和金融 K 線圖（remotion-candlestick）的工具。
• 設計原則： disney-animation-rule-skill 為 Agent 提供應用迪士尼動畫 12 原則的框架，以提升程式驅動型動畫的流暢度與質感。

適用對象

使用 AI Agent 自動建立品牌資產、社群媒體內容和 UI 動畫，而無需手動編寫每一幀程式碼的開發者與創作者。

亮點

• Agent 就緒： 專為整合至 AI Agent 工作流（如 Claude Code）而設計。
• 多樣化的視覺風格： 涵蓋從 2D SVG 動畫到複雜的 3D 粒子系統及基於 Remotion 的影片渲染。
• 自動化品牌資產： 能夠直接從 URL 產生專業的產品發佈影片。
• 基於物理的運動： 包含布料/窗簾及類流體粒子運動的模擬。