Emil Kowalski - Incorporar criterios de diseño y experiencia de usuario a herramientas de programación con IA

Cómo usar Emil Kowalski Skills con un AI Coding Agent
9 de agosto de 2026 por
Emil Kowalski - Incorporar criterios de diseño y experiencia de usuario a herramientas de programación con IA
Ramón Jiménez

¿Qué es Emil Kowalski Skill?

Emil Kowalski Skills es una colección de Agent Skills que permite incorporar criterios de diseño y experiencia de usuario a herramientas de programación con IA.

No es una librería de UI ni un framework.

Su función es darle al agente conocimiento especializado para tomar mejores decisiones de diseño, especialmente en:

  • Animaciones.
  • Microinteracciones.
  • Transiciones.
  • Motion design.
  • UI/UX.
  • Revisión y mejora de interfaces.

En términos simples:

El agente ya sabe programar; el Skill le ayuda a tener mejor criterio sobre cómo debe sentirse la interfaz.

1. Instala los Skills

Desde la terminal de tu proyecto ejecuta:

npx skills add emilkowalski/skills

Puedes consultar la colección oficial en:

https://emilkowal.ski/skill

2. Úsalo en un proyecto nuevo

No empieces diciendo simplemente:

Crea mi dashboard.

Primero proporciona contexto y pídele al agente que analice el diseño.

Por ejemplo:

Estoy creando un dashboard para administrar clientes.

Utiliza los Skills de Emil Kowalski.

Antes de escribir código:

1. Propón la estructura de la interfaz.
2. Define los componentes principales.
3. Identifica las interacciones importantes.
4. Indica dónde tendría sentido utilizar animaciones.
5. Indica dónde NO debería utilizarse motion.

No escribas código todavía.
Primero genera la propuesta.

¿Por qué hacerlo así?

Porque queremos que el agente primero piense y tome decisiones, y después programe.

El flujo recomendado es:

Contexto
   ↓
Análisis
   ↓
Decisiones de diseño
   ↓
Implementación

3. Úsalo en un proyecto existente

Si ya tienes una aplicación, no le pidas inmediatamente que cambie todo.

Primero haz una auditoría:

Analiza este proyecto utilizando los Skills
de Emil Kowalski.

No modifiques código todavía.

Revisa:

- diseño de la interfaz;
- animaciones;
- transiciones;
- microinteracciones;
- estados de los componentes;
- consistencia visual;
- oportunidades de mejora.

Genera un reporte y prioriza
los cambios más importantes.

El agente debería identificar qué está bien, qué está mal y qué merece ser mejorado.

4. Mejora una animación específica

Si ya tienes una interfaz funcionando, puedes pedir:

Utiliza el Skill de Emil Kowalski
para revisar las animaciones de esta pantalla.

Identifica:

- duración incorrecta;
- easing incorrecto;
- movimientos innecesarios;
- escalas exageradas;
- transiciones que puedan mejorar.

Primero explica los problemas.
Después propón las correcciones.

Después puedes pedirle que implemente únicamente las mejoras aprobadas.

5. No animes todo

Una de las ideas más importantes del enfoque de Emil es que no todas las cosas necesitan animación.

Una buena interfaz no es aquella que tiene más movimiento.

Es aquella donde el movimiento tiene un propósito.

Por ejemplo:

Tiene sentido

Botón
↓
Feedback al hacer click
Modal
↓
Entrada / salida
Dropdown
↓
Apertura / cierre

Probablemente no tiene sentido

Texto
↓
Animación permanente
Cada elemento
↓
Bounce
Todo el dashboard
↓
Movimiento constante

La pregunta no debería ser:

"¿Dónde puedo poner una animación?"

Sino:

"¿Dónde una animación mejora la experiencia?"

6. Utiliza el Skill como revisor

Una de las mejores formas de utilizarlo es después de construir una funcionalidad.

Por ejemplo:

La funcionalidad ya está implementada.

Utiliza los Skills de Emil Kowalski
para hacer una revisión de UI/UX.

No cambies la lógica de negocio.

Identifica los 5 principales problemas
de diseño o interacción y explica
cómo los solucionarías.

Esto crea un ciclo de trabajo:

Construir
   ↓
Revisar
   ↓
Mejorar
   ↓
Revisar nuevamente

8. La idea clave

Emil Kowalski Skills no busca reemplazar al desarrollador.

Busca transferir conocimiento y criterio al agente.

La diferencia es:

Sin Skill

"Construye una animación."

        ↓

El agente decide.

Con Skill:

Con Skill

"Construye una animación."

        ↓

El agente utiliza
criterios de diseño.

        ↓

Mejor decisión.

Por eso este concepto es especialmente interesante para trabajar con AI Coding Agents.

Puedes convertir:

experiencia → reglas → Skill → agente → decisiones consistentes.

Flujo recomendado

Para resumir todo el proceso:

1. Instalar Skills
       ↓
2. Proporcionar contexto
       ↓
3. Analizar
       ↓
4. Diseñar
       ↓
5. Implementar
       ↓
6. Revisar
       ↓
7. Mejorar

Recursos

Skills de Emil Kowalski

https://emilkowal.ski/skill

Repositorio

https://github.com/emilkowalski/skills

En resumen

Si utilizas Claude Code, Codex, Cursor u otro AI Coding Agent, piensa en un Skill como una capa de conocimiento especializado.

El agente aporta la capacidad de programar.

El Skill aporta criterios para decidir mejor.

Y ese cambio es importante:

No se trata solamente de conseguir que la IA escriba código más rápido, sino de conseguir que tome mejores decisiones mientras lo escribe.