Mit Claude Code und Remotion Demo-Videos ohne Designkenntnisse erstellen

Den Demo-Video-Flaschenhals durchbrechen

Ein Entwickler hatte ein funktionierendes Produkt startbereit, stand aber vor einem häufigen Hindernis: keine Demo-Videos, Illustrationen oder Motion Graphics. Bei der Kontaktaufnahme mit Motion-Designern erhielt er Angebote von 300–1.000 US-Dollar pro Video mit Zeitplänen von 6–10 Wochen und Anfragen nach Figma-Dateien und Markenrichtlinien, die nicht existierten. Dies führte zu monatelangem Aufschub.

Die technische Lösung

An einem Wochenende setzte der Entwickler einen völlig anderen Ansatz um:

• Remotion: React-basiertes Videogenerierungs-Framework, bei dem „Videos als Code“ bedeutet, kein Timeline-Scrubbing oder Exportmenüs – nur JSX und Mathematik.
• Claude Code: Wurde verwendet, um Videokomponenten zu schreiben und zu iterieren, mit spezifischen Fähigkeiten für Remotion-Übergänge und Frontend-Design.
• Claude Skills: Insbesondere remotion-transitions für Szenenschnitte und frontend-design für Illustrationen.

Workflow und Ergebnisse

Der Entwickler folgte diesem Prozess:

• Feature-Illustrationen: Claude Code nutzte die Illustration-Fähigkeit, um SVG-basierte Produktvisualisierungen direkt in Landingpage-Komponenten zu generieren, was die Arbeit, die ein Designer Tage gekostet hätte, auf wenige Stunden reduzierte.
• Landingpage-Neugestaltung: Platzhalter-Screenshots wurden in tatsächliche, animierte UI-Bereiche mit Markenidentität umgewandelt, unter Verwendung desselben Workflows.
• Reel-Erstellung: Jedes Reel in Remotion ist eine React-Komponente. Claude Code erstellt das Grundgerüst der Szene, der Entwickler passt Timing und Text an, dann wird exportiert. Das erste Reel dauerte ~3 Stunden, das zweite ~90 Minuten, und jetzt sind sie unter einer Stunde pro Reel.

Die Ergebnisse waren unmittelbar: Tausende Aufrufe der Reels und DMs mit der Frage, ob das Produkt live sei. Der Entwickler betont, dass er kein Designer oder Videoeditor ist und vor einem Monat kaum wusste, was Remotion ist, aber die Tools ermöglichten es ihm, seinen Codebase zu lesen, die visuelle Sprache seines Produkts zu verstehen und Szenen-für-Szenen-Videokomponenten mit sofortiger Vorschau zu generieren.

Gesamtproduktionskosten: 0 US-Dollar (abgesehen vom Claude Code-Abonnement). Der Entwickler betont, dass er nichts gegen Motion-Designer hat, aber diese Iterationsgeschwindigkeit mit einem Agentur-Workflow nicht erreichen kann.