Claude für Bewegungsgrafiken: Prompt-Muster für animierte HTML-Visuals, die Sie als Video aufnehmen können

Ein Reddit-Nutzer auf r/ClaudeAI verwendet Claude, um Bewegungsgrafiken und animierte Diagramme direkt zu erstellen – keine Prompts für andere Tools, sondern Claude baut die Visualisierungen als HTML-Widgets, die dann mit Playwright + ffmpeg als MP4 aufgenommen werden. Der Nutzer teilt ein Prompt-Muster, das konsistent funktioniert: Eine Geschichte mit einem Bruchpunkt beschreiben.

Was funktioniert

Der Schlüssel ist, den Nutzer etwas kaputt machen zu lassen. Beispiele, die gute Ergebnisse lieferten:

• Zeige fünf Gläser, die sich mit Risiko füllen. Das letzte läuft über und zerspringt.
• Zeige ein Gummiband, das sich bei jedem Klick dehnt, bis es reißt.

Der Nutzer berichtet, dass die Anweisung an Claude, den Nutzer etwas kaputt machen zu lassen, die Ausgabe tatsächlich interessant macht.

Wonach sie suchen

Der Nutzer bittet die Community gezielt um Prompts, die Folgendes hervorbringen:

• Animierte Diagramme oder Datenvisualisierungen, die sich tatsächlich bewegen
• Interaktive Erklärungen, bei denen der Nutzer etwas steuert
• Alles, was erfolgreich als Video aus Claudes Ausgabe aufgenommen wurde
• Prompt-Strukturen, die konsistent gute Visualisierungen beim ersten Versuch liefern, nicht erst beim fünften

Im ursprünglichen Beitrag wurden keine weiteren spezifischen Prompts aus der Community aufgenommen – der Thread sammelt noch Antworten.

Praktische Erkenntnis

Wenn Sie animierte HTML-Widgets mit Claude für die spätere Aufnahme als Video erstellen, strukturieren Sie Ihren Prompt um eine Erzählung mit einem Spannungs- und Entspannungsbogen. Der Bruchpunkt löst eine visuelle Veränderung aus (Überlaufen, Reißen, Zerspringen), die die Animation fesselnd macht. Kombinieren Sie dies mit Playwright für Screenshots/Aufnahmen und ffmpeg für die Kodierung in MP4.