Motion Design mit Claude Code: Prompts, Referenzen und ein Ablauf, der trägtMotion design with Claude Code: prompts, references and a process that holds up

Motion Design war lange Handarbeit in After Effects. Wer einen Produktspot, ein Erklärvideo oder ein kurzes Reel wollte, brauchte ein Studio oder sehr viel Geduld. Mit Claude Code und HyperFrames entsteht so ein Video inzwischen aus einem Prompt. Claude schreibt das Video als Code, rendert es zu einer MP4 und prüft das Ergebnis selbst.

Ich nutze HyperFrames für meine eigenen Spots und Reels. In diesem Beitrag zeige ich den Ablauf, der dabei am zuverlässigsten funktioniert, und gebe dir alle Prompts zum Kopieren: vom Einrichten über das Video nach Referenzen bis zum Spot für die eigene Marke. Den Anstoß gab der Guide von SKAILE, der sechs Videos mit genau diesem Werkzeug getestet hat. Die Prompts unten sind meine eigene Fassung davon.

Was HyperFrames anders macht

KI-Videomodelle erzeugen Bilder aus Rauschen. Gefällt dir eine Szene nicht, würfelst du neu und hoffst, dass der Rest gleich bleibt. HyperFrames geht den umgekehrten Weg. Jede Szene ist eine HTML-Komposition mit Zeitangaben, Animationen laufen über GSAP, CSS oder andere Bibliotheken. Ein Renderer spielt diese Seite Bild für Bild ab und schreibt daraus ein Video.

Das hat drei Folgen, die im Alltag zählen. Typografie bleibt scharf und exakt, weil sie Text ist und kein gemaltes Bild. Farben und Schriften kommen aus deiner Marke, nicht aus dem Zufall. Und jede Änderung ist gezielt: Du sagst „der Titel steht eine halbe Sekunde zu kurz“, Claude ändert genau diese Zeile und rendert neu.

HyperFrames steht unter Apache-2.0 und ist kostenlos. Du brauchst Node.js ab Version 22 und FFmpeg. Kosten entstehen nur durch dein Claude-Abo und, falls du willst, durch Dienste für Stimme und Musik.

Der Ablauf: Referenz, Storyboard, Video

Der häufigste Fehler ist ein Prompt, der sofort losbauen lässt. Claude interpretiert dann deine Idee, baut 40 Minuten und liefert etwas, das handwerklich sauber ist, aber nicht das, was du im Kopf hattest. Besser ist ein fester Halt nach dem Storyboard.

In Phase 1 bekommt Claude ein bis drei Videos, die dir gefallen. Es lädt sie mit yt-dlp herunter, misst mit FFmpeg Länge und Schnitte und zieht ein Standbild pro Sekunde. Aus diesen Standbildern legt es Kontaktbögen an und beschreibt danach, was die Vorlage ausmacht: Tempo, Schnittlänge, Typografie, Farben, Bewegung, Kamera. Das ist der Teil, den du sonst selbst im Kopf machst, wenn du sagst „so ungefähr wie das Apple-Video“.

In Phase 2 entsteht das Storyboard als Tabelle. Hier sparst du die meiste Zeit. Eine Zeile in der Tabelle zu ändern kostet Sekunden, eine fertig gerenderte Szene umzubauen kostet Minuten.

Die Prompts zum Kopieren

Alle Prompts sind für Claude Code gedacht und folgen drei Schritten. Schritt 1 richtest du einmal ein. Für jedes Video legst du in Schritt 2 einen eigenen Ordner an und startest Claude Code. In Schritt 3 fügst du einen Prompt ein: „Referenz → Video“ für eigene Vorlagen oder einen der sechs Prompts aus dem SKAILE-Test. Fülle die eckigen Klammern aus und kopiere den Text über das Symbol rechts oben.

Bau mit HyperFrames ein Motion-Design-Video nach meinen Referenzen. Arbeite in drei Phasen. Nach Phase 2 hältst du an, bis ich OK sage.

Referenzen: [1 bis 3 Links oder Dateipfade zu Videos, die mir gefallen]
Idee: [Thema, Zielgruppe, Länge, 16:9 oder 9:16]
Rahmen: [Stimmung, Farben mit Hex-Codes, Schriften, Text im Bild, was auf keinen Fall vorkommen darf]

