"Claude Code Videoproduktion: Der 3-Tool-Stack, den ich verwende"

"## Claude Code Videoproduktion: Der 3-Tool-Stack, den ich verwende\n\nIch hätte Jack Roberts' Walkthrough fast zweimal weggeklickt.\n\nDas Thumbnail sah aus wie jedes andere „Ich habe meine Videopipeline mit KI automatisiert"-Video, das meinen Feed überschwemmt hat, seit HeyGen HyperFrames am 17. April 2026 als Open Source veröffentlicht hat. Ich war drei Minuten drin, skeptisch, als er etwas tat, das ich in diesem Jahr noch in keiner Videodemo gesehen hatte — er hörte auf, Claude Code als einzelnes Werkzeug zu behandeln, und begann es als Orchestrierungsschicht für ein gesamtes Produktionssystem zu nutzen. Design an einem Ort. Animation an einem anderen. Audio an einem dritten. Alles gesteuert durch Skills, die er einmal schrieb und für immer wiederverwendete.\n\nDieser Perspektivwechsel ließ mich aufhören zu scrollen, ein neues Terminalfenster öffnen und meine eigene Version davon bauen. Und darum geht es in diesem Beitrag — keine Tool-Rezension, kein atemloser Launch-Day-Rückblick, sondern der tatsächliche Drei-Tool-Claude-Code-Videoproduktions-Stack, den ich jetzt betreibe, was jede Schicht gut kann, wo jede Schicht leise versagt, und die unbequemen Teile, über die Jack hinwegging und die ich auf meinem eigenen Rechner lernen musste.\n\n## Warum „ein Tool macht alles" scheitert\n\nAlle sechs Monate verspricht ein neues Produkt einen einzelnen Prompt, der eine Rohaufnahme in ein fertiges Video verwandelt. Manche davon funktionieren sogar — für die Demo. Dann versucht man es mit dem eigenen Material, mit der eigenen Marke, und das Ergebnis sieht aus, als wäre es von jemandem gemacht worden, der einen noch nie getroffen hat.\n\nDer Grund ist langweilig und strukturell. Videoproduktion ist nicht ein einziger Job. Es sind mindestens drei Jobs, die zufällig eine Timeline teilen: visuelles Systemdesign (wie deine Marke in Bewegung aussieht), Komposition und Animation (was Sekunde für Sekunde auf dem Bildschirm passiert) und Audio-Konditionierung (wie die Sprachspur klingt, wenn der Zuschauer auf Play drückt). Jeder dieser Jobs hat seine eigenen Werkzeuge, seine eigenen Fehlermodi und seine eigene Qualitätsgrenze. Sie in einen einzigen Prompt zu pressen ist der Grund, warum so viele KI-bearbeiteten Videos auf dieselbe spezifische Art billig wirken.\n\nJack's Framing war das erste, das ich gesehen hatte, das jeden Job als erstklassigen Bürger behandelte. Claude Code Design System für die visuelle Sprache. HyperFrames für die Kompositions- und Animationsschicht. Auphonic für programmatische Audio-Aufbereitung. Claude Code selbst als Dirigent — nicht das Orchester, der Dirigent. Diese Unterscheidung ist wichtiger, als sie klingt, und es ist der mit Abstand größte Grund, warum meine Ausgabequalität stieg, als ich aufhörte zu versuchen, mich mit einem einzigen Prompt durch ein Video zu mogeln.\n\n## Schicht 1: Claude Code Design System — die Marke, die überallhin reist\n\nDie Idee eines „Design Systems" wird üblicherweise mit Web- und Produktarbeit assoziiert. Was Anthropic am 16. April 2026 mit dem Claude Design-Produkt verschiffte — neben der Veröffentlichung des Opus 4.7-Modells — war eine Design-System-Oberfläche, die sich auf natürliche Weise in animierte Grafiken und Multimedia erstreckt.\n\nDie Version, die ich verwende, lebt in Claude Code über die Claude Design Desktop-App. Hier ist der Workflow, den ich für jeden neuen Content-Cluster ausführe:\n\n1. Den Inhaltsstil in einfachem Englisch definieren. Lehrreich und minimalistisch. Skizzenartige Akzente wo hilfreich. Kein Stockfoto. Ein Bildschirm, ein Punkt, einfache Visualisierungen.\n2. Die Markenprimitive hochladen. Logo-Zeichen, Logo-Wortmarke, Icon-Set, zwei oder drei Referenz-Screenshots fertiger Stücke.\n3. Die Animationspräferenzen festlegen. Kurze Dauer pro Beat — fünf bis zwanzig Sekunden. Minimaler Text auf dem Bildschirm. Langsames Easing bei Einblendungen, schnelles Easing bei Ausblendungen.\n4. Das System als ZIP oder PDF exportieren. Das exportierte System ist eine portable Spezifikation, die ich einem anderen Tool — oder einem anderen Agenten — übergeben kann, damit es neue Assets rendert, die markenkonform bleiben.\n\nBeim ersten Test ließ ich Claude drei kurze Animationen generieren — eine Titelkarte, einen Mid-Roll-Callout und eine Endkarte — allein aus dem exportierten System. Alle drei kamen visuell kohärent zurück. Nicht identisch. Kohärent. Ohne ein gemeinsames Design System sehen KI-generierte Animationen aus, als wären sie von drei verschiedenen Personen an drei verschiedenen Tagen erstellt worden. Mit dem System sehen sie wie eine einzige Stimme aus.\n\nDas Design System, das man zu Beginn definiert, wird sich nach dem ersten echten Projekt falsch anfühlen. Das ist in Ordnung. Das System ist eine lebendige Spezifikation, kein Vertrag. Jedes Mal, wenn ich ein Stück veröffentliche, das mir gefällt, gehe ich zurück und aktualisiere den Export vor dem nächsten Durchlauf. Nach etwa vier Projekten hört das System auf zu driften und beginnt zu beschleunigen.\n\nWenn du meinen Bericht über wie Claude Code Design-System-Workflows mit Figma automatisiert gelesen hast, ist dies dieselbe Philosophie, auf Bewegung ausgedehnt. Das Design System ist der Ort, wo deine Marke wiederverwendbar wird.\n\n## Schicht 2: HyperFrames — Video schreiben wie eine Webseite\n\nHyperFrames ist ein Open-Source-Videorenderingframework, das HeyGen am 17. April 2026 unter der Apache-2.0-Lizenz veröffentlicht hat. Das Versprechen: HTML, CSS und JavaScript schreiben. Video rendern. Gebaut für KI-Agenten.\n\nMan führt einen einzigen Befehl aus — npx skills add heygen-com/hyperframes — und die Claude Code-Instanz erhält drei neue Slash-Befehle: /hyperframes zum Verfassen von Kompositionen, /hyperframes-cli für Befehlszeilenoperationen und /gsap für Animationshilfe.\n\nDas erste Mal, dass mir das wirklich einleuchtete, war bei einem Lower-Third-Namensschildtest. Ich promptete: „Füge ein Lower-Third-Tag hinzu, das 'Mejba Ahmed — Software Engineer' unten links liest, ausgerichtet an meiner Design-System-Typografie, von links eingeschoben bei 0,5 Sekunden, 4 Sekunden gehalten, ausgeschoben." Claude Code schrieb eine Komposition, die die Design-System-Token importierte, den Text mit dem richtigen Gewicht platzierte und eine GSAP-Timeline registrierte. Einen Render später hatte ich das Overlay. Gesamtzeit: etwa neunzig Sekunden.\n\nDas Framework verwendet ein Frame-Adapter-Muster — GSAP, Lottie, CSS oder Three.js. GSAP-Timelines müssen mit { paused: true } erstellt und auf window.__timelines registriert werden, damit der Renderer weiß, wann jedes Frame angezeigt wird. Diese Einschränkung macht die Ausgabe deterministisch. Jeder Render ist pixelidentisch.\n\nVorbehalte:\n- Auflösungsgrenze. Renders sind auf 1080p begrenzt. 4K wird noch nicht unterstützt.\n- Lokale Ausführung. Der eigene Rechner übernimmt die Renderarbeit. Mit der eigenen Hardware testen.\n- Audio ist standardmäßig der schwache Punkt. Für eine gute Sprachspur braucht man die dritte Schicht.\n\nFür den vollständigen technischen Einblick in die Videopipeline geht mein früherer Beitrag über den Aufbau eines Videobearbeitungs-Workflows mit Claude Code tiefer auf die Remotion- und Whisper-Seite ein.\n\n## Schicht 3: Auphonic — der Audio-Fix, den niemand sieht, aber jeder hört\n\nWenn man nur eine Sache aus diesem Beitrag mitnimmt: Zuschauer vergeben mittelmäßige Bilder. Sie vergeben kein schlechtes Audio. Ein Video mit sauberem Audio und amateurhaften Bildern fühlt sich wie ein schnörkelloser Indie-Dokumentarfilm an. Ein Video mit großartigen Bildern und schlechtem Audio fühlt sich unprofessionell an, Punkt.\n\nAuphonic macht automatische Audio-Nachbearbeitung: Lautstärke-Normalisierung, Pegelung, Rauschreduzierung, Filterung, Spracherkennung. Ihre REST-API hat vollständige OpenAPI 3.0.3-Abdeckung. Ich habe sie in Claude Code eingebunden, sodass nachdem HyperFrames das gerenderte MP4 produziert, ein zweiter Skill das Audio mit einem gespeicherten Preset durch Auphonic leitet.\n\nMein Preset: Lautstärkeziel von -16 LUFS für Web-Lieferung, moderate Rauschreduzierung, leichter Kompressor. Gespeichert als „voiceover-web-16" — das API-Update von 2026 erlaubt es, Presets nach Namen statt nach UUID zu referenzieren, was den Skill portabel macht.\n\nDie Simple API: ein einziger Multipart-HTTP-Request — Datei hochladen, Metadaten setzen, Preset referenzieren, Produktion starten. Das ist, was ich verwende.\n\nDas Ergebnis: Meine Sprachspur klingt in jedem Video, das ich veröffentliche, konsistent. Nicht „studio-gemischt" — aber konsistent genug, dass ein Zuschauer nie durch Audioqualitätsprobleme aus dem Inhalt gerissen wird.\n\n## Die Skills sind der eigentliche Burggraben\n\nDie Werkzeuge sind Commodities. HyperFrames ist Open Source. Claude Design ist für jeden mit einem Claude-Abonnement verfügbar. Auphonic hat eine öffentliche API. Keines davon ist schwer zu installieren.\n\nDer Hebel ist der Skill, den man einmal schreibt und für immer benutzt.\n\nAls ich meine erste Pipeline veröffentlichte, verbrachte ich vier Stunden daran. Das zweite Video dauerte zwei Stunden. Das dritte dauerte vierzig Minuten. Das fünfte dauerte etwa fünfzehn Minuten. Jeden Schritt, den ich einmal richtig gemacht hatte, verpackte ich in einen Claude Code Skill.\n\nMeine aktuelle Videoproduktions-Skill-Bibliothek:\n\n- brand-motion-system — lädt das exportierte Design System und wendet es auf jede HyperFrames-Komposition an\n- lower-third-standard — erstellt das Lower-Third-Overlay, das ich in 80 % meiner Clips verwende\n- caption-sync-srt — nimmt eine SRT-Datei und rendert markenkonforme Untertitel\n- audio-cleanup-voiceover — leitet Audio durch Auphonic mit dem „voiceover-web-16"-Preset\n- thumbnail-from-video — extrahiert einen Frame und generiert Thumbnail-Varianten\n\nJeder Skill ist vielleicht vierzig Zeilen Anweisung plus Beispiele. Das ist die eigentliche Ausgabe dieses Stacks — nicht die einzelnen Videos, sondern das sich summierende Vermögen der Skills selbst.\n\nWenn du meinen Beitrag über warum Claude Code Skills der eigentliche Hebelpunkt sind gelesen hast, ist dies die Produktionspipeline-Version dieses Arguments.\n\n## Was ich beim ersten Mal falsch gemacht habe\n\nIch habe zu groß angefangen. Mein erster Versuch war ein dreiminütiger Erklärer mit fünf animierten Segmenten. Es dauerte einen ganzen Nachmittag zum Debuggen. Zuerst einen fünfzehn Sekunden langen Clip veröffentlichen. Die vollständige Pipeline mit einem trivialen Asset zum Laufen bringen. Dann hochskalieren.\n\nIch habe HyperFrames überprompted. Die ersten Kompositionen, die ich anforderte, waren zu aufwändig. Die praktische Regel: ein Bildschirm, ein Punkt, eine primäre Animation.\n\nIch habe Opus 4.7 immer als das richtige Modell behandelt. Für die schwere kreative Arbeit des Schreibens einer neuen Komposition von Grund auf ist Opus 4.7 es wert. Für iterative Bearbeitungen ist ein leichteres Modell schneller und produziert identische Ausgaben.\n\nIch habe den Vorschauschritt übersprungen. HyperFrames wird mit npx hyperframes preview geliefert. Erst vorschauen. Dann rendern. Diese Gewohnheit hat mir Stunden gespart.\n\n## Der ehrliche Vergleich — was dieser Stack nicht kann\n\nDieser Stack ist hervorragend für: kurze Lehrvideos, Social Videos, Talking-Head-Overlays und Untertitel, Promo-Videos, Code-Walkthroughs, PDF-Animationen, kinetische Textstücke.\n\nDieser Stack ist kein guter Kandidat für: cinematografische Erzählarbeit, Musikvideos, 4K-Lieferung (HyperFrames ist auf 1080p begrenzt), material-intensive Projekte, bei denen Schnitte Urteilsentscheidungen über Energie und Rhythmus sind. Diese Jobs gehören in DaVinci Resolve oder Premiere.\n\n## Eine realistische erste Woche\n\nTag eins. HyperFrames mit npx skills add heygen-com/hyperframes installieren. npx hyperframes init ausführen. Die Standardkomposition in der Vorschau ansehen. Sie rendern. Einfach verifizieren, dass die Tools funktionieren.\n\nTag zwei. Ein minimales Design System aus Claude Design exportieren — nur das Logo, zwei Farben, ein Schriftartenpaar. Ein schlechtes Design System ist besser als kein Design System.\n\nTag drei. Ein Lower-Third-Overlay von Anfang bis Ende mit dem angewendeten Markensystem erstellen. Den Clip irgendwo veröffentlichen. Den vollständigen Kreislauf einmal schließen.\n\nTag vier. Auphonic einrichten, ein Preset speichern, den Audioschritt verbinden. Die Roh- und Reinversionen direkt nebeneinander vergleichen.\n\nTag fünf. Den gesamten Ablauf in einen Claude Code Skill einwickeln. Ihm einen Namen geben. Speichern. Bei einem neuen Clip verwenden.\n\n## Häufig gestellte Fragen\n\n### Muss ich programmieren können, um HyperFrames mit Claude Code zu verwenden?\nNein — Claude Code schreibt das HTML, CSS und JavaScript auf Basis von Prompts in natürlicher Sprache. Man braucht grundlegende Vertrautheit mit der Befehlszeile für npx hyperframes init, preview und render. Für den eigentlichen Animationscode übernimmt Claude Code.\n\n### Kann ich diesen Stack für 4K-Video-Lieferung verwenden?\nNoch nicht. HyperFrames ist derzeit auf 1080p begrenzt. In HyperFrames rendern und für 4K-Master in einem traditionellen NLE zusammensetzen.\n\n### Welches Claude-Modell sollte ich verwenden — Opus 4.7 oder Opus 4.6?\nOpus 4.7 für schwere kreative Arbeit beim Schreiben einer neuen Szene von Grund auf. Opus 4.6 für iterative Bearbeitungen — schneller und günstiger ohne Qualitätsverlust bei Präzisionsarbeiten.\n\n### Wie verhält sich Auphonic im Vergleich zur manuellen Audio-Bereinigung?\nAuphonic ersetzt das Sitzen in einer DAW und das Anwenden von Kompression, EQ und Lautstärkeziel auf jedes Video, das man veröffentlicht. Für Voice-Over-Arbeit für Web und Social produziert es jedes Mal konsistente Ausgaben.\n\n## Lass uns zusammenarbeiten\n\nMöchtest du KI-Systeme aufbauen, Workflows automatisieren oder deine technische Infrastruktur skalieren? Ich helfe gerne.\n\n* Fiverr (individuelle Entwicklungen & Integrationen): fiverr.com/s/EgxYmWD\n* Portfolio: mejba.me\n* Ramlit Limited (Enterprise-Lösungen): ramlit.com\n* ColorPark (Design & Branding): colorpark.io\n* xCyberSecurity (Sicherheitsdienste): xcybersecurity.io"