Wer schon mal einen UI-Entwurf in funktionierenden Frontend-Code überführt hat, kennt das Ritual: Screenshot machen, Claude beschreiben, was drauf ist, Farben nachschlagen, Abstände schätzen, iterieren. Es funktioniert — aber es ist manuell, verlustbehaftet und hängt davon ab, wie gut man ein Bild in Worte übersetzen kann.
Die Kombination aus Google Stitch und Claude Code via MCP ändert diese Mechanik. Statt Claude einen Screenshot zu beschreiben, liest Claude Code die Design-Daten direkt: Farben als Hex-Codes, Typografie als exakte Werte, Layout als strukturierte HTML. Das ist kein Versprechen — das ist wie der aktuelle Stand der Integration aussieht, mit ihren echten Möglichkeiten und ihren echten Grenzen.
Was Google Stitch ist
Google Stitch ist ein KI-Design-Tool aus Google Labs, das Gemini verwendet, um UI-Designs aus Textbeschreibungen zu generieren. Man beschreibt, was man will — „ein SaaS-Dashboard mit dunkler Sidebar, drei Stats-Karten und einer Aktivitätstabelle" — und Stitch generiert ein hochauflösendes Design inklusive zugehörigem Design-System.
Was Stitch von einem einfachen Mockup-Generator unterscheidet, ist das Ausgabeformat. Neben den visuellen Designs produziert Stitch strukturierte Ausgaben: HTML mit eingebettetem CSS, Design-Token als strukturierte Daten, und eine design.md-Datei, die das gesamte Design-System — Farben, Typographie, Abstände, Komponentenmuster — in maschinenlesbarem Markdown zusammenfasst. Dieses Format wurde bewusst für KI-Coding-Agenten entwickelt.
Stitch ist über Google Labs zugänglich und bietet 350 kostenlose Generierungen pro Monat.
Was das MCP hinzufügt
Ohne MCP ist der Workflow manuell: Design in Stitch erstellen, HTML exportieren oder design.md kopieren, beides Claude Code übergeben, iterieren. Das funktioniert und ist für viele Projekte völlig ausreichend.
Das Stitch MCP Server-Paket (@_davideast/stitch-mcp) stellt eine direkte API-Verbindung zwischen Claude Code und der Stitch-Plattform her. Claude Code kann damit:
- Stitch-Projekte und verfügbare Screens abrufen
- Design-HTML für einzelne Screens laden
- Screen-Screenshots als base64-Bilder herunterladen
- Eine vollständige Seite aus mehreren Screens zu einer Route-Struktur zusammenbauen (
build_site)
Das Entscheidende: Claude Code kann diese Daten abrufen und direkt in Code übersetzen, ohne dass man manuell exportiert, kopiert oder beschreibt.
Der Workflow im Detail
Schritt 1: Design in Stitch erstellen
Man öffnet Stitch und beschreibt die UI. Konkrete Prompts funktionieren besser als vage:
Eine Landing Page für ein B2B-SaaS-Tool:
- Hero-Sektion mit Headline, Subline und zwei CTA-Buttons (primary: #3B82F6, ghost)
- Feature-Grid mit 3 Spalten und Icons
- Pricing-Sektion mit drei Tiers
- Visueller Stil: clean, professionell, viel Whitespace
Stitch generiert das Design in etwa 15 Sekunden. Man kann iterieren — „mach die Farben wärmer", „verschieb den Pricing-Abschnitt nach oben" — und Stitch aktualisiert das Design.
Schritt 2: MCP konfigurieren
Das MCP installiert sich per npx, erfordert keine globale Installation. Es gibt zwei Authentifizierungsmethoden:
Option A: API-Key (empfohlen für den Einstieg)
Man generiert einen Stitch API-Key in den Stitch-Einstellungen und trägt ihn als Umgebungsvariable ein. Der Key läuft nicht ab und erfordert kein Google-Cloud-Projekt.
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "@_davideast/stitch-mcp", "proxy"],
"env": {
"STITCH_API_KEY": "dein-api-key"
}
}
}
}
Option B: OAuth via gcloud (sicherer, aber aufwändiger)
Für Teams, die Google Cloud IAM-Praktiken folgen wollen. Tokens laufen stündlich ab — der stitch-mcp proxy-Befehl handhabt das automatische Erneuern. Erfordert ein Google-Cloud-Projekt mit aktivierter Stitch API.
# Einmalig einrichten
gcloud auth login
gcloud config set project DEIN-PROJECT-ID
gcloud beta services mcp enable stitch.googleapis.com --project=DEIN-PROJECT-ID
npx @_davideast/stitch-mcp init
Nach dem Neustart von Claude Code prüft man die Verbindung mit /mcp — stitch sollte mit Status healthy erscheinen.
Schritt 3: Design aus Stitch in Code übersetzen
Wenn der MCP-Server aktiv ist, kann man Claude Code direkt ansprechen:
Verbinde dich mit meinem Stitch-Projekt "LandingPage" und
implementiere alle Screens als React-App mit Tailwind CSS.
Nutze das Design-System aus der design.md für konsistente
Farben, Typografie und Abstände.
Claude Code ruft die verfügbaren Tools ab — get_screen_code, get_screen_image, build_site — und übersetzt das Design in Code. Für ein mehrseitiges Projekt kann man Routes zuweisen:
Baue eine vollständige Astro-Site aus meinem Stitch-Projekt:
- Screen "hero-and-features" → Route /
- Screen "pricing" → Route /pricing
- Screen "contact" → Route /contact
Das build_site-Tool handhabt die Zuordnung und gibt das Design-HTML pro Seite zurück, das Claude Code dann in die jeweiligen Routen-Komponenten übersetzt.
Was es löst — und was nicht
Was gut funktioniert
Der größte praktische Gewinn ist Konsistenz über die Zeit. Ohne eine explizite Design-Referenz neigen KI-Code-Generatoren dazu, bei jeder Komponente leicht unterschiedliche Werte zu verwenden — andere Abstände, leicht andere Farbtöne, inkonsistente Schriftgrößen. Die design.md-Datei und das direkte Abrufen von Design-Tokens via MCP geben Claude Code eine Quelle der Wahrheit, auf die es im Laufe einer Session zurückgreifen kann.
Für Prototypen und MVPs ist die Zeitersparnis real. Was ohne diese Integration einen halben Tag Design-Handoff-Arbeit erfordern würde — Farben dokumentieren, Abstände messen, Komponenten beschreiben — wird auf eine MCP-Verbindung und einen Prompt reduziert.
Der DESIGN.md-Workflow funktioniert auch ohne MCP gut: Man exportiert die design.md aus Stitch und gibt sie Claude Code direkt mit. Das ist weniger automatisiert, aber einfacher einzurichten und für Einzel-Projekte völlig ausreichend.
Wo die echten Grenzen sind
Interaktivität fehlt im Design. Stitch generiert statische Layouts, keine Verhaltensmodelle. Hover-States, Animationen, Validierungslogik, Zustandsmanagement — das alles muss man separat spezifizieren oder nacharbeiten. Der generierte Code ist ein fundierter erster Entwurf, kein fertiges Produkt.
Pixelgenaue Übereinstimmung ist nicht garantiert. Das MCP überträgt strukturierte Design-Daten — HTML, Tokens, Screenshot-Bilder — aber Claude Codes Code-Generierung ist nicht deterministisch. Kleine Abweichungen in Abständen oder Font-Weights kommen vor. Für Produktions-Code lohnt sich ein Vergleich zwischen Stitch-Vorschau und generiertem Output.
Die Google-Cloud-Authentifizierung ist die höchste Einstiegshürde. Der API-Key-Weg ist unkompliziert. Die OAuth-Route erfordert ein Google-Cloud-Projekt, Billing-Aktivierung und gcloud-CLI — alles nicht schwer, aber genug Schritte, um Momentum zu kosten. Das npx @_davideast/stitch-mcp init Wizard hilft, aber es bleibt ein Setup-Investment.
Für einfache Projekte ist der DESIGN.md-Export oft schneller. Das MCP glänzt bei mehrseitigen Apps, wo man Screens direkt zu Routes mappen will. Für eine einzelne Landing Page ist der direkte Export oft weniger Aufwand als die MCP-Einrichtung.
Vergleich: MCP vs. direkter Export
Beide Ansätze haben ihre Berechtigung, je nach Projektgröße und Setup:
Das Stitch MCP eignet sich für mehrseitige Apps mit mehreren Screens, Teams die regelmäßig Stitch nutzen, Workflows wo Design und Code synchron bleiben sollen, sowie für Claude-Code-Power-User die bereits andere MCPs betreiben.
Der direkte DESIGN.md-Export eignet sich für einzelne Komponenten oder einfache Landing Pages, einmalige Projekte ohne laufende Design-Iteration, Situationen wo Google-Cloud-Authentifizierung vermieden werden soll, sowie für Nutzer die keinen Claude-Code-CLI-Hintergrund haben.
Einordnung: Was das Design-to-Code-Problem wirklich ist
Es lohnt sich, einen Schritt zurückzutreten. Die Integration löst das Übertragungsproblem zwischen Design und Code effektiv — die manuelle, verlustbehaftete Arbeit, Design-Entscheidungen in Code-Anweisungen zu übersetzen. Das ist real und wird durch diese Kombination erheblich reduziert.
Was sie nicht löst, sind die inhärenten Grenzen von KI-generiertem Frontend-Code: Interaktionsdesign, Accessibility jenseits des Offensichtlichen, Performance-Optimierung für spezifische Kontexte, und die letzte Politur, die ein Produkt von einem Prototypen unterscheidet. Diese 20% der Arbeit bleiben menschlich — aber die 80% davor werden deutlich schneller.
Für Entwickler, die regelmäßig Designs in Code übersetzen, ist das MCP die sauberere Lösung. Für alle anderen ist die design.md-Datei ein guter Einstiegspunkt, der die Kernfrage beantwortet: Kann ich Claude Code eine klar strukturierte Design-Spezifikation geben statt einem Screenshot? Ja. Und es macht einen Unterschied.