Que fait anti-slop ?
Les interfaces « vibe-codées » échouent toujours de la même manière. Cette compétence fusionne trois choses en un seul flux de travail : la méthode passe-par-passe de unslop, la machinerie de direction artistique de taste-skill, et une liste de 20 signes révélateurs avec un script qui attrape les plus mécaniques.
Crédits et licences
- La méthode est adaptée de unslop par Damir Sokolovsky (https://github.com/heydamir/unslop), sous licence CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Adaptée : condensée et fusionnée avec taste-skill par Leonxlnx et la liste de signes de Molveau dans
references/playbook.md. Gardez ce crédit dans toute copie ou adaptation. L'original est vendu sans modification dansreferences/vendor/unslop/. - Le processus de direction artistique, les règles maison et l'inspecteur viennent de taste-skill par Leonxlnx (https://github.com/Leonxlnx/taste-skill), MIT, vendu sans modification dans
references/vendor/taste/. - La liste des 20 signes et
scripts/detect-tells.mjssont propres à Molveau (MIT). scripts/story.mjsest adapté du rendu de unslop (CC BY 4.0, changements listés dans son en-tête) ; il reste CC BY 4.0, tout commescripts/story-server.mjs, son serveur local.scripts/story-contrast.mjsest propre à Molveau (MIT).
Commencez ici
Lisez references/playbook.md en premier, en commençant par son bloc « Faites ceci d'abord » ; ouvrez les fichiers vendus uniquement pour approfondir ou pour des exemples concrets. Le playbook est la doctrine fusionnée (direction, passes, copie, espacement, couleur, typographie, icônes, détails, données, écrans d'application, imagerie, motion, vérifications) avec des balises de source et les décisions prises lorsque les sources divergent. Le tableau « Quand lire quoi » ci-dessous est l'index de profondeur.
Chevauchement : ceci est la passe anti-look IA. Les lignes de critique de la compétence ui sont la revue de design générale plus légère, et design-grill est l'audit multi-lentilles approfondi ; utilisez-les pour la qualité du design au-delà des signes.
Portail de direction
Faites ceci avant tout code pour une nouvelle page ou un nouvel écran, et comme étape 3 de chaque session de slop lourd, même lorsque la demande est d'une ligne ou dit de simplement le faire. Le reste de cette compétence supprime les erreurs ; elle ne donne pas de caractère à un écran. Si ignoré, le résultat est la page médiane que chaque modèle produit : juste dans les détails, n'appartenant à personne.
- Cinq lignes. Produit : ce qu'il fait, pour qui. Caractère : deux ou trois mots concrets (« calme, précis, un peu chaud »), jamais propre, moderne, élégant, minimal ou premium. Monde : le lieu ou le matériau auquel le produit appartient ; il teinte les neutres et définit l'accent. Moments : les un ou deux endroits qui reçoivent une couleur et des détails riches. Signature : un petit détail que seul ce produit a, utilisé de manière cohérente. Un moment est dessiné avec soin, pas seulement nettoyé : un graphique redessiné pour ce qu'il doit dire (lignes lisses, une comparaison en miroir, une échelle réelle), ou l'objet propre du produit rendu avec poids et lumière.
- Inventaire, puis l'idée. Listez 8 à 12 choses qu'aucun concurrent ne partage (nom, rue, chiffres du brief, matériaux, outils, rituels, documents que le métier imprime). Écrivez : « Sur cet écran, [un élément] devient [le dispositif] ». Ce dispositif est le moment.
- Refusez les valeurs par défaut de second ordre sauf si la marque les possède déjà. Ce sont ce qu'un modèle atteint une fois les signes évidents bannis :
- une page crème, pierre ou blanc chaud avec un accent orange brûlé, terre cuite, sauge ou forêt, avec ou sans titre en sérif (le look « papier et encre » est le nouveau défaut, pas une direction) ;
- Fraunces, Instrument Serif, Playfair ou Georgia comme police de titre par réflexe ; system-ui comme seule police ;
- Inter ou Geist sur blanc avec un accent indigo ou bleu ;
- hero, trois fonctionnalités, témoignages, appel à l'action, dans cet ordre, sans argument pour cela ; sur un écran d'application, quatre cartes de statistiques égales au-dessus d'un graphique à barres ;
- un accroche centrée, un titre et deux boutons comme seul premier écran.
- Test d'échange. Remplacez le nom et le métier par ceux d'un concurrent. Si l'écran correspond toujours, changez la revendication, le moment et la signature, et testez à nouveau.
- Montrez et attendez. Montrez les cinq lignes et l'idée, et attendez le propriétaire. Si vous ne pouvez pas demander (l'utilisateur a dit de simplement construire, ou vous travaillez sans personne), écrivez-les comme commentaire en haut du fichier principal et construisez exactement cela.
Profondeur : playbook anti-slop §2 (direction) et §12 (écrans d'application) ; la compétence design-inspiration-index pour des références réelles.
L'idée centrale
Le slop répand la couleur et les effets sur le chrome : arrière-plans, boutons, bordures, étiquettes. Le savoir-faire garde le chrome discret et met la richesse dans un ou deux moments de contenu dont les gens se souviennent. Supprimer le slop est la moitié du travail ; un écran propre qui pourrait appartenir à n'importe quel produit est le prochain modèle. Chaque session se termine par un écran que seul ce produit pourrait avoir.
Ordre de travail
- Page de zéro ou refonte profonde ? Suivez le processus de taste-skill (
references/vendor/taste/taste-skill.md) avec les surcharges du playbook. Écrans d'application : playbook §12. - Regardez l'écran, rendu si possible, pas seulement le code.
- Auditez par rapport à la liste des signes (
references/vendor/unslop/unslop/references/signs.md) et les 20 signes (references/tells.md). Une ligne par signe, avec son emplacement. - Estimez le travail (lourd, léger, pas de slop) et écrivez la direction, puis attendez le propriétaire (playbook §1 et §2).
- Corrigez en neuf passes, chacune sur tout l'écran : espacement, couleur, icônes, copie, typographie, mise en page, détails, visuels, motion (playbook §3 à §14).
- Vérifiez avec la checklist du playbook, exécutez le détecteur, comparez avec l'audit (playbook §15).
- Rapportez la direction, quelques lignes par passe, et chaque revendication que vous avez retirée ou ne pouviez pas vérifier.
Les 20 signes
Tableau complet avec remplacements : references/tells.md. Résumé, avec ce que le script attrape :
| # | Signe | Script |
|---|---|---|
| 1 | Dégradé violet/fuchsia/indigo | oui |
| 2 | Texte en dégradé | oui |
| 3 | Emoji dans la copie | oui |
| 4 | Inter ou Space Grotesk partout | non |
| 5 | Bordure latérale colorée | oui |
| 6 | Glassmorphisme décoratif | oui |
| 7 | Mode sombre faible contraste | non |
| 8 | Trois boîtes d'icônes en ligne | non |
| 9 | Pilule d'accroche au-dessus du titre | non |
| 10 | Lucide par défaut | oui |
| 11 | shadcn/ui non modifié | non |
| 12 | Fondu au défilement | oui |
| 13 | Lueur suivant le curseur | non |
| 14 | Fondu au survol sur les boutons | oui |
| 15 | Espacement incohérent | non |
| 16 | Tiret cadratin dans la copie | oui |
| 17 | Copie en jargon | oui |
| 18 | Mots d'accent en italique sérif | non |
| 19 | Space Grotesk avec son partenaire sérif d'affichage habituel (paire dans references/tells.md) | oui |
| 20 | Grain sur un dégradé | non |
Le détecteur
node <dossier compétence>/scripts/detect-tells.mjs [--json] [--include-tests] <chemins...>
Zéro dépendance, Node 20 ou plus récent, aucune importation en dehors de ce dossier de compétence, donc cela fonctionne lorsque la compétence est installée seule. Sortie 0 propre, 1 résultats, 2 utilisation. Il ignore node_modules .git .next dist build .open-next coverage et les fichiers de test. Il rapporte chemin:ligne #étiquette de signe correspondance. Les limites sont listées à la fin de references/tells.md ; traitez un résultat comme « regardez ici ».
Test à cliquet dans un projet
Un cliquet épingle le nombre d'aujourd'hui et échoue lorsqu'il augmente, de sorte que les signes ne peuvent que diminuer. Esquisse pour node:test (adaptez les chemins et la base de référence) :
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync nécessite Node 22 ; sur 20, parcourez les dossiers vous-même
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // numéro de signe -> résultats autorisés aujourd'hui
test('aucun nouveau signe vibe-codé', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `signe ${tell} : ${n} résultats, base ${BASELINE[tell] ?? 0}`);
});
Abaissez la base de référence chaque fois que vous en corrigez un ; ne l'augmentez jamais.
Vidéo d'histoire
Un clip carré, d'environ 10 secondes, où l'écran se déslope étape par étape avec des lignes rouges. Faites-le uniquement lorsqu'on vous le demande. Construisez le fichier d'histoire exactement comme décrit dans la section « Story video » de unslop (references/vendor/unslop/unslop.md : un story.html, CSS .s1 à .s5 par-dessus, data-gap, data-radius, data-slop, échanges), puis rendez-le avec le rendu adapté de cette compétence :
node <dossier compétence>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide pour 16:9, --play pour regarder
Ce qu'il ajoute au rendu de unslop :
- Une étape d'accessibilité. Une étape dont le nom contient Accessibilité affiche des mesures en direct. Mettez
data-contrastsur deux à quatre éléments de texte dont le contraste change ; chacun affiche son ratio WCAG, rouge en dessous de 4.5:1 (3:1 pour les grands textes), blanc avecAAune fois réussi, gris?lorsqu'une couleur ne peut pas être lue (commelab()oucolor(display-p3 ...)) : utilisez des couleurs sRGB, hex ouoklch()sur ces éléments. Mettezdata-targetsur une ou deux commandes ; chacune affiche sa taille, rouge en dessous de 24 par 24 px. Choisissez des éléments qui échouent dans l'avant ; ne marquez jamais un élément qui échoue encore dans l'après. - Une légende,
<meta name="story-caption" content="...">, en bas à gauche. Indiquez uniquement ce qui est vrai de la session, comme le modèle et le fait que l'écran n'a pas été édité à la main. - Le crédit
molveau/skills · unslop method by @heydamirest dessiné sur chaque image, comme le demande la licence CC BY 4.0 de unslop. Ne le supprimez pas.
L'histoire est une présentation de fichiers réels : l'étape 0 est l'avant tel qu'il était, et la dernière étape est égale au fichier propre que vous livrez. Ne peaufinez pas l'histoire au-delà de l'écran livré.
Quand lire quoi
| Besoin | Lire |
|---|---|
| Les règles fusionnées, les valeurs et les appels de conflit | references/playbook.md |
| Les 20 signes avec remplacements et les limites du détecteur | references/tells.md |
| La méthode complète de unslop, direction, neuf passes, checklist, vidéo d'histoire | references/vendor/unslop/unslop.md |
| Valeurs exactes (espacement, échelle typographique, rampes, courbes de motion) | references/vendor/unslop/unslop/references/tokens.md (ses valeurs de motion sont remplacées : le playbook ui §10 et motion §5 gagnent, conflit 19 du playbook) |
| La liste d'audit des signes | references/vendor/unslop/unslop/references/signs.md |
| Visuels hero, invites d'image, quels styles fonctionnent | references/vendor/unslop/unslop/references/visuals.md |
| Code de glyphe, tramage, dither et duotone | references/vendor/unslop/unslop/references/effects.md |
| Écrans de référence terminés (images) | references/vendor/unslop/unslop/references/refs.md |
| Instantané d'une URL en direct pour travailler sur une copie | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| Une page de zéro ou une refonte profonde : inventaire, direction traitée, idée, règles maison, portail | references/vendor/taste/taste-skill.md |
| Tableaux de bord, écrans d'administration et de paramètres en profondeur | references/vendor/taste/taste-skill/references/app-screens.md |
| Jeu de copie, arithmétique à deux lignes, preuve sans inventer | references/vendor/taste/taste-skill/references/copy.md |
| Échelle typographique, affichage, chargement de polices | references/vendor/taste/taste-skill/references/type.md |
| Rôles de palette, champs, pages sombres, contraste | references/vendor/taste/taste-skill/references/colour.md |
| Marges, espace vide, le cadre, sections, le téléphone | references/vendor/taste/taste-skill/references/layout.md |
| Trouver, créditer, placer et traiter images et vidéos | references/vendor/taste/taste-skill/references/imagery.md |
Recettes de motion (opt-in : playbook motion §9) et scènes de défilement | references/vendor/taste/taste-skill/references/motion.md, references/vendor/taste/taste-skill/references/scenes.md |
| Juger un résultat avec une grille d'évaluation | references/vendor/taste/taste-skill/references/critique.md |
| Le registre des signes datés par vague | references/vendor/taste/taste-skill/references/tells.md |
| L'étude derrière les chiffres de taste | references/vendor/taste/taste-skill/references/research.md |
Les fichiers vendus conservent leur mise en page amont, donc quelques liens relatifs à l'intérieur peuvent ne pas résoudre ici. Les scripts de taste-skill lisent son dossier library/ (ne le lisez pas en entier ; exécutez draw.mjs) ; certains scripts nécessitent Node 22, un navigateur, Playwright, ffmpeg ou un accès réseau. Les vérifications visuelles à exécuter sont décidées dans le playbook ui, conflit 14 (le conflit 14 de ce playbook y renvoie).