Jak wyczyścić AI slop z interfejsów webowych za pomocą kill-ai-slop

Za każdym razem, gdy ktoś generuje interfejs za pomocą Claude lub Cursor bez wyraźnego systemu projektowego, wynik jest ten sam szablon. Fioletowo-granatowe gradienty, świecące obramowania kart, emoji rozsypane po całym ekranie, WIELKIE LITERY w licznikach metryk i maskotka w rogu.

Maszyny generują te elementy, gdy brakuje im gustu, ale muszą stworzyć pozory złożonej pracy. Tak bardzo przyzwyczailiśmy się do tego wizualnego szumu na Product Hunt i w świeżych projektach, że przestaliśmy go zauważać.

Na GitHubie niedawno pojawił się projekt kill-ai-slop, który wypowiedział wojnę tej cyfrowej brzydocie. Autor zebrał 33 charakterystyczne oznaki generowanego projektu, uporządkował je i napisał narzędzie do automatycznego oczyszczania kodu.

Dwie części jednego projektu

Repozytorium atakuje problem na dwóch poziomach: teoretycznym i praktycznym.

Z jednej strony to interaktywna referencja wdrożona na osobnej stronie internetowej. Zawiera 33 konkretne wzorce projektowe generowane przez maszyny. Każdy przykład zawiera interaktywną demonstrację przed i po w czystym HTML, pokazującą, jak przekształcić zaśmiecony blok w czysty markup.

Z drugiej strony, projekt zawiera gotową umiejętność dla asystentów kodowania i autonomiczny skaner. Narzędzie przechodzi przez drzewo źródłowe, identyfikuje znaczniki generowanego kodu, wyjaśnia przyczynę i sugeruje czyste rozwiązanie.

Co dokładnie skaner uznaje za śmieci

Baza danych projektu nie zawiera abstrakcyjnych skarg — wszystkie reguły wynikają z rzeczywistych fragmentów kodu, które modele generatywne wstrzykują do CSS i markupu domyślnie.

Skaner szuka charakterystycznych znaczników:

• Rozmytych plam kolorów i poświat gradientowych za kartami (efekt blur z fioletowymi odcieniami)
• Bez znaczeniowych badge'y statusu nad każdym nagłówkiem
• Emoji wszędzie zamiast właściwej typografii lub ikon wektorowych
• Tekstów przeładowanych korporacyjnym żargonem jak "odblokuj moc swoich danych"

Strona projektu sama jest zaprojektowana jako całkowite przeciwieństwo tych wzorców. Wykorzystuje koncepcję papieru i atramentu: ścisłą siatkę, jeden akcentowy czerwony dla adnotacji, cienkie separatory i zero zależności od ciężkich skryptów po stronie klienta.

Jak uruchomić sprawdzanie u siebie

Możesz sprawdzić projekt bez instalowania rozbudowanych pakietów. Skaner jest napisany w czystym Node.js i nie pobiera drzewa zależności.

Aby uruchomić skanowanie, wystarczy wykonać polecenie w terminalu:

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

Jeśli potrzebujesz ustrukturyzowanego wyniku dla CI lub zewnętrznych skryptów, przydaje się flaga formatu czytelnego dla maszyny:

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

Narzędzie analizuje tylko markup i style — nie nadpisze żadnych plików bez twojej zgody. Gdy konkretny akcent wizualny jest zamierzony i powinien pozostać, możesz wyłączyć sprawdzanie za pomocą komentarza deslop-ignore bezpośrednio w kodzie. Dostępne są również flagi --only i --skip do filtrowania konkretnych reguł, a także argument --rules do dodawania własnych sprawdzeń.

Integracja z procesami pracy asystentów

Jeśli kodujesz za pomocą Cursor lub Claude Code, możesz zintegrować narzędzie bezpośrednio jako zewnętrzną umiejętność:

npx skills add yetone/kill-ai-slop

Następnie wystarczy dać asystentowi proste polecenie tekstowe: "usuń cały AI slop z tego komponentu". Agent pobierze reguły z katalogu, dopasuje je do znalezionych fragmentów i czysto przepisze CSS, usuwając niepotrzebne cienie, nieuzasadnione transformacje i rozdęte odstępy.

Komu przyda się to repozytorium

Projekt spodoba się programistom, którzy często budują prototypy za pomocą LLM, ale mają dość ich jednolitego stylu wizualnego. Narzędzie pomaga przywrócić czystość interfejsu bez żmudnego ręcznego oczyszczania markupu.

Katalog na stronie służy również jako ściągawka z podstaw estetyki webowej. Jeśli masz trudności z wyjaśnieniem AI przez prompt, dlaczego sugerowana karta wygląda tandetnie, przykłady referencyjne dostarczają jasnych wytycznych technicznych: jaką grubość linii wybrać, jak ustanowić hierarchię przez odstępy i dlaczego należy unikać nieskończonych gradientów.