Claude-Animation: So erstellen Sie Animationen mit Claude und senden sie an Ihre App
So erstellen Sie Animationen mit Claude: Claude Design, Claude Motion, Artefakte und Claude Code, was jeder ausgibt und wie Sie eine von Claude erstellte Animation in eine echte App umwandeln.
Kernaussage
Sie können mit Claude auf drei Arten Animationen erstellen: Claude Design oder Claude Motion für die visuelle Ausgabe, Claude Artefakte für HTML-, CSS- und JavaScript-Demos und Claude Code, das Animationscode schreibt oder andere Tools über MCP steuert. Bei jedem erhalten Sie ein Design, eine Videodatei oder einen Code, der noch in Ihr Produkt eingefügt werden muss. Eine Animation, die in einer echten App ausgeführt werden muss, benötigt ein Format, das die App ausführen kann. Daher werden die meisten von Claude erstellten Bewegungen vor der Auslieferung an eine Laufzeit übergeben.
Über diesen Leitfaden
ExodeUI ist nicht mit Anthropic verbunden. Claude ist eine Marke von Anthropic. Dieser Leitfaden beschreibt, was Claude auf der Grundlage der eigenen Dokumentation von Anthropic für Bewegung produzieren kann, und was erforderlich ist, um diese Bewegung in eine ausgelieferte App zu integrieren.
Möglichkeiten, Animationen mit Claude zu erstellen
Claude kann Bewegungen in verschiedenen Formen erzeugen und ist nicht austauschbar. Welches Sie verwenden, entscheidet darüber, was Sie bekommen und wie viel Arbeit übrig bleibt.
- Claude Design: Chatten Sie mit Claude, um Designs und interaktive Prototypen auf eine Leinwand zu bringen. Es ist in den Tarifen Free, Pro, Max, Team und Enterprise enthalten und die eigenständige Website unter claude.ai/design wird am 14. Dezember 2026 geschlossen.
- Claude Motion: Wandelt Ihre Eingabeaufforderung und Dateien in eine kurze Animation um, die als Code erstellt wird, der wie ein Video abgespielt und als MP4 exportiert wird. Es befindet sich in der Beta-Phase der Team- und Enterprise-Pläne und verwendet kein Videomodell, sodass keine realistischen Aufnahmen oder Personen erstellt werden können.
- Claude-Artefakte: ausführbare HTML, CSS und JavaScript, die eine Vorschau innerhalb einer Konversation anzeigen, was für eine Bewegungsdemo schnell ist.
- Claude Code: schreibt Animationscode in Ihr Repo oder bearbeitet Tools über MCP, einschließlich des ExodeUI MCP-Servers.
Anregende Tipps, die zu besseren Bewegungen führen
Vage Aufforderungen führen zu vagen Bewegungen. Claude antwortet auf die Details, nach denen ein Motion-Designer ohnehin fragen würde: die Eigenschaft, die Menge, das Timing, den Auslöser und die Zustände. Benennen Sie sie, anstatt ein Gefühl zu beschreiben.
Nennen Sie die Lockerung und die Dauer
Sagen Sie „Spring mit leichtem Sprung“ oder „Nachlassen über 200 ms“ statt „sanft“. Ein Wert, den das Modell verwenden kann, übertrifft ein Adjektiv.
Benennen Sie den Auslöser
Sagen Sie, was es startet: „beim Tippen“, „beim Hovern“ oder „wenn die Liste vollständig geladen ist“. Eine Bewegung, die einen Auslöser hat, kann später mit einem realen Ereignis verknüpft werden.
Nennen Sie die Staaten
Listen Sie sie auf, zum Beispiel „Leerlauf, gedrückt, wird geladen, Erfolg, Fehler“, sodass Sie eine kleine Zustandsmaschine anstelle einer einzelnen Animation erhalten.
Nennen Sie die Plattform und die Grenzen
Sagen Sie, ob die Ausgabe React, SwiftUI oder eine Webdemo ist und was sie nicht tun darf, zum Beispiel „nur Transformation und Deckkraft animieren“.
Warum eine Demo-Animation noch nicht produktionsreif ist
Claude kann Animationscode erstellen, der in der Vorschau richtig aussieht und vor der Auslieferung noch bearbeitet werden muss. Die Lücke hat nichts mit der Qualität zu tun, sondern mit der Form der Ausgabe.
- Es handelt sich in der Regel um einmaligen Code für einen Bildschirm und nicht um eine wiederverwendbare Komponente
- Es hat oft einen einzelnen Status und keine Logik für Lade-, Fehler-, deaktivierte oder unterbrochene Interaktionen
- Es ist für eine Plattform geschrieben, daher läuft eine React-Version nicht auf iOS, ohne neu geschrieben zu werden
- Timing und Erleichterung sind im Code verankert, sodass ein Designer sie nicht ohne einen Entwickler ändern kann
- Alles, was wiederverwendet werden soll, benötigt ein Dateiformat, das die App ausführen kann, und kein Snippet, das in eine Komponente eingefügt wird
Versand der von Claude erstellten Animationen mit dem MCP-Server von ExodeUI
ExodeUI ist ein Browser- und Desktop-Tool für interaktive Benutzeroberfläche und Animation. Eine Animation befindet sich in einer geöffneten .exode-Datei, die Layout, Zeitleiste, Zustandsautomaten, Federphysik und Logik enthält. Laufzeitpakete spielen diese Datei in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI und Flutter ab, sodass dieselbe Animation in der App ausgeführt wird, anstatt für jede Plattform neu erstellt zu werden. ExodeUI stellt einen MCP-Server mit mehr als 100 Tools bereit (Erstellen, Animieren, Logik und Physik hinzufügen, Synchronisierung mit dem Live-Editor, Exportieren), sodass Claude Code-, Cursor-, OpenCode- und andere MCP-Clients die Datei über Klartext-Eingabeaufforderungen erstellen und bearbeiten können. Das Setup befindet sich im Produkt, nicht in einem Skript, daher muss kein Befehl kopiert werden: Schalten Sie MCP in den ExodeUI-Einstellungen ein und verbinden Sie dann Ihren Client auf die gleiche Weise, wie Sie jeden MCP-Server verbinden. Wir stellen ExodeUI her, also prüfen Sie auch die Alternativen.
1. Schalten Sie MCP in ExodeUI ein
Aktivieren Sie in den ExodeUI-Einstellungen den MCP-Server. Es veröffentlicht die Tools, die ein KI-Coding-Client zum Erstellen und Bearbeiten der Datei verwendet.
2. Verbinden Sie Ihren Client
Richten Sie Claude Code, Cursor, OpenCode oder einen beliebigen MCP-Client auf den ExodeUI-Server, genauso wie Sie ihn mit anderen MCP-Servern verbinden.
3. Beschreiben Sie den Antrag
Fordern Sie die Animation im Klartext an. Der Agent bearbeitet die .exode-Datei und die Änderung wird im ExodeUI-Editor angezeigt.
4. Versenden Sie dieselbe Datei
Rendern Sie die .exode-Datei über die ExodeUI-Laufzeit in React, SwiftUI, Flutter und mehr und steuern Sie ihre Eingaben und Zustände aus Ihrem Code.
Claude Design vs. Claude Code + ExodeUI
Beide Wege beginnen mit einer Aufforderung und enden mit einer Bewegung in Ihrem Produkt. Sie unterscheiden sich darin, was dazwischen passiert: Claude Design speichert die Arbeit in einem Design-Canvas, während Claude Code plus ExodeUI sie in einer Datei speichert, die ausgeführt wird.
Was Sie bekommen
Claude Design: ein Design oder ein anklickbarer Prototyp sowie ein Übergabepaket für Claude Code. Claude Code + ExodeUI: eine .exode-Datei, die als Komponente abgespielt wird.
Wo die Animation läuft
Claude Design: im Design-Canvas und in gemeinsamen Prototypen. Claude Code + ExodeUI: in der App, im Web, iOS und Android, reagiert auf Eingaben und Daten.
Bearbeitung nach der Übergabe
Claude Design: Design ändern und dann erneut übergeben. Claude Code + ExodeUI: Ein Designer bearbeitet dieselbe Datei, die die App ausführt, ohne sie neu zu erstellen.
Wo Claude Design gewinnt
Erkunden Sie viele visuelle Richtungen, präsentieren Sie sie den Interessenvertretern und erstellen Sie statische Arbeiten oder Prototypen für jeden Plan, einschließlich des kostenlosen Plans.
Wo ExodeUI gewinnt
Bewegung, die mit Zuständen, Physik und Eingaben aus einer einzigen Datei geliefert und plattformübergreifend wiederverwendet werden muss.
Produktionsnahes Implementierungsbeispiel
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)}
/>
);
}Wichtige Prinzipien
- Claude Design und Claude Motion produzieren visuelle Arbeit, und Claude Code produziert Code, aber keiner von ihnen ist eine Laufzeit
- Eine Animation wird erst dann ausgeliefert, wenn sie ein Format hat, das die App ausführen kann, und mit realen Zuständen und Eingaben verbunden ist
- Benennen Sie die Lockerung, den Auslöser und die Zustände in Ihrer Eingabeaufforderung, um eine Bewegung zu erhalten, die Sie tatsächlich nutzen können
- Mit dem MCP-Server von ExodeUI kann Claude Code eine .exode-Datei erstellen und bearbeiten, die in React, SwiftUI, Flutter und mehr ausgeführt wird