Hoe AI-rommel van webinterfaces te verwijderen met kill-ai-slop

Elke keer dat iemand een interface genereert via Claude of Cursor zonder een duidelijk ontwerpsysteem, is de output hetzelfde sjabloon. Paars-indigo verlooppatronen, gloeiende kaartranden, emoji's verspreid over het scherm, HOOFDLETTERS in metrische tellers, en een mascotte in de hoek.

Machines genereren deze elementen wanneer ze geen smaak hebben maar de schijn van complex werk moeten creëren. We zijn zo gewend geraakt aan deze visuele ruis op Product Hunt en in nieuwe projecten dat we zijn gestopt met het opmerken ervan.

Er verscheen onlangs een project kill-ai-slop op GitHub dat de oorlog verklaarde aan deze digitale smakeloosheid. De auteur stelde 33 karakteristieke tekenen van gegenereerd ontwerp samen, organiseerde ze, en schreef een tool voor automatische code-opschoning.

Twee delen van één project

De repository pakt het probleem aan op twee niveaus: theoretisch en praktisch.

Aan de ene kant is het een interactieve referentie die op een aparte website is geïmplementeerd. Het bevat 33 specifieke machine-ontwerppatronen. Elk voorbeeld bevat een interactieve voor-en-na demo in pure HTML, die demonstreert hoe je een rommelige blok kunt transformeren naar schone markup.

Aan de andere kant bevat het project een kant-en-klare skill voor codeerassistenten en een standalone scanner. Het hulpprogramma doorloopt de bronboom, identificeert gegenereerde codemarkeringen, legt de hoofdoorzaak uit, en suggereert een schone oplossing.

Wat de scanner precies als rommel beschouwt

De database van het project bevat geen abstracte klachten—alle regels komen voort uit daadwerkelijke codefragmenten die generatieve modellen standaard in CSS en markup injecteren.

De scanner zoekt naar karakteristieke markeringen:

• Vervaagde kleurvlekken en verloopgloeiachtergronden achter kaarten (het blur effect met paarse tinten)
• Zinloze statusbadges boven elke kop
• Emoji's overal in plaats van correcte typografie of vectoriconen
• Tekst vol corporate buzzwords zoals "ontgrendel de kracht van je data"

De projectsite zelf is ontworpen als het complete tegenovergestelde van deze patronen. Het gebruikt een papier-en-inkt concept: een streng raster, één accentrood voor annotaties, dunne scheidingslijnen, en nul afhankelijkheid van zware client-side scripts.

Hoe je de controle zelf kunt uitvoeren

Je kunt het project controleren zonder omvangrijke pakketten te installeren. De scanner is geschreven in puur Node.js en haalt geen afhankelijkheidsboom binnen.

Om de scan uit te voeren, voer je gewoon de opdracht uit in de terminal:

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

Als je gestructureerde output nodig hebt voor CI of externe scripts, is de machine-readable format flag handig:

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

Het hulpprogramma analyseert alleen markup en stijlen—het overschrijft geen bestanden zonder je toestemming. Wanneer een specifieke visuele accent expres is en moet blijven, kun je de controle uitschakelen met een deslop-ignore comment direct in de code. De flags --only en --skip zijn ook beschikbaar voor het filteren van specifieke regels, samen met het --rules argument om aangepaste controles toe te voegen.

Integratie in assistent-werkstromen

Als je codeert met Cursor of Claude Code, kun je het hulpmiddel direct integreren als een externe skill:

npx skills add yetone/kill-ai-slop

Dan hoef je de assistent alleen een eenvoudige tekstopdracht te geven: "verwijder alle AI-rommel uit dit component". De agent haalt regels uit de catalogus, vergelijkt ze met gevonden fragmenten, en herschrijft de CSS netjes door onnodige schaduwen, ongerechtvaardigde transforms, en overmatige spacing te verwijderen.

Wie heeft baat bij deze repository

Het project zal aanspreken bij ontwikkelaars die vaak prototypes bouwen met LLMs maar genoeg hebben van hun uniforme visuele stijl. Het hulpmiddel helpt om interface-netheid te herstellen zonder langdurige handmatige markup-opschoning.

De catalogus op de site dient ook als een spiekbriefje voor basis web-esthetiek. Als je moeite hebt om aan een AI via prompt uit te leggen waarom een voorgestelde kaart er goedkoop uitziet, bieden de referentievoorbeelden duidelijke technische richtlijnen: welk lijndikte je moet kiezen, hoe je hiërarchie kunt vaststellen via spacing, en waarom je eindeloze verlooppatronen moet vermijden.