Creating Motion Graphics with Claude Code and HyperFrames

KI ist mittlerweile extrem gut darin geworden, Motion-Graphics zu bauen, also animierte Grafiken, wie man sie aus Werbespots, Erklärvideos oder auch Social-Media-Clips kennt. Vor allem das neue Modell von Anthropic, Claude 3.5, kann das besonders gut. Und ich will dir direkt mal ein Beispiel zeigen. Und zwar habe ich ganz beispielhaft eine neue Session hier bei Claude Code gestartet, habe Opus 3.5 ausgewählt auf dem extra hohen Modus und habe dann hier diesen Prompt eingegeben. Er soll quasi ein 15-sekündiges Motion-Graphics-Video machen, das zeigt, was für ein unglaublich guter Motion-Designer er ist, so als würde er sich damit auch irgendwo bewerben. Und dann hat er hier erstmal eine Weile geackert und am Ende kam dann folgendes Video raus. Als ich das zum ersten Mal gesehen habe, war ich ziemlich baff, denn das ist kein Video aus einem KI-Videomodell wie SeeDance. Claude hat das mit Code gebaut, das heißt, Claude schreibt im Prinzip eine Website im Hintergrund, auf der sich alles bewegt und ein Programm nimmt diese Website Bild für Bild auf und macht daraus ein Video. Und das hat einen großen Vorteil, denn jede Stelle in diesem Video ist Code, den wir gemeinsam mit Claude bearbeiten können. Wir können also jede Farbe, jedes Timing und jedes einzelne Bild so anpassen, wie wir es haben wollen. Und wir müssen dafür nicht, wie bei einem KI-Video, mit einem neuen Prompt hoffen, dass das nächste Ergebnis besser wird und dabei unglaublich viel Geld verschwenden. Und bei mir war das jetzt hier einfach nur ein richtig simpler Prompt, extrem kurz, und deshalb wollte ich in diesem Video mal testen, wie weit man mit Opus 3.5 bei echten Anwendungsfällen kommt, damit du auch weißt, wo du so etwas selbst einsetzen kannst und wie du Claude dafür überhaupt prompten musst. Und dafür werden wir uns auch drei Tests anschauen. Im ersten Test gebe ich Claude eine rohe Aufnahme von mir und Claude soll daraus einen fertigen Short schneiden für YouTube, Instagram, TikTok und so weiter. Wer Shorts kennt, der weiß, dass die voller Effekte und Animationen stecken, weil sie in den ersten Sekunden die Aufmerksamkeit des Zuschauers halten müssen. Da sieht man also ziemlich schnell und ziemlich gut, ob Opus das überhaupt hinbekommt. Im zweiten Test geht es um Werbespots und zwar für Produkte, die man nicht anfassen kann, also irgendwelche Dienstleistungen oder auch Softwareprodukte. Denn für ein Getränk oder einen Sneaker kannst du dir mit KI-Videomodellen inzwischen relativ leicht einen Werbespot generieren lassen, aber bei Softwareprodukten oder Dienstleistungen ist das nicht so einfach. Da gibt es nichts, was man so richtig in die Kamera halten kann und genau dafür eignen sich aber Motion-Graphics. Und im dritten Test schauen wir uns an, wie gut Claude Erklärvideos animiert, also Lerninhalte oder Schulungsvideos, bei denen ein Thema verständlich rüberkommen muss. Und vertrau mir, bleib bis zum Ende dran, denn das hat mich wirklich umgehauen. Falls dich also eine dieser drei Themen interessiert, bleib unbedingt dran, denn glaub mir, Claude wird dir eine Menge Zeit sparen können. Fangen wir also direkt mit dem ersten Test an. Ich möchte jetzt auch mehr mit Short-Form-Content anfangen und deswegen habe ich jetzt hier ein Video von mir aufgenommen, wo ich einfach nur in die Kamera spreche und ein bisschen was über Claude-Code erkläre. Und ich zeig dir mal kurz den Anfang dieser originalen Aufnahme. Wusstest du, dass Claude-Code zwei Gedächtnisse hat? Das erste ist die Claude-MD, das ist quasi die Bedienung... Genau, also ich rede hier wirklich einfach nur in die Kamera rein, ich verspreche mich auch teilweise, mache Pausen und so weiter. Und das Video soll Claude jetzt nehmen, er soll es dann erstmal schneiden, so dass die ganzen Versprecher und die Pausen raus sind und daraus soll er dann einen Short für YouTube, Instagram und Sonstiges erstellen. Und dafür habe ich jetzt hier in Claude-Code einfach einen neuen Ordner erstellt, in dem ich diese Videodatei hinterlegt habe und habe Claude dann lediglich diesen Prompt hier gegeben, der ist jetzt ein bisschen ausführlicher. Ich hinterlasse dir übrigens alle Prompts aus diesem Video in meinem Download-Hub in der Videobeschreibung. Dort kannst du das einfach kostenlos herunterladen und musst das jetzt nicht screenshotten oder irgendwie abtippen oder so. Ich würde dir empfehlen, den Prompt mal durchzulesen, denn der folgt den offiziellen Anthropic-Best-Practice-Guidelines, um Opus 3.5 zu prompten, denn diese Modelle solltest du nicht mehr so prompten, dass du ihnen haargenau erklärst, wie er was zu tun hat, sondern du sollst ihm nur das Ziel geben und die Referenzen, die er dann nutzen soll und natürlich so ein bisschen was zu deinem Geschmack, ne, wie soll der Look sein. Das ist ja individuell, das kann Claude sich jetzt nicht selbst erschließen, das musst du ihm auch erzählen. Ich sage ihm er soll also ein Short erstellen und soll dafür auch Hyper-Frames nutzen. Das ist quasi ein Open-Source-Framework, das KI-Agenten nutzen können, um Videos zu generieren und zu bearbeiten und so weiter. Und das ist einfach noch mal zusätzlich ein Nice-to-have, weil sie einige Funktionen mitbringen und auch Templates und Best Practices, die der KI-Agent dann nutzen kann, damit er sich nicht alles selbst erschließen muss. Sound und Musik muss Claude selbst erzeugen. Wie gesagt, er muss das Video erstmal bearbeiten, dass die ganzen Versprecher raus sind. Zum Look, ne, da erkläre ich so ein bisschen, was ich haben möchte, ich möchte verschiedene Kamera-Layouts haben. Zwischen den Layouts soll hart geschnitten werden, damit der Fokus einfach auf dem Inhalt ist und nicht auf den reinen Animationen. Die Grafiken müssen immer genau das zeigen, worüber ich gerade rede. Und er soll zu allem, was ich sag, auch das Internet recherchieren und sich dann passende Logos, Screenshots aus der Dokumentation oder von Webseiten holen, die er dann mit in diesen Short einbaut. Das heißt, er kann dann dazu beispielsweise bestimmte Webseiten-Texte auch direkt markieren oder bestimmte Dokumentationstexte. Dann sage ich ihm natürlich auch, was zu meiner Zielgruppe, damit er auch weiß, in was für einem Stil er die Animationen machen soll. Ich erkläre ihm wie die Untertitel aussehen sollen, ne, also überall, wo es darum geht, den individuellen Geschmack mit reinzubringen, solltest du ihm das natürlich erklären. Wie gesagt, lies dir den Prompt gerne mal genauer durch, wenn es dich interessiert. Das war der gesamte Prompt, den ich gegeben habe. Ich hatte hier Opus 3.5 lediglich auf hohem Aufwand, also nicht mehr auf Extra-High oder Maximum. Und dann hat er hier erstmal ganz viel gearbeitet und nach circa 15 bis 20 Minuten kam dann auch das Ergebnis. Er hat hier sogar jetzt Screenshots gemacht, ne, um seine Frames, die er generiert hat, zu überprüfen. Und hier unten sehen wir jetzt den Output. Wusstest du, dass Claude-Code zwei Gedächtnisse hat? Das erste ist die Claude.md, das ist quasi die Bedienungsanleitung für dein Projekt, also wie es aufgebaut ist und welche Regeln gelten. Das heißt, die schreibst du selbst oder Claude schaut sich dein Projekt an und macht dir einen Entwurf. Das zweite ist das Auto-Memory, da schreibt Claude selbst mit. Das heißt, Claude schaut sich an, wie du arbeitest, was dir wichtig ist, wie du ihn korrigiert hast und speichert sich diese Informationen. Die Claude.md-Datei kannst du dabei auch mit anderen Leuten teilen, aber das Auto-Memory nicht. Das läuft nur auf deinem PC. Und wenn du Claude-Code sagst, er soll sich etwas merken, dann landet das im Auto-Memory. Das heißt, wenn es für das ganze Team gelten soll, was er sich merken soll, oder du auch auf verschiedenen Rechnern dann mit dem Projekt arbeitest, dann solltest du diese Informationen in die Claude.md-Datei schreiben. Und das ist wohlgemerkt das erste Ergebnis nach unserem schon detaillierten Prompt, aber ich habe nichts nachgebessert. Und wenn das schon der erste Entwurf ist, dann kannst du dir vorstellen, wo man nach ein paar Runden Iteration landet. Denn ganz so happy war ich damit noch nicht, vor allem mit dem Ton, die Musik und die Soundeffekte hat Claude nämlich selbst erzeugt, also im Prinzip aus Code berechnet und das hört man auch, die klingen so ein bisschen künstlich. Deshalb habe ich mir hier bei Pixabay zum Beispiel lizenzfreie Musik und ein paar Soundeffekte heruntergeladen und Claude gesagt, dass er den Short damit neu bauen soll. Außerdem wollte ich dann noch so ein bisschen die Schrift anpassen und auch die Grafiken, auch wenn das schon ziemlich gut ist, aber ich wollte einfach noch mehr meinen Geschmack reinbringen und habe jetzt noch mal ein bisschen hin und her gepromptet. Und das wird bei dir natürlich auch so sein, denn Geschmäcker sind individuell und vielleicht willst du etwas ganz anderes haben und da musst du Claude dann aber auch einfach nur sagen, was dich stört, was du gerne hättest und in ein paar Runden hast du dann schon ein ziemlich gutes Ergebnis. Und hier ist jetzt die finale Version, die ich so auch auf Social-Media hochladen werde. Wusstest du, dass Claude-Code zwei Gedächtnisse hat? Das erste ist die Claude.md, das ist quasi die Bedienungsanleitung für dein Projekt, also wie es aufgebaut ist und welche Regeln gelten. Das heißt, die schreibst du selbst oder Claude schaut sich dein Projekt an und macht dir einen Entwurf. Das zweite ist das Auto-Memory, da schreibt Claude selbst mit. Das heißt, Claude schaut sich an, wie du arbeitest, was dir wichtig ist, wie du ihn korrigiert hast und speichert sich diese Informationen. Die Claude.md-Datei kannst du dabei auch mit anderen Leuten teilen, aber das Auto-Memory nicht. Das läuft nur auf deinem PC. Und wenn du Claude-Code sagst, er soll sich etwas merken, dann landet das im Auto-Memory. Das heißt, wenn es für das ganze Team gelten soll, was er sich merken soll, oder du auch auf verschiedenen Rechnern dann mit dem Projekt arbeitest, dann solltest du diese Informationen in die Claude.md-Datei schreiben. Wenn du also Short-Form oder auch Long-Form-Content machen willst und dir die Videos von Claude schneiden möchtest, dann solltest du das unbedingt machen, denn Claude ist sehr gut darin geworden. Das wird dir eine Menge Zeit, aber auch eben Geld sparen für einen Cutter, also probier es gerne mal aus. Kommen wir zum zweiten Test und zwar Werbespots. Und wir wissen ja bereits, dass es mit KI-Videomodellen ziemlich einfach geworden ist, solche coolen Werbespots für Produkte zu erstellen, wie zum Beispiel hier irgend so ein Getränk oder irgendeine Schokolade, was auch immer. Das funktioniert schon sehr gut, dazu habe ich auch ein eigenes Video gemacht, das verlinke ich dir hier oben. Wenn du das Ganze aber bei Softwareprodukten oder Dienstleistungen probierst, dann wirst du merken, dass das Ganze nicht so gut funktioniert, weil es schwierig für die KI-Videomodelle ist, sowas überhaupt abzubilden. Mit Motion-Graphics kannst du so ein Produkt oder eine Dienstleistung aber trotzdem greifbar machen, wenn du quasi nicht das eigentliche Produkt selbst zeigst, sondern was es für den Kunden tut. Und ich zeig dir hier erstmal ein richtig cooles Beispiel, das ich auf X gefunden habe. Finde ich mega stark, das hat Opus 3.5 generiert und ich wollte natürlich jetzt testen, wie das Ganze bei echten Produkten funktioniert. Und ich habe das Ganze zweimal ausprobiert, einmal mit einem sehr sehr einfachen, simplen Prompt und mit einem ausführlichen Prompt. Und für den ersten Test habe ich jetzt mal die Plattform N8N genommen, das ist eine sehr gute Automatisierungsplattform, die ich häufig nutze, und die das ist jetzt kein Werbevideo sein, die sponsern mich auch nicht, aber ich wollte jetzt mal schauen, wie gut es Claude hinbekommt, anhand deren Seite einfach so ein Video zu erstellen. Ich habe dann quasi im selben Chat, bei dem Claude dieses Video hier vom Anfang generiert hat, habe ich dann einfach folgenden Prompt hier geschrieben, können wir für folgende Softwareprodukt ein paar solche Videos machen und habe ihm dann hier die Website gegeben. Dann hat mir Claude ein paar Fragen zur Sprache und zum Format gestellt. Und dann wieder erstmal ganz viel gearbeitet und am Ende kamen dann diese drei Werbespots hier raus. Und da war ich natürlich auch wieder total überrascht, weil das ja wieder wirklich so ein minimaler Prompt war und das zeigt einfach, wie viel Mühe sich dieses Modell mittlerweile geben kann. Und natürlich wollte ich dann auch noch testen, wie Claude bei einem sehr langen Prompt performt und deswegen habe ich ihm jetzt folgenden Prompt hier gegeben und zwar auch für ein anderes Produkt, nämlich Excalidraw. Das ist quasi dieses Whiteboard-Tool, dass ich hier gerne in meinen Videos nutze, um Dinge zu erklären und ich finde das ist ein Super-Tool, das kannst du auch kostenfrei nutzen, aber die haben auch eine bezahlte Version, bei der du mit deinem Team dann zusammenarbeiten kannst zum Beispiel. Und Claude sollte sich dafür natürlich erstmal wieder anschauen, okay, was macht Excalidraw überhaupt, wie sieht deren Logo aus, wie sieht deren Design aus, ne, deren Branding, das alles soll natürlich übernommen werden und dann soll daraus ein Werbespot entstehen. Und hier habe ich auch wieder nur gesagt, er soll ein 30-sekündiges Video erstellen mit Hyper-Frames. Der Spot lebt in Excalidraws eigener Welt, ihre Zeichenfläche, ihre handgezeichneten Striche, ihre Schrift, ihre Farben, ihre Oberfläche und so weiter. Und hier kommt jetzt noch ein wichtiger Teil und zwar möchte ich für diesen Werbespot auch eine Stimme nutzen von ElevenLabs. Ich habe mir hier bei ElevenLabs eine coole Stimme ausgesucht, die dann das ganze Video sprechen soll. Neuer Look, neue Vibes. Entdecke die Styles, die zu dir passen und mache jeden Moment zu deinem Statement. Und ich habe ihm hier auch wieder Hintergrundmusik von einer Seite wie Pixabay gegeben, die dann ganz leise im Hintergrund laufen soll. Und damit du auch siehst, dass das Ganze wirklich nur ein Prompt war, ich scrolle jetzt hier runter und hier sieht man dann sogar so gar so ein paar Screenshots, ne, um seine Frames, die er generiert hat, zu überprüfen. Und da sehen wir auch in welche Richtung das schon geht. Das Ganze hat ziemlich lange gedauert, ich glaube circa 40 Minuten. Und hier sehen wir jetzt das Endergebnis. Ich finde es absolut gelungen, ich war total überrascht, wie gut das funktioniert und auch wie gut die Stimme ist. Das funktioniert jetzt mit der neuen ElevenLabs V4 Engine. Die klingt auch mal besonders menschlich, aber auch hier die ganzen Animationen und was er hier immer einblendet, das hat so gut gepasst, also hat mich absolut überzeugt, weil ja vor allem auch das ganze Branding, also das Logo, die Schriftart, die Farben, all das wurde ganz klar so beibehalten. Und das ist natürlich extrem wichtig und sowas funktioniert halt bei KI-Videomodellen, die jetzt einfach ein Video generieren, nicht so gut. Und bevor wir jetzt mit dem dritten Test weitermachen, ein kurzes Wort zum Sponsor des heutigen Videos, nämlich Usercentrics. Und rate mal, wer diese Integration jetzt für mich schneiden wird? Eine Website baust du heute mit Claude-Code in wenigen Minuten, sie muss aber auch datenschutzrechtlich passen und das fängt bei den Cookies an. Einen Cookie-Consent-Banner baut dir die KI sofort, der ist aber zunächst nur eine Fläche mit Text und Knöpfen und was ihn eigentlich nützlich macht, steckt darunter. Cookies und Tracking müssen nämlich blockiert bleiben, bis jemand zustimmt. Jede Entscheidung muss dabei auch nachweisbar gespeichert werden und Besucher müssen ihre Auswahl später ändern können. Google und andere Werbeplattformen müssen auch wissen, wie jemand entschieden hat und je nach Land gelten andere Regeln, die sich ständig ändern. Das Ganze selbst zu bauen und auch aktuell zu halten, ist ein Projekt für sich, aber das musst du gar nicht machen. Du kannst auch einfach Cookiebot nutzen, eine Consent-Management-Plattform. Du setzt ein kleines Stück Code in deine Website ein und Cookiebot erkennt die Cookies automatisch, blockiert sie bis zur Einwilligung und passt sich an, wenn sich Gesetze ändern. Es deckt unter anderem DSGVO und CCPA ab und ist von Google für den Consent-Mode zertifiziert. Für kleine Websites ist Cookiebot kostenlos, größere starten bei sieben Euro im Monat. Testen kannst du das Ganze 14 Tage lang kostenfrei mit allen Premium-Funktionen, den Link dazu findest du in der Videobeschreibung. Vollständige Compliance hängt dann mehr als einem Tool, aber der Teil mit den Cookies ist damit sehr gut abgedeckt. Kommen wir zum dritten Test und hier geht es jetzt um Erklärvideos. Die brauchst du nämlich überall, wo jemand etwas lernen soll, also in Onlinekursen, im Unterricht oder in Schulungen für Mitarbeitende. Und ich habe Claude dafür jetzt ein Thema gegeben, das in fast jeder Firma irgendwann auf dem Plan steht und zwar, wie man Phishing-Mails erkennt, also eine gefälschte Mail, die dich dazu bringen soll, auf einen Link zu klicken oder dein Passwort einzugeben. Und dafür habe ich jetzt folgenden Prompt hier genutzt und der ist etwas kürzer als die vorherigen. Ich sage hier oben auch wieder einfach nur, was ich haben möchte. Dann sage ich ihm natürlich auch was zu dem Look, das Ganze soll so ein bisschen verspielter sein und so illustriert mit 2D-Figuren, wie man es halt aus guten Erklärvideos kennt. Und diesmal soll er alle Figuren und Illustrationen selber zeichnen, also nicht irgendwo was aus dem Internet holen. Ich sage ihm aber trotzdem, er soll im Internet recherchieren, was die BSI und die Verbraucherzentrale empfiehlt bei solchen Mails und was so die Warnzeichen sind. Also, ne, er soll sich wieder an offiziellen Quellen halten. Und ich gebe ihm auch wieder eine Sprecherstimme von ElevenLabs mit, nämlich den Alex und der hört sich so an. Könnten Sie mir bitte eine paar mögliche Zeitfenster vorschlagen, an denen ein Techniker vorbeikommen könnte? Und diesmal soll er die Musik und Soundeffekte auch wieder selber erstellen. Ich gebe ihm hier also nichts mit. Ich habe ihn dafür jetzt hier auf extra hohen Aufwand gestellt und das Ganze hat wirklich lange gedauert, also insgesamt eine Stunde, was schon ziemlich krass ist, aber glaub mir, das Ergebnis ist echt gut geworden, das geht jetzt auch eine Minute lang. Pling, eine Mail von deiner Bank. Dein Konto wird gesperrt, außer du klickst sofort hier. Moment mal. Genau so sieht Phishing aus. Damit wollen Betrüger an deine Daten. Aber du erkennst solche Mails an ein paar typischen Zeichen. Erstens, der Absender. Fahr mit der Maus über den Namen ohne zu klicken. Steckt eine fremde Adresse dahinter? Vorsicht. Zweitens, eine allgemeine Anrede wie, sehr geehrter Kunde. Oft mit Fehlern im Text. Drittens, Zeitdruck und Drohungen. Der Druck soll dich zum schnellen Klicken bringen. Viertens, du sollst Passwort, PIN oder TAN eingeben. Deine Bank fragt so etwas nie per Mail ab. Fünftens, Links und Anhänge. Prüf vor dem Klick, wohin ein Link wirklich führt. Anhänge aus unerwarteten Mails öffnest du nicht. Du bist unsicher? Dann nicht klicken und nicht antworten. Frag beim Absender nach, über einen Weg, den du kennst. Und melde die Mail deiner IT-Abteilung. Damit liegst du genau richtig. Also, kurz prüfen, nicht anbeißen. Ich war ehrlich gesagt nach diesem Video ziemlich sprachlos, weil wie gut ist das bitte? Also KI ist auf jeden Fall nicht mehr nur das darum Texte zu generieren, das kann man sagen. Und das ist ja alles Code, also ich kann jetzt zum Beispiel hier sagen, nee, da soll was anders passieren und dann macht er hier ein bisschen was und ändert es. Und ich musste dafür jetzt nicht extra zahlen, es kostet wirklich nur ein paar Tokens hier von meinem Kontingent. Und ich sehe hier wirklich extrem viel Potenzial und sehr viele Anwendungsfälle und man muss eben nicht mehr unglaublich viel Geld ausgeben, um solche Schulungsinhalte zu erstellen. Das waren auch schon die drei Tests und mein Eindruck ist, dass Claude mit Opus 3.5 und Hyper-Frames bei allen drei Anwendungsfällen inzwischen wirklich sehr gute Ergebnisse liefert. Also damit kann man wirklich arbeiten. Falls du noch mehr darüber lernen möchtest, wie du mit Claude solche Usecases realisieren kannst, um auch wirklich gute Ergebnisse zu bekommen, dann schau jederzeit auch gerne in meiner Community vorbei. Hier behandeln wir das Thema sehr intensiv. Ich habe hier eine Claude-Code-Masterclass erstellt, wo ich das Thema von A bis Z gemeinsam mit dir durchgehe, damit du am Ende wirklich weißt, wie du Claude-Code richtig nutzt und hier auch einen Kurs erstellt zum Thema KI-Betriebssystem, denn wenn du mit so einem System wie Claude-Code arbeitest, dann ist das ein absoluter Gamechanger und der maximale Produktivitätsboost für dich. Das heißt, falls dich das Thema interessiert und du dich auch mit anderen Gleichgesinnten austauschen möchtest, schau jederzeit gerne vorbei. Ich freue mich auf dich. Das war's auch schon mit dem Video. Ich hinterlasse dir wie gesagt alle Prompts in der Videobeschreibung und lass mich gerne in den Kommentaren wissen, welche der Beispiele dich wirklich überrascht haben und wo du vielleicht sogar noch Anwendungspotenziale siehst oder auch, was man vielleicht noch besser machen kann. Ich bedanke mich fürs Zuschauen und würde sagen, wir sehen uns beim nächsten Video wieder. Bis dann.