00:00:00Heute lernst du, wie du die Kräfte des brandneuen Claude Design und Seed Dance 2.0 kombinierst,
00:00:06um animierte Websites wie diese hier zu erstellen. Ich führe dich Schritt für Schritt
00:00:12durch meinen gesamten Workflow, damit du das nachbauen kannst, selbst wenn du so etwas noch nie gemacht hast. Und nebenbei
00:00:17zeige ich dir mit ein paar Tipps und Tricks, wie du das Beste aus dem brandneuen Tool von Anthropic herausholst.
00:00:22Wenn es darum geht, eine solche Webseite zu erstellen, müssen wir als Erstes mit
00:00:28diesem Hintergrundvideo beginnen. Um das Hintergrundvideo zu erhalten, brauchen wir zunächst ein Startbild. Wir werden
00:00:32dieses Startbild mit Nano Banana Pro erstellen und dann nehmen wir dieses Startbild
00:00:37und verwandeln es mit Seed Dance 2.0 in ein Video. All das findet hier auf Higgsfield statt, was
00:00:44meine zentrale Anlaufstelle für alle KI-Content-Erstellungstools ist. Also, für den Anfang gehen wir einfach
00:00:49auf "Image" und zu Nano Banana Pro. Du wirst sofort einige der Bilder sehen, an denen ich gearbeitet habe,
00:00:55und die sollten unserer Webseite sehr vertraut vorkommen, besonders diese hier. Der genaue Prompt,
00:01:01den ich verwende, ist in meiner kostenlosen School-Gruppe zu finden; einen Link dazu gibt es in der Videobeschreibung.
00:01:05Aber worauf ich mich hier konzentrieren möchte, wenn wir über das Bild sprechen, ist weniger der spezifische
00:01:11Prompt selbst, denn das Bild, das du erstellen willst, wird anders sein als meins,
00:01:15sondern mehr die Komposition. Warum ist dieses Bild so aufgebaut, wie es ist? Nun, wenn wir uns
00:01:21das Endprodukt hier ansehen, ist es irgendwie offensichtlich, oder? Wir haben dieses große Hero-Bild, das die rechte Seite
00:01:26des Bildschirms einnimmt, aber wir brauchten noch etwas Leerraum auf der linken Seite für unseren Text. Als ich Nano Banana
00:01:31Pro dieses Bild erstellen ließ, hatte ich diese Art von Komposition im Kopf. Ich dachte: Okay, wir haben ein Bild,
00:01:38bei dem es sozusagen in der Mitte geteilt ist; auf der rechten Seite haben wir unser auffälliges Bild und dann auf
00:01:44der linken Seite wird der Hero-Text stehen, also ist das hier sozusagen der Slogan.
00:01:51Wir werden oben eine Art Banner mit der Navigationsleiste haben, wo die Leute auf Home
00:01:55oder die verschiedenen Seiten klicken können. Wir werden hier einige Buttons haben, wie "Anmelden"
00:02:00oder "Mehr erfahren", und dann haben wir vielleicht unten eine Art Ticker. Das wusste ich schon vorher,
00:02:04und das musst du wissen, wenn du Nano Banana Pro bittest, das Bild
00:02:10für dich zu erstellen, denn wie auch immer die Komposition bei diesem Setup aussehen wird, das wird deinen Prompt bestimmen.
00:02:17Jetzt ist deine Frage wahrscheinlich: "Nun, Chase, ich habe keine Ahnung, was meine Optionen überhaupt sind. Ich
00:02:22weiß gar nicht, wie die Komposition überhaupt sein sollte. Wie finde ich das heraus?" Nun, der
00:02:25einfachste Weg ist, einfach ein paar Websites zu finden, die dir gefallen, und anzufangen, deren Hero- und
00:02:30Landingpage-Komposition zu analysieren. Ein großartiger Ort, um Beispiele dafür zu sehen, ist Dribbble. Also, das ist
00:02:35Dribbble mit drei B's. Wenn ich nach "landing page saas" suche, kannst du nach "landing page"
00:02:40suchen, was auch immer, du wirst sehen, was ich meine. Was sehen wir hier, richtig? Dieses hier zum Beispiel,
00:02:47da ist das Bild unten und der Text oben. Wir könnten etwas Ähnliches machen mit
00:02:52diesem hier, wir könnten ihn hier in die Mitte bewegen, vielleicht haben wir die Wolken an den Seiten
00:02:56stattdessen, und dann kommt der Text hier hin – das ändert die Komposition komplett. Oder wollen wir etwas
00:03:02wie das hier, wo das Bild im Mittelpunkt steht und der Text drumherum verläuft und wir noch andere Elemente hinzufügen?
00:03:07Du weißt schon, wenn du durchscrollst, siehst du, dass es eine Million verschiedene Möglichkeiten gibt, wie man das
00:03:11machen kann, aber du musst es vorher wissen oder zumindest zwei oder drei Ideen in der
00:03:16Hinterhand haben, und dann kannst du Nano Banana Pro Prompts geben, die diesen Stil widerspiegeln.
00:03:22Also zusammenfassend: Wenn wir unser Bild erstellen, müssen wir als Erstes die Komposition herausfinden.
00:03:26Was die Komposition betrifft: Wo wird der Leerraum sein? Wo wird der Text sein?
00:03:32Wird er links, mittig, rechts, oben sein? Das ist egal, du musst dich nur entscheiden und
00:03:37deinen Prompt entsprechend anpassen. Und auch wenn es um den Prompt geht, verlass dich auf Tools wie Claude, um
00:03:42ihn für dich zu schreiben. Nun, für unsere Demo heute verwenden wir dieses Bild, und ich werde auch eine Kopie
00:03:47davon in der Community haben, falls du mich Schritt für Schritt kopieren möchtest. Mit unserem Standbild
00:03:51in der Hand gehen wir jetzt zu Claude Design, und der allgemeine Ablauf ist: Bild in
00:03:56Nano Banana Pro erstellt, wir erstellen unser Website-Mockup hier in Design, und sobald wir eine Website haben, die uns gefällt,
00:04:01du weißt schon, ein Design, das uns gefällt, eine Landingpage und alles, dann nehmen wir dieses Bild und verwandeln es in
00:04:05ein Video, denn das ist als letzter Schritt sehr einfach. Wenn du also ganz neu bei Claude Design bist,
00:04:10keine Sorge, wir werden in diesem Video die wichtigen Dinge behandeln, die du wissen musst, aber ich habe auch einen Deep Dive,
00:04:14der ein bisschen mehr ins Detail geht, den du dir auch ansehen solltest, und ich werde ihn oben verlinken. Aber für
00:04:18unsere Zwecke gehen wir hier links auf "Prototype" und
00:04:24geben dem Projekt irgendeinen Namen, ich nenne meins "sd2" für "Design System". Du wirst wahrscheinlich kein
00:04:30Design-System haben, du brauchst in diesem Fall vorerst keins. Nochmals, wenn du mehr über Design-Systeme erfahren willst,
00:04:35sieh dir das Deep-Dive-Video an. Wir machen "High Fidelity" und dann erstellen wir das.
00:04:40Das führt dich dann auf diese Seite, und das Erste, was wir tun wollen, ist, etwas Kontext hinzuzufügen,
00:04:45und der Kontext, den wir hinzufügen, ist das Bild, das wir heruntergeladen haben. Wie du hier unten links sehen kannst,
00:04:49habe ich meinen Screenshot hochgeladen. Als Nächstes wollen wir einen Prompt geben. Du kannst natürlich noch mehr
00:04:55Screenshots hier hinzufügen, und ich rate dir absolut dazu, falls du gute Beispiele von jemandem wie Dribbble hattest.
00:04:59Wenn du also etwas auf Dribbble gefunden hast, das dir in Bezug auf die Gesamtkomposition gefällt, füge das auch hinzu.
00:05:04Wenn es um den eigentlichen Prompt geht, schlage ich dringend vor, dich auf etwas wie Claude
00:05:09Code zu verlassen, um ihn für dich zu schreiben. Und hier ist ein Blick auf den Prompt, den Claude
00:05:13Code erstellt hat und den ich in Claude Design einfügen werde. Dies ist für unser fiktives SaaS-Unternehmen Olympus, eine Marktintelligenz-Plattform,
00:05:19es geht also darum, worum es bei dem Unternehmen geht, es wird ziemlich detailliert mit dem Hero, spricht darüber,
00:05:25welche Abschnitte auf der Landingpage sein sollen, und dann fügt es noch Dinge mit "Motion" hinzu. Jetzt,
00:05:30sehr wichtig, haben wir diese Zeile am Ende, die besagt: "Stell mir alle Fragen, bevor du beginnst". Das Coole
00:05:36an Claude Design ist, dass es ein bisschen wie Claude Code funktionieren kann, in dem Sinne, dass es einen Plan-Modus erstellt.
00:05:42Also gebe ich ihm einen Prompt, genau diesen hier, und dann wird es mir einen Haufen
00:05:46Fragen stellen, um besser einzugrenzen, was ich zu bauen versuche. Und das Tolle an dieser
00:05:50Plan-Modus-Funktion, bei der es uns Fragen stellt, ist die Tatsache, dass wenn du mit einem schlechten Prompt auftauchst,
00:05:54der nicht einmal halb so detailliert ist wie dieser hier, du trotzdem zu Claude Design gehen und einen ziemlich soliden ersten
00:06:01Entwurf bekommen kannst, weil du dieses ganze Q&A mit Claude durchlaufen hast. Also habe ich alles eingefügt und wir
00:06:06klicken einfach auf Senden. Ein kurzer Hinweis zur Nutzung von Claude Design: Claude Design arbeitet mit
00:06:11eigenen Nutzungslimits. Es ist getrennt von deinen Pro-Limits oder deinen Max-5- oder Max-20-Limits mit
00:06:18Claude; es ist ein eigenes Ding und kann ein ziemlicher Ressourcenfresser sein, also behalte es immer im Auge. In meinem Fall
00:06:23habe ich sie schon aufgebraucht, weil ich es ständig benutze, also bin ich bei meiner zusätzlichen Nutzung.
00:06:28Zur Information: Als ich das alles, was du heute siehst, alleine durchlief, hat mich das
00:06:33an zusätzlicher Nutzung etwa fünf Dollar gekostet, um die Landingpage zu erstellen, und ich hätte das sogar noch
00:06:38günstiger bekommen können, aber nur damit du eine Vorstellung davon hast, wo wir stehen. Und hier sind die Fragen, die zurückkommen:
00:06:43Fragen zur Typografie, zum Abschnitt, was wollen wir machen? Lass uns "Modern Mythic" nehmen, Farbpalette,
00:06:52lass uns "Inverted" nehmen, und letztendlich werden wir mehr Optionen haben, sobald es das mit "Tweaks" tatsächlich erstellt.
00:06:58Wie du später sehen wirst. Copy-Stimme, lass uns "Mythic" einstreuen, denn falls du nicht gemerkt hast,
00:07:06wir machen sowas wie... der Firmenname ist Olympus, es ist eine Art Intelligence-App, also ist dieses ganze Bild,
00:07:11mit dem wir es zu tun haben, dazu gedacht, wie diese Analogie des prometheischen Feuers zu sein, also Hero-
00:07:17Komposition, "Full Bleed Image", lass uns "Full Bleed Image" nehmen, Abschnittsreihenfolge... und du
00:07:26kannst immer für mich entscheiden, falls du es einfach nicht weißt. Soziale Beweise: "Entscheide für mich", "Entscheide für mich".
00:07:32Und hier ist eine coole Sache: Tweaks. Tweaks werden hier in einer Sekunde mehr Sinn ergeben, aber ich
00:07:39schlage immer vor, so viele Tweaks wie möglich zu verwenden, und wir können später immer noch mehr hinzufügen. Also klicken wir auf "Weiter".
00:07:45Und jetzt wird es hingehen und dieses Ding für uns erstellen. Jetzt ein kurzer Überblick
00:07:50für Claude Design, während es baut. Hier oben rechts, wo "Share" steht, wenn ich darauf klicke,
00:07:56sind wir nicht für immer in Claude Design gefangen. Was wirklich cool daran ist und was ich dir später zeigen werde,
00:08:01ist, dass wir das zu Claude Code exportieren können, und wenn wir dann eine 80- oder 90-Prozent-Lösung haben und fertig sind,
00:08:07die Nutzungskosten uns auffressen, können wir es zu Claude Code bringen und daran arbeiten, bis wir
00:08:12zufrieden sind. Wir können es auch als HTML exportieren, zu Canva senden, als PowerPoint oder PDF für
00:08:17Downloads exportieren. Wir können auch Teamkollegen einladen, also kann das eine gemeinsame Sache sein. Es gibt
00:08:22viele Optionen, und Claude Design als Ganzes ist sehr vielseitig. Und hier ist, was Claude Design
00:08:27zurückgegeben hat, und ich werde das in diesem Video alles hin- und herschieben. Als Erstes möchte ich
00:08:33deine Aufmerksamkeit auf die "Tweaks" hier auf der rechten Seite lenken. Tweaks sind ein Menü auf dieser Seite, das uns erlaubt,
00:08:40sehr schnell verschiedene Mikroelemente unserer Seite zu ändern. Ich kann die Akzente ändern, ich kann das
00:08:48Thema von "Light" auf "Dark" ändern, was hier unten offensichtlicher ist. Du kannst die Überschrift, das Logo, die
00:08:54Preise, die Namen, jede Art von Bewegung ändern. Es macht es also sehr, sehr einfach, zwischen verschiedenen Versionen
00:09:03unserer Seite zu iterieren. Darüber hinaus habe ich die Möglichkeit, Dinge auf einer granularen Ebene zu bearbeiten. Wenn ich hier zum
00:09:07oberen rechten Bereich gehe und auf "Edit" klicke, kann ich auf verschiedene Dinge klicken, wie diesen Button hier oben, und ich könnte die
00:09:13Farbe direkt ändern. Ich kann die Schriftart, du weißt schon, das Padding, die Deckkraft, alles ändern. Und ich habe auch
00:09:19die Möglichkeit, zu kommentieren. Ich kann also auf denselben Button klicken und statt tatsächlich die
00:09:25spezifischen Werte zu ändern, könnte ich einen Kommentar hinterlassen wie "Mach es größer, mach es kleiner" oder ich kann darauf zeichnen. Ich
00:09:30kann also darauf zeichnen, du weißt schon, all das auswählen und sagen: "Hey, beweg es nach links" und das dann an
00:09:39Claude hier unten senden, und es wird im Grunde einen Screenshot von dem machen, was ich gerade geschrieben habe,
00:09:44und wird sagen: "Oh, okay, lass uns das ein bisschen nach links bewegen". Und wir können sehen, dass es das jetzt nach links bewegt hat und
00:09:49es hat dieses scheußliche Ding da, das wir auch entfernen können. Aber was du an diesem
00:09:55Punkt tun solltest, ist erstens, einen schnellen Blick darauf zu werfen: "Okay, was halte ich von dem Gesamtdesign?"
00:10:02Der erste Entwurf scheint in Ordnung zu sein. Am wichtigsten ist in Bezug auf unser Bild: Müssen wir zurück zu
00:10:09Nano Banana Pro gehen und dieses Bild bearbeiten? Müssen wir es kleiner oder größer machen oder was auch immer? Wenn das
00:10:14gut aussieht, ist mein Vorschlag, wenn wir in Claude Design sind, einen zweistufigen Prozess zu verwenden. Erstens: Ich möchte
00:10:21verschiedene Varianten meiner Webseite sehen, und ich spreche nicht von kleinen Tweaks.
00:10:26Ich möchte mindestens zwei weitere komplett verschiedene Layouts sehen, um eine Idee davon zu bekommen, welchen Pfad ich
00:10:32einschlagen möchte. Und sobald wir eine Variante finden, die uns auf Makro-Ebene gefällt, ja, dann konzentrieren wir uns darauf und wir
00:10:37lassen uns mehr Tweaks anzeigen, nicht nur fünf Tweaks, ich rede von 15 Tweaks, damit wir wirklich etwas bekommen,
00:10:43das uns gefällt, denn das Ziel ist es, zu einer 90-Prozent-Lösung zu kommen, bevor wir das Video reinbringen und dann
00:10:48bevor wir es in Claude Code bringen, um es zu unserem Eigenen zu machen. Und das ist wirklich einfach: Alles, was wir
00:10:53tun müssen, ist, Claude Design dazu aufzufordern. Also sage ich: "Kannst du zwei zusätzliche Layout-Varianten für unsere
00:10:58Webseite erstellen, durch die ich mich klicken kann, zusätzlich zu dieser aktuellen?" Einfach ein paar neue Designs, die wir
00:11:03aufnehmen könnten. Und diese Idee, Makro-Varianten zu erstellen und dann, sobald man sich für eine Variante entschieden hat, eine Tonne
00:11:09von Tweaks zu erstellen – das ist es, was Claude Design wirklich von Claude Code unterscheidet. Jetzt, ganz direkt: Prompt
00:11:16für Prompt, im luftleeren Raum, glaube ich, dass Design ein kleines bisschen besser als Claude Code beim Front-End ist, aber diese
00:11:20Art von Variation und visueller Iteration, die wir sehr, sehr schnell machen können, ich glaube, das ist der große
00:11:27"Unlock" mit Claude Design, und da liegt der Wert, denn wenn wir versuchen, dasselbe innerhalb
00:11:32von Claude Code zu tun, ist es ein bisschen mühsam. Und hier ist, wovon ich rede: Oben haben wir die "Cinematic"-
00:11:37Version, die das Original war, und jetzt gab es uns auch eine "Archive"- sowie eine "Terminal"-Version, und du
00:11:45kannst sehen, sie sind alle ziemlich einzigartig. Und das gilt auch für den Rest der Seite, nicht nur für den Hero-Bereich,
00:11:53sondern für alles. Und ehrlich gesagt, wenn ich mir das ansehe, denke ich, dass das Terminal eigentlich ziemlich krank aussieht. Wir müssten
00:12:01das Bild hier ändern und wir müssten definitiv vom Video weggehen, aber gleich
00:12:09siehst du das und ich denke, das sieht wirklich cool aus und sieht definitiv anders aus als deine
00:12:13standardmäßige, alltägliche, KI-erstellte Webseite. Das ist also, wovon ich rede, wenn es darum geht,
00:12:20die Macht von Claude Design tatsächlich zu nutzen: diese Variationen zu sehen, weil ich
00:12:24nie darauf gekommen wäre, so etwas zu tun, oder überhaupt wüsste, wie man es dazu bringt, mir das zu geben. Ich mag das wirklich.
00:12:29Aber um dieses Video tatsächlich auf dem Laufenden zu halten, werden wir bei der
00:12:35Cinematic bleiben, aber ich wollte dir das zeigen, weil die Idee ist: Du machst das, wählst die, die dir gefällt, und dann
00:12:40gehst du weiter zu Schritt zwei des Claude-Design-Prozesses, nämlich: Tweaks, Tweaks, Tweaks. Und wir haben all
00:12:46diese Tweaks hier, aber genau wie ich Claude Design vorhin gebeten habe, mir mehr Variationen zu geben, werde ich es jetzt
00:12:51bitten, sehr aggressiv mit den Tweaks zu sein, die es mir gibt. Ich muss nicht wissen, welche Tweaks
00:12:56ich will, ich muss nicht wissen, ob ich das Thema oder die Überschrift oder das Logo ändern können will – ich
00:13:00weiß es nicht, gib mir einfach einen Haufen und wir finden es heraus. Also habe ich hier unten geschrieben: "Lass uns bei der
00:13:04Cinematic bleiben, du kannst die anderen beiden entfernen und auch aggressiv die Anzahl der verfügbaren Tweaks erhöhen"
00:13:11und wir werden sehen, was dabei herauskommt. Jetzt können wir alle zusätzlichen Tweaks sehen, die es hinzugefügt hat. Wir
00:13:15gingen von etwa fünf Tweaks auf etwa 15 oder so, was großartig ist. Also haben wir diese ursprünglichen
00:13:22mit den Akzenten, das Thema, das Logo, das sieht gut aus, Schriftarten, Körper-Schriftart, Mono-Schriftart, Typ-Skala...
00:13:36Der Punkt ist, ich kann jetzt immer und immer wieder durch all diese Sachen durchgehen. Ich kann sogar
00:13:42die CTA-Überlagerungsdunkelheit, das Glut-Glimmen ändern – es hört nicht auf, es hört nicht auf. Also bin ich durch
00:13:51alle Tweaks bei mir durchgegangen, bin die Glut losgeworden und das ist es, was wir schließlich bekommen haben. Jetzt habe ich
00:13:56die Möglichkeit, es mir im Vollbild anzusehen, wenn ich oben auf "Present" klicke – Vollbild, damit wir eine bessere Vorstellung davon haben,
00:14:02wie es aussehen wird. Und für mich sieht das erst einmal ziemlich gut aus. Denk daran, wir brauchen keine 100-Prozent-
00:14:08Lösung innerhalb von Claude Design. Wir wollen so nah wie möglich herankommen, wir wollen alle Design-Entscheidungen treffen,
00:14:14die wir können, und dann wollen wir es schließlich zurück in Claude Code bringen und die kleinen
00:14:18Tweaks machen, denn denk daran, Claude Design ist ein Ressourcenfresser, du bekommst nur eine begrenzte Nutzung. Wir wollen also
00:14:23dafür sorgen, dass es zählt. Jetzt können wir es also in den Videobereich überführen, wo wir diesen Hintergrund nehmen und tatsächlich
00:14:29animieren. Nur als Randnotiz: Es ist wichtig, dass wir all das mit dem Standbild-Hintergrund gemacht haben, denn
00:14:35wenn wir über mobile Nutzer sprechen, wollen wir nicht, dass unsere mobilen Nutzer von irgendeinem riesigen Video getroffen werden, das
00:14:39sie verlangsamen kann. Wenn also jemand auf dem Handy ist und auf unsere Webseite geht, die wir hier
00:14:43eingerichtet haben, sehen sie nur das Standbild. Also werden wir dafür CDance verwenden. Also, ich bin wieder hier in
00:14:47Higgsfield, gehe zu CDance 2.0. Du musst nicht CDance benutzen, CDance ist einfach das beste da
00:14:52draußen im Moment. Andere Optionen sind Kling 3.0, du kannst auch so etwas wie VEO 3.1 verwenden, und das Video-Setup
00:14:58ist sehr einfach, du nimmst buchstäblich dein Bild und du wirfst es hier hinein,
00:15:04du ziehst es also buchstäblich einfach hier hoch als den Startframe, und dann geben wir ihm
00:15:08einen Prompt. Nun, der Prompt ist sehr einfach, alles, was ich geschrieben habe, war: "Bewegung extrem langsam halten, Wolken bewegen sich kaum,
00:15:15Glut vom Feuer in seinen Händen driftet langsam" – und wir bekommen so etwas hier. Wir wollen
00:15:21subtil, wir wollen nicht verrückt, du willst nicht, dass es wie ein wildes Videospiel aussieht, du willst, dass es fast
00:15:26nur wie ein animiertes, unauffälliges GIF wirkt. Und das liegt daran, dass das Hero-Bild nur ein bisschen
00:15:32Flair zu unserer Seite gibt. Du willst nicht, dass es alles übernimmt. Und zweitens, wie du hier sehen wirst, ist es
00:15:37schwierig, denn höchstens bekommst du 15 Sekunden aus diesem Ding heraus. Idealerweise kannst du
00:15:43einen perfekten Loop erstellen, aber das kann ziemlich schwierig sein. Also ist die beste Wette, das zu tun, was wir hier getan haben, und einfach ein
00:15:4815-Sekunden-Video zu haben, was sich am Anfang nach viel anhört, aber es ist wirklich nicht zu schwer. Und die
00:15:54andere Sache ist: Wenn wir für 15 Sekunden gehen, ist die Chance, dass jemand auf deine Webseite geht und
00:15:59sie einfach dort auf deiner Hero-Seite sitzen, 15 Sekunden lang lesen und dann irgendwie erschreckt werden von
00:16:04dem Schnitt, wenn es beim Loop zurückkehrt, unwahrscheinlich ist. Was höchstwahrscheinlich passiert, ist, dass sie auf
00:16:10dein "Hero"-Bild gehen, "Wow, sieht cool aus", 10 Sekunden später sind sie unten auf dem Rest der Landingpage, um zu sehen, worum es dir
00:16:15geht. Also halte den Prompt einfach, halte ihn subtil. Wenn du verrückt werden willst, mach weiter, mach es
00:16:20so lang wie möglich für 15 Sekunden. Du willst, dass es 16:9 ist und du willst, dass es mindestens
00:16:261080p ist. Manche Modelle geben dir die Option, den Prompt zu verbessern, wo es so ziemlich heißt:
00:16:30"Hey, du hast deinen schlechten Prompt eingegeben und wir machen ihn besser" – mach das nicht. Du willst immer die volle Kontrolle
00:16:34über deinen Prompt haben und erwarte, dass du ein paar Variationen davon machen musst, bis du es
00:16:40richtig hinbekommst. Also wirst du das wahrscheinlich vier oder fünf Mal machen müssen,
00:16:45bis du endlich die Ausgabe bekommst, nach der du suchst. Aber sobald wir diese Ausgabe haben, müssen wir nur
00:16:50sie herunterladen und dann hüpfen wir zurück in Claude Design und wir werden diese MP4-Datei einfach in
00:16:57das Prompt-Fenster fallen lassen. Ich habe es also hier unten links hochgeladen und dann schrieb ich: "Können wir das Standbild
00:17:01durch das Video ersetzen, das ich gerade für den Hero-Hintergrund hochgeladen habe?" Und dann gibt es dir etwas wie
00:17:05das hier, und es ist buchstäblich so einfach. Und an diesem Punkt sind wir so ziemlich fertig in
00:17:12Claude Design. Ich meine, wenn du mehr Änderungen vornehmen willst, mache mehr Tweaks, liegt ganz bei dir. Aber wenn
00:17:17du an diesem Punkt bist, würde ich sagen, du bist bereit, Claude Design tatsächlich zu verlassen und jetzt
00:17:22dieses in etwas wie Claude Code zu bringen, wie wir vorhin besprochen haben. Sehr einfach zu tun, wir gehen hoch zu
00:17:26"Share" und wir gehen zu "Handoff to Claude Code". Nun, weil das ein Video in einer MP4 beinhaltet,
00:17:34wenn du versuchst, einfach nur den Kopierbefehl auszuführen, könnte es Probleme beim Herunterladen geben. Was
00:17:38du stattdessen tun willst, ist, du willst einfach die ZIP herunterladen, also nimmt es
00:17:44alle Dateien, all das Live-Video, all das Coding-Zeug unter der Haube und steckt es einfach in eine ZIP-
00:17:49Datei. Also kannst du "Download ZIP" machen, du willst dann all das entpacken und dann wirst du einfach
00:17:56diesen entpackten Ordner in Claude Code fallen lassen und sagen: "Lade alles herunter, wir werden jetzt
00:18:03eine Webseite erstellen, die all diesen Code verwendet" – und du bist an diesem Punkt so ziemlich fertig. Also habe ich es reingeworfen
00:18:10und gesagt: "Entpacke all diese Dateien für die Webseite, die wir bauen", und dann einen Dev-Server gestartet, und
00:18:14hier ist die Webseite auf dem Dev-Server. Sie ist oben, und damit ist der Transfer zu Claude Code abgeschlossen.
00:18:19Du hast den animierten Hero-Bereich eingerichtet, er hat das Video, er hat das Standbild, alles ist bereit
00:18:25für dich, um kleine Änderungen vorzunehmen und es dann zu GitHub zu pushen, bevor du es zu Vercel pusht und tatsächlich
00:18:29online hostest. Also, das ist es, wo ich euch für heute verlasse. Ich hoffe, das war in der Lage, etwas
00:18:33Licht darauf zu werfen, wie man die Kraft von Claude Design und Seed Dance 2.0 kombiniert, um diese Art von
00:18:39animierten Webseiten zu erstellen. Wie immer, lasst mich wissen, was ihr dachtet. Stellt sicher, Chase AI zu checken, wenn
00:18:44ihr eure Hände an all diese Ressourcen bekommen wollt, und wir sehen uns.