Google Stitch Tutorial: Design zu Astro portieren

Google Stitch generiert in 60 bis 90 Sekunden hochwertige UI-Entwürfe aus Text, Bild oder Skizze (uithings.com, 2026). Das kostenlose Google-Labs-Tool läuft ohne Setup unter stitch.withgoogle.com: 350 Generierungen pro Monat im Standard-Modus, 50 im Experimental-Modus mit höherer Designqualität (nxcode.io, 2026). Der Export liefert HTML, CSS und Tailwind CSS, kein direktes Astro oder React. Du übergibst den Export an Claude Code. Der kritische Unterschied beim Portieren zu Astro oder React liegt im Export-Kanal: Claude Codes WebFetch liefert nur eine sprachliche HTML-Zusammenfassung: keine echten Tailwind-Klassen, keine SVG-Rohdaten, keine exakten Hex-Farben (Eigene Messung, 2026). Die Lösung: curl zum Herunterladen des Exports, dann das Read-Tool in Claude Code. Das Modell sieht den vollständigen Quelltext und portiert 1:1. Diese Methodik, Port-don’t-paint, hat beim KI-Standort-Report (14. April 2026) 12 komplexe Astro-Sections in einer Stunde portiert; dieselbe Aufgabe mit WebFetch dauerte drei Stunden (Eigene Messung, 2026). Stitch eignet sich für die 0-zu-1-Phase ohne Design-Background; ab bestehendem Design-System oder Team-Handoff bleibt Figma das richtige Tool.

Die Lösung heißt Port-don’t-paint: Claude Code portiert das Design 1:1 und erfindet keine eigenen Gestaltungsentscheidungen. Der zweite Baustein ist der richtige Export-Kanal, curl + Read statt WebFetch. Und der dritte sind fünf Anti-Patterns, die den Workflow zuverlässig zum Stoppen bringen, wenn man sie nicht kennt.

Dieser Artikel ist kein weiterer Tool-Review. Dokumentiert ist hier ein vollständiger Produktions-Workflow, inklusive drei Stunden Fehlschlag mit der falschen Methodik, und der Ansatz, der es danach in einer Stunde gelöst hat.

Was ist Google Stitch? Wofür eignet es sich wirklich?

Google Stitch ist eine KI-Designplattform von Google Labs, die UI-Interfaces aus Text, Bildern oder Skizzen generiert und als HTML, CSS und Tailwind CSS exportiert. Mehrere Design-Varianten stehen zur Auswahl, Figma-Export inklusive, alles direkt im Browser. Das Tool läuft ohne Installation, ohne Kreditkarte unter stitch.withgoogle.com, kostenlos und in 212 Ländern verfügbar (ki-im-alltag.de, 2026). Das Modell basiert auf Gemini und ist als Google-Labs-Experiment ohne Produktions-SLA positioniert (Google Developers Blog, 2025).

Google beschreibt es als “AI-native platform that allows anyone to create, iterate, and collaborate on high-fidelity UI” (Google Developers Blog, 2025). Gestartet ist Stitch am 20. Mai 2025 auf Google I/O. Im Dezember 2025 wechselte das Tool auf Gemini 3 als Basis-Modell, zeitgleich mit dem allgemeinen Gemini 3 Flash Launch am 17. Dezember 2025 (Google Labs Blog, 2025). Zehn Monate nach dem Launch folgte das “Vibe Design”-Update am 18. März 2026 (Google Labs Blog, Rustin Banks, 2026), das Multi-Screen-Generierung für bis zu 5 verbundene Screens einführte (nxcode.io, 2026). Verfügbar ist Stitch in 212 Ländern (ki-im-alltag.de, 2026).

Kein Figma-Ersatz also. Stitch ist ein Beschleuniger für die Phase von 0 auf 1: ohne Design-Background in Minuten zu ersten Interface-Konzepten.

Die drei Eingabe-Modi: Text, Bild und Skizze

Stitch kennt drei Wege zum ersten Design:

Text-Prompt ist der direkteste. Du beschreibst das gewünschte Interface, Stitch liefert mehrere Varianten in 60 bis 90 Sekunden. Kein Design-Background nötig, kein Figma-Onboarding.

