Communitygithub.com

KaimingWan/oh-my-kiro

Google Stitch Design-to-Code-Workflow mit Designsystem-Verwaltung. Wird ausgelöst, wenn der Nutzer Stitch, Design-to-Code, UI-Design, visuellen Vergleich, design.md, Designsystem, ShadCN-Konvertierung, Redesign anhand eines Screenshots erwähnt oder Designs aus Stitch in lokalen Code übernehmen möchte.

Was ist oh-my-kiro?

Diese Fähigkeit integriert Google Stitch nahtlos in den Entwicklungsprozess von KI-Agenten wie Claude Code, Cursor oder Codex. Sie ermöglicht es, das gesamte Designsystem eines Projekts in einer einzigen, agentenoptimierten `design.md`-Datei zu erfassen – mit Farben, Schriftarten, Themes und Komponentenstilen – und autonom daraus Code zu generieren. Der Skill unterstützt mehrere Workflows: Neugestaltung von Grund auf, Redesign anhand eines Referenz-Screenshots oder einer URL sowie die Konvertierung in ShadCN-Komponenten. Nach der Code-Generierung durchläuft der Skill eine mehrstufige Verifikationsphase (Multi-Viewport-Screenshots, Designsystem-Konsistenzprüfung, Pixel-Diff, KI-Slop-Erkennung und visueller KI-Vergleich), um eine pixelgenaue Übereinstimmung mit dem Design sicherzustellen. Die Authentifizierung erfolgt ausschließlich über OAuth; ein API-Key wird nicht unterstützt.

Funktioniert mit✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/KaimingWan/oh-my-kiro/tree/HEAD/skills/omk-stitch
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Trigger-Beispiele

  • "Hole meine Stitch-Designs in den Code"
  • "用 Stitch 做个落地页"
  • "把这个截图的风格用到我的网站上"
  • "Exportiere design.md aus meinem Stitch-Projekt"
  • "Konvertiere Stitch-Design in ShadCN-Komponenten"

Google Stitch Integrations-Skill

Kernkonzept: design.md

Das Designsystem von Stitch wird in einer design.md-Datei erfasst – Farben, Schriftarten, Themes, Komponentenstile. Diese Datei ist:

  • Agentenoptimiert – verwendet eine Sprache, die Agenten besser verstehen als rohes CSS
  • Übertragbar – gib sie Claude Code, Cursor oder einem anderen Agenten, und sie reproduzieren den Stil perfekt
  • Automatisch erstellt – Stitch generiert für jedes Projekt eine, auch wenn du nicht danach fragst

Standard-Workflow: Beginne immer mit der Erstellung einer design.md, baue dann Seiten darauf auf.

MCP-Server

Community-Paket: davideast/stitch-mcp npm: @_davideast/stitch-mcp

Einrichtung

Voraussetzungen

  • Google Cloud CLI (gcloud) installiert
  • Ein GCP-Projekt mit aktivierter Stitch-API

Authentifizierung (OAuth – API-Key wird NICHT unterstützt)

gcloud auth login
gcloud auth application-default login
gcloud config set project <DEIN_PROJEKT_ID>
gcloud auth application-default set-quota-project <DEIN_PROJEKT_ID>
gcloud beta services mcp enable stitch.googleapis.com --project=<DEIN_PROJEKT_ID>

MCP-Konfiguration

Füge zu deiner MCP-Client-Konfiguration hinzu (z. B. .kiro/settings/mcp.json):

{
  "stitch": {
    "command": "npx",
    "args": ["@_davideast/stitch-mcp", "proxy"],
    "env": {
      "STITCH_USE_SYSTEM_GCLOUD": "1",
      "GOOGLE_CLOUD_PROJECT": "<DEIN_PROJEKT_ID>"
    }
  }
}

KRITISCH: Es muss der proxy-Modus + STITCH_USE_SYSTEM_GCLOUD=1 verwendet werden. Der direkte serverUrl-Modus ist instabil.

Installation überprüfen

npx @_davideast/stitch-mcp doctor

Wenn doctor beim API-Test ein Timeout hat, direkt überprüfen:

