스크립트
00:00:00Hier ist etwas, das viele Leute falsch verstehen.
00:00:01Modelle sind beim Design viel besser geworden und wir sehen, wie sie sich täglich weiter verbessern.
00:00:05Aber irgendwann beginnen all diese großartigen Designs gleich auszusehen.
00:00:08Die eigentliche Frage ist also: Was lässt dein Design wirklich herausstechen?
00:00:12Vieles davon hängt von den richtigen Prompts und Anweisungen ab.
00:00:15Hier kommen Fähigkeiten ins Spiel, denn jetzt können die, die wirklich funktionieren, verpackt werden
00:00:19in einen wiederverwendbaren Workflow, den du mit jedem teilen kannst.
00:00:21Viele Leute haben also Fähigkeiten für Design aufgebaut, und einige der besten kommen
00:00:25direkt von den Teams hinter den Tools.
00:00:27Aber nicht jede Fähigkeit da draußen ist es wert, genutzt zu werden, und viele davon helfen nicht wirklich bei
00:00:31deinem Design.
00:00:32Zum Kontext: Wir sind ein Softwareunternehmen und dies ist unser Kanal AI Labs, und auf diesem
00:00:37Kanal zeigen wir euch, wie ihr Prozesse mit KI optimiert, genau wie wir unsere eigenen optimiert haben.
00:00:41Bevor wir in einige der kreativeren Fähigkeiten eintauchen, beginnen wir mit einer, die die
00:00:46Grundlage vieler anderer Design-Fähigkeiten bildet.
00:00:48Anthropiks Front-End-Design-Fähigkeit ist diejenige, die die Designrichtung deiner Website formt
00:00:53und wir haben sie auch in unserem vorherigen Video verwendet.
00:00:55Nachdem du genug Landingpages mit KI generiert hast, bemerkst du ein Muster, bei dem
00:01:00die Seiten alle unterschiedlich sind, sich aber irgendwie gleich anfühlen.
00:01:03Das liegt daran, dass das Modell aus einer riesigen Datenmenge voller gleicher Muster gelernt hat.
00:01:07Wenn es also eine Design-Entscheidung treffen muss, greift es auf die gebräuchlichste zurück.
00:01:11Das Design driftet also immer zu denselben sicheren, generischen Optionen ab, egal was das Projekt
00:01:16tatsächlich ist.
00:01:17Und genau das Problem löst diese Fähigkeit.
00:01:19Sie entkommt diesen sicheren Entscheidungen, indem sie das Modell zwingt, sich auf eine echte Designrichtung festzulegen, bevor
00:01:24es irgendetwas schreibt.
00:01:25Anstatt auf den sicheren, üblichen Look zurückzugreifen, muss es eine Richtung wählen und konsistent
00:01:30damit bleiben.
00:01:30Sie spricht sogar den üblichen KI-Müll direkt in ihrer skill.md-Datei an, was im Grunde genommen die
00:01:36Anweisungsliste der Fähigkeit ist, damit das Modell aufhört, nach den gleichen überverwendeten Schriftarten und den
00:01:41lila Farbverläufen auf weißem Hintergrund zu greifen.
00:01:42Und das ist wichtiger, als es klingt.
00:01:44Denn wenn die meisten Modelle eine Landingpage bauen, sind sie darauf optimiert, korrekt zu sein.
00:01:48Diese Fähigkeit drängt sie jedoch stattdessen dazu, sich auf eine Designrichtung festzulegen.
00:01:52Wir greifen also hauptsächlich bei Landingpages oder Portfolios darauf zurück, bei denen das Design selbst Teil
00:01:56des Produkts ist, da es dem Modell einen stärkeren Standpunkt gibt, bevor es beginnt.
00:02:00Um es zu testen, ließen wir eine Landingpage erstellen und gaben ihm unsere Anforderungen.
00:02:03Und es generierte eine Seite ohne den üblichen KI-Müll, weil es bei der Designrichtung blieb,
00:02:08auf die es sich festgelegt hatte, anstatt in die üblichen Standardeinstellungen abzudriften.
00:02:11Im Designsystem von AI Labs haben wir zwei Fähigkeiten, jede für eine separate Aufgabe.
00:02:15Es gibt die funktionale Fähigkeit, die das UI baut, das Menschen tatsächlich benutzen müssen, wie Dashboards.
00:02:20Und dann gibt es eine für Marketing-UI.
00:02:22Innerhalb der Marketing-Fähigkeit verwendet die skill.md einen Prompt namens “Break the Default”.
00:02:27Und das ist im Grunde Anthropiks Front-End-Design-Fähigkeit.
00:02:29Nur ein wenig modifiziert.
00:02:31Wir haben sie modifiziert, weil das Original für die neueren Modelle ein wenig veraltet ist.
00:02:35Opus 4.8 und Fable 5 wurden beide mit Prompting-Anleitungen ausgeliefert, die zeigen, wie sich Clods verändert haben
00:02:40und wie sich auch die Anweisungen, die du ihm gibst, ändern müssen.
00:02:42Also haben wir eine Version davon in unser eigenes Designsystem integriert.
00:02:45Wie wir bereits erwähnt haben, funktioniert die Anthropic-Design-Fähigkeit nicht gut mit funktionalem UI.
00:02:50Sobald du tatsächliche Produkte baust, ändert sich das Problem komplett.
00:02:53Es geht nicht mehr nur darum, etwas gut aussehen zu lassen.
00:02:55Du versuchst, etwas zu bauen, das als Produkt funktioniert
00:02:58mit vielen Komponenten, die alle ordnungsgemäß funktionieren müssen.
00:03:01Hier verschiebt sich alles von Landingpages hin zu echten Anwendungen.
00:03:04In AI Labs Pro zum Beispiel kannst du sehen, dass die Landingpage eine viel künstlerischere Designsprache hat
00:03:09im Gegensatz zur tatsächlichen funktionalen Ebene der Community, die wirklich langweilig und einfach aussieht
00:03:14wie jede andere Webschnittstelle, mit der du jemals interagiert hast.
00:03:18Und genau da kommt ShadCN ins Spiel.
00:03:20Modelle können definitiv Dashboards alleine bauen.
00:03:23Aber jede der in Dashboards gebräuchlichen Komponenten existiert bereits,
00:03:27gebaut nach professionellem Standard von echten Menschen.
00:03:29Das Modell muss also keine Komponenten von Grund auf generieren und Animationen selbst konfigurieren.
00:03:34Es kann einfach die Komponente nehmen, die bereits vorgefertigt in der Registry vorhanden ist,
00:03:38was im Grunde eine große Bibliothek fertiger Komponenten ist.
00:03:41Das ist der ganze Punkt von ShadCN.
00:03:43Anstatt dass das Modell jede Komponente von Hand baut,
00:03:46zieht es einfach aus dieser Bibliothek von Teilen, die bereits professionell sind, und verwendet sie in deiner App.
00:03:51Und deshalb fühlt sich das Ergebnis wie ein echtes Produkt an.
00:03:53Weil du nicht bei einem groben ersten Entwurf startest und ihn langsam korrigierst.
00:03:57Du startest mit Teilen, die bereits fertig zum Ausliefern gebaut wurden.
00:03:59Das ShadCN-Setup hat zwei Teile, die zusammenarbeiten.
00:04:02Der erste ist die Fähigkeit.
00:04:03Betrachte es als ein Regelwerk.
00:04:05ShadCN hat eine spezifische, korrekte Art Dinge zu bauen, und die Fähigkeit enthält all diese Regeln.
00:04:10Darüber hinaus betrachtet sie, wie dein eigenes Projekt aufgebaut ist.
00:04:12Wenn du also das Modell bittest, etwas zu bauen,
00:04:15stellt die Fähigkeit sicher, dass das Ergebnis den Regeln von ShadCN folgt und zu der Art passt, wie dein Projekt bereits funktioniert.
00:04:20Der Vorteil ist einfach.
00:04:21Du erhältst beim ersten Mal saubere Ergebnisse, anstatt immer wieder dieselben Fehler korrigieren zu müssen.
00:04:26Das zweite ist das ShadCN MCP.
00:04:29Es ist im Grunde eine Live-Verbindung zur Registry von ShadCN,
00:04:32die es dem Modell ermöglicht, reale Komponenten direkt in dein Projekt zu durchsuchen und zu ziehen.
00:04:36Jetzt denkst du vielleicht,
00:04:37warum die Fähigkeit nutzen, wenn das MCP bereits existiert und dir die Komponenten gibt, die du brauchst?
00:04:41Die Antwort ist, dass die Fähigkeit nur geladen wird, wenn sie tatsächlich gebraucht wird,
00:04:44anstatt wie beim MCP die ganze Zeit im Kontextfenster zu sein.
00:04:48Die ShadCN-Fähigkeit gibt dem Coding-Agent die Regeln,
00:04:50Muster und den Kontext über dein Projekt.
00:04:53Zusammen geben sie ihm das Urteilsvermögen, Komponenten korrekt zu verwenden.
00:04:56Bei einer normalen App baust du sie Komponente für Komponente auf, und dieser Ansatz funktioniert gut.
00:05:00Man könnte also erwarten, dass dies direkt auf ein Dashboard übertragbar ist.
00:05:03Und das tut es teilweise auch.
00:05:04Aber Dashboards haben ein anderes Kernproblem als normale Apps.
00:05:07Es geht weniger darum, Komponenten konsistent zu halten, als darum, wie alle Informationen auf dem Bildschirm
00:05:12angeordnet sind.
00:05:12Das bedeutet herauszufinden, wie man die Daten gruppiert und wie viel auf einen Bildschirm passt, bevor es zu unübersichtlich wird.
00:05:17Deshalb gibt es eine separate Fähigkeit namens Dashboard, die genau dafür gemacht wurde.
00:05:21Nicht von ShadCN, sondern von einem anderen Entwickler.
00:05:23Und sie konzentriert das Modell genau auf diese Anordnung.
00:05:26Und weil sie diese Anordnung zuerst durchdenkt, fühlt sich das Ergebnis tatsächlich wie ein echtes
00:05:30Analysetool an, anstatt überladen zu sein.
00:05:33UIUX Pro Max funktioniert anders als alles bisherige.
00:05:36Die meisten Fähigkeiten geben dem Modell einige Designprinzipien und vertrauen darauf, dass es sie anwendet.
00:05:40Diese hier führt jedoch zuerst eine echte Engine aus.
00:05:43Das Problem, um das sie herum aufgebaut ist, ist, dass selbst mit guter Richtung und einer soliden Reihe von Komponenten
00:05:47das Modell immer noch entscheiden muss, welche Designentscheidungen zu deinem Produkt passen.
00:05:51Die meisten Fähigkeiten betrachten Design als eine allgemeine Idee von gut.
00:05:54Also driftet alles zum selben Aussehen, egal was du baust.
00:05:58Und das ist die Lücke, die diese Fähigkeit schließt.
00:06:00Wenn du es bittest, etwas zu bauen, springt es nicht direkt zum Code.
00:06:03Es führt zuerst eine Engine aus.
00:06:04Hinter den Kulissen feuert diese Engine fünf Suchen gleichzeitig über ihre eigene Open-Source-
00:06:09Datenbank auf GitHub ab.
00:06:11Sie zieht die Stile, die zu deinem Produkt passen, aus 161 Industriekategorien.
00:06:15Und aus diesen Auswahlmöglichkeiten wählt sie eine Farbpalette, eine Schriftkombination und ein Seitenlayout, das tatsächlich
00:06:20zu der Branche passt, für die du baust.
00:06:22Dann filtert sie alles heraus, was für diese Art von Produkt falsch aussehen würde, und gibt dem
00:06:26Modell ein maßgeschneidertes Designsystem, was im Grunde das komplette Regelbuch ist, dem das Modell folgt, um
00:06:31die Website zu bauen.
00:06:32Du erhältst also eine wirklich starke Website, bei der jedes Designattribut zu deiner Website-Idee passt.
00:06:37Anstatt dass das Modell ein Design erfindet und hofft, dass es funktioniert, baut es basierend auf
00:06:41einem, das tatsächlich für deinen exakten Anwendungsfall durchdacht wurde.
00:06:44Diese Fähigkeit ist wirklich anders als die anderen.
00:06:46Die anderen geben dem Modell einen besseren Geschmack, während diese eine Entscheidung vorgibt, bevor es anfängt,
00:06:50abgestimmt auf die Art von Produkt, die du tatsächlich machst.
00:06:53Aber bevor wir weitermachen, ein Wort von unserem Sponsor, SciSpace.
00:06:56Wenn du irgendeine Art von Recherche betreibst, hast du wahrscheinlich ChatGPT dafür verwendet.
00:07:00Das Problem ist, dass es selbstbewusst Zitate und Arbeiten erfindet, die gar nicht existieren,
00:07:04und du merkst es meistens erst, wenn dieses falsche Zitat schon in deinem Dokument steht.
00:07:08SciSpace löst das, und jetzt lebt es direkt in ChatGPT.
00:07:12Um es zu testen, habe ich SciSpace geöffnet, bin zu meinem Profil navigiert und habe die ChatGPT-App ausgewählt, um
00:07:17SciSpace zu verbinden.
00:07:18Ich habe nach einem Literaturbericht gefragt, und ChatGPT hat relevante Studien aus der Bibliothek von SciSpace mit über 280
00:07:24Millionen echter Arbeiten gezogen.
00:07:25Es hat sie auch zusammengefasst und mir echte, anklickbare Zitate gegeben, anstatt zu halluzinieren.
00:07:30Und jedes Zitat verlinkt direkt zurück zur Quelle.
00:07:33So kannst du das Dokument öffnen und die exakte Zeile selbst mit einem Klick überprüfen.
00:07:37In direkten Tests hat es sogar relevantere Dokumente gefunden als Tools wie Elicit und ConsenSys.
00:07:42Wenn du also Student oder Forscher bist, verbinde die SciSpace-App in ChatGPT über den ersten Link
00:07:48in der Beschreibung und fange an, Forschung zu erhalten, der du endlich vertrauen kannst.
00:07:52Bisher sorgt alles, was wir hinzugefügt haben, dafür, dass die Seite gut aussieht, während sie stillsteht.
00:07:56Aber eine statische Seite bringt dich nur ein Stück weit.
00:07:58Animationen sind tatsächlich wichtig, weil sie das Nutzererlebnis verbessern und die Zeit erhöhen,
00:08:04die Leute auf der Website verbringen. Aber das Problem ist, Animation ist der Bereich, in dem KI-generierter Code auseinanderfällt.
00:08:09Das eigentliche Problem ist, dass wenn du ein Modell bittest, Animationen hinzuzufügen, es fast immer exakt
00:08:15dasselbe tut, wo Dinge beim Scrollen auf der Seite ins Blickfeld gleiten. Dieser eine Scroll-Reveal ist im Grunde
00:08:20die einzige Bewegung, die es kennt. Aber es ist auch dieselbe Animation auf der Hälfte der KI-gebauten Websites da draußen,
00:08:25und es ist bei weitem nicht das, was echte Bewegung leisten kann.
00:08:27Hier kommt die GSAP-Fähigkeit ins Spiel. GSAP ist die Animationsbibliothek, auf der viele professionelle
00:08:32Websites bereits laufen, und diese Fähigkeit kommt direkt vom Team, das sie baut. Anstatt dass das
00:08:37Modell rät, wie es funktioniert, arbeitet es mit den korrekten Mustern, und sie deckt alles ab, von
00:08:42grundlegender Bewegung bis hin zu den größeren Animationen, die ablaufen, wenn du eine Seite herunterscrollst. Sie handhabt auch
00:08:47die Performance-Seite, den Teil, den die meisten Leute unterschätzen. Ein Hauptgrund, warum KI-Animationen sich
00:08:52ruckelig anfühlen, ist, dass das Modell Dinge durch Ändern ihrer Größe oder Position bewegt, und diese Änderungen zwingen den
00:08:57Browser, die ganze Seite bei jedem Frame neu aufzubauen. Also lenkt die Fähigkeit das Modell auf die
00:09:02Art von Bewegung, die der Browser leicht handhaben kann, und diese eine Gewohnheit allein ist es, die die Animation
00:09:07flüssig hält. GSAP ist am besten auf Landingpages und scrollbasiertem Storytelling, wo alles
00:09:12wie eine Geschichte enthüllt wird, sodass die wichtigen Details beim Betrachter landen, und genau das macht deine
00:09:16Website von einer statischen zu einer dynamischen. Deshalb haben wir im AI Labs-Designsystem explizit
00:09:22in der Marketing-UI-Fähigkeit erwähnt, dass bei Animationen die GSAP-
00:09:27Fähigkeit verwendet werden sollte, um diese Animationen auf den Landingpages zu implementieren. Die nächste Gruppe von Fähigkeiten ist nicht für vollständige
00:09:33Systeme gedacht. Es sind Geschmacksvoreinstellungen, die du einfügst, um das Modell in Richtung eines bestimmten Looks deiner Wahl zu pushen.
00:09:38Zuerst gibt es die minimalistische UI-Voreinstellung. Es ist die Art von Design, bei der man anstatt zu viel auf die
00:09:43Seite zu quetschen, die Dinge einfach und offen hält. Es ist die, die du bei Zeitungen oder Blog-Seiten wählst, wo du möchtest, dass der
00:09:49Inhalt atmet, anstatt dass alles um Aufmerksamkeit kämpft. Auf der komplett gegenüberliegenden Seite gibt es
00:09:54die industrielle, brutalistische UI-Fähigkeit, die roh und schwer mit diesem Anti-Corporate-Stil arbeitet. Dann gibt es
00:09:59Front-End UI UX, ein Allrounder für solide Standardwerte, wenn du nichts Extremes willst. Es ist die
00:10:05sichere Wahl für ein Produkt oder eine Landingpage für ein Unternehmen, die einfach sauber und professionell aussehen muss. Und dann
00:10:10gibt es die Premium Front-End UI-Fähigkeit, die Seiten wie die Landingpages von Luxusmodemarken aussehen lässt.
00:10:16Du stapelst also nicht alle diese gleichzeitig. Stattdessen wählst du diejenige, die zur Stimmung passt, die du anstrebst,
00:10:21und lässt sie das Design steuern. Wenn du also bereits eine Richtung im Kopf hast, sind dies der schnellste
00:10:25Weg, um sie direkt an das Modell weiterzugeben. Bis zu diesem Punkt kannst du eine Seite bauen, die gut strukturiert ist,
00:10:30sich schön bewegt und einen echten Stil hat. Aber professionelle Websites brauchen mehr als nur Animationen. Für
00:10:36professionelle Apps brauchst du echte Bild- und Videovisuals. Modelle nehmen allein meist nur Stock-
00:10:41Bilder aus dem Internet, und meistens passen sie nicht wirklich zu dem, was du brauchst. Higgs Field ist
00:10:46das, was wir verwenden, um das zu überspringen. Es schließt Bild- und Videogenerierung direkt an deinen Agenten an, sodass du
00:10:51nach einem Hero-Bild oder einem Hintergrund-Clip fragen kannst, genau dort, wo du arbeitest, ohne jemals das Terminal zu verlassen.
00:10:56Und Higgs Field ist nicht an ein Modell gebunden. Es hat die meisten der guten Bild- und Videomodelle, also bist du nicht
00:11:01auf die Stärken nur eines beschränkt und kannst das nutzen, welches dir am besten passt. Wenn du Videos machst,
00:11:06ist Cdance dasjenige, das es wert ist zu benutzen, da es eines der besten Videogenerierungsmodelle momentan ist, sodass du
00:11:12echte Visuals anstatt statischer Texte oder grauer Platzhalterboxen auf deiner Website erhältst. Die vorherigen
00:11:17Fähigkeiten waren alle für das Web. Jetzt behandeln wir mobile Fähigkeiten, bei denen ein Großteil des KI-generierten UI still und leise
00:11:23auseinanderfällt, und zwar aus einem einfachen Grund. Modelle neigen dazu, ein Telefon wie eine kleine Website zu behandeln, indem sie dieselben Web-
00:11:29gewohnheiten übernehmen und sie verkleinern. Aber mobil ist kein kleineres Web. Es ist ein eigenes Ding mit eigenen Regeln. Wie
00:11:35Menschen ein Telefon halten, wo ihr Daumen tatsächlich hinkommt, wie Navigation funktionieren sollte, alles ist anders
00:11:40und jede Plattform hat ihre eigene Designsprache, der das Modell normalerweise nicht richtig folgt. Es gibt
00:11:45mehrere Fähigkeiten, um auch die mobile Entwicklung zu optimieren. Die erste ist Mobile App UI Design, die Prinzipien-
00:11:51ebene. Von sich aus behandelt das Modell die Regeln guten mobilen Designs ziemlich locker, aber diese Fähigkeit
00:11:56baut sie direkt ein. Das deckt Dinge wie die Daumenzone ab, die die Hauptschaltflächen dort hält, wo dein
00:12:01Daumen tatsächlich hinkommt, zusammen mit konsistenten Abständen und einem begrenzten Satz an Schriftgrößen, anstatt 10
00:12:06verschiedene. Und das sind im Grunde dieselben Regeln hinter populären Apps wie Airbnb, Duolingo,
00:12:11und Spotify. Das Modell entwirft also mit diesem Sinn, anstatt nur zu raten. Die zweite ist
00:12:16Material 3, was im Grunde die mobile Version dessen ist, was ShadCN für das Web getan hat. Es gibt dem Modell
00:12:21Googles tatsächliches Designsystem, das hinter den meisten Android- und Pixel-Apps steckt. Googles Designsprache hat eine echte
00:12:27Persönlichkeit. Sie ist mutig und farbenfroh mit großen, abgerundeten Formen und federnden Bewegungen, die sich am
00:12:33expressiven Ende des mobilen Designs befinden. Die Fähigkeit bringt das ganze System an Komponenten und Farben mit, also gibst du
00:12:38ihr eine Farbe und sie baut ein komplett passendes Design. Sie prüft sogar, wie genau deine App den
00:12:43Richtlinien von Google folgt, damit die App, die du baust, exakt dem Designsystem entspricht. Aber wenn du
00:12:48vollständig nativ auf dem iPhone baust, kannst du die SwiftUI-Fähigkeiten verwenden. Apples Design liegt am entgegengesetzten Ende von Google.
00:12:53Wo Material mutig und farbenfroh ist, ist Apple zurückhaltender und stützt sich auf diesen durchscheinenden,
00:12:58glasartigen Look, den es jetzt Liquid Glass nennt. Die Fähigkeit zieht Apples eigene Dokumentation direkt aus
00:13:04Xcode auf deinem Mac und gibt sie dem Modell als Regeln. Das Modell rät also nicht, wie sich eine Apple-
00:13:09App anfühlen sollte, es arbeitet nach Apples tatsächlicher Anleitung. Und anstatt etwas, das nur
00:13:14grob wie eine iPhone-App aussieht, bekommst du tatsächlich eine, die sich nativ anfühlt. Und wenn du für
00:13:18iPhone und Android gleichzeitig baust, gibt es die offizielle Expo-Fähigkeit. Expo ist ein Framework für
00:13:23die Erstellung einer App, die sowohl auf Android als auch auf iOS läuft. Du baust also nicht dieselbe App zweimal. Es deckt
00:13:29alles ab, was du für eine echte App brauchst, die auf beiden läuft, von der Navigation und dem Styling bis zu den Plattform-
00:13:34funktionen alles an einem Ort. Egal also, ob du für eine Plattform oder beide gleichzeitig baust, es gibt eine Fähigkeit,
00:13:39die das Gebiet tatsächlich kennt. Nun, all die Fähigkeiten und Workflows und alles andere, was wir bauen und
00:13:43euch in diesen Videos zeigen, findet ihr in AI Labs Pro, unserer Community. Dort bekommt ihr
00:13:48die Ressourcen, die Starter-Pakete und mehr, zusammen mit einem Ort, an dem ihr mit einer Gruppe gleichgesinnter
00:13:53Nerds interagieren könnt, einschließlich unseres Teams. Wenn ihr also Wert in dem gefunden habt, was wir tun, und den Kanal unterstützen wollt,
00:13:58ist das der beste Weg. Der Link ist in der Beschreibung. Das bringt uns zum Ende dieses
00:14:02Videos. Wenn ihr den Kanal unterstützen und uns helfen wollt, weiterhin solche Videos zu machen, könnt ihr das tun,
00:14:07indem ihr den Super-Thanks-Button unten verwendet. Wie immer, danke fürs Zuschauen und ich sehe euch im nächsten Video.