Google Stitch + Claude Code: Websites ohne den „KI-Look“ gestalten

Weitere Hinweise zur Arbeit mit Ailoot findest du in der Dokumentation.

Warum sehen mit Claude Code erstellte Websites nach „AI Slop“ aus?#

Im hier beschriebenen Praxisbeispiel begann die Arbeit an der Homepage für eine Anruf-App mit einem leeren Projekt und der Aufforderung an Claude Code, eine Landingpage zu erstellen. Das Ergebnis war der Klassiker: slate-950 als Hintergrund, indigo-500 als Akzent, fett gesetztes Inter in der Überschrift und darunter drei identische Karten mit Schatten. Dasselbe Layout wie bei der ersten v0-, Lovable- oder ChatGPT-Generierung. Ich schrieb den Prompt fünfmal um und ergänzte „Premium“, „nicht wie alle anderen“ und „modern“ – die Seite sah trotzdem aus wie ein WordPress-Theme von 2015.

Der violette Farbverlauf ist kein Zufall.

Die Logik ist einfach: Ohne Vorgaben nimmt das Modell den statistischen Durchschnitt dessen, was es gesehen hat. Und es hat eine Million identischer Landingpages gesehen, die mit Bootstrap und Tailwind erstellt wurden. Damit das Ergebnis nicht durchschnittlich ausfällt, musst du dem Agenten konkrete Angaben machen: welche Farben, welche Schriften, welche Abstände und welche Komponenten als verbindlich gelten. Für ein Modell bedeutet das Wort „schön“ „der Median von 2020“. Adjektive ändern daran nichts; du brauchst exakte Parameter.

Dieselbe Lücke habe ich in einem Leitfaden zu fertigen Designsystemen mit Refero untersucht – dort übernimmst du den Stil anderer Unternehmen wie Apple, Linear oder Stripe und gibst ihn dem Agenten vor. Google Stitch geht von der anderen Seite an die Sache heran: Statt den Stil eines anderen zu übernehmen, generierst du deinen eigenen – anhand deiner Beschreibung.

Was ist Google Stitch und wie hilft es?#

Stitch ist ein Experiment von Google Labs, das im Mai 2025 auf der Google I/O vorgestellt wurde. Du beschreibst im Prompt-Feld, wie die App aussehen soll, oder lädst einen Screenshot, eine Whiteboard-Skizze oder die Seite eines Wettbewerbers hoch. Stitch erzeugt dann Oberflächen auf einer unbegrenzt großen Arbeitsfläche. Im Hintergrund nutzt es Gemini 2.5 Pro und Flash; Gemini 3 kam im Dezember 2025 für ausgefeiltere Layouts hinzu.

Das ist für uns nützlich:

• Vibe Design – Beschreibe die gewünschte Wirkung in Worten („minimalistisch und hochwertig, wie Stripe“) und erhalte mehrere visuelle Richtungen zur Auswahl.
• Referenzen – Lade ein Bild von Dribbble oder Pinterest hoch; Stitch übernimmt dessen Layout und setzt deine Vorgaben um.
• Export in drei Formaten: nach Figma mit bearbeitbaren Ebenen, als sauberer HTML/CSS-Code und über MCP direkt in den Agenten.

Der Unterschied zu fertigen Stilen wie Refero ist wichtig. Refero ist eine Bibliothek mit Designsystemen, die bereits aus echten Websites extrahiert wurden; du übernimmst eine bestehende Marke. Stitch generiert ein System für dein Produkt von Grund auf. Du hast kein Referenzdesign und möchtest einen eigenen Look? Dann nimm Stitch. Du willst den Stil eines bekannten Produkts schnell übernehmen? Dann nimm Refero. Die beiden decken unterschiedliche Schritte ab und ergänzen sich gut.

Claude selbst hat auch einen integrierten Designmodus; ich habe ihn in einem Leitfaden zu Claude Design behandelt. Stitch ist anders, weil es ein fertiges System in einer externen Datei bereitstellt, die der Agent bei jedem Bauvorhaben einliest.

Voraussetzungen für den Zugriff auf Google Stitch#

Stitch ist nicht in jedem Land verfügbar: Ein Google-Vertreter schrieb im offiziellen Forum, der Dienst sei für Nutzer ab 18 Jahren in 212 Ländern verfügbar, und die Liste werde erweitert. In eingeschränkten Regionen wird beim Aufrufen genau eine Meldung angezeigt: „Sorry, Stitch is unavailable.“

Du brauchst ein Google-Konto – anmelden kannst du dich nur damit.

Wenn die Stitch-MCP-Anmeldung den Claude-Code-Ablauf blockiert#

Beim hier beschriebenen Versuch scheiterte die Anmeldung am Remote-MCP https://stitch.googleapis.com/mcp in Claude Code mit Incompatible auth server. Dieser beobachtete Fehler ist weder eine funktionierende Anleitung noch ein Beleg, dass jede heutige Konfiguration scheitert. Der Artikel liefert keine verifiziert kompatible MCP-Einrichtung. Der vollständige Weg unten verwendet deshalb lokalen HTML/CSS-Export.

