KI Use Cases #3

Launch-Video aus deiner Website – mit Claude Code statt After Effects

Wer ein Produkt launcht, kennt das Problem: Das Schnitt-Tool will gelernt werden, eine Agentur kostet, und am Ende wartet man Tage auf die erste Schnittfassung. Es gibt inzwischen einen Weg, der für viele Teams überraschend gut funktioniert – und der nichts mit klassischen Videoschnitt-Programmen zu tun hat.

Was ist HyperFrames?

HyperFrames ist ein quelloffenes Rendering-Framework von HeyGen unter der Apache-2.0-Lizenz. Die Idee dahinter ist ungewöhnlich einfach: Ein Video ist hier kein Timeline-Projekt in einer proprietären Software, sondern eine ganz normale HTML-Datei. Szenen, Texte, Bilder, Timing – alles steckt in HTML-Elementen und data--Attributen. Aus dieser HTML-Komposition rendert HyperFrames lokal ein fertiges MP4, über Headless Chrome und FFmpeg. Der Code liegt offen auf GitHub.

Vergleichbare Frameworks gibt es bereits – das bekannteste ist Remotion. Der Unterschied: Remotion setzt auf React-Komponenten, HyperFrames bewusst auf schlichtes HTML. Und genau das ist der Clou, wenn eine KI im Spiel ist.

Der Ablauf: aus einer Website-URL wird Schritt für Schritt ein fertiges Video.

So funktioniert’s: ein Satz genügt

Der bequemste Einstieg ist die mitgelieferte „website-to-video”-Skill. Du installierst sie einmal in deinem Coding-Agent (Claude Code, Cursor, Codex oder Gemini CLI) und sagst dann sinngemäß: „Bau ein Launch-Video aus conrat-ai.de.” Den Rest übernimmt der Agent in klar getrennten Schritten:

Er ruft die Website auf und zieht sich Screenshots, Logos und Assets.
Er schreibt ein Storyboard – Szene für Szene, mit Text und Bildidee.
Er baut jede Szene als HTML-Komposition im Stil deiner Marke.
Er rendert das Ganze lokal zu einem MP4, das du teilen kannst.

Du musst dafür keine einzige Zeile Code selbst schreiben. Wichtig ist vor allem, dem Agent gute Vorlagen mitzugeben – etwa eine Design-Vorgabe mit deinen Farben und Schriften. HyperFrames hat dafür ein eigenes Format namens frame.md, das eine klassische Brand-Guideline in eine fürs Video passende Form übersetzt.

Warum ausgerechnet HTML?

Der eigentliche Grund, warum das so gut klappt, liegt nicht im Tool, sondern im Modell: Sprachmodelle schreiben HTML, CSS und JavaScript heute schlicht besser als jedes proprietäre Timeline-Format. HTML ist quasi ihre Muttersprache. Ein Agent kann darin nicht nur Inhalte korrekt anordnen, sondern auch visuelle Gestaltung ausdrücken – und das Ergebnis ist deterministisch: Gleicher Input, gleiches Video.

Aus einer HTML-Szene mit Timing-Attributen wird ein gerendertes Bild im Video.

Der DSGVO-Blick: gerendert wird bei dir

Für Unternehmen im deutschen Mittelstand ist ein Detail besonders interessant: Das Rendern läuft lokal auf deiner Maschine. Headless Chrome und FFmpeg erzeugen das MP4 direkt auf deinem Rechner – das fertige Video wird nicht auf fremde Server hochgeladen. Das ist ein echter Vorteil gegenüber vielen Cloud-Videogeneratoren, bei denen deine Inhalte erst einmal das Haus verlassen.

Lokales Rendern im Vergleich zu typischen Cloud-Tools.

Ehrlich gesagt – das Kleingedruckte

„Kostenlos” gilt fürs Tool, nicht für alles drumherum. HyperFrames selbst ist Open Source und ohne Render-Gebühren. Du brauchst aber einen Coding-Agent (z. B. Claude Code – das läuft über Abo oder API-Kosten) und, wenn du eine Sprecherstimme willst, optional einen kostenpflichtigen TTS-Anbieter. Eine lokale Stimm-Variante ist gratis, klingt aber schlichter.

Der Capture-Schritt kann in die Cloud telefonieren. Für bessere Beschreibungen der eingesammelten Assets lässt sich optional ein Gemini- oder OpenRouter-Key einbinden – das ist ein Cloud-Call. Bei einer öffentlichen Marketing-Seite ist das unkritisch; bei sensiblen internen Inhalten solltest du es bewusst weglassen.

Schritt für Schritt: dein erstes Video

So baust du das Ganze konkret nach. Alle Befehle kannst du direkt ins Terminal bzw. in Claude Code kopieren.

Voraussetzungen prüfen

Du brauchst Node.js 22+ und FFmpeg. Beides kurz checken:

node --version   # muss v22.x oder höher sein
ffmpeg -version  # muss eine Version ausgeben

Fehlt etwas: macOS brew install node ffmpeg · Windows winget install OpenJS.NodeJS Gyan.FFmpeg · Linux sudo apt install nodejs ffmpeg

HyperFrames-Skill in deinen Agent installieren

Ein Befehl lädt die HyperFrames-Skills in Claude Code (funktioniert genauso mit Cursor, Codex oder Gemini CLI):

npx skills add heygen-com/hyperframes

Projektordner anlegen

Hält dein Video sauber an einem Ort:

npx hyperframes init mein-launch-video
cd mein-launch-video

Den Agent das Video bauen lassen

Jetzt in Claude Code (Modell: Opus 4.8) diesen Prompt schicken – URL einfach durch deine ersetzen:

# In Claude Code eingeben:
Nutze die /website-to-video Skill. Bau ein ca. 25-sekündiges
Launch-Video aus https://conrat-ai.de. Stil: klar, hochwertig,
ruhige Animationen, Marke im Vordergrund.

Der Agent erledigt den Rest selbst: Er ruft die Seite auf, sammelt Screenshots und Logos ein, schreibt ein Storyboard und baut daraus Szene für Szene die HTML-Komposition.

Im Browser ansehen und nachschärfen

Live-Vorschau mit Auto-Reload starten:

npx hyperframes preview

Gefällt eine Szene noch nicht, sag es dem Agent in normaler Sprache – z. B. „Mach Szene 2 ruhiger und nutze das Logo als Vollbild-Hintergrund.” Fertige Bausteine ziehst du bei Bedarf aus dem Katalog:

npx hyperframes add data-chart   # animiertes Diagramm

Lokal zu MP4 rendern

Wenn alles passt, einmal rendern – das Video entsteht direkt auf deinem Rechner:

npx hyperframes render

Heraus kommt eine fertige MP4-Datei, die du teilen oder in CapCut weiterschneiden kannst. Eine Sprecherstimme bekommst du optional über ein kostenloses lokales TTS-Modell oder einen bezahlten Anbieter wie ElevenLabs – beides steuerst du über denselben Agent.

KI im Unternehmen, ohne Bastelei

Wer das nicht für jedes Tool einzeln einrichten will, sondern KI-Werkzeuge gebündelt und datenschutzkonform an einem Ort braucht, schaut sich ConRat AI an. Lernen, anwenden, automatisieren, alles in einer Plattform.

ConRat-AI 30 Tage kostenlos testen