Bild-Upload nimmt einen Screenshot, ein Foto oder eine bestehende UI als Ausgangspunkt. Nützlich, wenn du ein bestehendes Design modernisieren oder als visuelle Referenz nutzen willst.

Skizze ist der experimentellste Modus: Handskizze fotografieren oder direkt auf dem Canvas zeichnen, Stitch interpretiert die Struktur und generiert ein digitales Interface daraus.

Alle drei Modi liefern denselben Output: HTML/CSS-Code und Figma-Export. Keiner davon erzeugt direkt Astro- oder React-Code; an diesem Punkt hören die meisten Tutorials auf.

Für wen Stitch jetzt schon funktioniert

Am stärksten ist Stitch für Entwickler und Gründer ohne Design-Background, die eigene Web-Projekte bauen. Zehn Interface-Konzepte in einer Viertelstunde testen geht damit, mit Figma nicht ohne weiteres.

Wo Stitch noch Grenzen zeigt: Team-Handoff mit komplexen Design-Systems, Real-time Collaboration, Plugin-Workflows mit Figma-spezifischer Infrastruktur. Der Schritt von HTML-Export zu funktionierendem Astro-Code ist außerdem nicht trivial. Dazu gleich mehr.

Stitch einrichten und erste Designs exportieren

Stitch läuft im Browser ohne Download, Setup oder Abo. Du öffnest stitch.withgoogle.com, meldest dich mit Google-Account an und startest sofort. Der Standard-Modus bietet 350 Generierungen pro Monat mit Gemini 2.5 Flash, der Experimental-Modus 50 Generierungen mit Gemini 2.5 Pro und höherer Designqualität (nxcode.io, 2026). Kein Abo, keine Kreditkarte.

Zwei Modi stehen zur Wahl. Standard nutzt Gemini 2.5 Flash und bietet laut mehreren unabhängigen Quellen 350 Generierungen pro Monat (nxcode.io, tech-insider.org, 2026). Mit Gemini 2.5 Pro arbeitet der Experimental-Modus: höhere Designqualität, dafür begrenzt auf 50 Generierungen pro Monat (nxcode.io, 2026). Da Stitch ein Google-Labs-Experiment ist, können sich diese Limits jederzeit ändern.

Standard- vs. Experimental-Modus: wann welcher?

Standard reicht für erste Konzepte, einfache Layouts und den Fall, dass du viel Volumen brauchst. Experimental lohnt sich, wenn du das Design unmittelbar als Code-Basis verwenden willst: Die Qualität ist spürbar besser, besonders bei komplexeren Multi-Section-Designs.

Wer den Export direkt an Claude Code übergibt, profitiert mehr von 50 hochwertigen Experimental-Generierungen als von 350 Standard-Varianten mit mehr Nacharbeit.

DESIGN.md, MCP und Code-Export im Vergleich

Drei Wege führen vom Stitch-Design zum Code:

HTML/CSS direkt ist die schnellste Option: klicken, kopieren. Für Astro oder React direkt nutzbar ist das Ergebnis aber nicht. JSX-Attribute fehlen, SVGs sind nicht kompatibel.

DESIGN.md-Export erzeugt ein maschinenlesbares Markdown-Dokument mit Color System (Hex-Werte), Typography, Spacing Scale, Component Patterns, Interactive States, Border Radius und Shadows (mindstudio.ai, 2026). Offline nutzbar, kein Setup erforderlich. Bei einfacheren Projekten ist das oft der zuverlässigste Einstieg.

MCP-Server verbindet Stitch direkt mit Claude Code, Cursor, VS Code oder Gemini CLI (codelabs.developers.google.com, 2026). Dafür brauchst du Node.js v18+, einen Stitch API-Key und den konfigurierten MCP-Server (codelabs.developers.google.com, 2026). Der Workflow erzeugt React + Tailwind CSS, aber nicht als nativer Stitch-Export, sondern über die IDE.

Falls du Claude Code noch nicht eingerichtet hast: Claude Code einrichten erklärt den MCP-Setup von Grund auf.

