yonathan-boop/Claude – antislop-ui

antislop-ui

Anti Slop : Règles pour les agents de codage IA. Compétence UI et visuelle

Faisant partie du système antislop. À lire conjointement avec antislop.md (le noyau). Cette compétence approfondit les aspects UI/visuels : couleur, mise en page, composants, décoration, flux structurel et animation. Elle référence les règles du noyau par leur numéro et ne les duplique ni ne les renumérote jamais. Chargez-la lorsque la tâche consiste à construire ou modifier un site web, une application web ou toute interface.

Comment utiliser cette compétence

• Chargez-la conjointement avec antislop.md chaque fois que la tâche est du travail UI ou visuel. Le noyau contient le mécanisme (le test de finalité, les trois niveaux, la Porte de Livraison) ; cette compétence apporte la profondeur spécifique à l'UI.
• Chaque entrée a la même forme : Dire (le motif), Pourquoi (pourquoi il est perçu comme du slop), Corriger (quoi faire à la place), avec la règle du noyau correspondante citée comme R-XX.
• La Porte de Livraison du noyau reste la porte. La Liste de vérification de la compétence UI à la fin de ce fichier est le supplément spécifique à l'UI à exécuter parallèlement.

Visuel et Couleur

Dégradé Bleu-Violet Générique

• Dire : dégradés bleu vers violet, bleu vers cyan ou violet vers rose utilisés comme traitement de couleur principal, ou une lueur colorée pleine page.
• Pourquoi : le traitement de couleur le plus surreprésenté dans les données d'entraînement. Il signale « aucune identité de marque », pas « notre palette », et marque le design comme généré par IA au premier coup d'œil.
• Corriger : tirez la palette de DESIGN.md ou de l'identité du produit lui-même. Conservez un dégradé uniquement comme fonction de hiérarchie avec la justification écrite (R-01). Un dégradé séparant un niveau d'un autre est un savoir-faire ; le même dégradé sur chaque section est un défaut.
• La même famille par défaut : dégradés agressifs ou arc-en-ciel, schémas violet-et-noir, palettes néon ou pastel, et orbes radiaux flous derrière le héros. Ce sont les mêmes indices habillés différemment : couleur du modèle par défaut, pas de la marque. TOUS sont INTERDITS comme valeurs par défaut sans finalité (R-01).

Vitromorphisme Excessif

• Dire : flou / backdrop-filter sur la barre de navigation, les cartes, les modales et la barre latérale en même temps.
• Pourquoi : le flou supprime la texture et place chaque surface dans la même couche givrée, nivelant la hiérarchie. Quand chaque surface est en verre, rien n'est au premier plan.
• Corriger : traitez le verre comme un accent, pas comme un trait de caractère. Limite de dose : au maximum 1-2 éléments (R-10). La surface qui a besoin d'attention reçoit le verre ; tout le reste reste solide.

Rayon de Bordure Excessif

• Dire : chaque élément est en forme de pilule : boutons, champs de saisie, cartes, badges, modales.
• Pourquoi : les formes de pilules uniformes effacent le langage visuel du « ceci est un champ de saisie, ceci est une carte ». Le rayon devient une décoration plutôt qu'un outil de hiérarchie.
• Corriger : définissez un petit ensemble de rayons dans le système de design et appliquez-les délibérément (R-11). Un rayon généreux sur l'appel à l'action principal paraît intentionnel ; le même rayon sur chaque élément paraît par défaut.

Ombres Trop Douces

• Dire : chaque composant porte une ombre large, donnant l'impression que toute la page flotte.
• Pourquoi : quand tout est surélevé, l'élévation ne communique rien. La page perd son plan de sol et devient une douceur générique.
• Corriger : utilisez l'ombre uniquement comme marqueur d'élévation, et écrivez la raison de l'élévation (R-12). La plupart des éléments doivent reposer à plat ; un ou deux qui ont besoin de s'élever au-dessus de la page portent l'ombre.

Lueur Partout

• Dire : lueur sur les cartes, boutons, icônes, badges, arrière-plans et bordures simultanément.
• Pourquoi : la lueur est un amplificateur d'attention. Appliquée partout, elle n'amplifie rien, et c'est l'un des moyens les plus rapides de paraître « fait par IA ».
• Corriger : réservez la lueur à un maximum de 1 à 2 éléments importants comme accent de focalisation (R-13). Tout le reste reste mat.

