Que fait anti-slop-ui ?

Compétence pour Claude Code, Codex CLI et Cursor qui audite une UI à la recherche de marqueurs de génération IA et les corrige par passes ordonnées. Elle ne refait pas tout de zéro ; elle prend l'existant et le rend intentionnel.

Quand l'utiliser

L'utilisateur vous demande de nettoyer, dé-slopifier, dé-poluer ou polir un écran, une page ou un composant qui semble généré par IA. Ou bien l'utilisateur pointe un fichier, un dossier ou une URL et dit que ça a l'air générique / par défaut / vibecodé.

Workflow

Étape 1 : Lire la direction de design

Cherchez DESIGN.md à la racine du projet, puis dans templates/. S'il existe, chargez-le. Chaque décision ultérieure doit rester cohérente avec lui. Si aucun DESIGN.md n'existe, dites-le à l'utilisateur et proposez d'en remplir un ensemble avant de continuer. Une direction est requise ; ne sautez pas cette étape.

Étape 2 : Audit

Scannez la cible (fichier, dossier ou page rendue). Listez chaque tell IA trouvé, groupé par catégorie. Utilisez cette liste de vérification :

Pour chaque constat, notez le fichier et la ligne (ou le sélecteur si depuis une URL).

Étape 3 : Proposition de direction

Rédigez une courte direction (3–5 lignes) qui répond à :

Ce qu'est ce produit (une phrase).
Le caractère — un seul adjectif qui n'est pas « propre », « moderne » ou « minimal ».
L'accent — une couleur, dérivée du produit ou de la marque, pas d'une tendance.
Le détail signature — une petite chose spécifique que seul ce produit aurait.

Présentez la direction à l'utilisateur. Attendez son approbation avant de modifier du code. Si l'utilisateur change quelque chose, mettez à jour la direction et confirmez à nouveau.

Étape 4 : Passes ordonnées

Appliquez les corrections dans cet ordre. Terminez chaque passe avant de commencer la suivante. Après chaque passe, notez brièvement ce qui a changé.

Passe 1 : Espacement

Remplacez les valeurs arbitraires (mt-[13px]) par le pas de grille 4px le plus proche.
Normalisez les écarts selon l'échelle du projet (par défaut Tailwind ou l'échelle dans DESIGN.md).
Assurez un remplissage cohérent dans les conteneurs.

Passe 2 : Couleur

Supprimez dégradés, lueurs, blobs, ombres colorées.
Appliquez la rampe neutre de DESIGN.md (ou dérivez-en une : un gris teinté unique).
Appliquez l'accent de la direction uniquement aux éléments interactifs.
Vérifiez le contraste du texte : minimum 4,5:1 pour le corps, 3:1 pour les grands textes.

Passe 3 : Icônes

Remplacez les emojis par la famille d'icônes du projet (par défaut : Lucide, 16–18px, trait 1.5).
Supprimez les emojis décoratifs du contenu textuel.
Assurez une seule famille d'icônes partout.

Passe 4 : Texte

Supprimez les mots hype : « Boostez », « Débloquez », « En toute fluidité », « Sans effort », « Propulsé par l'IA », « Révolutionnez », « de nouvelle génération ».
Supprimez les points d'exclamation du texte d'interface.
Supprimez « Bon retour » avec l'emoji qui fait coucou.
Remplacez les CTA « En savoir plus » / « Commencer » par verbe + résultat spécifique à l'action.
Supprimez les statistiques, logos, témoignages inventés. Remplacez par des données réelles ou supprimez la section.
Supprimez les badges « Nouveau » sauf si la fonctionnalité a été livrée au cours de la dernière semaine.

Passe 5 : Typographie

Définissez la police de DESIGN.md (ou une choisie dans la direction ; jamais Inter par défaut).
Verrouillez les graisses : 400 pour le corps, 500 pour l'emphase, 600 max pour les actions principales.
Pas d'italique dans les titres. Pas d'étiquettes en capitales espacées (supprimez uppercase tracking-widest).
Appliquez une échelle typographique cohérente. Utilisez tabular-nums sur les données.

