Cómo enseñar a los agentes de IA a construir interfaces pulidas

Si le has pedido a Cursor o Claude Code que construya un menú desplegable o un modal, probablemente hayas notado algo extraño. El código funciona, los botones hacen clic, pero todo se ve un poco torpe. Los elementos aparecen con un retraso absurdo, los bordes de las tarjetas se dibujan con líneas oscuras sólidas, y para una simple notificación toast, el modelo utiliza un paquete abandonado desde hace cinco años.

Los modelos de lenguaje son bastante buenos escribiendo lógica de componentes, pero no tienen sentido estético. Eligen los parámetros que aparecen primero en sus datos de entrenamiento. El resultado es ruido genérico de interfaz.

Emil Kowalski, quien anteriormente lideró animaciones e interfaces en Vercel y Linear, reunió el repositorio emilkowalski/skills. Es un conjunto de instrucciones listas para usar para agentes de IA que enseñan a las redes neuronales a construir diseños más pulidos.

Por qué los agentes necesitan reglas de diseño

¿Alguna vez has notado que la IA anima las apariciones de ventanas en momentos equivocados? Un error común es aplicar la función de easing ease-in para elementos que entran en la pantalla. En realidad, los elementos entrantes deben comenzar rápido y desacelerar al final (ease-out), de lo contrario la interfaz se siente lenta.

Lo mismo ocurre con los detalles del diseño. Las redes neuronales a menudo usan un borde sólido donde se necesita un box-shadow semitransparente, o reinventan soluciones en lugar de usar bibliotecas probadas.

Los pequeños errores se acumulan. El resultado es una UI que se ve barata. El conjunto de habilidades de Emil hace que la red neuronal verifique las reglas básicas de ingeniería de diseño antes de entregarte el código terminado.

Cómo instalar las instrucciones

La instalación utiliza la utilidad CLI skills:

npx skills@latest add emilkowalski/skills

Después de iniciar, tu agente de red neuronal obtiene acceso a una base de conocimientos sobre movimiento, proporciones y selección de herramientas frontend.

Qué hay dentro del repositorio

Dentro hay un conjunto de instrucciones en formato Markdown divididas por tarea.

Verificar y mejorar el movimiento

Las instrucciones review-animations y improve-animations hacen que el agente realice una auditoría de código estricta. El modelo busca funciones de easing perdidas, retrasos demasiado largos y transformaciones descuidadas. En lugar de correcciones aleatorias, el agente crea un plan de optimización paso a paso que luego ejecuta él mismo.

La regla find-animation-opportunities ayuda a encontrar lugares donde la animación es realmente necesaria y prohíbe explícitamente agregar movimiento donde solo estorbaría al usuario.

Diccionario y pautas de Apple

Para ayudar a la red neuronal a entender exactamente qué tipo de microinteracción necesitas, el animation-vocabulary es útil. Contiene términos precisos para describir animaciones.

Un archivo separado apple-design contiene principios de interfaz de Apple adaptados para la web de conferencias WWDC pasadas. Ayudan a recrear esa sensación de UI responsiva.

Selección de bibliotecas y prototipado

Si le pides a un modelo que construya un toast personalizado o un menú desplegable, o bien escribe cien líneas de código frágil o instala un paquete que lleva mucho tiempo sin soporte. La regla pick-ui-library obliga a la IA a usar solo soluciones probadas en las que los equipos de producto realmente confían.

Para experimentos rápidos, está el prototype. Esta habilidad genera varias variantes del mismo elemento de UI a la vez y agrega un interruptor encima para que puedas compararlos en vivo.

Para quién es esto

Si usas Cursor, Claude Code, Windsurf o agentes CLI similares para trabajo frontend diariamente, este repositorio te ahorrará mucho tiempo en correcciones manuales de CSS. Ya no tendrás que cambiar manualmente ease-in a cubic-bezier y explicarle al modelo por qué un borde sólido se ve mal en modo oscuro.