Motion Skills
← Ratgeber

So erstellst du ein Video mit Claude Code (Schritt für Schritt, 2026)

Ja. Claude Code kann Videos erstellen: Es schreibt die Animation als Code und rendert ein MP4 auf deinem eigenen Rechner. Die üblichen Wege sind die Agent-Skills von Remotion, HyperFrames oder ein Komplettfilm-Skill von Motion Skills, der einen ganzen Film plant, vertont und rendert. Claude Code ist in Claude Pro und Max enthalten, und du brauchst kein Claude Motion, das eine separate Beta in Claude für die Pläne Team und Enterprise ist.

Im Folgenden: die vier Wege im Vergleich, ein Durchlauf Schritt für Schritt von der Installation bis zum MP4 mit Motion Director, dem kostenlosen Skill, und ein echter Film, vom Briefing bis zur letzten Überarbeitung.

Geprüft anhand der Preisseite von Claude, des Quickstarts von Claude Code, des Coding-Agent-Leitfadens von Remotion und der README von HyperFrames am 29. Oktober 2026.

Vier Wege, wie Claude Code Videos erstellen kann

Weg Was du schreibst Was du bekommst Einrichtung Kosten
Ein Prompt an Opus Nichts; Claude schreibt eine HTML-Animation Eine Seite, die im Browser animiert; aufnehmen oder rendern musst du sie selbst Keine Dein Claude-Plan
Remotion + seine Agent-Skills React-Komponenten, von Claude geschrieben Ein MP4 aus einem Remotion-Projekt, das du behältst npx create-video, dann npx remotion skills add Die eigene Lizenz von Remotion (siehe deren Lizenzseite)
HyperFrames HTML, CSS und GSAP, von Claude geschrieben Ein MP4, gerendert in Headless Chrome mit FFmpeg npx hyperframes init oder sein Claude-Code-Plugin Open Source (Apache 2.0)
Ein Komplettfilm-Skill von Motion Skills Dein Material und ein Satz Ein ganzer Film: eine Richtung, eigene Musik, Prüfungen, das MP4 Die Installation mit einem Satz weiter unten Motion Director kostenlos; $4.90 pro Skill, oder ein Plan

Ein Prompt an Opus ist der schnellste Weg, um zu sehen, was Claude animieren kann: Bitte um "einen 15 Sekunden langen animierten Titel für meine App, als eine HTML-Datei" und öffne ihn. Das Ergebnis ändert sich von Durchlauf zu Durchlauf, und es in ein MP4 umzuwandeln, liegt bei dir. Unsere Seite mit Claude-Motion-Prompts enthält Prompts, die Leute genau dafür geteilt haben.

Remotion ist das etablierte Framework für Video in React. Laut seinem Leitfaden für Coding-Agenten legst du ein Projekt mit npx create-video --yes --blank my-video an, fügst seine Agent-Skills mit npx remotion skills add hinzu, öffnest die Vorschau mit npm run dev und startest Claude Code in einem zweiten Terminal. Es eignet sich für Entwickler, die jede Komponente voll im Griff haben wollen. Prüfe die Lizenz von Remotion, bevor du es beruflich einsetzt. Wie sich seine Agent-Skills von einem Komplettfilm-Skill unterscheiden: Remotion-Agent-Skills im Vergleich mit Motion Skills.

HyperFrames von HeyGen ist ein Open-Source-Framework, das "HTML, CSS, Medien und frei ansteuerbare Animationen" in MP4-Dateien verwandelt. Du kannst es als Claude-Code-Plugin installieren oder ein Projekt mit npx hyperframes init my-video starten und mit npx hyperframes render rendern. Unsere früheren Motion-Vorlagen, die jetzt als Beispiele bleiben, bauten darauf auf. Beide Engines im Vergleich findest du unter HyperFrames vs. Remotion.

