krutikkkkkkkkk/web-design-deslop

Web Design Deslop

Le « slop IA » en design web n'est pas une seule mauvaise décision. C'est la moyenne d'un million de landing pages : le dégradé violet-rose, le héros centré avec un badge pilule et deux boutons, les trois cartes de fonctionnalités identiques avec une icône colorée dans un carré, les cartes vitrées sur un fond quasi noir, le texte qui dit « Libérez des workflows fluides ». Chaque élément est acceptable pris isolément. Ensemble, ils créent une page qui pourrait appartenir à n'importe quelle entreprise, ce qui signifie qu'elle n'appartient à aucune.

Ce skill a trois fonctions :

1. Auditer une page existante, une maquette ou un code et signaler ses signes de slop avec des corrections concrètes.
2. Guider une nouvelle construction pour que le slop ne soit jamais écrit en premier lieu.
3. Réécrire le contenu qui semble généré.

Lisez references/tells.md (indices visuels, de mise en page, d'animation et Tailwind, avec le correctif pour chacun) à chaque fois que vous auditez ou construisez. Lisez references/copy.md à chaque fois qu'un titre, sous-titre, description de fonctionnalité ou CTA est rédigé ou révisé.

Le seul test qui compte

Le test de l'échange. Remplacez le logo et le nom du produit par ceux d'un concurrent. La page fonctionne-t-elle toujours ? Si oui, c'est du slop, aussi soigné soit-il. Une page conçue est construite à partir de matériaux que seule cette marque possède : son produit, ses collaborateurs, son lieu, son processus, ses chiffres réels, sa voix. Chaque jugement ci-dessous est un cas particulier de ce test.

Deux tests complémentaires :

• Le test du plissement des yeux. Plissez les yeux. Si vous voyez une colonne centrée de rectangles arrondis de même taille empilés à intervalles égaux, la mise en page est un template. Les pages conçues ont une silhouette irrégulière : une section large, la suivante étroite, une chose très grande, beaucoup de choses petites.
• Le test de la source. D'où vient chaque décision ? « Du matériau de la marque » est bon. « Parce que c'est ce à quoi ressemblent les landing pages » est le signe.

Mode 1 : Audit

À utiliser lorsque l'utilisateur partage une URL, une capture d'écran, un cadre Figma, un composant ou un dépôt et souhaite un avis, ou dit que la page semble générique.

1. Lisez tout d'abord. Pour le code, lisez chaque composant de page/section et la configuration Tailwind ou le CSS global. Pour les captures d'écran, regardez la page entière avant d'écrire. Ne commentez pas à partir du seul héros.
2. Effectuez le test de l'échange et donnez le verdict en une phrase. Soyez honnête et précis : « Cela pourrait être la page d'accueil de n'importe quelle startup d'outils de développement » est plus utile qu'un score.
3. Listez les indices, du pire au premier. Pour chacun : l'indice, où il se trouve (fichier et ligne, ou nom de section), pourquoi il donne l'impression d'être généré, et la correction. Inspirez-vous de references/tells.md mais écrivez la correction pour cette page, pas l'échange générique.
4. Nommez ce qu'il faut conserver. Chaque page a quelque chose qui fonctionne. Dites-le, sinon l'utilisateur le jettera avec le slop.
5. Donnez les trois modifications ayant le plus grand effet. Généralement : une décision typographique, une décision de mise en page, une décision de contenu. Si l'utilisateur ne fait que celles-ci, la page devrait déjà passer le test du plissement des yeux.

Format de sortie pour un audit :

## Verdict
Une ou deux phrases. Résultat du test d'échange. Global : standardisé / mixte / conçu.

## Corrigez d'abord ceci
1. [indice] / [où] / [correction spécifique]
2. ...
3. ...

## Tout le reste, par domaine
### Typo  ### Couleur  ### Mise en page  ### Composants  ### Animation  ### Contenu  ### Imagery
(une courte liste sous chaque ; sautez les domaines vides)

## À conserver
Ce qui est déjà bon et pourquoi.

Lorsque l'utilisateur vous demande d'appliquer les corrections, modifiez les fichiers réels. Ne réécrivez pas la page entière de zéro sauf si on vous le demande ; les modifications ciblées préservent ce qui fonctionne et sont plus faciles à réviser.

Mode 2 : Construire sans slop

À utiliser à chaque fois que vous générez un site, une page, une section ou un template. L'ordre compte : les décisions prises tôt (concept, typographie, grille) empêchent le slop ; les décisions prises tard (échanger ce dégradé) ne font que le cacher.

Avant d'écrire du balisage

1. Trouvez le matériau brut de la marque. Qu'est-ce que cette entreprise possède réellement ? Un produit avec une interface réelle, un lieu physique, un matériau, un processus artisanal, un fondateur avec un point de vue, un ensemble de données, une clientèle avec un nom. Choisissez une chose et laissez-la guider la page. Le site d'un torréfacteur peut être construit autour des profils de torréfaction ; celui d'un concessionnaire autour du hall d'exposition ; celui d'une application de facturation autour d'une facture réelle. Si l'utilisateur ne vous a rien donné, posez une question, ou indiquez l'hypothèse sur laquelle vous construisez en haut de votre réponse.
2. Choisissez une idée de mise en page, pas une liste de sections. Décidez le seul mouvement structurel que fait la page : une colonne éditoriale à deux colonnes avec une gauche collante, un rythme d'image à fond perdu, une page de type index/tableau dense, un seul énorme titre avec un petit texte d'accompagnement, un défilement horizontal de produits. Laissez ensuite les sections découler de cela. Ne commencez jamais par « héros → logos → fonctionnalités → témoignages → tarifs → FAQ → CTA → pied de page ». Cette liste est le template du slop ; si la page a besoin de certaines de ces sections, elles doivent ressembler à cette page, pas à la liste.
3. Définissez la typographie avant la couleur. Choisissez une police d'affichage avec du caractère et un cheval de bataille pour le corps ; définissez une échelle réelle avec de grands écarts (par exemple 14 / 18 / 32 / 72 / 140) plutôt que la rampe douce de Tailwind de text-4xl à text-6xl. Décidez de l'alignement : aligné à gauche est la valeur par défaut des pages conçues ; tout centré est la valeur par défaut des pages générées.
4. Dérivez une palette du matériau. Une ou deux couleurs de marque, un fond de papier ou d'encre, et l'accent utilisé à quelques endroits seulement. Les dégradés ne sont pas interdits, mais un dégradé qui n'est dérivé de rien (violet→rose, bleu→violet) est actuellement le signe IA le plus fort sur le web.

Pendant l'écriture du balisage

• Variez le rythme. Chaque section n'est pas py-24 max-w-7xl mx-auto. Laissez une section sortir du conteneur, une autre reposer dans une mesure étroite, une autre être une liste divisée par un trait fin au lieu de cartes.
• Préférez les lignes et l'espace aux cartes et aux ombres. Les bordures fines (border-b border-neutral-200), les espaces blancs et la taille de la typographie portent mieux la hiérarchie que les boîtes rounded-2xl shadow-lg. Utilisez une carte quand l'objet est réellement un objet discret (un produit, un forfait), pas comme conteneur par défaut.
• Utilisez du contenu réel ou des espaces réservés honnêtes. Écrivez le vrai titre à partir du matériau de la marque. Si un fait est inconnu, écrivez {{TODO: chiffre réel}} plutôt que d'inventer « 10 000+ clients satisfaits ». Les logos factices, les témoignages à cinq étoiles inventés et les statistiques rondes sont du slop de contenu et sont pires qu'une section manquante.
• Icônes : peu ou pas. Les émojis ne sont jamais des icônes. Une liste de fonctionnalités n'a pas besoin d'une icône lucide par ligne. Si des icônes sont utilisées, elles doivent former un ensemble cohérent, être petites et secondaires par rapport au texte.
• Animation avec une raison. Pas de fondu-enchaînement décalé vers le haut sur chaque élément. Un ou deux mouvements délibérés liés au contenu (une image de produit qui se révèle au défilement, un survol qui montre un détail) donnent l'impression d'être conçus. Les transitions par défaut doivent être rapides et simples.
• Images : spécifiques plutôt qu'abstraites. Pas de blobs 3D, pas d'orbs dégradés, pas de stock « ordinateur portable sur bureau ». Une capture d'écran réelle, une photo de produit, une carte, un document, une texture provenant du matériau. Si rien n'existe, un bloc typographique bien défini bat une image d'espace réservé.
• Vérifiez aussi le slop de second ordre. La réaction au slop de dégradé a son propre template : police serif géante, grain en superposition, sections numérotées (01), étiquettes mono en majuscules partout, rangées de marque, blobs qui suivent le curseur, « © 2026 — Tous droits réservés » en mono. C'est tout aussi reconnaissable. N'utilisez ces mouvements que lorsqu'ils proviennent de la marque, pas parce qu'ils signalent « conçu ».

Avant de remettre

Effectuez rapidement un audit de votre propre résultat : test de l'échange, test du plissement des yeux, parcourez references/tells.md. Corrigez ce que vous trouvez. Dites ensuite à l'utilisateur en une ou deux lignes pourquoi la page a l'air de ce qu'elle est (à partir de quel matériau elle a été construite, quelle est l'idée de mise en page), afin qu'il puisse juger la décision plutôt que les pixels.

Mode 3 : Contenu

Lisez references/copy.md. La version courte : le contenu généré est abstrait, adjectival et symétrique. Le contenu conçu est concret, spécifique et irrégulier. Remplacez chaque affirmation par un fait, chaque « fluide » par ce qui se passe réellement, chaque triplet par la seule chose qui compte. Les titres doivent dire ce qu'est ou fait la chose, dans la voix de la marque, avec les mots que le client utiliserait. L'appel à l'action dit ce qui se passe ensuite (« Voir les torréfactions », « Réserver un essai routier »), pas « Commencer ».

Calibration

• Tous les motifs ne sont pas mauvais dans tous les contextes. Un tableau de tarification à trois niveaux est correct pour un produit à trois niveaux ; l'indice est le badge « Le plus populaire » sur celui du milieu quand rien ne le soutient. Jugez par le test de l'échange, pas par une liste de contrôle.
• L'utilisateur peut vouloir une mise en page conventionnelle et rassurante (une banque, une clinique, un concessionnaire). Deslop ne signifie pas bizarre. Cela signifie spécifique. Une structure conventionnelle construite à partir de matériaux réels passe ; une mise en page expérimentale pleine de cartes génériques échoue.
• Lorsque l'utilisateur est un designer ou un développeur, donnez les correctifs sous forme de code ou de valeurs exactes. Lorsqu'il ne l'est pas, décrivez le changement en langage clair et proposez de le faire.
• Ne flattez pas et n'en rajoutez pas. Un verdict honnête, une liste classée et une voie à suivre.