Grille de Fond

• Dire : carreaux de grille, lignes de plan, papier millimétré, grilles de points ou lignes fines répétées derrière le contenu.
• Pourquoi : c'est un moyen par défaut de donner à une page plate un aspect « technique » sans faire aucun travail réel. Cela se lit comme une texture sans intention.
• Corriger : utilisez la texture ou le motif uniquement lorsqu'il soutient réellement l'identité du produit, avec la justification écrite (R-07). Un motif d'identité réel (Partie 3 du noyau) bat une grille standard à chaque fois.

Mode Sombre par Défaut Sans Raison

• Dire : toute la page est sombre simplement parce que cela semble « tech », sans considération de marque.
• Pourquoi : le sombre est une décision, pas un défaut. L'imposer se lit comme une mode, pas comme un service au produit.
• Corriger : choisissez le thème en fonction de l'identité de la marque, du type de produit et du public (R-21). Les outils pour développeurs et créatifs ont des raisons légitimes d’être sombres ; un produit axé sur le contenu généralement non. S'il n'y a pas de raison forte pour un thème fixe, construisez un basculement clair/sombre fonctionnel.

Trop de Couleurs dans la Palette

• Dire : 5 à 7 couleurs différentes sur une même page sans système de design clair.
• Pourquoi : une palette dispersée n'a pas de hiérarchie. Quand chaque élément peut être de n'importe quelle couleur, rien n'est distingué.
• Corriger : limitez la palette active à 2-3 couleurs de base + 1 accent (R-29), et laissez l'une des bases être le neutre de fond. La retenue est ce qui fait atterrir l'accent.

Couleur d'Accent Excessive

• Dire : une couleur d'accent sur les boutons, icônes, badges, liens, lignes, arrière-plans et lueurs en même temps.
• Pourquoi : l'accent cesse d'être un accent dès qu'il est partout. Il devient juste une autre couleur, et le design perd son point focal.
• Corriger : l'accent appartient uniquement au moment clé (un accent délibéré, Partie 3 du noyau). Zéro accent est stérile ; un accent partout est du slop. Choisissez l'endroit ou les deux endroits où il compte.

Défaut Stérile

• Dire : blanc plat ou presque blanc, bordures grises fines, petit rayon, pas de texture, police générique, pas d'identité.
• Pourquoi : c'est le résultat « sûr » d'un sur-filtrage sans direction. Ce n'est pas du slop, mais ce n'est pas du design non plus : c'est un vide là où un design devrait être.
• Corriger : c'est un problème de direction, pas un problème de filtre. Ajoutez DESIGN.md ou résolvez la Lecture du Design (Partie 3 du noyau), puis augmentez les cadrans de vivacité. La solution n'est jamais plus d'interdictions ; c'est énoncer la finalité et ajouter de l'énergie.

Mise en Page et Composants

Mise en Page de Modèle Monotone

• Dire : héros, sous-titre, 2 CTA, capture d'écran, grille de fonctionnalités, témoignages, FAQ, CTA, pied de page, dans cet ordre, à chaque fois.
• Pourquoi : l'ordre est le défaut des données d'entraînement, pas le récit du produit. Les sections apparaissent parce que le modèle les a, pas parce que le contenu en a besoin.
• Corriger : construisez la structure autour des besoins réels du contenu (R-05, C-3). Si le produit n'a pas de témoignages, il n'y a pas de section témoignages. L'ordre des sections suit l'histoire du produit. Adaptez le cadran RYTHME : s'il est à 3, les sections varient visiblement.

Cartes de Fonctionnalités Copiées-Collées

• Dire : taille, hauteur, icône, mise en page et rembourrage identiques sur toutes les cartes de fonctionnalités.
• Pourquoi : les cartes uniformes nivellent le contenu. Quand chaque fonctionnalité est une carte avec une icône, celles avec un vrai poids et celles sans ont le même aspect.
• Corriger : créez une variation qui reflète la hiérarchie du contenu, avec la raison écrite (R-14). Toutes les fonctionnalités n'ont pas besoin d'être une carte. La fonctionnalité phare peut mériter un traitement pleine largeur, les secondaires une liste.