Die Export-Methode entscheidet stärker über den weiteren Workflow als die Design-Generierung selbst. Was du als Nächstes wählst, bestimmt, ob du 30 Minuten oder drei Stunden im Loop verbringst.

Stitch zu Astro portieren: Was Tutorials verschweigen

Stitch kennt kein natives Astro-Template. Der Export liefert HTML und CSS; den Rest erledigt manuelle JSX-Konvertierung. Das ist die Arbeit, die Claude Code oder Cursor für dich übernehmen können, aber nur wenn sie die Rohdaten wirklich sehen. Nach unserer Einschätzung fehlt genau dieser Hinweis in den meisten Stitch-Tutorials.

Warum einfacher HTML-Export nicht reicht

Stitchs HTML-Export ist valides HTML5. Im Browser funktioniert es. Für Astro nicht ohne Weiteres, denn Astro erwartet JSX-kompatibles Markup.

Stitch exportiert nativ HTML, CSS und Tailwind CSS. React-Komponenten kommen ausschließlich über den MCP-Server oder über Antigravity IDE. Wer in Tutorials “React aus Stitch” liest, meint fast immer den MCP-Workflow, nicht einen direkten Export. Kein Widerspruch, nur fehlender Kontext.

Das Ergebnis ohne dieses Wissen: Build-Errors, die nicht selbsterklärend sind, und Debugging-Sessions, die sich hätten vermeiden lassen.

SVG-zu-JSX: die Attribut-Konventionen die du brauchst

Aus der Praxis beim Portieren von Stitch-HTML zu JSX sind diese Attribut-Mappings die häufigsten Stolperstellen (Eigene Messung, 2026):

Stitch-Export (HTML)	Astro/React (JSX)
class=	className=
viewbox=	viewBox=
stroke-width=	strokeWidth=
fill-opacity=	fillOpacity=
clip-path=	clipPath=

Hinzu kommen Design-Tokens: Stitch exportiert manchmal primary-container statt Hex-Werten. Tailwind erwartet konkrete Hex-Farben wie #0d5e4a. Wer das übersieht, baut mit falschen Farben und merkt es erst im Browser-Preview. Lösung: Design-Tokens einmal vor dem Port auflösen und in DESIGN.md oder direkt in die Tailwind-Config eintragen.

Diese Konvertierungsschritte klingen klein, summieren sich aber bei jedem Section-Port. Wer sie als Pre-Step in den Workflow einbaut, erspart sich reaktive Debugging-Sessions, die sich über mehrere Iterationen hinweg ziehen können.

Die 5 häufigsten Fehler beim Stitch-zu-Code Workflow

Die meisten Zeitverluste beim Stitch + Claude Code Workflow entstehen nicht durch schlechte Prompts, sondern durch strukturelle Methodikfehler: falscher Export-Kanal, unaufgelöste Design-Tokens, reaktive JSX-Konvertierung statt Pre-Step. Fünf dieser Fehler treten regelmäßig auf; alle sind durch einen richtigen Prozessaufbau vermeidbar (Eigene Messung, 2026).

Fehler 1: WebFetch statt curl+Read (der teuerste Fehler)

Claude Codes WebFetch-Tool liefert eine sprachliche Zusammenfassung des HTML-Inhalts. Keine echten Tailwind-Klassen, keine SVG-Rohdaten, keine exakten Hex-Farben, keine CSS-Details (Eigene Messung, 2026). Das Modell sieht, was ungefähr auf der Seite steht, nicht wie das Design tatsächlich aufgebaut ist.

Das Ergebnis: Claude Code erfindet Gestaltungsdetails, die es nicht sehen kann. Der Code sieht nach etwas aus, aber es ist nicht das Original.

Merksatz: WebFetch = “was steht ungefähr drin” · curl + Read = “exakt 1:1 übernehmen”

Die Lösung ist eine Zeile:

curl -sL -o design.html https://[stitch-export-url]

Danach öffnest du design.html mit dem Read-Tool in Claude Code. Das Ergebnis: vollständiger HTML-Quelltext, echte Tailwind-Klassen, SVG-Rohdaten, exakte Hex-Werte. Claude Code kann jetzt 1:1 portieren statt zu interpretieren.

