elmir-mammadli/ai-deslop

AI de-slop

Objectif : une page qui donne l'impression d'être conçue par une personne ayant un point de vue. Une seule voix typographique, du contenu réel là où se trouvaient des étiquettes, de la décoration uniquement lorsqu'elle porte du sens. Supprimer les indices n'est que la moitié du travail ; l'autre moitié consiste à prouver que rien n'est cassé là où ils se trouvaient.

Travaillez dans cet ordre et ne sautez aucune étape : cadrage → audit → liste de conservation → édition → réparation → vérification → rapport. Une étape n'est terminée que lorsque chaque point de la « Définition de fait » est rempli.

1. Cadrage

• Listez chaque site, page, composant partagé, fichier de données et vignette dans le périmètre. Le site parent compte, pas seulement les démos ou les sous-pages. Si l'utilisateur dit « tout », cela signifie tout ; ne vous arrêtez jamais à un sous-ensemble et ne le rapportez pas comme terminé.
• Le contenu vit à trois endroits ; auditez les trois : feuilles de style, balisage/composants et fichiers de données (tableaux de titres, faits typographiques, étiquettes de navigation, métadonnées).
• Demandez une fois si le périmètre n'est vraiment pas clair. Sinon, continuez.

2. Audit avec le script, puis à l'œil

Exécutez d'abord le scanner fourni. Il liste chaque candidat avec fichier:ligne, regroupé par indice, et se termine par le code 1 tant qu'il reste des indices de niveau « fix ».

python3 <skill-dir>/scripts/audit.py <chemins...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period      # focus
python3 <skill-dir>/scripts/audit.py src --json > audit.json               # lisible par machine

• Les indices fix doivent atteindre zéro (ou porter un marqueur deslop-keep justifié). Les indices check (gradient, glow, counter-css, eyebrow, stripe, em-heading, shape) nécessitent chacun un verdict humain, enregistré dans le rapport.
• Le scanner ignore les commentaires et les dossiers node_modules/build. Il ne peut pas juger de l'intention, trouver des casses de mise en page ou voir le texte rendu ; c'est le rôle des étapes 5 et 6.
• Les recherches supplémentaires que le script ne couvre pas se trouvent dans references/audit.md.

3. Les 20 indices : actions exactes et règles de conservation

