Shijiuwei/unslop

Que fait unslop ?

Unslop a été créé par Damir Sokolovsky (@heydamir), qui a lancé la série Unslopping sur X. Il est sous licence CC BY 4.0, donc gardez ce crédit dans toute copie ou adaptation.

L'UI codée par IA échoue toujours de la même manière. Chaque surface brille, chaque libellé a un emoji, l'espacement est ce que le modèle a tapé ce jour-là, et la copie crie. Unslopping corrige le savoir-faire et garde le produit. Les fonctionnalités, le contenu et l'ordre des sections restent. Ce qui change, c'est que chaque taille, couleur, mot et image devient délibéré.

Enlever le slop n'est que la moitié du travail. Un écran propre mais qui pourrait appartenir à n'importe quel produit est le prochain modèle. Chaque exécution se termine avec un écran que seul ce produit pourrait avoir.

La différence entre le slop et le savoir-faire réside dans l'endroit où va la richesse. Le slop étale la couleur et les effets sur le chrome, les arrière-plans, les boutons, les bordures et les libellés. Le savoir-faire garde le chrome calme et place la richesse dans un ou deux moments de contenu dont les gens se souviennent, comme un objet rendu, un beau graphique ou une image du monde du produit.

Travaillez comme un designer faisant une passe de vérification des spécifications, une couche à la fois, sur l'ensemble de l'écran.

À quoi ressemble un bon résultat

• Un élément lumineux. Chaque écran a une chose polie qui porte la couleur et le savoir-faire : un objet rendu, une scène peinte ou un graphique riche. Tout autour est calme, donc cela se lit instantanément.
• Chrome calme. La navigation, les boutons et le texte utilisent les neutres teintés et un accent. Rien ne brille, rien ne rivalise avec l'élément lumineux.
• Une idée claire. Vous pouvez dire en une phrase ce que montre le visuel et pourquoi il appartient à ce produit.
• Texte sur espace calme. Le titre se trouve sur une partie de l'image ou de la mise en page qui a été laissée vide pour lui, court et spécifique, avec une action principale et une action secondaire, et rien d'empilé en dessous.
• Vrai produit, vrai matériau. Les aperçus ressemblent à la vraie application avec des données plausibles, et les objets ressemblent à de vraies choses avec du poids, de la lumière et de l'ombre.

Les styles visuels qui fonctionnent généralement et ceux qui échouent se trouvent dans references/visuals.md. Les exemples finis à étudier sont dans references/refs.md, et les traitements de code comme dessiner une image en glyphes sont dans references/effects.md.

Exécution

1. Regardez l'écran. Trouvez les fichiers qui le rendent. Si vous pouvez exécuter l'application ou ouvrir le fichier dans un navigateur et prendre une capture d'écran, faites-le, afin de juger ce que les gens voient et pas seulement le code.

   • Seulement un lien vers un site en ligne, pas de code ? Sauvegardez la page avec node <chemin du skill>/scripts/snapshot.mjs <url> unslop/original.html et travaillez sur une copie de ce fichier. Ajoutez --dark ou --light pour correspondre au thème que l'utilisateur voit. Cela enregistre aussi original.live.png, une capture d'écran de la page en ligne. Rendez donc la copie sauvegardée et comparez les deux avant de commencer. Les arrière-plans animés dessinés par des scripts ne survivent pas, alors décrivez-les dans l'audit à partir de la page en ligne.
   • Seulement une capture d'écran ? Reconstruisez d'abord l'écran sous forme d'un seul fichier HTML statique, en le faisant correspondre de près, et traitez-le comme l'original.
   • Dans les deux cas, le résultat est une page repensée en code que l'utilisateur peut remettre au propriétaire du vrai site, donc dites-le dans le rapport.

2. Audit. Parcourez references/signs.md et listez chaque signe que vous trouvez, une ligne chacun avec son emplacement.