Im Netz gibt es viel Unsinn zum Thema MCP-Verbindungen, und die Hälfte der Anleitungen funktioniert schlicht nicht. Viele Anleitungen – auch beliebte englischsprachige – empfehlen zum Beispiel, das Paket @google/stitch-mcp mit dem Befehl npx -y @google/stitch-mcp@latest zu installieren. Dieses Paket existiert nicht – npm gibt 404 zurück. Kopiere diesen Befehl nicht; das kostet nur Zeit. Aus demselben Grund solltest du Integrationen wählen, deren Installation und Überprüfung an einer echten Aufgabe bestätigt wurden.

Setze keinen unbestimmten Schritt „MCP verbinden“ fort. Verwende den manuellen Exportweg, bis eine genaue kompatible Konfiguration geprüft ist. Dafür brauchst du weder einen Stitch-API-Schlüssel noch eine neue Google-Anmeldung oder Änderungen an bestehenden Geheimnisdateien.

Der Stitch- und DESIGN.md-Ablauf bleibt Context Engineering: Du gibst Claude exakte vorhandene Designwerte statt bloßer Vermutungen. Gemeinsam mit KI-Klon und Second Brain liefert das nachvollziehbare Grundlagen; prüfe die tatsächlich gebaute Oberfläche.

Was ist DESIGN.md und warum ist es besser als ein Screenshot?#

Hier ist ein wichtiger Punkt, den die meisten Anleitungen falsch darstellen: In Stitch gibt es keine Schaltfläche „Export DESIGN.md“. Der Agent erstellt die Datei selbst. Laut dem offiziellen Codelab von Google lautet der Prompt ungefähr so: „Gehe über Stitch MCP zum Projekt, extrahiere Farbpalette und Typografie und stelle daraus eine DESIGN.md zusammen.“ Das Codelab setzt eine funktionierende MCP-Verbindung voraus. Im manuellen Weg liest Claude Code stattdessen exportiertes HTML/CSS und schreibt die strukturierte Datei in den Projektstamm. Fehlende Tokens müssen benannt statt aus Bildern geraten werden.

DESIGN.md enthält konkrete Angaben statt Adjektive:

# DESIGN.md
## Colors
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Damit Claude Code die Datei verwendet, verweist du von CLAUDE.md darauf, zum Beispiel mit der Zeile „Nutze das Design aller Komponenten aus DESIGN.md“. Dann zieht der Agent in jeder Sitzung dieselben Tokens heran. Ein Button vom Montag und eine Karte vom Freitag haben denselben Stil, weil es eine einzige Quelle der Wahrheit gibt.

Hier ergänzen sich zwei lokale Referenzen. DESIGN.md enthält Systemregeln zu Farbe, Typografie, Abständen und Komponenten. Exportiertes Stitch-HTML/CSS samt Assets liefert das konkrete Bildschirmlayout. MCP ist optional und für diesen Weg keine Voraussetzung.

Wie baust du eine Website: der vollständige Weg vom Text zum Design?#

Hier ist der vollständige Ablauf in der richtigen Reihenfolge:

1. Stitch öffnen. Prüfe Verfügbarkeit in deinem Land und melde dich mit deinem Google-Konto bei stitch.withgoogle.com an.
2. Produkt beschreiben. Benenne Bildschirme und Nutzerreise und bestätige oder bearbeite die vorgeschlagene Liste.
3. Referenz hinzufügen. Lade den vorgesehenen Screenshot hoch und benenne zu bewahrende Farben, Typografie und Layout.
4. Generieren und verfeinern. Wähle zunächst einen Bildschirm und verfeinere ihn vor der Ausweitung.
5. Gewählten Bildschirm als HTML/CSS exportieren. Speichere Dateien und benötigte Assets im Referenzordner des Projekts. Öffne den HTML-Export lokal und prüfe den richtigen Bildschirm. Ein Screenshot allein enthält keine exakten CSS-Werte.
6. DESIGN.md aus dem lokalen Export erstellen. Lass Claude Code tatsächliche Farb-, Schrift-, Abstands-, Layout- und Komponentenwerte lesen und fehlende Werte zur Entscheidung auflisten. Dieser Weg benötigt weder Stitch-API-Schlüssel noch MCP-Anmeldung.
7. Eine Seite bauen und prüfen. Ersetze in diesen Prompts den Ordnernamen durch deinen tatsächlichen Exportpfad:

Lies den Stitch-HTML/CSS-Export in refs/stitch-export/. Erstelle DESIGN.md im
Projektstamm mit tatsächlich vorhandenen Werten. Benenne fehlende Werte,
statt sie zu erfinden.

Baue eine Seite aus DESIGN.md und dem lokalen Stitch-Export. Halte Komponenten
modular. Vergleiche die gerenderte Seite bei Desktop- und Mobilbreite mit dem
Export und prüfe Navigation sowie interaktive Zustände separat.

