00:00:00Ihre KI-Agenten sind mittlerweile ziemlich gut im Designen geworden.
00:00:02Sie haben jetzt nicht mehr das Problem, dass die erstellten Seiten fehlerhaft sind.
00:00:06Da die Modelle aber alle mit denselben Daten trainiert wurden, sind die Designs immer zu
00:00:10ähnlich und generisch.
00:00:11Sogar die Modelle von Claude benötigen einen speziellen Prompt, um diesen Fehler zu vermeiden.
00:00:15Google Stitch ist ein speziell für Design entwickeltes Tool, das sich direkt
00:00:19in Ihren Claude-Code-Workflow integrieren lässt.
00:00:21In diesem Video sehen wir uns 4 Wege an, wie Sie Stitch mit Claude Code nutzen können,
00:00:26damit Ihre Apps nicht wie jede andere KI-generierte Website aussehen.
00:00:30Das neue Stitch-Update nutzt ein Designsystem für Ihre UI, und diese Systeme
00:00:34basieren auf allen Funktionen des UI-Guides für Websites, einschließlich verschiedener
00:00:38Felder wie Farben, Themes, Schriftarten und mehr.
00:00:41Diese Funktionen werden tatsächlich durch die Verwendung der Datei "design.md" gebildet.
00:00:45Diese Datei macht das Design auch von einem Agenten auf einen anderen übertragbar.
00:00:49Sie können diese design.md-Datei an jeden Agenten übergeben, mit dem Sie das Design umsetzen,
00:00:54und das gesamte Styling-Theme wird perfekt übernommen.
00:00:56Das funktioniert deshalb, weil die Datei speziell auf Agenten zugeschnitten ist.
00:00:59Sie enthält eine präzisere Sprache, damit diese die Designabsicht mühelos erfassen können.
00:01:04Außerdem werden alle Designsysteme auf dem Bildschirm visualisiert, sodass Sie den Stil
00:01:08nicht nur anhand von Text interpretieren müssen.
00:01:10Sie bekommen ein Gefühl dafür, wie die App nach der Implementierung aussehen wird,
00:01:14indem Sie Farben und Schriftarten direkt nebeneinander sehen.
00:01:16Wann immer Sie etwas mit Stitch erstellen, erstellt Stitch im ersten Schritt eine design.md
00:01:21und ein Designsystem.
00:01:22Selbst wenn Sie dies in Ihrem Prompt nicht explizit verlangen.
00:01:25Sobald das Designsystem feststeht, kann es bei jeder Erstellung einer Seite Konsistenz
00:01:30über mehrere Seiten und Neugenerierungen hinweg gewährleisten.
00:01:32Dies löst das größte Problem, das wir bei der Arbeit mit Stitch hatten, da es zuvor
00:01:36die Designkonsistenz nicht so gut beibehalten konnte wie jetzt.
00:01:39Aber anstatt sich auf das von Stitch erstellte System zu verlassen, können Sie auch
00:01:43Ihre eigenen Designsysteme entwerfen.
00:01:45Sie können das Theme nach Ihren Wünschen festlegen oder, falls Sie eine Design-Datei haben,
00:01:49diese einfach hochladen. Stitch übernimmt sie automatisch als Designsystem und visualisiert sie.
00:01:53für Sie.
00:01:54Wichtig ist nur, dass jede verwendete design.md einer
00:01:58korrekten Struktur folgt.
00:01:59Diese Struktur ist bekanntlich für Agenten, insbesondere Stitch, optimiert und hilft ihnen,
00:02:04die Absichten effizient zu verstehen.
00:02:06Oft brainstormen wir unsere App-Ideen mit Claude oder anderen Agenten.
00:02:09Wenn Sie Designs aus diesen Sessions in Stitch erstellen möchten, können Sie
00:02:13den Designstil als design.md-Datei an Stitch übergeben.
00:02:17Sie können Claude eine Struktur für die Designdatei geben, die Sie aus dem offiziellen Skills-Repo
00:02:21von Google erhalten, das alle Skills rund um Stitch enthält.
00:02:25In den Beispielen finden Sie ein für Stitch optimiertes Design-Template.
00:02:29Welchen Agenten Sie auch nutzen: Geben Sie den Stil der Website an, die Sie erstellen möchten,
00:02:33zusammen mit dem Template, sodass er die design.md auf Basis des Templates generieren kann,
00:02:38wobei der Styleguide korrekt eingehalten wird.
00:02:39Sobald Ihr Agent die detaillierte design.md-Datei generiert hat, kopieren Sie diese in Stitch
00:02:44einfach in den design.md-Bereich unter "Neues Designsystem erstellen".
00:02:48Sobald Sie auf "Design speichern" klicken, wird eine Visualisierung für dieses Design erstellt.
00:02:52Danach können Sie Stitch anweisen, die UI auf Basis des neu
00:02:56erstellten Designsystems zu implementieren.
00:02:59Stitch setzt das Design dann um, spiegelt das von Ihnen erstellte System wider und erfasst
00:03:03das exakte Styling aus der design.md.
00:03:05Mit diesen Designsystemen können Sie iterativ beliebig viele Seiten erstellen, und jede
00:03:10wird demselben Designstil folgen.
00:03:12Wenn Sie bereits Projekte in Stitch erstellt haben und die design.md dafür extrahieren möchten,
00:03:16können Sie dafür die von Google entwickelten Skills nutzen.
00:03:19In diesen Skills konvertiert der design.md-Skill Stitch-Projekte in eine design.md
00:03:25gemäß dem Template, das für den Stitch-Workflow optimiert ist.
00:03:28Wenn Ihnen unsere Inhalte gefallen, drücken Sie gerne den Hype-Button,
00:03:32da uns das hilft, mehr solcher Inhalte zu erstellen und mehr Menschen zu erreichen.
00:03:35Die Fähigkeiten von Stitch sind beeindruckend, aber es gibt noch Lücken bei der
00:03:39Implementierung einer guten UX für spezielle Nischen-Websites.
00:03:42Es ist nicht immer ratsam, alles komplett von Grund auf neu zu entwerfen.
00:03:44Bestehende Websites basieren auf Mustern, die in ihrer jeweiligen Nische
00:03:48tatsächlich funktionieren. Das Nachahmen dieser Muster hilft Ihnen, eine Website zu erstellen,
00:03:53die für Ihre Nutzer wirklich funktioniert.
00:03:54Früher haben wir bei der Arbeit mit KI einen Screenshot bereitgestellt und das Design-Tool
00:03:58gebeten, dieses Design zu kopieren.
00:04:00Es versuchte dann, das Layout und die Komponenten exakt so nachzubauen.
00:04:04Aber das neue Stitch-Update hat das geändert.
00:04:06Mit der Redesign-Funktion von Stitch geben Sie immer noch einen Screenshot ein, aber jetzt wird
00:04:10er nicht einfach nur kopiert.
00:04:11Er dient stattdessen als Styleguide.
00:04:12Stitch übernimmt die Muster, die Platzierung der Komponenten und die Designsprache dieser Referenz
00:04:17und wendet sie auf Ihre eigene Website an.
00:04:18Sie bauen also etwas Originelles auf Basis eines bewährten Musters auf.
00:04:22Um die Redesign-Funktion zu nutzen, benötigen Sie einen Screenshot.
00:04:25Screenshots von jedem einzelnen Abschnitt zu machen, ist jedoch mühsam.
00:04:28Nutzen Sie stattdessen eine Erweiterung wie GoFullPage für einen Screenshot der kompletten Seite,
00:04:33um die Stilreferenz auf einmal bereitzustellen.
00:04:35Sobald Sie den Screenshot der Website hochladen, deren Design Sie replizieren möchten, nutzt
00:04:39Stitch ihn als Referenz für Stil und Komponentenplatzierung und erstellt eine ähnliche UI
00:04:44wie auf dem Screenshot.
00:04:45Dabei werden die Bildgenerierungsfähigkeiten von Nano Banana genutzt, um Bilder für verschiedene
00:04:50Bereiche passend zum UI-Stil zu erstellen.
00:04:51Es gibt auch andere Wege, den Stil einer anderen Website zu kopieren.
00:04:54Sie können den Stil einer ganzen Website übernehmen, indem Sie den Link kopieren und dann
00:04:59über die Designsysteme das Design jeder beliebigen Website als design.md-Datei importieren.
00:05:03Geben Sie einfach den Link an, und das System importiert das Designsystem der Website durch
00:05:06Crawlen, wobei Stil und Typografie extrahiert werden.
00:05:09Manchmal trifft Stitch jedoch nicht exakt den Stil, den Sie im Kopf hatten.
00:05:12In diesen Fällen können Sie einfach eine grobe Skizze oder ein Wireframe mit dem Stil
00:05:17hochladen, den Sie wirklich wollen.
00:05:18Sie können auch das gewünschte Design-Theme für Ihre Website spezifizieren.
00:05:21Mit den Referenzen und der Theme-Vorgabe entspricht die von Stitch generierte UI exakt
00:05:26dem Wireframe und dem Styleguide, sodass die Website genau Ihren Anforderungen entspricht.
00:05:31Und wenn Sie etwas Spezifisches ändern möchten, können Sie dies
00:05:34über die Annotations- und Bearbeitungsfunktionen von Stitch tun.
00:05:36Markieren Sie die Stelle, die Ihnen nicht gefällt, mit dem gewünschten Look, klicken Sie auf Anwenden,
00:05:40und der Stil wird wie gewünscht umgesetzt.
00:05:42Doch bevor wir weitermachen, ein kurzes Wort von unserem Sponsor.
00:05:45Uptime Robot.
00:05:46Sie entwickeln mit KI-APIs von OpenAI, Anthropic oder anderen.
00:05:49Alles sieht gut aus, Status 200 OK, aber die Antwort ist Müll.
00:05:52Ihre App stürzt ab, und Sie merken es erst, wenn sich die Nutzer beschweren.
00:05:56Hier kommt Uptime Robot ins Spiel.
00:05:57Es bemerkt den Fehler, bevor die Nutzer es tun.
00:05:59Es pingt Ihre APIs an und prüft die tatsächliche Antwort, nicht nur den Statuscode, und alarmiert Sie
00:06:04sofort via Slack, E-Mail oder wo auch immer Sie arbeiten.
00:06:06Überwachen Sie KI-Endpunkte, tracken Sie API-Credits, bevor Limits erreicht werden,
00:06:10und beheben Sie Fehler, bevor daraus Support-Tickets werden.
00:06:12Sie erhalten sogar öffentliche Statusseiten mit Live-Uptime-Statistiken und Vorfallshistorie.
00:06:16Die Einrichtung dauert nur Sekunden.
00:06:18Endpunkt hinzufügen, erwartete Antwort festlegen, Alarme wählen – und Sie sind live.
00:06:21Es gibt eine kostenlose Version mit 50 Monitoren zum Ausprobieren.
00:06:24API-Monitoring gibt es schon ab 7 $ im Monat – günstiger als es selbst zu hosten.
00:06:28Nutzen Sie den Code "AI Labs" für 10 % Rabatt, gültig bis Jahresende.
00:06:32Klicken Sie auf den Link im fixierten Kommentar und legen Sie noch heute los.
00:06:35Eine weitere Möglichkeit ist die Verknüpfung der Stitch-Fähigkeiten mit Ihren bestehenden
00:06:40Agenten-Funktionen wie Claude Code oder jedem Agenten, der Agenten-Skills unterstützt.
00:06:44Google hat hierfür mehrere Skills entwickelt, die dem Agenten zusätzliche
00:06:48Fähigkeiten für die Arbeit mit Stitch verleihen.
00:06:51Sie können jeden benötigten Skill nach der Anleitung im Repo installieren.
00:06:54Der wichtigste für Ihren Workflow ist der "Enhance Prompt"-Skill.
00:06:58Er verwandelt vage Prompts in für Stitch optimierte Befehle,
00:07:02sodass diese exakt so formuliert sind, wie Stitch sie am besten verarbeiten kann.
00:07:05Er enthält Referenzen für gängige Keywords, da Stitch eher auf Adjektive zur Bestimmung
00:07:09der Stimmung setzt als auf exakte Designbeschreibungen.
00:07:12Darüber hinaus gibt es einen Skill zum Erstellen kompletter Websites namens "Stitch Loop".
00:07:16Er erlaubt dem Agenten, die Chrome-Dev-Tools zu nutzen und die Website in Stitch iterativ
00:07:20über ein autonomes Loop-Muster aufzubauen, wie im Prompt beschrieben.
00:07:23Die Idee dahinter ist ein sauberes Prompt-Tracking und die Übergabe von einer Stufe zur nächsten.
00:07:28Da diese Skills alles eigenständig verwalten, kommt dieser Workflow dem Erstellen
00:07:32einer App in einem Rutsch am nächsten.
00:07:33Bevor Sie diese Skills nutzen, stellen Sie sicher, dass Stitch MCP verbunden ist,
00:07:38da Stitch dies im Hintergrund nutzt, um Designs zu erstellen und abzurufen.
00:07:41Es gibt ein Video auf dem Kanal, das die MCP-Installation erklärt und gängige Probleme
00:07:46beim Setup behebt. Schauen Sie dort gerne rein.
00:07:49Wenn Sie das Design aus Stitch exportieren, ob via MCP oder Code, erhalten Sie meist
00:07:53eine riesige HTML-Datei, in der alles zusammengefasst ist.
00:07:56Da die meisten Anwendungen auf React basieren und komponentenstrukturiert sind, ist es für
00:08:01Agenten oft mühsam, das HTML auf React zu mappen.
00:08:03Um dies zu vereinfachen, können Sie den "React component"-Skill nutzen.
00:08:06Er konvertiert das Stitch-Design unter Einhaltung korrekter Validierungsmetriken in modulare Komponenten.
00:08:10Er nutzt Skripte zur Validierung und zum Abruf der Designs, damit Komponenten leicht zugeordnet werden können.
00:08:15Mit diesem Workflow können Sie eine Clod.md erstellen, die den gewünschten Ablauf auflistet.
00:08:20Dabei sollte diese Reihenfolge eingehalten werden:
00:08:21Zuerst nutzen Sie den "Enhance prompt"-Skill, um vage Prompts in Stitch-spezifische Befehle
00:08:26umzuwandeln, damit Stitch den Input korrekt empfängt.
00:08:28Dann sollte das Design über den "Stitch loop" aufgebaut werden.
00:08:31Sobald das fertig ist, muss das Design in der App mittels React-Komponenten implementiert werden.
00:08:35Wenn Sie den Prompt für die Landingpage eingeben, die Sie bauen möchten, werden die Anweisungen
00:08:39aus der Clod.md befolgt.
00:08:41Zuerst wird der "Enhance prompt"-Skill geladen, der dann mithilfe der verfügbaren
00:08:45Tools den optimierten Prompt generiert.
00:08:47Sobald der Prompt bereit ist, bittet das System um Erlaubnis für den nächsten Schritt.
00:08:50Nach der Freigabe wird der "Stitch loop"-Skill geladen und das Stitch-MCP zur Projekterstellung genutzt.
00:08:56Ist das Projekt erstellt, wird der optimierte Prompt an Stitch gesendet,
00:09:00was zuerst das Designsystem und dann das eigentliche Design generiert.
00:09:04Für Bilder wird Bildgenerierung als Teil des Designprozesses genutzt.
00:09:08Nach Abschluss des Designs folgt der nächste Schritt mit dem "React component"-Skill,
00:09:12um eine komponentenbasierte Struktur zu erstellen und die App für Ihr jeweiliges
00:09:17Framework korrekt zu implementieren.
00:09:18Wenn Sie den Dev-Server starten, sehen Sie, dass die Anwendung das Design von Stitch exakt
00:09:22übernimmt, inklusive Hover-Effekten, was den Workflow beim Erstellen
00:09:26funktionsfähiger Apps massiv beschleunigt.
00:09:28Die hier verwendete Clod.md sowie alle erstellten Ressourcen sind in
00:09:33AI Labs Pro verfügbar.
00:09:34Dies umfasst Ressourcen aus diesem Video sowie aus allen vorherigen Videos,
00:09:38die Sie für Ihre eigenen Projekte herunterladen und nutzen können.
00:09:40Wenn Ihnen unsere Arbeit gefällt und Sie den Kanal unterstützen möchten, ist dies
00:09:43der beste Weg.
00:09:44Den Link finden Sie in der Beschreibung.
00:09:46Alles von Grund auf neu zu bauen, ist nicht immer die beste Idee – das gilt auch für Komponenten.
00:09:50Die von reinen React-Komponenten generierte UI ist oft zu statisch und nur auf die Optik fokussiert,
00:09:54sodass viel Aufwand für Interaktionen und Animationen nötig wäre.
00:09:58Stattdessen sollten Sie UI-Bibliotheken nutzen, da diese
00:10:02die Erstellung erleichtern und Interaktions-Features direkt mitbringen,
00:10:07die Ihre UI lebendiger machen.
00:10:08Um das noch einfacher zu machen, bietet Google einen "ShadCN UI"-Skill an, der bei der
00:10:13Konvertierung einer Anwendung von Stitch zu ShadCN-Komponenten hilft.
00:10:16Dieser Skill ist im Grunde ein detaillierter Guide für die korrekte
00:10:21Implementierung dieser Komponenten in der gesamten App.
00:10:22Da ShadCN die Anbindung an mehrere Registries unterstützt, können Sie die Möglichkeiten
00:10:26durch Integrationen und deren Features noch weiter ausbauen.
00:10:30Es wird empfohlen, das ShadCN-MCP vor dem Build-Prozess einzurichten,
00:10:35damit der Workflow reibungslos läuft.
00:10:36Für eine effektive Nutzung sollten Sie auch eine Clod.md-Datei mit Anweisungen erstellen,
00:10:41sodass bei Nutzung des Stitch-MCP automatisch der ShadCN-Skill zur Konvertierung des Designs
00:10:47in Komponenten verwendet wird.
00:10:48Da Sie Registries hinzufügen können, lassen sich die gewünschten Quellen für Ihr Projekt festlegen.
00:10:52Beim Bauen dieser Seite haben wir uns zum Beispiel für "Glassmorphism" und "Motion Primitives" entschieden,
00:10:57da deren Komponenten sehr hochwertig wirken.
00:11:00Sie können wählen, was am besten zu Ihrem Projekt passt.
00:11:03Wenn Sie zuvor eine UI in Stitch erstellt haben, können Sie diese in eine App mit ShadCN-Komponenten
00:11:07umwandeln.
00:11:08Geben Sie einfach den Namen des Projekts an, das implementiert werden soll.
00:11:12und lassen Sie es in die App integrieren.
00:11:13Es wird zuerst das Projekt mit dem Namen abgerufen, dann der ShadCN-UI-Skill geladen und
00:11:18über ShadCN-MCP-Calls unter Einbeziehung der gewählten Registries die gesamte
00:11:23App umgesetzt.
00:11:24Nach Abschluss der Implementierung spiegelt die App exakt das wider, was Sie in Stitch sehen,
00:11:27aber aufgebaut mit ShadCN-UI-Komponenten.
00:11:29Das macht einen großen Unterschied, da die in einem Rutsch generierte App durch die
00:11:34einfache Implementierung viel interaktiver ist.
00:11:36Damit sind wir am Ende dieses Videos angelangt.
00:11:38Wenn Sie den Kanal unterstützen und uns helfen möchten, weiterhin solche Videos zu machen,
00:11:42können Sie das über den "Super Thanks"-Button unter dem Video tun.
00:11:44Wie immer vielen Dank fürs Zuschauen und wir sehen uns im nächsten Video.