Du beschreibst, Claude animiert

Wie versprochen: der komplette Guide zum Carousel. Einrichtung, Stilblatt-Vorlage und mein Szenen-Prompt zum Kopieren. Damit baust du animierte Grafiken für dein Marketing, ohne Schnittprogramm, ohne Vorlagen-App und ohne Motion-Designer.

Das Problem

Motion-Designer sind teuer. Vorlagen sehen alle gleich aus. Du willst aber deine eigene Animation: deine Farben, dein Tempo, deine Zahlen. Und After Effects lernst du nicht zwischen zwei Kundenterminen.

Die Idee: Für Claude ist ein Video ein Rezept

Ein Video ist für Claude kein Film, sondern eine Datei mit Anweisungen: Was erscheint wann, wo, wie schnell. Dieses Rezept kann Claude schreiben wie jeden anderen Code. Ein Programm macht daraus das fertige MP4.

Das Cover meines Carousels ist genau so entstanden: Die Zahl zählt hoch, drei Balken wachsen nacheinander. Niemand hat dafür ein Schnittprogramm geöffnet.

HyperFrames oder Remotion?

Es gibt zwei bekannte Werkzeuge, die aus Code ein Video machen. Beide funktionieren mit Claude Code. Der Unterschied, der für Unternehmer zählt, ist die Lizenz:

Quellen: github.com/heygen-com/hyperframes (README, Stand Oktober 2026) und remotion.dev/docs/license/faq.

Der Guide zeigt den Weg mit HyperFrames. Wo Remotion anders läuft, steht es dabei.

In 5 Schritten zur ersten Animation

1. Das Werkzeug einrichten

   Leg einen leeren Ordner an, zum Beispiel videos, und öffne Claude Code darin. Dann gibst du Claude diesen Auftrag:

   Auftrag an Claude · EinrichtungKopieren

   Richte mir in diesem Ordner HyperFrames ein, damit du für mich Videos aus Code bauen kannst.
   
   1. Prüf, ob Node.js ab Version 22, FFmpeg und Google Chrome installiert sind. Fehlt etwas, sag mir, was fehlt, und installier es erst nach meinem OK.
   2. Leg mit "npx hyperframes init erstes-video" ein neues Projekt an.
   3. Bau darin ein Testvideo: 5 Sekunden, 1080 x 1920, dunkler Hintergrund, in der Mitte blendet der Satz "Mein erstes Video aus Code" ruhig ein.
   4. Render es mit "npx hyperframes render" als MP4 und sag mir, wo die Datei liegt.
   
   Erklär mir jeden Schritt in einem Satz, ohne Fachbegriffe.

   Ist alles eingerichtet, probier gleich ein zweites Testvideo mit deinem eigenen Namen:

   Testvideo · An ClaudeKopieren

   Mach mir ein 5-Sekunden-Video mit meinem Firmennamen.

   Wenn dein Testvideo läuft, steht das Fundament. Zur Kontrolle hier die Befehle, die Claude dabei nutzt:

   Terminal · zur KontrolleKopieren

   npx hyperframes init erstes-video
   cd erstes-video
   npx hyperframes preview
   npx hyperframes render

   preview öffnet eine Vorschau im Browser, render macht das MP4. Mit Remotion sagst du Claude stattdessen: „Richte mir ein neues Remotion-Projekt ein“, der Rest des Guides gilt genauso.

2. Die passenden Skills dazu

   Skills sind Anleitungen, die Claude vor der Arbeit liest. Der Unterschied ist sofort sichtbar:

   Ohne SkillFolien wie aus der Vorlage, harte Schnitte, Text springt rein.

   Mit SkillWeiche Übergänge, Diagramme, die wachsen, Untertitel im Takt.
   Terminal · HyperFrames-SkillsKopieren

   npx skills add heygen-com/hyperframes

   Für Remotion heißt der Befehl:

   Terminal · Remotion-SkillsKopieren

   npx skills add remotion-dev/skills

   Du willst nichts tippen? Dann sag Claude einfach: „Installier die offiziellen Skills für mein Video-Werkzeug.“ Claude führt den passenden Befehl dann selbst aus.

   Danach Claude Code einmal neu starten, damit er die Skills sieht. Bei HyperFrames sind unter anderem dabei: Animationen (hyperframes-animation), Bewegungsgrafiken (motion-graphics) und eingebrannte Untertitel (embedded-captions).

   HyperFrames gibt es auch als Plugin für Claude Code: claude plugin marketplace add heygen-com/hyperframes, dann claude plugin install hyperframes@hyperframes. Ein Weg reicht, nicht beide.

