Communitygithub.com

KaimingWan/oh-my-kiro

Flux de travail de conception vers code avec Google Stitch, intégrant la gestion du design system. Déclenché lorsque l'utilisateur mentionne Stitch, design-to-code, UI design, comparaison visuelle, design.md, design system, conversion ShadCN, refonte à partir d'une capture d'écran, ou souhaite importer des designs Stitch dans du code local.

Qu'est-ce que oh-my-kiro ?

Cette compétence agit comme un pont complet entre les designs Google Stitch et le code, avec une gestion robuste du design system via un fichier `design.md`. Elle prend en charge plusieurs workflows : création de design de zéro, refonte à partir d'une capture d'écran de référence, construction autonome avec Claude Code via une boucle Stitch, et conversion des designs en composants ShadCN UI. La compétence inclut une phase de vérification multi-couche (captures multi-viewports, vérification de cohérence du design system, diff pixel, détection de motifs générés par IA, et diff visuel par LLM) avec une boucle de raffinement itérative. L'outil MCP de Stitch (package `@_davideast/stitch-mcp`) en mode proxy avec OAuth est requis pour l'authentification, et la compétence est conçue pour fonctionner avec Claude Code, Cursor, ou tout agent supportant MCP.

Compatible avec✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/KaimingWan/oh-my-kiro/tree/HEAD/skills/omk-stitch
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Exemples de déclencheur

  • « Importe mes designs Stitch en code »
  • « 用 Stitch 做个落地页 »
  • « Applique le style de cette capture à mon site »
  • « Exporte le design.md de mon projet Stitch »
  • « Convertit le design Stitch en composants ShadCN »

Compétence d'intégration Google Stitch

Concept central : design.md

Le design system de Stitch est capturé dans un fichier design.md — couleurs, polices, thèmes, styles de composants. Ce fichier est :

  • Optimisé pour les agents — utilise un langage ciblé que les agents comprennent mieux que le CSS brut
  • Transférable — donnez-le à Claude Code, Cursor ou tout autre agent et ils reproduisent le style parfaitement
  • Créé automatiquement — Stitch en génère un pour chaque projet, même si vous ne le demandez pas

Workflow par défaut : commencez toujours par établir un design.md, puis construisez les pages par-dessus.

Serveur MCP

Paquet communautaire : davideast/stitch-mcp npm : @_davideast/stitch-mcp

Configuration

Prérequis

  • Google Cloud CLI (gcloud) installé
  • Un projet GCP avec l'API Stitch activée

Authentification (OAuth — la clé API n'est PAS prise en charge)

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

Configuration MCP

Ajoutez à votre configuration client MCP (par ex. .kiro/settings/mcp.json) :

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

CRITIQUE : Utilisez obligatoirement le mode proxy + STITCH_USE_SYSTEM_GCLOUD=1. Le mode direct serverUrl est instable.

Vérifier la configuration

npx @_davideast/stitch-mcp doctor

Si doctor expire lors du test API, vérifiez directement :

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: <VOTRE_ID_PROJET>" \
  "https://stitch.googleapis.com/v1/projects"

Outils MCP

OutilObjectif
list_projectsLister tous les projets Stitch
get_screen_codeObtenir le HTML/CSS d'un écran
get_screen_imageObtenir une capture d'écran (base64)
build_siteMapper les écrans vers des routes, générer un projet Astro

Outils CLI (non MCP)

npx @_davideast/stitch-mcp view --projects          # Parcourir les projets
npx @_davideast/stitch-mcp serve -p <project-id>    # Aperçu local
npx @_davideast/stitch-mcp site -p <project-id>     # Générer un site Astro

Workflows

Chemin A : Design from Scratch (Par défaut)

  1. Établir le design system — Créez ou fournissez un design.md dans Stitch (créé automatiquement si non spécifié)
  2. Générer les écrans — Sollicitez Stitch avec vos besoins ; il s'appuie sur le design system
  3. Importer en local — get_screen_code → HTML/CSS, get_screen_image → capture d'écran
  4. Implémenter — Convertir vers le framework cible (Next.js/Astro/React)
  5. Vérifier — Comparaison visuelle (voir Phase : Vérification ci-dessous)

Chemin B : Refonte à partir d'une référence

À utiliser lorsque vous avez un site existant / une capture d'écran dont vous souhaitez adopter le style (pas copier) :

  1. Capturer la référence — Capture plein écran du site que vous aimez (utilisez GoFullPage ou similaire)
  2. Refonte dans Stitch — Téléchargez la capture ; Stitch extrait le langage de design, les motifs de composants et la mise en page — puis les applique à VOTRE contenu
  3. Alternative : import par URL — Dans le panneau du design system de Stitch, importez depuis n'importe quelle URL de site web. Stitch l'explore et extrait la typographie + couleurs en tant que design.md
  4. Affiner — Téléchargez des wireframes ou annotez des sections spécifiques pour ajuster

Chemin C : Construction intégrée à un agent (Claude Code + Stitch)

Pour des constructions autonomes de bout en bout utilisant les compétences officielles Stitch de Google :

  1. Prompt amélioré — Convertit les invites vagues des utilisateurs en invites optimisées pour Stitch (Stitch s'appuie sur des adjectifs pour l'ambiance, pas sur des descriptions exactes)
  2. Boucle Stitch — Boucle de construction autonome utilisant Chrome DevTools, maintient le suivi des invites à travers les étapes
  3. Composants React — Convertit l'export HTML monolithique de Stitch en composants React modulaires avec validation

Ordre du workflow dans claude.md :

Prompt amélioré → Boucle Stitch → Conversion en composants React

Nécessite que le MCP Stitch soit connecté. Voir le dépôt de compétences Stitch de Google pour l'installation.

Chemin D : Conversion ShadCN UI

Le React/HTML brut de Stitch manque d'interactions. Utilisez ShadCN pour des composants de qualité production :

  1. Connectez le MCP ShadCN
  2. Utilisez la compétence ShadCN UI de Google pour convertir les designs Stitch en composants ShadCN
  3. Étendez avec des registries (ex. glassmorphism, motion-primitives) pour un rendu premium
  4. Spécifiez les registries dans claude.md pour que la conversion soit automatique

Phase : Vérification (inspirée de gstack design-review)

Après l'implémentation, exécutez une vérification multicouche. L'objectif : détecter ce que l'œil humain manque.

Couche 1 : Captures multi-viewports

Prenez des captures à 3 points de rupture pour détecter les problèmes de responsive :

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

Vérifiez : débordement de texte, effondrement de mise en page, chevauchement d'éléments, contenu non adaptatif.

Couche 2 : Vérification de cohérence du design system

Extrayez les valeurs réellement rendues de l'implémentation et comparez-les avec design.md :

# Extraire les polices réellement utilisées (exécuter dans la console navigateur ou Playwright)
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# Extraire la palette de couleurs utilisée
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)'))])"

