yonathan-boop/Claude

antislop-ui

Anti Slop: Regras para Agentes de Codificação de IA. Habilidade de UI e Visual

Parte do sistema antislop. Leia junto com antislop.md (o núcleo). Esta habilidade aprofunda a preocupação de UI/visual: cor, layout, componentes, decoração, fluxo estrutural e movimento. Ela referencia as regras principais por número e nunca as duplica ou renomeia. Carregue-a quando a tarefa constrói ou edita um site, aplicativo web ou qualquer interface.

Como usar esta habilidade

• Carregue junto com antislop.md sempre que a tarefa for de UI ou trabalho visual. O núcleo contém o mecanismo (o teste de propósito, os três níveis, o Portão de Entrega); esta habilidade contém a profundidade específica de UI.
• Cada entrada tem a mesma forma: Diga (o padrão), Por que (por que é lido como slop), Corrija (o que fazer em vez disso), com a regra principal citada como R-XX.
• O Portão de Entrega no núcleo permanece o portão. A "Lista de Verificação de Habilidade de UI" no final deste arquivo é o suplemento específico de UI para executar junto com ele.

Visual & Cor

Gradiente Azul-Roxo Genérico

• Diga: gradientes de azul para roxo, azul para ciano ou roxo para rosa usados como o tratamento de cor principal, ou um brilho colorido em página inteira.
• Por que: o tratamento de cor mais representado nos dados de treinamento. Sinaliza "sem identidade de marca", não "nossa paleta", e marca o design como gerado por IA à primeira vista.
• Corrija: puxe a paleta de DESIGN.md ou da própria identidade do produto. Mantenha um gradiente apenas como uma função de hierarquia com o motivo anotado (R-01). Um gradiente separando um nível de outro é arte; o mesmo gradiente em cada seção é um padrão.
• A mesma família de padrões: gradientes agressivos ou arco-íris, esquemas roxo-e-preto, paletas neon ou pastel, e orbes radiais desfocadas atrás do herói. Eles são o mesmo indício vestindo roupas diferentes: cor do padrão do modelo, não da marca. Todos são PROIBIDOS como padrões sem propósito (R-01).

Glassmorfismo Excessivo

• Diga: blur/backdrop-filter na barra de navegação, cards, modais e barra lateral ao mesmo tempo.
• Por que: o blur remove textura e coloca cada superfície na mesma camada fosca, nivelando a hierarquia. Quando toda superfície é vidro, nada está em primeiro plano.
• Corrija: trate o vidro como um acento, não um traço de caráter. Limite de dose: no máximo 1-2 elementos (R-10). A superfície que precisa de atenção fica com o vidro; todo o resto permanece sólido.

Raio de Borda Excessivo

• Diga: cada elemento tem formato de pílula: botões, entradas, cards, badges, modais.
• Por que: formas de pílula uniformes apagam a linguagem visual de "isto é uma entrada, isto é um card". O raio se torna decoração em vez de uma ferramenta de hierarquia.
• Corrija: defina um conjunto pequeno de raios no sistema de design e aplique-os deliberadamente (R-11). Um raio generoso no CTA principal parece intencional; o mesmo raio em cada elemento parece um padrão.

Sombras Excessivamente Suaves

• Diga: todo componente carrega uma sombra grande, de modo que a página inteira parece flutuar.
• Por que: quando tudo está elevado, a elevação não comunica nada. A página perde seu plano de base e se torna uma suavidade genérica.
• Corrija: use sombra apenas como um marcador de elevação e anote o motivo da elevação (R-12). A maioria dos elementos deve ficar plana; o um ou dois que precisam se levantar acima da página carregam a sombra.

Brilho em Todo Lugar

• Diga: brilho em cards, botões, ícones, badges, fundos e bordas simultaneamente.
• Por que: brilho é um amplificador de atenção. Aplicado em todos os lugares, não amplifica nada, e é uma das maneiras mais rápidas de parecer "feito por IA".
• Corrija: reserve o brilho para no máximo 1-2 elementos importantes como um acento de foco (R-13). Todo o resto permanece fosco.

