스크립트
00:00:00Es gibt viele Fähigkeiten, mit denen man mit KI wunderschöne Websites gestalten kann, und jede davon
00:00:04ist anders, aber nicht alle funktionieren. Einige haben einen intensiven Workflow, der beeindruckend wirkt,
00:00:09und am Ende erzeugen sie dennoch eine Website, die aussieht wie jede andere. Nur wenige
00:00:13davon halten tatsächlich, was sie versprechen. Nun fragen Sie sich vielleicht, warum Sie diese Fähigkeiten überhaupt brauchen,
00:00:17da die Modelle bereits mächtig genug sind und heutzutage wirklich gut designen. Doch egal wie
00:00:22mächtig ein Modell ist, jedes Modell folgt beim Design seinem eigenen Muster und dieses Muster ist leicht
00:00:26zu erkennen. Deshalb braucht man etwas, das sie von diesem Muster wegführt und Ihre
00:00:30Website wirklich hervorheben lässt. Diese Fähigkeiten wurden von Leuten entwickelt, die umfangreiche Erfahrung im Design
00:00:36haben, und sie haben den Workflow, den sie getestet und der für sie funktioniert hat, in eine wiederverwendbare Form gebracht, damit
00:00:41auch Sie ihn nutzen können. Wenn Sie neu hier sind, dann herzlich willkommen. Wir sind ein Softwareunternehmen und das sind die AI Labs, und in
00:00:46diesem Video gehen wir auf die Fähigkeiten ein, die wir getestet haben und die uns tatsächlich Ergebnisse geliefert haben. Und eine Sache,
00:00:51die man vor dem Start wissen sollte, ist, dass Sie Claude Design selbst keine Fähigkeiten hinzufügen müssen. Diejenigen,
00:00:55die Sie in Ihrem Claude-Setup hinzufügen, sind dieselben, die Sie in Claude Design verwenden können. Sie fügen die Fähigkeit also einfach
00:01:00über die Claude-Einstellungen hinzu. Und obwohl wir diese Fähigkeiten in Claude Design nutzen, würden sie mit Claude
00:01:05Code, Codex oder jedem anderen Agenten, den Sie verwenden, funktionieren und dasselbe Ergebnis liefern. Als Erstes sprechen wir
00:01:10über die Fähigkeiten von Emil Kowalski. In diesem Set gibt es nicht nur eine, sondern neun Fähigkeiten und jede einzelne
00:01:15ändert einen anderen Teil des Designs. Dies sind die Fähigkeiten, die wir selbst auch nutzen, wenn wir an
00:01:20Designs arbeiten, egal ob mit Claude Code oder in Claude Design. Es gibt viele Fähigkeiten darin,
00:01:25die jeweils einen anderen Designbereich abdecken. Darunter befindet sich Apple Design, das all die
00:01:30Designprinzipien enthält, die Apple in seinen eigenen Produkten verwendet, und sie für die Nutzung auf anderen Websites verfügbar macht.
00:01:35Es gibt auch eine Animationsvokabular-Fähigkeit, die im Grunde Ihre vage Animationsbeschreibung
00:01:40in exakte Worte umwandelt, die ein Modell verstehen kann. Sie können so viele Fähigkeiten hinzufügen, wie Sie möchten, aber es gibt zwei
00:01:45davon, die wir am häufigsten nutzen, weil sie die Möglichkeiten von Claude Design enorm verbessern.
00:01:50Eine davon ist die Email-Design-Engineering-Fähigkeit, die Anweisungen enthält, wie man schöne
00:01:55UI-Komponenten baut und ihnen Animationen hinzufügt, was sie zur besten Fähigkeit macht, um Ihr Design zu starten.
00:02:00Die andere, die wir verwenden, ist Animate, und sie enthält einen vollständigen Workflow zum Hinzufügen von Animationen zu einer
00:02:05bereits gebauten Website mit einem detaillierten Schritt-für-Schritt-Prozess. Um sie zu nutzen, müssen Sie sie zu Claude
00:02:10hinzufügen, und sobald sie hinzugefügt sind, können Sie sie in Claude Design verwenden. Von dort aus tippen Sie einen Schrägstrich und den Namen der Fähigkeit ein
00:02:15und teilen dem Prompt mit, welche Site Sie wollen. Da wir das Design noch nicht gebaut hatten, haben wir zuerst die
00:02:20Emil-Design-Engineering-Fähigkeit verwendet. Dann ruft sie die Fähigkeit auf, aber bevor sie etwas baut, stellt sie Ihnen
00:02:25Fragen über die App, genau so, wie Claude Design es von alleine tut. Wenn Sie diese beantworten, baut sie das
00:02:30Design. Die erste Version, die Claude Design erstellt, wirkt minimal mit einem monotonen Stil, aber die Animationen,
00:02:35die dabei herauskamen, wirkten nicht ganz so ausgefeilt und waren an einigen Stellen nicht synchron. Hier kommt also die Animate-Fähigkeit
00:02:40ins Spiel, denn sie verfeinert tatsächlich die Animationen auf bereits gebauten Websites. Diese Fähigkeit versteht, wie
00:02:46die Site funktioniert, und bestimmt, was Bewegung braucht und was nicht. Sobald Claude mit den Änderungen
00:02:51fertig war, waren die Animationen der Site stark verbessert. Die Bewegung war synchron zum Scrollen und das Ganze
00:02:56wirkte zielgerichteter im Vergleich zu dem, was wir vorher hatten. Nun denken Sie vielleicht, dass das gar nicht so
00:03:01anders ist als das, was Claude normalerweise produziert, aber das liegt daran, dass dies eine Landingpage war. Auch wenn sie
00:03:06die sehr kleinen und subtilen Animationen hier verbessert hat, ist der Hauptanimationsstil, der auf Landingpages
00:03:11gut aussieht, derjenige mit scrollbasierten Animationen, und wir haben in vorherigen Videos reichlich Fähigkeiten dazu behandelt.
00:03:16Aber der Bereich, in dem diese Fähigkeit wirklich gut funktioniert, sind die kleinen Elemente der funktionalen
00:03:21Seite von Apps. Zum Beispiel haben wir an einer Website für ein Restaurant gearbeitet und die Animate-Fähigkeit genutzt, um
00:03:26Animationen hinzuzufügen, und sie fügte winzige Animationen hinzu, die das Gefühl bei der Nutzung der Website verbesserten, wie das Hinzufügen von Animationen,
00:03:32wenn wir das Formular absenden, und Grafiken, die beim Hovern aufpoppen. All diese Details zusammen machten die
00:03:37Site viel interaktiver und verbesserten die Erfahrung bei ihrer Nutzung. Und Sie können so viele
00:03:42von Emils Fähigkeiten hinzufügen, wie Sie möchten, da jede davon eine bedeutende Bereicherung für Ihr Design-Toolkit
00:03:47sein wird. Die nächste, über die wir sprechen werden, ist Conard Lees Garden-Fähigkeit, und auch dies ist eher eine
00:03:52Sammlung als eine einzelne Fähigkeit. Sie enthält fünf Fähigkeiten, die Dinge wie Videopräsentationen
00:03:57und Bilder abdecken, aber die wichtigste davon ist die Web-Design-Engineer-Fähigkeit,
00:04:02und das liegt daran, dass diese Fähigkeit tatsächlich Anweisungen enthält, wie man wie ein erstklassiger Design-Engineer
00:04:07designt. Diese Fähigkeit konzentriert sich ausschließlich darauf, die Optik atemberaubend zu machen, nicht funktional. Die Art und Weise, wie diese
00:04:12Fähigkeit funktioniert, besteht darin, dass sie Ihre Anforderungen aufnimmt und diese mit Ihnen durchgeht, bis klar ist, was Sie
00:04:17wollen, und dann nach echten Designs sucht, an denen sie sich orientieren kann. Ihr Prinzip ist, dass gutes Design niemals aus
00:04:22dem Nichts entsteht, genau wie jedes Design da draußen von etwas inspiriert ist, das vor ihm da war. Sie
00:04:27stützt sich zudem auf Designs ab, die zuvor funktioniert haben. Diese Fähigkeit enthält auch eine Reihe von
00:04:32Referenzen zu verschiedenen designbezogenen Bereichen. Sie decken ab, wie man ein Design beurteilt, wie Designs gewöhnlich
00:04:38schiefgehen, und Stil-Rezepte für bekannte Websites wie Apple und Linear, sodass sie betrachten kann, wie diese Sites tatsächlich
00:04:44funktionieren, während sie Ihre baut. Sobald Sie sie also in Claude Design hinzugefügt haben, können Sie sie nutzen, indem Sie einen Prompt eingeben,
00:04:49der beschreibt, was Sie bauen möchten. Die Site, die wir daraus erhielten, war viel interessanter als das, was Claude Design
00:04:55von sich aus ausgibt. Sie war gründlicher und aus Designperspektive besser als die Version, die Claude Design alleine erstellt hätte.
00:05:01Und wenn Sie bereits ein Design haben und dann die Fähigkeit ausführen, geht sie dieses Design durch und bewertet es in verschiedenen Bereichen.
00:05:08Sie können das Design immer weiter verfeinern und es wiederholt ausführen, bis es eine perfekte Punktzahl erreicht und genau dem
00:05:13Design entspricht, das Sie sich tatsächlich wünschen. Aber bevor wir andere Fähigkeiten erkunden, wäre es großartig, wenn Sie den Kanal abonnieren
00:05:18und den Daumen-nach-oben-Button drücken. Diese kleine Geste der Unterstützung bedeutet uns sehr viel.
00:05:22Die nächste Fähigkeit, über die wir sprechen werden, ist die AI-Design-Fähigkeit von Elia Design, und diesmal ist es nur eine einzelne Fähigkeit, die für Landingpages gebaut wurde.
00:05:30Alles, was sie tut, befindet sich in einer einzigen Datei, und ihre Aufgabe ist es, Ihre Idee in ein visuelles System zu verwandeln, was im Grunde der Satz von Regeln ist,
00:05:37dem dann alles auf der Seite folgt, einschließlich Farben, Typografie und Abständen.
00:05:41Diese Fähigkeit ist ein spezialisiertes, vollständiges System zum Gestalten von Landingpages, die sich wirklich lohnen.
00:05:46Der dahinter stehende Gedanke ist, dass eine Landingpage keine Homepage ist. Eine Homepage versucht, vielen verschiedenen Menschen gleichzeitig gerecht zu werden.
00:05:53Aber eine Landingpage hat eine einzige Aufgabe, und das ist, Menschen dazu zu bringen, tatsächlich aktiv zu werden.
00:05:57Modelle neigen dazu, Homepages zu generieren, die funktionieren, aber sie sind nicht darauf spezialisiert, Landingpages so zu gestalten wie diese Fähigkeit.
00:06:03Sie strukturiert die Seite also um diese eine Aktion herum, die jemand ausführen soll, der Ihre Site besucht, sodass der Fokus durch die entsprechende Strukturierung auf diese Aktion gelenkt wird.
00:06:12Sie hält das Design außerdem in einem konsistenten visuellen Stil und kümmert sich um andere Bereiche des Webdesigns, die die meisten Modelle übersehen, einschließlich der Gewährleistung, dass die Website über die Suche leicht gefunden werden kann.
00:06:22Sobald Sie sie also in den Claude-Fähigkeiten installiert haben, führen Sie sie mit einem Prompt aus, wann immer Sie ein Design wünschen.
00:06:27Sie stellt Ihnen ebenfalls zuerst Fragen, und sobald Sie diese beantwortet haben, beginnt sie mit dem Designen.
00:06:31Die erstellte Site fühlte sich an wie eine echte Marke und traf genau den Vibe, den wir uns vorgestellt hatten.
00:06:36Und durch die Strukturierung der einzelnen Elemente war es viel wahrscheinlicher, dass diejenigen, die die Site betraten, tatsächlich einen Kauf tätigen würden.
00:06:43Aber hören wir uns zunächst ein Wort unseres Sponsors an.
00:06:45Make. Sie kennen Make bereits für visuelle Automatisierung, aber sie haben gerade Maya gelauncht.
00:06:49Es ist ein KI-Kollege, der direkt im Make-Builder lebt.
00:06:52Die meisten KI-Builder übergeben Ihnen eine Blackbox und Sie hoffen einfach, dass sie funktioniert.
00:06:56Maya ist anders. Sie sagen ihr auf einfaches Englisch, was Sie wollen, und sie baut es direkt vor Ihren Augen.
00:07:00Also haben wir es ausprobiert. Wir baten Maya, unserem Team jedes Mal eine Slack-Zusammenfassung zu senden, wenn ein neuer Lead in Salesforce landet, und es ging direkt auf die Canvas.
00:07:07Maya hat die Anfrage durchdacht, die richtigen Tools ausgewählt, jedes Modul abgebildet und die gesamte Automatisierung auf der Canvas verknüpft, während wir zusahen.
00:07:15Sie sehen jede Entscheidung, sodass Sie jederzeit eingreifen und etwas anpassen können.
00:07:19Auf dem Weg dorthin erhalten Sie nicht nur eine Automatisierung, sondern lernen auch, wie Make tatsächlich funktioniert.
00:07:23Es ist im Moment in der Betaversion kostenlos auszuprobieren. Der Link ist in der Beschreibung.
00:07:26Die nächsten Fähigkeiten, über die wir sprechen werden, sind von Meng To.
00:07:29Er ist tatsächlich ein Designer, der schon lange in der Branche tätig und für seine immersiven, scrollbasierten Storytelling-Designs bekannt ist.
00:07:36Und er hat alles, was er herausgefunden hat, in ein System von Design-Fähigkeiten gepackt, damit auch Sie es nutzen können.
00:07:41Dies enthält eine Vielzahl von Fähigkeiten, die verschiedene Bereiche abdecken.
00:07:44Sie alle konzentrieren sich darauf, qualitativ hochwertige Designs zu generieren, die tatsächlich eine Geschichte erzählen, anstatt nur visuell gut auszusehen.
00:07:51Eines davon ist Video to Super Prompt, das funktioniert, indem es eine Bildschirmaufnahme oder einen Rundgang durch eine Website nimmt und Tools auf Ihrem Computer verwendet, um diese Aufnahme in einen Prompt für Ihren Agenten umzuwandeln.
00:08:01Aber die Fähigkeit, über die wir wirklich sprechen wollen, sind Awards Quality Sites.
00:08:05Awards ist die Website, die Wettbewerbe für atemberaubendes Design veranstaltet, und die dort gewinnenden Websites gelten als die am besten gestalteten Sites im Web.
00:08:12Diese Fähigkeit listet tatsächlich die Prinzipien und Designdetails auf, die Websites auf Award-Niveau ausmachen.
00:08:17Und das ist wichtig, weil Claude von sich aus kein Design auf diesem Niveau baut.
00:08:21Die Fähigkeit bringt diese Prinzipien also in den Prozess ein und steuert die Richtung des Designs.
00:08:25Und was diese auszeichnet, ist, dass das Set neben den Prinzipien auch die eigentlichen Techniken und die spezifischen Effekte enthält, die eine Site teuer wirken lassen – der Teil, den ein Modell nicht von alleine produziert.
00:08:35Sobald Sie die Award-Fähigkeit hinzugefügt haben, geben Sie ihr einen Prompt, der die gewünschte Site beschreibt.
00:08:40Und das Ergebnis ist eine Website, die genau wie die preisgekrönten Seiten strukturiert und gestaltet ist.
00:08:45Es gibt dort einen dezenten animierten Hintergrund, aber das, was wirklich auffiel, war das Scrollen.
00:08:49Es nutzte diesen scrollbasierten Storytelling-Ansatz, ganz wie die Websites, die auf Awards vorgestellt werden.
00:08:54Der nächste Skill-Set stammt von Jakub Krehel.
00:08:57Und im Gegensatz zu den anderen, bei denen ein Skill jeden Teil der Website auf einmal übernimmt, wird es hier in mehrere Skills aufgeteilt, sodass jeder Bereich seinen eigenen bekommt.
00:09:05Alle Elemente des Designs, einschließlich Typografie, Farbe, Barrierefreiheit und mehr, erhalten jeweils einen eigenen Skill, anstatt dass alles über einen einzigen läuft.
00:09:13Man kann jeden dieser Skills zu Claude Design hinzufügen, aber der, den wir nutzen, ist der Review-Skill.
00:09:18Wir verwenden ihn, weil er alle Aspekte des Designs umfassend überprüft, damit wir basierend auf der Punktzahl Anpassungen vornehmen können.
00:09:24Dieser Review-Skill funktioniert noch besser, wenn man ihn mit GitHub verbindet, da er überprüft, wie das Design vor und nach den Änderungen aussah.
00:09:31Wenn vor der letzten Änderung etwas funktionierte und jetzt nicht mehr, markiert er das und kann Ihnen sagen, dass es wegen einer bestimmten Änderung nicht mehr funktioniert.
00:09:40Er betrachtet Dinge wie Animationen, Barrierefreiheit und wie sich die Website bei verschiedenen Bildschirmgrößen schlägt, und listet alles auf, damit man es beheben kann.
00:09:48Wir nutzen auch einen Skill für besseres Layout, da Claude Design genau hier oft Schwierigkeiten hat.
00:09:52Dieser kümmert sich um den Abstand, die Positionierung und die Ausrichtung im Design und geht dabei sehr gründlich vor.
00:09:58Zum Beispiel fiel ihm auf, dass ein Datum auf der Seite mehr Platz brauchte, und er nannte sogar die genaue Anzahl der zusätzlichen Pixel.
00:10:04Man sagt ihm dann einfach, er soll alle seine Markierungen beheben.
00:10:06Das lässt die Website nicht völlig anders aussehen, aber es sorgt dafür, dass sie den Designprinzipien entspricht, nach denen Profis tatsächlich arbeiten.
00:10:14Der nächste Skill auf der Liste ist Tastemaker.
00:10:16Sein Hauptzweck ist es, die generischen Standards der Modelle zu vermeiden, und das Besondere ist die Art und Weise, wie er das tut.
00:10:22Er arbeitet direkt mit den Pixeln einer echten Referenz, sodass bei der Übersetzung eines Looks in Worte nichts verloren geht.
00:10:28Wenn man dem Modell ein Referenzbild gibt, wandelt es dies normalerweise in eine textbasierte Zusammenfassung um, die es später als Referenz nutzen kann.
00:10:34Dieser Skill verwendet jedoch Skripte, um die genauen Designdetails zu extrahieren und in einem strukturierten Format zu speichern, das Agenten später verwenden können.
00:10:42Dadurch bleiben Designdetails erhalten, die in einer textbasierten Zusammenfassung sonst verloren gehen würden.
00:10:46Er setzt zuerst auf Skripte, um viele Dinge zu erledigen, die nicht zwingend vom Agenten selbst ausgeführt werden müssen.
00:10:52Zum Beispiel treibt er sie in verschiedene Richtungen und probiert verschiedene Varianten aus.
00:10:55Die Entscheidungen, die er trifft, gelten für das gesamte Projekt und beschränken sich nicht nur auf einen Bildschirm.
00:10:59Dieser Skill verleiht Modellen echtes Design-Gespür, damit sie nicht auf dieselben generischen Muster zurückfallen.
00:11:05Nachdem man ihn hinzugefügt hat, führt man ihn genauso mit dem Slash-Befehl und einem Prompt aus.
00:11:09Wir gaben ihm die gewünschte Website zusammen mit den Stilvorgaben von vorhin und ließen ihn die Arbeit erledigen.
00:11:14Das Ergebnis war eine äußerst beeindruckende Website ohne den üblichen Einheitslook, die genau dem Look and Feel der gewünschten Vorlage entsprach.
00:11:22Das letzte Set gehört zu den beliebten Sammlungen und zeichnet sich dadurch aus, dass es auf echter Forschung basiert,
00:11:28auf benannten Gesetzen, nach denen Designer wirklich arbeiten, mit einem eigenen Skill für jedes Gesetz.
00:11:33Einige Skills behandeln, warum Nutzer eine Website vorzeitig verlassen und wie sich Verhaltensweisen beim Durchstöbern zeigen.
00:11:39Man muss auch nicht gleich alles davon installieren.
00:11:41Man installiert einfach die Skills, die zur eigenen Arbeitsweise passen.
00:11:44Für unser Setup haben wir zwei hinzugefügt.
00:11:45Der erste ist die Bildschirmkritik, die einen Bildschirm unter vielen verschiedenen Blickwinkeln bewertet
00:11:50und dann zeigt, wo er fehlerhaft ist, gestützt auf richtige Richtlinien zur Beurteilung der Designqualität.
00:11:56Der zweite sind die Wahrnehmungsgesetze, die im Grunde Anweisungen dazu enthalten, wie das menschliche Auge ein Design tatsächlich sieht und versteht.
00:12:03Wenn das Design steht, führt man die Überprüfung aus, und man erhält Rückmeldung zu Mängeln bei Dingen wie der visuellen Hierarchie,
00:12:09Schrift und Abständen, übersichtlich aufgelistet zur Korrektur.
00:12:12Sobald die Wahrnehmungsgesetze auf die Website angewendet sind, wirkt das gesamte Projekt deutlich ausgereifter.
00:12:17Das waren die Skills, die auf GitHub für Sie alle zur Verfügung stehen.
00:12:20Wir nutzen jedoch noch weitere Skills, die wir durch Tests selbst entwickelt und verfeinert haben und die wir beim Erstellen von Produkten einsetzen.
00:12:26Wer darauf Zugriff haben möchte, findet sie in unserer Community AI Labs Pro.
00:12:31Das sind die Skills, die teils von uns selbst gebaut wurden und teils aus Open-Source-Quellen stammen.
00:12:36Wenn Sie unsere Arbeit schätzen und den Kanal unterstützen möchten, ist dies der beste Weg dazu.
00:12:41Der Link ist in der Beschreibung.
00:12:42Damit sind wir am Ende dieses Videos angelangt.
00:12:44Wenn Sie den Kanal unterstützen und uns helfen möchten, weiterhin solche Videos zu machen, können Sie das über den Super-Thanks-Button unten tun.
00:12:50Wie immer vielen Dank fürs Zuschauen und bis zum nächsten Mal.