3. Décidez combien changer. Lisez l'audit honnêtement avant de planifier quoi que ce soit.

   • Gros slop, de nombreux signes sur la couleur, la police, les icônes et la copie. Exécutez le processus complet ci-dessous.
   • Slop léger, un écran principalement conçu avec quelques signes restants. Mode polissage. Corrigez uniquement ce que l'audit a trouvé, tirez la direction de la marque existante au lieu d'en inventer une nouvelle, et conservez la palette, la police, la mise en page et le visuel. Les idées plus grandes, comme un moment manquant ou une scène pour le héros, vont dans le rapport comme suggestions, pas comme changements.
   • Pas de slop. Dites-le clairement et suggérez deux ou trois petites améliorations au maximum, avec des valeurs exactes. Appliquez-les seulement si l'utilisateur est d'accord, et arrêtez-vous là. Ne changez jamais un bon écran juste pour le rendre différent.

4. Définissez la direction et arrêtez-vous. Écrivez les cinq lignes décrites ci-dessous. Montrez l'audit et la direction à l'utilisateur et attendez sa réponse avant de modifier, car changer la direction plus tard signifie tout refaire. Si vous avez un outil pour poser des questions à l'utilisateur, posez-les via celui-ci, sinon demandez en texte brut et arrêtez-vous. Sautez l'attente uniquement lorsque l'utilisateur a déjà dit de simplement le faire.

5. Corrigez en neuf passes, dans l'ordre. Terminez une passe sur l'ensemble de l'écran avant de commencer la suivante. Lorsque presque chaque ligne change, planifiez les passes dans l'ordre puis écrivez le nouvel écran en une seule fois, tant que chaque passe est appliquée. L'espacement vient en premier car tout le reste se lit différemment une fois le rythme correct. La copie vient avant la police et la mise en page car la longueur du titre décide de sa taille et de son emplacement. Les visuels et l'animation viennent en dernier car ils doivent s'adapter à un écran qui fonctionne déjà sans eux.

6. Vérifiez. Exécutez la liste de vérification à la fin de ce fichier, rendez à nouveau et comparez avec la liste d'audit. Tout ce qui est encore sur la liste est corrigé.

7. Rapportez la direction, quelques lignes par passe sur ce qui a changé, et toute invite d'image que vous avez écrite.

8. Enregistrez, lorsque demandé ou lorsque l'utilisateur veut quelque chose à partager. Construisez le fichier d'histoire et rendez la vidéo décrite dans Vidéo d'histoire. Si l'utilisateur le demande au début, écrivez chaque passe dans le fichier d'histoire au fur et à mesure.

Gardez une exécution rapide. Rendez l'écran pour le vérifier au maximum trois fois. Lorsque vous générez une image, commencez-la juste après la confirmation de la direction et poursuivez les premières passes pendant son exécution, au lieu d'attendre.

Les valeurs exactes pour chaque passe se trouvent dans references/tokens.md.

Direction

Avant de toucher à quoi que ce soit, écrivez cinq lignes courtes. Dérivez-les de ce que la page dit que le produit fait et pour qui. Jamais de ce qui est tendance.

• Produit. Ce qu'il fait et pour qui, en une phrase simple.
• Caractère. Deux ou trois mots concrets, comme calme, précis, un peu chaleureux ou rapide, technique, ludique. Les mots comme propre, moderne, élégant, minimal et premium ne sont pas autorisés, car ils décrivent tous les modèles.
• Monde. Le lieu ou le matériau auquel le produit appartient naturellement. Une application de notes vit près du papier et de l'encre, un outil de surveillance près des instruments et des quarts de nuit, une application de voyage près des cartes et de la lumière des fenêtres. Ce monde définit la teinte des neutres, l'accent et le visuel.
• Moments. Un ou deux endroits où l'écran obtient une couleur, un matériau et un détail riches, choisis parmi ce que le produit montre. Une carte ou un appareil rendu à l'intérieur de l'aperçu, un graphique dont les couleurs signifient chacune une série, un objet du monde placé à côté du contenu. Écrivez ce qu'ils sont.
• Signature. Un petit détail que seul ce produit aurait, utilisé de manière cohérente. Un point d'état en direct pour un outil de surveillance, des touches de clavier pour un outil de développeur, des soulignements dessinés à la main pour une application d'enseignement, une ligne d'itinéraire pour une application de livraison. Un détail, pas cinq.

Les exemples ici montrent seulement la forme d'une réponse. Dérivez la vôtre du produit devant vous, même si un exemple correspond par hasard.