ACCESS_TOKEN=$(gcloud auth application-default print-access-token)
curl -s -w "\nHTTP:%{http_code}" \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "x-goog-user-project: <DEIN_PROJEKT_ID>" \
  "https://stitch.googleapis.com/v1/projects"

MCP-Tools

ToolZweck
list_projectsAlle Stitch-Projekte auflisten
get_screen_codeHTML/CSS für einen Bildschirm abrufen
get_screen_imageBildschirm-Screenshot (base64) abrufen
build_siteBildschirme Routen zuordnen, Astro-Projekt generieren

CLI-Tools (nicht MCP)

npx @_davideast/stitch-mcp view --projects          # Projekte durchsuchen
npx @_davideast/stitch-mcp serve -p <projekt-id>    # Lokale Vorschau
npx @_davideast/stitch-mcp site -p <projekt-id>     # Astro-Site generieren

Workflows

Pfad A: Design von Grund auf (Standard)

  1. Designsystem etablieren – Erstelle oder stelle eine design.md in Stitch bereit (wird automatisch erstellt, falls nicht angegeben)
  2. Bildschirme generieren – Weise Stitch mit deinen Anforderungen an; es baut auf dem Designsystem auf
  3. Lokal abrufen – get_screen_code → HTML/CSS, get_screen_image → Screenshot
  4. Implementieren – In das Zielframework konvertieren (Next.js/Astro/React)
  5. Verifizieren – Visueller Vergleich (siehe Phase: Verifikation unten)

Pfad B: Redesign anhand einer Referenz

Verwende diesen Pfad, wenn du eine bestehende Site/einen Screenshot hast, dessen Stil du übernehmen (nicht kopieren) möchtest:

  1. Referenz erfassen – Ganzseitigen Screenshot der gewünschten Site (verwende GoFullPage oder ähnliches)
  2. In Stitch redesignen – Screenshot hochladen; Stitch extrahiert Designsprache, Komponentenmuster und Layout – und wendet sie auf DEINE Inhalte an
  3. Alternative: Import per URL – Im Stitch-Designsystem-Panel von einer beliebigen Website-URL importieren. Stitch durchsucht sie und extrahiert Typografie + Farben als design.md
  4. Verfeinern – Lade Wireframes hoch oder annotiere bestimmte Abschnitte, um Anpassungen vorzunehmen

Pfad C: Agentenintegrierter Build (Claude Code + Stitch)

Für autonome End-to-End-Builds mit Googles offiziellen Stitch-Skills:

  1. Verbesserter Prompt – Wandelt vage Benutzeranfragen in Stitch-optimierte Prompts um (Stitch verlässt sich auf Adjektive für die Stimmung, nicht auf exakte Beschreibungen)
  2. Stitch Loop – Autonome Build-Schleife mit Chrome DevTools, behält die Prompt-Nachverfolgung über Phasen hinweg bei
  3. React-Komponenten – Konvertiert Stitchs monolithischen HTML-Export in modulare React-Komponenten mit Validierung

Workflow-Reihenfolge in claude.md:

Verbesserter Prompt → Stitch Loop → React-Komponenten-Konvertierung

Erfordert eine verbundene Stitch-MCP. Siehe Googles Stitch-Skills-Repository für die Installation.

Pfad D: ShadCN UI Konvertierung

Reines React/HTML aus Stitch enthält keine Interaktionen. Verwende ShadCN für produktionsreife Komponenten:

  1. ShadCN MCP verbinden
  2. Googles ShadCN UI-Skill verwenden, um Stitch-Designs in ShadCN-Komponenten zu konvertieren
  3. Mit Registries erweitern (z. B. glassmorphism, motion-primitives) für ein hochwertiges Gefühl
  4. Registries in claude.md angeben, damit die Konvertierung automatisch erfolgt

Phase: Verifikation (inspiriert von gstack design-review)

Führe nach der Implementierung eine mehrschichtige Verifikation durch. Ziel: Fehler erkennen, die dem menschlichen Auge entgehen.

Schicht 1: Multi-Viewport-Screenshots

