Schritt-für-Schritt: Videos mit HyperFrames und Claude oder ChatGPT erstellen
10 Min. Lesezeit · von Boris Tomasi
HyperFrames ist ein KI-gestütztes System zur Videoerstellung, bei dem Videos nicht klassisch in einem Schnittprogramm gebaut werden, sondern auf Basis von HTML, Animationen und klaren Textanweisungen entstehen. In Verbindung mit einem KI-Modell wie Claude oder ChatGPT kannst du den Aufbau, die Szenen, Texte und Animationen beschreiben, während die KI daraus Schritt für Schritt ein fertiges Video-Projekt erstellt. Das macht HyperFrames besonders spannend für alle, die professionelle Videos produzieren möchten, ohne jede Animation und technische Einstellung selbst programmieren zu müssen.
1. So funktioniert das System
Der Ablauf besteht aus vier Komponenten:
- Du beschreibst das gewünschte Video.
- Claude Code oder Codex erstellt den HTML-, CSS- und Animationscode.
- HyperFrames zeigt dir das Video als Vorschau.
- HyperFrames rendert daraus eine MP4-Datei.
HyperFrames selbst ist keine klassische Videobearbeitungssoftware. Das Video wird als HTML-Komposition aufgebaut. Animationen entstehen unter anderem mit GSAP. Der KI-Agent übernimmt dabei den Grossteil der technischen Arbeit.
HyperFrames empfiehlt ausdrücklich die Verwendung eines KI-Coding-Agenten. Unterstützt werden unter anderem Claude Code, Cursor, Gemini CLI, Codex, Google Antigravity und GitHub Copilot CLI.
Teil 1: Grundinstallation
Schritt 1: Terminal öffnen
Auf dem Mac öffnest du:
Programme → Dienstprogramme → Terminal
Du kannst auch über Spotlight nach „Terminal“ suchen.
Alle folgenden Befehle werden einzeln in dieses Fenster kopiert und mit Enter bestätigt.
Schritt 2: Node.js installieren
HyperFrames benötigt aktuell Node.js Version 22 oder neuer.
Prüfe zuerst, ob Node.js bereits installiert ist:
node --version
Erscheint beispielsweise:
v22.0.0
oder eine höhere Versionsnummer, kannst du weitermachen.
Ist Node.js noch nicht installiert, installierst du es am einfachsten über die offizielle Node.js-Webseite oder einen Paketmanager.
Nach der Installation prüfst du die Version erneut:
node --version
Schritt 3: FFmpeg installieren
FFmpeg wird benötigt, damit HyperFrames die einzelnen Videoframes zu einer MP4-Datei zusammensetzen kann.
Auf dem Mac installierst du FFmpeg mit Homebrew:
brew install ffmpeg
Danach prüfst du die Installation:
ffmpeg -version
Falls der Befehl brew nicht erkannt wird, musst du zuerst Homebrew installieren.
Teil 2: KI-Agent auswählen
Du brauchst nur einen der folgenden Wege.
Möglichkeit A: Claude Code
Claude Code arbeitet direkt in deinem Projektordner. Es kann Dateien erstellen, verändern und Terminalbefehle ausführen.
Schritt 4A: Claude Code installieren
npm install -g @anthropic-ai/claude-code
Anthropic empfiehlt, bei diesem Befehl kein sudo zu verwenden.
Danach startest du Claude Code mit:
claude
Beim ersten Start wirst du aufgefordert, dich mit deinem Claude-Konto oder über die Anthropic Console anzumelden. Claude Code kann je nach Konto über einen Claude Pro-, Max- oder API-Zugang verwendet werden.
Möglichkeit B: ChatGPT beziehungsweise Codex
Für ChatGPT verwendest du nicht einfach den normalen Chat, sondern Codex. Codex kann Projektdateien lesen, verändern und Befehle ausführen.
Du kannst HyperFrames beispielsweise in einer Codex-Arbeitsumgebung oder über eine lokale Codex-Installation verwenden. Entscheidend ist, dass Codex Zugriff auf den Projektordner und das Terminal hat.
Das Prinzip ist danach identisch:
- Projektordner öffnen
- HyperFrames-Skills installieren
- Video beschreiben
- Vorschau starten
- Änderungen anfordern
- MP4 rendern
Codex ist die Coding-Umgebung von OpenAI für Aufgaben wie das Verstehen, Erstellen, Verändern und Prüfen von Codeprojekten.
Teil 3: HyperFrames-Skills installieren
Schritt 5: Arbeitsordner erstellen
Erstelle zunächst einen Ordner, in dem du deine HyperFrames-Projekte speichern möchtest:
mkdir hyperframes-videos
cd hyperframes-videos
Schritt 6: HyperFrames-Skills installieren
Führe folgenden Befehl aus:
npx skills add heygen-com/hyperframes
Danach erscheint eine Auswahl der verfügbaren Skills.
Für den Einstieg solltest du mindestens diese Skills installieren:
/hyperframes
/hyperframes-core
/hyperframes-animation
/hyperframes-creative
/hyperframes-cli
/media-use
/hyperframes-registry
/general-video
Diese Skills erklären dem KI-Agenten, wie ein korrektes HyperFrames-Projekt aufgebaut wird. Sie enthalten Regeln für HTML-Kompositionen, Timings, Animationen, Untertitel, Voiceovers, Medien und Rendering.
Möchtest du sämtliche verfügbaren HyperFrames-Skills installieren, verwendest du:
npx skills add heygen-com/hyperframes --all
Das ist für den Einstieg bequem, installiert aber auch Workflows, die du möglicherweise noch nicht benötigst.
Teil 4: Erstes Projekt erstellen
Schritt 7: HyperFrames-Projekt anlegen
Erstelle dein erstes Video-Projekt:
npx hyperframes init mein-erstes-video
Wechsle danach in den Projektordner:
cd mein-erstes-video
Der Einrichtungsassistent fragt dich möglicherweise nach einem Beispiel, einem Stil oder vorhandenen Medien.
HyperFrames erstellt dabei unter anderem folgende Struktur:
mein-erstes-video/
├── meta.json
├── index.html
├── compositions/
└── assets/
Die wichtigsten Bestandteile sind:
index.html: Hauptkomposition des Videoscompositions/: einzelne Szenen oder Unterkompositionenassets/: Bilder, Videos, Musik und Audiodateienmeta.json: Projektdaten
Diese Struktur wird vom HyperFrames-CLI automatisch angelegt.
Schritt 8: KI-Agent im Projekt starten
Mit Claude Code
Stelle sicher, dass du dich im Projektordner befindest:
cd mein-erstes-video
Starte Claude Code:
claude
Claude Code sieht nun die Dateien des Projekts und kann sie bearbeiten.
Mit Codex
Öffne den Ordner mein-erstes-video als Codex-Projekt beziehungsweise als Arbeitsverzeichnis.
Wichtig ist, dass Codex:
- die Dateien lesen kann
- die Dateien verändern darf
- Terminalbefehle ausführen kann
Teil 5: Video durch einen Prompt erstellen
Schritt 9: Video zunächst beschreiben
Starte bei Claude Code mit dem HyperFrames-Skill:
/hyperframes
Danach gibst du deinen Auftrag ein.
Beispiel:
Erstelle mit HyperFrames ein 15 Sekunden langes Video im Format 9:16.
Thema:
Drei Gründe, warum Unternehmen KI nicht erfolgreich einführen.
Ziel:
Das Video soll als LinkedIn- und Instagram-Kurzvideo funktionieren.
Aufbau:
0–2 Sekunden:
Grosse Headline: „Warum KI-Projekte scheitern“
2–6 Sekunden:
Grund 1: Keine klare Verantwortung
6–10 Sekunden:
Grund 2: Zu viele Tools, kein Prozess
10–13 Sekunden:
Grund 3: Keine praktische Einführung
13–15 Sekunden:
Abschluss: „KI braucht keinen Hype. KI braucht einen Plan.“
Design:
Dunkelblauer Hintergrund.
Türkise Kontrastfarbe #40e0d0.
Klare moderne Typografie.
Hochwertige, reduzierte Motion-Graphics.
Keine verspielten Animationen.
Erstelle zuerst DESIGN.md, SCRIPT.md und STORYBOARD.md.
Erstelle danach die HyperFrames-Komposition.
Prüfe das Projekt mit dem HyperFrames-Linter.
Je konkreter dein Auftrag ist, desto gezielter kann der Agent das Video umsetzen.
Schritt 10: Medien hinzufügen
Bilder, Logos, Videos und Musik legst du im Ordner assets ab.
Beispiel:
assets/
├── logo.png
├── portrait.jpg
├── background.mp4
└── music.mp3
Danach kannst du dem Agenten schreiben:
Verwende assets/logo.png am Ende des Videos.
Nutze assets/background.mp4 als Hintergrund der zweiten Szene.
Die Hintergrundmusik liegt unter assets/music.mp3.
Sie soll dezent eingesetzt werden.
Verwende möglichst eindeutige Dateinamen. Dadurch erkennt der Agent die Medien leichter.
Teil 6: Vorschau starten
Schritt 11: HyperFrames-Vorschau öffnen
Öffne bei Bedarf ein zweites Terminalfenster und wechsle dort in den Projektordner:
cd hyperframes-videos/mein-erstes-video
Starte die Vorschau:
npx hyperframes preview
HyperFrames startet nun das HyperFrames Studio im Browser. Änderungen an der index.html oder den Kompositionen werden automatisch neu geladen.
Du hast jetzt zwei Arbeitsbereiche:
- Im Browser siehst du das Video.
- In Claude Code oder Codex verlangst du Änderungen.
Teil 7: Video mit Sprache bearbeiten
Schritt 12: Änderungen wie bei einem Videoeditor anfordern
Du musst nicht selbst im Code arbeiten. Beschreibe die gewünschte Änderung.
Beispiele:
Mache die Hauptüberschrift deutlich grösser.
Die erste Szene ist zu langsam. Verkürze sie um eine Sekunde.
Lasse die drei Begriffe nacheinander von unten erscheinen.
Reduziere die Animationen. Das Video soll hochwertiger und ruhiger wirken.
Füge bei Sekunde 8 ein animiertes Diagramm ein.
Das Logo ist zu klein. Vergrössere es um 40 Prozent.
Prüfe, ob Texte oder Elemente über den sichtbaren Bereich hinausragen.
Starte die Vorschau und behebe alle sichtbaren Layoutfehler.
Der Agent verändert daraufhin den HTML-, CSS- oder GSAP-Code.
Teil 8: Voiceover und Untertitel
Schritt 13: Sprechertext erstellen
Du kannst dem Agenten schreiben:
Erstelle einen natürlichen deutschen Sprechertext für dieses Video.
Der Text soll maximal 40 Wörter haben.
Kurze Sätze.
Direkte Ansprache.
Keine Werbefloskeln.
Speichere den finalen Text in SCRIPT.md.
Schritt 14: Voiceover erzeugen
HyperFrames verfügt über Workflows für Text-to-Speech, Transkription und Medienverarbeitung. Die konkreten Möglichkeiten hängen von den installierten Skills und deinen eingerichteten API-Zugängen ab.
Ein möglicher Auftrag lautet:
Erstelle aus dem finalen Sprechertext ein deutsches Voiceover.
Speichere die Audiodatei im assets-Ordner.
Passe die Länge der Szenen an das Voiceover an.
Erstelle synchronisierte Untertitel.
Falls kein TTS-Anbieter eingerichtet ist, kannst du die Sprachdatei beispielsweise extern erzeugen und anschliessend in den assets-Ordner legen.
Danach schreibst du:
Nutze assets/voiceover.mp3 als Hauptton.
Erstelle daraus präzise synchronisierte Untertitel.
Wichtige Wörter sollen türkis hervorgehoben werden.
Teil 9: Fehler prüfen
Schritt 15: Projekt validieren
Bevor du das Video renderst, sollte der Agent das Projekt prüfen.
Prompt:
Prüfe das gesamte HyperFrames-Projekt.
Führe den Linter aus.
Behebe alle Fehler.
Prüfe insbesondere:
- falsche data-Attribute
- fehlende Clip-Klassen
- überlappende Tracks
- nicht registrierte GSAP-Timelines
- Elemente ausserhalb des Bildbereichs
- falsche Video- oder Audiodauern
- Endlosschleifen
- fehlende Assets
Rendere erst, wenn keine Fehler mehr vorhanden sind.
Der Agent kann dafür die HyperFrames-CLI-Befehle verwenden.
Teil 10: Video rendern
Schritt 16: MP4-Datei erzeugen
Du kannst den Renderbefehl selbst ausführen:
npx hyperframes render --output output.mp4
Oder du schreibst dem Agenten:
Rendere die finale Version als output.mp4.
HyperFrames erfasst danach die einzelnen Frames und codiert sie mit FFmpeg als MP4-Datei.
Nach erfolgreichem Rendering liegt die Datei im Projektordner:
mein-erstes-video/output.mp4
Teil 11: Verschiedene Formate erstellen
Hochformat 9:16
Erstelle das Video im Format 1080 × 1920 Pixel.
Geeignet für:
- Instagram Reels
- TikTok
- YouTube Shorts
- vertikale LinkedIn-Videos
Querformat 16:9
Erstelle das Video im Format 1920 × 1080 Pixel.
Geeignet für:
- YouTube
- Präsentationen
- Webseiten
- klassische LinkedIn-Videos
Quadrat 1:1
Erstelle das Video im Format 1080 × 1080 Pixel.
Geeignet für klassische Social-Media-Feeds.
Teil 12: Beste Arbeitsweise für Nicht-Entwickler
Verwende für jedes Video diese Reihenfolge:
Phase 1: Idee
Entwickle aus meiner Idee ein klares Videokonzept.
Erstelle noch keinen Code.
Phase 2: Gestaltung
Erstelle eine DESIGN.md mit Farben, Typografie, Abständen und Animationsstil.
Phase 3: Text
Erstelle SCRIPT.md mit allen gesprochenen und eingeblendeten Texten.
Phase 4: Szenen
Erstelle STORYBOARD.md mit Szenen, Dauer, Text, Bild und Animation.
Phase 5: Umsetzung
Setze das freigegebene Storyboard als HyperFrames-Video um.
Phase 6: Kontrolle
Starte die Vorschau und prüfe jede Szene auf Layout-, Timing- und Lesbarkeitsfehler.
Phase 7: Rendering
Rendere die finale Version als MP4.
Diese Vorgehensweise verhindert, dass der Agent zu früh ein komplettes Video erstellt, obwohl Stil, Text oder Aufbau noch nicht stimmen.
Kompletter Masterprompt
Diesen Prompt kannst du als Vorlage verwenden:
Nutze die installierten HyperFrames-Skills und erstelle ein professionelles Video.
PROJEKT
Thema: [Thema]
Zielgruppe: [Zielgruppe]
Ziel des Videos: [Ziel]
Plattform: [LinkedIn, YouTube, Instagram etc.]
Format: [9:16, 16:9 oder 1:1]
Länge: [Sekunden]
INHALT
Kernaussage:
[Kernaussage]
Gewünschter Aufbau:
[Aufbau]
Call-to-Action:
[CTA]
DESIGN
Stimmung:
[modern, technisch, hochwertig, emotional etc.]
Hintergrund:
[dunkel oder hell]
Hauptfarbe:
[Hex-Code]
Kontrastfarbe:
[Hex-Code]
Schriftstil:
[Beschreibung]
Animationsstil:
[ruhig, dynamisch, schnell, reduziert etc.]
MEDIEN
Verfügbare Dateien befinden sich im assets-Ordner.
Prüfe selbstständig, welche Dateien verwendbar sind.
VORGEHEN
1. Analysiere den Auftrag.
2. Erstelle DESIGN.md.
3. Erstelle SCRIPT.md.
4. Erstelle STORYBOARD.md.
5. Erstelle die HyperFrames-Komposition.
6. Starte die Vorschau.
7. Prüfe alle Szenen.
8. Führe den HyperFrames-Linter aus.
9. Behebe alle Fehler.
10. Rendere die finale Datei als output.mp4.
WICHTIG
- Verwende korrekte HyperFrames-Datenattribute.
- Registriere alle GSAP-Timelines korrekt.
- Verwende keine unendlichen Animationen.
- Achte darauf, dass keine Texte abgeschnitten werden.
- Das Video muss deterministisch renderbar sein.
- Verwende keine Platzhaltermedien.
- Frage nur nach, wenn eine entscheidende Information fehlt.
Häufige Probleme
„node: command not found“
Node.js ist nicht installiert oder wurde nach der Installation noch nicht korrekt erkannt.
Prüfe:
node --version
„ffmpeg: command not found“
FFmpeg fehlt.
Auf dem Mac:
brew install ffmpeg
Die Vorschau bleibt leer
Bitte den Agenten:
Prüfe, ob die Hauptkomposition direkt im Body liegt und eine gültige data-composition-id besitzt.
Prüfe ausserdem, ob alle Timelines korrekt unter window.__timelines registriert sind.
Das Video läuft in der Vorschau, aber nicht beim Rendern
Häufige Ursachen sind:
- Endlosschleifen
- zeitabhängige Zufallswerte
- nicht registrierte Timelines
- asynchron erstellte Animationen
- fehlende Dateien
- falsche Pfade
- Audio- oder Videoelemente, die manuell gestartet werden
Bitte den Agenten:
Prüfe das Projekt auf nicht deterministisches Verhalten und auf Verstösse gegen die HyperFrames-Regeln.
Der Agent verändert zu viel
Verwende präzise Anweisungen:
Ändere ausschliesslich die Schriftgrösse der Hauptüberschrift.
Verändere weder Timing noch Farben noch andere Szenen.
Der Agent fragt ständig nach Bestätigungen
Coding-Agenten verlangen bei Dateiänderungen oder Terminalbefehlen teilweise eine Freigabe.
Du kannst zusammengehörige Änderungen in einem Auftrag bündeln:
Du darfst alle Dateien innerhalb dieses Projektordners bearbeiten.
Führe Vorschau, Linter und Rendering selbstständig aus.
Installiere keine zusätzlichen Pakete, ohne mich vorher zu informieren.
Gib einem KI-Agenten niemals unnötig uneingeschränkten Zugriff auf dein gesamtes System. Arbeite immer in einem klar abgegrenzten Projektordner.
Empfohlener Start für dein erstes Video
Beginne nicht sofort mit einem komplexen 60-Sekunden-Video.
Erstelle zuerst:
- 10 bis 15 Sekunden
- drei Szenen
- nur Text und einfache Formen
- keine externen APIs
- keine komplizierten 3D-Effekte
- zunächst ohne Voiceover
Sobald Vorschau und Rendering funktionieren, kannst du schrittweise Bilder, Videos, Musik, Sprecherstimme, Untertitel und komplexere Animationen hinzufügen.