Dieser eine Wechsel hat beim KI-Standort-Report-Projekt (14. April 2026) den Unterschied zwischen drei Stunden Fehlschlag und einer Stunde Erfolg gemacht (Eigene Messung, 2026).

Fehler 2: Screenshot-Interpretation via WebFetch

Kleine, dunkle oder detailreiche Bilder, die Claude Code über WebFetch analysiert, führen zu spekulativen Layout-Annahmen. Konkrete Beispiele aus dem KI-Standort-Report: Claude Code spekulierte “Karten sind wohl horizontal” (tatsächlich vertikal), “Matrix ist ein 2D-Scatter” (tatsächlich ein 4×4-Grid mit Overlay-Elementen) (Eigene Messung, 2026).

Die Lösung: Bild via curl herunterladen, dann zeigt das Read-Tool die PNG-Datei direkt als Bild. Claude Code sieht das tatsächliche Layout, keine Interpretation davon.

curl -sL -o screenshot.png https://[image-url]

Wer einen verwandten Ansatz zum KI-gestützten Schreiben sucht: ChatGPT richtig nutzen zeigt effektive Prompt-Strukturen für den B2B-Alltag.

Fehler 3: Design-Tokens nicht vor dem Port auflösen

Stitch exportiert Design-Tokens wie primary-container oder on-primary-container statt direkter Hex-Werte. Tailwind erwartet Hex. Wer das übersieht, bekommt Code, der auf undefinierte Variablen referenziert. Farben stimmen nicht, oder der Build schlägt fehl.

Lösung: Einmalig einen Token-Map-Step einbauen. Alle Stitch-Tokens gegen Hex-Werte aus dem DESIGN.md-Export abgleichen, dann in die Tailwind-Config schreiben. Danach arbeitet Claude Code mit echten Werten.

Fehler 4: JSX-Attribut-Konvertierung als Nacharbeit statt Pre-Step

Die Attribut-Mappings aus dem vorigen Abschnitt (class→className, viewbox→viewBox usw.) als Nacharbeit zu behandeln kostet spürbar mehr Zeit als sie vorab zu erledigen. Reaktives Debugging zieht sich oft über mehrere Iterationen, während ein einmaliger Pre-Step die Mappings für den gesamten Port klärt.

Praktischer Tipp: Leg die Mapping-Tabelle als Abschnitt im Systemprompt deines Claude Code Workflows ein. Der Schritt wird dann automatisch ausgeführt und nicht vergessen.

Fehler 5: Branchen-Varianten ohne Conditional-Render-Pattern

Wer mehrere Varianten desselben Designs braucht, baut sie oft als separate Dateien. Das erzeugt Redundanz und Sync-Probleme: Ändert sich das Basis-Design, müssen alle Dateien aktualisiert werden.

Das Pattern, das funktioniert (Eigene Messung, 2026):

const isWebAgentur = data.branche?.toLowerCase() === 'web-agentur';
{isWebAgentur && (<><AgencyMehrwert/><Reorganisation/></>)}

Eine Komponente, mehrere Varianten via Props. Mitarbeiterzahlen als string | number, um Buckets wie “1-10” oder “11-50” zu erlauben. Änderung einmal, alle Varianten aktualisiert.

Ein weiterer Hinweis für macOS-Nutzer: Coding-Projekte gehören in ~/projects/, nicht in iCloud-synchronisierte Ordner. Aktive Git-Workflows in iCloud-Ordnern werfen Lockfile-Errors, die schwer zu debuggen sind (Eigene Messung, 2026).

Stitch vs. Figma: Zwei Tools für zwei verschiedene Phasen

Stitch und Figma adressieren verschiedene Projektphasen. Sie sind keine direkten Konkurrenten. In der 0-zu-1-Phase, beim ersten Skizzieren ohne Design-Background, hat Stitch klare Vorteile: Interface-Konzepte in Minuten, kein Figma-Onboarding, kein Design-Vorwissen nötig. Sobald ein Design-System steht und Teams handoff-fähige Specs brauchen, ist Figma das Werkzeug der Wahl. Professionelle Projekte kombinieren beide: Stitch für die Ideation, Figma für den Handoff (cropink.com, 2025).

