Finition d'interface Slopless

Slopless UI

Le slop, c'est l'aspect fabriqué par une machine : le héros dégradé par défaut, le point pulsant, une icône sur chaque titre, un bouton sur chaque action, un texte plein de tirets cadratins et d'adjectifs, et aucune décision que vous pourriez défendre lors d'une revue. Les interfaces générées modernes échouent rarement sur un balisage cassé. Elles échouent parce qu'elles sont interchangeables : compétentes, polies et impossibles à retenir.

Cette compétence existe pour que la sortie d'un agent ne le soit pas. Elle donne à la construction une direction écrite avant tout code, une discipline pendant la construction, et une vérification avant de montrer le résultat à quiconque. Elle n'ajoute pas plus de style. Elle ajoute des décisions, puis termine.

La méthode

Travaillez dans cet ordre. Chaque étape a un travail, et les détails de chaque étape se trouvent dans un fichier de référence. Ne lisez une référence que lorsque vous atteignez l'étape qui en a besoin.

1. Sonder le terrain

Avant d'écrire une ligne, trouvez les décisions qui existent déjà : un fichier DESIGN.md ou des tokens, les variables CSS du projet, un bloc tailwind.config.* ou @theme, les composants existants. Si le projet a déjà un aspect, suivez-le exactement. Votre travail est la cohérence d'abord, le goût ensuite. Ne restylez rien à moins que l'utilisateur ne l'ait demandé.

2. Rédiger le brief

Quatre lignes, écrites avant tout code. Elles sont un contrat avec vous-même, et les étapes ultérieures les vérifient.

1. Public : qui utilise ceci, et que fait-il ici en dix secondes.
2. Sensation : un ou deux adjectifs que vous pourriez défendre lors d'une revue (calme, dense, chaleureux, précis).
3. Signature : la seule chose qu'un étranger retiendra. Si vous ne pouvez pas la nommer, le résultat sera générique. Choisissez-en une : une police inhabituelle, un nombre en gras, une couleur inattendue, une composition forte.
4. Mode : Persuader (page d'atterrissage, tarification), Opérer (tableau de bord, application), Lire (documentation, article), ou Expérimenter (portfolio, galerie). Le mode change chaque décision ultérieure.

Guide complet, les quatre modes et une bibliothèque de vingt-huit directions de départ pour les catégories de sites Web courantes : references/direction.md.

3. Prendre les décisions sous forme de tokens

Transformez le brief en valeurs réelles, pas en adjectifs : deux familles de polices avec des graisses et une pile de secours, une couleur d'accent avec un rôle, une échelle d'espacement, une échelle de rayon, des durées et des easing d'animation. Écrivez-les comme des variables CSS ou le format de token du framework. « Propre et moderne » n'est pas une décision. --accent: #8E3B2F en est une.

• Typographie : references/typography.md
• Couleur : references/color.md
• Mouvement : references/motion.md

4. Construire avec le grain

Appliquez ensuite les règles de discipline pendant la construction :

• Les lois d'abord. Une grille, une colonne, espacement de 4 ou 8 points, un point focal par vue, les huit états de composant, les seuils de clavier et de contraste. Ce n'est pas du style ; ce sont les lois physiques sur lesquelles tout système de conception s'accorde : references/foundations.md.
• Un point focal, une action principale par vue. La hiérarchie vient de la taille, du poids et de l'espace, pas des boîtes.
• Les boutons sont des engagements. Un bouton rempli par vue est normal. Les actions secondaires sont des liens ou des boutons discrets. Si une zone affiche plus de deux boutons, reconcevez-la : references/icons-and-buttons.md.
• Les icônes sont du mobilier. Les mots sont plus clairs. Quand les icônes gagnent leur place, un seul ensemble, un seul poids, une taille cohérente : references/icons-and-buttons.md.
• Le texte est du design. Phrases courtes, noms concrets, boutons commençant par un verbe, pas de tirets cadratins, pas de jargon : references/copy.md.
• Chaque état existe : vide, chargement, erreur, contenu long. Cinq lignes parfaites et un chemin heureux ne font pas un écran terminé.
• La page a un pouls. Les contrôles répondent à la pression, les transitions se déroulent comme elles sont arrivées, une entrée chorégraphie la première seconde, et les sections se révèlent une fois au défilement. Au plus une signature ambiante, nommée dans le brief. Le budget d'animation et chaque courbe nécessaire : references/motion.md.
• Aligner les blocs de texte à gauche. Centrer uniquement les éléments courts et sur une seule ligne.

5. Terminer avant la livraison

Ne présentez jamais une interface que vous n'avez pas regardée. La passe de finition, dans l'ordre :

1. python3 scripts/foldcheck.py <fichiers modifiés> et corrigez chaque erreur signalée.
2. python3 scripts/contrast.py <premier-plan> <arrière-plan> pour chaque paire de texte que vous avez introduite. Le texte du corps nécessite 4,5:1 ou mieux ; les grands textes et les bordures nécessitent 3:1.
3. Rendre dans un vrai navigateur et prendre une capture d'écran aux largeurs bureau et téléphone (node scripts/finish.mjs <url-ou-fichier> si Playwright est disponible, sinon l'outil navigateur que votre environnement fournit).
4. Plisser les yeux sur les captures d'écran : floutez vos yeux ou réduisez l'image. La hiérarchie et le point focal doivent survivre.
5. Corrigez, revérifiez uniquement les vues modifiées, et arrêtez après trois passes de correction.

