00:00:00KI-Design wird mit jedem neuen Tool-Release und Modell-Update immer besser,
00:00:04aber gutes Design entsteht nicht dadurch, dass man sich auf ein einziges Tool verlässt und hofft, dass die App toll aussieht.
00:00:09Es ist immer die Kombination aus Tools und Ressourcen, die Designs aufwertet,
00:00:12aber noch wichtiger ist es, das richtige Werkzeug für den richtigen Zweck einzusetzen.
00:00:16Googles KI-Design-Tool Stitch hat gerade ein cooles Upgrade erhalten, das das UI-Design erheblich erleichtert.
00:00:21Auch Vercel hat vor Kurzem etwas veröffentlicht, das Claudes Chrome-Extension übertrifft
00:00:26und nun zu meinem Standard-Tool für Browser-Tests geworden ist.
00:00:29Wir haben heute viel zu besprechen, denn ich hätte nicht erwartet,
00:00:32dass diese Kombination ein so solides Design liefert.
00:00:34Google Stitch ist jetzt als MCP zur Anbindung des KI-Agenten verfügbar,
00:00:39wodurch dieser Projekte erstellen und verwalten sowie Designs direkt über den Agenten entwerfen kann.
00:00:43Dank dieses Updates musste ich Stitch keine maßgeschneiderten Prompts mehr geben, sondern konnte Claude das
00:00:48überlassen. Es bietet Funktionen wie Projektmanagement, das Erstellen neuer Projekte
00:00:53und das Abrufen aller aktiven Projekte. Die Verwaltung erfolgt über Listenansichten
00:00:57sowie den Zugriff auf Projekte und Screens. Zudem kann der Agent neue Designs per Text-Prompt erstellen.
00:01:02Der Installationsprozess wird in der Dokumentation Schritt für Schritt erklärt.
00:01:06Man muss das Google Cloud SDK per curl installieren, aber da ich einen Mac nutze,
00:01:11habe ich es über brew erledigt und die Google Cloud CLI heruntergeladen.
00:01:14Man muss sich zweimal einloggen – einmal als User und einmal als Application – da die Verbindung
00:01:19zu einem Google Cloud Projekt nötig ist, um die Stitch-API darin zu aktivieren,
00:01:24weil für die Erstellung der Designs die Ressourcen dieses Projekts genutzt werden.
00:01:27Nach Abschluss des Prozesses lässt sich Stitch mit jedem beliebigen Editor verbinden.
00:01:31Ich habe es in Claude Code eingerichtet, wodurch alle Tools sofort einsatzbereit waren.
00:01:35Inzwischen hat jemand diesen langwierigen Prozess vereinfacht und einen Stitch-MCP erstellt,
00:01:41der den gesamten Ablauf übernimmt. Von der Google Cloud Installation bis zum Projekt-Setup
00:01:45läuft alles automatisch. Das Tool ist zwar inoffiziell und experimentell,
00:01:50funktioniert aber bisher einwandfrei. Ganz gleich, was wir bauen:
00:01:54Planung vor der Umsetzung ist essenziell. Ich habe an einer App für technische Probeinterviews gearbeitet,
00:01:59die nicht nur Coding-Interviews, sondern auch andere Interview-Typen im Tech-Bereich abdeckt.
00:02:03Während des Videos sind mir einige Probleme aufgefallen, wie der Stitch-MCP arbeitet
00:02:08und wie man ihn besser in den Designprozess integrieren sollte.
00:02:13Diese Regeln habe ich zusammen mit dem Quellcode der App in einer Claude.md-Datei auf
00:02:18AI Labs Pro veröffentlicht. Für alle, die es nicht wissen: Das ist unsere neue Community,
00:02:23in der wir alle Ressourcen bündeln – seien es Prompts,
00:02:28reusable Commands oder Skills für unsere Projekte. Wenn euch unsere Arbeit gefällt
00:02:33und ihr den Kanal unterstützen wollt, ist das der beste Weg. Links findet ihr in der Beschreibung.
00:02:38Ich plane meine Apps am liebsten im Plan-Modus von Claude Code, da er jede Facette
00:02:43meiner groben Idee durchleuchtet und ein detailliertes Dokument schreibt. Ihr könnt aber jede IDE nutzen.
00:02:48Ich habe meine App-Idee an Claude Code im Plan-Modus übergeben und um einen UI-Guide gebeten,
00:02:53der nicht nach dem typischen, generischen KI-Design aussieht.
00:02:58Obwohl es zeitaufwendig war, bin ich den gesamten Prozess durchgegangen. Es ist extrem
00:03:03wichtig, den Plan gründlich zu lesen, da ich viele Anpassungen vornehmen musste,
00:03:09um ihn meinen Vorstellungen anzupassen. Ich habe so lange gefeilt, bis ich zufrieden war
00:03:14und am Ende genau den Plan hatte, den ich wollte. Nachdem der Design-Plan feststand,
00:03:19ging es an die Umsetzung. Ehrlich gesagt bevorzuge ich Geminis Design-Fähigkeiten
00:03:24gegenüber denen von Claude. Also wies ich Claude an, den erstellten Plan zu nehmen
00:03:29und über den Stitch-MCP ein exaktes Design-Projekt zu starten. Claude nutzte das Tool,
00:03:35erstellte ein Projekt und generierte die Sektionen. Es identifizierte das Projekt
00:03:40über eine ID und schickte einen detaillierten Prompt an Stitch, woraufhin die Screens erstellt wurden.
00:03:45Für die erste Sektion wurde Gemini 3 Flash genutzt. Ein Punkt, der mir nicht gefiel:
00:03:50Es schickte separate Prompts für alle Sektionen der Landingpage, anstatt ein langes Design zu erstellen,
00:03:55wie es im Webdesign üblich ist. Das kann Probleme bei der Zusammenführung bereiten.
00:04:00Daher bat ich Claude, ein langes Seitendesign statt einzelner Komponenten zu entwerfen.
00:04:05Claude erstellte daraufhin einen sehr detaillierten Prompt für Stitch, um die gesamte
00:04:10Landingpage am Stück zu generieren, ohne die Ideen des sektionsweisen Ansatzes zu verlieren.
00:04:15Im Design gefiel mir besonders der Einsatz von Referenzen wie Kommentaren und Terminal-Befehlen,
00:04:20um den Entwickler-Vibe zu treffen. Ich nutzte die Preview-Funktion von Stitch,
00:04:25um die UI auf verschiedenen Plattformen zu prüfen. Sogar flüssige Hover-Effekte waren dabei.
00:04:30Das Design war responsiv und funktionierte sowohl auf Mobilgeräten als auch auf dem Desktop.
00:04:34Nachdem ich mit dem Stitch-Design zufrieden war, wollte ich es in mein Next.js-Projekt
00:04:40übertragen, an dem ich mit Claude Code arbeitete. Ich bat Claude, via Stitch-MCP
00:04:45den Code der Landingpage abzurufen und in das neue Next.js-Projekt zu implementieren.
00:04:51Über das “get screen”-Tool wurden die Screens abgerufen, was Download-Links für den Code lieferte.
00:04:56Claude nutzte curl-Befehle, um den HTML-Code zu extrahieren. Sobald der Code vorlag,
00:05:01war die Integration in Next.js einfach. Claude begann mit der Einbindung,
00:05:06schrieb jedoch alles in eine einzige .tsx-Datei, anstatt eine saubere Komponentenstruktur
00:05:11zu nutzen, wie es für React-Anwendungen empfohlen wird.
00:05:17Zunächst startete ich den Dev-Server, um das Ergebnis zu prüfen. Das Design war
00:05:22fast identisch mit dem Stitch-Entwurf, abgesehen von der Textplatzierung im Hero-Bereich.
00:05:26Hover-Effekte, Bento-Grid-Animationen und Parallax-Scrolling im Hintergrund funktionierten.
00:05:31Um das Code-Chaos zu beseitigen, bat ich Claude um eine modulare Komponentenstruktur.
00:05:36Der Code wurde refactored und in saubere UI-Komponenten und Seiten organisiert.
00:05:41Dank Claude Code und Stitch entstand eine komplette App im Terminal-Look.
00:05:46Dennoch gab es UI-Probleme. Das Code-Panel musste zum Beispiel editierbar sein,
00:05:51da User dort während des Interviews tippen. Zudem sollte die Frage oben stehen,
00:05:57da die aktuelle Platzierung für eine schlechte User Experience sorgte.
00:06:02Zum Testen der App nutzte ich Vercels Agent Browser. Dieses CLI-Tool für KI-Agenten
00:06:08basiert auf Rust und Node.js und ist deutlich schneller als klassische Automatisierungs-Tools.
00:06:14Die Installation ist simpel: Ein Befehl installiert es global auf dem System.
00:06:19Es ist aktuell auf Chromium-Browser beschränkt und nicht für Firefox oder Safari verfügbar.
00:06:24Agent Browser bietet bessere Features als Claudes Chrome-Extension, Playwright oder Puppeteer.
00:06:29Während die Extension einen vollen Browser benötigt, Screenshots macht und Pixel mappt,
00:06:34basiert der Agent Browser auf Bash-Befehlen und arbeitet mit Snapshots statt Screenshots.
00:06:40Ein Snapshot ist quasi ein Accessibility-Tree der Seite mit Selektoren für alle Komponenten.
00:06:44Der Agent nutzt diese Selektoren für eine effiziente Navigation. Er teilt keine Session
00:06:50mit eurem normalen Browser, kann also keine Aktionen ausführen, die aktive Logins erfordern –
00:06:55im Gegensatz zur Claude-Extension, die direkt in eurem Browser agiert.
00:07:00Die verfügbaren Befehle findet ihr im GitHub-Repo. Dort gibt es eine Liste aller Core-Commands,
00:07:05von der Navigation über Maussteuerung bis hin zur Verwaltung von Cookies und Netzwerkaktivitäten.
00:07:10Für meine App habe ich eine Claude.md-Datei erstellt und angewiesen, die Agent Browser Tools
00:07:14für alle Tests zu nutzen. Zudem sollte Claude bei Unklarheiten den Help-Befehl verwenden.
00:07:19Diese Regeln und Workflow-Guidelines gibt es ebenfalls bei AI Labs Pro.
00:07:24Obwohl es ein Headless-Tool ist, kann man es im “Headed-Modus” ausführen,
00:07:30um dem Browser bei der Arbeit zuzusehen. Ich bat Claude, die UI so zu testen.
00:07:35Zuerst rief Claude die Hilfe auf und öffnete dann den Browser. Der Ansatz ähnelte
00:07:40unserem Vorschlag für Claude Browser Use: Full-Page-Snapshots statt sektionsweiser Screenshots.
00:07:45Das beschleunigte den Testprozess bei gleichbleibender Genauigkeit enorm.
00:07:50Der Agent navigierte durch die gesamte App und prüfte Layout sowie Funktionen.
00:07:55Der gesamte Prozess dauerte nur vier Minuten – andere Tools hätten viel länger gebraucht,
00:07:59da der Agent Browser auf Accessibility-Trees statt auf Screenshots setzt.
00:08:05Er erkannte auch, dass der Code-Editor nicht editierbar war, und fixte das sofort.
00:08:09Anschließend wurde dies im Browser getestet, indem er einen Snapshot machte, den Editor-Selektor
00:08:14fand und per Klick- und Tipp-Funktion prüfte, ob die Implementierung korrekt war.
00:08:19Damit sind wir am Ende des Videos. Wenn ihr den Kanal unterstützen wollt,
00:08:24schaut gerne bei AI Labs Pro vorbei. Vielen Dank fürs Zuschauen und bis zum nächsten Mal!
00:08:29entire testing process in just four minutes, whereas other browser automation tools would have taken
00:08:34much longer because it relies on accessibility trees, not the screenshot approach. It also
00:08:39identified that the code editor needed to be editable and implemented that fix right away.
00:08:43It then tested it in the browser by taking a snapshot, finding the editor selector and using
00:08:48the agent browser's clicking and typing functions to edit a part of the code to see if it was
00:08:53implemented correctly. That brings us to the end of this video. If you'd like to support the channel
00:08:57and help us keep making videos like this, you can do so by joining AI Labs Pro. As always,
00:09:02thank you for watching and I'll see you in the next one.