Danach erledigst du alles in Claude Code: Navigation zwischen den Bildschirmen, Responsivität an den in DESIGN.md festgelegten Breakpoints, Animationen und Interaktivität. Stitch liefert statische Bildschirme und einen klickbaren Prototyp, erstellt aber weder funktionierende Logik noch veröffentlicht es die Website auf einem Hostingdienst – das ist Aufgabe des Agenten.

Wie wirst du den „KI-Look“ los: Was musst du konkret ändern?#

An diesen konkreten Stellen hört eine Website auf, sich selbst als KI-Ergebnis zu verraten:

• Farbe. Violettes indigo-500 ist das erste verräterische Merkmal. Lege die Primär- und Akzentfarben direkt in DESIGN.md als exakte Hex-Werte fest. Jeder Agent interpretiert „Markenblau“ anders.
• Schrift. Inter ist die naheliegendste und deshalb am leichtesten erkennbare „KI-Schrift“. Wähle eine ausdrucksstarke Kombination: zum Beispiel eine serifenlose Schrift für Fließtext und eine charaktervolle für Überschriften. Lege sie im Stitch-Design fest und halte sie in DESIGN.md fest.
• Eine Referenz statt eines Adjektivs. Das Modell interpretiert „Mach es modern“ als „den Median von 2020“. Die Anweisung „Verwende das Layout dieser Seite“ nimmt es mit einem echten Screenshot wörtlich. Lade ein Referenzbild in Stitch hoch; deinen Geschmack kannst du nicht in Worten vermitteln.
• Abstände und Freiraum. Ein Vorlagenlayout erkennt man an seinen gedrängten, identischen Blöcken. Lege in DESIGN.md eine großzügige Abstandsskala fest – dadurch ordnet der Agent die Elemente freier an.

Konkrete Angaben schlagen subjektive Adjektive. Stitch übersetzt im Grunde dein „Ich möchte es so“ in präzise Tokens, sodass dem Agenten nichts mehr zum Raten bleibt.

Google Stitch oder Alternativen: Was solltest du wählen?#

Ich habe die Tools anhand der Punkte verglichen, die beim Vibe Coding mit kleinem Budget tatsächlich wichtig sind:

Mein eigener Workflow: Stitch zum Erkunden des Designs → Claude Code für die Umsetzung und Logik. Für Vibe Coding mit kleinem Budget ist Stitch die beste Wahl, weil es kostenlos ist und von Grund auf einen individuellen Look für dein Produkt entwirft. Wenn du die gesamte Auswahl an verfügbaren Tools kennenlernen möchtest, habe ich sie im Grundlagenartikel Womit programmieren im Jahr 2026 behandelt.

Wo stößt Google Stitch an seine Grenzen: Welche Einschränkungen gibt es?#

Hier ist eine ehrliche Liste, damit du nicht schon beim dritten Bildschirm enttäuscht bist:

• Nur die Oberfläche. Kein Backend, keine Datenbank und keine Veröffentlichung auf einem Hostingdienst. Dafür brauchst du Claude Code oder Lovable, wenn alles an einem Ort sein soll.
• Begrenzte Bearbeitung im Tool. Einzelne Elemente lassen sich nicht mit der Maus verschieben – du kannst sie nur per Prompt ändern und neu generieren. Es ist nicht Figma.
• Nichtdeterministische Ergebnisse. Derselbe Prompt führt zu unterschiedlichen Ergebnissen. Gut zum Erkunden von Ideen, unpraktisch, wenn du reproduzierbare Ergebnisse brauchst.
• Kontingent. Du stößt an das Limit für kostenlose Generierungen (derzeit täglich). Weitere kannst du nicht kaufen; du musst warten, bis das Kontingent zurückgesetzt wird. Die genaue Anzahl variiert, prüfe daher die Oberfläche.
• Experimenteller Status. Google Labs gibt keine Garantie für langfristige Unterstützung. Der Dienst kann sich ändern oder eingestellt werden.
• Geografische Einschränkungen und das MCP-Autorisierungsproblem in Claude Code, die in den Abschnitten zu Verfügbarkeit und Einrichtung erwähnt werden.

Stitch ist ungeeignet, wenn du für viele Projekte einen strikten Markenleitfaden hast, das Design bereits in Figma vorliegt oder du eine App mit Backend brauchst, die bereits veröffentlicht ist.

Wie geht es weiter?#

Baue den kleinstmöglichen Workflow mit einem Bildschirm: Beschreibe das Produkt in Stitch, generiere die Homepage, exportiere HTML/CSS und bitte Claude Code, DESIGN.md daraus zusammenzustellen und die Seite aus diesen lokalen Dateien zu bauen. Sobald du siehst, wie der violette Farbverlauf von selbst verschwindet, wird der Rest leichter.

Das Gestalten mit Stitch ist eine Context-Engineering-Technik. Das vollständige System verbindet einen KI-Klon, das Second Brain und Context Engineering, damit Claude sich auf vorbereitete Regeln und Kontext stützen kann.

Der KI-Klon, das Second Brain und Context Engineering sind für das Produkt wichtig. Das Gestalten mit Stitch ist der erste Baustein dieser Kombination.

Für die weitere Arbeit mit Modellen kannst du zu Ailoot gehen.