#	Indice	Action exacte	Conserver uniquement lorsque
1	Tags et pilules	rayon 999px → 3 à 4px, ou faire du tag un texte de couleur simple	Il transporte un état sur lequel le lecteur agit (urgence, statut, filtre actif)
2	Italiques excessifs	supprimer font-style: italic, les utilitaires italic, <em>/<i> utilisés pour l'ornement	Vrais titres d'œuvres, terme étranger cité, un wordmark
3	Polices IA par défaut	remplacer Instrument Serif, Instrument Sans, Geist, Geist Mono, Space Grotesk, IBM Plex Mono, JetBrains Mono, Space Mono lorsqu'elles sont utilisées comme voix de la page	Jamais comme voix ; voir les règles de polices
4	Crénage négatif	supprimer toute letter-spacing négative et tracking-[-…], tracking-tight(er)	Jamais
5	UI trop détaillée	supprimer les gadgets : points de statut en direct, faux trackers, lentilles de curseur, boutons magnétiques, marquees à défilement oblique, compteurs tournants, niveaux décoratifs	Le gadget est le produit (calculatrice, planificateur, configurateur)
6	Abus de séparateurs	garder au maximum une règle structurelle par liste ; supprimer les règles qui ne font que séparer	La règle groupe des lignes dans un tableau ou une liste
7	Nuances et opacités	jetons de couleur unie ; supprimer les lueurs, flous, backdrop-filter, ombres de plus de 40px de flou	Un voile garde le texte lisible sur une photo ; une seule élévation subtile sur une superposition réelle (dialogue, menu)
8	Conteneurs bordés	dé-boîter les cartes dont la bordure ne fait que décorer ; supprimer les bandes d'accentuation à gauche (border-left ≥ 3px)	La boîte est un objet réel (formulaire, reçu, ticket, feuille, tableau), ou la bande signale un état (succès/erreur de formulaire)
9	Diagrammes trop détaillés	couper « Planche I », « Fig. 2 », légendes et étiquettes qui n'expliquent pas	Chaque élément correspond à quelque chose de réel
10	Texte verbeux et redondant	une ligne de divulgation dans le pied de page au lieu de notes « échantillon » répétées ; couper les phrases qui reformulent le titre	La note ajoute une information non mentionnée ailleurs
11	Miettes de code	supprimer // LABEL, le texte du lien /services, [1], EV-01, R-03, STATUS:, les étiquettes en majuscules TEL/MAIL/AREA	Un vrai fil d'Ariane (« Accueil / À propos »)
12	Numérotation de sections	supprimer « 01 / », « § », « Chapitre 1 », les chiffres romains, « Z1 », les compteurs à zéro non significatif dans le balisage et dans le CSS counter()	L'ordre est le contenu : instructions, chronologies, étapes de formulaire, questions de quiz, numéros qui correspondent à des marqueurs sur un diagramme. Alors simple 1. pas 01
13	Sourcils	supprimer la petite étiquette au-dessus d'un titre ; si elle contenait des faits (lieu, métier, prix), les déplacer dans le titre ou la première phrase	C'est une étiquette fonctionnelle : étiquette de formulaire, légende, dt, en-tête de tableau, en-tête de colonne de pied de page
14	Tremblement, bruit	supprimer les textures de tremblement et de bruit	La texture fait partie de la direction artistique (impression risographe, bord de papier) ; la marquer deslop-keep
15	Images ASCII	supprimer	Jamais par défaut
16	Squircles	rayon 12px et plus → 4 à 6px (sections, cartes, images, dialogues)	Vrais cercles (largeur et hauteur égales : avatars, points d'icônes, coches rondes), formes délibérées (fenêtres en arc, extrémités de tuyaux) avec deslop-keep
17	Polices mono	remplacer par la police de texte du site plus font-variant-numeric: tabular-nums	Du vrai code sur la page
18	Sous-titres EN MAJUSCULES	supprimer text-transform: uppercase, les utilitaires uppercase, les majuscules dans les chaînes source ; supprimer également leur espacement de lettres positif	Wordmarks, vraie signalétique (DANGER / AVERTISSEMENT / AVIS, marqueurs de tuyaux), et une marque construite sur des titres condensés (conserver ces sélecteurs sur --keep-caps)
19	Arrière-plans en dégradé	couleur unie	Échelles de données (température, saisons), voiles photo, filets à arrêt net
20	Points dans les titres	supprimer le point final des h1 à h3, titres de page, titres de cartes et de données, lignes de pied de page d'une phrase en taille d'affichage	Phrases de corps de texte, paragraphes de plusieurs phrases, abréviations (« Cie », « Inc. »)

Supprimer également : une phrase accentuée de couleur dans un titre (même indice que #2), les wordmarks géants contourés ou à trait, les taches et cercles décoratifs, les cadres vides et les bandes de film.

4. Polices

• Ne jamais livrer une police IA par défaut (#3) comme voix. Choisissez en fonction du sujet, de ce que la page représente : les métiers de la signalétique obtiennent une police autoroutière ou condensée, les métiers du patrimoine une Caslon ou Didone, les studios une sérif éditoriale avec un sans-sérif discret.
• Un visage d'affichage plus un visage de texte, ou une seule famille. Pas de troisième famille pour les étiquettes.
• Les nombres utilisent font-variant-numeric: tabular-nums dans la police de texte, jamais un mono.
• Lors du changement, mettez également à jour : les importations de polices, les variables CSS, les listes de classes de mise en page, les commentaires d'en-tête qui nomment les polices, et toutes les données qui affichent les noms de polices (fiches de catalogue, guides de style). Vérifiez ensuite chaque titre dont la largeur ou le nombre de lignes dépendait de l'ancienne police.
• Ne chargez pas de polices italiques ou de poids inutilisés après avoir supprimé les italiques.

5. Règles de copie

• Titres : pas de point final, pas de <em>, pas de span accentué, casse de phrase.
• Réécrivez les titres saccadés de deux phrases en une phrase naturelle :
  • « Fermez la vanne. Puis appelez. » → « Fermez la vanne, puis appelez »
  • « Trouvez la fuite. Planifiez le toit. » → « Trouvez la fuite, puis planifiez le toit »
  • « Rapide, contenu, expliqué. » → « Rapide, contenu et expliqué »
  • « Un site professionnel. Un prix clair. » → « Un site professionnel à un prix clair »
  • « Sept couches. Une que vous voyez. » → « Sept couches, et vous en voyez une »
  • Une question plus une instruction peuvent rester en deux parties : « De l'eau ? Réservez une visite le matin ».
• Lors de la suppression d'un sourcil qui portait un fait, le fait doit survivre à un endroit visible.
• Suivez les propres règles de style du projet (variante orthographique, mots interdits, style de tiret). Vérifiez la cohérence orthographique après les modifications.
• N'inventez jamais de preuves : pas de faux avis, comptes, logos, récompenses. Étiquetez les échantillons une fois, dans le pied de page.

6. Édition

• Modifications mécaniques (majuscules, crénage, italiques, rayons, points de titre) par script ; décisions de jugement (réécritures, gadgets, mises en page) à la main.
• Éditez le CSS règle par règle avec un petit analyseur (faites correspondre les blocs sélecteur { corps }, modifiez le corps, réécrivez-le). N'utilisez jamais une grande regex de retour en arrière sur une feuille de style entière.
• Listez d'abord ce qui est conservé, éditez ensuite. Notez quels sélecteurs conservent les majuscules et quels nombres restent, puis transmettez cette liste au script.
• Marquez les exceptions délibérées en ligne pour que les audits futurs les ignorent : /* deslop-keep: raison */ en CSS, {/* deslop-keep: raison */} en JSX, sur la même ligne ou la ligne précédente.

7. Réparer ce que la suppression casse

Chaque suppression peut laisser un trou. Vérifiez chacun de ces points, pour chaque site :

1. Grilles avec une petite première colonne (44px 1fr, 80px 1fr 360px, 90px 1fr 1.4fr) qui contenait un nombre ou un code : supprimez cette colonne à chaque point de rupture.
2. Marge gauche ou remplissage de 28 à 60px sur p, dd, h3, li qui alignait le texte après un nombre supprimé : mettez à 0.
3. Restes de counter-reset / counter-increment, règles li > span / dt span, display: flex; gap sur les titres qui n'espacaient qu'un nombre.
4. Classes mortes non référencées dans le balisage (sauter les classes dynamiques comme s[\badge_${x}`]), règles vides, paramètres et props index` inutilisés, importations et variables de police inutilisées, commentaires obsolètes.
5. Titres qui chevauchaient une image ou dépendaient d'un nombre de lignes, après tout changement de police.
6. Ne retirez jamais les bordures à l'intérieur de ::before / ::after sans lire la règle : une bordure gauche plus basse tournée à 45° est une coche dessinée.

8. Vérification

• Vérification rendue de chaque page à 1440 et 390 de large, avec prefers-reduced-motion: reduce pour que les sections animées s'affichent terminées. Faites défiler toute la page avant de capturer pour que les images paresseuses se chargent ; retirez les superpositions de développement. Une zone d'image blanche est un chargement paresseux ou un optimiseur d'image de développement bloqué jusqu'à preuve du contraire ; comparez avec la production avant de l'appeler un bogue.
• Passage automatisé sur chaque route aux deux largeurs : zéro erreur console, zéro débordement horizontal (scrollWidth > innerWidth).
• Vérifications du projet : vérification de type, lint (zéro nouvel avertissement), vérification des copies ou des mots interdits du projet, build de production.
• Réexécutez le script d'audit : le total fix doit être 0.
• Rafraîchissez les vignettes, aperçus et images de showroom qui montrent l'ancien design, et revérifiez-les.
• Restaurez les fichiers que les builds ou les serveurs de développement réécrivent (par exemple tsconfig.json, next-env.d.ts) avant de les valider.

9. Définition de fait

Tous doivent être vrais :

• Chaque élément du périmètre a été audité (feuilles de style, balisage, données, vignettes).
• audit.py rapporte fix: 0 ; chaque coup check restant a un verdict.
• Chaque exception est sur la liste de conservation ou porte un marqueur deslop-keep avec une raison.
• Chaque page a été rendue et regardée, à 1440 et 390.
• Zéro erreur console et zéro débordement horizontal sur chaque route.
• Vérification de type, lint, vérification de copie et build de production réussis.
• Aperçus et vignettes rafraîchis.
• Rien n'est poussé ou publié sans l'accord de l'utilisateur.

10. Rapport

Terminez par un court rapport sous cette forme :

1. Périmètre : ce qui a été couvert (nombre de sites et pages).
2. Supprimé : par indice, ce qui a changé et environ combien d'instances.
3. Conservé intentionnellement : chaque exception et sa raison.
4. Réparé : casses de mise en page trouvées et corrigées.
5. Vérifié : chaque vérification et son résultat.
6. Points ouverts : tout ce qui n'est pas fait ou non vérifié, énoncé clairement.

Pièges observés dans la pratique

• Le disque se remplit rapidement avec les profils de navigateur headless. Capturez une page à la fois, supprimez chaque profil, surveillez l'espace libre. Un disque plein casse le shell et le serveur de développement.
• Ne tuez pas le serveur de développement de l'utilisateur. Démarrez le vôtre sur un autre port et arrêtez-le une fois terminé.
• Correspondre uniquement sur les noms de classe supprime les étiquettes fonctionnelles ; faites correspondre sur la position et le type d'élément.
• Les titres pilotés par les données et les titres de page à littéral de modèle sont manqués par un scan de titres uniquement JSX ; le script vérifie aussi title:, heading: et title=.
• Une passe qui saute le site parent, le fichier de données ou les vignettes n'est pas terminée.

Concevoir de nouveaux travaux sans les indices

Partez du sujet, pas d'un modèle : un visage d'affichage et un visage de texte choisis pour le métier ou le public, une couleur d'accentuation avec une signification, des coins de 0 à 6px, des étiquettes en casse de phrase, des titres sans points, pas de sourcils, pas de sections numérotées sauf si l'ordre importe, une copie réelle au lieu d'étiquettes de substitution, et chaque élément décoratif lié à quelque chose de vrai à propos de l'entreprise. Exécutez audit.py avant de remettre le travail.