Phase 1: Referenzen lesen
- Lade Links mit yt-dlp in den Ordner `referenzen/`, Dateien nimmst du direkt. Fehlt ein Werkzeug, frag vor der Installation. Klappt ein Download nicht, bitte mich um die Datei.
- Miss mit FFmpeg Länge, Format und Schnitte (Szenenerkennung). Zieh ein Standbild pro Sekunde und eins an jedem Schnitt und leg sie mit Zeitstempel als Kontaktbogen ab. Sieh dir jeden Kontaktbogen wirklich an.
- Beschreib pro Referenz in wenigen Zeilen: Tempo und Schnittlänge, Typografie, Farben, Bewegung und Übergänge, Kamera, Aufbau von Anfang bis Ende.

Phase 2: Storyboard
- Bau ein Storyboard als Tabelle: Szene, Zeit von bis, Bild, Text im Bild, Bewegung und Übergang, Ton, Referenz, die Pate steht.
- Übernimm Machart und Tempo der Referenzen, nie ihre Logos, Texte oder Marken. Der Inhalt kommt aus meiner Idee.
- Bau noch nichts. Warte auf mein OK. Will ich etwas ändern, überarbeite nur die Tabelle.

Phase 3: Video
- Prüf zuerst, ob HyperFrames eingerichtet ist. Wenn nicht, richte es nach https://github.com/heygen-com/hyperframes ein.
- Bau das Video Szene für Szene nach Storyboard und rendere eine MP4 nach `final/`.
- Für den Ton nimm, was bei mir eingerichtet ist. Bevor du einen bezahlten Dienst nutzt, frag mich.
- Prüf das Ergebnis selbst, bevor du es mir gibst: Kontaktbogen deines Videos ansehen, kein schwarzes Bild, Text lesbar und nicht abgeschnitten, Timing wie im Storyboard. Dann nenn mir den Pfad.

Danach gebe ich Feedback. Du änderst genau das, renderst neu und sagst in einem Satz, was sich geändert hat.

„Referenz → Video“ arbeitet mit dir zusammen und hält nach dem Storyboard an. Die sechs Prompts 01 bis 06 sind für Läufe gedacht, bei denen Claude allein durcharbeitet. An sie hängst du den Rahmen an. Er legt Ordner, Format, Tonquellen und eine Obergrenze für bezahlte Credits fest. Die Spots für Notion, MyFitnessPal und Obsidian sind Übungen, um zu sehen, wie gut Claude eine bekannte Marke trifft. Veröffentlichen solltest du nur Spots für deine eigene Marke.

Wie lange das dauert

SKAILE hat sechs Videos mit Claude Opus 5.5 auf dem höchsten Aufwand gebaut und die Zeiten veröffentlicht. Die Spanne reicht von 26 Minuten für einen einfachen Werbespot bis 87 Minuten für einen App-Spot mit 3D-iPhones und KI-Stimme.

Für die Planung heißt das: Starte einen Lauf, bevor du in ein Meeting gehst, und schau danach auf das Ergebnis. Eine lange Sitzung auf hohem Aufwand verbraucht viel vom Nutzungslimit. Wer regelmäßig Videos baut, sollte das in der Wahl des Abos mitdenken. Was sich dort gerade geändert hat, steht im Beitrag „Your 5-hour limit has been removed“.

Was ein gutes von einem mittelmäßigen Video trennt

Aus den Tests und meinen eigenen Läufen bleiben vier Punkte, die den Unterschied machen.

• Ziel und Anspruch klar nennen. Der Satz „Geh wirklich all out“ am Ende klingt banal, verändert das Ergebnis aber spürbar. Claude nimmt sich mehr Zeit für Details und Übergänge.
• Die eigene Marke genau beschreiben. Bekannte Marken recherchiert Claude selbst. Über deine Marke findet es wenig. Gib Farben mit Hex-Codes, Schriften, Logo-Datei und Bildsprache mit, und schreib dazu, was die Marke nie sein soll.
• Eine Tonquelle verbinden. Ohne Stimme, Musik oder Soundbibliothek erzeugt Claude Töne im Code. Das funktioniert, klingt aber dünner. Schon ein Ordner mit freien Soundeffekten hebt das Ergebnis.
• Feedback wie ein Review geben. Weil alles Code ist, kannst du sehr konkret werden: Szene 3 zwei Sekunden kürzer, Logo kleiner, Übergang weicher. Claude ändert genau das und nichts sonst.

