Guide · Marcel Steiert

Google Stitch: so baut Claude dein Design nach

Fast jede KI-Webseite sieht gleich aus: Verlauf-Buttons, drei Spalten, null Charakter. Wie versprochen: die Links und meine Schritt-für-Schritt-Anleitung, von der Beschreibung über die Design-Datei bis zur fertigen Seite mit Claude Code.

Die Links: Stitch, die Seite für deinen API-Schlüssel, die offiziellen Stitch-Skills für Claude Code und die Beschreibung des DESIGN.md-Formats. Alle stehen direkt unten.
Die Anleitung: sieben Schritte, vom ersten Entwurf in Stitch bis Claude Code die Seite genau so nachbaut.
Zum Kopieren: meine Vorlage für die Beschreibung, der Befehl für die Verbindung und der Bau-Auftrag für Claude.

Die Links

Warum KI-Seiten alle gleich aussehen

Sagst du einer KI nur „bau mir eine Landingpage“, nimmt sie das, was sie am häufigsten gesehen hat: den Durchschnitt aller Webseiten. Deshalb landen so viele Seiten beim gleichen Look. Die KI rät, wie deine Seite aussehen soll.

Die Lösung ist ein festes Design, bevor der erste Code entsteht. Genau dafür ist Stitch da: Du legst dort fest, wie deine Seite aussieht, und Claude baut danach. Kein Rätselraten mehr, kein Einheitslook.

Was Stitch ist

Stitch ist ein Design-Tool aus Google Labs. Du beschreibst, wie deine Seite aussehen soll, und legst am besten noch einen Screenshot als Vorbild dazu. Daraus entstehen fertige Screens und ein Design-System: Farben, Schriften, Abstände und Bausteine, sauber festgehalten.

Ehrlich gesagt: Stitch ist ein Experiment von Google Labs. Stand heute kostet es nichts, du brauchst nur ein Google-Konto. Wie viele Entwürfe du pro Monat erzeugen kannst, siehst du in der App. Bedingungen und Kontingent kann Google jederzeit ändern.

Die Anleitung in sieben Schritten

Du brauchst ein Google-Konto und Claude Code. Die Schritte 1 bis 3 passieren im Browser, ab Schritt 4 verbindest du Stitch mit Claude Code.

  1. In Stitch anmelden und ein Projekt starten

    Öffne stitch.withgoogle.com, melde dich mit deinem Google-Konto an und wähle, ob du für das Web oder fürs Handy entwirfst. Für eine Webseite: Web.

  2. Deine Seite beschreiben und ein Vorbild dazulegen

    Je genauer die Beschreibung, desto weniger rät Stitch. Ich schreibe sie immer in drei Teilen: Aufbau, Stimmung, Inhalt. Kopier die Vorlage, füll die Klammern aus und lade dazu einen Screenshot einer Seite hoch, deren Stil dir gefällt.

    Vorlage · Beschreibung für Stitch
    Eine Landingpage für [was du anbietest] für [deine Zielgruppe].

Aufbau: [z. B. große Überschrift mit einem Satz darunter, drei Vorteile, ein Kundenzitat, ein Kontaktformular am Ende].

Stimmung: [drei Adjektive, z. B. ruhig, edel, klar]. Farben: [z. B. fast Schwarz als Hintergrund, ein warmes Gold als einziger Akzent]. Schrift: [z. B. klare, moderne Grotesk, große ruhige Überschriften].

Inhalt: [die echten Texte oder Stichworte deiner Seite].

