Design anti AI slop : la skill qui enlève le look IA de tes interfaces, Quentin IA Marketing

Tu demandes à ton IA de te coder une interface. Elle te sort un truc fonctionnel, mais générique : coins arrondis au hasard, bordures grises partout, texte qui casse mal en fin de ligne, chiffres qui sautent à chaque mise à jour, et soit zéro animation, soit des animations qui donnent le tournis. Ça marche, mais ça crie « généré par une IA ». C'est l'AI slop : le design par défaut, sans intention.

Le problème n'est presque jamais le layout. Ton IA place les blocs au bon endroit. Ce qui manque, c'est la couche de finition, les petits détails que les vrais designers d'interface appliquent sans même y penser.

Ces détails, tu peux les apprendre à ton IA une fois pour toutes.

Un développeur, Jakub Krehel, a packagé les 11 détails qui comptent dans une skill open-source. Tu l'installes en une commande, et à partir de là ton agent les applique automatiquement à chaque fois qu'il code une UI. Voici comment t'en servir.

Claude AI Lab

Le Claude AI Lab, c'est ma communauté Skool où je partage mes systèmes Claude et les modules plus avancés. L'entrée est gratuite.

Rejoindre le Lab →

✅Ce qu'il te faut

Claude Code (ou un agent compatible : Codex, Cursor, Copilot, Gemini).

Node.js installé, pour la commande npx.

Deux minutes. Une install, et c'est à vie.

Comprends d'où vient le look IA

🔍 le détail, pas le layout

Quand une interface « sent l'IA », ce n'est pas parce que la structure est mauvaise. C'est parce qu'il manque une dizaine de réflexes de design engineering que personne ne t'apprend, mais que ton œil détecte tout de suite.

Quelques exemples de ce qui cloche par défaut :

📐

Les rayons ne s'emboîtent pas

Un bouton arrondi dans une carte arrondie, mais avec des rayons qui ne correspondent pas. Ça paraît bricolé.

🔢

Les chiffres dansent

Un compteur ou un prix dont la largeur change à chaque update, et toute la ligne tremble.

🟦

Des bordures grises partout

La solution paresseuse pour séparer les blocs, alors qu'une ombre fait le travail avec dix fois plus de profondeur.

L'idée clé

Une interface pro, ce n'est pas un layout plus malin. C'est dix détails invisibles appliqués partout, avec constance. C'est exactement ce qu'une IA oublie, et ce que cette skill lui rappelle.

Installe la skill

⚡ npx skills add

La skill s'appelle make-interfaces-feel-better. C'est une Agent Skill basée sur l'article de référence de Jakub Krehel sur le sujet. Une seule commande :

npx skills add jakubkrehel/make-interfaces-feel-better

Une fois installée, tu n'as plus rien à faire : ton agent l'applique tout seul dès qu'il construit un composant, review du code front, ou implémente une animation. Tu peux aussi la déclencher à la main quand tu veux forcer le coup :

/make-interfaces-feel-better

Pourquoi ça marche

Tu n'apprends pas le design à ton IA en lui faisant un cours. Tu lui installes une compétence qu'elle ressort au bon moment, sans que tu aies à y penser à chaque prompt.

Ce qu'elle injecte vraiment

🎛️ texte, formes, mouvement

Les 11 détails se rangent en trois familles. C'est ça que ton IA va désormais appliquer par défaut.

✍️

Le texte

Titres équilibrés avec text-wrap: balance, paragraphes sans mots orphelins avec pretty, texte plus net sur Mac avec le font smoothing, et chiffres à largeur fixe avec tabular-nums pour qu'ils arrêtent de sauter.

🧱

Les formes

Rayons concentriques (rayon extérieur = rayon intérieur + padding), ombres à la place des bordures, alignement optique plutôt que mathématique pour les icônes, et un léger outline sur les images pour les ancrer.

🎬

Le mouvement

Animations d'icônes en opacity, scale et blur, transitions interruptibles (et pas des keyframes rigides), entrées en cascade décalées de 100 ms, et sorties discrètes plutôt que tape-à-l'œil.

Deux exemples concrets de ce que ça change. Pour la profondeur, on remplace la bordure grise par une pile d'ombres :

box-shadow:
  0px 0px 0px 1px rgba(0, 0, 0, 0.06),
  0px 1px 2px -1px rgba(0, 0, 0, 0.06),
  0px 2px 4px 0px rgba(0, 0, 0, 0.04);

Et pour des titres qui ne cassent jamais bêtement sur deux lignes déséquilibrées :

h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

Le détail qui paie le plus

Si tu n'en retiens qu'un : les chiffres qui dansent. font-variant-numeric: tabular-nums sur tous tes compteurs, prix et timers, et ton interface gagne instantanément en sérieux.

Sers-t'en bien

🎯 décris, vérifie

La skill bosse en arrière-plan, mais tu en tires plus en étant un peu directif.

🆕

Sur du neuf

Demande ta UI normalement. La skill se déclenche seule et applique les détails. Tu peux la nommer pour t'assurer du coup : « code ce composant en appliquant make-interfaces-feel-better ».

♻️

Sur de l'existant

Colle un composant que tu as déjà et demande « passe-le au crible des détails qui font qu'une interface feel better ». C'est le meilleur moyen de voir la différence avant / après.

Le résultat

Le même prompt qu'avant, mais ce qui en sort ne ressemble plus à un template. Tu n'as pas appris à designer, tu as équipé ton IA pour qu'elle le fasse à ta place.

Pro tips

👀

Forme ton œil au passage

Lis l'article source de Jakub Krehel une fois. Tu commenceras à repérer ces détails partout, et tu sauras quoi demander quand l'IA passe à côté.

🧩

Empile avec frontend-design

Cette skill gère la finition. Couple-la avec une skill de direction artistique (comme frontend-design d'Anthropic) qui gère la composition. Les deux ne se marchent pas dessus.

🔐

Source de confiance

Une skill exécute des instructions dans ton agent. Celle-ci est open-source et lisible en deux minutes sur GitHub, mais garde le réflexe de vérifier d'où vient ce que tu installes.

L'IA sait déjà coder ton interface. Cette skill lui apprend juste à la finir comme un pro.

Comprends d'où vient le look IA

Installe la skill

Ce qu'elle injecte vraiment

Sers-t'en bien

Pro tips

Tu veux aller plus loin ?