Google Stitch: KI-Design-Agent mit Claude Code nutzen

Google hat mit Stitch ein kostenloses KI-Design-Tool veröffentlicht, das aus Text, Sprache oder Skizzen fertige Benutzeroberflächen und produktionsreifen Frontend-Code generiert. Das Tool entstand aus der Übernahme von Galileo AI und erhielt am 18. März 2026 ein großes Plattform-Update. Besonders interessant für Entwickler: Über einen offiziellen MCP-Server lässt sich Stitch direkt mit Claude Code verbinden. So entsteht eine vollautomatische Pipeline vom ersten Entwurf bis zum Live-Deployment.

Was ist Google Stitch?

Google Stitch ist ein KI-gestützter Design-Agent aus den Google Labs. Im Mai 2025 übernahm Google das Startup Galileo AI und integrierte dessen Technologie unter dem neuen Namen Stitch. Angetrieben von multimodalen Gemini-Modellen (darunter Gemini 2.5 Flash, Gemini 2.5 Pro und Gemini 3.1) verwandelt das Tool einfache Textbeschreibungen in professionelle Benutzeroberflächen mit produktionsreifem Code. Google positioniert Stitch als "Vibe-Design-Partner": ein Werkzeug, das die Lücke zwischen Ideenfindung und Entwicklung schließt. Auch ohne tiefgehende Design-Erfahrung lassen sich damit schnell funktionierende Prototypen bauen. Verfügbar ist es kostenlos unter stitch.withgoogle.com, ein Google-Konto genügt.

Die wichtigsten Features im Überblick

Stitch bietet eine Reihe leistungsstarker Funktionen, die den gesamten Design-Workflow abdecken.

Vibe Design: Text wird zur Benutzeroberfläche

Das Herzstück von Stitch ist Vibe Design. Ein einfacher Satz wie "ein sauberes Finanz-Dashboard im Dark Mode" reicht aus, und die KI generiert die komplette Benutzeroberfläche. Stitch greift dabei auf multimodale Gemini-Modelle zurück und liefert direkt nutzbaren Code in HTML/CSS, Tailwind CSS oder React/JSX-Komponenten.

Voice Canvas: Design per Sprachsteuerung

Mit Voice Canvas lässt sich die Arbeitsfläche direkt per Sprache steuern. Der KI-Agent nimmt Live-Anpassungen vor, gibt Echtzeit-Feedback zum Design und kann sogar zu Produktzielen interviewen. Das beschleunigt den iterativen Designprozess erheblich.

Infinite AI Canvas

Der endlose Arbeitsbereich ermöglicht es, Ideen von der ersten Skizze bis zum fertigen Prototyp in einer einzigen Umgebung zu entwickeln. Ein Wechsel zwischen verschiedenen Tools ist nicht mehr nötig.

Bild-zu-UI-Redesign

Stitch kann Handskizzen, Wireframes oder Screenshots bestehender Websites analysieren und in hochauflösende digitale Designs umwandeln. Dafür stehen 15 Redesign-Credits pro Tag zur Verfügung.

Figma-Export und Design-Systeme

Designs lassen sich mit einem Klick in Figma übertragen. Ebenen, Komponenten und Auto-Layout-Strukturen bleiben dabei vollständig erhalten. Über eine DESIGN.md-Datei oder eine URL können Markenrichtlinien importiert werden, um die optische Konsistenz über Projekte hinweg zu wahren.

Stitch Loop und Agent Manager

Per Stitch Loop generiert die KI autonom mehrere zusammenhängende Seiten und verknüpft sie über Hotspots und Animationen zu interaktiven Prototypen. Der Agent Manager erlaubt es, verschiedene Design-Richtungen gleichzeitig zu erkunden und die gesamte Projekthistorie im Blick zu behalten.

Google Stitch mit Claude Code verbinden

Die spannendste Neuerung für Entwickler: Google stellt einen offiziellen MCP-Server (Model Context Protocol) bereit, der Stitch direkt mit Claude Code verbindet. Sobald die Verbindung steht, wird Claude zum vollwertigen Design-Agenten. Die KI kann eigenständig recherchieren, Designs erstellen und komplette Webseiten programmieren. Claude optimiert dabei sogar automatisch die Prompts, um bessere Ergebnisse aus Stitch herauszuholen. Mehr über die Vorteile von Claude Code als agentische IDE findest du im Artikel Claude Code in Google Anti Gravity: Vorteile und Praxis.

Einrichtung in vier Schritten