Comparez les valeurs extraites avec les tokens de design.md. Signalez les écarts.

Couche 3 : Diff pixel vs Design

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

Couche 4 : Détection de motifs générés par IA

Vérifiez l'implémentation pour ces 10 motifs générés par IA (liste noire de gstack) :

  1. Arrière-plans de dégradé violet / magenta par défaut
  2. Grille de fonctionnalités à 3 colonnes avec icône dans un cercle + titre + description
  3. Icônes dans des cercles colorés comme décoration de section
  4. text-align: center sur tout
  5. Rayon de bordure uniforme et bombé sur tous les éléments
  6. Blobs décoratifs, séparateurs SVG ondulés
  7. Émojis comme éléments de design
  8. Bordure gauche colorée sur les cartes
  9. Copie de héros générique ("Bienvenue sur X", "Débloquez la puissance de...")
  10. Rythme de sections au moule (héros → fonctionnalités → témoignages → tarifs → CTA)

Si ≥3 motifs détectés, signalez comme "risque de contenu généré par IA" et suggérez des correctifs spécifiques.

Couche 5 : Diff visuel par IA

Fournissez à la fois design.png et impl-desktop.png au LLM pour comparaison. Demandez spécifiquement :

  • La hiérarchie correspond-elle ?
  • Les proportions d'espacement sont-elles conservées ?
  • Y a-t-il des sections ou éléments manquants ?

Boucle de raffinement

Après vérification, itérez :

  1. Montrez à l'utilisateur les captures + résultats des diffs
  2. L'utilisateur fournit des retours
  3. Appliquez des modifications chirurgicales (ne régénérez pas l'intégralité des fichiers)
  4. Re-vérifiez
  5. Répétez jusqu'à ce que "terminé" (max 10 cycles)

Astuces design.md

  • Modèle : Obtenez le modèle optimisé pour l'agent depuis le dépôt officiel de compétences de Google
  • Transfert : Donnez design.md à n'importe quel agent (Claude Code, Cursor) pour un style cohérent
  • Extraction : Utilisez la "compétence design MD" de Google pour extraire design.md de projets Stitch existants
  • Personnalisé : Créez votre propre design.md avec couleurs/polices/thèmes, collez-le dans le panneau du design system de Stitch

Problèmes connus

  1. Authentification par clé API cassée — L'API Stitch rejette les clés API, doit utiliser OAuth (confirmé 2026-02 par la communauté)
  2. Expiration de fetch doctor — Dépend du réseau ; le test curl direct est plus fiable
  3. Facturation non requise — L'API Stitch fonctionne sur des projets sans facturation activée
  4. Pas d'export Figma en mode expérimental — Seul le mode Standard prend en charge l'export Figma

Skills associés

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