Ein Komplettfilm-Skill von Motion Skills wird von deinem Agenten geladen. Du schreibst keine Komponenten: Du gibst ihm dein Projekt, deine Notizen, Daten oder dein Skript und sagst, wofür der Film gedacht ist. Er wählt eine Richtung und zeigt dir ein Schlüsselbild, schreibt den Film als Code, komponiert die Musik, prüft jedes Frame und rendert das MP4 mit unserer offenen Engine motion-skills (mo). Der Rest dieses Ratgebers folgt diesem Weg.

Was du brauchst

  • Claude Code, mit Claude Pro oder Max (auch Team, Enterprise oder ein Konto bei Claude Console; im Free-Plan ist es nicht enthalten).
  • Node.js 22 oder neuer.
  • FFmpeg (brew install ffmpeg unter macOS).
  • Google Chrome. Der Renderer steuert es headless.

Die Engine installiert sich beim ersten Rendern selbst über npx; API-Schlüssel sind nicht nötig. Der erste Schritt des Skills, mo doctor, prüft alle drei und sagt, was fehlt. Mehr dazu, wo Skills liegen, steht in So installierst du Agent-Skills.

Schritt für Schritt mit Motion Director

Motion Director ist kostenlos und braucht nur eine Google-Anmeldung. Der Skill macht einen 10–20-Sekunden-Film jeder Art: einen Launch-Teaser, eine Zahl, die sitzt, eine erklärte Idee, einen vertikalen Hook.

1. Mit einem Satz installieren

Öffne Claude Code in einem Ordner (deinem Projekt oder einem leeren) und füge ein:

Read https://claude-motion.com/skills/motion-director/install.md and follow it to install the "motion-director" skill, then make a first video with it.

Claude Code liest die Anleitung und führt einen Befehl aus, npx motion-skills install motion-director. Beim ersten Mal öffnet sich eine Seite in deinem Browser: Melde dich mit Google an und bestätige den Code, den dein Terminal anzeigt. Lieber selbst im Terminal? Jede Skill-Seite hat den Befehl für Claude Code, Codex, Cursor und Gemini CLI: Klicke auf Installationsprompt kopieren und öffne den Tab Im Terminal installieren.

2. Gib ihr dein Material

Sag, worum es im Film geht, und zeig auf das, was er verwenden soll: das Repo, in dem er entsteht, eine README, ein CHANGELOG, eine Tabelle, einen Link, ein Skript. Zum Beispiel:

Mach aus README.md und den Notizen zu 2.0 in CHANGELOG.md einen 15 Sekunden langen Launch-Teaser für diese App. 16:9, für unsere Website.

Der Skill legt eine sources.md an: jede Zeile, jede Zahl und jeden Namen, die er zeigen könnte, mit der Datei oder URL, aus der sie stammen. Er fragt nur, was den Film verändern würde (wo er läuft, die Länge, deine Marke), und trägt seine Standardwerte gleich ein. Noch kein Material? Dann nimmt er ein Beispiel-Changelog, das mit dem Skill kommt, und sagt das.

3. Eine Richtung wählen

Bevor er etwas baut, schlägt der Skill drei Richtungen für deinen Film vor, jede mit einem Satz und einem Standbild in ihrem eigenen Stil und ihrer Palette (Kinetic Type, Datengeschichte oder Whiteboard bei Motion Director). Du wählst eine oder mischst sie („die Farben der zweiten auf der ersten“); hast du „mach einfach“ gesagt, nimmt er die stärkste und sagt dir, welche. Dann schreibt er für diese Richtung ein kurzes Treatment: wann der Hook sitzt, wann die Kernaussage auf dem stärksten Beat landet und wie das Ende gehalten wird. Das ist deine Storyboard-Prüfung: Ein Standbild ist schneller geändert als ein fertiger Film.

4. Bauen, prüfen und vertonen lassen

Sie schreibt den Film als eine index.html (HTML und GSAP) und sieht sich dann ihre eigene Arbeit an: einen Kontaktbogen des ganzen Films, mo check für Fehler, mo audit, damit jede Zeile auf dem Bildschirm eine Quelle hat, und Standbilder der Schlüsselmomente, die sie öffnet und korrigiert. Sie schreibt eigene Musik mit einem kurzen Motiv für dein Thema. Hören kann sie nicht, also sagt sie dir, was sie geschrieben hat.