Figma ist 2025 auf 13 Millionen monatlich aktive Nutzer gewachsen, hält 40% Marktanteil im Design-Tool-Segment und wird von 95% der Fortune-500-Unternehmen genutzt (cropink.com, 2025). Stitch veröffentlicht keine Nutzerzahlen. Es ist ein Google-Labs-Experiment, kein Produkt mit Market-Share-Anspruch. Der Vergleich ist deshalb kein David gegen Goliath, sondern eine Frage des richtigen Werkzeugs zur richtigen Zeit.

Wann Stitch die richtige Wahl ist

Schnelle Konzeptiteration, kein Design-Background nötig, kein Figma-Onboarding: In dieser Phase ist Stitch das zügigere Werkzeug. Zehn Interface-Varianten in einer Viertelstunde. Wer allein entwickelt und kein Design-System pflegt, bekommt mit Stitch ein funktionierendes Interface-Konzept, das direkt in den Code-Workflow führt.

In diesem Kontext steht der Artikel: Solo-Entwickler oder kleine Teams ohne Figma-Kenntnisse, die Astro- oder React-Projekte bauen. Bei Experimenten und KI-gestützten Websites ist Stitch das einfachere Einstiegswerkzeug; im professionellen Unternehmens-Setup braucht es im Regelfall beide.

Wann du doch Figma brauchst

Figma ist das richtige Tool, sobald ein bestehendes Design-System, Team-Handoff und Plugin-Ökosystem ins Spiel kommen. Stitch kennt deine bestehenden Tokens nicht und hat kein vollwertiges Plugin-Ökosystem. Seit März 2026 sind Team-Workspaces und Kommentare verfügbar; Real-time Co-Edit wie in Figma fehlt aber (mindstudio.ai, uxpin.com, neowin.net, 2026).

Designs lassen sich aus Stitch zu Figma exportieren, inklusive Auto Layout (Google Developers Blog, 2025). Die meisten professionellen Projekte werden beide Tools kombinieren: Stitch für die Ideation, Figma für den Handoff an das Team.

Wer den Stitch + Claude Code Weg geht, bekommt jetzt den vollständigen Workflow mit echten Metriken.

Port, don’t paint: Der funktionierende Claude Code Workflow Schritt für Schritt

Der Grundsatz ist einfach: Wenn ein Design-System vorliegt, soll Claude Code es 1:1 übernehmen. Das Modell soll nicht neu entscheiden. Tailwind-Klassen, SVGs, Hex-Farben aus der Vorlage direkt übernehmen: keine Interpretation, kein Neuerfinden (Eigene Messung, 2026).

Merksatz: Port, don’t paint.

Port-don’t-paint bezeichnet die Methodik, bei der Claude Code ein Stitch-Design exakt übernimmt: Tailwind-Klassen, SVG-Rohdaten und Hex-Farben direkt aus dem curl-Export, ohne eigene Gestaltungsentscheidungen zu treffen. Der Gegensatz ist der WebFetch-Workflow, bei dem Claude Code mangels vollständiger Rohdaten beginnt, Details zu erfinden (Eigene Messung, 2026).

Hier ist, was das in der Praxis bedeutet. Beim KI-Standort-Report (14. April 2026, 12 Sections, Astro-Integration) gab es vier Phasen (Eigene Messung, 2026):

Phase	Methodik	Zeit	Ergebnis
Phase 1	Struktur aufbauen (Commit dcbd27b)	2h	Grundgerüst fertig
Phase 2	WebFetch-Methodik (Commits 10523ff, da2c97f)	3h	Fehlschlag: Tailwind, SVGs, Farben nicht korrekt
Phase 3	curl+Read-Methodik (Commit d24993f)	1h	12 Sections 1:1 portiert
Phase 4	Politur, Conditional-Render	30min	Fertig

Netto-Ersparnis bei richtiger Methodik von Anfang an: ca. 3 Stunden. Phase 2 war der teuerste Lerneffekt, den du hiermit nicht mehr bezahlen musst.