Grille Bento

• Dire : une section faite d'une mosaïque de cartes de tailles différentes, certaines s'étendant sur deux colonnes ou deux lignes, remplissant l'espace comme un tableau de bord en tuiles.
• Pourquoi : c'est la mise en page « comme une app » par défaut de ces dernières années, donc elle ne signale rien sur le produit. Quand chaque section pourrait être un bento, la mise en page est un modèle, pas une décision.
• Corriger : utilisez une grille bento uniquement lorsque le contenu a réellement des éléments de tailles différentes à montrer (R-05). Si chaque cellule est à peu près identique, une simple grille ou une liste est plus honnête. Le cadran RYTHME décide si les sections varient du tout.

Espacement Uniforme

• Dire : le rembourrage, les marges et les espaces sont identiques dans chaque section.
• Pourquoi : le rythme est un outil, et une valeur d'espacement unique le supprime. Les sections cessent de se relier ; la page se lit comme une bande plate.
• Corriger : utilisez les espaces blancs comme structure (Partie 3 du noyau) et variez-les avec le cadran RYTHME. Établissez une échelle d'espacement, puis utilisez différents niveaux pour séparer et connecter. Un rythme uniforme est un choix délibéré uniquement lorsque le cadran le dit (R-05).

« Comment ça marche » Toujours en 3 Étapes

• Dire : icône ronde + numéro 1, 2, 3 + texte court, toujours trois étapes, toujours la même forme.
• Pourquoi : le processus réel du produit est rarement une liste ordonnée de trois étapes. Le modèle force le processus dans sa forme, pas l'inverse.
• Corriger : présentez le processus tel qu'il est réellement (R-05). Trois étapes avec des icônes rondes, c'est bien si c'est réellement le processus ; sinon, utilisez la forme que prend le flux de travail réel, y compris deux étapes ou cinq.

Barre de Logos « Recommandé Par »

• Dire : une rangée de logos d'entreprises génériques directement sous le héros.
• Pourquoi : c'est une affirmation de confiance sans preuve : logos génériques, aucun client réel nommé, aucune preuve d'utilisation.
• Corriger : montrez uniquement des logos réels et vérifiables (R-18, R-36, C-5). Si le produit n'a pas encore de tels clients, ne fabriquez pas une barre de logos. Une preuve sociale réelle bat une générique à chaque fois.

Carte de Tarification « Le Plus Populaire »

• Dire : le niveau de tarification du milieu toujours mis en évidence avec un badge capsule.
• Pourquoi : c'est le motif par défaut, ce qui signifie que ce n'est pas une décision. Quand chaque section de tarification le fait, le niveau mis en évidence cesse de signifier quoi que ce soit.
• Corriger : mettez en évidence le niveau qui sert réellement les objectifs du produit, et écrivez pourquoi (R-31). Si aucun niveau ne mérite d'être mis en avant, n'en mettez aucun.
• Trois colonnes font partie de l'indice : tarification présentée en trois niveaux quelle que soit la structure réelle, celui du milieu mis en évidence. Cette forme est le défaut, donc ce n'est pas une décision (R-05). Utilisez autant de niveaux que le produit en a réellement, et mettez en évidence celui qui le sert.

Démo Sans Produit

• Dire : la page vend un produit qui n'est jamais montré en fonctionnement : pas de démo réelle, pas de Conditions d'Utilisation, pas de Politique de Confidentialité, juste des promesses.
• Pourquoi : c'est une démo habillée en produit. Chaque affirmation est une confiance sans rien derrière, et les pages légales manquantes sont l'indice discret que rien de réel n'existe encore.
• Corriger : montrez le vrai produit en fonctionnement, ou dites honnêtement qu'il n'est pas encore livré (R-38, C-5). Si la page demande des inscriptions ou des paiements, les Conditions d'Utilisation et la Politique de Confidentialité doivent exister. Un honnête « bientôt disponible » bat une démo convaincante.

Pied de Page Modèle à 4 Colonnes

• Dire : colonnes Produit / Entreprise / Ressources / Légal sans variation.
• Pourquoi : les colonnes existent parce que les modèles les ont, pas parce que le site a autant de groupes de liens.
• Corriger : structurez le pied de page autour de ce vers quoi le produit renvoie réellement (R-05). Une seule colonne de liens peut être plus utile que quatre à moitié vides.

