Animasi Claude: Cara Membuat Animasi dengan Claude dan Mengirimkannya ke Aplikasi Anda
Cara membuat animasi dengan Claude: Claude Design, Claude Motion, artefak, dan Claude Code, keluaran masing-masingnya, dan cara memasukkan animasi buatan Claude ke dalam aplikasi nyata.
Pengambilan Inti
Anda dapat membuat animasi dengan Claude dengan tiga cara: Claude Design atau Claude Motion untuk output visual, artefak Claude untuk demo HTML, CSS dan JavaScript, dan Claude Code menulis kode animasi atau menggerakkan alat lain melalui MCP. Masing-masing memberi Anda desain, file video atau kode yang masih harus ditempatkan ke dalam produk Anda. Animasi yang harus dijalankan di dalam aplikasi nyata memerlukan format yang dapat dijalankan oleh aplikasi, sehingga sebagian besar gerakan yang dibuat Claude diserahkan ke runtime sebelum dikirimkan.
Tentang panduan ini
ExodeUI tidak berafiliasi dengan Antropis. Claude adalah merek dagang dari Anthropic. Panduan ini menjelaskan apa yang dapat dihasilkan Claude untuk gerakan, berdasarkan dokumentasi Anthropic sendiri, dan apa yang diperlukan untuk memasukkan gerakan tersebut ke dalam aplikasi yang dikirimkan.
Cara membuat animasi dengan Claude
Claude dapat menghasilkan gerakan dalam beberapa bentuk berbeda, dan tidak dapat dipertukarkan. Yang mana yang Anda gunakan menentukan apa yang Anda dapatkan dan berapa banyak pekerjaan yang tersisa.
- Claude Design: ngobrol dengan Claude untuk mendapatkan desain dan prototipe interaktif di atas kanvas. Ini disertakan dalam paket Gratis, Pro, Max, Tim, dan Perusahaan, dan situs mandiri di claude.ai/design ditutup pada 14 Desember 2026.
- Claude Motion: mengubah perintah dan file Anda menjadi animasi pendek, dibuat sebagai kode yang diputar seperti video dan diekspor sebagai MP4. Ini masih dalam versi beta pada paket Tim dan Perusahaan, dan tidak menggunakan model video, sehingga tidak dapat membuat rekaman atau orang yang realistis.
- Artefak Claude: HTML, CSS, dan JavaScript yang dapat dijalankan yang dipratinjau dalam percakapan, yang cepat untuk demo gerakan.
- Claude Code: menulis kode animasi di repo Anda, atau mengedit alat melalui MCP, termasuk server ExodeUI MCP.
Tips anjuran yang menghasilkan gerak lebih baik
Perintah yang tidak jelas menghasilkan gerakan yang tidak jelas. Claude merespons detail yang diminta oleh perancang gerak: properti, jumlah, waktu, pemicu, dan status. Sebutkan nama mereka alih-alih menggambarkan perasaan.
Sebutkan pelonggaran dan durasinya
Ucapkan "pegas dengan pantulan ringan" atau "peredaan lebih dari 200 md" alih-alih "halus". Nilai yang dapat digunakan model mengalahkan kata sifat.
Beri nama pemicunya
Ucapkan apa yang memulainya: "saat diketuk", "saat diarahkan", atau "saat daftar selesai dimuat". Gerakan yang memiliki pemicu nantinya dapat dihubungkan dengan peristiwa nyata.
Sebutkan negara bagiannya
Cantumkan, misalnya "idle, pressed, loading, sukses, error", sehingga Anda mendapatkan mesin status kecil alih-alih satu animasi.
Sebutkan platform dan batasannya
Katakan apakah keluarannya adalah React, SwiftUI atau demo web, dan apa yang tidak boleh dilakukan, misalnya "hanya menganimasikan transformasi dan opacity".
Mengapa animasi demo belum siap produksi
Claude dapat menghasilkan kode animasi yang terlihat tepat di pratinjau dan masih perlu perbaikan sebelum dikirimkan. Kesenjangannya bukan pada kualitas, namun pada bentuk keluarannya.
- Biasanya ini merupakan kode satu kali untuk satu layar, bukan komponen yang dapat digunakan kembali
- Seringkali memiliki satu keadaan dan tidak ada logika untuk memuat, kesalahan, interaksi yang dinonaktifkan atau terputus
- Ini ditulis untuk satu platform, jadi versi React tidak akan berjalan di iOS tanpa ditulis ulang
- Pengaturan waktu dan pelonggaran ada di dalam kode, sehingga desainer tidak dapat mengubahnya tanpa pengembang
- Apa pun yang dimaksudkan untuk digunakan kembali memerlukan format file yang dapat dijalankan aplikasi, bukan cuplikan yang ditempelkan ke dalam satu komponen
Pengiriman animasi buatan Claude dengan server MCP ExodeUI
ExodeUI adalah browser dan alat desktop untuk UI dan animasi interaktif. Sebuah animasi berada dalam satu file .exode terbuka yang berisi tata letak, garis waktu, mesin status, fisika pegas, dan logika. Paket runtime memutar file tersebut dalam React, Vue, Svelte, Angular, Solid, React Native, SwiftUI dan Flutter, sehingga animasi yang sama berjalan di dalam aplikasi alih-alih dibuat ulang untuk setiap platform. ExodeUI memaparkan server MCP dengan lebih dari 100 alat (membuat, menganimasikan, menambahkan logika dan fisika, menyinkronkan ke editor langsung, mengekspor), sehingga Claude Code, Cursor, OpenCode, dan klien MCP lainnya dapat membuat dan mengedit file dari perintah bahasa biasa. Pengaturannya ada di produk, bukan di skrip, jadi tidak ada perintah untuk menyalin: aktifkan MCP di pengaturan ExodeUI, lalu sambungkan klien Anda seperti Anda menghubungkan server MCP. Kami membuat ExodeUI, jadi periksa juga alternatifnya.
1. Aktifkan MCP di ExodeUI
Dalam pengaturan ExodeUI, aktifkan server MCP. Ini menerbitkan alat yang digunakan klien pengkodean AI untuk membuat dan mengedit file.
2. Hubungkan klien Anda
Arahkan Claude Code, Cursor, OpenCode, atau klien MCP apa pun ke server ExodeUI, sama seperti Anda menghubungkannya ke server MCP lainnya.
3. Jelaskan geraknya
Mintalah animasi dalam bahasa yang sederhana. Agen mengedit file .exode, dan perubahan muncul di editor ExodeUI.
4. Kirimkan file yang sama
Render file .exode melalui runtime ExodeUI di React, SwiftUI, Flutter, dan lainnya, serta arahkan input dan statusnya dari kode Anda.
Claude Design vs Claude Code + ExodeUI
Kedua rute dimulai dengan perintah dan diakhiri dengan gerakan pada produk Anda. Keduanya berbeda dalam apa yang terjadi di antaranya: Claude Design menyimpan karya dalam kanvas desain, sementara Claude Code plus ExodeUI menyimpannya dalam file yang dijalankan.
Apa yang Anda dapatkan
Claude Design: desain atau prototipe yang dapat diklik, ditambah paket handoff untuk Claude Code. Claude Code + ExodeUI: file .exode yang diputar sebagai komponen.
Dimana animasi berjalan
Claude Design: di kanvas desain dan prototipe bersama. Claude Code + ExodeUI: di aplikasi, di web, iOS dan Android, bereaksi terhadap input dan data.
Mengedit setelah serah terima
Claude Design: ubah desain, lalu serahkan lagi. Claude Code + ExodeUI: seorang desainer mengedit file yang sama dengan yang dijalankan aplikasi, tanpa membangun kembali.
Dimana Claude Design menang
Menjelajahi banyak arah visual, melakukan presentasi kepada pemangku kepentingan, dan menghasilkan karya statis atau prototipe pada rencana apa pun, termasuk rencana Gratis.
Dimana ExodeUI menang
Gerakan yang harus dikirimkan, dengan status, fisika, dan masukan, digunakan kembali di seluruh platform dari satu file.
Cuplikan Implementasi Produksi
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)}
/>
);
}Kunci Principles untuk Diingat
- Claude Design dan Claude Motion menghasilkan karya visual, dan Claude Code menghasilkan kode, tetapi tidak satupun yang merupakan runtime
- Animasi hanya dikirimkan setelah memiliki format yang dapat dijalankan aplikasi dan dihubungkan ke status dan masukan nyata
- Sebutkan pelonggaran, pemicu, dan status dalam perintah Anda untuk mendapatkan tindakan yang benar-benar dapat Anda gunakan
- Server MCP ExodeUI memungkinkan Claude Code membuat dan mengedit satu file .exode yang berjalan di React, SwiftUI, Flutter dan banyak lagi