Blog
Motion Graphics mit KI erstellen, ganz ohne Code
- Motion-Design
- No-Code
- Tutorial
- HyperFrames
Ein kurzes animiertes Video brauchte früher einen Motion-Designer, eine Timeline-App und ein paar Tage. Heute beschreibst du es, ein KI-Tool baut es, und du nutzt deine Zeit für das, was zählt: Botschaft und Timing. Motion Graphics mit KI gelingen ohne Code, wenn Brief und Storyboard stimmen.
In diesem Tutorial mache ich zwei Videos, ohne eine Zeile Code zu schreiben. Ein 20-Sekunden-Erklärvideo für QuickBilling, meine Rechnungs-App für Freelancer, und eine 10-Sekunden-animierte Zahl für einen LinkedIn-Post über SolutionPlus, mein KI-Produktstudio in Berlin. Jeder Schritt nennt das Tool und liefert den Prompt zum Einfügen.
Kernpunkte
- Der größte Teil der Qualität entsteht vor jedem Video-Tool: ein einseitiger Brief und eine Storyboard-Tabelle, die du laut vorgelesen hast.
- Wähle das Tool nach deiner schwersten Szene: Claude Motion für Text und Diagramme, HyperFrames für ein editierbares Projekt, das du selbst renderst, Higgsfield, wenn du echt wirkendes Filmmaterial brauchst.
- HyperFrames Studio ist eine kostenlose Desktop-App: du beschreibst das Video, ein Agent baut es, und du änderst es per Texteingabe, Zeigen, Zeichnen oder Kommentieren.
- Korrigiere die Vorschau mit einer gezielten Änderung pro Prompt: nenne die Szene, die Sekunde und das Problem (Timing, Easing, Überlappung oder Kontrast).
- Speichere Brief, Stilregeln und Prompts als Vorlage. Das zweite Video einer Serie ist viel schneller fertig als das erste.
Der Brief, mit dem KI-Videos ohne Code gelingen
Jeder Prompt unten hat vier Teile: das Ziel, die Inputs, die Einschränkungen und die Fertig-Definition. Dann bittest du um eine Änderung nach der anderen und schaust dir das Ergebnis an, bevor du den nächsten Prompt schickst. Diese Gewohnheit meinen Leute mit gutem Vibe Coding, und bei Video zählt sie mehr als überall sonst, denn ein vager Prompt liefert ein Video, das auf zehn kleine Arten zugleich falsch ist.
Du brauchst keine Design-Ausbildung. Du musst dir deine eigene Vorschau wie ein Zuschauer ansehen und genau sagen, was dich stört.
Schritt 1. Erst den Brief schreiben, dann ein Video-Tool öffnen
Was zu tun ist: Schreibe eine Seite, die Botschaft, Länge, Format, Marke und Szenen festlegt. Eine Idee pro Szene.
Tool: Claude (oder ChatGPT).
Wähle zuerst das Format: 16:9 für YouTube und Websites, 9:16 für Reels, Shorts und Stories, 1:1 für LinkedIn- und Instagram-Feeds. Das QuickBilling-Video mache ich in 16:9 und passe es später an; die LinkedIn-Zahl startet in 1:1. Bleib bei einer oder zwei Schriften, einer kleinen Palette, einem Übergangsstil und Text, der groß genug fürs Handy ist.
Für QuickBilling sind das fünf Szenen zu je vier Sekunden: das Problem, drei Features, ein Call to Action. Für den SolutionPlus-Post sind es drei Beats: der Hook, die Zahl, der Call to Action.
Goal: write a reusable motion graphics brief for a 20-second explainer for QuickBilling, an invoicing app for freelancers.
Inputs: audience: freelancers who chase late invoices. Message: invoicing takes minutes, not evenings. Structure: problem, then three features (send an invoice fast, automatic payment reminders, export for the accountant), then the call to action "Try QuickBilling".
Constraints: five scenes of four seconds. 16:9 master, later 9:16 and 1:1. Dark navy background, white text, one sans-serif font, one transition style, text readable on a phone. Do not invent features.
Definition of done: a table with scene, seconds, what we see, on-screen text and voice-over line. Ask me for brand colours and fonts if I have not given them.Goal: write a second brief in the same style for a 10-second animated number for a SolutionPlus LinkedIn post.
Inputs: one result from client work, stated as a single number. I will fill in the number; use [NUMBER].
Constraints: three beats of about three seconds, 1:1, same fonts and colours as the first brief, a very large number and a small caption.
Definition of done: a table with beat, seconds, what we see and on-screen text.Schritt 2. Storyboard als Tabelle schreiben und laut vorlesen
Was zu tun ist: Mache aus dem Brief ein Storyboard, eine Zeile pro Szene. Lege Wörter und Timing hier fest, denn eine Tabelle zu ändern kostet nichts, ein gerendertes Video neu zu bauen schon.
Tool: Claude, im selben Chat wie der Brief.
Ich lese jede Zeile laut mit Timer vor. Wenn ich stocke oder über vier Sekunden komme, ist die Zeile zu lang. Wenn die Tabelle stimmt, erkläre ich sie für final, und jeder spätere Prompt bezieht sich auf sie.
Goal: turn the QuickBilling brief into a final storyboard.
Constraints: columns: scene, time range, what we see, on-screen text (six words at most), voice-over line (ten words at most). One idea per scene. Total exactly 20 seconds. Do not make any video yet.
Definition of done: only the table, followed by up to three questions about anything unclear.Keep the same table. Shorten all on-screen text to four words at most and keep the total at 20 seconds. Return the full table.Schritt 3. Das Tool wählen, das zu deiner schwersten Szene passt
Drei Tools decken fast alles ab, was ein Gründer oder ein Marketing-Team braucht. Du kannst sie mischen: Titel aus dem einen, Footage aus dem anderen.
Claude Motion, in Claude eingebaut, erstellt editierbare Animationen aus Text, Diagrammen, Formen und Bildern und exportiert ein MP4. Kein Videomodell ist beteiligt: Claude animiert deine Inhalte, es erfindet kein Footage. Du startest es aus einem Chat oder über Output, dann Motion, im Nachrichtenfeld. Die Verfügbarkeit ist auf bestimmte Claude-Pläne begrenzt; die datierten Plan-Details halte ich in meinem Post über Claude Motion und Higgsfield Katana fest, also schau dort und auf der Preis-Seite von Anthropic nach.
HyperFrames, von HeyGen, ist ein kostenloses Open-Source-Framework (Apache 2.0), das Webseiten, Medien und Animationen in MP4-Videos verwandelt, gerendert auf deinem eigenen Rechner. Es gibt zwei Wege, es ohne Code zu nutzen. Die HyperFrames-Studio-App für Mac, Windows und Linux ist mit einem HeyGen-Account kostenlos: du beschreibst das Video, ein Agent auf deinem Rechner baut es, und du änderst es per Texteingabe, Zeigen aufs Bild, Zeichnen oder Kommentieren. Oder, wenn du schon Claude Code, Codex, Cursor oder Gemini CLI nutzt, installierst du einmal die HyperFrames-Skills und bittest deinen Agenten um ein Video. Der kostenpflichtige Pro-Plan des Studios ergänzt HeyGens Video-, Bild-, Sprach- und Musikmodelle.
Higgsfield ist für Szenen, die echt wirkendes Footage brauchen: eine Person am Schreibtisch, ein Produkt auf einem Tisch, Kamerafahrten. Es bietet mehr als 35 Bild- und Videomodelle, und seine Elements speichern einen Charakter, einen Ort oder ein Requisit, das du über Bilder und Videos hinweg wiederverwendest.
Bei beiden Videos ist die schwerste Szene Text plus eine Zahl, also starte ich in HyperFrames Studio oder Claude Motion und ergänze nur dann eine Higgsfield-Einstellung, wenn eine Szene einen Menschen braucht.
Schritt 4. Zuerst eine Szene bauen
Was zu tun ist: Füge das finale Storyboard ein, bitte aber nur um Szene eins. Gib sie frei, dann bitte um die nächste. Szene für Szene zu bauen hält jedes Problem klein.
Tools: HyperFrames Studio (ins Mach-Feld tippen), Claude Motion oder dein Coding-Agent mit dem HyperFrames-Skill.
Die Beispielanfrage aus der HyperFrames-README ist ein gutes Vorbild für die richtige Größe: ein 10-Sekunden-Produktintro mit eingeblendetem Titel, Hintergrundvideo und leiser Musik. Meine Anfrage unten folgt derselben Form, mit meinem Storyboard im Anhang.
Goal: build scene 1 of the storyboard below, and only scene 1.
Inputs: the final storyboard table.
Constraints: on-screen text exactly as in the table. Dark navy background, white text, one sans-serif font. The title fades in with a gentle ease-out. Exactly four seconds. Do not start other scenes.
Definition of done: a preview I can watch, and a short note on what you built and what I should check.A four-second shot for an invoicing app explainer: a freelancer at a desk in soft morning light, laptop open, slow push-in. Keep the upper third of the frame empty for a title. Calm, natural colours that sit well on dark navy. One shot only.Schritt 5. Die Vorschau mit je einer gezielten Änderung korrigieren
Was zu tun ist: Schau dir die ganze Vorschau an, dann nenne ein Problem mit Szene, Sekunde und Objekt. Die vier Wörter, die ich am häufigsten nutze, sind Timing, Easing, Überlappung und Kontrast.
Tool: das Tool, das die Szene gebaut hat. In HyperFrames Studio kannst du statt einer Beschreibung auch aufs Bild zeigen oder hineinzeichnen.
Bündele nie mehrere Fixes. Wenn eine Vorschau schlechter wird, bitte darum, genau diese eine Änderung rückgängig zu machen. Bei der LinkedIn-Zahl prüfe ich das Frame, auf dem sie landet: sie muss riesig, scharf und ohne Ton auf dem Handy lesbar sein.
Keep everything else the same. In scene 1 only, start the title half a second later and make the ease-out slower. Keep the scene at four seconds. Show me the new preview.Keep everything else the same. Make the scene 2 text larger so it is readable on a phone, keep white on navy, and keep the text clear of the laptop image. Show me the new preview and wait for my check.Schritt 6. Untertitel, Ton und die anderen Formate
Was zu tun ist: Wenn alle Szenen freigegeben sind, ergänze Untertitel, dann Ton, dann die anderen Größen, in dieser Reihenfolge.
Tool: dasselbe Tool oder dein Agent, wenn du Tools mischst.
Viele scrollen mit ausgeschaltetem Ton, also behandle Untertitel als Teil des Videos, nicht als Extra. Halte sie groß mit starkem Kontrast und prüfe jede Zahl zweimal. Lege eine ruhige Musikspur unter die Stimme. Rendere zuerst den 16:9-Master, dann passe ihn an 9:16 und 1:1 an, mit Titeln, die innerhalb sicherer Ränder neu zentriert werden, nicht nur beschnitten. Schau dir jede Datei auf deinem Handy an, mit Ton an und aus.
Goal: finish the approved QuickBilling video.
Inputs: the final voice-over lines from the storyboard.
Constraints: captions from those lines, large white text with strong contrast. One subtle music track, low under the voice. Render the 16:9 master first, then 9:16 and 1:1 with titles re-centred inside safe margins.
Definition of done: three MP4 files, and a list of anything that is cut off or overlaps on a phone screen.Schritt 7. Als Vorlage für das nächste Video speichern
Was zu tun ist: Speichere Brief, Storyboard-Format, Stilregeln und die Prompts, die funktioniert haben. Beim nächsten Mal änderst du nur Botschaft und Zahlen, sonst nichts.
Tool: Claude, am Ende des Chats, dann deine Notizen. In HyperFrames ist jedes Studio-Projekt ein normaler Projektordner, den du duplizieren kannst. In Higgsfield behältst du deine gespeicherten Elements und nutzt ihre Tags wieder.
Hier kommt die Zeitersparnis wirklich her. Das erste Video einer Serie ist ein Design-Projekt. Das zweite ist das Ausfüllen eines Formulars.
Goal: turn this project into a reusable template.
Inputs: the brief, the final storyboard and the prompts that worked in this chat.
Constraints: keep the style rules (navy, white text, one sans-serif font, one idea per scene, one transition, phone-readable text) and the four-part prompt shape. Replace the specifics with placeholders: message, length, format, scenes.
Definition of done: plain text I can copy, plus the three prompts for the next video: brief, storyboard, build scene 1.Wo das hingehört
Ich habe darüber geschrieben, warum Motion Graphics zu etwas wurden, das man beschreibt, statt Keyframes zu setzen, in Ersetzt KI Motion-Designer?. Dieser Post ist die praktische Hälfte. Designer gewinnen weiter mit Geschmack und mit Details, die ein Zuschauer spürt, aber nicht benennen kann; die Tools nehmen die Stunden an Keyframing ab, nicht das Urteilsvermögen.
Wenn du so eine Video-Pipeline in deinem eigenen Produkt brauchst, zum Beispiel Videos aus den Daten deiner Kunden, dann ist das genau die Art Arbeit, die ich unter agentische Plattformen baue. Wenn du Gründer bist und das für dein Produkt willst, schau auf für Gründer vorbei.
Häufige Fragen
Kann ich Motion Graphics mit KI machen, ganz ohne Design- oder Video-Kenntnisse?
Ja. Du schreibst den Brief, gibst ein Storyboard frei und beurteilst die Vorschau wie ein Zuschauer. Animation und Rendering übernehmen die Tools. Dein Urteilsvermögen zu Botschaft und Timing ist die Fähigkeit, die zählt.
Mit welchem Tool fange ich an?
Fange mit dem Tool an, das zu deiner schwersten Szene passt. HyperFrames Studio oder Claude Motion für Text, Diagramme und Zahlen; HyperFrames über Claude Code, wenn du ein Projekt willst, das du erneut laufen lassen kannst; Higgsfield, wenn du echt wirkendes Footage brauchst.
Ist HyperFrames kostenlos?
Das Framework ist kostenlos und Open Source unter Apache 2.0, und die Studio-App ist mit einem HeyGen-Account kostenlos. Der Pro-Plan des Studios ergänzt HeyGens Video-, Bild-, Sprach- und Musikmodelle; den Preis findest du auf der aktuellen Plan-Seite.
Wie halte ich eine Video-Serie markentreu?
Schreibe Farben, Schriften, Easing und den Übergangsstil in den Brief und nutze ihn wieder. Eine Idee pro Szene. Speichere nach dem ersten Video eine Vorlage und nutze Higgsfield-Elements für wiederkehrende Charaktere oder Orte wieder.
Was mache ich, wenn die Vorschau falsch aussieht?
Nenne ein Problem mit Szene, Sekunde und Objekt, zum Beispiel "Szene 2, der Titel kommt zu früh". Bitte um genau diesen einen Fix, schau wieder hin und mache ihn rückgängig, wenn es schlechter wurde. Bündele nie Fixes.
Quellen
- HyperFrames auf GitHub (README, Lizenz, Skills) github.com
- HyperFrames-Doku: Einführung hyperframes.heygen.com
- HyperFrames-Doku: Studio-App installieren hyperframes.heygen.com
- Higgsfield: Tools für konsistente KI-Charaktere (Modelle, Elements) higgsfield.ai
- Claude-Hilfebereich: Erste Schritte mit Claude Motion support.claude.com
- Anthropic: Claude Dashboards und Claude Motion claude.com
Sprich mich an
Baust du ein KI-Produkt und brauchst einen Senior für die technische Seite? Buche einen gratis 30-Minuten-Call.