- Warum „Design" der teuerste Flaschenhals im KI-Coding ist — und wie man ihn ganz aus der eigenen To-do-Liste nimmt
- Die 3-Schichten-Pipeline: Stitch designt · MCP verbindet · Claude Code baut
- Der eine Trick (
design.md) gegen driftende Komponenten — plus meine Operator-Quality-Gates aus echter Projektarbeit
Warum Design der teure Flaschenhals ist
Ich bin Operator, kein UI-Designer. Logik, Datenflüsse, Automationen — kein Problem, das delegiere ich an Claude Code und es liefert. Aber jedes Mal, wenn ein Projekt eine echte Oberfläche brauchte, stand ich still: entweder selbst stundenlang an Spacing und Farben fummeln, oder eine Agentur briefen und auf Iterationen warten. Beides killt das Tempo, das ein Solo-Setup überhaupt erst lohnenswert macht.
Die Erkenntnis, die das gelöst hat: Man muss nicht ein Tool finden, das Design und Code kann. Man trennt die beiden Jobs und gibt jeden an das Werkzeug, das ihn am besten kann — und sorgt nur dafür, dass die Übergabe sauber ist.
Die Pipeline in einem Satz
Stitch designt die Screens, Claude Code baut den Code, und eine MCP-Verbindung ist das Förderband dazwischen. Drei Schichten, eine Richtung. Kein Screenshot-Hin-und-Her, kein „bau mir das nach diesem Bild nach". Claude bekommt den echten Design-Kontext, nicht eine Beschreibung davon.
- Stitch (stitch.withgoogle.com) — Googles KI-UI-Designer aus den Labs. Erzeugt komplette Screens samt zusammenhängendem Design-System aus einem Prompt oder Referenzbildern. Gratis, mit 350 Generierungen pro Monat im Standard-Modell — deshalb ersetzt es den Großteil der Design-Phase quasi kostenlos.
- Claude Code — Anthropics Terminal-Agent (
npm install -g @anthropic-ai/claude-code). Liest die Designs und schreibt den Produktionscode.
Teil 1 — Die Design-Schicht
In Stitch gilt dasselbe wie bei jedem KI-Tool: ein vager Prompt gibt vagen Output. Ich gebe ihm Struktur statt einer Zeile — und wenn ich eine bestimmte Stimmung treffen will, hänge ich Referenz-Screenshots an (ein Pinterest-Board reicht). Mein Grundgerüst:
App: [was es ist, z. B. Meal-Planning-App] für [Zielgruppe]. Screens: [die nötigen, z. B. Onboarding, Feed, Detail, Profil]. Look: [minimal / bold / …], Farbwelt [Richtung], Typo-Gefühl [Richtung]. Referenz: orientier dich an den angehängten Screenshots.
Stitch baut jeden Screen plus ein gemeinsames Design-System — wichtig, denn dieses System ist später der Klebstoff, der den Code konsistent hält.
Der Teil, der das Ganze erst zur Pipeline macht — die MCP-Brücke, der Build-Prompt und meine Quality-Gates aus echter Projektarbeit — steht in der Vollversion:
Vollversion gratis gegen E-Mail
Teil 2 (MCP-Verbindung mit fertigem Befehl), Teil 3 (Build-Prompt), der design.md-Trick und meine 4 Operator-Quality-Gates. Einmal eintragen, sofort frei.
Double-Opt-In via Buttondown · jederzeit abbestellbar · Datenschutz
Teil 2 — Die Brücke (MCP)
Das Förderband. Statt Claude Screenshots zu zeigen, gebe ich ihm Lesezugriff auf die Stitch-Projekte selbst — über eine MCP-Verbindung. Zwei Handgriffe:
- In Stitch unter Einstellungen einen API-Key erzeugen: stitch.withgoogle.com/settings.
- Die Stitch-MCP einmalig zu Claude Code hinzufügen (
YOUR_STITCH_API_KEYersetzen):
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp --header "X-Goog-Api-Key: YOUR_STITCH_API_KEY" -s user
Ab jetzt sieht Claude Code deine Stitch-Projekte direkt — kein Export, kein Copy-Paste.
Teil 3 — Der Build
In Claude Code im Projektordner zeige ich auf die Designs und sage genau, was ich will. Wichtig ist das „exakt übernehmen", sonst interpretiert das Modell zu frei:
Nutze meine Stitch-Designs über die Stitch-MCP und bau daraus eine production-ready [React-+-Tailwind]-App. Übernimm Layout, Spacing, Farben und Typografie pro Screen exakt, verdrahte die Screens per Navigation und setz weiche Übergänge.
Claude zieht sich den echten Design-Kontext und baut es aus — Screens verbunden, Übergänge drin.
Der Konsistenz-Trick: design.md
Das ist der Hebel, der bei mir den größten Unterschied gemacht hat. Stitch kann sein komplettes Design-System (Farben, Spacing, Komponenten, Zustände) als design.md exportieren — ein Format, das Claude Code sauber liest. Datei ins Projekt-Root, einmal sagen „halte dich an die design.md", und jede neue Komponente bleibt on-system, statt langsam wegzudriften. Damit verschwindet das „warum sieht jede Komponente leicht anders aus"-Problem.
Meine Operator-Quality-Gates
Vier Regeln, die ich aus echter Projektarbeit gelernt habe — sie trennen „schnell und gut" von „schnell und generisch":
Ohne die design.md im Root driftet der Look ab Komponente 5. Erst die Datei, dann bauen lassen.
Stitch bringt dich auf ~90 % des Looks. Die letzten 10 % — Spacing, Mikro-Polish — macht Claude Code im Code, nicht zurück in Stitch. Dort zählt es.
Sei ehrlich zum Output: das ist Prototyp-Qualität, kein pixel-perfektes Abgabe-Design. Als schnellen, starken Startpunkt behandeln — sonst lieferst du etwas Generisches aus.
Ohne MCP-Setup exportiert Stitch direkt HTML/Tailwind oder Figma (mit echten Layern). Das gibst du Claude als Startpunkt. Der MCP-Weg ist sauberer, der Export-Weg läuft überall.
Mein Fazit
Diese Pipeline hat Design aus meiner persönlichen To-do-Liste genommen, ohne dass die Ergebnisse billig aussehen. Der Trick ist nicht das eine magische Tool — es ist die saubere Übergabe zwischen einem Tool, das designt, und einem Agenten, der baut. Genau dasselbe Prinzip, mit dem ich auch alles andere im Stack orchestriere.
Mehr dazu, wie ich Tools und Agents zusammenschalte: Wie ich 184 AI Agents mit Claude installiert habe.