Grade de Fundo

• Diga: quadrados de grade, linhas de blueprint, papel milimetrado, grades de pontos ou linhas finas repetidas atrás do conteúdo.
• Por que: é uma maneira padrão de fazer uma página plana parecer "técnica" sem fazer nenhum trabalho real. Parece textura sem intenção.
• Corrija: use textura ou padrão apenas quando genuinamente apoiar a identidade do produto, com o motivo anotado (R-07). Um motivo de identidade real (Parte 3 do núcleo) supera uma grade padrão sempre.

Modo Escuro Padrão Sem Motivo

• Diga: a página inteira é escura simplesmente porque parece "tech", sem consideração de marca.
• Por que: escuro é uma decisão, não um padrão. Forçá-lo parece seguir uma tendência, não servir ao produto.
• Corrija: escolha o tema com base na identidade da marca, tipo de produto e público (R-21). Ferramentas de desenvolvedor e criativas têm motivos legítimos para o escuro; um produto focado em conteúdo geralmente não. Se não houver um motivo forte para um tema fixo, construa uma alternância funcional claro/escuro.

Muitas Cores na Paleta

• Diga: 5-7 cores diferentes em uma página sem um sistema de design claro.
• Por que: uma paleta dispersa não tem hierarquia. Quando cada elemento pode ser de qualquer cor, nada se distingue.
• Corrija: limite a paleta ativa a 2-3 cores principais + 1 acento (R-29), e deixe que uma das principais seja a base neutra. Restrição é o que faz o acento se destacar.

Cor de Acento Excessiva

• Diga: uma cor de acento em botões, ícones, badges, links, linhas, fundos e brilhos ao mesmo tempo.
• Por que: o acento deixa de ser um acento no momento em que está em todos os lugares. Torna-se apenas mais uma cor, e o design perde seu ponto focal.
• Corrija: o acento pertence apenas ao momento chave (um acento deliberado, Parte 3 do núcleo). Zero acentos é estéril; um acento em todos os lugares é slop. Escolha o um ou dois lugares onde importa.

Padrão Estéril

• Diga: branco liso ou quase branco, bordas cinzas finas, raio pequeno, sem textura, fonte genérica, sem identidade.
• Por que: este é o resultado "seguro" de filtragem excessiva sem direção. Não é slop, mas também não é design: é um vazio onde um design deveria estar.
• Corrija: isso é um problema de direção, não de filtro. Adicione DESIGN.md ou resolva a Leitura de Design (Parte 3 do núcleo), depois aumente os dials de vivacidade. A correção nunca é mais proibições; é declarar o propósito e adicionar energia.

Layout e Componentes

Layout de Template Monótono

• Diga: herói, subtítulo, 2 CTAs, captura de tela, grade de recursos, depoimentos, FAQ, CTA, rodapé, nessa ordem, sempre.
• Por que: a ordem é o padrão dos dados de treinamento, não a narrativa do produto. As seções aparecem porque o template as tem, não porque o conteúdo precisa delas.
• Corrija: construa a estrutura em torno das necessidades reais de conteúdo (R-05, C-3). Se o produto não tem depoimentos, não há seção de depoimentos. A ordem das seções segue a história do produto. Combine com o dial RITMO: se for 3, as seções variam visivelmente.

Cards de Recursos Copiados e Colados

• Diga: tamanho, altura, ícone, layout e preenchimento idênticos em todos os cards de recursos.
• Por que: cards uniformes nivelam o conteúdo. Quando cada recurso é um card com um ícone, os recursos com peso real e os sem ele parecem iguais.
• Corrija: crie variação que reflita a hierarquia do conteúdo, com o motivo anotado (R-14). Nem todo recurso precisa ser um card. O recurso principal pode merecer um tratamento de largura total; os de suporte, uma lista.