Passe 6 : Disposition

Brisez le motif héros centré + trois cartes là où il apparaît.
Supprimez l'imbrication de cartes. Variez les tailles des cartes là où elles subsistent.
Appliquez la règle de rayon de bordure imbriqué : intérieur = extérieur – remplissage.
Vérifiez que la disposition fonctionne à 375px, 768px et 1280px.

Passe 7 : États et mobile

Ajoutez un état vide pour chaque composant dépendant des données qui en manque.
Ajoutez un squelette de chargement là où des données sont récupérées.
Ajoutez un état d'erreur là où des appels API peuvent échouer.
Vérifiez que rien ne déborde ni ne s'effondre à 375px.

Passe 8 : Animation

Remplacez transition-all par des propriétés spécifiques (transition-colors, transition-opacity, transition-transform).
Supprimez animate-pulse de tout ce qui n'est pas un squelette de chargement.
Supprimez hover:scale des cartes.
Définissez une seule courbe d'assouplissement pour le projet (par défaut : cubic-bezier(0.22, 1, 0.36, 1)).
Une seule animation d'entrée au chargement : opacité + petit translateY, 200–300ms, une fois.

Étape 5 : Auto-vérification

Après toutes les passes, relancez la liste de vérification de l'audit de l'Étape 2. S'il reste un tell, corrigez-le ou expliquez à l'utilisateur pourquoi il a été conservé (par exemple, « le dégradé est la véritable couleur de la marque, confirmée dans DESIGN.md »).

Confirmez à l'utilisateur : ce qui a été changé, combien de tells ont été trouvés, combien ont été corrigés, et ceux qui restent avec les raisons.

Règles

Ne remplacez jamais un cliché par un autre. Si une correction introduit du crème + sérif + terre cuite, ou du noir + vert acide, annulez-la et essayez quelque chose de dérivé du produit.
N'inventez jamais de contenu. N'ajoutez pas de fausses statistiques, logos, témoignages ou noms de placeholder qui semblent réels.
Un changement à la fois, une passe à la fois. Ne sautez pas en avant.
Respectez les systèmes de design existants. Si le projet utilise une bibliothèque de composants avec des tokens spécifiques, adaptez les corrections à ces tokens au lieu de les remplacer.
Attendez toujours l'approbation de l'utilisateur sur la direction avant de modifier le code.

Crédits

Cette compétence synthétise des idées provenant de la communauté open-source des compétences de design. C'est un travail original ; aucun texte n'est copié à partir des sources ci-dessous.

Inspirations :

Unslop par Damir Sokolovsky (CC-BY-4.0) — le workflow passe par passe et plusieurs catégories de tells (grille d'espacement, cohérence des icônes, interdictions de texte, règles d'animation) sont adaptées de l'approche d'Unslop. Selon CC-BY-4.0 : crédit à Damir Sokolovsky, original à https://github.com/heydamir/unslop, sous licence CC-BY-4.0.
Impeccable par Paul Bakaus (Apache-2.0) — l'approche audit-d'abord et le concept de détection déterministe.
frontend-design par Anthropic (Apache-2.0) — le catalogue de clichés (crème + sérif, noir + vert, capitales espacées).
Hallmark par Nutlope / Together AI (MIT) — les règles de base et l'idée de tester à plusieurs largeurs.
Taste Skill par Leonxlnx (MIT) — interdictions strictes sur la numérotation décorative et les filets fins.
ai-design-skills par elayadesign (MIT) — l'approche par règle numérique et les interdictions de polices.
Le catalogue de 15 tells dans docs/ai-tells.md de ce dépôt.

nyrthoughts/anti-slop-ui

Qu'est-ce que anti-slop-ui ?

Demander à votre IA préférée

Documentation