Fable 5 und GPT 5.6 erstellen mit dieser Fähigkeit eine 10.000-Dollar-Website im Alleingang
CChase AI
Computing/SoftwarePhotography/ArtInternet Technology
Transcript
00:00:00Diese gesamte Website wurde von Claude Fable 5 in einem einzigen Durchgang erstellt.
00:00:05Es ist nicht nur eine Scroll-Animation, sondern mehrere, die aneinandergereiht wurden,
00:00:10um ein flüssiges, hochwertiges und stimmiges Erlebnis zu bieten.
00:00:15Das ist absolut wild.
00:00:16Dies ist ein extrem erstklassiges Produkt und ich zeige euch die Fähigkeit, mit der ihr das alles machen könnt.
00:00:22Darüber hinaus zeige ich euch, wie ich das nicht nur in Claude Code gemacht habe,
00:00:25sondern wir werden genau dasselbe im brandneuen GPT 5.6 Sol vorführen,
00:00:31denn warum sollte man sich heutzutage auf nur ein KI-Tool beschränken?
00:00:35Und das hier ist wirklich cool.
00:00:37Wie gesagt, wenn man versucht, das manuell ohne diese Art von Scroll-Animations-Fähigkeit zu machen, die ich gefunden und verbessert habe,
00:00:42weiß man, wie schwierig das ist.
00:00:43Man erstellt mehrere Videos, holt sich die Start-Frames, versucht ein Match-up zu machen,
00:00:47man nimmt alle Frames einzeln heraus – es ist ein ziemlicher Schmerz im Hintern
00:00:50und das hier macht den gesamten Prozess extrem einfach auszuführen.
00:00:53Nun, der eigentliche Verdienst für diese Fähigkeit gebührt Peter Wang.
00:00:55Er ist derjenige, der die ursprüngliche Version gemacht hat.
00:00:57Ich habe sie auf Twitter gefunden und er war so nett, sie als Open Source zur Verfügung zu stellen.
00:01:00Also wird seine Scroll-Welt unten verlinkt sein, damit ihr sie euch ansehen könnt.
00:01:03Was ich getan habe, ist, dass ich das Ding geforkt und ein paar Verbesserungen vorgenommen habe,
00:01:07nämlich die Einführung von Budget-Stufen, damit man das tun kann, ohne so viel ausgeben zu müssen.
00:01:10Wir brauchen nicht unbedingt sechs verschiedene Szenen für unsere Website
00:01:14und ich habe viele Verbesserungen an der mobilen Version davon sowie SEO-bezogene Dinge eingebaut.
00:01:19Die Art und Weise, wie diese Scroll-Animationen im Großen und Ganzen funktionieren, ist, dass wir mit einem einzigen Bild beginnen.
00:01:23Das ist es, was ihr hier seht.
00:01:24Wir nehmen dann dieses Bild und verwandeln es in ein Video.
00:01:27Diese Scroll-Animation war an einem Punkt ein Video, aber wir nehmen dann alle einzelnen Frames mit FFmpeg aus dem Video heraus
00:01:34und verknüpfen das dann mit einer Position, an der ihr, der Nutzer, euch auf der Website befindet.
00:01:40Nun, hinter den Kulissen passiert noch viel mehr, um ein flüssiges Erlebnis zu schaffen, damit es nicht völlig ruckelig ist.
00:01:46Und darüber hinaus stellen wir sicher, dass alle unsere Szenen aufeinander Bezug nehmen, wenn wir sie erstellen.
00:01:50Auf diese Weise sehen sie alle zusammenhängend aus.
00:01:52Es sieht alles so aus, als käme es aus einer einzigen Geschichte.
00:01:55Was die Generierung der Bilder und Videos angeht, so machen wir das über das Higgsfield MCP.
00:02:00Und wir können das sowohl mit Claude Code als auch mit Codex machen.
00:02:02Wir müssen das Terminal nie verlassen.
00:02:04Es ruft all diese Bildmodelle auf, namentlich GPT Image 2, und alle Videomodelle, namentlich Seed Dance, über dieses MCP oder das CLI.
00:02:12Um diese Tools mit dem KI-Agenten eurer Wahl zu verbinden, geht ihr einfach zu Higgsfield, dann zu MCP und CLI, und folgt einfach diesen Schritten.
00:02:20Ihr kopiert einfach die URL für das MCP und führt dann den Authentifizierungsprozess durch.
00:02:25Das Einzige, was ihr danach noch braucht, ist die Fähigkeit selbst.
00:02:27Und ich werde meine Version auch unten verlinken.
00:02:30Ihr könnt einfach die URL kopieren, sie Claude Code oder Codex geben, oder ihr könnt es als Plugin machen.
00:02:35Beides funktioniert.
00:02:36Wie ich in der Einführung sagte, werde ich das in Codex mit dem brandneuen Sol 5.6 vorführen, aber so sah es in Claude Code aus.
00:02:44Es ist genau derselbe Prozess.
00:02:46Ihr geht durch ein Interview, sagt ihm, welche Art von Website ihr erstellen wollt, was jede Szene sein soll, und es führt euch Schritt für Schritt durch.
00:02:53Und es stellt sicher: “Hey, gefällt dir dieses Bild?”, bevor es tatsächlich alle Videos erstellt.
00:02:57Man lässt nicht einfach die Fähigkeit laufen, alle Videos tauchen auf und man hatte kein Mitspracherecht bei dem Prozess.
00:03:01Es führt euch also wirklich während der ganzen Sache an die Hand.
00:03:04Also habe ich in Codex die Scroll-World-Fähigkeit aufgerufen.
00:03:07Ich sagte also einfach /scroll world.
00:03:08Und ich sagte: “Ich versuche eine Website für eine japanische Boutique-Reisemarke zu erstellen.”
00:03:14Und die allgemeine künstlerische Richtung, die ich möchte, ist, wir gehen ein bisschen in Richtung Origami-Stil.
00:03:18Wenn ihr nicht wisst, welchen Stil ihr wollt, könnt ihr einfach einen Austausch mit der KI haben und sie stellt euch einige Fragen.
00:03:25Ich wusste schon vorher, was ich wollte.
00:03:27Also keine Sorge, wenn ihr keine genaue Idee habt, wenn ihr auftaucht. Nachdem ihr ihr eine kreative Richtung gegeben habt, fragt sie euch: “Was wollt ihr in Bezug auf das Budget machen?”
00:03:36Und was wollt ihr in Bezug auf das mobile Budget machen?
00:03:38Sie fragt: “Wie viele Szenen wollt ihr als Referenz?”
00:03:41Das waren sechs Szenen.
00:03:43Das ist eine beträchtliche Menge an Video, und es ist tatsächlich eine ziemlich lange Reise von Anfang bis Ende.
00:03:48Das ist wahrscheinlich für die meisten Leute des Guten zu viel.
00:03:50Darüber hinaus wird das eine Menge Higgsfield-Guthaben kosten, mich hat es am Ende des Tages etwa 800 gekostet.
00:03:56Wenn ihr also nicht auf einem der teureren Pläne seid, solltet ihr wahrscheinlich bei vier Szenen bleiben, ich denke, das ist ein großartiger “Sweet Spot”.
00:04:03Als Nächstes ist dran, was ihr mit dem Handy machen wollt.
00:04:04Ihr könnt alles machen, vom einfachen “sicheren Zuschneiden” bis hin zu einer vollständigen Porträt-Kette, bei der zusätzliche Videos speziell für Mobilgeräte erstellt werden.
00:04:12Ihr habt also etwas Spielraum, wie tief ihr an dieser Front gehen wollt.
00:04:15Aber für dieses Video machen wir nur “schlank” und “sicher zuschneiden”.
00:04:20Also quasi die günstigsten Optionen, und versteht, dass ihr auch weniger Szenen machen könntet.
00:04:24Ihr könntet es auf drei reduzieren, das ist nur das, was es standardmäßig anbietet.
00:04:28Aber dann führt es euch durch den Reisevorschlag und sagt: “Hey, so wird jede Szene aussehen.”
00:04:32Und es ist wie: “Das ist die Anzahl der Generationen, die es dauern wird.”
00:04:35Es braucht also insgesamt vier Bild-Generationen, vier “Szenen-Tauch”-Videos.
00:04:40Es muss eine Verbindung zwischen einigen der Videos und einigen Überblendungen geben.
00:04:43Insgesamt sagt es also neun Generationen, und es gibt euch eine erwartete Generationszeit, die normalerweise ziemlich konservativ ist.
00:04:49Es dauert normalerweise nicht so lange, auch wenn wir über KI-Video sprechen.
00:04:52Und sobald ihr das genehmigt, ist das Nächste, was es tun wird, den Anker zu generieren.
00:04:56Der Anker wird dieser Start-Frame sein.
00:05:00Und wir sprechen über diesen Start-Frame.
00:05:01Wir sprechen über etwas Ähnliches wie das hier im Hintergrund.
00:05:03Es wird nur ein Standbild sein.
00:05:04Und es liegt jetzt an euch zu sagen: “Okay, das gefällt mir.”
00:05:06Das ist die künstlerische Richtung, die alles beherrschen wird.
00:05:09Oder: “Nein, lass uns einige Stücke ändern.”
00:05:11Das ist der Teil, den ihr wirklich treffen müsst, denn wenn ihr es nicht mögt und Ja sagt, wird alles darauf basieren.
00:05:17Hier ist also ein Blick auf das Bild, das es erstellt hat.
00:05:19Und mir gefällt es jetzt.
00:05:20Das ist euch wahrscheinlich schon klar.
00:05:21Wenn ihr das alles über Codex und über Sol macht, nun, es hat Bildgenerierung.
00:05:26Wir müssen keine Anfragen an Higgsfield senden, um Bilder mit GPT Image 2 zu erstellen,
00:05:31wenn wir diese Fähigkeit nativ in Codex haben.
00:05:34Ihr werdet also Codex das nativ tun lassen, aber ihr müsst es trotzdem für die Videogenerierung an Higgsfield senden.
00:05:41Auf der anderen Seite, wenn ihr das in Claude Code macht, hat es offensichtlich keine Bildgenerierung.
00:05:44Higgsfield muss also die ganze Strecke lang die Last tragen.
00:05:48Aber hier ist das Bild.
00:05:50Ich mag es.
00:05:51Also, was werden wir tun?
00:05:52Wir werden sagen: “Hey, das ist großartig.”
00:05:55Kann nicht tippen.
00:05:57Geh vorwärts.
00:05:59Nach 32 Minuten ist unsere Website also fertig.
00:06:01Wir haben vier verschiedene Szenen.
00:06:02Es hat 10 Generationen gedauert.
00:06:04Und jetzt ist sie auf unserem localhost bereit.
00:06:06Also lasst uns einen Blick darauf werfen.
00:06:07Das ist also unsere Japan-Reise-Website.
00:06:08Was wir tun werden, ist, einfach durchzuscrollen und uns einen Überblick zu verschaffen.
00:06:12Also Leute reisen, haben die U-Bahn.
00:06:15Wir bewegen uns hier zum Haus.
00:06:17Es öffnet sich.
00:06:19Dann gehen sie zum Hotel.
00:06:20Es entfaltet sich.
00:06:22Irgendwie cool.
00:06:23Und dann haben wir den Vogel hier, der anfängt zu fliegen.
00:06:28Also insgesamt, was mag ich?
00:06:30Was mag ich nicht?
00:06:31Ich mag die Visuals.
00:06:32Ich finde, das sieht super cool aus.
00:06:34Weißt du, ich finde individuell innerhalb jeder Szene, ich mag, wie jede einzelne Szene fortgeschritten ist.
00:06:38Wie dieser Teil, wo die U-Bahn reinkommt.
00:06:41Fantastisch.
00:06:41Mein Problem hier ist der Übergang, wo wir von Szene eins zu Szene zwei gehen.
00:06:46Ziemlich harter Schnitt.
00:06:47Vielleicht wollt ihr einen harten Schnitt.
00:06:48Irgendwie, ich schätze, das ist... da ist eine gewisse kreative Richtung dabei.
00:06:51Aber das ist etwas, das wir ändern könnten.
00:06:52Dasselbe hier.
00:06:53Während wir von Szene zwei gehen – unglaubliches Detail, um ehrlich zu sein.
00:06:57Aber während wir von Szene zwei zu drei gehen, wieder ein harter Schnitt.
00:07:01Im Gegensatz von Szene drei zu vier, ich finde, das ist ein fantastischer Übergang.
00:07:04Also öffnet sich das.
00:07:06Boom.
00:07:06Sie sind im Hotel.
00:07:07Aber wenn ihr im Hintergrund zuschaut, achtet auf Szene Nummer vier, wie sie ins Bild kommt.
00:07:12Wie sie zuerst verschwommen ist, auftaucht, einen sehr starken 3D-Effekt gibt.
00:07:17Und der Website Tiefe verleiht.
00:07:19Und dann geht sie nahtlos in Szene vier über.
00:07:22Wie, das ist großartig.
00:07:23Wenn sie das von Szene eins zu zwei und von zwei zu drei hätte, wäre ich super glücklich.
00:07:28Das ist meine Hauptbeschwerde damit.
00:07:31Aber alles andere sieht gut aus.
00:07:32Und in der Lage zu sein, diese Art von Szenenübergängen hinzuzufügen und zu glätten, ich glaube nicht,
00:07:35dass das zu schwierig wäre.
00:07:36Denn wenn ihr diese Generation vergleicht, die wieder Sol GPT 5.6 war, mit dem, was wir in Claude Code erstellt haben,
00:07:41sind die Szenenübergänge hier definitiv ein bisschen eleganter.
00:07:45Das ist also Szene eins, richtig?
00:07:46Also wie diese Dinge oben herausdrücken und es ist wie ein nahtloser Übergang zu denen,
00:07:52die wie... so nah wie möglich an nahtlos, zu denen, die hier wie Kabel sind.
00:07:56Dasselbe hier.
00:07:57Wir gehen rein.
00:07:58Oh, boom.
00:07:58Es öffnet sich.
00:07:59Und dann gehen wir einfach über die Oberseite zur nächsten Szene.
00:08:01Also Szene zu Szene mit den Fable 5 Übergängen, ich denke, wir sind besser.
00:08:06Dasselbe hier.
00:08:06Boom.
00:08:07Wir sind hier.
00:08:07Herauszoomen.
00:08:08Nächste Szene.
00:08:09Das ist also meine Hauptbeschwerde.
00:08:11Ich würde Fable 5 definitiv den Vorzug gegenüber Sol 5.6 hier geben.
00:08:15Aber wie, das ist ein Durchgang, oder?
00:08:18Wie mit einer einzigen Fähigkeit.
00:08:19Ich bin im Allgemeinen sehr beeindruckt davon, wie gut die Fähigkeit, ihr wisst schon, erstellt wurde.
00:08:25Das ist fantastisch.
00:08:26Nun, die nächste Frage ist: Okay, das ist ein visuelles Spektakel.
00:08:29Können wir das zu einer Website machen, die funktionaler ist, je nachdem, was ihr versucht
00:08:33zu tun?
00:08:33Und ich denke nicht, dass das überhaupt ein Problem ist.
00:08:34Ich denke, die technischen Probleme, eine animierte scrollende Website wie diese zu erstellen, die
00:08:38zusammenhängend aussieht und nicht ruckelig aussieht und nicht von geringer Qualität aussieht, ist ziemlich schwierig.
00:08:43Wisst ihr, wenn ich euch bitten würde, das einfach alleine zu tun, denke ich, dass ihr eine Menge Probleme hättet
00:08:46und eine Menge Zeit bräuchtet, um dorthin zu gelangen.
00:08:47Mit dieser Art von Basis denke ich, dass es wirklich einfach ist, dann wie: “Okay, was machen wir
00:08:51mit dem Text?”
00:08:52Was machen wir mit dem CTA?
00:08:53Wie ziehen wir den Nutzer eigentlich vom Helden bis ganz nach...
00:08:56es ist wie das Ausfüllen irgendeiner Art von Formular.
00:08:57Ich glaube nicht, dass das zu schwierig ist.
00:08:58Ich denke nicht, dass wir, wisst ihr, das Rad neu erfinden müssen.
00:09:01Das ist es, was jede einzelne Website tut.
00:09:02Und das über das legen zu können, was wir hier haben, wieder mit Fable 5 und mit
00:09:065.6, ist überhaupt keine Herausforderung.
00:09:09Und die Tatsache, dass das nur eine Fähigkeit in einem Durchgang ist, ist irgendwie atemberaubend.
00:09:13Wiederum, wenn ihr das alleine machen wollt, vor drei Monaten, sechs Monaten, neun Monaten
00:09:16ist es irgendwie ein Schmerz im Hintern.
00:09:18Also, nochmals ein Gruß an Peter Wang für die ursprüngliche Version der Fähigkeit.
00:09:21Beide Versionen, meine und seine, werden am Ende dieser Beschreibung verlinkt sein.
00:09:24Und wie ihr gesehen habt, ist das super unkompliziert.
00:09:26Ihr müsst wirklich nichts tun.
00:09:27Ihr müsst nur auftauchen.
00:09:28Ihr müsst die Fähigkeit aufrufen.
00:09:29Ihr müsst ihr eine Art kreative Richtung geben, und sie wird einfach an die Arbeit gehen.
00:09:32Das ist also der Punkt, an dem ich euch für heute tatsächlich zurücklasse.
00:09:37Lasst mich wie immer in den Kommentaren wissen, was ihr darüber gedacht habt.
00:09:40Stellt sicher, Chase AI Plus auszuchecken, wenn ihr meine Claude Code Master-Klasse
00:09:43und mehr KI-Lektionen wie diese in die Hände bekommen wollt.
00:09:46Und abgesehen davon, wir sehen uns.