00:00:00In Claude Code steckt ein Monster, und es heißt AI-Slop.
00:00:03Lila Farbverläufe, die Schriftart Inter für alles und derselbe Karten-Aufbau auf jeder
00:00:09einzelnen Website. Sie wissen schon, welche Art von AI-Slop ich meine,
00:00:12aber heute werde ich Ihnen 10 verschiedene Tools vorstellen, um diese Bestie zu bezwingen,
00:00:16und nein, keines davon ist die Frontend-Design-Skill. Tatsächlich
00:00:20sind viele dieser Tools relativ neu.
00:00:22Selbst wenn Sie also schon länger im Claude-Code-Designbereich tätig sind,
00:00:26verspreche ich Ihnen, dass Sie heute etwas lernen werden.
00:00:28Alle Tools, die wir heute durchgehen, dienen im Wesentlichen demselben
00:00:31Zweck: Ihnen eine Chance zu geben, qualitativ hochwertiges Frontend-Webdesign
00:00:35mit Claude Code zu erstellen, denn so gut Claude Code auch ist,
00:00:39in diesem einen Bereich ist es extrem defizitär.
00:00:42Und das erste Tool auf der Liste ist Impeccable.
00:00:44Dies ist eine einzelne Skill, die 18 Befehle umfasst.
00:00:46Ich werde dieses Tool sowie jedes andere, das wir heute behandeln, in der Beschreibung verlinken.
00:00:51Ich mag Impeccable sehr, weil seine Möglichkeiten extrem weitreichend sind.
00:00:55Es ist eine Skill, aber sie enthält 18 Befehle.
00:00:58Wenn wir dem Link auf GitHub zu impeccable.style folgen,
00:01:01können wir alle Befehle in Aktion sehen. Und noch besser:
00:01:05Wir sehen den generischen AI-Output – hey, Inter-Schrift, lila Verläufe –
00:01:09und dann das Ergebnis nach der Anwendung der verschiedenen Befehle. Zum Beispiel
00:01:15gibt es so etwas wie "clarify",
00:01:16wobei es um UX-Fehler und Fehlermeldungen geht.
00:01:19Hier sehen Sie den Unterschied zwischen den beiden Versionen.
00:01:21Es gibt auch eine Chrome-Erweiterung,
00:01:23die diese typische AI-Slop-Ästhetik direkt auf Ihrer Webseite markiert,
00:01:28wie in diesem Beispiel. Mir gefällt sehr, wie diese Skill Anti-Pattern nutzt.
00:01:32Sie bringt großen Sprachmodellen im Grunde bei,
00:01:34wie AI-Slop tatsächlich aussieht: diese Rahmen-Akzente,
00:01:38diese seitlichen Tab-Akzentränder, die man überall sieht, Sie wissen schon,
00:01:42Sparklines, Glassmorphismus, richtig?
00:01:45Wir sehen diese Dinge einfach immer und immer wieder.
00:01:47Warum nutzen wir also nicht eine Skill, die LLMs wortwörtlich sagt: Das hier ist AI-Slop?
00:01:52Anstatt so etwas wie die Frontend-Design-Skill zu verwenden, die quasi sagt:
00:01:54"Bitte mach keinen AI-Slop" – was nicht funktioniert. Und wie Sie sich vorstellen können,
00:01:58ist diese Skill ziemlich umfangreich, wie wir hier sehen. Ich scrolle weiter.
00:02:03Das liegt daran, dass sie mehrere Referenzen für jeden spezifischen Designbereich hat.
00:02:08Man kann sie sich fast wie Unter-Skills mit den erwähnten 18 verschiedenen
00:02:13Befehlen vorstellen. Nun,
00:02:14der einfachste Weg, alle Befehle in Aktion zu sehen, ist der Besuch der Impeccable-Docs.
00:02:17Und genau wie auf der Startseite
00:02:21sehen Sie hier die Vorher-Nachher-Beispiele.
00:02:25Visuell zu sehen, was all diese Dinge bewirken, ist viel besser als nur
00:02:29die Beschreibung zu lesen und zu hoffen, dass Claude Code das tut, was man erwartet.
00:02:33Dabei geht es nicht nur um rein visuelle Aspekte.
00:02:35Wenn man sich Skills wie "adapt" ansieht,
00:02:37stellt diese sicher, dass es auf verschiedenen Plattformen wie Mobilgeräten und Tablets funktioniert,
00:02:41anstatt nur auf dem Desktop. Schauen Sie sich das unbedingt an,
00:02:45es ist erst seit etwa einem Monat draußen. Bevor wir zu Tool Nummer zwei kommen,
00:02:48ein kurzer Hinweis auf meine Claude-Code-Masterclass, die ich letzten Monat veröffentlicht habe.
00:02:52Ich habe bereits eine Menge Updates herausgebracht.
00:02:54Es ist der beste Ort, um von Null zum AI-Entwickler zu werden.
00:02:57Und der Preis dafür wird in wenigen Tagen steigen.
00:03:01Wenn Sie also dabei sein wollen, schauen Sie es sich an.
00:03:04Ein Link ist im fixierten Kommentar. Kommen wir nun zu Tool Nummer zwei,
00:03:06nämlich Skill UI. Von diesem Tool habe ich erst heute Morgen erfahren.
00:03:12Es ist noch keine 24 Stunden online und hat bereits sieben Sterne.
00:03:15Wir sind von Anfang an dabei. Ich habe es nicht erstellt, ich kenne den Typen nicht.
00:03:18Ich habe zufällig gesehen, wie er auf Twitter darüber gepostet hat.
00:03:21Ich war gerade beim Doomscrolling und dachte mir: Das sieht nach einer coolen Skill aus.
00:03:24Sie erlaubt es uns, jedes Design-System in eine Claude-fähige Skill zu rekonstruieren.
00:03:29Was bedeutet das? Es bedeutet, wir nehmen diese Skill,
00:03:31richten sie auf eine bereits existierende Website,
00:03:34und sie analysiert im Wesentlichen, wie diese Website aufgebaut wurde, und macht daraus
00:03:39eine Vorlage, im Grunde eine Skill. Ich zeige es mal in Aktion.
00:03:45Hier haben wir die Stripe-Website – eine ziemlich coole Seite, auf der viel passiert.
00:03:49Offensichtlich gibt es dort viele benutzerdefinierte Grafiken und ähnliches.
00:03:52Ohne diese Grafiken ist es für Claude Code fast unmöglich,
00:03:56sie exakt nachzubauen. Noch nicht. Aber sagen wir, mir gefällt das allgemeine Design,
00:04:00einfach wie die Karten und Layouts angeordnet sind.
00:04:03Und ich wollte das als Grundlage für meine eigene Website nutzen. Nun,
00:04:06wir haben in früheren Videos über Wege gesprochen, wie man das machen kann.
00:04:08Wie etwa den HTML-Code anzuschauen, aber das
00:04:11ist meist nur eine 60- bis 70-Prozent-Lösung. Also nahm ich diese Skill UI Skill,
00:04:15richtete sie auf Stripe und sagte dann: "Hey,
00:04:17erstell mir eine fiktive Stripe-Website in genau diesem Stil."
00:04:21Und das ist das Ergebnis nach nur einer einzigen Anweisung. Mehr habe ich nicht gesagt.
00:04:25Ich habe keine weiteren Infos gegeben und es hat das hier erstellt.
00:04:27Es hat definitiv diesen Stripe-Vibe. Aber wie gesagt,
00:04:32auf Stripe sind viele Grafiken speziell angefertigt.
00:04:34Das lässt sich nicht einfach per Prompt nachbauen, aber wissen Sie,
00:04:39es ist eigentlich ziemlich gut. Wenn Sie mich fragen,
00:04:44es hat zwar immer noch einige Standard-AI-Elemente,
00:04:47wie etwa die Anordnung der Dinge und die Icons,
00:04:50aber es hat nicht einfach nur ein 2x2-Bento-Raster mit Karten erstellt.
00:04:55Die Farben gefallen mir, die Grafik ist okay, aber hier,
00:04:59das ist ehrlich gesagt richtig gut, dafür dass ich nur gesagt habe: Schau dir Stripes
00:05:03Website an und bau mir ein Fundament. Und da es daraus eine Skill gemacht hat,
00:05:06habe ich jetzt eine Stripe-Design-Skill. Die ist zwar nur auf Projektebene,
00:05:10aber ich kann sie jederzeit aufrufen.
00:05:12Sagen wir, ich möchte eine weitere Website im Stripe-Stil erstellen.
00:05:16Das kann ich machen, aber ich kann Skill UI auf alles richten.
00:05:18Sie können es in dem Beispielvideo hier auf der GitHub-Seite in Aktion sehen,
00:05:22wo er das Tool auf Notion gerichtet hat.
00:05:24Und dann hat er Claude Code gesagt: Erstell mir im Grunde einen Notion-Klon.
00:05:27Und das ist das Ergebnis. Um diese Skill zu nutzen,
00:05:30folgen Sie einfach den Installationsanweisungen hier auf der GitHub-Seite.
00:05:33Es gibt zwei verschiedene Modi. Wenn Sie also etwas wollen, das im Grunde
00:05:38alles erfasst – wie Scroll-Screenshots und verschiedene Interaktionen,
00:05:41wenn man mit der Maus über Dinge fährt –, nutzt es Playwright,
00:05:45um das alles herauszufinden. Es schaut sich also nicht nur den HTML-Code an,
00:05:48wie es normale Tools oder meine alte Skill zur Website-Analyse getan haben.
00:05:52Wenn man den Ultra-Modus nutzt, wird Playwright einbezogen.
00:05:55Das ist also schon ein gewisses Niveau an Raffinesse. Alles in allem
00:05:58eine wirklich clevere Skill, und wir sind von Anfang an dabei. Wenn Sie das nutzen,
00:06:00sind Sie jetzt quasi ein Hipster unter den GitHub-Repo-Skill-Nutzern.
00:06:03Ich würde es Ihnen wärmstens empfehlen, wenn Sie eine neue Website starten und
00:06:07keine Ahnung haben, wie Sie ganz von vorne anfangen sollen – es ist ein toller Startpunkt.
00:06:10Von hier aus kann ich alles nach Belieben bearbeiten.
00:06:13Tool Nummer drei liegt, um ehrlich zu sein, etwas außerhalb meines
00:06:17üblichen Bereichs, aber ich finde es super interessant.
00:06:19Ich versuche selbst, mehr darüber zu lernen und es zu nutzen.
00:06:21Und zwar ist das eine Web-GPU-Skill.
00:06:23Web-GPUs sind im Grunde Webdesign-Komponenten, bei denen die
00:06:28Webseite direkt mit Ihrer Grafikkarte interagiert.
00:06:30Dadurch lassen sich super coole Animationen erstellen. Wie Sie hier sehen,
00:06:34solche Sachen zum Beispiel.
00:06:36In meinem Video über die sieben Stufen des Claude-Code-Webdesigns
00:06:40haben wir uns auf Stufe sieben die Igloo-Website angeschaut;
00:06:44die nutzten Dinge wie WebGL und benutzerdefinierte Shader.
00:06:47Das ist genau der Bereich, von dem ich spreche.
00:06:49Und diese Skill bringt Claude Code bei,
00:06:52wie man im Grunde den Code dafür schreibt.
00:06:54Sie sagt ihm, wie man den Render einrichtet, wie man Shader erstellt
00:06:58und wie man knotenbasierte Materialien anlegt. Durch die Nutzung dieser Skill
00:07:00und ein paar Text-Prompts konnte es das hier erstellen.
00:07:06Ist das so cool wie, na ja, dieses hier? Nein,
00:07:08aber ich habe es in zwei Minuten geschafft – okay, mit der GPU hat es 10 Minuten gedauert –,
00:07:13aber mit ein paar Prompts, ohne dass ich wirklich wusste, was ich tue.
00:07:16Wenn Sie sich also für so etwas interessieren – und von allen Tools,
00:07:19die ich hier nenne, ist das wahrscheinlich das außergewöhnlichste –,
00:07:22dann gefällt mir das. Falls Sie das interessiert,
00:07:26sollten Sie sich diese Skill anschauen, weil sie einen in diese Richtung bringt.
00:07:29Aber offensichtlich ist das viel fortgeschrittener, als nur
00:07:32das Aussehen unserer Karten oder die Typografie einer Website zu ändern,
00:07:35aber man sollte es im Hinterkopf behalten. Nun,
00:07:37Tool Nummer vier ist eines der angesagtesten AI-Repos des letzten Monats.
00:07:41Und das ist awesome-design.md. Es hat bereits über 50.000 Sterne.
00:07:46Es geht also gerade absolut durch die Decke.
00:07:48Es ähnelt in gewisser Weise dem Skill UI-Tool, das wir besprochen haben, denn
00:07:52es ist eine Skill, die es uns ermöglicht, andere existierende Websites anzuschauen und
00:07:57sie als eine Art Vorlage für unsere eigene Website zu nutzen. Nun,
00:08:01Awesome Design ist stark von Stitched beeinflusst.
00:08:04Über Stitched werden wir gleich noch sprechen.
00:08:06Stitched hat dieses Konzept von design.md-Dateien – Design-Markdown-Dateien –,
00:08:11das sind einfach Prompts, die beschreiben, wie man seine Website aufbauen soll.
00:08:14Der Unterschied ist, dass Google diese Prompts sehr gut ausgearbeitet hat.
00:08:18Wie Sie hier sehen, wird sehr detailliert beschrieben, was der Überblick ist,
00:08:22was das Ziel ist, wie die Farben sein sollen. Das gibt einfach eine tolle Struktur.
00:08:26Statt wie bei der Frontend-Design-Skill von Claude Code, die eher sagt:
00:08:29"Na ja, lass uns das irgendwie so machen".
00:08:32Das hier ist viel konkreter in dem, was getan werden muss.
00:08:34Man hat diese Idee von sehr spezifischen Design-System-Prompts genommen und
00:08:39sie im Grunde für einen Haufen verschiedener Websites in verschiedenen Bereichen erstellt.
00:08:43Zum Beispiel 11labs,
00:08:47ich klicke das hier mal an.
00:08:50Ich kann hier im Grunde das gesamte 11labs-Designkonzept sehen,
00:08:55zerlegt in Formularelemente, Kartenbeispiele, Buttons, Überschriften,
00:09:00Typografie, Farben und alles. Und es ist nicht nur diese Live-Vorschau.
00:09:04Es ist der eigentliche Prompt, den wir dann an Claude Code füttern können. Und wie gesagt,
00:09:07sie haben dort tonnenweise Websites, auch nicht-textlastige Sachen,
00:09:10wie etwa Bugatti, richtig? Es gibt Ihnen im Grunde
00:09:15die Bausteine einer Website, die Ihnen gefällt, damit Sie Ihre eigene
00:09:19mit denselben Bausteinen bauen können.
00:09:21Während das Skill UI-Tool von vorhin jede beliebige Website analysiert
00:09:25und sie dann für einen baut,
00:09:26schlüsselt das hier nur die Komponententeile auf.
00:09:29Dann liegt es an uns, es selbst zu bauen. Nachdem ich Awesome Design so gelobt habe,
00:09:33ist es nur fair, wenn wir für Tool Nummer fünf
00:09:35über die Anwendung sprechen, die es eigentlich inspiriert hat.
00:09:38Und das ist Stitch selbst von Google. Stitch ist klasse,
00:09:41wenn man mit einem visuellen Ansatz starten möchte, bevor man tatsächlich
00:09:46mit dem Bau der Webseite beginnt.
00:09:48Man geht also in Stitch und gibt einfach einen Prompt für das ein,
00:09:50was man bauen möchte. Das kann auch Screenshots zur Inspiration enthalten.
00:09:53Es wird dann dieselbe Art von design.md-Datei erstellen,
00:09:57die Sie vorhin gesehen haben, aber in ihrer natürlichen Umgebung.
00:09:59Es gibt uns eine Aufschlüsselung der Farben, der Typografie, der Labels,
00:10:04der Buttons und dann sehen wir hier das gesamte Design-System,
00:10:08dieselbe design.md wie zuvor,
00:10:11nur jetzt angepasst auf das, was man eingegeben hat. Sobald das erledigt ist,
00:10:14erstellt es eine Reihe von Varianten der Website, die man bauen will.
00:10:18Nicht nur den Hero-Bereich, sondern alles.
00:10:20Sobald dieses Mockup erstellt ist, kann ich es bearbeiten, wie ich will. Ich kann draufklicken.
00:10:25Per Rechtsklick bekomme ich spezifische Varianten.
00:10:28Ich kann die Varianten anpassen. Ich kann sagen, ob ich
00:10:31drei oder fünf Varianten will. Ich kann einen kreativen Spielraum festlegen,
00:10:34Anweisungen geben und so weiter.
00:10:35Ich habe im Grunde Unmengen an Möglichkeiten, um verschiedene Visualisierungen
00:10:40meiner potenziellen Website zu erstellen. Und das ist toll, denn es ist schwierig,
00:10:43wenn man in Claude Code ist und jedes Mal, wenn man eine visuelle Änderung will,
00:10:46der Code geschrieben werden muss. Man muss den Dev-Server starten,
00:10:48die Webseite prüfen. Und oft, wenn wir diese Dinge tun,
00:10:52besonders aus der Perspektive des Frontend-Designs,
00:10:56möchte ich die Optionen direkt vor mir sehen, richtig?
00:10:58Es ist viel einfacher für mich, alle drei zu sehen und zu sagen: Das hasse ich, das hasse ich,
00:11:02das hier gefällt mir vielleicht – anstatt: "Nein Claude Code, versuch's nochmal."
00:11:06Nein. Versuchen Sie es noch einmal. Nein. Das ist also auch kostenlos,
00:11:11was großartig ist. Und was auch immer ich hier baue,
00:11:13es lässt sich wirklich einfach auf Cloud-Code übertragen, denn wenn ich einfach auf das klicke,
00:11:16was mir gefällt, gehe ich auf „Mehr“ und kann mir den Code ansehen.
00:11:19Ich kann den Code dann kopieren und in Cloud-Code einfügen.
00:11:23Man kann sogar Dinge tun wie „Nach Figma kopieren“.
00:11:25Man kann es auch in AI Studio übertragen,
00:11:27aber der einfachste Weg zu Cloud-Code ist der Export und das Kopieren in die Zwischenablage.
00:11:31Es gibt ein MCP. Sie können das alles also über das Cloud-Code-Terminal machen.
00:11:35Aber um ehrlich zu sein, verstehe ich nicht wirklich, was es einem bringt.
00:11:39Ich finde, dieses visuelle Gespür direkt anzuwenden, ist es irgendwie wert.
00:11:43Ich habe tatsächlich einen kompletten Deep Dive zu Stitched in Cloud-Code gemacht,
00:11:46den ich oben verlinken werde, falls Sie mehr davon in Aktion sehen wollen. Nun,
00:11:49ich habe überlegt, ob ich Skill Nummer sechs in dieses Video aufnehme,
00:11:52weil er mittlerweile so allgegenwärtig ist. Fast jeder weiß, dass er existiert, aber man weiß ja nie.
00:11:55Vielleicht sieht ihn jemand zum ersten Mal. Und das ist der UI UX Pro Max Skill.
00:12:00Ich denke, das ist der geistige Nachfolger dessen,
00:12:05was der Anthropic Front-End Design Skill eigentlich sein sollte. Stellen Sie sich also einen
00:12:09Anthropic Front-End Design Skill vor, der tatsächlich auf verschiedenen Arten von
00:12:14Konventionen für unterschiedliche Websites in verschiedenen Bereichen trainiert wurde,
00:12:19denn nicht jede Website muss wie irgendein SaaS-Produkt der B-Klasse aussehen.
00:12:23Und genau darum geht es bei diesem Skill.
00:12:25Es ist ein intelligenter Design-System-Generator.
00:12:27Er wird Ihnen also Fragen stellen.
00:12:29Er wird herausfinden, worum es auf Ihrer Website geht,
00:12:31was Ihr Service ist, und sie dann basierend auf ihrer Funktion gestalten.
00:12:35Er verfügt über 161 branchenspezifische Argumentationsregeln.
00:12:39Sie haben das Ding also wirklich umfassend ausgebaut.
00:12:43Sie werden hier nicht diese Art von generischem KI-Einheitsbrei bekommen,
00:12:47und Sie werden nicht das erhalten, was langsam zur Cloud-Code-Version
00:12:51von KI-Einheitsbrei beim Front-End Design Skill wird.
00:12:52Er ist zudem mit einer Menge stack-spezifischer Anleitungen ausgestattet.
00:12:55Man wird also nicht nur in Richtung React gedrängt. Letztendlich ist es ein toller
00:13:00Skill, wenn man einfach keine Ahnung hat, in welche Richtung man gehen will.
00:13:04Vieles von dem, worüber wir bereits gesprochen haben, setzt voraus,
00:13:09dass man eine Vorstellung davon hat, was man will – besonders, wenn man eine Beispiel-Website hat.
00:13:12Wenn ich bei Skill UI ein Beispiel habe,
00:13:15kann ich es so ziemlich kopieren, und das Gleiche gilt für „Awesome Design“.
00:13:19Ich wähle aus diesen bereits existierenden Websites aus.
00:13:21Wenn Sie diesen Weg nicht gehen wollen,
00:13:22aber dennoch unschlüssig sind, wo die Reise hingehen soll, nutzen Sie diesen Skill.
00:13:26Ein großartiger Ausgangspunkt.
00:13:28Bei Tool Nummer sieben geht es nun um Komponenten und darum, die Details
00:13:33unserer Webseite wirklich perfekt zu treffen. Und da kommt 21st.dev ins Spiel,
00:13:36eine Website mit einer Million verschiedener Komponenten, aus denen wir wählen
00:13:40und sie direkt in unsere Website integrieren können. Nehmen wir zum Beispiel an,
00:13:43ich versuche gerade, etwas für unsere Hero-Seite auszuarbeiten. Nun,
00:13:46ich gehe einfach zum Bereich „Heroes“ auf 21st.dev und suche mir eine aus.
00:13:51Nehmen wir an, mir gefällt diese Hero-Seite, die Spline verwendet.
00:13:56Sie hat diesen Roboter, der tatsächlich meiner Maus folgt. Nun,
00:14:00anstatt selbst herauszufinden, wie man Spline nutzt und den Code dafür zu schreiben,
00:14:04gehe ich einfach auf 21st.dev.
00:14:06Ich kopiere den Prompt, indem ich oben auf den Button „Copy Prompt“ klicke.
00:14:09Ich gehe zu Cloud-Code und füge ihn ein – bumm. Dann habe ich meinen Hero-Bereich.
00:14:14Nun,
00:14:15offensichtlich sind Hero-Bereiche wahrscheinlich das Komplexeste, was wir
00:14:19in unsere Webseite importieren können, denn wenn wir eine Hero-Seite mit einem Roboter haben,
00:14:22der überall hinschaut, muss unsere gesamte Website zu dieser Ästhetik passen. Zum Glück
00:14:26denke ich, dass man den größten Nutzen aus 21st.dev bei den kleineren
00:14:29Komponenten und den kleinen Details zieht, wie zum Beispiel Buttons, oder?
00:14:33Schon die Tatsache, dass dieser Button dieses kleine Licht hat,
00:14:36wenn ich die Maus darüber bewege, im Gegensatz zu einem Standard-Button, wertet
00:14:39Ihre Website auf. Oder Karten, die diese Art von
00:14:43Lichtanimation haben, die meiner Maus folgt, oder ähnliches. Nochmals,
00:14:46es sind diese kleinen Details, diese leuchtenden Schatten.
00:14:49Das sind die Dinge, die Ihre Webseite hervorheben,
00:14:52sie hochwertiger erscheinen lassen und einfach zeigen, dass Sie sich Mühe gegeben haben.
00:14:56Und dass Sie es wirklich versucht haben. Und wenn sonst nichts,
00:14:59sollte es Ihnen zumindest Inspiration geben, denn
00:15:03nichts spricht dagegen, einen Prompt für eine dieser Komponenten zu kopieren,
00:15:07seien es Rahmen, Hero-Bereiche oder was auch immer,
00:15:09und ihn dann nach Herzenslust mit Cloud-Code anzupassen.
00:15:12Es ist keine „Ganz oder gar nicht“-Sache.
00:15:14Und ich denke, besonders für diejenigen unter uns, die nicht aus dem
00:15:17Webdesign-Bereich kommen – ich tue das jedenfalls nicht –
00:15:19weiß man einfach nicht, was man nicht weiß. Mit all diesen verschiedenen
00:15:23Möglichkeiten konfrontiert zu werden, wie man einen Button gestalten kann, regt das Denken an.
00:15:26Und es hilft einem mit der Zeit,
00:15:29je mehr man damit in Berührung kommt, einen eigenen Geschmack zu entwickeln und herauszufinden,
00:15:32was einem gefällt. Aber bevor man diese Dinge sieht,
00:15:34weiß man nicht einmal, was man mag.
00:15:36Alles, was man bisher gesehen hat, ist das, was Cloud-Code einem liefert.
00:15:39Ich empfehle Ihnen also dringend, sich das anzusehen. Fast alle diese Dinge sind kostenlos,
00:15:43und Sie sollten zumindest einige der kleineren Elemente,
00:15:46wie die Gestaltung von Buttons und Karten, in Ihre nächste Webseite integrieren.
00:15:49Heutzutage hört man immer wieder den Satz: „KI hat keinen Geschmack“.
00:15:53Was wäre, wenn wir ihr Geschmack als Fähigkeit geben würden? Nun,
00:15:56genau das versuchen wir mit Tool Nummer acht.
00:15:59Und das ist das „Taste Skill“-Repo.
00:16:01Dies ist eine Sammlung von Skills, die versucht, Cloud-Code
00:16:06ein gewisses Maß an Geschmack zu verleihen, also weg von diesem KI-Einheitsbrei,
00:16:11was ein Thema ist, das man immer und immer wieder sieht.
00:16:13Dieser Taste-Skill enthält eine Reihe verschiedener Unter-Skills, wie Sie hier sehen,
00:16:17und er hat verschiedene Einstellungen. Man kann also anpassen, wie
00:16:21abstrakt er im Vergleich zu einer normalen KI-Generierung wird.
00:16:24Und was Sie hier sehen, ist ein Beispiel für einige Websites, die
00:16:28mit diesem Skill erstellt wurden. Und man merkt sofort,
00:16:31dass es ein wenig anders ist, oder? Ich meine, es ist nicht weltbewegend,
00:16:36aber sofort anders – und anders ist gut.
00:16:38Je weniger es nach jeder x-beliebigen SaaS-Vorlage aussieht, desto besser.
00:16:41Viele davon enthalten Dinge wie Scroll-Animationen und,
00:16:46wissen Sie, wir sehen nicht ständig nur Bento-Boxen.
00:16:47Das ist also ein cooler Skill für die Feinheiten, den man
00:16:52zumindest mal ausprobieren sollte, um zu sehen, wie er im Vergleich zu normalen
00:16:56Cloud-Code-Generierungen abschneidet. Tool Nummer neun wird vielen sehr simpel erscheinen,
00:16:59aber Sie wären überrascht, wie viele Leute nicht wissen,
00:17:03dass es Google Fonts gibt.
00:17:05Google Fonts ist ein riesiges, kostenloses Verzeichnis mit einer Unmenge
00:17:10verschiedener Schriftarten, die man in buchstäblich all seinen Coding-Projekten nutzen kann.
00:17:14Sie müssen kein Sklave von „Inter“ oder den anderen fünf Schriftarten sein,
00:17:18die Cloud-Code für alles verwendet.
00:17:20Sie können einfach auf Google Fonts gehen, wo alles nach Aussehen,
00:17:24Gefühl und Schriftfamilie unterteilt ist, und Cloud-Code sagen: „Benutze dies,“
00:17:29„benutze das“. Cloud-Code hat ebenfalls Zugriff auf all diese Schriftarten.
00:17:31Denn Typografie spielt eine riesige Rolle dabei,
00:17:34wie Ihr Design aussieht und wirkt. Darüber hinaus
00:17:38können Sie Cloud-Code helfen lassen, Google Fonts zu durchsuchen.
00:17:42Sagen Sie Cloud-Code einfach, welche Art von Website Sie bauen und
00:17:45welche Stimmung Sie erzeugen wollen.
00:17:47Und es sollte Ihnen ein oder fünf Beispiele für Schriftarten liefern.
00:17:50Sie können es hier in Echtzeit sehen. Nochmals,
00:17:53man möchte nicht alles dem Zufall überlassen und davon abhängen, wie
00:17:57Cloud-Code gerade gelaunt ist, welche Schriftart es einem gibt, denn
00:18:01es wird sich wie Inter anfühlen – es ist immer Inter, immer. Und zu guter Letzt,
00:18:05Tool Nummer 10: Playwright CLI.
00:18:06Nun, Playwright CLI ist an sich kein Design-Tool,
00:18:10obwohl es etwas ist, worüber wir bereits früher bei Skill UI gesprochen haben,
00:18:13wegen der Fähigkeit, Screenshots von Webseiten zu machen.
00:18:15Man kann es also als eine Art Recherche- und Ideentool nutzen.
00:18:19Worauf ich mich jedoch wirklich konzentrieren möchte,
00:18:21ist die Idee von Form und Funktion: Wenn wir Dinge im Front-End bauen –
00:18:25denken Sie an etwas so Einfaches wie eine Seite zur Formularübermittlung –
00:18:27werden wir das testen müssen.
00:18:29Wir müssen sicherstellen, dass diese Dinge auch wirklich funktionieren.
00:18:32Und der einfachste Weg, dies in großem Stil zu tun, ist Playwright CLI, nicht Playwright MCP.
00:18:36CLI ist viel effektiver.
00:18:38Und der Weg dorthin ist: Sobald Sie Ihr Front-End-Design erstellt haben,
00:18:41müssen Sie nach der Installation des CLI-Tools nur noch Cloud-Code sagen:
00:18:44„Ich möchte, dass du jede Interaktion auf dieser Webseite mit Playwright CLI testest.“
00:18:49Es wird eine Reihe verschiedener Chrome-Instanzen erstellen.
00:18:52Sie können sie im „Headed“-Modus laufen lassen, wenn Sie sie sehen wollen, oder „Headless“,
00:18:55sodass es unsichtbar ist, und es wird alles von selbst testen.
00:18:57Das beschleunigt den gesamten Front-End-Designprozess enorm, denn ich denke,
00:19:02wir alle kennen das: Wir haben etwas hinzugefügt und wollten es dann sehen.
00:19:05Und dann wollen wir es testen, und es dauert einfach ewig,
00:19:06besonders bei Dingen wie Formularübermittlungen,
00:19:08wo es Unmengen an Grenzfällen gibt, wie irgendein seltsamer Nutzer
00:19:13da reingeht und tatsächlich seine Informationen eingibt.
00:19:15Das sind also meine 10 liebsten designbezogenen Skills,
00:19:20Plugins und CLIs für Cloud-Code. Ich hoffe, zumindest ein paar davon waren neu für Sie. Ich meine,
00:19:24bei Skill UI wissen wahrscheinlich nur drei Leute, dass es das gibt. Aber,
00:19:29ja, der Bereich Front-End-Design
00:19:31ist mit Cloud-Code einfach super interessant, weil es in puncto Geschmack
00:19:36so schlecht darin ist.
00:19:37Obwohl ich das Wort „Geschmack“ heutzutage gar nicht mehr gerne sage, weil jeder davon spricht,
00:19:40aber weil Cloud-Code darin schlecht ist,
00:19:42sollte das für Sie als Individuum eigentlich eine gute Sache sein, oder?
00:19:46Denn das ist jetzt ein Bereich, in dem Sie sich von der Masse abheben können.
00:19:50Und wann immer man sich von all den anderen abheben kann, die heutzutage
00:19:55auf den Cloud-Code-Zug aufspringen, ist das etwas Gutes.
00:19:57Und diese Skills und Tools können Ihnen dabei helfen. Also, wie immer,
00:20:00lassen Sie mich wissen, was Sie denken.
00:20:01Schauen Sie sich unbedingt Chase AI Plus an, wenn Sie die Masterclass
00:20:04besuchen wollen, und wir sehen uns dann.