Grade Bento

• Diga: uma seção feita de um mosaico de cards de tamanhos diferentes, alguns ocupando duas colunas ou duas linhas, preenchendo o espaço como um painel lado a lado.
• Por que: é o layout de página inicial "tipo aplicativo" padrão dos últimos anos, então não sinaliza nada sobre o produto. Quando toda seção poderia ser um bento, o layout é um template, não uma decisão.
• Corrija: use uma grade bento apenas quando o conteúdo genuinamente tiver elementos de tamanhos diferentes para mostrar (R-05). Se cada célula for aproximadamente igual, uma grade simples ou lista é mais honesta. O dial RITMO decide se as seções variam.

Espaçamento Uniforme

• Diga: padding, margin e gaps são idênticos em todas as seções.
• Por que: ritmo é uma ferramenta, e um valor único de espaçamento a remove. As seções param de se relacionar; a página parece uma tira plana.
• Corrija: use espaço em branco como estrutura (Parte 3 do núcleo) e varie-o com o dial RITMO. Estabeleça uma escala de espaçamento e, em seguida, use diferentes níveis para separar e conectar. Ritmo uniforme é uma escolha deliberada apenas quando o dial diz isso (R-05).

"Como Funciona" Sempre 3 Passos

• Diga: ícone redondo + número 1, 2, 3 + texto curto, sempre três passos, sempre a mesma forma.
• Por que: o processo real do produto raramente é uma lista organizada de três passos. O template força o processo a se encaixar em sua forma, e não o contrário.
• Corrija: apresente o processo como ele realmente é (R-05). Três passos com ícones redondos é bom se esse for genuinamente o processo; caso contrário, use qualquer forma que o fluxo de trabalho real tomar, incluindo dois passos ou cinco.

Barra de Logos "Confiam em Nós"

• Diga: uma linha de logos de empresas genéricas diretamente abaixo do herói.
• Por que: é uma alegação de confiança sem evidência: logos genéricos, nenhum cliente real nomeado, nenhuma prova de uso.
• Corrija: mostre apenas logos reais e verificáveis (R-18, R-36, C-5). Se o produto ainda não tem tais clientes, não fabrique uma barra de logos. Prova social real supera uma genérica sempre.

Card de Preço "Mais Popular"

• Diga: o nível de preço médio sempre destacado com um badge de cápsula.
• Por que: é o padrão, o que significa que não é uma decisão. Quando toda seção de preços faz isso, o nível destacado para de significar algo.
• Corrija: destaque o nível que realmente atende aos objetivos do produto e escreva o porquê (R-31). Se nenhum nível merecer destaque, destaque nenhum.
• Três colunas fazem parte do indício: preços mostrados em três níveis, seja qual for a estrutura real, o do meio destacado. Essa forma é o padrão, então não é uma decisão (R-05). Use quantos níveis o produto realmente tem e destaque aquele que o serve.

Demonstração Sem um Produto

• Diga: a página vende um produto que nunca é mostrado funcionando: nenhuma demonstração real, nenhum Termo de Serviço, nenhuma Política de Privacidade, apenas promessas.
• Por que: é uma demonstração vestindo roupas de produto. Cada alegação é confiança sem nada por trás, e as páginas legais ausentes são o indício silencioso de que nada real existe ainda.
• Corrija: mostre o produto real funcionando ou diga honestamente que ainda não foi lançado (R-38, C-5). Se a página pedir inscrições ou pagamento, os Termos de Serviço e a Política de Privacidade devem existir. Um "em breve" honesto supera uma demonstração convincente.

Rodapé de Template de 4 Colunas

• Diga: colunas Produto / Empresa / Recursos / Legal sem variação.
• Por que: as colunas existem porque os templates as têm, não porque o site tenha tantos grupos de links.
• Corrija: estruture o rodapé em torno do que o produto realmente linka (R-05). Uma única coluna de links pode ser mais útil do que quatro meio vazias.

