Dos skills para diseñar mejores interfaces con Claude Code: ui-ux-pro-max e impeccable

Claude Code escribe código sólido, pero cuando le pides una interfaz sin más contexto, casi siempre te devuelve lo mismo: fondo blanco, Inter, tarjetas dentro de tarjetas, un morado de gradiente y cero personalidad. No es culpa del modelo: es que todos se entrenaron con las mismas plantillas SaaS, así que "lo más probable" es justamente lo genérico.

La solución no es un prompt mágico, es darle al agente un skill que aporte criterio de diseño. Y hay dos, de la comunidad, que atacan el problema por lados complementarios.

1 · ui-ux-pro-max — el criterio de diseño

nextlevelbuilder/ui-ux-pro-max-skill es un skill de inteligencia de diseño. Su pieza estrella (v2) es un generador de design systems: analiza qué vas a construir y, en segundos, te propone estilo + paleta + tipografía + patrones adecuados al sector.

Detrás trae una base enorme y consultable: 79 estilos (glassmorphism, brutalism, bento, dark mode…), 192 paletas por tipo de producto, 74 pares de fuentes con su import de Google Fonts, 192 reglas por industria (SaaS, finanzas, salud, e-commerce…), 119 guías UX (anti-patrones, accesibilidad) y soporte para 22 stacks en total.

# opción marketplace
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

# opción CLI (recomendada)
npm install -g ui-ux-pro-max-cli
uipro init --ai claude          # añade --global para todos tus repos

python3 .claude/skills/ui-ux-pro-max/scripts/search.py \
  "fruit ecommerce" --design-system --persist -p "Frutería"

Comandos clave

2 · impeccable — el control de calidad

pbakaus/impeccable nace del skill oficial frontend-design de Anthropic y lo amplía con 23 comandos y 61 reglas deterministas de detección. Su tesis es la misma con la que abrimos: si todos los modelos vieron las mismas plantillas, hay que romper el patrón a propósito. Para eso guarda el contexto durable del producto en un PRODUCT.md (audiencia, propósito, voz) y añade un detector que combina reglas + crítica del modelo.

npx impeccable install                                # detecta ~/.claude solo
npx impeccable install --providers=claude --scope=project
npx impeccable update

/impeccable <comando> <objetivo>
/impeccable shape checkout
/impeccable audit tienda
/impeccable pin audit          # crea el atajo /audit

npx impeccable detect src/          # una carpeta
npx impeccable detect index.html    # un archivo
npx impeccable detect https://…     # un sitio desplegado
npx impeccable detect --json .      # salida JSON para el pipeline

Los 23 comandos, por fase

3 · Cómo se combinan: una frutería online

El orden natural es claro: ui-ux-pro-max define el sistema visual, Claude construye con esos tokens, e impeccable da forma, audita y pule. Así se ve el flujo completo aplicado a una tienda de frutas:

Paso a paso, lo que escribirías en la terminal:

1. Diseño — uipro init --ai claude, y luego: "tienda de frutas online, verde y fresca, con grid de productos y carrito". El skill fija el estilo Fresh / Organic, una paleta de verdes + cítricos, un par tipográfico y el patrón product grid + cart. Y aquí está la clave: ese estilo no sale al azar —el skill lo elige porque es una tienda de frutas—. Pídele una fintech y te dará azules sobrios y tipografía de confianza; una marca de lujo, y tendrás negros, serif y mucho aire. Esa conciencia de industria es justo lo que le falta a Claude cuando diseña sin contexto.
2. Construcción — Claude genera la tienda (React + Tailwind) usando esos tokens: hero, tarjetas de producto, carrito. No inventa colores ni fuentes: aplica el sistema.
3. Calidad — /impeccable shape checkout para la página crítica, luego craft, y antes de cerrar /impeccable critique (jerarquía, claridad) + /impeccable audit tienda (accesibilidad, responsive) + /impeccable polish. Como puerta final, npx impeccable detect src/ en el pre-commit o la CI.

El resultado es el que sale en el diagrama: una frutería que se ve intencional —con la identidad visual de su rubro, no la plantilla SaaS de siempre— y que además pasa los checks de calidad.

Cierre

Claude Code no diseña mal por incapacidad, sino por falta de contexto: sin criterio, tira a la media, y la media es genérica. Estos dos skills le devuelven ese contexto desde dos ángulos —gusto (ui-ux-pro-max) y control de calidad (impeccable)—, y encajan de forma natural en el mismo loop de siempre: diseñar, construir, auditar. Si trabajas UI con Claude Code, valen mucho la pena.

Fuentes