Wer Claude Code grundsätzlich konfigurieren will, findet in Claude Code einrichten eine ausführliche Anleitung mit ähnlicher Port-don’t-paint-Methodik.

Phase 1: Design-Struktur aufbauen mit curl + Read

Stitch-Design generieren (Experimental-Modus empfohlen), dann DESIGN.md oder HTML-Export bereitstellen. Den Export nicht über WebFetch laden:

curl -sL -o design.html [stitch-export-url]

Das Read-Tool in Claude Code öffnet die Datei: vollständiger Quelltext, alle Tailwind-Klassen, SVG-Rohdaten, exakte Farben sichtbar.

Prompt-Struktur, die funktioniert:

Portiere dieses Design 1:1 nach Astro.
Übernimm alle Tailwind-Klassen, SVGs und Hex-Farben exakt.
Keine eigenen Gestaltungsentscheidungen.

Der entscheidende Satz: “Keine eigenen Gestaltungsentscheidungen.” Das verhindert, dass Claude Code anfängt, das Design zu “verbessern”, statt es zu portieren.

Phase 2: Tailwind-Klassen und SVGs 1:1 übernehmen

JSX-Attribut-Mapping aus dem vorigen Kapitel anwenden, bevor der Port beginnt. SVG-Elemente direkt aus dem curl-Export nehmen. Farb-Tokens einmal auflösen, dann in die Tailwind-Config schreiben.

Kontrollschritt nach jeder Section: visueller Vergleich Stitch-Design vs. Astro-Render im Browser. Aus Phase 3 des KI-Standort-Reports: 12 Sections in einer Stunde ergibt rechnerisch ca. 5 Minuten pro Section (Eigene Messung, 2026). Bei einem ersten Port von 3 bis 4 Sections sind 15 bis 20 Minuten ein realistisches Zeitbudget.

Phase 3: Branchen-Varianten mit Conditional-Render

Wenn verschiedene Branchen-Varianten gebraucht werden, muss die Props-Struktur von Anfang an geplant sein. Kein Duplizieren von Komponenten. Eine Quelle, alle Varianten via Conditional-Render, wie in Fehler 5 beschrieben.

Test vor dem finalen Commit: alle Varianten im Browser durchklicken. Eine Minute Kontrolle spart zwanzig Minuten Debugging.

Wenn der Code steht, kommen Automatisierung und Agenten-Workflows. Prozesse rund um den Design-Workflow lohnen auch einen Blick auf n8n vs. Make.

Die Grenzen von Google Stitch: Was danach noch zu tun ist

Stitch ist ein starkes 0-zu-1-Tool für schnelle Interface-Konzepte ohne Design-Background. Vor dem Produktionseinsatz solltest du aber sechs klare Grenzen kennen: Google-Labs-Status ohne SLA, kein Design-System-Import, kein nativer React-Export (direkter Export: HTML, CSS, Tailwind CSS), eingeschränkte MCP-Stabilität, fehlende klassische Versionshistorie und kein Real-time Co-Editing. Solo-Projekte profitieren trotzdem; wer ein etabliertes Design-System und Plugin-Workflows mitbringt, stößt schneller an diese Grenzen.

Google Labs-Status: Kein Produktions-SLA, keine Stabilitätsgarantie. Das Tool kann sich ändern, Limits können sich verschieben, Features können wegfallen. Wer es in kritischen Produktions-Workflows einsetzt, sollte einen Backup-Plan einplanen (Google Developers Blog, 2025).

Kein Design-System-Import: Stitch generiert UI aus eigenen Modellen, nicht aus team-spezifischen Component Libraries (uxpin.com, 2026). Deine bestehenden Tokens, Brand-Guides und Shared Components sind für Stitch unsichtbar. Figma bleibt das Standard-Tool für Design-System-Pflege.

Der direkte Export liefert ausschließlich HTML, CSS und Tailwind CSS. React-Komponenten kommen nicht mit — nur über den MCP-Server oder Antigravity IDE. Teams, die React-Komponenten direkt aus Stitch erwarten, werden überrascht. Das sollte klar sein, bevor der Workflow geplant wird.

