Communitygithub.com

KaimingWan/oh-my-kiro

Flujo de trabajo de diseño a código con Google Stitch y gestión del sistema de diseño.

¿Qué es oh-my-kiro?

Esta habilidad integra Google Stitch en el flujo de trabajo de desarrollo, permitiendo a los agentes de IA (como Claude Code, Cursor, Codex) convertir diseños de Stitch directamente en código. Proporciona un conjunto completo de herramientas MCP para listar proyectos, obtener código HTML/CSS de pantallas, capturar capturas de pantalla y generar sitios Astro completos. El núcleo del sistema es el archivo `design.md`, un archivo de sistema de diseño optimizado para agentes que define colores, fuentes, temas y estilos de componentes de manera transferible. La habilidad soporta múltiples flujos de trabajo: diseño desde cero, rediseño a partir de referencias (capturas de pantalla o URLs), construcción autónoma con Claude Code, y conversión a componentes ShadCN UI. Incluye una fase de verificación de múltiples capas inspirada en gstack design-review, que realiza pruebas en varios viewports, verificación de consistencia del sistema de diseño, comparación de píxeles, detección de patrones genéricos de IA ('AI slop') y comparación visual asistida por IA.

Compatible con✓Claude Code~Codex CLI✓Cursor
Part ofDesign & UI
npx skills add https://github.com/KaimingWan/oh-my-kiro/tree/HEAD/skills/omk-stitch
Ver original→Ver todas las habilidades

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

Ejemplos de Disparo

  • "Trae mis diseños de Stitch a código"
  • "Crea una landing page con Stitch"
  • "Aplica el estilo de esta captura a mi sitio web"
  • "Exporta design.md de mi proyecto de Stitch"
  • "Convierte el diseño de Stitch a componentes ShadCN"

Habilidad de Integración con Google Stitch

Concepto Central: design.md

El sistema de diseño de Stitch se captura en un archivo design.md: colores, fuentes, temas, estilos de componentes. Este archivo es:

  • Optimizado para agentes — utiliza un lenguaje específico que los agentes entienden mejor que el CSS puro
  • Transferible — dáselo a Claude Code, Cursor o cualquier agente y reproducirán el estilo perfectamente
  • Creado automáticamente — Stitch genera uno para cada proyecto, incluso si no lo solicitas

Flujo de trabajo predeterminado: Siempre comienza estableciendo un design.md, luego construye páginas sobre él.

Servidor MCP

Paquete comunitario: davideast/stitch-mcp npm: @_davideast/stitch-mcp

Configuración

Requisitos previos

  • Google Cloud CLI (gcloud) instalado
  • Un proyecto de GCP con la API de Stitch habilitada

Autenticación (OAuth — NO se soporta clave de API)

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

Configuración de MCP

Agrega a la configuración de tu cliente MCP (ej. .kiro/settings/mcp.json):

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

CRÍTICO: Debes usar el modo proxy + STITCH_USE_SYSTEM_GCLOUD=1. El modo directo serverUrl es inestable.

Verificar Configuración

npx @_davideast/stitch-mcp doctor

Si doctor se agota en la prueba de API, verifica directamente:

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

Herramientas MCP

HerramientaPropósito
list_projectsLista todos los proyectos de Stitch
get_screen_codeObtiene el HTML/CSS de una pantalla
get_screen_imageObtiene la captura de pantalla (base64)
build_siteMapea pantallas a rutas, genera un proyecto Astro

Herramientas CLI (no MCP)

npx @_davideast/stitch-mcp view --projects          # Navegar proyectos
npx @_davideast/stitch-mcp serve -p <id-proyecto>   # Vista previa local
npx @_davideast/stitch-mcp site -p <id-proyecto>    # Generar sitio Astro

Flujos de Trabajo

Ruta A: Diseño desde Cero (Predeterminado)

  1. Establecer sistema de diseño — Crea o proporciona un design.md en Stitch (se crea automáticamente si no se especifica)
  2. Generar pantallas — Indica a Stitch tus requisitos; construye sobre el sistema de diseño
  3. Traer a local — get_screen_code → HTML/CSS, get_screen_image → captura de pantalla
  4. Implementar — Convertir al framework objetivo (Next.js/Astro/React)
  5. Verificar — Comparación visual (ver Fase: Verificación más abajo)

Ruta B: Rediseño a partir de Referencia

Úsala cuando tengas un sitio/captura existente cuyo estilo quieras adoptar (no copiar):

  1. Capturar referencia — Captura de pantalla completa del sitio que te gusta (usa GoFullPage o similar)
  2. Rediseñar en Stitch — Sube la captura; Stitch extrae el lenguaje de diseño, patrones de componentes y diseño — luego los aplica a TU contenido
  3. Alternativa: Importar por URL — En el panel del sistema de diseño de Stitch, importa desde cualquier URL de sitio web. Stitch la rastrea y extrae tipografía + colores como un design.md
  4. Refinar — Sube wireframes o anota secciones específicas para ajustar

