O que anti-slop-ui faz?

Uma skill para Claude Code, Codex CLI e Cursor que audita uma interface em busca de marcas de IA e as corrige em passes ordenados. Ela não redesenha do zero; pega o que existe e faz parecer intencional.

Quando usar

O usuário pede para você limpar, despoluir, ou polir uma tela, página ou componente que pareça gerado por IA. Ou o usuário aponta para um arquivo, diretório ou URL e diz que parece genérico / padrão / "vibecoded".

Fluxo de trabalho

Passo 1: Leia a direção de design

Procure por DESIGN.md na raiz do projeto, depois em templates/. Se existir, carregue-o. Cada decisão abaixo deve permanecer consistente com ele. Se não existir DESIGN.md, informe o usuário e ofereça-se para preencher um juntos antes de continuar. Uma direção é necessária; não pule esta etapa.

Passo 2: Auditoria

Examine o alvo (arquivo, diretório ou página renderizada). Liste cada marca de IA que encontrar, agrupada por categoria. Use esta lista de verificação:

Para cada descoberta, anote o arquivo e a linha (ou seletor, se for de uma URL).

Passo 3: Proponha uma direção

Escreva uma direção curta (3-5 linhas) que responda:

O que este produto é (uma frase).
Personalidade -- um adjetivo que não seja "limpo", "moderno" ou "mínimo".
O destaque -- uma cor, derivada do produto ou marca, não de uma tendência.
O detalhe marcante -- uma coisa pequena e específica que só este produto teria.

Apresente a direção ao usuário. Aguarde aprovação antes de editar qualquer código. Se o usuário alterar algo, atualize a direção e confirme novamente.

Passo 4: Passes ordenados

Aplique as correções nesta ordem. Complete cada passe antes de iniciar o próximo. Após cada passe, anote brevemente o que mudou.

Passe 1: Espaçamento

Substitua valores arbitrários (mt-[13px]) pelo passo mais próximo da grade de 4px.
Normalize os gaps para a escala do projeto (padrão Tailwind ou a escala em DESIGN.md).
Garanta preenchimento consistente dentro dos contêineres.

Passe 2: Cor

Remova gradientes, brilhos, manchas, sombras coloridas.
Aplique a rampa neutra de DESIGN.md (ou derive uma: um único cinza matizado).
Aplique o destaque da direção apenas em elementos interativos.
Verifique o contraste do texto: mínimo 4,5:1 para corpo, 3:1 para texto grande.

Passe 3: Ícones

Substitua emoji pela família de ícones do projeto (padrão: Lucide, 16-18px, traço 1,5).
Remova emoji decorativos do conteúdo de texto.
Garanta uma única família de ícones em toda a interface.

Passe 4: Cópia

Remova palavras de hype: "Superpower", "Desbloqueie", "Perfeitamente", "Sem esforço", "Impulsionado por IA", "Revolucione", "próxima geração".
Remova pontos de exclamação do texto da interface.
Remova "Bem-vindo de volta" com emoji de aceno.
Substitua CTAs "Saiba mais" / "Comece agora" por verbo + resultado específico da ação.
Remova estatísticas, logotipos, depoimentos inventados. Substitua por dados reais ou remova a seção.
Remova distintivos "Novo" a menos que o recurso tenha sido lançado na última semana.

Passe 5: Tipografia

Defina a fonte de DESIGN.md (ou uma escolhida na direção; nunca Inter como padrão).
Pesos bloqueados: 400 corpo, 500 ênfase, 600 máximo para ações primárias.
Sem itálico em títulos. Sem rótulos em caixa alta espaçada (remova uppercase tracking-widest).
Aplique uma escala tipográfica consistente. Use tabular-nums em dados.

Passe 6: Layout

Quebre o padrão de herói centralizado + três cards onde aparecer.
Remova aninhamento de cards. Varie os tamanhos dos cards onde eles permanecerem.
Aplique a regra de raio de borda aninhado: interno = externo - preenchimento.
Verifique se o layout funciona em 375px, 768px e 1280px.

Passe 7: Estados e mobile

Adicione estado vazio para cada componente dependente de dados que não tiver um.
Adicione esqueleto de carregamento onde dados são buscados.
Adicione estado de erro onde chamadas de API podem falhar.
Verifique se nada transborda ou colapsa em 375px.

Passe 8: Movimento

Substitua transition-all por propriedades específicas (transition-colors, transition-opacity, transition-transform).
Remova animate-pulse de qualquer coisa que não seja um esqueleto de carregamento.
Remova hover:scale de cards.
Defina uma curva de easing para o projeto (padrão: cubic-bezier(0.22, 1, 0.36, 1)).
Uma animação de entrada no carregamento: opacidade + pequeno translateY, 200-300ms, uma vez.

Passo 5: Autoverificação

Após todos os passes, execute novamente a lista de verificação da auditoria do Passo 2. Se alguma marca permanecer, corrija-a ou explique ao usuário por que foi mantida (por exemplo, "o gradiente é a cor real da marca, confirmada em DESIGN.md").

Confirme ao usuário: o que foi alterado, quantas marcas foram encontradas, quantas foram corrigidas e quaisquer que permaneçam com motivos.

Regras

Nunca troque um clichê por outro. Se uma correção introduzir creme + serifa + terracota, ou preto + verde ácido, reverta e tente algo derivado do produto.
Nunca invente conteúdo. Não adicione estatísticas, logotipos, depoimentos ou nomes de espaço reservado falsos que pareçam reais.
Uma mudança de cada vez, um passe de cada vez. Não pule etapas.
Respeite sistemas de design existentes. Se o projeto usar uma biblioteca de componentes com tokens específicos, adapte as correções a esses tokens em vez de sobrescrevê-los.
Sempre aguarde a aprovação do usuário na direção antes de editar código.

Créditos

Esta skill sintetiza ideias da comunidade open-source de design-skills. É um trabalho original; nenhum texto foi copiado das fontes abaixo.

Inspirações:

Unslop por Damir Sokolovsky (CC-BY-4.0) -- o fluxo de trabalho passe a passe e várias categorias de marcas (grade de espaçamento, consistência de ícones, proibições de cópia, regras de movimento) são adaptados da abordagem do Unslop. De acordo com CC-BY-4.0: crédito a Damir Sokolovsky, original em https://github.com/heydamir/unslop, licenciado CC-BY-4.0.
Impeccable por Paul Bakaus (Apache-2.0) -- a abordagem de auditoria primeiro e o conceito de detecção determinística.
frontend-design por Anthropic (Apache-2.0) -- o catálogo de clichês (creme + serifa, preto + verde, sobrancelhas em caixa alta).
Hallmark por Nutlope / Together AI (MIT) -- regras mínimas e a ideia de testar em múltiplas larguras.
Taste Skill por Leonxlnx (MIT) -- proibições estritas de numeração decorativa e linhas finas.
ai-design-skills por elayadesign (MIT) -- abordagem de regras numéricas e proibições de fontes.
O catálogo de 15 marcas em docs/ai-tells.md deste repositório.

nyrthoughts/anti-slop-ui

O que é anti-slop-ui?

Perguntar na sua IA favorita

Documentação