Der Stitch MCP Server ist in mehreren parallelen Community-Implementierungen verfügbar (@_davideast/stitch-mcp v0.5.3, Stand April 2026) (npmjs.com, 2026). Der primäre MCP-Server (davideast/stitch-mcp) ist von einem Google Developer Advocate entwickelt und offiziell auf stitch.withgoogle.com/docs/mcp/setup/ dokumentiert, kein offizielles Produktteam-Release, aber von Google empfohlen. Mit Breaking Changes ist zu rechnen.

Versionierung: Stitch hat keine klassische Versionshistorie. Statt “Version 3 wiederherstellen” gibt es einen Infinite Canvas, auf dem alle Generierungen nebeneinander sichtbar bleiben (uxpin.com, thesys.dev, 2026). Ein anderer Ansatz, kein vergessenes Feature. Wer gezieltes Rollback erwartet, stößt hier an eine Grenze. Wer Designs nach Figma überführt, hat dort volle Versionshistorie.

Das letzte Defizit betrifft Collaboration: Real-time Co-Editing fehlt Stand April 2026. Seit März 2026 gibt es Team-Workspaces und Kommentare; simultanes Bearbeiten wie in Figma ist aber noch nicht verfügbar (nxcode.io, mindstudio.ai, neowin.net, 2026).

Wer den Einsatz von KI-Tools grundsätzlich bewerten will: KI-Beratung Mittelstand bietet einen strukturierten Rahmen für diese Entscheidung.

Dennoch: Der Google-Labs-Track-Record zeigt, dass aktiv weiterentwickelt wird. Das Vibe Design Update kam zehn Monate nach dem Launch (Google Labs Blog, 2026). Solo-Entwickler ohne Design-Background profitieren jetzt schon klar. Teams mit etabliertem Design-System spüren die Grenzen früher und sollten die Tool-Kombination Stitch+Figma gezielt evaluieren, statt sich für eines zu entscheiden.

FAQ: Häufige Fragen zu Google Stitch

Was ist Google Stitch und wie funktioniert es?

Google Stitch ist ein KI-Design-Tool von Google Labs, das kostenlos unter stitch.withgoogle.com läuft. Du beschreibst ein Interface per Text, lädst ein Bild hoch oder skizzierst ein Layout. Das Tool generiert in 60 bis 90 Sekunden mehrere UI-Varianten als HTML/CSS-Code und als Figma-Export *(Google Developers Blog, 2025)*.

Ist Google Stitch kostenlos?

Derzeit vollständig kostenlos, ohne Kreditkarte. Der Standard-Modus bietet 350 Generierungen pro Monat mit Gemini 2.5 Flash, der Experimental-Modus 50 Generierungen mit Gemini 2.5 Pro bei höherer Designqualität *(nxcode.io, tech-insider.org, 2026)*. Da Stitch ein Google-Labs-Experiment ist, können sich Limits jederzeit ändern. Ein Produktions-SLA gibt es nicht.

Wie exportiere ich Stitch-Designs zu Astro oder React?

Drei Wege führen vom Stitch-Design zum Code: HTML, CSS und Tailwind CSS per direktem Export, React-Komponenten über den MCP-Server, und DESIGN.md für Tokens und Component-Specs offline *(codelabs.developers.google.com, 2026)*. Für den Astro-Port: curl zum Herunterladen, dann Read in Claude Code statt WebFetch. Nur so sieht das Modell den echten Tailwind-Code.

Google Stitch vs. Figma: Was ist besser?

Zwei Tools für zwei Phasen. In der Konzeptphase liefert Stitch zehn Interface-Varianten in einer Viertelstunde, ohne Figma-Kenntnisse. Sobald Design-Systems, Team-Collaboration und Plugin-Ökosystem gebraucht werden, ist Figma unersetzlich: 40 Prozent Marktanteil, genutzt von 95 Prozent der Fortune-500-Unternehmen *(cropink.com, 2025)*. Professionelle Projekte kombinieren beide Tools.

Was bedeutet "Port, don't paint" bei Stitch + Claude Code?