5. Um eine Änderung bitten

Sieh dir den Render an und sag in einfachen Worten, was sich ändern soll: "das Logo kommt zu spät", "nimm unser Grün", "halte die letzte Zeile länger". Der Skill macht die kleinstmögliche Änderung an genau dieser Stelle und Zeit und rendert erneut. Du kannst auch mo studio ausführen, um eine Live-Vorschau zu öffnen, C drücken, das gemeinte Frame anklicken und die Änderung dort hineinschreiben.

6. Das MP4 erhalten

Der letzte Render landet in deinem Projekt, mit Pfad, Länge und Format, einer einzeiligen Notiz zu Stil und Musik und einer handoff.md. Wenn du den vollen Film dieser Art willst, einen 30–90-Sekunden-Launchfilm, einen Erklärfilm oder ein Datenvideo, macht der passende Komplettfilm-Skill im selben Ordner weiter.

Ein echtes Beispiel: "Claude Code in drei Schritten"

Diesen 29-Sekunden-Film hat unser Anleitungsvideo-Skill gemacht, der genauso arbeitet wie Motion Director, nur mit einem längeren Film und mehr Stilen.

Claude Code in drei Schritten

Installieren, im Projekt starten, die erste Frage stellen: der offizielle Quickstart, mit der echten Versionsausgabe.

Beispiel für Anleitungsvideo16:9 · 29 s

Inoffizielle Anleitung, nicht von Anthropic gemacht oder unterstützt.

Das Briefing. "Eine 30-sekündige Onboarding-Anleitung in 16:9 für Leute mit einem Claude-Pro- oder Max-Plan, die Claude Code noch nie benutzt haben, zu sehen auf unserer Website und in einer Einstiegs-E-Mail: installieren, in einem Projekt starten, etwas fragen. Nur den offiziellen Quickstart verwenden; keine Befehle oder Ausgaben erfinden." Das Material waren die öffentlichen Quickstart- und Setup-Seiten von Claude Code sowie ein echter Lauf von claude --version.

Die Richtungen. Der Skill schlug drei vor: ein großes Terminal mit einer Schrittleiste, eine endlose Befehlszeile über farbige Flächen und eine Systemkarte dessen, was jeder Befehl berührt. Er wählte das Terminal: "die Botschaft ist ein Arbeitsablauf und die Oberfläche ist ein Terminal, also sind die echten, groß getippten Befehle der stärkste Beweis". Das Risiko benannte er gleich zu Beginn: Es gab keinen echten Screenshot einer Sitzung, also musste dieser Bildschirm als vereinfacht erkennbar sein, und im Film ist er mit "Layout vereinfacht" beschriftet.

Der Plan. Ein Treatment in Takten bei 112 BPM: installieren, starten, fragen, dann die Beispielantwort auf dem Höhepunkt und der Installationsbefehl als Schlusstafel. Jedes Wort auf dem Bildschirm ist in der sources.md auf den Quickstart zurückgeführt; die Versionszeile ist die echte Ausgabe.

Die Überarbeitung. Nach dem ersten Render zeigte mo qa eine Pause von 3 Sekunden nach Schritt 1 und eine von 2 Sekunden nach Schritt 2, die niemand brauchte. Die Schritte 2 und 3 rückten nach vorn, und der Höhepunkt kam einen Takt früher, deshalb läuft der Film 29 Sekunden statt 30.

Der Quellcode des Films, samt Richtungen, Treatment und Quellen, liegt dem Anleitungsvideo-Skill als Beispiel bei.

Wähle einen Komplettfilm-Skill für deine Filmart