Ein Punkt gehört vor jede Veröffentlichung: Spots für fremde Marken sind Übungen. Für echte Werbung brauchst du deine eigene Marke oder eine schriftliche Erlaubnis. Das gilt auch für Logos, Musik und Stimmen, die du nicht selbst lizenziert hast.

Wofür ich es im Unternehmen einsetzen würde

Für Unternehmen ist HyperFrames weniger ein Spielzeug für Showreels als ein Werkzeug für wiederkehrende Formate. Ein Erklärvideo pro neuem Angebot, ein kurzer Clip zu jedem Blogbeitrag, ein Produktspot pro Release. Wer einmal Storyboard-Vorlage, Markenbeschreibung und Rahmen festgelegt hat, baut das nächste Video mit einem Bruchteil des Aufwands.

Der Engpass verschiebt sich dabei. Nicht mehr das Handwerk im Schnittprogramm bremst, sondern die Klarheit der Idee: Was soll der Zuschauer nach 30 Sekunden wissen oder tun? Diese Frage beantwortet kein Werkzeug für dich.

Häufige Fragen

Quellen und Stand

Stand: 1. November 2026.

• HeyGen: HyperFrames auf GitHub (Lizenz Apache-2.0, Installation, Voraussetzungen), abgerufen am 1. November 2026.

Bildhinweis: Beide Bildmotive sind KI-generiert (Nano Banana 2.1 über Magnific) und für diesen Beitrag erstellt. Die Grafiken sind eigene Darstellungen, die Bauzeiten stammen aus dem SKAILE-Test (Stand 14. Oktober 2026).

Motion design used to be manual work in After Effects. Anyone who wanted a product spot, an explainer or a short reel needed a studio or a lot of patience. With Claude Code and HyperFrames, such a video now comes from a prompt. Claude writes the video as code, renders it to an MP4 and checks the result itself.

I use HyperFrames for my own spots and reels. In this article I show the process that works most reliably and give you all prompts to copy: from setup to a video based on references to a spot for your own brand. The trigger was the SKAILE guide, which tested six videos with exactly this tool. The prompts below are my own version of it.

What HyperFrames does differently

AI video models generate images from noise. If you do not like a scene, you roll the dice again and hope the rest stays the same. HyperFrames takes the opposite route. Every scene is an HTML composition with timing, and animations run via GSAP, CSS or other libraries. A renderer plays this page frame by frame and writes a video from it.

This has three consequences that matter in practice. Typography stays sharp and exact, because it is text and not a painted image. Colours and fonts come from your brand, not from chance. And every change is targeted: you say “the title stays half a second too short”, Claude changes exactly that line and renders again.

HyperFrames is licensed under Apache-2.0 and free. You need Node.js version 22 or newer and FFmpeg. Costs only come from your Claude subscription and, if you want, from services for voice and music.

The process: reference, storyboard, video

The most common mistake is a prompt that starts building straight away. Claude then interprets your idea, builds for 40 minutes and delivers something that is well crafted but not what you had in mind. A fixed stop after the storyboard works better.

In phase 1 Claude gets one to three videos you like. It downloads them with yt-dlp, uses FFmpeg to measure length and cuts and pulls one still per second. From these stills it builds contact sheets and then describes what makes the reference work: pace, shot length, typography, colours, motion, camera. That is the part you otherwise do in your head when you say “roughly like the Apple video”.

In phase 2 the storyboard is created as a table. This is where you save the most time. Changing a line in the table costs seconds, rebuilding a rendered scene costs minutes.

The prompts to copy

