Guide holen →
Setup-Guide · Claude + Stitch · Setup-Guide / Skill · April 2026

Loop, pixel-perfect, 0 AI-Slop.

Google Stitch generiert Website-Designs aus einem Satz. Claude Code baut Code aus Designs.

Du beschreibst was du willst, Claude schreibt das Briefing, Stitch macht das Design, Claude baut es pixelgenau nach. Dieser Guide zeigt dir den offiziellen Skill von Google Labs, den Security-Check und die exakte Installation. Trag dich ein und ich schick dir Zugang zu allen Guides, die ich bisher erstellt habe, direkt in deine Inbox.

Erst die Schritte ansehen
Kostenlos · Kein Spam · DSGVO
Schritt-für-Schritt

Fünf Schritte zum autonomen Stitch-Loop.

Stitch MCP Server verbinden via Google Account, Skill installieren mit einem npx-Command, Claude Code starten — Skill läuft autonom. Fertig: Claude baut Websites im Loop.

01

Stitch MCP Server verbinden

Via Google Account

Du brauchst einen Google-Account mit Stitch-Zugang (stitch.withgoogle.com, aktuell Beta) und musst den offiziellen Stitch-MCP-Server einrichten.

# Stitch-MCP-Server einrichten:
stitch.withgoogle.com/docs/mcp/setup
02

Skill installieren

Ein npx-Command pro Skill

Nachdem du den Stitch-MCP-Server eingerichtet hast: Haupt-Skill global installieren, plus 2 zusätzliche empfohlene Skills.

# Haupt-Skill global installieren
npx skills add google-labs-code/stitch-skills \
    --skill stitch-loop --global

# stitch-design — Haupteinstieg für neue Projekte
npx skills add google-labs-code/stitch-skills \
    --skill stitch-design --global

# enhance-prompt — verbessert Design-Briefings
npx skills add google-labs-code/stitch-skills \
    --skill enhance-prompt --global
03

Setup im Projekt

Drei Files anlegen

Lege .stitch/SITE.md an (Vision + Stitch-Projekt-ID), .stitch/DESIGN.md (per design-md-Skill generierbar) und .stitch/next-prompt.md (erste Seite).

.stitch/SITE.md         # Vision + Stitch-Projekt-ID
.stitch/DESIGN.md       # Design-System
.stitch/next-prompt.md  # Erste Seite
Pro-Tipp: Erstell zuerst einen Screen manuell in Stitch, kopier die Projekt-ID, dann übernimmt der Loop
04

Claude Code starten

Skill läuft autonom

Öffne das Projekt in Claude Code. Sag: 'Baue die nächste Seite mit Stitch'. Der Skill übernimmt.

Sag in Claude Code:
"Baue die nächste Seite mit Stitch"

→ Der Skill triggert autonom
→ Kein Slash-Command nötig
05

Loop läuft autonom

Generate → Download → Integrate → Next

Claude liest die Baton → erzeugt Screen via stitch:generate_screen_from_text → lädt HTML+PNG → integriert in site/public/ → schreibt nächste Baton-Aufgabe. Optional: Mit Chrome DevTools MCP kann Claude am Ende prüfen, ob die gebaute Website dem Stitch-Design entspricht.

Baton lesen
  ↓
stitch:generate_screen_from_text
  ↓
HTML + PNG laden
  ↓
Integration in site/public/
  ↓
Nächste Baton-Aufgabe schreiben
Setup-Guide · Recherche-Prompt · Security-Check

Trag dich ein und du bekommst Zugang zu allen meinen Guides als Übersicht, sobald die fertig ist. Setup-Anleitungen, Master-Prompts, Workflows, alles an einem Ort.

Pro-Tipp · Recherche-Prompt

Statt blind zu kopieren — lass Claude prüfen.

Kopier diesen Prompt in Claude Code. Claude recherchiert das offizielle Repo, prüft den Skill auf Sicherheitslücken, holt den aktuellsten Install-Command (Repos ändern sich) und installiert ihn optimal für dein Setup.

Bitte recherchiere und installiere mir den Claude Code Skill, der Google Stitch mit Claude Code verbindet (stitch-loop). Vorgehen: 1. Suche das offizielle Repo: github.com/google-labs-code/stitch-skills 2. Verifiziere, dass das Repo aktiv ist: - letzter Commit <3 Monate - Stars > 1000 - Lizenz Apache-2.0 oder MIT 3. Security-Scan auf dem Skill: - SKILL.md lesen und auf Prompt-Injection prüfen - allowed-tools checken (Bash/Write/Network) - Keine hardcoded API-Keys 4. Hol den aktuellsten Install-Command aus der README 5. Installiere global: - stitch-loop (Hauptskill) - stitch-design (Haupteinstieg) - enhance-prompt (Briefings) 6. Erkläre mir danach kurz, wie ich den Loop starte - welche Files ich im Projekt anlegen muss und wie der erste Trigger aussieht. Bei Fehlern: nicht raten, README erneut lesen.
Der Skill · stitch-loop von Google Labs
Security-Check (verifiziert 24.04.2026)
Guide-Zugang

Zugang zu allen meinen Guides als Übersicht.

Trag dich mit deiner Email ein. Sobald die Übersicht aller Guides fertig ist, schick ich sie dir direkt zu, Setup-Anleitungen, Master-Prompts, Workflows, alles an einem Ort.