Motion Director hört absichtlich bei 20 Sekunden auf. Für den ganzen Film hat jede Filmart ihren eigenen Komplettfilm-Skill, mit eingebauten Stilen:

  • Launch: Launchfilme, Anleitungen, Vergleiche, Markenvorstellungen, Event-Promos, App-Store-Vorschauen.
  • Lernen: Erklärfilme, Lektionen, Erklärfilme zu Fachartikeln, Zeitleisten, Mathe-Erklärfilme.
  • Social Media: vertikale Shorts, Talking-Head-Videos, Titel und Übergänge, Social Cards.
  • Berichte: Datenvideos, Team-Updates, Sitzungs-Replays, Präsentationen mit Sprecherstimme, Investoren-Updates.

Jeder Komplettfilm-Skill kostet $4.90, oder du bekommst alle mit einem Plan: $9.90 im Monat, $79 im Jahr oder $169 einmalig für den lebenslangen Gründerpass. Siehe Preise.

Fehlerbehebung

  • "FFmpeg not found" oder "Chrome not found". Führe mo doctor aus (npx --yes motion-skills doctor); es nennt, was fehlt. Unter macOS brew install ffmpeg; Google Chrome installierst du von Google.
  • Claude Code verwendet den Skill nicht. Starte nach der Installation eine neue Claude-Code-Sitzung, damit sie den neuen Skill einliest, und frag dann erneut, mit Namen: "verwende den Skill motion-director".
  • Die Sandbox blockiert einen Browser oder einen lokalen Server. Der Skill braucht beides für seine visuellen Prüfungen. Bestätige sie, wenn Claude Code fragt; lass Claude Code die Prüfungen nicht überspringen.
  • Der Film ist länger als 20 Sekunden. Motion Director macht die stärksten 20 Sekunden daraus und sagt dir, welcher Komplettfilm-Skill den ganzen Film macht.

Nicht in Claude Code?

Dieselben Skills funktionieren in Codex, Cursor und Gemini CLI; das ist auch der Weg mit dem Free-Plan von Claude. Wo jeder Agent seine Skills ablegt, steht in So installierst du Agent-Skills. Wenn du Claude Motion selbst gesucht hast, siehe Claude Motion nicht in deinem Plan?. Schritt für Schritt für diese Agenten, mit dem Ordner, den jeder liest: Videos mit Codex, Cursor oder Gemini CLI machen.

Fragen

Kann Claude Code Videos erstellen?

Ja. Claude Code kann Animationen als Code schreiben und auf deinem Rechner als MP4 rendern. Übliche Wege sind die Agent-Skills von Remotion (React), HyperFrames (HTML und GSAP) oder ein Komplettfilm-Skill von Motion Skills, der einen ganzen Film plant, vertont und rendert. Claude Code ist in Claude Pro und Max enthalten.

Brauche ich Claude Motion, um mit Claude Videos zu erstellen?

Nein. Claude Motion ist eine separate Beta-Funktion in Claude für die Pläne Team und Enterprise. Claude Code mit Pro oder Max kann mit einem Skill dieselbe Art von als Code gebauter Animation erstellen, gerendert auf deinem eigenen Rechner.

Was muss ich installiert haben?

Node.js 22 oder neuer, FFmpeg und Google Chrome. Die Engine motion-skills installiert sich beim ersten Rendern selbst über npx, und API-Schlüssel sind nicht nötig.

Ist es kostenlos?

Motion Director ist mit einer Google-Anmeldung kostenlos und macht Filme von 10–20 Sekunden. Jeder Komplettfilm-Skill kostet $4.90, oder du bekommst alle mit einem Plan: $9.90 im Monat, $79 im Jahr oder $169 einmalig. Es gibt keine Credits; verbraucht wird nur das Kontingent deines eigenen Claude-Plans.

Verlässt mein Film meinen Rechner?

Der Film wird auf deinem Rechner gebaut und gerendert. Wenn ein Render fertig ist, teilt die Engine claude-motion.com mit, welcher Skill gerendert hat und ob es geklappt hat, aber nichts über den Film; mit MOTION_SKILLS_TELEMETRY=0 schaltest du das ab.

Quellen

Dieser Ratgeber ist unabhängig und nicht mit Anthropic, Remotion oder HeyGen verbunden. Claude ist eine Marke von Anthropic, PBC. Geprüft anhand der oben genannten Seiten am 29. Oktober 2026.