Que Claude diseñe bien tu página

Si le pides a Claude «mejora mi diseño» y te devuelve algo morado con degradados y tarjetas redondas, no es que no sepa: es que no le diste con qué trabajar. Estos son los tres ingredientes que le doy antes de diseñar cualquier página de un cliente.

El problema

Por qué todas las páginas de IA se parecen

Cuando la instrucción es vaga («que se vea bonito»), Claude elige lo más común que ha visto: degradados, sombras y tarjetas con emoji. Es un diseño «promedio». La solución no es pedirle más fuerte, es darle tres cosas concretas.

1Skills de diseño y animación: reglas claras de cómo se hace bien.

2Referencias: ejemplos reales de lo que quieres lograr.

3Un archivo de estilo del cliente: colores, letras y tono, por escrito.

Paso a paso

Los tres ingredientes

Instala las skills de diseño y animación

Emil Kowalski, diseñador e ingeniero, publicó en GitHub un paquete de 15 skills para agentes como Claude Code. Incluye, entre otras, animate (crea animaciones eligiendo curva y duración), apple-design (principios de interfaz y movimiento fluido de Apple, adaptados a la web), review-animations (revisa tus animaciones con reglas estrictas) y animation-performance (arregla animaciones que se traban).

Se instala con un comando, dentro de la carpeta de tu proyecto:

npx skills@latest add emilkowalski/skills

Antes de instalar cualquier skill de terceros, revisa el repositorio: son instrucciones que tu agente va a seguir.

Reúne referencias (de 3 a 6)

Páginas que te gustan, capturas de pantalla, animaciones que quieres copiar en espíritu. Guárdalas en una carpeta del proyecto y descríbele a Claude qué te gusta de cada una: «el espacio entre secciones de esta», «la animación del botón de aquella». Cuanto más concreto, menos adivina.

Escribe el archivo de estilo del cliente

Un archivo corto (por ejemplo DESIGN.md) con las decisiones de diseño del cliente. Claude lo lee antes de tocar nada y mantiene el mismo estilo en todas las páginas. Ejemplo:

# Spa Aurora · estilo

colores:
  crema      #f4efe6
  terracota  #c2552d
tipografía:
  títulos  serif
  texto    sans
tono: calmado, cercano
animación: 200 ms, ease-out, nada que rebote

Pide el análisis antes del cambio

Con los tres ingredientes listos, pídele que primero mire y proponga, y que no cambie nada hasta que tú confirmes. Así ves los problemas antes de que toque el código.

Revisa tú el resultado

Ábrelo en el celular, mira el contraste del botón principal y fíjate en que las animaciones sean rápidas (alrededor de 200 ms) y no distraigan. Si algo no te gusta, dilo en palabras concretas: «el título pesa demasiado», «el botón se mueve muy lento».

Para copiar

Un prompt para empezar

Pégalo en Claude Code dentro del proyecto, con las skills instaladas y tus referencias y tu archivo de estilo ya en la carpeta.

Lee DESIGN.md y las imágenes de la carpeta referencias/.

Analiza mi página con la skill apple-design y dime, antes de cambiar nada:
1. Qué problemas de diseño y de animación ves (contraste, jerarquía, movimiento).
2. Qué tomarías de cada referencia y por qué.
3. Un plan de cambios ordenado de mayor a menor impacto.

No modifiques archivos hasta que yo confirme el plan.

Ahórrate dolores

Lo que aprendimos

Sin referencias, adivina. «Que se vea bonito» le da libertad total y vuelve a lo común. Mostrarle ejemplos cambia el resultado más que cualquier otra cosa.

El estilo por escrito se reutiliza. El archivo del cliente te sirve para la siguiente página y para el siguiente proyecto, sin volver a explicar.

Skills de terceros: tú decides. Son instrucciones de otra persona. Léelas, instálalas solo si te convencen y, si trabajas con datos de clientes, revisa qué hacen antes de usarlas.

Contenido educativo. Las skills mencionadas son de su autor y no tenemos relación con él. Los resultados dependen de tu proyecto y tus referencias.

También: cómo está hecho este video