Claude Code hat gerade sein größtes Design-Update des Jahres erhalten (und so meisterst du es)
CChase AI
컴퓨터/소프트웨어AI/미래기술
스크립트
00:00:00Claude Code hat vor Kurzem sein bisher größtes Update für Frontend-Design-Funktionen erhalten, und zwar mit dem brandneuen Slash-Design-Skill.
00:00:07Dieser Slash-Design-Skill nimmt im Wesentlichen das Beste aus der eigenständigen Claude-Design-Web-App, die ihr hier seht, und integriert es direkt in Claude Code.
00:00:16Anstatt zwischen zwei verschiedenen Anwendungen hin- und herzuspringen oder eure Designs umständlich von Claude Design zu Claude Code zu übertragen, haben wir jetzt das Beste aus beiden Welten.
00:00:25Außerdem erhalten wir die zusätzliche Funktionalität all unserer Skills, die wir bereits in Claude Code nutzen.
00:00:30Wir können dieses neue Slash-Design-Feature also mit Funktionen wie Impeccable oder dem Taste-Skill kombinieren, was zu deutlich besseren Ergebnissen führt.
00:00:36Deshalb werde ich euch heute nicht nur zeigen, wie Slash-Design funktioniert, sondern euch auch den optimalen Workflow für den bestmöglichen Nutzen vorstellen.
00:00:42Wenn ihr also auch nur irgendwie Frontend-Design mit Claude Code macht, solltet ihr unbedingt dranbleiben.
00:00:46Das Hauptverkaufsargument für den Slash-Design-Skill ist genau das, was ihr hier seht.
00:00:49Ich befinde mich gerade in der Claude-Desktop-App, aber das Gleiche gilt auch, wenn ihr das Terminal nutzt.
00:00:53Es geht um die Idee, dass Slash-Design, wenn ich es aufrufe und um die Erstellung etwas bitte, eine Artboard generiert, die der Claude-Design-Web-App sehr ähnelt.
00:01:02Ich habe mehrere Optionen zur Auswahl, und wenn ich mir diese Optionen ansehe, kann ich sehr detailliert festlegen, was sich ändern soll.
00:01:09Wie ihr rechts sehen könnt, kann ich so ziemlich alles ändern, während ich auf verschiedene Komponenten des erstellten Frontend-Designs klicke.
00:01:17Darüber hinaus kann ich ganz einfach mehrere Versionen derselben Ausgabe anfordern, und sobald mir eine bestimmte Version gefällt, kann ich Claude Code direkt an die Arbeit schicken, um sie zu programmieren.
00:01:27Das spart mir jede Menge Zeit im Vergleich zur Claude-Design-Web-App, wo man alles macht, sagt, man möchte es übertragen, es in eine ZIP-Datei packt, in den Ordner legt, in Claude Code verweist und all diesen lästigen Kram erledigt.
00:01:38Und das ist nicht nur praktisch, sondern, wie ich bereits angedeutet habe, wir können nun auch Skills miteinander verknüpfen.
00:01:43In der Claude-Design-Web-App kann ich Dinge wie den Impeccable-Skill oder den Taste-Skill nicht ohne Weiteres verwenden oder aufrufen.
00:01:49Hier kann ich das.
00:01:50Letztendlich werden meine Ergebnisse dadurch also nicht nur bequemer, sondern auch deutlich besser.
00:01:54Die Verwendung des Design-Skills ist denkbar einfach.
00:01:56Ich tippe einfach Slash Design ein und sage ihm dann per Prompt, was ich erstellen möchte.
00:02:01Nehmen wir an, ich möchte einen Social-Media-Beitrag erstellen, etwa wie einen Instagram-Post, der beschreibt, was der neue Slash-Design-Skill leistet.
00:02:10Und nehmen wir an, ich möchte davon drei Variationen in drei völlig unterschiedlichen Designstilen erstellen und dabei den Impeccable-Skill nutzen.
00:02:19Ich aktiviere einfach mein Mikrofon und sage genau das.
00:02:22Können wir also ein Mock-up für einen Social-Media-Beitrag erstellen?
00:02:27Denkt dabei an eine Art Instagram-Post, der die Funktionen des neuen Claude-Code-Slash-Design-Skills detailliert beschreibt.
00:02:34Ich möchte drei extrem unterschiedliche Variationen, also sehr verschiedene Designstile und sehr unterschiedliche ästhetische Stile.
00:02:41Und dabei möchtest du den Impeccable-Skill aufrufen, um mich bei der Erstellung zu unterstützen.
00:02:45Wenn ich denselben Befehl in der Claude-Desktop-App ausführe, wird er in dieser Art Seitenleiste angezeigt, weshalb ich das Arbeiten in der Desktop-App mag: Alles befindet sich an einem Ort.
00:02:57Im Terminal werdet ihr sehen, dass ein Artefakt erstellt wird, es öffnet sich also im Wesentlichen in meinem Browser.
00:03:02Es ist also zwar nicht ganz so bequem wie in der Desktop-App, aber dennoch recht einfach zu handhaben.
00:03:06Bevor wir uns das Artefakt ansehen, ein kurzes Wort vom heutigen Sponsor: mir.
00:03:10Ich habe gerade eine aktualisierte Version meiner Claude Code Masterclass veröffentlicht, und sie ist der beste Weg, um vom Anfänger zum KI-Entwickler zu werden, besonders ohne Vorkenntnisse.
00:03:19Wir konzentrieren uns auf reale, praktische Anwendungsfälle, und ich aktualisiere diesen Kurs jede einzelne Woche.
00:03:24Wenn ihr also herausfinden wollt, wie man dieses Wahnsinnstool tatsächlich einsetzt, dann ist das genau das Richtige für euch.
00:03:32Ihr findet es in Chase AI+.
00:03:33Den Link dazu gibt es im angepinnten Kommentar.
00:03:35Und hier ist das von ihm erstellte Artefakt.
00:03:37Wir haben also drei verschiedene Designstile für unsere Instagram-Posts, ganz ähnlich wie wir es in der Desktop-App gesehen haben.
00:03:44Dort drüben auf der rechten Seite befindet sich diese Eigenschaftsleiste.
00:03:46Ich kann heranzoomen, auf etwas klicken und erhalte viel mehr Details darüber, was genau ich anpasse.
00:03:52Ihr werdet außerdem oben rechts feststellen, dass wir einen Bereich für Anpassungen (“Tweaks”) haben, der im Moment noch leer ist.
00:03:57Jederzeit kann ich Claude Code auffordern, mir ein Anpassungsfenster zu geben, genau wie man es in der Claude Design-Web-App sehen würde.
00:04:03Und ich kann sogar noch mehr Dinge anpassen als das, was ich hier sehe.
00:04:07Die tatsächliche Anwendung ist also verhältnismäßig einfach.
00:04:10Einfach “slash design” eingeben und fragen, was man möchte.
00:04:12Nun, wie sollte unser Workflow eigentlich aussehen?
00:04:14Wie holen wir das Beste heraus?
00:04:16Nun, es gibt einen einfachen dreistufigen Workflow, den ihr jedes Mal anwenden solltet, wenn ihr mit Claude Code Frontend-Designs erstellt.
00:04:22Der erste Schritt betrifft die Inspiration, denn ich möchte Claude nicht nur einen Prompt geben, der besagt: Hey, ich will drei verschiedene Sachen.
00:04:30Idealerweise möchte ich Claude Code einige Beispiele mit an die Hand geben.
00:04:33Ich möchte Screenshots von Postern machen, die mir gefallen.
00:04:35Ich möchte Screenshots von Designstilen machen, die mir zusagen.
00:04:39Ich füttere Claude Code damit und sage: Hey, kannst du etwas in dieser Art erstellen?
00:04:43Im Moment arbeiten wir nur an einem Poster, aber das gilt genauso, wenn ihr eine Landingpage, einen Hero-Bereich oder Ähnliches erstellt.
00:04:50Deine nächste Frage lautet wahrscheinlich: Wo finde ich Inspiration?
00:04:52Zum Glück gibt es massenhaft Orte, um Ideen zu sammeln.
00:04:55Eine gute Website ist Pinterest.
00:04:57Ich habe einfach nach Instagram-Infografiken gesucht und sehe all diese potenziellen Designs.
00:05:01Eine weitere gute Anlaufstelle ist Landbook, was sich hervorragend für Webdesign und Hero-Bereiche eignet.
00:05:06Und wir haben auch Plattformen wie Dribbble – und das schreibt sich mit drei B.
00:05:11Der Punkt ist, dass ihr euch aufmachen und eine Art Designbibliothek anlegen solltet, auf die ihr immer zurückgreifen und Claude Code füttern könnt, wenn ihr etwas entwerfen wollt.
00:05:21So müsst ihr diesen Inspirationsprozess nicht jedes Mal aufs Neue durchlaufen.
00:05:24Ich mache jetzt also ein paar Screenshots von Designs, die mir gefallen.
00:05:27Das hier gefällt mir.
00:05:29Ich finde, das sieht ziemlich interessant aus.
00:05:31Und vergesst nicht, ihr sucht im Grunde nach einer allgemeinen Ästhetik, an der sich Claude orientieren soll.
00:05:36Ich finde, das hier sieht ebenfalls ziemlich interessant aus.
00:05:39Jetzt ziehe ich diese drei Screenshots in das Prompt-Fenster hinein.
00:05:43Und im Wesentlichen gebe ich ihm denselben Befehl wie zuvor, also dass ich diesen bestimmten Instagram-Post haben möchte.
00:05:48Ich möchte drei verschiedene Versionen.
00:05:49Nur sage ich dieses Mal: Beziehe dich auf diese Screenshots.
00:05:52Diese sollen als Inspiration dienen.
00:05:54Für jeden einzelnen Screenshot könnt ihr jeweils einen anderen Designstil wählen.
00:05:59Und ich sage ihm auch: Vergesst nicht, den Impeccable-Skill zu verwenden.
00:06:02Außerdem weise ich ihn an, falls er externe Assets erzeugen möchte, etwas wie das Higgs-Field-MCP zu nutzen, das mir zur Verfügung steht.
00:06:09Ihr könnt auch andere Dinge einsetzen, wie beispielsweise file.ai für andere Bildgeneratoren.
00:06:14Die Idee ist, dass wir, da wir uns nun in Claude Code befinden, alles Mögliche in diesen Designprozess einbinden können.
00:06:19Und nochmals: Ihr müsst keine externen Bilder verwenden, wenn ihr das nicht wollt.
00:06:23Aber so wird mein Prompt in etwa klingen.
00:06:25Lasst uns also diese drei erstellten Posts tatsächlich nachbilden.
00:06:29Wir nutzen abermals die Slash-Design-Funktion.
00:06:31Aber ich habe hier drei Screenshots hineingezogen.
00:06:33Und ich möchte diese als Inspiration für unseren Designprozess nutzen.
00:06:37Ich hätte also gerne drei neue Generationen.
00:06:39Erstelle jeweils eine Version, die sich an den entsprechenden Screenshots orientiert.
00:06:43Nutze auch hier wieder den Impeccable-Design-Skill.
00:06:45Und vergesst nicht, dass ihr Zugriff auf das Higgs-Field-MCP habt.
00:06:48Wenn ihr also das Gefühl habt, externe Assets für die Poster generieren zu müssen, dann tut das ebenfalls.
00:06:55Das überlasse ich eurem Ermessen.
00:06:56Und das sind im Grunde Schritt eins und zwei dieses Prozesses.
00:06:59Schritt eins besteht darin, die Inspiration zu finden.
00:07:00Und Schritt zwei ist die tatsächliche Nutzung jener zusätzlichen Skills, die wir in der Claude-Design-Web-App so nicht einsetzen können.
00:07:08Und falls ihr denkt: Hey, du erwähnst ständig Impeccable, ich habe keine Ahnung, was das ist –
00:07:11das ist einfach ein kostenloser Open-Source-Skill, den ihr zu Claude Code hinzufügen könnt.
00:07:16Und dabei dreht sich alles um Frontend-Design.
00:07:18Im Wesentlichen besteht seine Aufgabe darin, zu erkennen, wie KI-Müll (“AI Slop”) aussieht, diesen zu beseitigen und eure Kreationen mit besseren Designprinzipien zu versehen.
00:07:26Falls ihr einen tieferen Einblick wünscht: Ich habe Videos, die sehr detailliert erklären, wie man Impeccable am besten einsetzt.
00:07:31Und hier seht ihr nun die neuen Poster, die Claude mithilfe von Slash Design erstellt hat.
00:07:35Man erkennt deutlich, dass sie sich an der Vorgabe orientieren, die wir ihm als Inspiration gegeben haben.
00:07:39Und zu jedem Zeitpunkt kann ich – genau wie zuvor – hier heranzoomen.
00:07:43Ich kann mir die Eigenschaften ansehen und beginnen, Anpassungen vorzunehmen.
00:07:46Kommen wir nun zu den Anpassungen (“Tweaks”).
00:07:49Dieses Design verfügt noch über keine anpassbaren Steuerelemente.
00:07:50Beschreibe, was du anpassen möchtest, und Claude fügt ein Tweak-Panel dafür hinzu.
00:07:53Tun wir genau das, denn damit befinden wir uns quasi in Schritt drei des Prozesses, in dem wir Dinge so lange optimieren wollen, bis sie uns gefallen.
00:08:00Ich öffne also das Terminal – wo bist du? – und sage: Hey, können wir hier jetzt einige anpassbare Steuerelemente hinzufügen?
00:08:10Ich möchte, dass die Tweaks sehr weitreichend sind.
00:08:12Ich möchte fast alles so weit wie möglich bearbeiten können, und zwar mithilfe des Tweak-Panels in Claude Design.
00:08:21Ihr seht also nun diesen Tweak-Bereich dort drüben auf der rechten Seite.
00:08:24Wir schauen uns jetzt diesen mittleren Entwurf an.
00:08:25Ich kann also die Farbe des Papiers ändern, richtig?
00:08:29Was wollen wir hier machen?
00:08:30Und denken Sie daran, diese Anpassungen können auch als Inspiration dienen.
00:08:33Sie können also jederzeit zu Claude Code zurückkehren und diese Änderungen über Befehle steuern.
00:08:39Das Tolle an der visuellen Darstellung ist einfach, dass ich jetzt so schnell iterieren kann, anstatt Claude Code jedes Mal einen Befehl zu geben, auf die Generierung zu warten und zu prüfen, ob es mir gefällt.
00:08:52Das macht den gesamten Prozess so viel schneller.
00:08:55Wir können also das Aussehen des Textes ändern.
00:08:58Man kann die tatsächliche Größe, die Stärke, die Linienführung und so weiter anpassen.
00:09:03Alles, was Sie hier sehen, lässt sich also bearbeiten.
00:09:06Aber denken Sie daran, wir können auch größere Änderungen vornehmen.
00:09:08Mir gefällt zum Beispiel das allgemeine Aussehen des zweiten Entwurfs nicht.
00:09:12Auch das lässt sich ändern.
00:09:13Ich kann einen weiteren Befehl eingeben: Mir gefällt der Inhalt so nicht.
00:09:17Er soll genauer erklären, was Slash Design eigentlich bewirkt.
00:09:21Ich kann also sagen: Für das zweite Design möchte ich grundsätzlich dabei bleiben.
00:09:26Aber um ehrlich zu sein, würde ich gerne den Inhalt anpassen.
00:09:29Wir wollen ja eine Infografik erstellen, die erklärt, was Slash Design konkret leistet.
00:09:34Wenn Sie es also neu erstellen, können Sie die anderen beiden ignorieren.
00:09:36Ich möchte mich im Moment nur auf diesen einen konzentrieren.
00:09:38Machen Sie eine Websuche, um sicherzustellen, dass Sie genau verstehen, was Slash Design bietet, und fügen Sie das in die neue Version dieser Infografik ein.
00:09:48Und hier ist die aktualisierte Version dieses Posters.
00:09:49Wie Sie sehen, enthält es viel mehr Informationen darüber, was das neue Slash Design tatsächlich tut.
00:09:53Und da wir diese neue Slash-Design-Funktion nutzen, ist die Bearbeitung extrem einfach.
00:09:56Oh, der Text gefällt mir hier nicht.
00:09:59Ich kann ihn verschieben, wohin ich möchte.
00:10:00Ich kann den Text selbst anpassen und so weiter und so fort.
00:10:03Von hier aus führt man im Grunde diesen Dreiklang fort: Inspiration, Einsatz der richtigen Tools und Iteration des Designs, das einem am besten gefällt.
00:10:11Wenn wir uns also für diesen mittleren Entwurf entscheiden wollen, sagen wir Claude Code einfach: Ich möchte nur mit diesem mittleren arbeiten.
00:10:16Und dann iteriert man so lange, bis einem das Ergebnis gefällt.
00:10:20Danach können Sie damit tun und lassen, was Sie wollen.
00:10:22Im Großen und Ganzen macht diese Slash-Design-Funktion das Frontend-Design direkt in Claude Code wesentlich einfacher.
00:10:28Oft mussten wir auf externe Tools wie Impeccable zurückgreifen, um diese Art von Live-Webdesign umzusetzen.
00:10:34Nehmen Sie sich also unbedingt die Zeit, dieses neue Feature auszuprobieren.
00:10:36Ich denke, es ist perfekt für alle, die gerne mit Claude Code arbeiten, aber die Claude Design Web-App mochten und es umständlich fanden, zwischen beiden hin un her zu wechseln.
00:10:45Das ist die Nische.
00:10:46Das ist die Zielgruppe, die damit angesprochen wird.
00:10:48Wie immer gilt: Lasst mich wissen, was ihr davon haltet.
00:10:51Schaut unbedingt bei Chase AI Plus vorbei, wenn ihr Zugang zu meiner Claude Code Masterclass haben möchtet.
00:10:55Bis zum nächsten Mal!