Erstelle Screenshots für 3 Viewport-Größen, um responsive Probleme zu erkennen:

npx playwright screenshot --viewport-size=375,812 http://localhost:3000 impl-mobile.png
npx playwright screenshot --viewport-size=768,1024 http://localhost:3000 impl-tablet.png
npx playwright screenshot --viewport-size=1440,900 http://localhost:3000 impl-desktop.png

Prüfe auf: Textüberlauf, Layout-Zusammenbruch, überlappende Elemente, fehlende Inhaltsanpassung.

Schicht 2: Designsystem-Konsistenzprüfung

Extrahiere tatsächlich gerenderte Werte aus der Implementierung und vergleiche sie mit der design.md:

# Extrahiere tatsächlich verwendete Schriftarten (in der Browser-Konsole oder Playwright ausführen)
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# Extrahiere verwendete Farbpalette
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).flatMap(e => [getComputedStyle(e).color, getComputedStyle(e).backgroundColor]).filter(c => c !== 'rgba(0, 0, 0, 0)'))])"

Vergleiche extrahierte Werte mit Tokens aus design.md. Markiere Abweichungen.

Schicht 3: Pixel-Diff vs. Design

npx pixelmatch design.png impl-desktop.png diff.png 0.1

Schicht 4: KI-Slop-Erkennung

Prüfe die Implementierung auf diese 10 KI-generierten Muster (aus gstacks Blacklist):

  1. Lila/violette Verlaufs-Hintergründe als Standard
  2. 3-spaltiges Feature-Raster mit Icon im Kreis + Titel + Beschreibung
  3. Icons in farbigen Kreisen als Abschnittsdekoration
  4. text-align: center auf allem
  5. Einheitlicher, blasenartiger border-radius auf allen Elementen
  6. Dekorative Kleckse, wellenförmige SVG-Trenner
  7. Emojis als Designelemente
  8. Farbige linke Rahmen auf Karten
  9. Generischer Hero-Text („Willkommen bei X", „Entfessle die Kraft von …")
  10. Standardisierter Abschnittsrhythmus (Hero → Features → Testimonials → Preise → CTA)

Wenn ≥3 Muster erkannt werden, markiere als „KI-Slop-Risiko" und schlage spezifische Korrekturen vor.

Schicht 5: KI-Visueller Vergleich

Füttere sowohl design.png als auch impl-desktop.png dem LLM zum Vergleich. Frage gezielt:

  • Stimmt die Hierarchie überein?
  • Werden die Abstandsproportionen eingehalten?
  • Fehlen Abschnitte oder Elemente?

Verfeinerungs-Schleife

Nach der Verifikation iterieren:

  1. Screenshots + Diff-Ergebnisse dem Benutzer zeigen
  2. Benutzer gibt Feedback
  3. Gezielte Änderungen vornehmen (keine vollständige Neugenerierung der Dateien)
  4. Erneut verifizieren
  5. Wiederholen, bis „fertig" (max. 10 Runden)

design.md-Tipps

  • Vorlage: Die agentenoptimierte Vorlage aus Googles offiziellem Skills-Repository beziehen
  • Übertragen: Gib design.md jedem Agenten (Claude Code, Cursor) für konsistentes Styling
  • Extrahieren: Googles „design MD skill" verwenden, um design.md aus bestehenden Stitch-Projekten zu extrahieren
  • Eigenes: Erstelle deine eigene design.md mit Farben/Schriftarten/Themes und füge sie in Stitchs Designsystem-Panel ein

Bekannte Probleme

  1. API-Key-Authentifizierung defekt – Die Stitch-API lehnt API-Schlüssel ab, OAuth ist erforderlich (bestätigt 2026-02 von der Community)
  2. doctor-Fetch-Timeout – Netzwerkabhängig; direkter curl-Test ist zuverlässiger
  3. Abrechnung nicht erforderlich – Die Stitch-API funktioniert mit Projekten ohne aktivierte Abrechnung
  4. Experimenteller Modus hat keinen Figma-Export – Nur der Standard-Modus unterstützt den Figma-Export

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community