Habilidad de Claude Code Convierte Diseños de Stitch a Next.js con Cero Desviación de Píxeles

Qué hace esta herramienta

Una habilidad de Claude Code (comando de barra) convierte diseños de Google Stitch AI en componentes Next.js mientras previene la desviación de píxeles que típicamente ocurre al usar Claude para esta tarea. La herramienta aborda puntos problemáticos específicos donde Claude redondearía valores como text-[15px] a text-sm, intercambiaría colores exactos como #1E293B por clases aproximadas de Tailwind como bg-slate-800, perdería recursos de imagen debido a URLs de CDN expiradas, o omitiría fuentes.

Características y proceso clave

• Extrae HTML/CSS exacto de Stitch vía MCP - sin copiar-pegar o capturas de pantalla
• Preserva valores de píxel exactos en todo momento (text-[15px] permanece text-[15px], no redondeado a una clase de Tailwind)
• Descarga todas las imágenes del CDN de Stitch antes de que las URLs expiren
• Mapea las 29 fuentes de Stitch a next/font/google correctamente
• Incluye 5 puntos de verificación obligatorios que comparan la salida contra la fuente antes de continuar
• Genera un informe de auditoría completo mostrando exactamente qué se preservó y qué requirió decisiones de criterio
• Soporta mapeo de componentes ShadCN/UI con anulaciones de estilo exactas

Instalación y configuración

Instalar con: curl -sL https://raw.githubusercontent.com/yshaish1/stitch-to-nextjs/main/install.sh | bash

La instalación también configura automáticamente el servidor stitch-mcp.

Por qué son necesarios los puntos de verificación

Los puntos de verificación abordan la tendencia de Claude a desviarse hacia convenciones de Tailwind cuando se le deja a su propio criterio. El prompt de la habilidad marca explícitamente este patrón y fuerza la re-verificación en cada etapa. Aunque no es infalible, este enfoque detecta modos de falla comunes antes de que se acumulen.

La herramienta está disponible en GitHub: https://github.com/yshaish1/stitch-to-nextjs