La utilidad ai-design-check redujo de 266 a 0 los avisos de diseño de un dashboard con sus 70 reglas

Las interfaces que dibujan los agentes de IA para programar suelen reconocerse a primera vista: botones con degradado, emojis en lugar de iconos, el saludo «Welcome back, Alex! 👋» y tamaños de fuente aleatorios. El equipo de Enmera Software ha lanzado ai-design-check, una herramienta open source que localiza esos puntos, los corrige y confirma el resultado con una nueva comprobación. Según los autores, en un dashboard de demostración el número de avisos bajó de 266 a 0.

La herramienta se ejecuta con un solo comando: `npx @enmera/ai-design-check`. El paquete no tiene dependencias.

En qué consiste el conjunto

La primera parte es una biblioteca de 70 reglas de diseño. Cada regla describe qué se comprueba exactamente, por qué importa y cómo corregir la infracción.

La segunda parte es el verificador propiamente dicho. Funciona sin IA y sin clave de API: es una comprobación determinista que marca cada infracción. Entre los ejemplos del anuncio figuran:

• márgenes que no encajan en la cuadrícula de 4 px;
• tamaños de fuente fuera de la escala definida;
• botones con degradado;
• emojis que hacen de iconos;
• un titular del tipo «Welcome back, Alex! 👋»;
• un anillo de foco eliminado de forma inadvertida, lo que rompe la navegación con teclado.

La tercera parte es una skill para agentes. Corrige la pantalla en varias pasadas y, tras cada una, vuelve a ejecutar el verificador. Se instala para Claude Code, Cursor y Codex con `npx skills add enmerasoftware/ai-design-check`, y después basta con escribirle al agente «fix the design of this screen». La cuarta parte genera con un solo comando un vídeo de «antes/después»; el del anuncio se hizo precisamente así.

Se declara compatibilidad con React, Next.js, Vue, Svelte, Blade y HTML plano.

De dónde salieron las reglas

Antes del lanzamiento, los autores compararon sus reglas con 16 dashboards muy bien valorados de Dribbble y Behance. Lo que tienen en común los mejores trabajos se convirtió en comprobaciones:

• las tarjetas de métricas se leen en el orden «etiqueta → valor → variación»;
• todas las tarjetas siguen la misma plantilla de encabezado;
• en el gráfico se resalta una sola serie de datos;
• los botones son planos;
• las superficies se separan por el fondo, no por sombras pesadas.

Hay también una observación curiosa: aproximadamente la mitad de los trabajos populares empieza con la línea «Welcome back 👋». Los autores mantuvieron de todos modos la regla en contra. Su argumento: el titular es la línea más valiosa de una pantalla que el usuario abre cada día, y gastarla en un saludo es un derroche.

Qué conviene tener en cuenta

La cifra «266 → 0» describe el cumplimiento de un conjunto de reglas en un único dashboard, y además de demostración. No demuestra que la interfaz haya mejorado de forma objetiva, y el anuncio no incluye verificaciones independientes en proyectos ajenos. La muestra de 16 referencias es pequeña y se compone de trabajos de plataformas de portafolio, que con frecuencia están optimizados para lucir bien en una imagen y no para el uso diario de un producto. Las reglas resultan restrictivas en cuestión de gusto: algunos equipos querrán degradados u otras escalas tipográficas, así que el conjunto habrá que ajustarlo.

Aun así, el enfoque es razonable: un verificador determinista es barato y reproducible, y el agente recibe un objetivo medible en lugar de una petición vaga de «hazlo más bonito». Para los equipos en los que Claude Code, Cursor o Codex escriben cada vez más interfaces, es una forma rápida de introducir una disciplina mínima en el maquetado. Se puede probar en una pantalla propia en un minuto y decidir después cuáles de las 70 reglas conservar.