Protocole complet, étiquettes d'honnêteté et format de rapport : references/verification.md.

Non-négociables

Ces motifs sont perçus comme fabriqués par une machine. Traitez-les comme interdits par défaut, même lorsqu'un tutoriel les montre :

• Points clignotants, pulsants, rebondissants ou flottants et décorations, y compris les indicateurs de « frappe » et les points d'état lumineux que personne n'a demandés.
• Style cyberpunk, néon, glitch, synthwave, vaporwave, matrix et holographique. La lueur n'a pas de source, donc elle ne convainc personne.
• Héros dégradés du violet au bleu et de l'indigo au fuchsia, texte dégradé, orbes de couleur floutées derrière le contenu.
• Tirets cadratins dans tout texte destiné à l'utilisateur. Utilisez un point, une virgule ou des parenthèses. Idem pour la liste de jargon IA dans references/copy.md.
• Emojis utilisés comme icônes, puces ou chrome d'interface.
• Une icône sur chaque titre et un bouton sur chaque action.
• Lorem ipsum, « à venir », témoignages inventés ou métriques présentés comme réels.
• Inter, Roboto, Arial ou la pile système comme police d'identité par défaut.
• Une page qui ne bouge jamais. Une sortie statique donne l'impression d'un modèle assemblé ; le budget d'animation dans references/motion.md fait partie de la finition, pas de la garniture.

Le catalogue complet avec correctifs : references/anti-slop.md.

Le test du plissement des yeux

Plissez les yeux (ou réduisez une capture d'écran à la taille d'une vignette) et regardez à nouveau. Trois choses doivent survivre au flou : le point focal, l'ordre de lecture et l'action principale. Si la page devient une soupe grise, le problème est la hiérarchie, et aucune quantité de polissage ne le résoudra. Corrigez d'abord l'espacement, la taille et le poids. Ce test prend dix secondes et détecte plus de mauvais design que n'importe quelle liste de contrôle.

Si l'utilisateur demande un motif interdit

Parfois, une personne veut vraiment du néon, des dégradés épais ou un thème cyberpunk. Ne la combattez pas et ne faites pas la leçon. Construisez-le bien : vrai contraste, vraie hiérarchie, états fonctionnels, mouvement retenu. Dites une fois, en une ligne, que la compétence est par défaut contre cela et que vous avez suivi sa préférence. La liste d'interdiction protège la sortie non guidée, pas la préférence exprimée.

Carte de référence

Fichier	Lire quand
references/direction.md	Étape 2, pour chaque nouvelle page ou restylage
references/typography.md	Étape 3, lors du choix ou de la vérification des polices
references/color.md	Étape 3, lors du choix ou de la vérification de la couleur
references/motion.md	Étape 3 pour les tokens, Étape 4 pour la passe d'animation (budget, entrées, révélations, ambiance, mouvement réduit)
references/foundations.md	Étape 4, pour la mise en page, l'espacement, la hiérarchie, les états et les lois nommées
references/copy.md	Étape 4, à chaque fois que du texte est écrit
references/icons-and-buttons.md	Étape 4, pour les actions, les contrôles et les icônes
references/anti-slop.md	Quand la sortie semble familière d'une mauvaise manière, ou en révision
references/verification.md	Étape 5, avant de dire que quoi que ce soit est terminé

Rapport

Terminez le travail d'interface par un rapport court : ce qui a été construit, la sensation en une ligne du brief, l'étiquette de vérification du references/verification.md (vérifié visuellement, vérifié statiquement, ou non vérifié, avec la raison), et tout ce qui reste à faire. Ne dites jamais qu'un résultat est « parfait au pixel près » ou « entièrement testé ». Dites ce que vous avez fait.

Scripts

Zéro dépendance, aucun appel réseau, aucune télémétrie. Les chemins sont relatifs au dossier de ce fichier.

python3 scripts/foldcheck.py src/            # audit statique pour les motifs fabriqués par machine
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # contraste WCAG pour une paire
node scripts/finish.mjs ./index.html          # passe navigateur : captures d'écran, console, débordement (nécessite Playwright)

foldcheck et contrast s'exécutent toujours. finish est facultatif et se dégrade gracieusement lorsque Playwright est manquant ; utilisez à la place tout outil navigateur que votre environnement offre, car le but est de regarder, pas l'outil.