Ruta C: Construcción Integrada con Agente (Claude Code + Stitch)

Para construcciones autónomas de extremo a extremo usando las habilidades oficiales de Stitch de Google:

  1. Prompt Mejorado — Convierte prompts de usuario vagos en prompts optimizados para Stitch (Stitch se basa en adjetivos para el estado de ánimo, no en descripciones exactas)
  2. Bucle Stitch — Bucle de construcción autónomo usando Chrome DevTools, mantiene el seguimiento del prompt a través de las etapas
  3. Componentes React — Convierte la exportación monolítica HTML de Stitch en componentes React modulares con validación

Orden del flujo de trabajo en claude.md:

Prompt Mejorado → Bucle Stitch → Conversión a Componente React

Requiere Stitch MCP conectado. Ver repositorio de habilidades Stitch de Google para instalación.

Ruta D: Conversión a ShadCN UI

El React/HTML básico de Stitch carece de interacciones. Usa ShadCN para componentes de calidad de producción:

  1. Conecta ShadCN MCP
  2. Usa la habilidad ShadCN UI de Google para convertir diseños de Stitch en componentes ShadCN
  3. Extiende con registros (ej. glassmorphism, motion-primitives) para una sensación premium
  4. Especifica los registros en claude.md para que la conversión sea automática

Fase: Verificación (inspirada en gstack design-review)

Después de la implementación, ejecuta una verificación de múltiples capas. El objetivo: detectar lo que el ojo humano pasa por alto.

Capa 1: Capturas de Pantalla en Múltiples Viewports

Toma capturas de pantalla en 3 puntos de interrupción para detectar problemas de responsividad:

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

Verifica: desbordamiento de texto, colapso del layout, elementos superpuestos, contenido que no se adapta.

Capa 2: Verificación de Consistencia del Sistema de Diseño

Extrae los valores reales renderizados de la implementación y compáralos con design.md:

# Extraer fuentes realmente usadas (ejecutar en consola del navegador o Playwright)
npx playwright evaluate http://localhost:3000 \
  "JSON.stringify([...new Set([...document.querySelectorAll('*')].slice(0,500).map(e => getComputedStyle(e).fontFamily))])"

# Extraer paleta de colores en uso
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)'))])"

Compara los valores extraídos con los tokens de design.md. Marca las desviaciones.

Capa 3: Diferencia de Píxeles vs Diseño

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

Capa 4: Detección de Patrones Genéricos de IA

Revisa la implementación en busca de estos 10 patrones generados por IA (de la lista negra de gstack):

  1. Fondos degradados púrpura/violeta como predeterminados
  2. Cuadrícula de características de 3 columnas con icono-en-círculo + título + descripción
  3. Iconos en círculos de colores como decoración de sección
  4. text-align: center en todo
  5. Border-radius uniforme y burbujeante en todos los elementos
  6. Manchas decorativas, divisores SVG ondulados
  7. Emojis como elementos de diseño
  8. Borde izquierdo coloreado en tarjetas
  9. Texto de héroe genérico ("Bienvenido a X", "Descubre el poder de...")
  10. Ritmo de sección repetitivo (héroe → características → testimonios → precios → CTA)

Si se detectan ≥3 patrones, márcalo como "riesgo de contenido genérico de IA" y sugiere correcciones específicas.

Capa 5: Diferencia Visual con IA

Alimenta tanto design.png como impl-desktop.png al LLM para comparación. Pregunta específicamente:

  • ¿Coincide la jerarquía?
  • ¿Se conservan las proporciones de espaciado?
  • ¿Faltan secciones o elementos?

Bucle de Refinamiento

Después de la verificación, itera:

  1. Muestra al usuario las capturas de pantalla + resultados de diferencias
  2. El usuario proporciona comentarios
  3. Aplica ediciones quirúrgicas (no regeneres archivos completos)
  4. Vuelve a verificar
  5. Repite hasta que esté "terminado" (máximo 10 rondas)

Consejos para design.md

  • Plantilla: Obtén la plantilla optimizada para agentes del repositorio oficial de habilidades de Google
  • Transferir: Entrega design.md a cualquier agente (Claude Code, Cursor) para un estilo consistente
  • Extraer: Usa la "habilidad design MD" de Google para extraer design.md de proyectos Stitch existentes
  • Personalizar: Crea tu propio design.md con colores/fuentes/temas, pégalo en el panel del sistema de diseño de Stitch

Problemas Conocidos

  1. Autenticación con clave de API rota — La API de Stitch rechaza claves de API, debe usar OAuth (confirmado 2026-02 por la comunidad)
  2. Tiempo de espera de doctor — Dependiente de la red; la prueba directa con curl es más fiable
  3. Facturación no requerida — La API de Stitch funciona en proyectos sin facturación habilitada
  4. Modo experimental sin exportación a Figma — Solo el modo Estándar soporta exportación a Figma

Skills relacionados

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