Si le produit a déjà une vraie marque, comme un fichier logo, une couleur ou une police qui n'est pas du slop, conservez-la et construisez la direction autour d'elle. Un dégradé violet à bleu, des étincelles et une lueur sont du slop même s'ils se trouvent dans le logo, donc ils ne comptent pas comme une marque à moins que l'utilisateur ne le dise.

1. Espacement

• Tout repose sur une grille de 4px. Les marges, les paddings, les écarts et les hauteurs fixes sont des multiples de 4, donc 28 ou 104 sont acceptables même s'ils ne sont pas dans la liste des tokens. Un pas de 2px est acceptable pour les ajustements dans les petits contrôles, et une valeur impaire qui centre exactement quelque chose reste.
• Même chose, même taille. Toutes les lignes d'une liste partagent une hauteur et un écart, toutes les cartes d'une ligne partagent un padding.
• L'espace montre le regroupement. L'espace à l'intérieur d'un groupe est plus petit que l'espace entre les groupes, donc une liste se lit comme un bloc et les sections se lisent comme des blocs séparés.
• Les choses s'alignent. Les icônes sont dans une colonne, les libellés commencent sur une ligne, les nombres s'alignent à droite dans une colonne. Rien n'est décalé de la ligne avec un translate ou une marge impaire.
• Le padding suit la densité. Panneaux compacts et barres latérales autour de 16, cartes 20 à 24, bords de page 24 à 32.
• La navigation est la partie la plus dense d'une application. Les lignes font 32 à 36 de hauteur avec 2 à 4 entre elles, les icônes dans une colonne, les libellés sur une ligne. Un libellé de section est plus proche de ses propres éléments que de la section au-dessus, comme 24 au-dessus et 8 en dessous. Mesurez la barre latérale après la passe, c'est là que l'espacement casse le plus souvent.
• Supprimez les valeurs uniques qui cassent le rythme, comme mt-[13px] ou py-[11px], et remplacez-les par des pas de l'échelle.

2. Couleur

• Construisez à partir d'une rampe neutre, teintée vers le monde de la direction. Choisissez graphite, chaud ou encre dans les tokens, ou teintez la vôtre de la même manière. L'arrière-plan, les surfaces surélevées, les bordures et le texte proviennent tous de cette rampe.
• Dans les applications et les tableaux de bord, les arrière-plans, les surfaces, les bordures et le texte restent neutres, la rampe graphite ou quelque chose d'aussi gris. Les gens les regardent pendant des heures et le contenu doit porter la couleur. Un écran dont l'arrière-plan se lit comme orange, marron, bleu ou vert est allé trop loin. Le monde se montre dans l'accent, les graphiques et les moments, pas dans les surfaces. Les pages d'atterrissage peuvent teinter leurs surfaces davantage vers le monde.
• Trois rôles de texte, primaire, secondaire et atténué. Pas dix lavandes légèrement différentes.
• Dans le chrome, un accent, utilisé rarement. Il marque l'action principale, la sélection ou le seul nombre qui compte.
• Les moments de la direction sont l'exception. À l'intérieur d'eux, la couleur peut être riche, plusieurs teintes dans un graphique, un objet rendu avec des matériaux réels, une image avec sa propre lumière, tant qu'elle reste dans le monde et que chaque couleur signifie quelque chose.
• Si la marque a une vraie couleur, elle devient l'accent et quitte les surfaces. S'il n'y a pas de vraie couleur de marque, prenez l'accent du monde.
• L'accent avec du texte dessus atteint un contraste de 4,5 à 1. Si ce n'est pas le cas, assombrissez-le ou mettez du texte sombre dessus. L'accent utilisé comme texte ou encre sur une surface claire a besoin du même contraste, donc utilisez-y une teinte plus foncée de l'accent.
• Sur les thèmes sombres, le bouton principal peut être un blanc cassé de la rampe avec du texte sombre, et l'accent peut vivre dans un endroit plus petit comme la sélection ou un chiffre clé. Cela semble souvent plus délibéré qu'un bouton coloré.
• Les couleurs sémantiques ne portent que du sens, comme le vert pour un bon changement et le rouge pour une erreur, et elles sont atténuées pour s'intégrer dans la palette.
• Supprimez les dégradés de teinte sur les surfaces, le texte en dégradé, les lueurs colorées et les ombres colorées, les lavis de couleur radiaux et les blobs derrière le contenu, et les bordures néon.
• Les bordures sont des lignes fines et discrètes, la couleur du texte de la rampe à 6 à 10 % d'opacité.
• Sur les thèmes sombres, la profondeur provient des paliers de surface et des lignes fines, pas des ombres. Une fenêtre ou un objet flottant au-dessus d'une image peut conserver une ombre neutre douce. Sur les thèmes clairs, les ombres sont neutres, douces et petites.
• Un dégradé n'est autorisé que comme un petit changement de ton à l'intérieur d'un neutre, comme une ligne active passant de #2b2b2b à #1f1f1f. Jamais d'une teinte à une autre.

