Como Limpar AI Slop de Interfaces Web com kill-ai-slop

Toda vez que alguém gera uma interface através do Claude ou Cursor sem um sistema de design claro, a saída é o mesmo template. Gradientes roxo-indigo, bordas de cards brilhando, emojis espalhados pela tela, MAIÚSCULAS em contadores de métricas, e um mascote no canto.

Máquinas geram esses elementos quando falta gosto, mas precisam criar a aparência de trabalho complexo. Nos acostumamos tanto com esse ruído visual no Product Hunt e em projetos novos que paramos de perceber.

Um projeto kill-ai-slop apareceu recentemente no GitHub que declarou guerra a essa falta de gosto digital. O autor compilou 33 sinais característicos de design gerado, organizou-os e escreveu uma ferramenta para limpeza automática de código.

Duas Partes de Um Projeto

O repositório ataca o problema em dois níveis: teórico e prático.

Por um lado, é uma referência interativa implantada em um site separado. Contém 33 padrões específicos de design de máquina. Cada exemplo inclui uma demonstração interativa antes-e-depois em HTML puro, mostrando como transformar um bloco poluído em markup limpo.

Por outro lado, o projeto inclui uma skill pronta para assistentes de codificação e um scanner independente. O utilitário percorre a árvore de código-fonte, identifica marcadores de código gerado, explica a causa raiz e sugere uma correção limpa.

O Que Exatamente o Scanner Considera Lixo

O banco de dados do projeto não contém reclamações abstratas—todas as regras derivam de snippets reais que modelos generativos injetam no CSS e markup por padrão.

O scanner procura marcadores característicos:

• Manchas de cor desfocadas e brilhos de gradiente atrás dos cards (o efeito blur com tons roxos)
• Badges de status sem sentido acima de cada título
• Emojis em todo lugar ao invés de tipografia adequada ou ícones vetoriais
• Textos carregados de buzzwords corporativas como "desbloqueie o poder dos seus dados"

O próprio site do projeto é projetado como o oposto completo desses padrões. Usa um conceito de papel e tinta: uma grade rígida, um único acento vermelho para anotações, divisores finos, e zero dependência de scripts pesados do lado do cliente.

Como Executar a Verificação no Seu Próprio

Você pode verificar o projeto sem instalar pacotes pesados. O scanner é escrito em Node.js puro e não puxa uma árvore de dependências.

Para executar o scan, basta executar o comando no terminal:

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

Se você precisa de saída estruturada para CI ou scripts externos, a flag de formato legível por máquina é útil:

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

O utilitário apenas analisa markup e estilos—ele não sobrescreverá nenhum arquivo sem sua permissão. Quando um acento visual específico é intencional e deve permanecer, você pode desabilitar a verificação com um comentário deslop-ignore diretamente no código. As flags --only e --skip também estão disponíveis para filtrar regras específicas, junto com o argumento --rules para adicionar verificações personalizadas.

Integração em Fluxos de Trabalho de Assistentes

Se você está codificando com Cursor ou Claude Code, você pode integrar a ferramenta diretamente como uma skill externa:

npx skills add yetone/kill-ai-slop

Então você só precisa dar ao assistente um comando de texto simples: "remova todo o AI slop deste componente". O agente puxará as regras do catálogo, comparará com os fragmentos encontrados, e reescreverá o CSS de forma limpa, removendo sombras desnecessárias, transforms injustificadas e espaçamento inchado.

Quem Vai Encontrar Este Repositório Útil

O projeto vai agradar desenvolvedores que frequentemente constroem protótipos com LLMs mas estão cansados do estilo visual uniforme deles. A ferramenta ajuda a restaurar a limpeza da interface sem limpeza manual demorada do markup.

O catálogo no site também serve como uma folha de cola para estética básica da web. Se você tem dificuldade em explicar para uma IA via prompt por que um card sugerido parece barato, os exemplos de referência fornecem diretrizes técnicas claras: qual peso de linha escolher, como estabelecer hierarquia através de espaçamento, e por que você deve evitar gradientes intermináveis.