4 verrückte Wege, wie Claude Fable 5 atemberaubende Websites erstellt
AAI LABS
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00Jeder hat Zugriff auf die gleichen KI-Modelle, aber niemand hat die Prozesse drumherum aufgebaut.
00:00:05Vielleicht haben Sie schon einmal gehört, dass das Modell keine Rolle mehr spielt, sondern die Einbettung.
00:00:09Die Einbettung sind im Grunde die Prozesse, die man für sein KI-Modell festlegt.
00:00:13Aber hier ist der Punkt, den Sie verstehen müssen.
00:00:14Modelle entwickeln sich ständig weiter, daher ist die Einbettung, die Sie vor drei Monaten gebaut haben, bereits veraltet.
00:00:19Zum Zeitpunkt dieser Aufnahme ist das beste Modell auf dem Markt das Flaggschiff von Fable 5 Anthropic,
00:00:24aber keine Sorge, wir zeigen Ihnen verschiedene Wege, wie Sie sicherstellen können, dass Ihre Einbettung
00:00:27sich für jedes Modell da draußen weiterentwickelt.
00:00:30Anthropic hat tatsächlich eine offizielle Kompetenz für Front-End-Design,
00:00:34und der Grund dafür ist ein Problem, das sie selbst benannt haben.
00:00:37Was passiert, ist, dass das Modell zur sichersten und durchschnittlichsten Version des Designs driftet,
00:00:42um das Sie gebeten haben.
00:00:43Sie nennen es Konvergieren auf die Verteilung, was im Grunde bedeutet, dass es das baut,
00:00:47was es schon tausendmal zuvor gesehen hat.
00:00:49Angesichts der beworbenen Leistungsfähigkeit dieser neuesten Modelle denken Sie vielleicht, dies sei
00:00:53kein Problem mehr, aber das habe ich nicht festgestellt.
00:00:56In diesem Prompt haben wir es zum Beispiel einfach gebeten, eine Landing Page für eine Plantagen-Website zu erstellen.
00:01:01Um es in die richtige Richtung zu lenken, sagten wir ihm, es solle so kreativ wie möglich sein und sich nicht zu sehr
00:01:06auf den Inhalt selbst konzentrieren.
00:01:07Wir sagten ihm außerdem explizit, es solle keine Kompetenzen laden, da wir mehrere Kompetenzen in unserem System haben
00:01:13und sicherstellen wollten, dass es sie nicht ausnutzt.
00:01:16Das ist das Ergebnis, das es geschaffen hat.
00:01:18Es ist zwar kein schlechtes Design, aber sicher auch nicht das beste.
00:01:22Zum Beispiel gibt es einige Kontrastprobleme und einige der Bilder laden nicht richtig.
00:01:26Aber als wir die Kompetenz hier genutzt haben, änderte sich einiges.
00:01:29Es gibt nichts Besonderes an dieser Kompetenz.
00:01:31Es gibt keine Referenzen oder externe Ressourcen.
00:01:34Es ist buchstäblich nur ein Prompt.
00:01:35Allein dadurch erzeugte es ein viel besseres Design.
00:01:37Das Design war deutlich polierter und ästhetisch ansprechender.
00:01:41Es enthielt subtile Animationen und viel mehr Liebe zum Detail.
00:01:45Insgesamt war das Ergebnis spürbar besser als das, was das Modell normalerweise von sich aus generieren würde.
00:01:49Mit jedem neuen Modell veröffentlichen diese KI-Unternehmen neue Prompting-Guides für Leute, die die Modell-APIs verwenden.
00:01:55Und unter Verwendung des Guides von Fable 5 haben wir die Design-Kompetenz modifiziert.
00:01:58Sie können einfach den allgemeinen Design-Prompt und den Prompting-Guide kopieren.
00:02:02Fügen Sie beides in Claude ein, sagen Sie ihm, dass Sie den Prompting-Guide für das Modell haben,
00:02:06und bitten Sie es, eine aktualisierte Version darauf basierend zu erstellen.
00:02:09Es analysiert den Prompt und gibt Ihnen eine umgeschriebene Version für das neue Modell.
00:02:12Und Sie können tatsächlich sehen, dass die neue Seite viel besser aussieht.
00:02:15Sie ist viel besser strukturiert und hat alle verschiedenen Elemente in Karten umgewandelt.
00:02:19Wir finden, es sieht so viel kreativer aus als das, was Claude normalerweise ausgibt, wegen kleiner Details,
00:02:24wie zum Beispiel, wie der CTA-Bereich in einen Postkartenbrief mit einer Briefmarke darauf verwandelt wurde.
00:02:29Es sind diese kleinen Details, die es so viel kreativer aussehen lassen.
00:02:32Nun, es gibt noch einen Grund, warum diese Unternehmen Prompting-Guides herausgeben.
00:02:35Oft haben die Modelle Verhaltensprobleme und die Guides erklären, wie man sie behebt.
00:02:39Als Opus 4.8 veröffentlicht wurde, wies Anthropic darauf hin, dass das Modell dazu neigte, einen bestimmten Designstil zu bevorzugen.
00:02:45Ihre Lösung bestand darin, das Modell zuerst nach mehreren Designalternativen zu fragen und Sie dann auswählen zu lassen, welche Richtung eingeschlagen werden soll.
00:02:51Aber als Fable 5 herauskam, wurde dieses Problem in seinen Prompting-Guides nicht mehr erwähnt.
00:02:56Und nach dem, was wir gesehen haben, greift das Modell immer noch auf denselben Stil zurück.
00:02:59Es passiert nicht jedes Mal.
00:03:01Aber nach unseren Tests haben etwa zwei von drei generierten Seiten immer noch ein sehr ähnliches Design.
00:03:07Es wurde also nie wirklich behoben.
00:03:08Deshalb lohnt es sich, auch in die Dokumentation für frühere Modelle zu schauen.
00:03:11Oft findet man nützliche Dinge, die es einfach nicht in den neuesten Guide geschafft haben.
00:03:15Unter Verwendung des Prompt-Guides für Opus 4.8 sind wir also zu einer anderen Design-Kompetenz gewechselt,
00:03:20die uns tatsächlich fragte, welche Designrichtung wir wollten.
00:03:23Basierend darauf generierte es dieses Design.
00:03:25Das sieht auch gut aus.
00:03:26Aber ehrlich gesagt ist ein besserer Ansatz, hier design.md-Dateien zu verwenden.
00:03:30Diese Dateien enthalten Markensprache, die man einfach auf seine Seite überträgt.
00:03:33Get design.md ist eine wirklich gute Quelle, wo man Dateien vieler Marken finden kann.
00:03:38Aber verwenden Sie diese erst, nachdem das Modell die Landing Page bereits generiert hat.
00:03:42Und das gilt speziell für Landing Pages, denn wenn Sie sich die design.md-Dateien ansehen,
00:03:47schränken sie alles ein, bis hin zur Schriftart.
00:03:50Und wie Sie in den Beispielen gesehen haben, ist die Schriftart ein großer Teil dessen, was diese Seiten so viel kreativer aussehen ließ.
00:03:55Es gibt zwei Ebenen beim Hinzufügen von Animationen.
00:03:58Das Marketing-UI und das funktionale UI.
00:04:00Die Nutzung der Design-Kompetenz für funktionale UIs wie Dashboards macht sie wunderschön,
00:04:05aber die Leute werden sie nicht wirklich benutzen können.
00:04:07Für das Hinzufügen von Animationen nutzen wir also zwei Dinge.
00:04:10Für Marketing-Seiten weist diese Kompetenz das Modell bereits an, CSS-basierte Animationen hinzuzufügen,
00:04:15aber GSAP-Animationen sind viel besser.
00:04:17Hier kommt ein weiterer Schritt aus dem Prompting-Guide ins Spiel.
00:04:20Aufwand ist der Haupthebel, der das Modell jetzt steuert.
00:04:22Für einfache Aufgaben können Sie ihn auf niedrig bis mittel belassen,
00:04:25aber für Aufgaben wie das Hinzufügen von Animationen ist die Nutzung von X-High eine viel bessere Option,
00:04:30und wird Ihnen weniger Versuche abverlangen.
00:04:32In unserer Marketing-UI-Kompetenz gibt es eine Regel, die festlegt, wann GSAP verwendet werden sollte.
00:04:36Wann immer diese Bedingung ausgelöst wird, lädt es automatisch auch die GSAP-Kompetenz.
00:04:41Wir haben diese Einrichtung tatsächlich auf derselben Landing Page verwendet, die hier gezeigt wird.
00:04:44Selbst mit dieser begrenzten Planung unsererseits hat es einen überraschend guten Job gemacht.
00:04:48Es traf genau die Platzierung, wo die Bildschirmanimation in der Postkarte abgespielt wird,
00:04:52und die Jahreszeiten nacheinander übergehen.
00:04:55Es ist ein gutes Beispiel dafür, wie diese spezialisierten Kompetenzen viele der Implementierungsdetails
00:04:59automatisch verarbeiten können.
00:05:00Wir haben dieses Kompetenzsystem durch viel Ausprobieren erreicht.
00:05:03Und damit meine ich, dass wir wiederholt gegen die 5-Stunden-Nutzungsgrenzen gestoßen sind.
00:05:07Wenn Sie das alles überspringen möchten, können Sie es von unserem Community AI Labs Pro bekommen.
00:05:11Der Link wird in der Beschreibung sein.
00:05:12Wie bereits erwähnt, gibt es zwei Arten von UIs.
00:05:15Der gesamte Workflow hinter funktionalem UI ist völlig anders als bei Marketing-UI.
00:05:20Zum Beispiel ist Planung der erste Schritt, und sie spielt eine große Rolle.
00:05:23Wir werden in diesem Video nicht tief darauf eingehen, aber sobald Sie Ihren Plan fertig haben,
00:05:27können Sie ihn Claude geben.
00:05:27Danach sollten Sie es, anstatt die App bauen zu lassen, bitten, die Mockups mit HTML zu erstellen.
00:05:33Unser Prozess beginnt mit der design.md.
00:05:36Wenn Sie sich bereits entschieden haben, welche design.md Sie verwenden möchten, ist das großartig.
00:05:40Wenn Sie keine haben, ist das auch in Ordnung.
00:05:42Sie können ohne sie weitermachen.
00:05:43Wenn Sie sich zum Beispiel unsere selbst gebaute Community ansehen,
00:05:45werden Sie sofort bemerken, dass das Design außen und das Design innen völlig
00:05:50anders sind.
00:05:51In unserem Fall wurde alles zuerst mit HTML-Mockups geplant.
00:05:54Wir begannen mit der Erstellung einer design.md, die teilweise von Notion inspiriert war.
00:05:58Unter Verwendung dieses Designsystems bauten wir alle Bildschirme als Mockups, bevor wir die eigentliche Anwendung schrieben.
00:06:04Nachdem wir diese Mockups fertiggestellt und validiert hatten, konvertierten wir sie in diese voll funktionsfähige Anwendung.
00:06:09Bevor wir nun zum wichtigsten Teil beim Entwerfen funktionaler UIs kommen, hören wir uns
00:06:13ein Wort von unserem Sponsor an.
00:06:14Viele Leute, die Claude Code kürzlich benutzt haben, haben bemerkt, dass ihre Kosten durch die Decke gehen.
00:06:18Ehrlich gesagt ist das der Grund, warum Kimi meine Aufmerksamkeit erregte.
00:06:20Sie haben ein Open-Source-Modell gebaut, das beim Programmieren wirklich gut ist, zu etwa 1/8 des Preises von Opus.
00:06:26Ihr neuestes Modell, Kimi K2.6, hat gerade Platz eins bei Sweebench Pro erreicht,
00:06:30im Grunde der härteste reale Programmier-Benchmark, den es derzeit gibt.
00:06:33Sie haben nicht nur das Modell veröffentlicht, sie haben Produkte auf K2.6 aufgebaut, die wirklich nützlich sind.
00:06:38Sie können produktionsreife Websites mit gutem Front-End-Design generieren,
00:06:41vollständige Präsentationsfolien aus einem einzigen Prompt erstellen und sogar Datenbanken und Authentifizierung direkt nutzen.
00:06:47Aber das verrückteste Feature ist wahrscheinlich Agent Swarm.
00:06:49Sie können 300 KI-Agenten parallel für eine einzige Aufgabe einsetzen.
00:06:53Statt eines Agenten, der alles langsam erledigt, erhalten Sie ein ganzes KI-Team, das gleichzeitig arbeitet.
00:06:58Und all dies läuft auf einem Open-Source-Modell, das weit weniger kostet als die Closed-Source-
00:07:03Alternativen, für die die Leute bezahlt haben.
00:07:05Also, wenn Sie täglich Claude Code oder Cursor verwenden und Ihre API-Rechnung in letzter Zeit schmerzhaft geworden ist,
00:07:09ist Kimi einen Versuch wert.
00:07:11Wenn Sie sich über unseren Link anmelden, erhalten Sie außerdem einen zusätzlichen 10%-Quotenbonus auf Ihren ersten Einkauf
00:07:16vor dem 30. Juni. Klicken Sie auf den Link in der Beschreibung und fangen Sie an zu bauen.
00:07:19Nun, es gibt noch einen weiteren wirklich wichtigen Teil beim Entwerfen funktionaler UIs, nämlich das Experimentieren.
00:07:24Im Laufe der Zeit haben wir viele verschiedene Ansätze ausprobiert, um dieses Problem zu lösen.
00:07:28Anfangs haben wir Aufgabenlisten mit mehreren Agenten verwendet, die parallel arbeiteten,
00:07:32wobei jeder Agent eine andere Variation der UI generierte.
00:07:35Das Ziel war es, mit mehreren Designs zu experimentieren und herauszufinden, welcher Ansatz tatsächlich am besten funktionierte.
00:07:40Später begannen wir, Unteragenten für diesen Workflow zu nutzen, aber das spielt keine Rolle mehr.
00:07:45Mit einer Million Kontext-Token können Sie es auch mit dem Hauptagenten tun.
00:07:48Wir haben intern auch etwas namens Gallery Viewer gebaut.
00:07:51Der Zweck des Gallery Viewers ist einfach.
00:07:53Wenn Sie mehrere HTML-Mockups generieren, sollten sie nicht zwischen Dutzenden von Dateien verloren gehen.
00:07:58Stattdessen werden sie automatisch zusammen in einer einzigen Ansicht geöffnet, was es einfach macht, sie
00:08:03nebeneinander zu vergleichen. Als wir zum Beispiel die Community-Plattform bauten, wussten wir anfangs nicht,
00:08:08wie ein Community-Interaktionsraum aussehen sollte. Wir wussten, dass wir ein Community-Erlebnis wollten,
00:08:12aber es gab viele verschiedene Möglichkeiten, wie Benutzer miteinander interagieren konnten. Also, anstatt uns
00:08:17auf ein einziges Design festzulegen, experimentierten wir mit HTML-Mockups. Wir beauftragten den Agenten, mehrere
00:08:22Community-Kanal-UIs als HTML-Mockups zu erstellen, damit wir sie vergleichen konnten. Der Agent würde dann automatisch
00:08:28mehrere Versionen erstellen und sie im Gallery Viewer öffnen. Von dort aus konnten wir jede
00:08:33Variation vergleichen und entscheiden, welche Richtung die stärkste war. Eine Sache, die Sie in diesem Beispiel bemerken werden,
00:08:37ist, dass die Designs nicht alle visuell konsistent aussehen. Idealerweise sollten sie dieselbe Designsprache
00:08:42teilen, während sie verschiedene Interaktionsmuster erforschen. Der Grund, warum das hier nicht passierte,
00:08:46ist, weil keine design.md bereitgestellt wurde. Wenn eine design.md existiert, verwendet das Modell sie als Quelle der Wahrheit für
00:08:53Farben, Abstände, Typografie, Komponenten und das gesamte Styling. So bleiben alle generierten Mockups
00:08:59visuell konsistent, während sie dennoch verschiedene UX-Ansätze erforschen. Es gibt auch einige kleinere Details,
00:09:04die einen großen Unterschied machen können, wie zum Beispiel das Hinzufügen von Animationen zu funktionalen UIs. Wir haben eine Reihe von Animationsrichtlinien
00:09:10in unserer eigenen Kompetenz dokumentiert, und Sie können sie gerne kopieren, wenn Sie möchten. Sie haben bisher
00:09:15recht gut für uns funktioniert und wir verfeinern sie kontinuierlich. Eine Sache, die ich jedoch dringend empfehlen würde, ist, nicht
00:09:20zu viele Animationen im funktionalen Teil Ihrer Anwendung zu verwenden. Übermäßige Animationen mögen auf den ersten Blick
00:09:25beeindruckend aussehen, aber sie machen produktivitätsorientierte Schnittstellen oft eher ablenkend. Sobald Sie das
00:09:29Design fertiggestellt haben, ist der nächste Schritt, die ShadCN-Kompetenz zu verwenden. Ich habe bereits die funktionale UI-Kompetenz
00:09:35mit der ShadCN-Kompetenz verbunden, daher erledigt sie den Großteil des Workflows automatisch. Zuvor hatten wir viel
00:09:40aufwendigere Workflows. Wir würden einen detaillierten Implementierungsplan speziell für das ShadCN
00:09:45MCP erstellen und wir würden diesen Plan verwenden, um die gesamte Schnittstelle zu bauen. Während dieser Ansatz funktionierte, fügte er auch
00:09:50viel Komplexität hinzu. Heute ist der Workflow deutlich einfacher. Alles, was Sie brauchen, ist das fertige
00:09:55HTML-Mockup und die ShadCN-Kompetenz. Der Grund, warum das so gut funktioniert, ist, dass die ShadCN-Kompetenz bereits eine
00:10:01riesige Menge an Kontext und Implementierungswissen enthält, das von den Schöpfern von ShadCN selbst zusammengestellt wurde.
00:10:06Deshalb kann es ein fertiges HTML-Mockup nehmen und es fast eins zu eins reproduzieren unter Verwendung von
00:10:11tatsächlichen ShadCN-Komponenten. Sie müssen sich also in diesem Stadium keine Sorgen über die Erstellung komplizierter
00:10:16Implementierungspläne oder Konvertierungsworkflows machen. Wenn Ihnen diese Designprozesse gefallen, abonnieren Sie den
00:10:21Kanal und klicken Sie auch auf den Hype-Button. Wir posten Inhalte, die Ihnen helfen, neue Wege zu lernen, um
00:10:26verschiedene Prozesse in verschiedenen Unternehmen mit KI zu optimieren. Ihre Unterstützung hier würde uns viel bedeuten.
00:10:31Der Guide fordert Sie auch auf, die Selbstverifizierung für diese Modelle explizit zu machen. Sie können einen Prompt in die
00:10:36Claude.md einfügen, der den Agenten bittet, seine Ausgabe zu verifizieren. Anstatt nun den Hauptagenten zu verwenden,
00:10:41sollten Sie einen Unteragenten verwenden, der die Ausgabe verifizieren kann. Und um sie zu verifizieren, brauchen Sie etwas,
00:10:46das Sie vergleichen können. Zeigen Sie dazu den Unteragenten immer auf Ihre design.md.
00:10:50Eine weitere Sache, die im Guide erwähnt wird, ist, dass Modelle besser funktionieren, wenn sie Kontext über
00:10:55Ihre Aufgabe haben. Für das Design bedeutet dies Wissen darüber, was das Produkt tatsächlich ist.
00:10:59Viele Frameworks haben ein separates product.md eingerichtet, aber unserer Meinung nach
00:11:03hat man, wenn man eine Claude.md einrichtet, ausreichend Kontext, damit das Modell versteht, worum es in Ihrem
00:11:09Projekt geht. Die funktionale UI-Kompetenz bewirkt also, wann immer sie eine neue Aufgabe erhält,
00:11:13dass das Modell auch die Claude.md liest. Zusätzlich dazu enthält sie auch einen Mox-Ordner,
00:11:18der alle HTML-Dateien enthält, sodass Sie darauf verweisen können, wann immer Sie Ihrer App neue Elemente hinzufügen.
00:11:24Darüber hinaus wäre es großartig, wenn Sie auch die design.md hätten. Das sind die Dateien,
00:11:28die Sie in Ihrem Projekt haben müssen. Heutzutage können viele SaaS-Apps einfach geklont werden.
00:11:32Wir selbst verwenden maßgeschneiderte Software für das Teammanagement. Wir haben unsere eigene Version gebaut, weil
00:11:37wir nicht viele Leute beherbergen müssen. In diesem Fall müssen Sie es nicht wirklich von Grund auf neu machen.
00:11:42Sie müssen nur sicherstellen, dass Sie deren UI so perfekt wie möglich klonen. Bei neueren Modellen,
00:11:46ist ihre Fähigkeit, Bilder zu verstehen, so viel besser geworden, dass der Workflow hier wirklich einfach wird.
00:11:51Beim Klonen gibt es zwei verschiedene Modi. Modus B ist für Marketing-UI. Dafür
00:11:56gibt es ein wirklich nützliches CLI-Tool namens single-file CLI. Damit können Sie alles auf einer Seite erfassen,
00:12:01einschließlich des HTML, CSS und sogar der auf dieser Website verwendeten Bilder. Wenn die Seite mehrere Seiten enthält,
00:12:07können Sie auch die sitemap.xml-Datei abrufen, die im Wesentlichen eine Karte der Website ist. Unter Verwendung dieser Sitemap
00:12:13kann das Modell die anderen Seiten ebenfalls entdecken und abrufen. Das Problem beginnt, wenn Sie auf Seiten stoßen, die
00:12:19hinter einer Authentifizierung liegen. Wenn Sie zum Beispiel Notions UI klonen wollten, könnten Sie das Tool nicht einfach auf Notions Website richten.
00:12:23Wenn Sie die URL von Notion angeben, erhalten Sie nur die Landing Page.
00:12:28Was Sie eigentlich wollen, ist die Anwendungsschnittstelle hinter dem Login-Bildschirm. Glücklicherweise sind Modelle sehr gut darin geworden,
00:12:34Schnittstellen anhand von Bildern zu verstehen, daher sind Screenshots in diesen Situationen die
00:12:40beste Option. Sie müssen die verschiedenen Zustände der Schnittstelle sehr sorgfältig erfassen. Nehmen wir an, Sie haben eine
00:12:45Seite geöffnet, Sie möchten Screenshots zeigen, die zeigen, was beim Hovern passiert und wie verschiedene Interaktionen das Layout beeinflussen.
00:12:50Nehmen wir ein weiteres Beispiel. Angenommen, Sie öffnen eine Seite, auf der zwei Seiten in einer Spalte sind. Wenn Sie nur das bereitstellen,
00:12:56wird das Modell nicht wissen, dass Sie zwei Spalten machen können. Sie müssen extrem gründlich sein und allen Kontext bereitstellen, den das Modell benötigt.
00:13:01Sobald Sie die Screenshots erfasst haben, fügen Sie die Bilder nicht direkt in den Prompt ein. Stattdessen,
00:13:07ziehen Sie sie in Claude. Dies gibt dem System Zugriff auf die Bildpfade, die Modus A verwenden kann. Modus A wird
00:13:13dann all diese Screenshots sammeln, in den Klon-Ordner legen und sie als Referenzmaterial verwenden.
00:13:19Diese Screenshots werden effektiv zur Grundlage für den Klonprozess. Von dort aus können Sie eine
00:13:25anfängliche HTML-Version der Schnittstelle generieren und dann dazu übergehen, die endgültige Anwendung zu bauen.
00:13:29Das bringt uns zum Ende dieses Videos. Wenn Sie den Kanal unterstützen und uns helfen möchten, weiterhin Videos
00:13:35wie dieses zu machen, können Sie dies tun, indem Sie den Super-Thanks-Button unten verwenden. Wie immer danke fürs
00:13:39Zuschauen und ich sehe Sie im nächsten.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video