00:00:00Claude Design ist das Beste,
00:00:01was Ihrem Frontend-Work seit dem Aufkommen von Skills passiert ist.
00:00:05Aber wenn Sie nicht wissen, was Sie tun,
00:00:06werden Sie Ihr gesamtes Nutzungskontingent aufbrauchen,
00:00:09bevor Sie eine Landingpage fertig haben.
00:00:11Doch diese Claude Design Masterclass
00:00:12wird helfen, dieses Problem zu lösen,
00:00:14da ich Ihnen zeige, welche Funktionen Ihre Zeit wirklich wert sind.
00:00:17Darüber hinaus machen wir einen direkten Vergleich
00:00:19zwischen normalem Claude Code und Claude Design.
00:00:22Und wir sprechen über einige interessante Anwendungsfälle,
00:00:25die über einfache Landingpage-Arbeiten hinausgehen.
00:00:27Dies ist ein fantastisches Tool und wir haben viel zu besprechen.
00:00:30Also fangen wir an.
00:00:31Claude Design ist Anthropics Antwort auf Stitch von Google.
00:00:35Und genau wie Google Stitch
00:00:37gibt es uns die Möglichkeit, eine Reihe visueller Mockups
00:00:40für unsere Web-Apps, Mobile-Apps und sogar Präsentationen zu erstellen.
00:00:43Um auf Claude Design zuzugreifen, muss man die Web-App nutzen.
00:00:45Also claud.ai/design.
00:00:47Es ist nicht in Claude Code verfügbar
00:00:48und es ist nicht in der Desktop-App verfügbar.
00:00:51Und wo wir gerade bei Einschränkungen sind:
00:00:52Eine große Einschränkung, die wir sofort ansprechen müssen,
00:00:54sind die Nutzungslimits.
00:00:56Es hat sein eigenes wöchentliches Limit und es ist dasselbe Limit,
00:00:59egal ob Sie Pro, Max 5 oder 20X nutzen.
00:01:02Und dieses Ding ist ein Ressourcenfresser,
00:01:05besonders wenn Sie ein bestimmtes Tool verwenden,
00:01:08über das wir später in diesem Video sprechen werden.
00:01:10Aber trotz dieser Einschränkungen
00:01:11ist Claude Design ein riesiger Fortschritt,
00:01:14wenn es um Frontend-Design-Arbeit mit Claude geht.
00:01:17Dinge wie das Tweak-System machen es sehr einfach zu sehen,
00:01:20wie verschiedene Änderungen das Gesamtgefühl
00:01:23Ihrer Web-App anpassen würden.
00:01:23Sachen wie "Edit" erlauben es Ihnen, sehr schnell ins Detail zu gehen
00:01:28und Dinge auf einer granularen Ebene zu ändern,
00:01:30ohne sich auf Text-Prompts verlassen zu müssen.
00:01:31Aber wenn Sie beim Kommentarsystem bleiben wollen,
00:01:33können wir das auch tun.
00:01:34Sie haben einen richtigen Kommentar-Button,
00:01:35mit dem ich einzelne Teile der Web-App auswählen
00:01:39und Kommentare hinterlassen kann, die entweder direkt an Claude Code gehen
00:01:42oder einer Kommentar-Warteschlange für andere Teammitglieder hinzugefügt werden,
00:01:46damit sie ihre Gedanken hinzufügen können, denn es ist sehr kollaborativ.
00:01:48Sie können diese Designs mit anderen Leuten teilen
00:01:50und Sie können alle von verschiedenen Orten aus am selben Ding arbeiten.
00:01:53Ich kann in der App zeichnen, um zu zeigen, was geändert werden soll.
00:01:56Ich kann die Präsentation sehr einfach im Vollbildmodus sehen.
00:02:00Und am wichtigsten:
00:02:02Ich kann dies sehr einfach in Claude Code exportieren.
00:02:05Und dieses Design-First-Setup macht es so viel einfacher,
00:02:09die Art von Frontend-Ausgaben zu erhalten, die Sie wollen,
00:02:11anstatt rein in Claude Code zu sein
00:02:13und ständig diesen Dev-Server-Refresh-Code
00:02:18ausführen zu müssen, wie wir es lange getan haben.
00:02:19Aber um das Beste aus diesem Tool herauszuholen,
00:02:21gibt es ein paar Dinge, die Sie wissen müssen.
00:02:22Wir beginnen also zuerst mit Frontend-Design-Arbeit
00:02:25für eine Web-App, was das ist, wonach die meisten Leute suchen.
00:02:29Und wir werden auch zeigen, was Claude Code uns gegeben hätte,
00:02:33im Vergleich zu Claude Design.
00:02:34So können Sie sehen, was wir hier bekommen
00:02:37und ob es das überhaupt wert ist.
00:02:38Aber bevor wir das tun, ein kurzes Wort von unserem Sponsor: mir.
00:02:42Wir haben gerade die Claude Code Masterclass
00:02:44innerhalb von Chase AI Plus veröffentlicht.
00:02:45Und es ist der beste Weg, um vom Nullpunkt zum AI-Entwickler zu werden,
00:02:48besonders wenn Sie keinen technischen Hintergrund haben.
00:02:51Und in letzter Zeit haben wir uns auf unser agentisches OS-System
00:02:54innerhalb der Masterclass konzentriert,
00:02:55bei dem wir Claude Code als Engine nutzen
00:02:58und es mit Obsidian für das Gedächtnis ergänzen,
00:03:00mit GWS, um unsere gesamte Google-Suite anzubinden.
00:03:03Und dann, mit diesem Fundament,
00:03:05können wir alle möglichen angepassten Skill-Pakete anhängen,
00:03:09die für unsere Anwendungsfälle sinnvoll sind.
00:03:12Und wir sprechen sogar darüber, wie man das alles verpackt
00:03:14und an Kunden verkauft.
00:03:15Wenn Sie sich also dafür interessieren,
00:03:17schauen Sie es sich unbedingt an.
00:03:18Es ist in Chase AI Plus,
00:03:19es gibt einen Link im angepinnten Kommentar.
00:03:21Lassen Sie uns also über Claude Design und Ihre Web-App sprechen,
00:03:24denn es gibt einige Entscheidungen, die wir treffen müssen,
00:03:26bevor wir überhaupt anfangen, dieses Ding zu prompten.
00:03:28Ich werde mich in diesem Video ständig auf dem Bildschirm bewegen,
00:03:31also haben Sie Geduld mit mir.
00:03:32Nun, die erste Frage, die wir uns stellen werden, ist:
00:03:35Werden wir ein Design-System verwenden?
00:03:38Hier sehen Sie bei mir "keines"
00:03:40und ein "Agentic OS"-Design-System.
00:03:42Bei Ihnen wird anfangs "keines" stehen.
00:03:44Wenn wir ein Design-System erstellen wollen,
00:03:47gehen wir hier oben hin
00:03:48und gehen auf Design-Systeme.
00:03:50Sie werden hier wahrscheinlich nichts haben
00:03:52und Sie klicken auf "Erstellen".
00:03:53Was ist nun ein Design-System?
00:03:56Nun, im Grunde ist es wie eine visuelle Vorlage,
00:04:00die Sie auf jedes Projekt anwenden können, das Sie später erstellen.
00:04:03Wenn Sie also bestimmte Schriftarten, Logos,
00:04:07oder irgendetwas Spezifisches haben, auch wenn es nur eine allgemeine Stimmung ist,
00:04:10können Sie das hier tun.
00:04:11Hier richten Sie das ein.
00:04:12So müssen Sie sich nicht wiederholen,
00:04:13bei jedem einzelnen Projekt.
00:04:15Wenn Sie eine Art durchgehende Linie
00:04:17aus visueller Design-Sicht haben.
00:04:20Sie geben also Ihren Firmennamen ein
00:04:21und liefern dann Beispiele.
00:04:23Nun, diese Beispiele können Code sein.
00:04:25Ich kann also ein GitHub-Repo verlinken.
00:04:27Ich kann einen Ordner hierher ziehen.
00:04:29Ich kann Dateien hochladen.
00:04:30Ich kann Schriftarten, Assets, was auch immer hinzufügen.
00:04:33Hier definieren Sie Ihre Marke.
00:04:36Jetzt ein wichtiger Hinweis:
00:04:39Das meinte ich, als ich von einem "Token-Fresser" sprach.
00:04:42Und mit "Token-Fresser" meine ich, dass das Ausführen eines Design-Systems
00:04:45A, irgendwo zwischen fünf und 15 Minuten dauern wird,
00:04:47weil es alles aufnimmt, es kommt auf die Größe an.
00:04:50Und B, das wird etwa 20 bis 25 % Ihrer Nutzung kosten,
00:04:55gleich zu Beginn.
00:04:56Verstehen Sie das also, kommen Sie nicht hierher und denken,
00:04:57oh, das Erste, was ich tun werde,
00:04:58ist fünf Design-Systeme zu erstellen.
00:05:00Auf gar keinen Fall, absolut nicht.
00:05:02Machen Sie eines, wenn Sie wissen, was Sie tun wollen,
00:05:05und ich zeige Ihnen, wie es in etwa aussieht,
00:05:07wenn wir das einrichten.
00:05:08Aber tun Sie nicht mehr als das.
00:05:09Zumindest nicht jetzt, bis sie die Limits erhöhen,
00:05:11was sie wahrscheinlich in Zukunft tun werden.
00:05:12Also: Ressourcenfresser, Ressourcenfresser, Ressourcenfresser,
00:05:16lassen Sie sich nicht davon ruinieren.
00:05:17Wenn Sie das trotzdem tun wollen,
00:05:19füllen Sie das einfach alles aus
00:05:20und klicken dann auf "Weiter zur Generierung"
00:05:21und ein Pop-up-Feld wird etwa anzeigen:
00:05:24Hey, das wird etwa fünf bis 15 Minuten dauern.
00:05:26Sobald es mit dem Aufnehmen all dieser Assets fertig ist,
00:05:29bekommen Sie so etwas wie dies hier,
00:05:30wo es Sie bittet, das Entwurfs-Design-System zu überprüfen,
00:05:33das es sich ausgedacht hat.
00:05:34Was ich ihm gefüttert habe, war der Code für mein Agentic OS-Dashboard,
00:05:38das ich Ihnen vorhin ein wenig gezeigt habe.
00:05:40Es hat diese Art von Claude-Farbthema.
00:05:43Es hat eine bestimmte Textschrift, alles das.
00:05:45Das habe ich ihm also gefüttert,
00:05:46war im Grunde diese Art von Visualisierung.
00:05:48Und es kam mit all dem hier zurück.
00:05:49Also: Hey, das sieht gut aus.
00:05:53Das sieht gut aus.
00:05:53Hey, schau dir dieses Maskottchen an.
00:05:54Sieht irgendwie vertraut aus.
00:05:55Das sieht gut aus.
00:05:57Stimme geht durch alle Farben.
00:05:59Es geht also sehr, sehr ins Eingemachte,
00:06:03wie: Okay, welche Farben sollen das sein?
00:06:06Wie sollen die Karten aussehen?
00:06:07Es ist sehr spezifisch.
00:06:08Es ist wirklich schön.
00:06:09Und wieder sehr an Stitch erinnernd.
00:06:11Sehr, sehr erinnernd an diese Art von Dingen.
00:06:14Und so habe ich alles genehmigt.
00:06:16Es sagt, die Markenschriftart fehlt.
00:06:17Wenn ich also bestimmte Schriftarten hätte, die ich immer verwenden wollte,
00:06:20kann ich die auch hochladen.
00:06:21Und jederzeit kann ich hierher zurückkommen,
00:06:23weil es all die Komponenten-Sachen aufgeschlüsselt hat,
00:06:26darauf klicken und dann einen Blick darauf werfen und es bearbeiten.
00:06:30Und genau wie das, was Sie später sehen werden
00:06:31mit den tatsächlichen Landingpages und den Präsentationen
00:06:33und all dem, können wir das teilen, richtig,
00:06:36mit einem Team oder was auch immer, oder ich kann es exportieren.
00:06:39Wie PowerPoint, PDF, wir können es an Canva senden, HTML,
00:06:42Claude Code, wirklich, wirklich einfach, nur einen Klick entfernt.
00:06:44Außerdem haben wir die eigentlichen Designdateien.
00:06:46Ich kann also hier hineinsehen und alles sehen, was vor sich geht,
00:06:50die tatsächlichen HTML-Dateien und all das selbst.
00:06:52Es gibt also viel, was man hier anpassen und mit dem man spielen kann.
00:06:55Es ist überhaupt keine Blackbox, wo man sagt,
00:06:57naja, ich hoffe, Claude Design hat sich etwas Gutes ausgedacht.
00:06:59Wer weiß, was unter der Oberfläche vor sich geht?
00:07:01Nein, Sie haben Einblick.
00:07:03Das ist alles Code.
00:07:04Das ist eine coole Art für es, Code zu erstellen,
00:07:06und wir können diesen Code jederzeit auf unsere eigene lokale Maschine nehmen.
00:07:09Wir stecken nicht hier fest.
00:07:10Und um es zurück zu Claude Design und Web-Apps zu bringen,
00:07:11das ist die erste Frage, die wir beantworten.
00:07:13Werden wir ein Design-System verwenden?
00:07:15Ist das etwas im gleichen Stil
00:07:16wie das, was wir in der Vergangenheit getan haben?
00:07:18Und noch wichtiger:
00:07:19Haben Sie überhaupt ein Design-System erstellt?
00:07:20Haben Sie 20 % Ihrer wöchentlichen Tokens
00:07:22den anthropic Göttern geopfert und haben überhaupt diese Option?
00:07:25an die anthropic-Götter abgetreten und haben diese Option überhaupt?
00:07:28Nun, für diese Demo bleiben wir einfach bei „keines“.
00:07:30Damit wir alle auf dem gleichen Stand sind.
00:07:32Die nächste Frage ist dann, hey,
00:07:33möchte ich ein Wireframe machen oder möchte ich High Fidelity?
00:07:37Wahrscheinlich möchtest du High Fidelity.
00:07:39Damit du sehen kannst, wie es tatsächlich aussehen wird.
00:07:41Aber wie gesagt, hey, wenn du ein Wireframe machen willst,
00:07:43kannst du jederzeit hin und her wechseln.
00:07:44Du bist nicht an das eine oder das andere gebunden.
00:07:45Aber hierfür nehmen wir High Fidelity.
00:07:47Wir nennen das also CD-Demo und erstellen es.
00:07:50Dann bringt es uns hierher und fragt nach Kontext.
00:07:53Hast du also das Design-System, einen Screenshot,
00:07:56eine Codebasis oder eine Figma-Datei?
00:07:58Unabhängig davon, ob du bei Null anfängst,
00:08:01oder eine Codebasis hast,
00:08:03du solltest ihm idealerweise etwas geben.
00:08:05Wenn du eine Codebasis hast, wie wir besprochen haben,
00:08:07und bereits an einer App gearbeitet hast, gib sie hier ein.
00:08:09Gib es in Cloud Design ein.
00:08:10Es wird besser funktionieren.
00:08:12Aber selbst wenn du das nicht tust und bei Null anfängst,
00:08:14schlage ich zumindest vor,
00:08:16dass du dich in der Welt umsiehst
00:08:18und eine Art Inspiration findest, die dir gefällt,
00:08:20sei es von Dribbble, Awwwards oder Godly Websites,
00:08:23irgendwas eben, richtig?
00:08:25Von einem leeren Blatt Papier zu starten und zu erwarten, dass Cloud Design
00:08:27die ganze schwere Arbeit macht,
00:08:28da wette ich, dass dein Prompt mies sein wird.
00:08:30Versteh einfach: Je weniger Kontext du gibst,
00:08:33desto höher ist die Wahrscheinlichkeit für eine Regression zum Mittelwert.
00:08:35Das solltest du also bedenken.
00:08:36Wir haben die Möglichkeit, Skizzen zu erstellen.
00:08:38Wir können also darauf zeichnen
00:08:40und sagen: Okay, hier ist unser Bild.
00:08:44Ich möchte den Text hier drüben haben.
00:08:48Und dann möchte ich das Hero-Bild.
00:08:53Hero-Bild hier drüben.
00:08:59Und dann machen wir noch einen scrollenden Banner.
00:09:10Wir geben ihm etwas,
00:09:12selbst wenn es so ein brillantes Kunstwerk ist.
00:09:15Und du kannst noch viel mehr als nur das machen.
00:09:16Wir können den Stift wechseln, richtig?
00:09:18Wir können Text einfügen.
00:09:19Ich kann verschiedene Dinge einfügen, wie z. B. Haftnotizen.
00:09:21Es gibt also viel zu tun.
00:09:25Und von hier aus musst du nur noch den Prompt eingeben.
00:09:28Du hast auch die Möglichkeit, das Modell zu wechseln.
00:09:30Opus 4.7 würde ich empfehlen,
00:09:33denn besonders wenn du Dinge wie Screenshots hinzufügst,
00:09:35hat Opus 4.7 die höchste Wiedergabetreue
00:09:37und die höchste Auflösung für den Screenshot.
00:09:403x das, was du mit Opus 4.6 bekommst.
00:09:42Also, geben wir ihm einen Prompt.
00:09:44Ich sage: Erstelle eine Landingpage für Argus,
00:09:46eine Social-Media-Intelligence-Plattform,
00:09:48die Creatorn hilft, Trendthemen in ihrer Nische
00:09:49zu finden, bevor sie durch die Decke gehen.
00:09:51Das ist ein Layout, weißt du,
00:09:53das spiegelt ziemlich genau das wider, was du hier geschrieben hast.
00:09:55Das ist also ein so lahmer Prompt, wie wir ihn nur geben können.
00:09:58Einfaches SaaS-Zeug.
00:10:00Schauen wir also mal, was dabei herauskommt.
00:10:02Und hier ist, was Cloud Design geliefert hat,
00:10:03mit einem sehr minimalen Prompt und ohne Kontext, außer dass wir
00:10:06einfach auf der Seite herumgekritzelt haben.
00:10:08Und es ist das hier, was ich für einen ersten Entwurf ganz passabel finde.
00:10:13Bezüglich der Nutzung, Nutzungswarnung, 4%.
00:10:16Es hat 4% unserer gesamten wöchentlichen Nutzung verbraucht,
00:10:18um diese Landingpage zu generieren.
00:10:20Und hier ist, was Cloud Code uns gegeben hat,
00:10:21mit exakt demselben Prompt,
00:10:22unter Verwendung der Frontend-Design-Fähigkeit.
00:10:25Nicht schlecht.
00:10:26Ich meine, ein paar Kleinigkeiten, an denen wir sofort rumnörgeln können,
00:10:28wie zum Beispiel: Hey, der Text ist hier und hier abgeschnitten.
00:10:32Bei diesem hier gibt es nicht ganz so viel auszusetzen.
00:10:35Der Text überschneidet sich hier irgendwie.
00:10:39Es zeigt „rising now“ hier unten,
00:10:41was sich auch irgendwie überschneidet, aber ziemlich nah dran.
00:10:45Ich meine, um ehrlich zu sein,
00:10:46gefällt mir das Design-Teil ein bisschen besser,
00:10:47aber ich könnte mir vorstellen, dass jemand anderem dieses hier
00:10:49auch ein bisschen besser gefällt.
00:10:50Erster Entwurf also, kein riesiger Unterschied.
00:10:52Warum also Cloud Design nutzen?
00:10:54Wo beginnt es, sich abzuheben?
00:10:55Nun, es hebt sich ab,
00:10:56wenn wir anfangen, über Variationen
00:10:59und die Fähigkeit zu iterieren zu sprechen.
00:11:00Und das sieht man sofort bei den Tweaks.
00:11:03Die Möglichkeit für mich, das zu tun, ist eine große Sache.
00:11:07Dass ich die Überschrift sehr schnell ändern
00:11:10oder den Ticker sehen kann.
00:11:13Und wir können das auch noch erweitern.
00:11:16Ich habe also geschrieben: Erhöhe die Anzahl der Tweaks aggressiv.
00:11:18Ich möchte damit so viel wie möglich herumspielen können.
00:11:20Schauen wir mal, was dabei herauskommt.
00:11:22Alles klar, man sieht jetzt, dass es viel mehr Tweaks hinzugefügt hat,
00:11:26an denen wir herumspielen können.
00:11:27Und was war die Nutzungsrate?
00:11:30Das Hinzufügen all dieser Tweaks hat 7% ausgemacht.
00:11:32Man sieht also, dass wir allein durch das Hinzufügen einer Landingpage
00:11:36und etwa 14 Tweaks schon, was ist das,
00:11:39etwa 11% unserer Gesamtnutzung verbraucht haben.
00:11:40Nun, ich denke, die Tweaks sind wichtig.
00:11:43Ich habe vorhin in der Einleitung darüber gesprochen,
00:11:44welche Funktionen wir wirklich in den Fokus rücken wollen,
00:11:47wenn es um Cloud Design geht.
00:11:48Denn als wir nur den Einzelschuss gemacht haben,
00:11:49war es nicht wahnsinnig anders als das, was ich
00:11:51mit der Frontend-Design-Fähigkeit bekommen habe.
00:11:52Nun, diese Tweaks und die Möglichkeit,
00:11:55mit all diesen Dingen und diesen subtilen Änderungen schnell herumzuspielen,
00:11:59das ist wirklich die Stärke von Cloud Design.
00:12:02Ich zoome jetzt ein wenig heraus,
00:12:03damit wir die Tweaks in Aktion etwas besser sehen können,
00:12:05aber ich kann jetzt alles machen, von der Palette bis zu den Akzenten,
00:12:10Eckenradius, Hintergrundraster, kein Hintergrundraster,
00:12:14Schriftarten, Betonung, Überschriftenunterschiede, Layoutwechsel, richtig?
00:12:19Das ist hier die Stärke.
00:12:21Die Stärke liegt nicht darin, dass es das UI-Design auf einen Schlag
00:12:23hinbekommt und das UI-Design von Anfang an so gut ist.
00:12:25Nein, es ist die Tatsache, dass ich tatsächlich sehr schnell,
00:12:29sehr schnell iterieren kann, denk daran, wie schnell ich das mache
00:12:33und denk daran, wie lange es dauern würde,
00:12:34all das in Claude Code durchzuführen.
00:12:36Ich meine, wir können sogar die Nische ändern,
00:12:39welches soziale Medien-Ding es betrachtet,
00:12:41in diesem Bild von KI und Technik bis hin zu Gaming und Finanzen.
00:12:46Danke Gott, ich kann die Ticker-Geschwindigkeit anpassen,
00:12:47denn das Ding flog nur so, aber ja, das ist großartig.
00:12:52Das ist Teil eins und ich denke, da gibt es zwei Dinge.
00:12:54Nun, eigentlich sind es noch ein paar mehr,
00:12:56aber Tweaks sind meiner Meinung nach der wichtigste Mehrwert vom Design,
00:12:59weil es sich um visuelle Iteration dreht.
00:13:01Und meiner Meinung nach ist die zweitwichtigste Funktion
00:13:04von Cloud Design die Varianz der Webseiten.
00:13:07Tweaks sind also sehr mikro, richtig?
00:13:09Wir sprechen von Farben, von Akzenten,
00:13:11wir sprechen von Schriftarten, aber was, wenn ich Variationen
00:13:14der Landingpage als Ganzes haben möchte, quasi austoben.
00:13:18Ich spreche nicht von einer anderen Schriftart,
00:13:19ich spreche von einem komplett anderen Design
00:13:21und ich möchte sie gestapelt sehen können.
00:13:23Wiederum, genau wie ich es mit Stitch machen kann.
00:13:25Ich möchte das machen können.
00:13:26Nun, das können wir in Cloud Design machen
00:13:28und es ist wirklich einfach.
00:13:29Wir fordern es einfach dazu auf, genau das zu tun.
00:13:32Also habe ich das Design aufgefordert und gesagt:
00:13:33Kannst du jetzt zwei weitere Varianten dieser Landingpage erstellen,
00:13:36zwischen denen ich hin- und herklicken kann, die stilistisch völlig anders sind,
00:13:39schlage mir zuerst verschiedene Variantenstile vor.
00:13:42Es kam also mit sechs verschiedenen Optionen für mich zurück.
00:13:44Wir können Terminal Bloomberg, Terminal-Stil,
00:13:48Hypermaximal Editorial, Brutalist, Synthwave, Soft Pastel
00:13:53oder Zeitungsdruck machen.
00:13:56Lass uns ja, irgendwie wie eins und zwei.
00:13:59Ich sage also, lass uns eins und zwei machen
00:14:03und behalte natürlich auch das aktuelle Layout bei.
00:14:08Cloud Design ist also mit einer Variante fertig.
00:14:10Hier ist die Editorial-Variante, mit der wir angefangen haben.
00:14:13Wir haben jetzt eine Terminal-Option.
00:14:18Sowie eine Editorial-Maximal-Option,
00:14:21was irgendwie interessant ist, mal etwas anderes.
00:14:24Nun, wenn du es ihm nicht sagst,
00:14:25macht es die Tweaks nur für das Original.
00:14:28Wenn du also diese Varianten machst,
00:14:30denke ich, der allgemeine Workflow sollte sein:
00:14:33Du beginnst zuerst mit den Varianten.
00:14:35Du denkst also auf Makroebene: Okay,
00:14:37ich möchte irgendwie in diese Richtung gehen.
00:14:39Und sobald du dich für eine dieser Makro-Varianten entscheidest,
00:14:42sagen wir, wir haben uns entschieden, bei dem zu bleiben, was wir mögen,
00:14:44dann würdest du in das Stadium der sehr aggressiven Tweaks gehen.
00:14:47So kannst du alles sehen
00:14:49und genau das herausfiltern, was du willst.
00:14:51Denn so, wie die Nutzung jetzt eingestellt ist,
00:14:54wenn du auf Makroebene gehst und sagst:
00:14:56Ich möchte nicht nur drei Optionen.
00:14:57Ich möchte vier, fünf Varianten und ich möchte Tweaks für alle.
00:15:00Du wirst einfach deine Nutzung verbrennen.
00:15:02Denn das Hinzufügen dieser zwei Varianten, maximal und terminal,
00:15:04das waren weitere 5%.
00:15:05Das bringt uns also auf etwa,
00:15:07ich glaube, wir sind jetzt bei 17% für die Landingpage,
00:15:11zwei Landingpage-Variationen plus Tweaks.
00:15:13Und ich weiß, ich reite ständig auf der Nutzung herum,
00:15:14aber für viele Leute ist das eine große Sache,
00:15:16und das sollte es auch sein.
00:15:17Ich denke, auf lange Sicht,
00:15:18wird das die ganze Nutzungssache wahrscheinlich ändern,
00:15:19aber behalte es einfach im Hinterkopf.
00:15:20Und da diese beiden Dinge bei dir im Tandem laufen,
00:15:23diese Varianz und die Tweaks,
00:15:26erlaubt es uns, eine 80%-Lösung, eine 90%-Lösung zu erreichen.
00:15:31Jetzt kann ich mich noch stärker darauf fokussieren.
00:15:35Wir können hier hochgehen, wie ich es Ihnen am Anfang gezeigt habe.
00:15:37Wir können Änderungen vornehmen.
00:15:39Ich kann also auf diese obere Kopfzeile klicken.
00:15:42Ich kann die Deckkraft ändern.
00:15:43Ich kann die Breite, die Farbe und all das ändern.
00:15:45Wir können also wirklich sehr präzise werden, wenn wir wollen,
00:15:47aber die wahre Stärke liegt darin, die 90-Prozent-Lösung zu erreichen,
00:15:50und zu sagen: Okay, die redaktionelle Version gefällt mir.
00:15:54Mir gefällt die Betonung auf der Marke,
00:15:55dieser Ring sieht schrecklich aus, als Marke.
00:15:59Mir gefällt diese spezifische Unterüberschrift, diese Schlagzeile, was auch immer.
00:16:04Und dann sagen wir: Alles klar, wir nehmen das.
00:16:05Die Feinabstimmungen gefallen uns.
00:16:06Lassen Sie uns nun den Rest der Landingpage fertigstellen,
00:16:09denn das ist nur der Hero-Bereich.
00:16:11Und dann exportieren Sie das Ganze zu Claude Code.
00:16:14Sie übergeben es an Claude Code.
00:16:15Wenn ich hier klicke, haben Sie ein paar Optionen.
00:16:17Sie können die ZIP-Datei herunterladen oder einfach diesen Befehl kopieren
00:16:20und ihn in Claude Code einfügen.
00:16:22Und ich denke, diese Art von Workflow ist unendlich viel schneller,
00:16:25als hier zu sein, was uns Claude Code
00:16:28mit exakt demselben Prompt gegeben hat.
00:16:29Ich meine, okay, alles klar, Claude Code,
00:16:32lass uns jetzt an der Farbe arbeiten.
00:16:35Lass uns ein paar Variationen machen.
00:16:36Lass uns jetzt an der Schlagzeile arbeiten und ein paar Variationen machen.
00:16:39Das kann Stunden dauern, während dies nur Minuten gedauert hat.
00:16:44Und zumindest für mich ist es so: Ich muss Dinge sehen
00:16:47und ich muss eine Reihe von Optionen sehen,
00:16:48bevor ich tatsächlich erkenne, was mir gefällt.
00:16:50Und besser noch, wahrscheinlich ändere ich es, wenn ich etwas sehe.
00:16:53Denn ehrlich gesagt, wenn sie das sehen,
00:16:54mag ich irgendwie die super vertikale Version.
00:16:54Vielleicht machen wir hier irgendwie Icons hin oder was auch immer.
00:16:56Ich will einfach nur iterieren.
00:16:58Ich will einfach verschiedene Sachen sehen.
00:17:00Das sind also die beiden wichtigsten Best Practices, die ich Ihnen
00:17:02für den Web-App-Teil geben kann.
00:17:05Makro, richtig, fragen Sie nach Variationen.
00:17:08Und dann Mikro, fragen Sie nach weiteren Feinabstimmungen.
00:17:11Die eine Sache, die wir hier nicht gemacht haben,
00:17:13und wir werden das bei Dingen wie dem Slide-Deck
00:17:15und Ähnlichem zeigen,
00:17:18ist es, ihn im Grunde seinen eigenen Planungsmodus durchlaufen zu lassen.
00:17:19Wir haben ihm den Prompt gegeben und sofort
00:17:22hat er das für uns ausgespuckt.
00:17:24Was wir stattdessen hätten tun können, ist zu sagen:
00:17:25Hey, ich möchte eine Art Planungsmodus mit dir durchführen.
00:17:26Ich möchte, dass du mir eine Reihe von Fragen stellst.
00:17:28Und er wird Sie stattdessen durch
00:17:30eine beträchtliche Anzahl von Fragen führen,
00:17:32etwa fünf, acht, 10 Fragen wie:
00:17:33Okay, was möchtest du hier?
00:17:35Was möchtest du dort?
00:17:36Was möchtest du da?
00:17:37Auf diese Weise müssen Sie nicht so viele Iterationen durchführen
00:17:38und letztendlich spart es Ihnen Nutzung.
00:17:40Und ich habe denselben Ablauf durchlaufen,
00:17:42als ich das Frontend für mein agentenbasiertes OS-Dashboard
00:17:44erstellte.
00:17:46Sie können hier oben sehen,
00:17:47womit ich ursprünglich begonnen habe.
00:17:48Und dann konnte ich all diese verschiedenen Optionen durchgehen.
00:17:51Ich bin schließlich bei dieser hier gelandet, der Cockpit-Version,
00:17:52obwohl ich daran gedacht hatte, diese mit dem coolen Sprite zu machen.
00:17:53Und dann habe ich diese Version einfach zurück in Claude Code gebracht
00:17:56und dann kleine Anpassungen an den Rändern vorgenommen
00:17:58und es tatsächlich angeschlossen.
00:18:01Es war also eine richtige Web-App.
00:18:03Lassen Sie uns nun Claude Design und das Slide-Deck machen.
00:18:04Wir werden das etwas schneller durchgehen,
00:18:06weil viele der Grundlagen, die wir durchgegangen sind,
00:18:08als es um Web-Apps ging, auch auf Slide-Decks zutreffen.
00:18:09Ich werde diese Punkte also nicht weiter ausführen.
00:18:13Und diesmal werden wir das Design-System in Aktion zeigen.
00:18:16Und denken Sie daran, dass das System auf den visuellen Elementen
00:18:17unseres agentenbasierten Betriebssystems basiert.
00:18:21Wir werden also fortfahren und auf "Erstellen" klicken.
00:18:24Und was sehen wir?
00:18:26Dasselbe Setup wie zuvor.
00:18:27Und etwas, das Sie auffordert, Kontext bereitzustellen,
00:18:28sei es Screenshots, Codebasen oder Figma-Dateien.
00:18:30Nun, der einzige Kontext, den wir ihm geben werden,
00:18:32ist das Design-System, das bereits vorhanden ist.
00:18:35Sowie einen Prompt, der besagt:
00:18:37Wir möchten ein Slide-Deck, das über die Unterschiede
00:18:39zwischen Claude Design und Google Stitch spricht.
00:18:41Und ich hatte Opus 4.7 in einem anderen Fenster mit Claude Code,
00:18:45um sich den Prompt auszudenken.
00:18:48Ich musste also eine Websuche durchführen.
00:18:53Okay, hier sind sozusagen die Unterschiede zwischen den beiden.
00:18:54Am Ende schrieb ich: Bevor Sie irgendetwas bauen,
00:18:55stellen Sie mir alle Fragen, die Sie haben.
00:18:57Damit wir auf demselben Stand sind.
00:19:01Wir zwingen es also gewissermaßen,
00:19:02eine Art Planungsmodus durchzuführen.
00:19:05Und Sie sehen, wie sich das hier füllt.
00:19:07Auch hier können Sie diesen erzwungenen Planungsmodus
00:19:08bei Web-Apps genauso gut durchführen.
00:19:10Stellen Sie einfach sicher, dass Sie ihn in den anfänglichen Prompt aufnehmen.
00:19:12Für wen ist dieses Deck also?
00:19:14Sagen wir mal, es ist für einen öffentlichen Vortrag.
00:19:16Wir werden sagen, wir halten es kurz und bündig.
00:19:18Wir setzen es auf sechs, wir machen fünf Minuten.
00:19:20Wir machen fünf Slides.
00:19:24Wir machen einen leicht meinungsstarken Titelstil, Mittelstück.
00:19:28Wir sagen nur Zwei-mal-zwei-Positionierungskarte.
00:19:30Preis aufrufen, ja.
00:19:34Und dann gehen wir einfach den Rest durch.
00:19:37Keine Notizen.
00:19:39Alles in allem stellt es uns eins, zwei, drei, vier, fünf,
00:19:43sechs, sieben, acht, neun, 10, 11, 12, 13, 14 Fragen.
00:19:44Plus, Sie wissen schon, ein kleines Sammelsurium hier unten,
00:19:47was mir sehr gut gefällt.
00:19:52Wiederum, Claude Codes Planungsmodus macht das manchmal,
00:19:56ich habe das Gefühl, höchstens ein paar,
00:19:58Ich schalte es auf Vollbild, und als Referenz:
00:20:00das hat 5 % unserer Nutzung beansprucht.
00:20:03Also etwa 1 % pro Folie.
00:20:05Wir haben das Titelblatt, eine kleine Fußnote dazu,
00:20:06dass das Deck von Cloud Design erstellt wurde.
00:20:07Wir haben die Zahlen, wissen, wo sie landen.
00:20:10Wir haben eine Art Grafik, die zeigt, wo sie
00:20:12in Bezug auf die Kosten landen.
00:20:15Cloud Design ist offensichtlich viel teurer.
00:20:19Feldbericht.
00:20:22Und dann gibt es uns eine Art,
00:20:26hey, hier ist ein kleines Diagramm,
00:20:30das zeigt, was man für welchen Anwendungsfall nutzen sollte.
00:20:31Ich finde, das Foliendeck sieht ziemlich genial aus.
00:20:34hey, hier ist ein kleines Diagramm, das zeigt,
00:20:37was Sie für welchen Anwendungsfall verwenden sollten.
00:20:38Ich finde also, das Slide-Deck sieht ziemlich cool aus,
00:20:40um ehrlich mit Ihnen zu sein.
00:20:43Aber noch wichtiger als das:
00:20:45Es ist beim Design-System geblieben.
00:20:46Dieses agentenbasierte Betriebssystem, auf dem das ganze Design-System aufbaut,
00:20:48spiegelt sich definitiv im Deck wider.
00:20:49Diese beiden Dinge sehen aus, als kämen sie vom selben Ort.
00:20:53Und genau wie bei der Web-App
00:20:55können wir denselben Arbeitsablauf durchlaufen.
00:20:59Das war das Original, das es uns gegeben hat.
00:21:00Jetzt können wir nach Makro-Varianten fragen und sagen:
00:21:03Okay, wollten wir eigentlich bei unserem Design-System bleiben?
00:21:05Oder wollen wir eine völlig andere Richtung einschlagen?
00:21:07Okay, wir sehen zwei, drei, vier verschiedene Varianten.
00:21:09Alles klar, lassen Sie uns auf eine konzentrieren.
00:21:11Und jetzt lassen Sie uns die Feinabstimmungen einbringen
00:21:13und dieses Ding wirklich perfektionieren.
00:21:16Und so denke ich, dass Sie das Slide-Deck angehen sollten.
00:21:17Genauso wie wir Web-Apps angehen.
00:21:19Nun, als Referenz, hier ist das Slide-Deck,
00:21:20das Claude Code für uns produziert hat.
00:21:22Ich habe ihm genau denselben Prompt gegeben
00:21:23und ich habe dies aus demselben Verzeichnis erstellt,
00:21:24dem agentenbasierten OS-System live.
00:21:27sozusagen.
00:21:29sozusagen.
00:21:31Obendrein habe ich es auch gebeten, mir Fragen zu stellen.
00:21:34Es hat mir nur sieben gestellt.
00:21:36Und die Fragen waren, um ehrlich zu sein, nicht so gut.
00:21:38Sie waren etwas oberflächlicher,
00:21:39in Bezug auf, nun ja, Slide-Anzahl.
00:21:42Und was soll das Seitenverhältnis sein,
00:21:43im Vergleich zu dem, was wir im Design gesehen haben.
00:21:46Und ich denke, das spiegelt sich in einer insgesamt
00:21:47viel langweiligeren Ausgabe wider.
00:21:49Und ich bin irgendwie überrascht, dass es nicht näher
00:21:51am visuellen Stil dran war, verglichen mit dem, was Design uns gegeben hat.
00:21:52Ich meine, es ist nicht schlecht.
00:21:55Ich meine, die Farben sind nah dran, der Text ist nah dran,
00:21:57aber ich meine, seien wir ernst.
00:22:00Das hier stellt das andere in den Schatten,
00:22:02wenn wir ehrlich sein wollen.
00:22:05Zuletzt lassen Sie uns über Mobile-App-Design sprechen.
00:22:07Und Sie haben hier zwei Optionen.
00:22:10Erstens, Sie gehen direkt auf Mobil.
00:22:12Sie machen keine Web-App-Sachen.
00:22:13Und es ist ziemlich einfach.
00:22:15Sie machen einfach das, was wir mit dem Web-App-Teil
00:22:17am Anfang dieses Videos gemacht haben.
00:22:19Und Sie sagen einfach am Anfang:
00:22:21Das ist für eine Mobile-App.
00:22:22Stellen Sie sicher, dass die visuellen Elemente das widerspiegeln.
00:22:25Aber wenn Sie eine Web-App nehmen
00:22:26und diese dann auf eine mobile Plattform übersetzen wollen,
00:22:28ist es ziemlich einfach.
00:22:29Während wir in diesem Prompt-Fenster bleiben könnten, in dem wir uns befinden,
00:22:32tatsächlich, alles klar, zeig es mir jetzt auf Mobil.
00:22:33Es macht wahrscheinlich mehr Sinn, ein separates Projekt
00:22:35mit genau denselben Dingen laufen zu haben.
00:22:36Aber jetzt haben wir eine klare Abgrenzung
00:22:40zwischen der Web-App, an der wir arbeiten, und der mobilen Version.
00:22:42Und um das zu tun, gehen Sie einfach oben rechts hin,
00:22:45wo "Teilen" steht.
00:22:46Und dann klicken Sie auf "Projekt duplizieren".
00:22:48Sobald Sie das getan haben, gelangen Sie zu einer Seite wie dieser.
00:22:51Aber wenn Sie zur Homepage zurückkehren,
00:22:53können wir jetzt sehen, dass es einen CD-Demo-Remix gibt.
00:22:54Und dieser Remix ist das duplizierte Projekt.
00:22:57Und jetzt werde ich es einfach prompten und sagen:
00:23:00Können Sie mir dasselbe Design in einem mobilen Format zeigen?
00:23:02Und hier sind die mobilen Versionen, die es uns gegeben hat.
00:23:05Es hat einfach Variationen von allen drei erstellt.
00:23:08Ich habe das nicht spezifiziert, aber es hat es getan.
00:23:10Es hat uns also im Grunde neun Mockups
00:23:13gegeben und die Gesamtkosten betrugen 5 % der Nutzung.
00:23:15Also derselbe Ablauf wie immer.
00:23:18Es hat uns das Makro hier gegeben.
00:23:19Wir würden also auswählen, welches uns gefällt,
00:23:21offensichtlich welches auch immer Sie für Ihre Web-App entschieden haben.
00:23:25Und von dort aus würden wir sagen:
00:23:27Hey, ich mag die redaktionelle Version.
00:23:29Jetzt bringen Sie eine Reihe von Feinabstimmungen, damit ich das wirklich hinbekomme.
00:23:30Aber um die Wahrheit zu sagen:
00:23:32Wenn Sie alles in der Web-App-Version eingerichtet haben,
00:23:34haben Sie wahrscheinlich die Feinabstimmungen schon gemacht.
00:23:36Es sollte also nicht mehr viel sein,
00:23:38was Sie zu diesem Zeitpunkt ändern müssen.
00:23:39Aber es gibt immer ein wenig,
00:23:42man läuft immer in Probleme, wenn man von einer Standard-Web-App
00:23:44zu einem mobilen Design übergeht.
00:23:47Aber wie Sie hier sehen, ist das sehr einfach zu machen,
00:23:48nur ein einziger Prompt.
00:23:51Das ist also der Punkt, an dem ich Sie für heute zurücklasse.
00:23:53Ich hoffe, ich konnte die Unterschiede
00:23:55zwischen Claude Design und Claude Code beseitigen,
00:23:57insbesondere indem ich die Funktionen hervorhebe,
00:23:58die bei Claude Design wirklich unser Geld wert sind,
00:23:59nämlich die Feinabstimmungen und die Varianten.
00:24:02Ich kann eine Menge verschiedener Versionen durchgehen
00:24:04von dem, was ich zu erstellen versuche,
00:24:06bis ich schließlich bei etwas lande, das mir gefällt.
00:24:09Und sobald ich das habe,
00:24:11ziehe ich es in das Claude Code-Ökosystem.
00:24:15Und ich hoffe, ich konnte die Nutzungskosten
00:24:17etwas klarer machen, indem ich die Prozentsätze nannte, die wir
00:24:19nach jeder Iteration und Erstellung verloren haben.
00:24:21Wie immer, lasst mich wissen, was ihr denkt.
00:24:22Haltet auf jeden Fall Ausschau nach mehr Claude Design-Material,
00:24:25denn ich halte das für ein super cooles Tool.
00:24:27Schaut euch unbedingt Chase AI+ an,
00:24:31wenn ihr Zugang zur Claude Code Masterclass wollt,
00:24:33und wir sehen uns.
00:24:45Bis zum nächsten Mal.