Rythme de Section Uniforme

• Dire : chaque section est titre centré + sous-titre + grille de cartes identique, sans variation.
• Pourquoi : une composition identique fait que les sections se mélangent, et la page semble répétitive et plate.
• Corriger : variez la composition avec le cadran RYTHME (R-05). Alternez les sections textuelles et visuelles, les mises en page asymétriques et symétriques. Une page où chaque section suit le même modèle est une page conçue par un modèle.

Éléments Décoratifs

Icônes IA Génériques

• Dire : étincelle, étoile, magie, éclair, diamant, cube, robot ou orbe IA comme icônes de fonctionnalités.
• Pourquoi : ces glyphes sont le vocabulaire générique du « produit IA ». Ils ne communiquent rien sur la fonctionnalité spécifique.
• Corriger : utilisez des icônes réellement pertinentes pour le contenu, avec la pertinence écrite lorsque le glyphe est générique (R-04). Si aucune icône appropriée n'existe, n'en utilisez aucune. L'étiquette de la fonctionnalité fait le travail.

Icônes Lucide

• Dire : chaque icône provient de la même bibliothèque à traits fins et coins arrondis (Lucide ou un clone visuel), donc toutes les icônes partagent un aspect reconnaissable.
• Pourquoi : une seule bibliothèque d'icônes par défaut rend les icônes de tous les sites IA identiques, donc les icônes cessent de vous renseigner sur le produit. Les glyphes peuvent être pertinents ; le look uniforme de la bibliothèque est l'indice.
• Corriger : le jeu d'icônes est un choix visuel, pas un défaut (R-04). Choisissez les icônes d'abord pour leur pertinence ; décidez ensuite si le poids et le trait de la bibliothèque conviennent au caractère du produit. Deux icônes qui se ressemblent peuvent encore être les vôtres si le jeu est une décision, pas une importation.

Emoji comme Décoration

• Dire : emoji littéral dispersé dans le texte, les titres, les badges et les boutons : 🚀 dans un titre, ✅ à côté de chaque puce de fonctionnalité, 🔥 sur un CTA, 📈 au-dessus d'un titre de graphique.
• Pourquoi : l'emoji est le raccourci le plus fort pour « cela a été généré, pas écrit ». Dans une UI, il rivalise avec le contenu pour l'attention et aplatit la voix du produit dans le même joyeux défaut que tous les autres sites IA.
• Corriger : supprimez les emoji du texte de l'UI. Si un concept a besoin d'une marque, utilisez une icône réelle et pertinente avec la raison écrite (R-04), ou pas de marque du tout. Le texte porte le sens ; l'emoji n'ajoute rien.

Petites Flèches sur Chaque Bouton

• Dire : → ou ↗ placé sur presque chaque bouton comme pure décoration.
• Pourquoi : la flèche devient un motif, pas un signal. Quand chaque CTA en a une, aucune ne pointe vers un endroit spécifique.
• Corriger : les flèches ne sont pas l'identité par défaut des boutons (R-08). Gardez-les pour l'action qui bénéficie réellement d'un indicateur de direction, dimensionné proportionnellement, avec la finalité écrite.

Bande Gauche Colorée

• Dire : une fine barre verticale colorée sur le bord gauche des cartes, des lignes de liste ou des en-têtes de section, utilisée comme décoration.
• Pourquoi : la bande ajoute de la couleur sans ajouter de sens. C'est le moyen le moins cher de faire en sorte qu'une carte « ait l'air conçue », donc elle apparaît partout et ne dit rien.
• Corriger : la bande est une décoration ; elle doit porter une information ou disparaître (R-01, R-31). Un bord gauche qui marque un état réel (actif, avertissement, nouveau) est un signal. Une bande qui existe pour avoir l'air conçue est un défaut.

Badges Capsule IA

• Dire : forme de pilule, bordure fine, lueur, petit point, majuscules, contenant « Alimenté par IA », « Bêta », « Nouveau ».
• Pourquoi : la combinaison capsule-plus-lueur-plus-point est un badge autoréférentiel qui dit « fait par IA, à propos d'être fait par IA ».

…

[tronqué pour la traduction]