3. Einmal dein Stilblatt

   Das ist der Schritt, der aus „sieht aus wie KI“ ein Video in deinem Stil macht. Du schreibst ihn einmal, danach nutzt Claude ihn bei jedem Video. Sag Claude: „Leg im Projektordner eine Datei STIL.md an und lies sie vor jedem Video“, und kopier diese Vorlage hinein. Die Werte sind meine, ersetz sie durch deine:

   Vorlage · STIL.mdKopieren

   # Mein Video-Stil
   
   ## Farben
   - Hintergrund: #0B0B0C (tiefes Schwarz)
   - Text: #F4F1EA, gedämpfter Text: #8C867B
   - Akzent: #C9A45C (Gold, sparsam: ein Akzent pro Bild, eine Zahl, eine Linie oder ein Wort)
   
   ## Schrift
   - Klare Grotesk ohne Schnörkel, zum Beispiel Inter oder die Systemschrift
   - Akzent kursiv: pro Überschrift ein Wort kursiv
   - Große, ruhige Überschriften, viel freier Raum
   - Text nie kleiner als 40 px bei 1080 px Breite, damit man ihn am Handy lesen kann
   
   ## Tempo
   - Ruhig, weiche Übergänge. Bewegungen weich einblenden, nie hart springen
   - Jedes Element bleibt mindestens 1,5 Sekunden stehen, bevor das nächste kommt
   - Nicht alles gleichzeitig: Elemente kommen nacheinander
   
   ## Format
   - Standard 1080 x 1920 (9:16) für Reels, 1080 x 1350 (4:5) für Carousels
   - Wichtiges in die Bildmitte, oben und unten 15 % frei lassen
   
   ## No-Gos
   - Keine Emojis, keine Clipart, keine Stockbilder
   - Keine Verläufe in Regenbogenfarben, kein Glitzer, keine Neonfarben
   - Keine wackelnden oder hüpfenden Effekte
   - Keine erfundenen Zahlen: Ich gebe jede Zahl vor

   Mein wichtigster Punkt ist das Tempo „ruhig“. Ohne diese Angabe animiert Claude lieber zu viel als zu wenig.

4. In Szenen beschreiben

   Jetzt kommt das eigentliche Video. Beschreib es nicht als Ganzes, sondern als Storyboard: Szene für Szene, mit Sekunden und Format. Das ist mein Szenen-Prompt, mit dem Beispiel vom Carousel-Cover:

   Szenen-Prompt · An ClaudeKopieren

   Bau mir ein Video mit HyperFrames. Lies vorher STIL.md und nutze die HyperFrames-Skills.
   
   Format: 1080 x 1920 (9:16), gesamt 8 Sekunden.
   
   Szene 1 (0 bis 3 Sekunden): Eine große Zahl in der Bildmitte zählt von +0 % auf +38 % hoch. Die Zahl im Akzent-Gold, das Hochzählen wird zum Ende hin langsamer.
   Szene 2 (3 bis 6 Sekunden): Darunter wachsen drei Balken nacheinander von unten nach oben, im Abstand von je einer halben Sekunde. Der letzte Balken ist der höchste.
   Szene 3 (6 bis 8 Sekunden): Unter den Balken blendet ruhig der Satz "Mehr Anfragen" ein. Danach steht alles still bis zum Ende.
   
   Regeln:
   - Halte dich an Farben, Schrift und Tempo aus STIL.md.
   - Erfinde keine Zahlen und keinen Text, nimm nur, was hier steht.
   - Render das MP4 und sag mir, wo es liegt.
   - Schreib mir danach in drei Zeilen, was in jeder Szene passiert, damit ich prüfen kann, ob es zu meiner Beschreibung passt.

   Die Kurzfassung von der Slide reicht für den Anfang auch:

   Kurz-Prompt von der SlideKopieren

   Szene 1 (0–3 s): Die Zahl zählt von 0 auf 38 % hoch.
   Szene 2 (3–6 s): Drei Balken wachsen nacheinander.
   Szene 3 (6–8 s): Der Satz «Mehr Anfragen» blendet ein.
   Gesamt 8 Sekunden, Hochformat 9:16, Stil laut Stilblatt.

   Setz deine eigene Zahl und deinen eigenen Satz ein. Je genauer die Sekunden, desto weniger musst du danach korrigieren.

5. Ansehen, in Worten korrigieren

   Schau dir das MP4 an, am besten auf dem Handy. Dann korrigierst du in ganz normalen Sätzen. Claude ändert das Rezept und rendert neu. Aus Version 1 wird mit einem Satz wie „Szene 2 langsamer, letzter Balken in Gold.“ Version 2, neu gerendert. Solche Sätze nutze ich:

   Korrektur · BeispieleKopieren

   Szene 2 langsamer, letzter Balken in Gold.
   Die Zahl ist zu klein, mach sie doppelt so groß.
   Der Satz in Szene 3 kommt zu früh, eine Sekunde später einblenden.
   Am Ende 2 Sekunden Standbild anhängen.
   Mach mir dieselbe Version zusätzlich im Format 1080 x 1350 für ein Carousel.

   Wenn das Video passt, sag Claude: „Speichere diesen Aufbau als Vorlage, damit ich beim nächsten Mal nur die Zahl und den Satz tauschen muss.“ Ab dann ist das nächste Video eine Sache von Minuten.

Wofür sich das im Betrieb lohnt

Nicht dafür: Filme mit echten Menschen. Dafür bleibt die Kamera.

Und jetzt du: Was würdest du zuerst animieren? Nimm eine Zahl, auf die du stolz bist, und fang mit Schritt 1 an.

Ehrlich gesagt: die Grenzen

• Das erste Video dauert länger. Die Einrichtung und dein Stilblatt kosten beim ersten Mal Zeit. Ab dem zweiten Video zahlt es sich aus.
• Rendern braucht deinen Rechner. Das MP4 entsteht lokal. Ein paar Sekunden Video brauchen je nach Rechner ein paar Minuten.
• Grafik, kein Film. Für Personen, echte Szenen oder fotorealistische Bilder ist das der falsche Weg.
• Deine Zahlen müssen stimmen. Claude animiert, was du ihm gibst. Ob die Zahl echt ist, prüfst du.
• Schriften haben Lizenzen. Nutze Schriften, die du verwenden darfst, zum Beispiel freie Schriften wie Inter.

Neue Guides direkt per Mail