3. Icônes

• Chaque emoji utilisé comme icône ou comme décoration dans un libellé devient une icône linéaire d'un seul ensemble. Utilisez l'ensemble que le projet a déjà, sinon lucide.
• Une taille et un trait partout, 16 ou 18px avec un trait de 1.5.
• Les icônes prennent la couleur de leur rôle de texte, généralement secondaire ou atténué. Elles n'obtiennent jamais leurs propres couleurs.
• La boîte d'icônes a la même largeur dans chaque ligne et l'écart avec le libellé est fixe, 8 ou 10, donc les libellés s'alignent.
• Supprimez les icônes qui n'ajoutent rien, comme un emoji dans chaque titre de carte ou avant chaque libellé de section. Les catégories qui ont besoin de couleur obtiennent un petit point d'état.

4. Copie

• Les titres disent ce que le produit fait pour qui, en mots simples, afin qu'ils ne pourraient pas convenir à un autre produit. Utilisez les faits déjà sur la page et n'en inventez pas de nouveaux.
• Pas de points d'exclamation dans le texte d'interface, et jamais !!.
• Pas de titres de salutation comme Bon retour, Damir ! 👋. Le titre nomme le contexte, comme le nom de la page ou la période, par exemple Octobre 2026.
• Libellés courts. Rechercher, pas Rechercher quoi que ce soit....
• Un changement dit à quoi il se compare, comme +12 % vs le mois dernier ou 3 de moins vs le mois dernier.
• Les titres, sous-titres, libellés, boutons et légendes se terminent sans point. Seuls les paragraphes de plusieurs phrases gardent leurs points.
• Pas de mots hype comme surpuissant, sans couture, débloquer, magique, révolutionner ou révolutionnaire, et pas de Alimenté par l'IA sur tout.
• Les affirmations qui ne peuvent pas être vérifiées, comme Aimé par plus de 10 000 équipes ou 10 fois plus rapide, deviennent discrètes et spécifiques si l'utilisateur confirme qu'elles sont réelles, et sont supprimées sinon. Demandez et listez-les dans le rapport.
• Les données factices ont l'air réelles, avec des chiffres et des noms plausibles, jamais [X] ou 123 456.
• Les badges comme PRO, Nouveau ✨ ou Bêta 🚀 disparaissent sauf si le produit en a vraiment besoin, et alors ils sont en texte discret.

5. Typographie

• Choisissez la police pour le caractère de la direction, parmi les familles des tokens. Gardez la police du projet lorsqu'elle fait partie d'une vraie marque. Une police par défaut comme Inter que personne n'a choisie peut être échangée lorsqu'une autre famille correspond mieux au caractère. Une famille pour l'interface, plus au maximum un partenaire de n'importe quelle ligne des tokens, un mono pour les chiffres et les métadonnées ou une police d'affichage pour les grands titres.
• Quelques tailles d'une échelle et deux graisses, 400 et 500, avec 600 au maximum pour une emphase rare. Pas de titres de 700 à 900, pas de texte en dégradé.
• La hiérarchie vient de la taille et de la couleur, pas de la graisse.
• Casse de phrase partout. Les libellés comme NAVIGATION ou PAYÉ CE MOIS-CI avec un large tracking deviennent Navigation et Payé ce mois-ci.
• Le petit texte n'obtient jamais d'espacement négatif des lettres. La lisibilité sur du petit texte signifie plus grand, un peu plus gras ou légèrement plus lâche. Le tracking serré est uniquement pour les grands textes d'affichage.
• Les nombres utilisent tabular-nums et un format sur tout l'écran. Si un chiffre

…

[tronqué pour la traduction]

6. Mise en page

