Niltra/web-diseno-antislop

Conception web anti-slop

Principe : le modèle par défaut converge vers la moyenne de tout ce qu'il a vu. Ce skill brise cette convergence en obligeant à décider avant de construire et en vérifiant avec des preuves après.

Quand l'activer

• Lors de la construction ou du refactoring de pages, sections, heroes, cartes, navigation ou toute interface utilisateur.
• Lors de l'audit d'un site web ou d'une capture avec la question « est-ce que cela ressemble à de l'IA ? ».
• Lors du choix des typographies, palettes, espacements ou animations pour un nouveau projet.

Design DNA (obligatoire avant de toucher au code)

Tout projet déclare d'abord :

1. Palette nommée (ex. « Salle de contrôle ») : 1 couleur d'encre/base, 1 de surface, 1 accent signal, 1 accent de données, 1 d'alerte. HEX ou OKLCH + contraste AA vérifié.
2. Paire typographique avec rôles : affichage, corps, mono technique, chiffres. Jamais une seule police pour tout.
3. Squelette de la section principale en ASCII.
4. Composition du hero : ce qui est visible sans défilement sur un ordinateur portable 1280x720.
5. Élément signature : quelque chose d'unique que seul ce site possède (un graphique vivant, un motif de grille, un curseur, une transition propre).
6. Niveau de motion (0-10) et comportement avec prefers-reduced-motion.

Il est écrit dans docs/design-dna.md du projet et ne s'improvise pas en cours de construction.

Les deux tests anti-slop

• Test 1 : quelqu'un pourrait-il deviner la palette en connaissant seulement la catégorie du produit ? Si oui, refaire.
• Test 2 : pourrait-on deviner la famille esthétique avec la catégorie + des contre-références ? Si oui, refaire.

Interdictions strictes (si l'une d'elles apparaît, cet axe est régénéré)

Territoire typographique : Inter, Roboto, Open Sans ou toute police par défaut du système dans un rôle principal ; toutes les sections avec la même taille de titre.

Territoire couleur : dégradés violets/indigo/violet ; #fff et #000 purs ; néon vert sur fond noir comme « portfolio dev » ; crème + terre cuite + serif ; plus d'un dégradé décoratif par page.

Territoire mise en page : hero centré empilé (kicker + H1 + sous-titre + 2 boutons) ; 3 colonnes égales avec icônes ; bento avec cartes imbriquées dans des cartes ; bordure latérale d'accent sur les cartes ; glassmorphism ; tableau de bord factice avec sparklines décoratives ; tout en fade-in-up à l'entrée ; sections identiques en structure les unes après les autres.

Territoire contenu visuel : captures d'écran inventées ou maquettes flottantes ; images de stock ; images générées par IA comme substitut de produit réel ; émojis comme icônes de fonctionnalités ; logos en rangée « ils nous font confiance » sans contexte.

Territoire copy : « Elevate your... », « Unlock », « Supercharge », « Take your X to the next level », « The future of... », « Seamlessly », « Effortless » ; tirets cadratins décoratifs ; pastille « Available for work » avec point vert ; plus de 2 types de boutons différents.

Règles de construction

• Le texte est du HTML réel (indexable), jamais du texte dans un canvas, SVG ou image.
• Grille avec intention : largeurs différentes selon le type de contenu, alignements volontairement brisés, hiérarchie par taille et poids, pas par boîtes.
• Espacement par échelle (4/8) déclarée ; pas de valeurs aléatoires.
• Interaction réelle : survol, focus, clavier, états de chargement et vides. Rien de décoratif qui ne réponde pas.
• Motion avec un but : entre une fois, pas en boucle ; anime transform et opacity ; respecte prefers-reduced-motion de manière explicite.
• Accessibilité avant l'originalité : contraste AA, focus visible, zones tactiles 44px, largeur minimale 375px.

Audit anti-slop (avec captures)

1. Capturer le bureau 1440 et le mobile 375 avec Playwright CLI (jamais d'avis sans capture).
2. Parcourir la liste des interdictions et nommer le motif détecté avec preuve (sélecteur/capture).
3. Appliquer les deux tests.
4. Vérifier le focus, le clavier, le contraste calculé et prefers-reduced-motion.
5. Résultat : motif → preuve → correction concrète. 0 motifs = validation.

Outils d'assistance

• Playwright CLI pour les captures et la vérification : voir skill web-qa-visual.
• Actifs réels et logos : voir skill web-assets-reels.
• Texte : gate no-ai-slop.
• Registre des builds précédentes pour ne pas répéter squelette/palette : docs/design-dna.md du projet (append-only).