Transcript
00:00:00Claude Design kam auf den Markt und veränderte alles beim Thema Design, aber in Wahrheit steckt da
00:00:04viel mehr Hype dahinter, als die meisten ahnen.
00:00:05Und genau deshalb ist das, was ihr auf X seht, nicht die ganze Geschichte.
00:00:09Wenn ihr glaubt, Claude Design sei bahnbrechend oder diese verrückten Demos, die überall
00:00:13kursieren, seien ein Beweis dafür, dass ihr umsteigen müsst, dann irrt ihr euch gewaltig.
00:00:17Das Tool selbst ist nicht einmal der Grund, warum diese Designs so gut aussehen, und die Art,
00:00:21wie die Leute es benutzen, arbeitet bei den meisten unbemerkt gegen sie.
00:00:25Claude Design wurde in dem Moment, als es erschien, als revolutionäres Produkt für die
00:00:29Designbranche vermarktet.
00:00:30Die Leute nannten es einen Figma-Killer oder das Ende der Designer, und die Wirkung war groß
00:00:34genug, dass Figmas Aktie fiel und die Bewertung einen Dämpfer erhielt.
00:00:38Es ist ein Tool zur Erstellung realistischer Prototypen, Wireframes, Designs, Pitch-Decks und
00:00:43anderer Designarten.
00:00:44Aber in Wahrheit ist es mehr Hype als alles andere.
00:00:47Es ist buchstäblich Claude Code, das als neues Tool verpackt und verkauft wird, denn Claude Code kann
00:00:52dasselbe und möglicherweise noch mehr.
00:00:54Es gibt zwar Funktionen wie Bearbeitung und Kommentare in Claude Design, aber nichts davon ist etwas,
00:00:58das Claude Code nicht auch könnte, wenn man ihm die richtigen Tools gibt.
00:01:01Und wenn wir sagen, dass dies nur verpacktes Claude Code ist, dann nicht, weil wir es nicht getestet hätten.
00:01:05Wir gaben ihm eine einfache Aufforderung, eine Community-Website zu erstellen, und beantworteten die Fragen,
00:01:09die es dazu hatte.
00:01:10Es erstellte zwei Designs, die für sich genommen beeindruckend waren und viel besser als die Art,
00:01:14wie Claude früher Landingpages generierte, aber sie hatten immer noch viele Probleme.
00:01:18Eine Version brach beim Preisbereich ab und es gab überhaupt keinen Footer, also haben wir getestet,
00:01:23wie Claude Code bei einer ähnlichen Aufforderung abschneiden würde.
00:01:25Wir haben Opus 4.7 mit hohem Aufwand verwendet, um beide zu vergleichen, und das erzeugte Design stand
00:01:30auf einer Stufe mit den Fähigkeiten von Claude Design.
00:01:32Es gab ein paar Probleme, wie die nicht korrekt gewählte Schriftfarbe des Anmelde-Buttons,
00:01:37aber insgesamt war es ein wirklich gut gebautes Design.
00:01:39Und das, obwohl es nicht das Design-Harness hatte und ohne spezielle Aufforderungen, die
00:01:43Claude Design eingebaut hat, rein aus sich heraus, ohne dass wir fast irgendetwas vorgegeben haben.
00:01:48Aber die Demos, die ihr sicher überall gesehen habt, sehen beeindruckend aus, und hinter ihnen
00:01:52verbirgt sich etwas.
00:01:53Was in den sozialen Medien kursiert, basiert auf Hype und nicht darauf, was das Tool eigentlich
00:01:57von alleine macht.
00:01:58Die Leute erstellen Designs, indem sie umfangreiche Arbeitsabläufe befolgen und präsentieren sie dann so,
00:02:03als hätte Claude Design alles in einem Durchgang erstellt.
00:02:05Aber dieselben Arbeitsabläufe können direkt in Claude Code ausgeführt werden, ohne dass Claude Design
00:02:09überhaupt benötigt wird.
00:02:10Obwohl dieses Produkt für Designer gebaut wurde, sollten sie einfach Claude Code statt
00:02:14Claude Design verwenden, denn auf diese Weise können sie verschiedene Variationen ausprobieren, mehr experimentieren
00:02:19und die gleichen, wenn nicht sogar bessere Ergebnisse als mit Claude Design erzielen.
00:02:22Sie können mit Claude Code häufiger iterieren, anstatt abgebrochen zu werden, genau dann, wenn das
00:02:26Design gerade erst richtig Fahrt aufnimmt.
00:02:28Auf dem aufzubauen, was die Seite bereits ist, anstatt jedes Mal von vorne anzufangen, gibt ihnen
00:02:32bessere Kontrolle über die Richtung jedes Designs.
00:02:35Und da alles, was Claude Code produziert, echter Code ist, erhält man am Ende
00:02:39keinen wegwerfbaren Prototyp, sondern etwas, das direkt in das Produkt integriert werden kann, ohne
00:02:43danach von jemand anderem neu aufgebaut werden zu müssen.
00:02:45Und obendrein gibt es ein Kostenproblem bei Claude Design.
00:02:48Claude Code kann dasselbe zu weitaus geringeren Kosten leisten, während Claude Design separat gebaut
00:02:53wurde und auf Limits angerechnet wird, die wöchentlich laufen, und es zählt nicht zu euren anderen Limits,
00:02:57aber es verbraucht das Guthaben in einem viel schnelleren Tempo, als man es normalerweise von Modellen
00:03:02über andere Claude-Apps erwarten würde.
00:03:03Das trifft Designer am härtesten, weil das Kontingent so niedrig ist, dass sie nicht wirklich experimentieren
00:03:08können, wie sie es müssen, und ihr Limit ist nach nur wenigen Designiterationen erschöpft.
00:03:12Und genau das ist es, worüber sich viele Leute beschweren.
00:03:15Als jemand damit arbeitete, war sein Design-Limit schnell erschöpft, nach nur etwa
00:03:1920 Designiterationen, selbst im höchsten Max-Plan.
00:03:23Und viele andere sagen, dass sie das Limit in nur einer Stunde erreichen und am Ende trotzdem nur ein einfaches
00:03:27Design haben, das leicht mit Claude Code in einem Durchgang umsetzbar ist.
00:03:31Es ist also in der Praxis nicht wirklich brauchbar, da sie die Limits erreichen, bevor sie
00:03:35überhaupt den Workflow beenden können, an dem sie arbeiten, was es deutlich schlechter macht im Vergleich zu Claude Code-Limits.
00:03:39Limits.
00:03:40Der Grund, warum Claude Designs Arbeit so beeindruckend aussieht, ist eigentlich das Opus 4.7 Modell-Update, nicht das
00:03:45Tool selbst.
00:03:46Opus 4.7 ist erneut das State-of-the-Art-Modell mit erstaunlichen Fähigkeiten und schneidet
00:03:50über alle Benchmarks hinweg besser ab.
00:03:52Aber das Upgrade, das hier wirklich zählt, ist das Sehen.
00:03:54Dieses Modell hat ein wesentlich besseres Sehvermögen und kann Bilder mit einer viel größeren Auflösung
00:03:59sehen, als es zuvor konnte.
00:04:00Claude Opus 4.6 konnte Bilder mit einer Auflösung von 1,15 Megapixeln analysieren, während das
00:04:074.7 in der Lage ist, 3,75 Megapixel zu analysieren.
00:04:10Das bedeutet also, dass es Design von einer Referenz aus viel besser verstehen kann.
00:04:14Wenn man ihm ein Referenzdesign gibt, verarbeitet es diese Referenz mit viel größerer Klarheit und
00:04:18erkennt Dinge, die es vorher übersehen hätte.
00:04:20Mit diesem Modell-Upgrade hat Anthropic die einzige Lücke geschlossen, in der Claude-Modelle fehlten und
00:04:25umfangreiche Arbeit erforderten, nämlich das Front-End-Design.
00:04:27Dieses Modell ist geschmackvoller und kreativer bei der Erledigung einer Aufgabe und produziert von alleine
00:04:31höherwertige Schnittstellen und Designs.
00:04:34Als Claude Design also auf den Markt kam, wurde es wegen seiner verrückten Designs mit viel Hype beworben,
00:04:38aber in Wirklichkeit war es das Modell, das besser geworden ist.
00:04:41Es war nicht das Tool, das so unglaublich gut wurde, dass es zu den verschiedenen Visualisierungen führte, die
00:04:45ihr seht.
00:04:46Claude Design war eine weitere clevere Art von Anthropic, etwas zu verkaufen und Hype darum zu erzeugen.
00:04:50Jetzt könnt ihr dieselben Vorteile, die ihr in Claude Design bekommt, in Claude Code 2 erhalten oder möglicherweise
00:04:55besser.
00:04:56Ihr könnt den Fragen-Workflow von Claude Design in Claude Code nachbilden, indem ihr einen einfachen Skill erstellt.
00:05:00Wenn ihr ein Projekt in Claude Design erstellt, gebt ihr eine Aufforderung und es stellt viele Fragen,
00:05:04damit es die Designrichtung richtig feststellen kann.
00:05:07Es fragt weit mehr als der Planungsmodus von Claude Code, aber ein Skill kann genau dasselbe.
00:05:11Der Skill enthält Anweisungen, wie man eine Fragesitzung genau wie Claude Design ausführt,
00:05:16indem man Fragen verwendet, um die Lücken zu füllen, die die Aufforderung hinterlässt, und nach dem fragt, was gebaut werden muss.
00:05:21Er definiert, wann Folgefragen ausgelöst werden sollen und wie der Ablauf eigentlich funktionieren sollte.
00:05:25Er enthält auch Beispielfragen für den Ablauf der Sitzung, eine Fragendatenbank und sogar
00:05:30ASCII-Layouts von Seiten, damit es die Positionierung von Elementen in der Landing
00:05:34page bestimmen kann.
00:05:35Wenn ihr ihm eine Aufforderung gebt, nutzt es den Skill und stellt Fragen zu den Lücken, die es identifiziert,
00:05:39genau wie Claude Design.
00:05:41Es stellt mehrere Fragen in verschiedenen Bereichen und sobald es alle Informationen hat,
00:05:45die zur Implementierung benötigt werden, fängt es an zu bauen.
00:05:47Das Beste ist, dass es direkt Code ausgibt, sodass es kein Design-zu-Code-Handoff gibt.
00:05:51Und mit diesem Ansatz könnt ihr so oft iterieren, wie ihr wollt, ohne euch Sorgen machen zu müssen, Limits
00:05:55in nur einer Stunde zu überschreiten.
00:05:57Die UI-Generierung aus der gleichen Art von Aufforderung zusammen mit dem ähnlichen Fragen-Workflow in
00:06:01Claude Code war mehr oder weniger ähnlich zu dem, was Claude Design generierte.
00:06:05Der Hauptunterschied ist, dass Claude Design in bestimmten Aspekten einen Vorteil hatte, wo es die
00:06:09Website durch kleine Animationen immersiver machte, um sie ansprechender wirken zu lassen.
00:06:13Aber bevor wir fortfahren, lassen wir ein Wort von unserem Sponsor hören.
00:06:16HeyGen. Ihr habt wahrscheinlich schon einmal versucht, ein Video mit
00:06:18einem KI-Tool zu erstellen.
00:06:1920 Minuten später jongliert ihr mit Zeitleisten, nehmt Voiceovers neu auf und kämpft mit Lippensynchronisation, die aussieht
00:06:24wie eine schlechte Synchronisation.
00:06:25HeyGen überspringt das alles.
00:06:26HeyGen ist der KI-Videogenerator, der gerade ein brandneues CLI veröffentlicht hat, was bedeutet, dass ein vollständiges
00:06:31Video mit digitalem Avatar mit einem einzigen Befehl generiert werden kann.
00:06:34Keine Zeitleiste, keine Kamera, keine Crew.
00:06:36Nehmt euren digitalen Zwilling einmal auf und HeyGen ermöglicht es euch, konsistent ohne Nachdrehen zu veröffentlichen,
00:06:40und verwandelt Newsletter, PDFs, PowerPoints in Videos.
00:06:44Generiert vollständig bearbeitete Videos mit mehreren Szenen aus einer einzigen Aufforderung mit dem Video-Agenten und übersetzt dann
00:06:48für ein globales Publikum mit vollständiger Lippensynchronisation.
00:06:51Baut mit Avataren, Stimmen, Video-Agenten, Übersetzung und mehr unter developers.heygen.com
00:06:56Digitale Zwillinge erfordern verifizierte Zustimmung.
00:06:59Euer Inhalt wird niemals verwendet, um öffentliche Modelle zu trainieren, und die gesamte Plattform ist für
00:07:03unternehmensweite Sicherheit ausgelegt.
00:07:04Fangt an, Videos in Studioqualität zu versenden, ohne eine Kamera zu berühren.
00:07:07Klickt auf den Link im angepinnten Kommentar und probiert HeyGen heute aus.
00:07:11Die meisten der scroll-interagierenden Designs, die ihr vielleicht auf X gesehen habt, als Leute
00:07:15Claude Design präsentierten, sind nur Seiten, die Videohintergründe verwenden, was sie weit mehr
00:07:20premium aussehen lässt und den Eindruck erweckt, dass sie beeindruckender sind, als sie eigentlich sind.
00:07:24Die meisten der Demos sind oft nur Aufforderungen, die von Seiten kopiert wurden, die gebrauchsfertige Aufforderungs-Vorlagen
00:07:28anbieten.
00:07:29Die Aufforderungen enthalten einen Link zu einem Video, das als Hintergrund verwendet werden soll, zusammen
00:07:33mit detaillierten Richtlinien, wie man es implementiert.
00:07:36Jeder Agent ist also in der Lage, diese Art von Website zu implementieren, nicht nur Claude Design,
00:07:40solange ihm ähnliche Aufforderungen gegeben werden.
00:07:42Aber das sind nur Beispielaufforderungen für Vorzeige-Seiten.
00:07:45In der Realität werden produktionsreife Anwendungen unter Verwendung von Bibliotheken wie Lenis gebaut, das
00:07:49in vielen Produktions-Apps sowie GSAP verwendet wird, einer der beliebtesten Bibliotheken
00:07:54für die Implementierung flüssiger Animationen, die das Website-Erlebnis weitaus immersiver machen als
00:07:59zuvor.
00:08:00Um das zu testen, haben wir tatsächlich ein Video heruntergeladen und in unserer Aufforderung Claude Code einfach angewiesen,
00:08:04das Video als Hero-Sektion zusammen mit den gewünschten Farbthemen zu verwenden, und es implementierte
00:08:08den Rest der Website von alleine.
00:08:10Wir mussten es nur einmal korrigieren, als wir erklären mussten, worum es in dem Video ging.
00:08:14Und es hat den Stil perfekt in die Landingpage integriert, wodurch sie viel besser wurde als
00:08:18die vorherige Version.
00:08:19Die Website wurde wirklich gut implementiert, was ziemlich leistungsstark ist, wenn man bedenkt, wie einfach die Aufforderung
00:08:23war, und sie enthielt verschiedene Animationen und Interaktionen, die diesen Teil der Seite
00:08:28viel leistungsstärker und interaktiver machten als zuvor mit Claudes Fähigkeiten.
00:08:32Jetzt könnt ihr es in Claude Code auch mit mehr Tools ergänzen, was im Vergleich zu Claude
00:08:36Design einfach ist, da Claude Code technisch leistungsfähiger ist und Dinge nahtloser implementieren kann.
00:08:42Ihr könnt sogar einen Open-Source-Skill wie Scrollytelling verwenden, der im Grunde Scrolling-
00:08:46Storytelling-Animationen in eurem Projekt ermöglicht.
00:08:48Also mit diesem Skill kann Claude problemlos mehrstufiges Storytelling aus einer einfachen Aufforderung implementieren
00:08:53und daran arbeiten, Animationen zu erstellen, die viel tiefer gehen als das, was Claude Design
00:08:57von alleine könnte.
00:08:59Auch wenn euch unser Inhalt gefällt, erwägt, den Hype-Button zu drücken, da es uns hilft,
00:09:03mehr solchen Inhalt zu erstellen und mehr Menschen zu erreichen.
00:09:07Claude Code statt Claude Design zu verwenden, macht es einfacher, UIs zu implementieren, denn mit
00:09:11Claude Code könnt ihr eingebaute Designsysteme problemlos integrieren, indem ihr Komponenten
00:09:16von Shadcn, Aceternity oder Hero UI einbaut, die bereits viele vorgefertigte Animationen enthalten.
00:09:22Dies reduziert die Notwendigkeit für das Modell, herauszufinden, wie jede Komponente aussehen und sich verhalten sollte,
00:09:27und lässt es sich stattdessen darauf konzentrieren, das Gesamtdesign zu verbessern.
00:09:30Das Ergebnis ist also viel leichter zu erreichen, als standardmäßig direkt in Claude Design zu arbeiten.
00:09:35Ihr könnt auch Front-End-Design-Skills oder andere spezialisierte Skills verwenden, die auf euer Projekt zugeschnitten sind,
00:09:39die mit einem Skill-Creator erstellt wurden, der den aktuellen Zustand des Projekts analysiert.
00:09:43Dies hilft ihm, Funktionen effektiver zu implementieren, ohne Zeit zu verschwenden.
00:09:47Claude Code ist auch flexibler, weil ihr MCP-Server damit verbinden könnt.
00:09:51Zum Beispiel könnt ihr einen Shadcn-MCP-Server verwenden, sodass der Agent die richtigen Komponenten
00:09:56von alleine installieren kann, anstatt explizit gesagt zu bekommen, was zu verwenden ist und wo.
00:09:59Ebenso könnt ihr verschiedene MCPs verwenden, die dabei helfen, UIs effektiver zu bauen, anstatt euch
00:10:04auf ein rein generiertes Design zu verlassen.
00:10:06Selbst mit Modellen wie Opus 4.7 und Tools wie Claude Design offenbaren direkt generierte Designs
00:10:11oft, dass sie von einem Modell produziert wurden, da sie dazu neigen, ähnlichen Mustern zu folgen.
00:10:16Aber die Verwendung etablierter Bibliotheken hilft, dieses Problem zu reduzieren und macht das Ergebnis natürlicher
00:10:20und weniger vorhersehbar.
00:10:22Der größte Vorteil der Verwendung von Claude Code anstelle von Claude Design ist, dass ihr es
00:10:26mit Git verbinden könnt.
00:10:27Obwohl ihr GitHub auch mit Claude Design verbinden könnt, gibt es einen riesigen Unterschied
00:10:30in der Funktionsweise beider.
00:10:31Die Git-Integration von Claude Design ist ziemlich einfach.
00:10:34Sie erlaubt es hauptsächlich, Dateien aus einem verbundenen GitHub-Repository abzurufen und sie zu verwenden,
00:10:38um Designs zu verstehen.
00:10:39Aber ihr Zweck ist meist auf Lesen und Referenzieren beschränkt.
00:10:42Es nimmt nicht wirklich Änderungen am Repository vor.
00:10:45Claude Code ist andererseits ganz anders.
00:10:47Es kann vollständige Git-Operationen wie Commits, Branching und mehr durchführen.
00:10:51Wenn also bei eurer Implementierung etwas schiefgeht oder ihr nach dem Vornehmen von Änderungen
00:10:55eine ältere Version bevorzugt, könnt ihr einfach mithilfe von Git zu einer früheren Version zurückkehren.
00:10:59Das könntet ihr mit Claude Design nicht, während ihr es benutzt, was
00:11:02Claude Code zu einem weitaus stärkeren Ansatz macht.
00:11:04Für das Entwerfen verschiedener Prototypen ist es effektiver, Mockups direkt in HTML zu erstellen,
00:11:09anstatt zu Claude Design zu gehen oder Figma zu verwenden.
00:11:12Um verschiedene Variationen auszuprobieren, könnt ihr auch parallele Agenten und Worktrees nutzen,
00:11:16um Aufgaben aufzuteilen, ähnlich wie Claude Design Designs erforscht, aber auf eine Git-verwaltete Art,
00:11:21sodass ihr die beste Version behalten und den Rest einfach verwerfen könnt.
00:11:24Ihr könnt ihm einfach eine Aufforderung geben, Sub-Agenten in separaten Worktrees zu verwenden, und jeden Agenten bitten,
00:11:29eine andere Variation desselben Designs zu implementieren.
00:11:31Damit wird Claude Agenten in separaten Arbeitsbereichen spawnen.
00:11:35Die Verwendung paralleler Agenten hilft euch dabei, sowohl Zeit als auch Mühe zu sparen, während ihr mehrere Richtungen
00:11:39gleichzeitig erforscht.
00:11:40Sobald jeder Agent seine Arbeit beendet hat, erhaltet ihr mehrere Variationen, die ihr jederzeit überprüfen
00:11:44und diejenige auswählen könnt, die euren Bedürfnissen am besten entspricht.
00:11:47Von dort aus könnt ihr Änderungen vornehmen und mit dem Aufbau der App basierend auf genau dem Stil fortfahren,
00:11:51der euch am besten gefällt.
00:11:52Und obwohl sie nicht von Claude Design generiert wurden, hat jedes der generierten Designs trotzdem einen
00:11:57ästhetischen Look mit korrekten SVGs, die vollständig durch Code erstellt wurden, um Elemente abzubilden, und eine viel
00:12:02bessere allgemeine Balance.
00:12:04Ihr könnt dann eure bevorzugte Version in Main mergen und die Worktrees entfernen, die die Designs
00:12:08enthalten, die ihr nicht mochtet.
00:12:09Die hier verwendeten Skills zusammen mit anderen Ressourcen sind in AI Labs Pro für dieses Video
00:12:15und für alle unsere vorherigen Videos verfügbar, von wo aus ihr sie herunterladen und für eure eigenen Projekte verwenden könnt.
00:12:19Wenn ihr Wert in dem gefunden habt, was wir tun, und den Kanal unterstützen wollt, ist dies der beste Weg,
00:12:23es zu tun.
00:12:24Der Link ist in der Beschreibung.
00:12:25Das bringt uns zum Ende dieses Videos.
00:12:26Wenn ihr den Kanal unterstützen und uns helfen möchtet, weiterhin solche Videos zu erstellen, könnt ihr das
00:12:30tun, indem ihr den Super-Thanks-Button unten verwendet.
00:12:33Wie immer, danke fürs Zuschauen und ich sehe euch im nächsten.