---

Schritt 1: Inspiration sammeln auf Pinterest

Bevor du mit dem Design startest, sammelst du visuelle Inspiration auf Pinterest:

• Erstelle ein Board für dein Projekt (z.B. „Keramik-Shop Design")
• Suche nach Begriffen wie „modern ecommerce design", „minimalist app UI" oder „warm earthy color palette"
• Pinne alles, was dir gefällt: Layouts, Farbpaletten, Typografie, Produktdarstellungen, Navigationskonzepte
• Mache Screenshots von deinen Lieblings-Pins oder ganzen Boards — diese teilst du später mit Stitch

Tipp: Achte besonders auf wiederkehrende Muster in deinen Pins. Wenn du immer wieder warme Erdtöne und minimalistisches Layout pinnst, ist das ein klares Signal für deinen Designstil.

Schritt 2: Design erstellen mit Google Stitch 2.0

Stitch 2.0 ist ein KI-gestütztes Design-Tool von Google, mit dem du per Chat ein UI-Design erstellst.

So gehst du vor:

1. Öffne Stitch 2.0 unter stitch.withgoogle.com
2. Starte einen neuen Chat und beschreibe dein Projekt, z.B.: „Ich möchte einen Online-Shop für handgemachte Keramik designen. Der Stil soll warm, minimalistisch und modern sein."
3. Lade deine Pinterest-Screenshots hoch — Stitch versteht Bilder und kann den Stil, die Farben und das Layout daraus ableiten
4. Stitch generiert daraufhin ein erstes Design als Vorschau

Schritt 3: Iterieren im Chat — bis es passt

Das Besondere an Stitch ist der Chat-basierte Workflow. Du kannst dein Design Schritt für Schritt verfeinern:

• „Mach die Navigationsleiste schlanker"
• „Verwende eine wärmere Farbpalette, mehr in Richtung Terracotta"
• „Füge eine Suchleiste oben hinzu"
• „Zeige die Produkte in einem 3-Spalten-Grid"
• „Der Hero-Bereich soll ein großes Bild mit Text-Overlay haben"

Stitch aktualisiert das Design nach jeder Anweisung in Echtzeit. Du chattest so lange, bis das Ergebnis deinen Vorstellungen entspricht.

Tipp: Sei spezifisch in deinen Anweisungen. Statt „mach es schöner" besser „erhöhe den Weißraum zwischen den Produktkarten und verwende eine serifenlose Schrift".

Schritt 4: Code exportieren mit „Export to Clipboard"

Wenn du mit dem Design zufrieden bist:

1. Klicke in Stitch auf den „Export to Clipboard"-Button (oder die entsprechende Code-Export-Funktion)
2. Stitch kopiert den vollständigen HTML/CSS/Tailwind-Code deines Designs in die Zwischenablage
3. Der Code ist eine einzelne HTML-Datei mit inline Tailwind CSS — sofort lauffähig im Browser

Schritt 5: Website bauen mit Claude Code

Jetzt kommt der spannende Teil — du baust aus dem Stitch-Design eine echte, funktionsfähige Website.

So geht's:

1. Öffne Claude Code (z.B. im Terminal oder in der Desktop-App)
2. Füge den kopierten Stitch-Code ein und verwende folgenden Prompt:

Der Prompt für Claude Code

Hier ist ein HTML-Design, das ich mit Google Stitch erstellt habe.
Bitte baue daraus eine vollständige, funktionsfähige Website.

Anforderungen:
- Verwende das Design als visuelle Vorlage (Farben, Layout, Typografie, Abstände)
- Setze es als [React/Next.js/HTML+CSS] Projekt um
- Mache das Layout vollständig responsive
- Ersetze die Platzhalter-Bilder durch [echte Bilder / Unsplash-Links / Platzhalter]
- Füge echte Navigation und Interaktivität hinzu
- Strukturiere den Code sauber mit Komponenten

Hier ist der Stitch-Code:

[STITCH-CODE HIER EINFÜGEN]

Zusammenfassung des Workflows

Schritt	Tool	Was passiert
1	Pinterest	Inspiration sammeln, Screenshots machen
2	Stitch 2.0	Screenshots hochladen, erstes Design generieren
3	Stitch 2.0	Im Chat iterieren, bis das Design passt
4	Stitch 2.0	Code per „Export to Clipboard" kopieren
5	Claude Code	Code einfügen + Prompt → fertige Website

Tipps für die besten Ergebnisse

• Je mehr Pinterest-Screenshots, desto besser versteht Stitch deinen gewünschten Stil
• Iteriere in kleinen Schritten — eine Änderung pro Chat-Nachricht führt zu besseren Ergebnissen
• Sei im Claude-Code-Prompt spezifisch: Nenne das gewünschte Framework (React, Next.js, etc.) und besondere Anforderungen
• Der Stitch-Code ist ein Startpunkt — Claude Code kann daraus eine produktionsreife Anwendung mit Routing, State Management und Backend-Anbindung machen
• Wenn du die Seite launchen willst, verbinde Claude mit Vercel. Das ist eine Hosting Plattform und kostet für simple Websites nichts. Claude kann Vercel selbst konfigurieren, du brauchst nur einen Account.