Ritmo de Seção Uniforme

• Diga: toda seção é título centralizado + subtítulo + grade de cards idêntica, sem variação.
• Por que: composição idêntica faz as seções se misturarem, e a página parece repetitiva e plana.
• Corrija: varie a composição com o dial RITMO (R-05). Alterne seções com muito texto e visuais, layouts assimétricos e simétricos. Uma página onde toda seção segue o mesmo template é uma página projetada por um template.

Elementos Decorativos

Ícones de IA Genéricos

• Diga: brilho, estrela, mágica, raio, diamante, cubo, robô ou orbe de IA como ícones de recursos.
• Por que: esses glifos são o vocabulário genérico de "produto de IA". Eles não comunicam nada sobre o recurso específico.
• Corrija: use ícones genuinamente relevantes para o conteúdo, com a relevância anotada quando o glifo for genérico (R-04). Se nenhum ícone apropriado existir, use nenhum. O rótulo do recurso faz o trabalho.

Ícones Lucide

• Diga: todo ícone vem da mesma biblioteca de traço fino e canto arredondado (Lucide ou um clone visual), então todos os ícones compartilham uma aparência reconhecível.
• Por que: uma única biblioteca de ícones padrão faz os ícones de todos os sites de IA serem idênticos, então os ícones param de informar algo sobre o produto. Os glifos podem ser relevantes; a aparência uniforme da biblioteca é o indício.
• Corrija: o conjunto de ícones é uma escolha visual, não um padrão (R-04). Escolha ícones pela relevância primeiro; depois decida se o peso e o traço da biblioteca combinam com o caráter do produto. Dois ícones que parecem "mais ou menos iguais" ainda podem parecer seus se o conjunto for uma decisão, não uma importação.

Emoji como Decoração

• Diga: emoji literal espalhado pelo texto, títulos, badges e botões: 🚀 em um título, ✅ ao lado de cada marcador de recurso, 🔥 em um CTA, 📈 acima de um título de gráfico.
• Por que: emoji é a abreviação mais alta de "isso foi gerado, não escrito". Em uma UI, compete com o conteúdo pela atenção e nivela a voz do produto no mesmo padrão alegre de todos os outros sites de IA.
• Corrija: remova emoji do texto da UI. Se um conceito precisa de uma marca, use um ícone real e relevante com o motivo anotado (R-04), ou nenhuma marca. O texto carrega o significado; o emoji não adiciona nada.

Pequenas Setas em Todo Botão

• Diga: → ou ↗ colocado em quase todo botão como decoração pura.
• Por que: a seta se torna um padrão, não um sinal. Quando todo CTA tem uma, nenhum aponta para lugar específico.
• Corrija: setas não são a identidade padrão para botões (R-08). Mantenha-as para a ação que genuinamente se beneficia de uma dica de direção, dimensionada proporcionalmente, com o propósito anotado.

Faixa Esquerda Colorida

• Diga: uma fina barra vertical colorida na borda esquerda de cards, linhas de lista ou cabeçalhos de seção, usada como decoração.
• Por que: a faixa adiciona cor sem adicionar significado. É a maneira mais barata de fazer um card "parecer projetado", então aparece em todos os lugares e não diz nada.
• Corrija: a faixa é decoração; deve carregar informação ou ir embora (R-01, R-31). Uma borda esquerda que marca estado real (ativo, aviso, novo) é um sinal. Uma faixa que existe para parecer projetada é um padrão.

Badges de Cápsula de IA

• Diga: formato de pílula, borda fina, brilho, ponto pequeno, maiúsculas, contendo "AI Powered", "Beta", "Novo".
• Por que: a combinação cápsula-mais-brilho-mais-ponto é um badge autorreferencial que diz "feito por IA, sobre ser feito por IA".