Die Integration in VS Code läuft folgendermaßen ab: 1. API-Key holen: Auf stitch.withgoogle.com im Menü unter "MCP service" den Stitch API Key kopieren. 2. Claude Code Extension installieren: Die Erweiterung "Claude Code for VS Code" installieren und das zentrale Panel per Doppelklick öffnen. 3. MCP Transport hinzufügen: Den Befehl claude mcp ad transport in Claude Code eingeben und den API-Key übergeben. 4. Skills installieren: Die MCP-Skills aus dem offiziellen Google GitHub-Repository kopieren und Claude anweisen, sie hinzuzufügen. Ob die Verbindung funktioniert, lässt sich mit einer einfachen Frage im Chat testen: "Kannst du mir sagen, welches das letzte Design war, das ich in Stitch erstellt habe?"

Was die Kombination aus Stitch und Claude Code ermöglicht

Die Verbindung von Stitch und Claude Code eröffnet völlig neue Möglichkeiten für den Design-to-Code-Workflow.

Design-Blueprints automatisch erstellen

Claude kann Stitch anweisen, den HTML-Code eines fertigen Designs zu scannen und daraus Design-Tokens wie Farben, Typografie und Spacing zu extrahieren. Das Ergebnis ist eine exakte Blaupause des visuellen Stils in Form einer DESIGN.md-Datei. Diese Datei dient als Referenz für alle weiteren Generierungen.

Automatisierte Skalierung bei exakter Markenkonsistenz

Auf Basis der Design-Blaupause lassen sich per Chat-Befehl beliebig viele neue Seiten im identischen Stil generieren. Ein Beispiel-Prompt: "Ich möchte genau den gleichen Stil. Erstelle ein neues Stitch-Book für ein SaaS-Unternehmen, das VPN-Abonnements verkauft." Stitch muss dafür nicht einmal manuell geöffnet werden.

End-to-End-Pipeline bis zum Deployment

Der gesamte Prozess lässt sich direkt aus dem Code-Editor heraus steuern. Claude erstellt das Design über Stitch und veröffentlicht den fertigen Code anschließend auf GitHub und Vercel. Ein einziger Prompt reicht: "Veröffentliche dies auf GitHub und Vercel." Die komplette Pipeline vom ersten Entwurf bis zur Live-Website läuft ohne Toolwechsel.

Kosten und Kontingente

Google Stitch ist als Google-Labs-Projekt grundsätzlich kostenlos. Es gelten allerdings monatliche Kontingente: | Feature | Kontingent | |---|---| | Standard-Modus (Gemini 2.5 Flash) | 350 Generierungen pro Monat | | Experimenteller Modus (Gemini 2.5 Pro) | 50 Generierungen pro Monat | | Redesign-Credits | 15 pro Tag für das Bild-zu-UI-Feature | Für die meisten Einzelprojekte und Prototypen reichen diese Kontingente aus. Wer intensiver arbeitet, muss die Generierungen über den Monat verteilen.

Einschränkungen

Stitch hat einige Limitierungen, die vor dem Einsatz bekannt sein sollten. Echtzeit-Kollaboration wie in Figma fehlt: Das Tool ist für Einzelnutzer konzipiert, gemeinsames Bearbeiten oder Kommentieren ist nicht möglich. Die generierten Designs entsprechen oft nicht den WCAG-Standards für Barrierefreiheit. Fehlende ARIA-Labels und unzureichende Farbkontraste müssen manuell nachgebessert werden. Außerdem generiert Stitch ausschließlich Frontend-Code. Backend-Logik, API-Anbindungen, Formularvalidierung und State-Management sind nicht enthalten. Die Qualität der Ergebnisse hängt stark von der Genauigkeit der Prompts ab. Vage Beschreibungen führen häufig zu generischen Layout-Mustern.

Fazit

Google Stitch hat sich innerhalb kurzer Zeit von einem experimentellen Designtool zu einem ernstzunehmenden Werkzeug für die UI-Entwicklung gemausert. Die Kombination aus Text-zu-UI, Sprachsteuerung und produktionsreifem Code-Export macht es besonders für schnelles Prototyping interessant. In Verbindung mit Claude Code entsteht ein Workflow, der den gesamten Prozess vom ersten Entwurf bis zur Veröffentlichung automatisiert. Für Solo-Entwickler, Freelancer und Gründer, die schnell von der Idee zum funktionierenden Prototyp kommen möchten, ist diese Kombination aktuell einer der effizientesten Ansätze. Wer sich für den breiteren Trend interessiert: Vibe Coding 2026 – Vom Meme zur industriellen Realität ordnet ein, wohin die Reise geht. Und wie Claude Aufgaben per MCP an externe Tools delegiert, erklärt der Artikel zu Claude Cowork Dispatch. Wenn Designs anschließend automatisiert im Browser verifiziert werden sollen, bietet sich Playwright für End-to-End-Tests als natürliche Ergänzung an.