"Port, don't paint" beschreibt die Kernmethodik beim Stitch-zu-Code-Workflow: Claude Code soll Tailwind-Klassen, SVG-Rohdaten und Hex-Farben aus dem Stitch-Export exakt übernehmen, ohne eigene Design-Entscheidungen zu treffen. Im KI-Standort-Report-Projekt hat dieser Ansatz mit curl plus Read eine Stunde statt drei Stunden für 12 Sections gebraucht *(Eigene Messung, 2026)*.

Welche Code-Formate exportiert Google Stitch?

HTML, CSS und Tailwind CSS liefert Stitch direkt aus dem Interface. React-Komponenten kommen ausschließlich über den MCP-Server oder über Antigravity IDE. Für den Astro-Port sind zusätzlich JSX-Anpassungen nötig: class wird zu className, viewbox zu viewBox, stroke-width zu strokeWidth *(Eigene Messung, 2026)*. Ein natives Astro-Template gibt es nicht.

Wie lange dauert ein Stitch-zu-Code-Workflow?

Mit der Port-don't-paint-Methodik und curl plus Read in Claude Code: 12 komplexe Sections eines Reports in einer Stunde, rund fünf Minuten pro Section *(Eigene Messung, 2026)*. Sekundärquellen nennen für einen einfachen Standard-Workflow rund 30 Minuten Gesamtzeit *(findskill.ai, 2026)*, was als grobe Orientierung für kleinere Projekte ohne Astro-Anpassungen dienen kann. Die falsche Methodik kostet bis zu drei Stunden extra.

Warum ist WebFetch in Claude Code für Stitch-Exporte ungeeignet?

Claude Codes WebFetch-Tool liefert eine sprachliche Zusammenfassung des HTML: keine echten Tailwind-Klassen, keine SVG-Rohdaten, keine exakten Hex-Werte *(Eigene Messung, 2026)*. Das Modell erfindet Gestaltungsdetails, die es nicht sehen kann. Die Lösung: Design via curl herunterladen, dann mit dem Read-Tool öffnen. Danach ist der Code vollständig sichtbar und kann 1:1 portiert werden.

Wann stößt Google Stitch an seine Grenzen?

Sobald ein bestehendes Design-System, Team-Handoff oder Plugin-Workflow zum Einsatz kommt, stößt Stitch an klare Grenzen: kein Design-System-Import, kein Real-time Co-Editing, eingeschränkte Versionshistorie *(nxcode.io, mindstudio.ai, neowin.net, 2026)*. Team-Workspaces und Kommentare sind seit März 2026 verfügbar, klassisches Rollback fehlt. Der MCP-Server läuft in Version 0.5.3 *(npmjs.com, 2026)*. Figma bleibt für diese Anforderungen das richtige Tool.

## Fazit

Nach unserer Einschätzung ist Google Stitch das stärkste 0-zu-1-Tool, das du heute kostenlos für Interface-Konzepte ohne Design-Background einsetzen kannst. Der Export-Kanal entscheidet: curl + Read schlägt WebFetch für Präzision jedes Mal.

Port-don’t-paint spart in der Praxis bis zu 3h pro Projekt, wenn du die Methodik von Anfang an anwendest. Stitch ersetzt Figma nicht; es ergänzt es für einen klar abgegrenzten Use Case.

Wenn der Code steht, sind die nächsten Schritte: Claude Code einrichten für den MCP-Setup und der Agentic-AI-Einstieg für den Workflow danach.

Quellen

1. blog.google — https://blog.google/innovation-and-ai/models-and-research/google-labs/stitch-ai-ui-design/
2. codelabs.developers.google.com — https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch
3. developers.googleblog.com — https://developers.googleblog.com/stitch-a-new-way-to-design-uis/
4. cropink.com — cropink.com
5. findskill.ai — findskill.ai
6. ki-im-alltag.de — ki-im-alltag.de
7. mindstudio.ai — mindstudio.ai
8. npmjs.com — npmjs.com
9. nxcode.io — nxcode.io
10. uithings.com — uithings.com
11. uxpin.com — uxpin.com