00:00:00Die Updates hören also nie auf.
00:00:02Anthropic hat gerade Claude Design veröffentlicht,
00:00:05was uns jetzt eine Schnittstelle bietet, um Web-Apps zu erstellen,
00:00:09Websites, eigentlich fast alles, was wir wollen,
00:00:11über die Claude-Schnittstelle.
00:00:13Dies ist ihre Version von Google Stitch.
00:00:16Und wie Sie in diesem Demo-Video sehen können,
00:00:18geht es darum, Ihnen die Möglichkeit zu geben, alles anzupassen,
00:00:21vom Makro bis zum Mikro mit diesen Designs.
00:00:23Und wir sprechen nicht nur von Web-Apps,
00:00:25sondern auch von mobilen Designs.
00:00:27Und es ist irgendwie lustig, denn wenn wir über
00:00:28Anthropic und Claude Code sprechen,
00:00:30ist eine seiner größten Schwächen das Frontend-Design.
00:00:32Zu sehen, dass sie jetzt
00:00:34mit einer vollwertigen Anwendung kommen,
00:00:36die diese Schwäche behebt, ist ziemlich cool.
00:00:39In diesem Video werde ich Ihnen zeigen, wie es funktioniert.
00:00:41Wir machen eine kurze Demo,
00:00:42damit Sie selbst direkt einsteigen können.
00:00:43Claude Design wurde speziell für Opus 4.7 entwickelt
00:00:46und ist verfügbar, wenn Sie alles
00:00:49von Pro Max bis Enterprise nutzen.
00:00:51Und es macht alles von Prototypen über Mockups
00:00:53bis hin zu PowerPoint-Präsentationen.
00:00:54Und wir können es in Dinge wie
00:00:57Microsoft PowerPoint exportieren oder an Canva senden.
00:00:59Eines der coolen Features ist das Brand Design.
00:01:01Man kann ihm eine Codebasis geben,
00:01:03etwa die Codebasis Ihrer Website,
00:01:05und es wird alle Brand-Assets der Website extrahieren,
00:01:09um Dinge wie Farben und Typografie
00:01:11an das Design anzupassen, an dem Sie arbeiten.
00:01:12Um loszulegen, gehen Sie einfach auf claude.ai/design
00:01:15und Sie gelangen auf eine Webseite, die so aussieht.
00:01:18Gleich links haben wir ein paar verschiedene Optionen:
00:01:20Prototypen, Slide-Deck, Vorlagen oder Sonstiges.
00:01:23Hier unten am Boden, wie ich schon sagte,
00:01:25haben wir die Möglichkeit, ein Designsystem zu erstellen.
00:01:27Wenn ich also auf "Designsystem einrichten" gehe,
00:01:29kann ich so etwas wie meinen Firmennamen eingeben,
00:01:33und dann Beispiele für mein Designsystem bereitstellen.
00:01:36Man muss das nicht tun,
00:01:38aber es hilft, wenn man bereits etwas hat,
00:01:40an das man es anpassen möchte.
00:01:41Sie können also den Link zu Ihrem GitHub angeben.
00:01:43Sie können den Ordner tatsächlich per Drag & Drop verschieben.
00:01:45Wenn Sie die Codebasis auf Ihrem Computer haben,
00:01:48können Sie sie hierher ziehen,
00:01:49oder einfach Schriftarten, Logos und Assets hinzufügen,
00:01:51sowie alle anderen Notizen.
00:01:52Ich habe also den Ordner auf meinem Computer ausgewählt
00:01:55mit den Assets für meine Website,
00:01:57und dann einfach auf "Weiter zur Erstellung" geklickt.
00:01:59Dabei wird, besonders bei einer größeren Codebasis,
00:02:01erstens nicht die gesamte Codebasis hochgeladen.
00:02:03Es wird herausfinden, welche Dateien tatsächlich Sinn ergeben.
00:02:05Zweitens erhalten Sie ein Pop-up-Fenster, das besagt:
00:02:07"Hey, das kann 15 bis 20 Minuten dauern",
00:02:09während alle Dateien durchgegangen werden.
00:02:11Wenn Sie etwas ganz von vorne anfangen wollen,
00:02:12können Sie das natürlich auch tun.
00:02:13Wir starten also einen neuen Prototyp.
00:02:16Wir nennen ihn "Chase Demo".
00:02:17Wir haben zwei Optionen.
00:02:18Entweder nur ein grober Wireframe,
00:02:20oder wir gehen direkt zu einem High-Fidelity-Mockup.
00:02:23Wir nehmen das Mockup.
00:02:25Das führt Sie auf diese Seite.
00:02:26Und wieder bekommt man definitiv diese Stitch-Vibes.
00:02:28Ich werde ihm also sagen:
00:02:29Entwerfen wir eine interaktive Grafik im Dark Mode,
00:02:31die zeigt, wie Kultur zwischen Städten fließt,
00:02:33ein rotierender Globus mit Städten, die durch leuchtende Pfade verbunden sind.
00:02:35Das ist dasselbe, was sie in der Demo gemacht haben,
00:02:37aber ich bin gespannt, ob das, was wir hier bekommen,
00:02:40tatsächlich dem Asset entspricht, das sie im Video gezeigt haben,
00:02:43und welche Unterschiede wir sehen werden.
00:02:45Wie sehr haben sie es in ihrer Anzeige gehypt?
00:02:47Wir schicken es also ab.
00:02:48Übrigens können Sie hier sehen,
00:02:50dass wir auch Dinge wie das Modell wählen können.
00:02:52Man kann Dateien anhängen.
00:02:53Man kann hier sogar Sprache nutzen und importieren, was man will.
00:02:55Sofort fängt es an, uns einige Fragen zu stellen,
00:02:57was mir wirklich gut gefällt.
00:02:58Das ist fast wie der Planungsmodus in Claude Code.
00:03:02Welche Art von Kultur meinen wir?
00:03:04Nehmen wir einfach den gemischten Globus-Stil.
00:03:07Nehmen wir diesen Flusspfad.
00:03:13Das sieht cool aus.
00:03:14Was wollen wir als Farbpalette?
00:03:16Nehmen wir Multi-Hue.
00:03:18Und sofort liebe ich die Tatsache,
00:03:20dass wir jetzt diese Prompts erhalten.
00:03:21Wenn ich zu Stitch gehe, bekomme ich das nicht wirklich.
00:03:24In anderen Tools bekomme ich das auch nicht.
00:03:26Eines der mächtigsten Dinge in Claude Code,
00:03:29und darüber haben wir in anderen Webdesign-Lektionen gesprochen,
00:03:31ist dieser Austausch,
00:03:33um diese blinden Flecken in unserem Plan zu finden.
00:03:37Dass es mir all diese Fragen stellt, ist riesig.
00:03:39Es stellt mir ziemlich viele.
00:03:40Sogar der normale Planmodus in Claude Code fragt nur etwa drei.
00:03:43Wir nehmen also "Ziehen zum Drehen".
00:03:45Welche Stadt sollen wir hervorheben?
00:03:47Nehmen wir die Top 10.
00:03:49Wie viel UI?
00:03:50Nehmen wir das komplette Dashboard.
00:03:53Allgemeine Stimmung.
00:03:54Nehmen wir "Editorial".
00:03:58Wir bleiben bei Editorial.
00:04:00Was sollte anpassbar sein?
00:04:02Ooh, nehmen wir die Fluss-Farbpalette.
00:04:07Ich lasse es drei Dinge machen.
00:04:08Machen wir weiter.
00:04:09Und dann links, sobald wir diese Fragen beantwortet haben,
00:04:11zeigt es den Fortschritt an.
00:04:12Wieder ähnlich wie bei Claude Code,
00:04:15wenn wir es im Planungsmodus hätten.
00:04:17Und übrigens ist dies offensichtlich etwas,
00:04:19das man in der Web-App machen muss.
00:04:22Das ist nicht im Terminal verfügbar,
00:04:24aus offensichtlichen Gründen wegen der grafischen Natur.
00:04:27Und von dem, was ich lese,
00:04:29glaube ich nicht, dass dies jemals
00:04:30in die Desktop-App implementiert wird, oder vielleicht irgendwann.
00:04:33Aber derzeit muss man es über Claude.ai machen.
00:04:35Während das hier aufgebaut wird,
00:04:36lassen Sie uns über einige Fragen sprechen, die Sie vielleicht haben,
00:04:38wie zum Beispiel: Wie unterscheidet sich das
00:04:39davon, diesen Prompt hier einfach
00:04:41ins Chat-Fenster einzugeben oder Claude Code zu öffnen
00:04:43und zu sagen: Hey, ich möchte,
00:04:45dass du dieses interaktive Ding baust.
00:04:47Und es einfach, wissen Sie,
00:04:48eine Art Web-App daraus erstellen zu lassen.
00:04:50Die Antwort ist, wenn wir es ganz simpel sehen: eigentlich gar nicht.
00:04:54Es schreibt ja nur Code.
00:04:55Es wird dasselbe sein.
00:04:56Der Unterschied ist - und nochmal,
00:04:58wenn Sie jemals Frontend-Design gemacht haben,
00:05:00sei es auch nur eine einfache Landingpage,
00:05:02verstehen Sie den Vorteil,
00:05:04diese Dinge visuell zu sehen und zu vergleichen.
00:05:05Deshalb ist Google Stitch so cool,
00:05:08denn das Tolle an Stitch
00:05:09ist nicht unbedingt die Design-Philosophie,
00:05:11obwohl ich sie für sehr gut halte.
00:05:12Es ist die Tatsache, dass ich eine UI habe,
00:05:13wo ich visuell eine Menge Optionen sehen
00:05:15und auf diese Weise bearbeiten kann.
00:05:17Und wenn es mir gefällt, übernehme ich es in den Code.
00:05:18Wenn ich alles aus einer Design-Perspektive
00:05:20zuerst im Code mache, ist das schwierig.
00:05:22Es ist irgendwie umständlich.
00:05:23Es ist schwer, ein visuelles Medium
00:05:26in natürliche Sprache zu fassen,
00:05:28die in Code umgewandelt wird,
00:05:29der wiederum zu etwas Visuellem wird, und das perfekt zu treffen,
00:05:32besonders am Anfang.
00:05:33Ich muss die Dinge visuell vor mir sehen.
00:05:34Zumindest ich brauche Optionen.
00:05:36Und deshalb ist das hier fantastisch.
00:05:38Das ist ein großer Schritt für Anthropic und Claude Code,
00:05:41denn das war bisher ein echter Schwachpunkt.
00:05:42Deshalb sieht man, dass Apps wie Pencil
00:05:45und ähnliche so populär werden,
00:05:46weil sie einem dieses visuelle Medium geben,
00:05:48um mit solchen Dingen umzugehen.
00:05:49Und noch eine kurze Anmerkung: Wie Sie hier unten sehen,
00:05:51sind das vollwertige Anwendungen.
00:05:53Es ist im Grunde Prototyping.
00:05:55Man kann also diese Dinge namens APIs nutzen.
00:05:58Sie sollten das eher,
00:06:00nicht nur als ein visuelles Canva-Design-Ding sehen.
00:06:03Betrachten Sie es eher
00:06:04im Sinne von Google Studio,
00:06:05wie diese Google AI Studio Geschichte.
00:06:07Hier ist also das Ergebnis.
00:06:08Es ist im Editorial-Stil gehalten.
00:06:10Wir sehen hier den Globus.
00:06:12Ich kann ihn mit der Maus ziehen.
00:06:14Wir können die Rotationsgeschwindigkeit und das Leuchten anpassen,
00:06:18die Palette ändern.
00:06:19Das ist ziemlich cool.
00:06:21Und dann gibt es hier drüben noch kleine Texte.
00:06:25Sprechen wir nun über die Bearbeitung.
00:06:27Zuerst haben wir hier oben dieses kleine Tweak-Menü.
00:06:30Diese Anpassungen betreffen die Rotationsgeschwindigkeit
00:06:33und all das.
00:06:34Ich kann Kommentare hinterlassen, bearbeiten, zeichnen.
00:06:37Und wir können es auch im Vollbild
00:06:39anzeigen lassen, um zu sehen, wie es wirklich aussieht.
00:06:41Im Vollbild ist das ganz interessant.
00:06:42Es sieht tatsächlich viel, viel besser aus.
00:06:44Aber sagen wir, ich möchte eine Änderung vornehmen.
00:06:46Offensichtlich könnten wir einfach zurück ins Prompt-Fenster
00:06:49gehen und es dort anweisen.
00:06:50Wenn ich auf "Edit" gehe, kann ich viel genauer werden.
00:06:55Das erinnert mich ein wenig an den Cursor-Editor
00:06:58oder sogar an etwas wie Lovable.
00:06:59Ich kann also die einzelnen Städte selbst auswählen.
00:07:04Wenn ich den Globus als Ganzes wähle, wird er hier angezeigt.
00:07:07Und ich kann Dinge wie die Farbe ändern.
00:07:11Das sieht schrecklich aus, die Höhe und so weiter.
00:07:14Ich habe also die Möglichkeit, sehr, sehr spezifisch
00:07:16zu sein mit dem, was ich ändern möchte, was wieder toll ist.
00:07:18Besser als wenn ich im Text sage:
00:07:19"Hey, ich möchte die Größe hiervon ändern."
00:07:21Nun, ich kann es hier einfach auswählen und so bearbeiten.
00:07:24Wir könnten auch Kommentare nutzen.
00:07:25Ich kann also auf jedes beliebige Element klicken.
00:07:27Dasselbe wie beim Bearbeiten, aber statt tatsächlich
00:07:29diese spezifischen Zahlen zu ändern,
00:07:31kann ich auf den Globus klicken und einen Kommentar hinterlassen wie:
00:07:34"Können wir den Globus größer machen?"
00:07:37An Claude senden.
00:07:40Und es erstellt eine Warteschlange für Kommentare.
00:07:41Falls man es nicht sofort an Claude senden möchte,
00:07:43kann man es zu jedem Zeitpunkt abschicken,
00:07:45und es wird mit der Arbeit begonnen.
00:07:46Darüber hinaus können wir auch zeichnen.
00:07:48Ich kann also sagen: "Alles klar,
00:07:50ich möchte hier drüben einfach einen Mond haben."
00:07:52Holen wir uns einen Mond.
00:07:53Ich möchte hier Artemis 2 herumfliegen sehen.
00:07:56Solche Sachen.
00:07:56Dann haben wir hier drüben auch die Designdatei.
00:07:58Man kann also einen Blick
00:08:00auf den Code unter der Haube werfen.
00:08:02Und schließlich haben wir die Möglichkeit,
00:08:04das Ganze zu exportieren und zu teilen.
00:08:05Wenn ich auf Export klicke, kann ich es als Zip herunterladen.
00:08:07Ich kann es als PDF, PowerPoint exportieren oder an Canva senden.
00:08:11Oder was auch super cool ist: Ich kann es
00:08:13an Claude Code übergeben.
00:08:14Es gibt mir den Befehl, um dies
00:08:15in Claude Code zu integrieren, was großartig ist.
00:08:17Hier werde ich für heute Schluss machen.
00:08:18Ich weiß, das war eine Schnelldurchfahrt,
00:08:19aber ich wollte Ihnen einfach zeigen,
00:08:21wie man sich hier zurechtfindet und was möglich ist.
00:08:23Erwarten Sie definitiv einen Deep Dive in den nächsten Tagen,
00:08:26der zeigt, wie Sie das Beste daraus machen können.
00:08:29Wie immer, lassen Sie mich wissen, was Sie denken.
00:08:31Wenn Sie die Chase AI Masterclass ausprobieren wollen,
00:08:33finden Sie sie in den Kommentaren. Wir sehen uns!