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

Loop, pixel-perfect, 0 AI-Slop.

Ich baue gerade eine Community für alle, die alles über Claude Code lernen wollen. Trag dich ein für Early Access.

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
SKAILE Community · Early Access

Ich baue gerade eine Community für alle, die alles über Claude Code lernen wollen. Workshops, Q&A, alle Guides an einem Ort. Trag dich ein für Early Access.

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)
Community · Early Access

Werde Teil der SKAILE Community.

Ich baue gerade eine Community für alle, die alles über Claude Code lernen wollen. Workshops, Q&A, alle Guides an einem Ort. Trag dich ein für Early Access.