• La mise en page existe pour une chose : montrer la hiérarchie du contenu. Si un élément est plus important, il a plus d'espace et vient plus tôt. Si deux éléments ont le même rôle, ils ont la même taille.
• Une grille ou une colonne fait le travail. Pas d'alignements aléatoires avec white-space: nowrap, overflow: hidden et position: absolute sauf pour des cas très spécifiques comme une superposition.
• Sur un écran, les choses sont soit empilées, soit disposées en grille. Pas les deux en même temps sans une raison claire.
• Chaque section a un but. Si une section ne peut pas être décrite en une phrase, soit elle change, soit elle disparaît.
• Les espaces vides ne sont pas du gaspillage. Ils montrent que l'écran est terminé et que tout ce qui est important est visible.

7. Détails

• Les bords des cartes, des listes et des tableaux sont nets. Les coins arrondis sont petits, 4 ou 6px. Les grands arrondis (12, 16, 24) sont pour une carte spéciale au-dessus du contenu, pas pour chaque surface.
• Les séparateurs de ligne sont fins, un pixel, avec la couleur de bordure de la rampe.
• Les barres de défilement sont fines, avec une couleur de pouce de la rampe à 30% d'opacité. Elles ne sont jamais visibles jusqu'à ce que l'utilisateur fasse défiler.
• Les états de survol des éléments cliquables changent l'arrière-plan, pas la couleur du texte ou la bordure.
• Les menus déroulants, les sélecteurs et les champs de formulaire ont un arrière-plan un peu plus foncé ou plus clair que la surface en dessous, pas une bordure colorée.
• Les boutons sont soit remplis (fond avec texte), soit en contour (bordure avec texte). Pas les deux en même temps sur le même écran pour le même niveau d'action.
• Les actions principales sont mises en évidence, les actions secondaires sont discrètes.

8. Visuels

• Le visuel principal de l'écran (héro) est un objet ou une scène du monde du produit, pas une illustration générique d'une personne souriante ou d'une fusée.
• Le visuel est rendu comme s'il était pris en photo ou dessiné par un artiste, pas comme un collage de formes aléatoires.
• Les couleurs du visuel sont celles du monde, pas une palette arc-en-ciel.
• Si un outil d'image est disponible, générez un visuel qui correspond à la direction et aux moments définis.
• Les visuels sont placés là où ils aident à comprendre le produit, pas juste pour remplir un vide.

9. Animation

• L'animation sert à montrer le changement, pas à décorer. Une transition de page, un chargement de données, un survol qui révèle quelque chose.
• Une durée unique, 200 à 300ms, avec une fonction d'atténuation comme ease-out ou ease-in-out.
• Pas d'animation automatique comme des images qui bougent en continu, des textes qui défilent ou des particules qui flottent.
• Si un élément doit attirer l'attention, il le fait par un changement discret, comme un fond qui s'éclaire un peu, pas par un clignotement ou un saut.
• Les notifications et les messages système apparaissent avec une transition douce, pas un popup soudain.

Liste de vérification

• Grille 4px partout.
• Pas de valeurs uniques dans l'espacement.
• Un seul neutre teinté, pas de couleurs sur les surfaces.
• Trois rôles de texte, pas dix.
• Un seul accent dans le chrome.
• Pas d'émojis comme icônes.
• Icônes de même taille et même trait.
• Titres parlant du produit, pas de salutations.
• Pas de points d'exclamation ni de mots hype.
• Données factices plausibles.
• Une ou deux familles de polices maximum.
• Tailles et graisses cohérentes.
• Casse de phrase.
• Mise en page basée sur le contenu.
• Visuels du monde du produit.
• Animations discrètes et utiles.
• Pas de slop visible.

Vidéo d'histoire

(Si l'utilisateur demande un enregistrement)

1. Prenez une capture d'écran de l'écran original.
2. Prenez une capture d'écran de l'écran après chaque passe, dans l'ordre : espacement, couleur, icônes, copie, typographie, mise en page, détails, visuels, animation.
3. Composez une vidéo qui montre chaque étape avec une transition douce, 2 secondes par image.
4. Ajoutez un texte en bas à droite : Unslopping by <votre nom> with @Shijiuwei/unslop.
5. La vidéo finale fait 18 à 20 secondes.