Claude 動畫：如何使用 Claude 製作動畫並將其發送到您的應用程式
如何使用 Claude 製作動畫：Claude Design、Claude 運動、工件和 Claude Code，每個輸出什麼，以及如何將 Claude 製作的動畫放入真實的應用程式中。
核心要點
您可以透過三種方式使用 Claude 製作動畫：用於視覺輸出的 Claude Design 或 Claude Motion，用於 HTML、CSS 和 JavaScript 演示的 Claude 工件，以及透過 MCP 編寫動畫程式碼或驅動其他工具。每一個都會為您提供一個設計、一個視訊檔案或程式碼，但仍需要將其放入您的產品中。必須在真實應用程式內運行的動畫需要應用程式可以運行的格式，因此大多數 Claude 製作的動作在發布之前都會交給運行時。
關於本指南
ExodeUI 不隸屬於 Anthropic。 Claude 是 Anthropic 的商標。本指南根據 Anthropic 自己的文件描述了 Claude 可以產生哪些運動，以及如何將該運動匯入到已發布的應用程式中。
使用Claude製作動畫的方法
Claude 可以產生幾種不同形狀的運動，而且它們不可互換。你使用哪一個決定了你能得到什麼以及還剩下多少工作。
- Claude Design：與 Claude 聊天以在畫布上取得設計和互動原型。它包含在 Free、Pro、Max、Team 和 Enterprise 計劃中，獨立網站 claude.ai/design 將於 2026 年 12 月 14 日關閉。
- Claude Motion：將提示和檔案轉換為短動畫，建構成像影片一樣播放的程式碼，並匯出為 MP4。它在團隊和企業計劃中處於測試階段，並且不使用視訊模型，因此它無法製作逼真的鏡頭或人物。
- Claude 工件：可運行的 HTML、CSS 和 JavaScript，可在對話中預覽，這對於動作演示來說速度很快。
- Claude Code：在儲存庫中編寫動畫程式碼，或透過 MCP 編輯工具，包括 ExodeUI MCP 伺服器。
產生更好運動的提示技巧
模糊的提示會產生模糊的動作。 Claude 回應運動設計師無論如何都會要求的細節：屬性、數量、時間、觸發器和狀態。說出它們的名字而不是描述一種感覺。
命名緩動和持續時間
說「帶有光彈跳的彈簧」或「緩出超過 200 毫秒」而不是「平滑」。模型可以使用的數值勝過形容詞。
命名觸發器
說出它的啟動方式：「點擊時」、「懸停時」或「清單載入完成時」。具有觸發器的運動可以稍後連接到真實事件。
說出各州的名稱
列出它們，例如“空閒、按下、載入、成功、錯誤”，這樣您就可以獲得一個小型狀態機而不是單一動畫。
命名平台和限制
說明輸出是 React、SwiftUI 還是 Web 演示，以及它不能執行的操作，例如「僅對變換和不透明度進行動畫處理」。
為什麼演示動畫尚未做好製作準備
Claude 可以產生在預覽中看起來正確的動畫程式碼，但在發布之前仍需要進行工作。差距不是質量，而是產出的形狀。
- 它通常是一個螢幕的一次性代碼，而不是可重複使用的元件
- 它通常具有單一狀態，並且沒有載入、錯誤、停用或中斷互動的邏輯
- 它是為一個平台編寫的，因此 React 版本如果不重寫就無法在 iOS 上運行
- 計時和緩動實時在程式碼中，因此設計人員無法在沒有開發人員的情況下更改它們
- 任何要重複使用的內容都需要一種應用程式可以運行的檔案格式，而不是貼上到一個元件中的程式碼片段
使用 ExodeUI 的 MCP 伺服器傳送 Claude 製作的動畫
ExodeUI 是一個用於互動式 UI 和動畫的瀏覽器和桌面工具。動畫位於一個開啟的 .exode 檔案中，其中包含佈局、時間軸、狀態機、彈簧物理和邏輯。運行時套件在 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 中播放該文件，因此相同的動畫在應用程式內部運行，而不是為每個內部運行平台。 ExodeUI 公開了具有 100 多個工具（建置、動畫、新增邏輯和實體、同步到即時編輯器、匯出）的 MCP 伺服器，因此 Claude Code、Cursor、OpenCode 和其他 MCP 用戶端可以根據簡單語言進行提示和編輯檔案。此設定位於產品中，而不是腳本中，因此無需複製命令：在 ExodeUI 設定中開啟 MCP，然後以連接任何 MCP 伺服器的方式連接客戶端。我們生產 ExodeUI，因此也請檢查替代方案。
1.開啟ExodeUI中的MCP
在ExodeUI設定中，啟用MCP伺服器。它發布了人工智慧編碼客戶端用來建立和編輯文件的工具。
2. 連接您的客戶端
將 Claude Code、Cursor、OpenCode 或任何 MCP 用戶端指向 ExodeUI 伺服器，就像將其連接到其他 MCP 伺服器一樣。
3. 描述動作
要求以簡單易懂的語言提供動畫。代理編輯 .exode 文件，變更將顯示在 ExodeUI 編輯器中。
4. 發送相同的文件
透過 React、SwiftUI、Flutter 等中的 ExodeUI 運行時渲染 .exode 文件，並從程式碼驅動其輸入和狀態。
Claude Design 與 Claude Code + ExodeUI
兩條路線都以提示開始，以產品中的動作結束。它們之間發生的情況有所不同：Claude Design 將工作保留在設計畫布中，而 Claude Code 加上 ExodeUI 將其保留在運行的檔案中。
你得到什麼
Claude Design：設計或可點擊原型，以及 Claude Code 的切換套件。 Claude Code + ExodeUI：作為元件播放的 .exode 檔案。
動畫運作的地方
Claude Design：在設計畫布和共享原型中。 Claude Code + ExodeUI：在應用程式、網路、iOS 和 Android 上，對輸入和資料做出反應。
移交後編輯
Claude Design：改變設計，然後再交接。 Claude Code + ExodeUI：設計人員編輯應用程式運行的相同文件，無需重建。
Claude Design 獲勝的地方
探索許多視覺方向，向利害關係人展示，並根據任何計劃（包括免費計劃）製作靜態或原型作品。
ExodeUI 獲勝的地方
必須透過狀態、實體和輸入來傳送運動，從單一檔案跨平台重複使用。
生產實施片段
import { ExodeUICanvas } from 'exodeui';
// Claude Code builds and edits /fluid_card.bexode through the ExodeUI
// MCP server. Your code passes inputs in and hears events back.
export function FluidCard() {
return (
<ExodeUICanvas
src="/fluid_card.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}要記住的關鍵 Principle
- Claude Design 和 Claude Motion 生成視覺作品，Claude Code 產生程式碼，但它們都不是運行時
- 動畫只有在具有應用程式可以運行的格式並連接到真實狀態和輸入後才會發布
- 在提示中命名緩動、觸發器和狀態，以獲得您可以實際使用的動作
- ExodeUI 的 MCP 伺服器允許 Claude Code 建立和編輯一個在 React、SwiftUI、Flutter 等中運行的 .exode 文件