Comment nettoyer le bloat IA des interfaces web avec kill-ai-slop

Chaque fois que quelqu'un génère une interface via Claude ou Cursor sans système de design clair, le résultat est le même modèle. Des dégradés violet-indigo, des bordures de cartes lumineuses, des emojis dispersés sur l'écran, du TEXTE EN MAJUSCULES dans les compteurs de métriques, et une mascotte dans le coin.

Les machines génèrent ces éléments lorsqu'elles manquent de goût mais ont besoin de créer l'apparence d'un travail complexe. Nous sommes devenus si habitués à ce bruit visuel sur Product Hunt et dans les nouveaux projets personnels que nous avons cessé de le remarquer.

Un projet kill-ai-slop est récemment apparu sur GitHub qui a déclaré la guerre à cette fadeur numérique. L'auteur a compilé 33 signes caractéristiques de design généré, les a organisés, et a écrit un outil pour le nettoyage automatique du code.

Deux parties d'un même projet

Le dépôt aborde le problème à deux niveaux : théorique et pratique.

D'une part, c'est une référence interactive déployée sur un site web séparé. Elle contient 33 motifs de design machine spécifiques. Chaque exemple inclut une démo interactive avant-après en HTML pur, démontrant comment transformer un bloc surchargé en markup propre.

D'autre part, le projet inclut une compétence prête à l'emploi pour les assistants de codage et un scanner autonome. L'utilitaire traverse l'arborescence source, identifie les marqueurs de code généré, explique la cause racine, et suggère une correction propre.

Ce que le scanner considère exactement comme des déchets

La base de données du projet ne contient pas de plaintes abstraites—toutes les règles découlent de vrais extraits que les modèles génératifs injectent dans le CSS et le markup par défaut.

Le scanner recherche des marqueurs caractéristiques :

• Des taches de couleur floues et des lueurs de dégradé derrière les cartes (l'effet blur avec des teintes violettes)
• Des badges de statut sans signification au-dessus de chaque titre
• Des emojis partout au lieu d'une typographie appropriée ou d'icônes vectorielles
• Du texte bourré de buzzwords corporate comme "unlock the power of your data"

Le site du projet lui-même est conçu comme l'opposé complet de ces motifs. Il utilise un concept papier et encre : une grille stricte, un seul rouge d'accent pour les annotations, des séparateurs fins, et zéro dépendance aux scripts côté client lourds.

Comment exécuter la vérification vous-même

Vous pouvez vérifier le projet sans installer des paquets volumineux. Le scanner est écrit en Node.js pur et n'inclut pas d'arbre de dépendances.

Pour exécuter l'analyse, exécutez simplement la commande dans le terminal :

node skill/scripts/scan.mjs path/to/project

Si vous avez besoin d'une sortie structurée pour la CI ou des scripts externes, le flag de format lisible par machine est utile :

node skill/scripts/scan.mjs path/to/project --json

L'utilitaire analyse uniquement le markup et les styles—il ne réécrira aucun fichier sans votre permission. Lorsqu'un accent visuel spécifique est intentionnel et doit rester, vous pouvez désactiver la vérification avec un commentaire deslop-ignore directement dans le code. Les flags --only et --skip sont également disponibles pour filtrer des règles spécifiques, ainsi que l'argument --rules pour ajouter des vérifications personnalisées.

Intégration dans les flux de travail des assistants

Si vous codez avec Cursor ou Claude Code, vous pouvez intégrer l'outil directement comme une compétence externe :

npx skills add yetone/kill-ai-slop

Ensuite, vous n'avez qu'à donner à l'assistant une simple commande textuelle : "supprime tout le bloat IA de ce composant". L'agent va extraire les règles du catalogue, les faire correspondre avec les fragments trouvés, et réécrire proprement le CSS en supprimant les ombres inutiles, les transforms non justifiées, et les espacements gonflés.

Qui trouvera ce dépôt utile

Le projet plaira aux développeurs qui construisent fréquemment des prototypes avec des LLM mais qui sont fatigués de leur style visuel uniforme. L'outil aide à restaurer la propreté de l'interface sans nettoyage manuel fastidieux du markup.

Le catalogue sur le site sert également de fiche de référence pour les bases de l'esthétique web. Si vous avez du mal à expliquer à une IA via prompt pourquoi une carte suggérée paraît bon marché, les exemples de référence fournissent des lignes directrices techniques claires : quel poids de trait choisir, comment établir une hiérarchie par l'espacement, et pourquoi éviter les dégradés sans fin.