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
📖 Leer la fuente completa: r/ClaudeAI
👀 Ver también
NGX-OS: Sistema Operativo de Red Construido para IA con Integración eBPF y MCP
NGX-OS es un sistema operativo de red diseñado desde cero para la integración con IA, utilizando eBPF para telemetría en tiempo real y MCP para acceso directo de LLM a los datos de estado de la red sin capas de traducción.
El complemento OpenClaw agrega memoria persistente con el servidor Engram.
Un desarrollador creó un complemento de TypeScript que conecta agentes OpenClaw con Engram, un servidor de memoria basado en Go que utiliza SQLite con búsqueda FTS5. El complemento proporciona 11 herramientas, 4 ganchos de ciclo de vida y una recuperación automática que inyecta recuerdos relevantes en los prompts antes de cada turno del agente.
Matriz LLM: Comparaciones de Modelos Votados por la Comunidad Construida con Claude Code
Un científico de datos creó llm-matrix.vercel.app para comparar puntuaciones de LLM en múltiples dimensiones simultáneamente, con votos de la comunidad que moldean las clasificaciones. El sitio fue desarrollado completamente usando Claude Code con dos complementos específicos.
Claude Code v2.1.142: Nuevas banderas de agentes Claude, Opus 4.7 por defecto y correcciones de errores
Claude Code v2.1.142 añade ocho nuevas opciones para configurar sesiones en segundo plano, cambia el modo rápido a Opus 4.7 por defecto y corrige más de una docena de errores, incluido el tiempo de espera de la herramienta MCP, problemas del daemon de suspensión/activación en macOS y bloqueos en unidades de red de Windows.