Bitte keine Farbverläufe, keine Stockfotos, keine verspielten Schriften. Orientiere dich im Stil am angehängten Screenshot, übernimm aber keine Texte und keine Logos daraus.

    Der Screenshot ist nur ein Vorbild für Stil und Stimmung. Fremde Texte, Bilder oder Logos gehören nicht auf deine Seite.

  3. Screens prüfen und nachschärfen

    Stitch zeigt dir fertige Screens. Passt etwas nicht, sag es im Chat, aber immer nur eine Änderung pro Runde, zum Beispiel „mach die Überschrift größer“ oder „nimm das Gold nur für den Button“. So bleibt der Rest stabil. Erst wenn dir der Entwurf gefällt, geht es weiter.

  4. API-Schlüssel holen

    Öffne stitch.withgoogle.com/settings. Unter API Keys klickst du auf Create Key und kopierst den Schlüssel.

    Der Schlüssel ist wie ein Passwort für dein Stitch-Konto. Nicht in Chats posten, nicht in Dateien legen, die du teilst oder auf GitHub hochlädst.

  5. Stitch mit Claude Code verbinden

    Die Verbindung läuft über einen MCP-Anschluss, den Google selbst betreibt. Einmal im Terminal (PowerShell oder Mac-Terminal) eingeben, DEIN-SCHLÜSSEL durch deinen Schlüssel ersetzen:

    Schritt 5 · Terminal
    claude mcp add --transport http stitch https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: DEIN-SCHLÜSSEL" --scope user

    --scope user heißt: Stitch steht dir danach in jedem Projekt zur Verfügung. Starte Claude Code neu und prüf mit diesem Befehl, ob „stitch“ als verbunden angezeigt wird:

    Prüfen · in Claude Code
    /mcp

    Steht dort ein Fehler, liegt es fast immer am Schlüssel: einmal mit claude mcp remove stitch --scope user entfernen und den Befehl oben mit frisch kopiertem Schlüssel wiederholen.

  6. Die Design-Datei holen

    Jetzt holt sich Claude das Design direkt aus Stitch und schreibt es als DESIGN.md in deinen Projektordner. Darin stehen Farben, Schriften, Abstände und Bausteine mit genauen Werten, plus kurze Regeln, wie sie eingesetzt werden. Die Datei kann jede KI lesen. Claude Code im Ordner deiner neuen Seite starten und eingeben:

    Schritt 6 · in Claude Code
    Hol dir über das Stitch-MCP mein Projekt „[Name deines Stitch-Projekts]“: alle Screens, ihren HTML-Code und das Design-System.

Schreib daraus eine Datei DESIGN.md in diesen Ordner. Oben die genauen Werte für Farben, Schriften, Abstände, Rundungen und Bausteine (Buttons, Karten, Formulare), darunter kurz, wofür welche Farbe und welcher Baustein gedacht ist.

Zeig mir die Datei, bevor du weitermachst.

    Optional, aber hilfreich: Google bietet dafür fertige Skills an. Einmal im Projektordner im Terminal: npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. Danach kennt Claude unter anderem den Skill design-md, der genau diese Datei schreibt.

  7. Claude die Seite bauen lassen

    Jetzt der eigentliche Bau. Dieser Auftrag sorgt dafür, dass Claude nichts dazuerfindet, sondern sich an Stitch und an die DESIGN.md hält:

    Schritt 7 · Bau-Auftrag für Claude Code
    Baue die Seite exakt nach dem Stitch-Design und der DESIGN.md in diesem Ordner.

Regeln:
- Nimm nur Farben, Schriften, Abstände und Bausteine aus der DESIGN.md. Erfinde keine neuen.
- Halte dich beim Aufbau an die Screens aus Stitch, Abschnitt für Abschnitt.
- Keine Farbverläufe, keine Effekte, die nicht im Design stehen.
- Die Seite muss auf dem Handy genauso gut aussehen.

Wenn du fertig bist: Vergleich deine Seite mit dem Screenshot aus Stitch und nenn mir jede Abweichung, bevor du sie als fertig meldest.

Ohne MCP: der einfache Weg

Willst du nichts im Terminal einrichten, geht es auch von Hand. In Stitch kannst du dir den Code jedes Screens anzeigen lassen und kopieren. Leg ihn als Datei in deinen Projektordner, dazu einen Screenshot des Entwurfs, und gib Claude diesen Auftrag:

Auftrag ohne MCP
In diesem Ordner liegen der Code und ein Screenshot meines Entwurfs aus Google Stitch.

1. Lies beides und schreib daraus eine DESIGN.md mit den genauen Werten für Farben, Schriften, Abstände, Rundungen und Bausteine.
2. Bau danach die Seite exakt nach dieser DESIGN.md und dem Screenshot. Erfinde keine eigenen Farben oder Effekte.
3. Nenn mir zum Schluss jede Abweichung vom Screenshot.

Die DESIGN.md hebst du auf. Für jede weitere Seite legst du sie einfach wieder in den Ordner, und alles passt zusammen.

Was Stitch dir nicht abnimmt

Quellen: Google Stitch, Google Developers Blog: Stitch, Stitch SDK (offizieller MCP-Anschluss stitch.googleapis.com/mcp), Stitch Skills, DESIGN.md-Format. Stand 6. Oktober 2026. Stitch ist ein Labs-Experiment, Menüs und Befehle können sich ändern.

Neue Guides direkt per Mail

Trag dich ein und ich schreibe dir, wenn ich neue Guides dazu veröffentliche, wie du als Unternehmer Claude und KI-Systeme im Alltag einsetzt. Kein Spam, Abmelden jederzeit per kurzer Mail.

Mit dem Eintragen bist du einverstanden, dass ich dir zu diesem Thema schreibe. Details in der Datenschutzerklärung.

Mehr solche Guides? Ich zeige auf Instagram, wie du Claude und KI-Systeme wirklich in deinem Business einsetzt. Folge mir auf @marcel.steiert.