Stack de diseño de Claude Code: balance después de 1 mes de rediseño

De dónde viene este balance

Este artículo se basa en un mes de uso de Claude Code en un proyecto real (rediseño gráfico del sitio The Claude Codex, abril-mayo de 2026). Los cuatro skills presentados no se probaron todos con la misma intensidad: Impeccable y Playwright MCP se usaron a diario, Taste Skill durante dos sprints, UI UX Pro Max y Huashu Design en sesiones puntuales de validación.

Esta gradación es deliberada. Una comparativa honesta vale más que un listado que pretende haberlo probado todo a fondo.

Lo que Claude Code produce sin ayuda

Antes de hablar de herramientas, hay que plantar el escenario. Esto es lo que produce Claude Code en front-end cuando no se le equipa:

• Lo bueno: código limpio, accesible en líneas generales, que compila y funciona. En lógica de interfaz (estados, formularios, navegación), es sólido.
• Lo mediocre: paletas planas, el azul Tailwind 500 por defecto, la tipografía Inter en todas partes, poca jerarquía tipográfica. Funcional pero genérico.
• Lo no tan bueno: el famoso "AI slop" visual. Degradado violeta-rosa, tres tarjetas alineadas, hero centrado intercambiable de un sitio a otro, animaciones ausentes. Se reconoce una página generada por IA a primera vista.

El problema no es que Claude programe mal. Es que un prompt vago produce un diseño vago. Un skill de diseño es como darle a Claude un manual de estilo antes de que empiece a dibujar. Sin manual, improvisa según sus hábitos. Con el manual, tiene reglas precisas: tal jerarquía tipográfica, tal paleta, tal espaciado. El resultado es sistemáticamente más coherente.

Los cuatro skills, en una frase cada uno

Impeccable

Enseña a Claude el vocabulario de un diseñador senior y aplica 23 comandos más reglas anti-patrones deterministas. Es la inversión más corta para el mayor salto de calidad. Ficha detallada de Impeccable.

UI UX Pro Max

Ofrece un catálogo: 67 estilos, 161 paletas alineadas por producto, 57 pares de tipografías, en 15 stacks. Ideal para partir de una página en blanco con una base coherente. Ficha detallada de UI UX Pro Max.

Taste Skill

Una familia de sub-skills por registro visual (minimalista, brutalista, image-to-code). La opción adecuada cuando alternas entre estilos muy diferentes. Ficha detallada de Taste Skill.

Huashu Design

Orientado a prototipos HTML nativos y presentaciones. Bajo licencia MIT desde el 2026-05-14 (el proyecto era antes de licencia comercial de pago, la licencia ya ha cambiado una vez: vuelve a verificarlo antes de un uso comercial). Ficha detallada de Huashu Design.

Por qué Playwright MCP es la pieza clave

Ninguno de estos skills ve el resultado que produce. Escriben código, punto. Ahí es donde entra Playwright MCP.

Playwright MCP es el espejo que le tiendes a Claude después de que ha vestido un componente. Sin espejo, Claude trabaja a ciegas. Con él, ve exactamente lo que renderiza el navegador en mobile y en desktop, y puede corregir lo que falla antes de que tú mismo abras el navegador.

El bucle skill de diseño + Playwright es el mismo proceso que un diseñador que dibuja una maqueta, la imprime, la pega en la pared, retrocede dos metros, ve el problema y lo corrige. Solo que el bucle dura 30 segundos en lugar de 30 minutos. El detalle del flujo de trabajo, paso a paso, será objeto de una página dedicada, "Diseñar con Claude Code + Playwright MCP".

Comparativa decisiva

Veredicto editorial bajo la tabla:

• Si partes de cero y quieres una sola herramienta: empieza por Impeccable. Rápido de instalar, efecto inmediato en la jerarquía y los anti-patrones.
• Si quieres una base visual sin pensar en la paleta: UI UX Pro Max, sobre todo en un stack no-React.
• Si cambias a menudo de registro visual: Taste Skill y sus sub-skills específicos.
• Si haces sobre todo prototipos o presentaciones: Huashu Design, ahora en MIT (la licencia ya ha cambiado una vez, tenlo en cuenta).

Lo que esta stack no hace

Para ser honestos, aquí están los límites reales:

• No sustituye a un diseñador. Los skills elevan el nivel base, no producen una dirección artística original en tu lugar.
• No garantiza un render pixel-perfect. Playwright muestra el render, pero la crítica sigue siendo humana o semiautomática.
• No cubre el diseño de producto (recorridos, wireframes UX previos). Es acabado y pulido, no investigación de usuarios.
• Los contadores de estrellas se mueven rápido y algunos se inflan. No elijas por el número de estrellas, elige por lo que la herramienta produce para ti.
• Los skills evolucionan al ritmo de unas pocas semanas. Un comando citado hoy puede cambiar de nombre. Verifica siempre el repo oficial.

Veredicto prescriptivo

Si hoy empiezas un proyecto front-end con Claude Code y nunca has instalado un skill de diseño: instala Impeccable y activa Playwright MCP. Es la pareja con mayor rendimiento. Añade UI UX Pro Max el día que empieces una interfaz completa desde cero, y Taste Skill el día que tengas que alternar entre varios estilos. Guarda Huashu Design para los prototipos: ha pasado a MIT, pero su licencia ya ha cambiado una vez, verifícala antes de cualquier uso comercial.

Próximos pasos

• Leer la ficha de Impeccable para empezar
• Comparar con la ficha de UI UX Pro Max y la ficha de Taste Skill
• Ver los skills imprescindibles 2026
• Entender Skills vs MCP vs Plugins
• Configurar los MCP incluido Playwright para validar tus renders