All prompts are meant for Claude Code and follow three steps. You do step 1 once. For every video you create a separate folder in step 2 and start Claude Code. In step 3 you paste a prompt: “Reference → video” for your own references or one of the six prompts from the SKAILE test. Fill in the square brackets and copy the text with the icon at the top right.

Build a motion design video with HyperFrames based on my references. Work in three phases. After phase 2, stop until I say OK.

References: [1 to 3 links or file paths to videos I like]
Idea: [topic, audience, length, 16:9 or 9:16]
Frame: [mood, colours with hex codes, fonts, on-screen text, what must never appear]

Phase 1: Read the references
- Download links with yt-dlp into the folder `references/`, use files directly. If a tool is missing, ask before installing. If a download fails, ask me for the file.
- Use FFmpeg to measure length, format and cuts (scene detection). Pull one still per second plus one at every cut and save them as a contact sheet with timestamps. Actually look at every contact sheet.
- Describe each reference in a few lines: pace and shot length, typography, colours, motion and transitions, camera, structure from start to end.

Phase 2: Storyboard
- Build a storyboard as a table: scene, time from to, image, on-screen text, motion and transition, sound, which reference it follows.
- Take over the craft and pace of the references, never their logos, texts or brands. The content comes from my idea.
- Do not build anything yet. Wait for my OK. If I want changes, revise only the table.

Phase 3: Video
- First check whether HyperFrames is set up. If not, set it up following https://github.com/heygen-com/hyperframes.
- Build the video scene by scene following the storyboard and render an MP4 into `final/`.
- For sound, use what I have set up. Ask me before using a paid service.
- Check the result yourself before you hand it over: look at a contact sheet of your video, no black frames, text readable and not cut off, timing as in the storyboard. Then tell me the path.

After that I give feedback. You change exactly that, render again and tell me in one sentence what changed.

“Reference → video” works with you and stops after the storyboard. The six prompts 01 to 06 are meant for runs in which Claude works through on its own. Append the frame to them. It sets folder, format, sound sources and a cap on paid credits. The spots for Notion, MyFitnessPal and Obsidian are exercises to see how well Claude hits a well-known brand. Only publish spots for your own brand.

How long it takes

SKAILE built six videos with Claude Opus 5.5 at the highest effort and published the times. The range goes from 26 minutes for a simple commercial to 87 minutes for an app spot with 3D iPhones and an AI voice.

For planning, this means: start a run before you go into a meeting and look at the result afterwards. A long session at high effort uses a lot of your usage limit. If you build videos regularly, factor that into your choice of plan. What has just changed there is covered in the article “Your 5-hour limit has been removed”.

What separates a good video from a mediocre one

From the tests and my own runs, four points make the difference.

• State the goal and the standard clearly. The sentence “Really go all out” at the end sounds trivial, but it noticeably changes the result. Claude takes more time for details and transitions.
• Describe your own brand precisely. Claude researches well-known brands itself. It finds little about yours. Provide colours with hex codes, fonts, logo file and imagery, and add what the brand should never be.
• Connect a sound source. Without voice, music or a sound library, Claude generates tones in code. That works but sounds thinner. Even a folder of free sound effects lifts the result.
• Give feedback like a review. Because everything is code, you can be very specific: scene 3 two seconds shorter, logo smaller, transition softer. Claude changes exactly that and nothing else.

One point belongs before every publication: spots for other brands are exercises. For real advertising you need your own brand or written permission. The same applies to logos, music and voices you have not licensed yourself.

What I would use it for in a company

For companies, HyperFrames is less a toy for showreels than a tool for recurring formats. An explainer per new offer, a short clip for every blog article, a product spot per release. Once storyboard template, brand description and frame are defined, the next video takes a fraction of the effort.

The bottleneck shifts. It is no longer the craft in the editing program that slows you down, but the clarity of the idea: what should the viewer know or do after 30 seconds? No tool answers that question for you.

Frequently asked questions

Sources and status

Status: 1 November 2026.

• HeyGen: HyperFrames on GitHub (Apache-2.0 licence, installation, requirements), retrieved 1 November 2026.

Image note: both motifs are AI-generated (Nano Banana 2.1 via Magnific) and created for this article. The graphics are my own illustrations; the build times come from the SKAILE test (as of 14 October 2026).