L'outil ai-design-check et ses 70 règles ramènent de 266 à 0 les remarques de design sur un tableau de bord

Les interfaces dessinées par les agents IA de code se reconnaissent souvent au premier coup d'œil : boutons à dégradé, emojis à la place des icônes, message d'accueil « Welcome back, Alex! 👋 » et tailles de police aléatoires. L'équipe d'Enmera Software a publié ai-design-check, un outil open source qui repère ces défauts, les corrige et confirme le résultat par une nouvelle vérification. Selon les auteurs, le nombre de remarques est passé de 266 à 0 sur un tableau de bord de démonstration.

L'outil se lance en une seule commande : `npx @enmera/ai-design-check`. Le paquet n'a aucune dépendance.

Les composants de l'ensemble

La première partie est une bibliothèque de 70 règles de design. Chaque règle précise ce qui est vérifié, pourquoi c'est important et comment corriger l'infraction.

La deuxième partie est le vérificateur proprement dit. Il fonctionne sans IA et sans clé API : il s'agit d'un contrôle déterministe qui signale chaque infraction. Parmi les exemples cités dans l'annonce :

• marges qui ne tombent pas sur la grille de 4 px ;
• tailles de police hors de l'échelle définie ;
• boutons à dégradé ;
• emojis utilisés comme icônes ;
• titre du type « Welcome back, Alex! 👋 » ;
• anneau de focus supprimé discrètement, ce qui casse la navigation au clavier.

La troisième partie est un skill pour les agents. Il corrige l'écran en plusieurs passes et relance le vérificateur après chacune. Pour l'installer sur Claude Code, Cursor et Codex : `npx skills add enmerasoftware/ai-design-check`. Il suffit ensuite d'écrire à l'agent « fix the design of this screen ». La quatrième partie génère en une commande une vidéo « avant/après » ; la vidéo de l'annonce a été réalisée ainsi.

Les auteurs annoncent la prise en charge de React, Next.js, Vue, Svelte, Blade et du HTML classique.

D'où viennent les règles

Avant la publication, les auteurs ont comparé leurs règles à 16 tableaux de bord très bien notés sur Dribbble et Behance. Ce que les meilleures réalisations ont en commun a été converti en vérifications :

• les cartes de métriques se lisent dans l'ordre « libellé → valeur → variation » ;
• toutes les cartes partagent le même modèle de titre ;
• une seule série de données est mise en évidence sur le graphique ;
• les boutons sont plats ;
• les surfaces se distinguent par le fond, et non par de lourdes ombres.

Une observation plutôt amusante : environ la moitié des réalisations populaires s'ouvrent sur la ligne « Welcome back 👋 ». Les auteurs ont malgré tout conservé la règle qui l'interdit. Leur argument : le titre est la ligne la plus précieuse d'un écran que l'on ouvre chaque jour, et la consacrer à un message d'accueil serait du gaspillage.

Ce qu'il faut garder en tête

Le chiffre « 266 → 0 » mesure la conformité à un ensemble de règles sur un seul tableau de bord, qui plus est un tableau de démonstration. Il ne prouve pas que l'interface est devenue objectivement meilleure, et l'annonce ne mentionne aucune vérification indépendante sur des projets tiers. L'échantillon de 16 références est modeste et se compose de travaux issus de plateformes de portfolios. Or ces travaux sont souvent optimisés pour l'image plutôt que pour l'usage quotidien d'un produit. Les règles sont restrictives sur le plan du goût : certaines équipes voudront des dégradés ou d'autres échelles typographiques, et l'ensemble devra donc être configuré.

L'approche reste néanmoins sensée : un vérificateur déterministe coûte peu et donne des résultats reproductibles, tandis que l'agent reçoit un objectif mesurable plutôt qu'une demande vague du type « rends ça plus beau ». Pour les équipes dont les interfaces sont de plus en plus souvent écrites par Claude Code, Cursor ou Codex, c'est un moyen rapide d'imposer une discipline minimale à la mise en page. On peut l'essayer sur son propre écran en une minute, puis décider lesquelles des 70 règles conserver.