Das ist Wahnsinn... Das Google-Stitch- vs. Claude-Design-Debakel ist beendet
AAI LABS
Computing/SoftwareSmall Business/StartupsPhotography/ArtInternet Technology
Transcript
00:00:00Gemini war das Spitzenmodell in Sachen Design, auch wenn es in anderen Bereichen nicht mithalten konnte,
00:00:05besonders mit seinem Design-Tool Stitch, das wir mehrfach in unseren Workflows eingesetzt haben.
00:00:09Dies wurde mit dem Stitch 2.0 Update und seinen zahlreichen neuen Funktionen noch besser,
00:00:14was den Vorsprung weiter ausbaute. Aber auch Anthropic hat nachgelegt und ist mit der
00:00:19Veröffentlichung von Opus 4.7 und Claude Design in den Designbereich eingestiegen, was so einschlug, dass
00:00:24die Leute begannen, es als das Ende von Figma zu bezeichnen. Die Preisfrage ist jedoch: Welches ist wirklich besser?
00:00:30Um das zu klären, testen wir sie in verschiedenen Kategorien, damit Sie am Ende wissen,
00:00:34welches Tool einen Platz in Ihrem Workflow verdient. Sowohl Claude Design als auch Google Stitch haben viele Funktionen,
00:00:39die sie voneinander unterscheiden. Claude Design wurde zeitgleich mit Opus 4.7 veröffentlicht und wurde
00:00:45aufgrund seiner interaktiven Funktionen schnell als “Figma-Killer” bekannt. Das Modell
00:00:49selbst wurde im Bereich Design viel besser, und zusammen mit dem Design-Tool machten die Entwürfe große Sprünge.
00:00:54Google Stitch hingegen gibt es schon länger, aber es war nicht besonders gut, bis Google
00:00:58Gemini 3 herausbrachte – ein Modell, das im Designbereich wahnsinnig viel besser ist als alle anderen. So
00:01:04verbesserten sich die Designs in Kombination mit Stitch erheblich. Schauen wir uns nun an, wo
00:01:08die einzelnen Tools tatsächlich die Nase vorn haben. Claude Design bietet eine Funktion, mit der man Präsentationen
00:01:13erstellen und direkt darin Sprechernotizen verfassen kann. Stitch bietet so etwas nicht,
00:01:17da Stitch rein auf UI fokussiert ist und keine Funktionen für andere Designs außer Mobil- und Web-Interfaces bietet.
00:01:23In Claude Design können Sie auch auf andere Projekte verweisen, deren Stil das Design folgen soll,
00:01:28indem Sie Ihr GitHub-Repo verknüpfen. So kann Claude Designstile importieren und
00:01:32darauf aufbauend neue Entwürfe erstellen. Stitch handhabt das etwas anders: Es nutzt
00:01:37Design-Systeme für dieselbe Aufgabe. Sie können das Design-System von anderen gehosteten Websites kopieren,
00:01:42indem Sie einfach den Link in Stitch angeben. Von dort importiert es den exakten Stil und
00:01:46erstellt ein System für spätere Designs. Wenn es um Änderungen geht, erlaubt Claude Design das
00:01:51Reprompting, aber Sie können auch direkt auf den Bereich klicken, den Sie ändern möchten, und es wird sofort umgesetzt.
00:01:56Sie können einfach direkt einen Kommentar zu allem hinterlassen, was anders sein soll, und die Änderungen
00:02:00werden direkt angewendet. Sie können Kommentare sammeln und sie alle zusammen an Claude senden.
00:02:04Stitch geht hier einen anderen Weg. Man kann Änderungen nicht direkt vornehmen, außer bei Texten.
00:02:09Wenn Sie also Änderungen wie Farbe oder Schriftgröße wünschen, müssen Sie einen Kommentar im gewählten Bereich
00:02:14hinzufügen oder ihn markieren und den Kommentar an Gemini senden, damit die Änderungen übernommen werden.
00:02:19Bei der Spracheingabe scheiden sich die Geister. Claude Design lässt Sie Ihre Stimme nutzen, um Prompts
00:02:24einzusprechen statt zu tippen. Aber hier punktet Stitch, denn die Voice-Canvas-Funktion in Stitch
00:02:28ist im Grunde eine Live-Konversation mit dem Modell, bei der Sie alles über das gewünschte Design
00:02:33erzählen. Es stellt Rückfragen zum Design und erstellt es für Sie,
00:02:37alles im Dialog. Stitch hat zudem eine Live-Vorschau in einem separaten Fenster, in dem man sieht,
00:02:42wie das Design auf Desktop, Handy und Tablet aussieht, und man kann direkt damit interagieren.
00:02:47Claude Design hat keine separate Vorschau. Stattdessen wird die UI im selben Fenster angezeigt,
00:02:52wo man direkt mit Elementen interagieren kann, ohne auf einen anderen Vorschaubildschirm zu wechseln,
00:02:57aber man kann die Responsivität nicht so prüfen wie bei Google Stitch. Claude Design ist zudem
00:03:01für die Teamarbeit konzipiert und erlaubt es, Projekte mit verschiedenen Berechtigungen wie
00:03:06Bearbeitungs- und Kommentarrechten separat zu teilen, was Stitch nicht bietet. Bei Stitch teilt man
00:03:11einfach das Projekt und lässt alle daran arbeiten, ohne separate Berechtigungen wie bei Claude Design.
00:03:15Obwohl Stitch das reifere Projekt ist und Claude Design erst vor Kurzem veröffentlicht wurde,
00:03:20würden wir Claude Design bei den Funktionen den Vorzug geben. Claude Design
00:03:24ist ein neueres Produkt, das nur in den Plänen Pro, Max, Team und Enterprise von Claude verfügbar ist.
00:03:30Stitch hingegen ist unabhängig vom Plan kostenlos verfügbar und nutzt ein Creditsystem
00:03:35zur Nutzungskontrolle. In Bezug auf die Nutzbarkeit bietet Stitch wesentlich mehr Credits.
00:03:40Es erlaubt 400 tägliche Design-Credits und 15 tägliche Redesign-Credits. Man bekommt also selbst
00:03:46an einem Tag sehr viele Credits, und die monatlichen Credits sind noch zahlreicher. Normalerweise kostet ein
00:03:51einfaches Design drei Credits; das kann je nach Komplexität und Anzahl der Generationen variieren,
00:03:56sodass man viele Designs erhält. Claude Design hat separate Limits, die über eine Woche gelten.
00:04:00Dieses Limit beeinflusst Ihre anderen Claude-Code-Limits nicht, sodass Sie andere Funktionen
00:04:05weiter nutzen können, wenn die Design-Limits erschöpft sind. Aber wie im letzten Video erwähnt,
00:04:10ist dieses Limit praktisch unbrauchbar, da es kein freies Experimentieren zulässt und aufgebraucht ist,
00:04:15bevor man substanzielle Ergebnisse erzielt. Das ist im Pro-Plan noch schlimmer,
00:04:20da man dort nur mit wenigen Designs experimentieren kann. Wenn Sie also wirklich etwas
00:04:24mit Claude Design erreichen wollen, müssten Sie in den Max-Plan wechseln. Vergleicht man die Kosten,
00:04:29ist Stitch mit großem Vorsprung der klare Sieger, da es zumindest das Experimentieren erlaubt,
00:04:34was bei Claude Design nicht der Fall ist. Wir haben beide Tools mit demselben Prompt getestet –
00:04:39einem Briefing zum Website-Stil und den gewünschten Abschnitten. Claude Design erstellte To-dos,
00:04:44wie Claude Code es meist tut, und legte los. Während Claude Design noch brauchte, gaben wir den Prompt an Google Stitch.
00:04:49Zuerst erstellte Stitch das Design-System und visualisierte alles von Farben über Typografie
00:04:54bis hin zu Icons und Buttons. Noch bevor Claude Design fertig war, lieferte Stitch ab. Es baute eine
00:04:59Landingpage im exakten Stil des Design-Systems mit einer perfekten Balance zwischen Haupt-
00:05:04und Akzentfarben. Claude Design dauerte viel länger, und nach der Fertigstellung folgten
00:05:09Verifizierungsschritte. Jeder Teil von Claudes Arbeit war interaktiv, im Gegensatz zu Stitchs statischer Seite.
00:05:15Beim ersten Durchlauf konnten wir uns zwischen Farben für Akzente und dem Hauptthema entscheiden,
00:05:20sodass wir kleine Änderungen selbst vornehmen konnten, ohne neu zu prompten. Beim Qualitätstest
00:05:25würden wir Google Stitch den Punkt geben, da das Design deutlich besser war. Stitch nutzte
00:05:30die Farbpalette kreativ, um den Stil und die Stimmung der App zu treffen, während Claudes Wahl
00:05:34generisch wirkte und an Tiefe vermissen ließ. Auch bei der Geschwindigkeit gewinnt Stitch,
00:05:39da Claude Design für jeden Entwurf viel zu lange braucht. Wann immer Claude Design Bilder benötigt, erstellt es SVGs
00:05:45und bindet sie ein. Ohne eigene Assets verlässt es sich ganz auf die SVG-Generierung.
00:05:50Google hingegen hat Nano Banana, ein eigenes Bildmodell. Stitch integriert es direkt in das Produkt,
00:05:55und selbst ohne explizite Anweisung nutzt es die Bildgenerierung für alle Bereiche des Designs,
00:06:00was die Ergebnisse stark verbessert. Egal wie hochwertig SVGs sind, sie können nicht mit einem
00:06:05echten Bildmodell konkurrieren. In dieser Situation ist Google Stitch der klare Sieger.
00:06:10Stitch ist nicht gerade für Animationen bekannt, da der Fokus rein auf dem Design liegt,
00:06:16aber wir haben es dennoch getestet. Es gab Versuche, aber die Animationen waren nicht direkt sichtbar
00:06:21und ließen sich nur in einem separaten Tab prüfen. Es wurde auch nur ein Scroll-Reveal in einem Bereich erzeugt.
00:06:26Als wir dieselbe Aufgabe Claude Design gaben, fügte es mehrere Animationen hinzu,
00:06:32wie ein Marquee unter dem Hero-Bereich. Der Scroll-Reveal war ebenfalls vorhanden, aber viel
00:06:37besser abgestimmt und auf jede Komponente angewendet. Claude Design ist bei Animationen
00:06:43deutlich besser als Stitch, da es gängige Bibliotheken wie Shaders nutzt und interaktive
00:06:48Animationen erstellt, die auf Mausbewegungen und Klicks reagieren. In Sachen Animationen
00:06:54ist Claude Design also der klare Gewinner. Wenn Ihnen unsere Inhalte gefallen, denken Sie daran,
00:06:59den Hype-Button zu drücken. Das hilft uns, mehr solcher Videos zu erstellen und mehr Menschen zu erreichen.
00:07:04Um das Verständnis und die Handhabung von Änderungen zu prüfen, sollten beide Registrierungs- und
00:07:09Login-Seiten für die App erstellen. Stitch war zuerst fertig, nutzte dasselbe Design-System
00:07:14und implementierte auf jeder Seite den gleichen Header und Footer. Mit der Prototyp-Funktion konnten wir
00:07:19den Flow prüfen und sehen, wie die Buttons verknüpft sind. Claudes Umsetzung passte besser
00:07:24zum Konzept der App und verstand die Anforderungen besser. Die Login-Seite war kreativ gelöst,
00:07:28und bei der Registrierung ging es sogar einen Schritt weiter und bot verschiedene Kontotypen an.
00:07:33Wir wollten auch sehen, wie gut Änderungen übernommen werden. In Claude Design haben wir einfach Kommentare
00:07:38hinzugefügt und gesammelt abgeschickt, woraufhin die Umsetzung begann. Bei Stitch mussten wir die Bereiche
00:07:44markieren, aber das Ergebnis war nicht das, was wir wollten. Es wurde einfach ein Footer an der falschen Stelle,
00:07:49direkt nach den Zitaten, eingefügt – sehr seltsam. Das Iterieren mit Stitch ist insgesamt
00:07:54nicht sehr anwenderfreundlich, da für jede Änderung ein neuer Screen erstellt wird, was irgendwann unübersichtlich wird.
00:07:59Claude Design bietet die bessere Erfahrung, da Änderungen direkt im Design reflektiert werden und
00:08:04das Tool die App versteht und Änderungen stilgetreu umsetzt. Beim Iterieren am Design
00:08:09ist Claude Design also eindeutig der bessere Weg. Jedes Tool hat sein eigenes Design-System.
00:08:14Bei Claude Design identifiziert es Ihre Marke, da das Tool für Teams gedacht ist, die an Brand-Kits arbeiten.
00:08:20Sie können Beschreibungen, Schriften, Logos und Assets hinzufügen, und es erstellt ein komplettes System,
00:08:25das Ihren Markenstil repräsentiert. Für Stitch ist das Design-System eine Datei, die keine Marke,
00:08:30sondern ein spezifisches Design darstellt. Diese Datei ist nicht auf Stitch beschränkt. Sie können sie
00:08:36exportieren und in jedem Agenten nutzen; sie wird direkt verstanden und umgesetzt. Wie erwähnt,
00:08:41können Sie Systeme von anderen Websites importieren oder eigene erstellen. Stitch hat die design.md-Datei
00:08:46Open Source gemacht, inklusive npm-Befehlen für Installation und Formatierung. Jedes System erfüllt
00:08:52einen anderen Zweck, aber wir bevorzugen Googles Lösung, da sie den Plattformwechsel erleichtert
00:08:57und einen nicht an Stitch bindet. Nachdem wir die Designs getestet haben, sprechen wir über den
00:09:02Handoff vom Design zum Code. Wie erwähnt, bietet Claude Design mehr Exportoptionen
00:09:07mit Rechtekontrolle. Ein Export als PDF, Slides oder sogar nach Canvas ist möglich,
00:09:13um dort weiterzuarbeiten. Am häufigsten nutzen wir jedoch den Handoff zu Claude Code,
00:09:18da wir dort unsere Apps meist entwickeln. Durch Kopieren und Einfügen eines einzelnen Prompts in
00:09:23Claude Code wird das Design übernommen und in der App umgesetzt. Google Stitch hingegen
00:09:28hat wesentlich bessere Handoff-Muster. Stitch bietet ein MCP, über das man es mit seinem
00:09:33Coding-Agenten verbinden kann. Dieser kann Stitch anweisen, Designs zu erstellen und diese dann
00:09:39direkt in die App zu integrieren. Claude Design hat keine MCP-Integration. Wir schätzen Stitchs MCP,
00:09:44da es in beide Richtungen funktioniert: Coding-Agenten können in der Stitch-Sprache prompten,
00:09:49sodass wir uns nicht um das richtige Prompting kümmern müssen und dennoch die gewünschten Designs erhalten. Stitch erlaubt
00:09:53auch den Export als Zip-Code, bietet aber noch weitere Optionen. Man kann es nach Google AI Studio
00:09:58exportieren, um die App mit dortigen Ressourcen und integriertem Firebase weiterzubauen,
00:10:04oder direkt nach Figma exportieren, um dort im Team zu arbeiten. Wir nutzen den MCP-Export
00:10:09am meisten, da wir uns so nicht um den Handoff kümmern müssen und Coding-Agenten alles übernehmen.
00:10:14Man kann es auch als PRD exportieren, was die Umsetzung durch andere Personen oder Agenten
00:10:19problemlos ermöglicht. In puncto Handoff-Stil ist Stitch also der klare Sieger. Das bringt uns
00:10:25zum Ende dieses Videos. Wenn Sie den Kanal unterstützen und uns helfen möchten, weiterhin solche Videos
00:10:30zu machen, können Sie dies über den Super-Thanks-Button tun. Wie immer danke ich fürs
00:10:35Zuschauen und wir sehen uns im nächsten Video.
00:10:40Alles Gute und bis bald!