Hoạt ảnh Claude: Cách tạo hoạt ảnh bằng Claude và gửi chúng đến ứng dụng của bạn
Cách tạo hoạt ảnh với Claude: Claude Design, Claude Chuyển động, tạo phẩm và Claude Code, nội dung mỗi loại tạo ra và cách đưa hoạt ảnh do Claude tạo vào ứng dụng thực.
Điểm chính
Bạn có thể tạo hoạt ảnh bằng Claude theo ba cách: Claude Design hoặc Claude Chuyển động cho đầu ra hình ảnh, tạo phẩm Claude cho các bản trình diễn HTML, CSS và JavaScript và Claude Code viết mã hoạt ảnh hoặc điều khiển các công cụ khác qua MCP. Mỗi người cung cấp cho bạn một thiết kế, một tệp video hoặc mã vẫn phải được đưa vào sản phẩm của bạn. Hoạt ảnh phải chạy bên trong ứng dụng thực cần có định dạng mà ứng dụng có thể chạy, vì vậy hầu hết chuyển động do Claude tạo ra đều được chuyển sang thời gian chạy trước khi xuất xưởng.
Giới thiệu về hướng dẫn này
ExodeUI không liên kết với Anthropic. Claude là thương hiệu của Anthropic. Hướng dẫn này mô tả những gì Claude có thể tạo ra cho chuyển động, dựa trên tài liệu riêng của Anthropic và những gì cần để đưa chuyển động đó vào ứng dụng được vận chuyển.
Các cách làm ảnh động với Claude
Claude có thể tạo ra chuyển động ở một số hình dạng khác nhau và chúng không thể thay thế cho nhau. Cái nào bạn sử dụng sẽ quyết định những gì bạn nhận được và số lượng công việc còn lại.
- Claude Design: trò chuyện với Claude để nhận các thiết kế và nguyên mẫu tương tác trên canvas. Nó được bao gồm trong các gói Free, Pro, Max, Team và Enterprise, đồng thời trang web độc lập tại claude.ai/design sẽ đóng cửa vào ngày 14 tháng 12 năm 2026.
- Chuyển động Claude: biến lời nhắc và tệp của bạn thành một hoạt ảnh ngắn, được xây dựng dưới dạng mã phát như video và xuất dưới dạng MP4. Nó đang ở giai đoạn thử nghiệm trên các gói Nhóm và Doanh nghiệp, đồng thời không sử dụng mô hình video nên không thể tạo ra cảnh quay hoặc con người thực tế.
- Các tạo phẩm Claude: HTML, CSS và JavaScript có thể chạy được, xem trước bên trong một cuộc trò chuyện, nhanh chóng cho bản demo chuyển động.
- Claude Code: ghi mã hoạt ảnh trong kho lưu trữ của bạn hoặc chỉnh sửa các công cụ trên MCP, bao gồm máy chủ ExodeUI MCP.
Mẹo nhắc nhở tạo ra chuyển động tốt hơn
Lời nhắc mơ hồ nhận được chuyển động mơ hồ. Claude đáp ứng các chi tiết mà nhà thiết kế chuyển động sẽ yêu cầu: thuộc tính, số lượng, thời gian, trình kích hoạt và trạng thái. Đặt tên cho chúng thay vì mô tả một cảm giác.
Đặt tên cho việc nới lỏng và thời lượng
Nói "lò xo với độ nảy nhẹ" hoặc "thoát ra trên 200 mili giây" thay vì "mượt mà". Giá trị mà mô hình có thể sử dụng sẽ đánh bại một tính từ.
Đặt tên cho trình kích hoạt
Nói điều gì sẽ bắt đầu: "khi nhấn", "khi di chuột" hoặc "khi danh sách tải xong". Chuyển động có trình kích hoạt có thể được kết nối với một sự kiện thực tế sau này.
Kể tên các bang
Liệt kê chúng, ví dụ: "không hoạt động, nhấn, tải, thành công, lỗi", để bạn có được một máy trạng thái nhỏ thay vì một hoạt ảnh duy nhất.
Đặt tên cho nền tảng và các giới hạn
Cho biết đầu ra là React, SwiftUI hay bản demo trên web và những gì nó không được làm, ví dụ: "chỉ chuyển đổi hoạt ảnh và độ mờ".
Tại sao hoạt ảnh demo chưa sẵn sàng để sản xuất
Claude có thể tạo mã hoạt ảnh trông giống như trong bản xem trước và vẫn cần xử lý trước khi xuất xưởng. Khoảng cách không phải là chất lượng, mà là hình dạng của đầu ra.
- Nó thường là mã một lần cho một màn hình, không phải là thành phần có thể tái sử dụng
- Nó thường có một trạng thái duy nhất và không có logic để tải, báo lỗi, tắt hoặc gián đoạn tương tác
- Nó được viết cho một nền tảng, vì vậy phiên bản React sẽ không chạy trên iOS nếu không được viết lại
- Việc tính thời gian và nới lỏng trực tiếp bên trong mã, vì vậy nhà thiết kế không thể thay đổi chúng nếu không có nhà phát triển
- Bất cứ thứ gì có thể tái sử dụng đều cần có định dạng tệp mà ứng dụng có thể chạy chứ không phải một đoạn mã được dán vào một thành phần
Vận chuyển các hoạt ảnh do Claude tạo bằng máy chủ MCP của ExodeUI
ExodeUI là một công cụ trình duyệt và máy tính để bàn dành cho hoạt ảnh và giao diện người dùng tương tác. Hoạt ảnh tồn tại trong một tệp .exode mở chứa bố cục, dòng thời gian, máy trạng thái, vật lý lò xo và logic. Các gói thời gian chạy phát tệp đó ở dạng React, Vue, Svelte, Angular, Solid, React Native, SwiftUI và Flutter, do đó hoạt ảnh tương tự sẽ chạy bên trong ứng dụng thay vì được xây dựng lại cho từng nền tảng. ExodeUI hiển thị máy chủ MCP với hơn 100 công cụ (xây dựng, tạo hoạt ảnh, thêm logic và vật lý, đồng bộ hóa với trình chỉnh sửa trực tiếp, xuất), vì vậy Claude Code, Cursor, OpenCode và các máy khách MCP khác có thể tạo và chỉnh sửa tệp từ các lời nhắc bằng ngôn ngữ đơn giản. Quá trình thiết lập tồn tại trong sản phẩm chứ không phải trong tập lệnh nên không có lệnh để sao chép: bật MCP trong cài đặt ExodeUI, sau đó kết nối máy khách của bạn theo cách bạn kết nối bất kỳ máy chủ MCP nào. Chúng tôi tạo ra ExodeUI, vì vậy hãy kiểm tra các lựa chọn thay thế.
1. Bật MCP trong ExodeUI
Trong cài đặt ExodeUI, bật máy chủ MCP. Nó xuất bản các công cụ mà ứng dụng khách mã hóa AI sử dụng để xây dựng và chỉnh sửa tệp.
2. Kết nối khách hàng của bạn
Trỏ Claude Code, Cursor, OpenCode hoặc bất kỳ máy khách MCP nào vào máy chủ ExodeUI, giống như cách bạn kết nối nó với các máy chủ MCP khác.
3. Mô tả chuyển động
Yêu cầu hoạt ảnh bằng ngôn ngữ đơn giản. Tác nhân chỉnh sửa tệp .exode và thay đổi hiển thị trong trình chỉnh sửa ExodeUI.
4. Gửi cùng một tệp
Kết xuất tệp .exode thông qua thời gian chạy ExodeUI trong React, SwiftUI, Flutter, v.v., đồng thời điều khiển đầu vào và trạng thái của nó từ mã của bạn.
Claude Design so với Claude Code + ExodeUI
Cả hai lộ trình đều bắt đầu bằng lời nhắc và kết thúc bằng chuyển động trong sản phẩm của bạn. Chúng khác nhau ở những gì diễn ra ở giữa: Claude Design giữ tác phẩm trong một khung thiết kế, trong khi Claude Code cộng với ExodeUI giữ nó trong một tệp chạy.
Những gì bạn nhận được
Claude Design: một thiết kế hoặc nguyên mẫu có thể nhấp chuột, cùng với gói chuyển giao cho Claude Code. Claude Code + ExodeUI: tệp .exode đóng vai trò thành phần.
Hoạt hình chạy ở đâu
Claude Design: trong khung thiết kế và trong các nguyên mẫu được chia sẻ. Claude Code + ExodeUI: trong ứng dụng, trên web, iOS và Android, phản ứng với đầu vào và dữ liệu.
Chỉnh sửa sau khi bàn giao
Claude Design: thay đổi thiết kế rồi bàn giao lại. Claude Code + ExodeUI: một nhà thiết kế chỉnh sửa cùng một tệp mà ứng dụng chạy mà không cần xây dựng lại.
Nơi Claude Design chiến thắng
Khám phá nhiều hướng trực quan, trình bày cho các bên liên quan và tạo ra tác phẩm tĩnh hoặc nguyên mẫu trên bất kỳ gói nào, bao gồm cả gói Miễn phí.
Nơi ExodeUI chiến thắng
Chuyển động phải được truyền đi, với các trạng thái, vật lý và đầu vào, được sử dụng lại trên các nền tảng từ một tệp duy nhất.
Đoạn mã triển khai thực tế
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)}
/>
);
}Nguyên tắc chính cần nhớ
- Claude Design và Claude Motion tạo ra tác phẩm trực quan và Claude Code tạo ra mã, nhưng không có mã nào trong số đó là thời gian chạy
- Một hoạt ảnh chỉ xuất hiện khi nó có định dạng mà ứng dụng có thể chạy và được kết nối với trạng thái thực và đầu vào
- Đặt tên cho việc nới lỏng, kích hoạt và các trạng thái trong lời nhắc của bạn để nhận được chuyển động mà bạn thực sự có thể sử dụng
- Máy chủ MCP của ExodeUI cho phép Claude Code tạo và chỉnh sửa một tệp .exode chạy trong React, SwiftUI, Flutter, v.v.