Una interfaz que no parece de IA

01 · SkillUI — darle la referencia

Es lo primero, porque todo lo demás depende de que sepa a qué se tiene que parecer. Le pasas una dirección, una carpeta tuya o un repositorio y desmonta su sistema de diseño —colores, tipografías, espaciados, radios, componentes, animaciones— en ficheros que Claude lee solo: SKILL.md, CLAUDE.md, DESIGN.md y los de componentes y animaciones. Deja de describirle el estilo con palabras.

npm install -g skillui
skillui --url https://[la web que te gusta] --mode ultra

# abre esa carpeta con Claude Code y pídele:
Lee SKILL.md y DESIGN.md antes de escribir nada.
Monta [la pantalla que quieras] usando ESOS tokens: sus colores, sus
tipografías y sus espaciados, no los tuyos por defecto.
Si algo no está en el sistema, dímelo en vez de inventártelo.

02 · UI/UX Pro Max — que decida el sistema

Un muestrario grande al que pregunta antes de decidir nada: 84 estilos, 192 paletas, 74 parejas de tipografías y 98 reglas de uso, con los errores típicos de cada tipo de producto. Le dices qué estás construyendo y te devuelve el sistema entero razonado. Tiene tres ruedas: --variance para lo atrevido, --motion para el movimiento y --density para el aire.

npx skills add nextlevelbuilder/ui-ux-pro-max-skill \
  --skill ui-ux-pro-max --agent claude-code

# y dentro de Claude Code:
--design-system -p "[lo que estás construyendo: un panel, una tienda,
una app móvil]" --variance 7 --persist

Explícame en una línea por qué has elegido esa paleta y esa pareja de
tipografías, y dime qué anti-patrón estás evitando con cada decisión.

03 · Impeccable — el criterio y la revisión

Le instala un vocabulario de diseño entero y 59 reglas que cazan solas los vicios de siempre: tipografías gastadas, texto gris sobre color, negros puros, tarjetas metidas dentro de tarjetas. Son 23 órdenes, todas con la misma palabra. Se instala copiando su carpeta .claude dentro de tu proyecto, o en ~/.claude/ si la quieres en todos.

git clone https://github.com/pbakaus/impeccable
cp -r impeccable/dist/claude-code/.claude/* ~/.claude/

# el orden que funciona, dentro de Claude Code:
/impeccable critique   → que te diga qué está mal y por qué
/impeccable audit      → pasa las reglas por todo el proyecto
/impeccable polish     → que lo arregle sin rehacerlo
/impeccable bolder     → si te sigue pareciendo tímido

04 · Playwright — que lo mire con sus ojos

Hasta aquí escribe a ciegas. Con esto abre tu aplicación en un navegador de verdad, navega, hace clic, rellena formularios y ve qué falla antes que tú. No mira píxeles: lee el árbol de accesibilidad de la página, que es lo que entiende de verdad. Es una sola línea, una sola vez.

claude mcp add playwright npx @playwright/mcp@latest

# y ya se lo pides con palabras:
Abre [localhost:3000], entra en [la pantalla que acabas de tocar],
rellena el formulario con datos falsos y envíalo.
Dime qué se ve mal, qué peticiones fallan y qué texto se sale de su caja.
Hazme una captura de cada paso y arregla solo lo que hayas visto romperse.

05 · El orden, que es media batalla

Las cuatro no van sueltas: van una detrás de otra. Referencia, sistema, revisión y prueba. Al revés no sirve de nada — pulir una pantalla que todavía no sabe a qué se parece es pintar sobre gris. Este es el encargo que las encadena en una sola sesión, cuando ya las tienes instaladas:

Vamos a rehacer [la pantalla] en cuatro pasos y me paras en cada uno.

1. Lee el sistema de diseño extraído y dime en tres líneas de qué va.
2. Propón el sistema para [lo que construyo] y espera a que lo apruebe.
3. Monta la pantalla y pásale critique. Enséñame lo que ha salido mal.
4. Ábrela en el navegador, pruébala y arregla solo lo que se rompa.

No pases de paso sin enseñarme el resultado del anterior.