1-Pankaj/slopless-ui

Slopless UI

Slop é a aparência feita por máquina: o herói gradiente padrão, o ponto pulsante, um ícone em cada título, um botão em cada ação, cópia cheia de travessões e adjetivos, e nenhuma decisão que você pudesse defender em uma revisão. Interfaces geradas modernas raramente falham por marcação quebrada. Elas falham por serem intercambiáveis: competentes, polidas e impossíveis de lembrar.

Esta habilidade existe para que a saída de um agente não seja assim. Ela dá à construção uma direção escrita antes de qualquer código, disciplina durante a construção e uma verificação antes de mostrar o resultado para alguém. Ela não adiciona mais estilo. Ela adiciona decisões, e depois finaliza.

O método

Trabalhe nesta ordem. Cada etapa tem uma tarefa, e os detalhes de cada etapa estão em um arquivo de referência. Leia uma referência apenas quando chegar à etapa que precisa dela.

1. Entenda o contexto

Antes de escrever uma linha, encontre as decisões que já existem: um arquivo DESIGN.md ou de tokens, as variáveis CSS do projeto, um bloco tailwind.config.* ou @theme, os componentes existentes. Se o projeto já tem uma aparência, siga-a exatamente. Seu trabalho é consistência primeiro, gosto depois. Não reformule nada a menos que o usuário tenha pedido uma reformulação.

2. Escreva o briefing

Quatro linhas, escritas antes de qualquer código. Elas são um contrato consigo mesmo, e as etapas posteriores as verificam.

1. Público-alvo: quem usa isso e o que estão fazendo aqui em dez segundos.
2. Sensação: um ou dois adjetivos que você poderia defender em uma revisão (calmo, denso, acolhedor, exato).
3. Assinatura: a única coisa que um estranho lembrará. Se você não conseguir nomeá-la, o resultado será genérico. Escolha uma: uma tipografia incomum, um número em negrito, uma cor inesperada, uma composição forte.
4. Modo: Persuadir (landing, preço), Operar (painel, aplicativo), Ler (documentação, artigo) ou Experiência (portfólio, galeria). O modo muda todas as decisões posteriores.

Orientação completa, os quatro modos e uma biblioteca de vinte e oito direções iniciais para categorias comuns de sites: references/direction.md.

3. Tome as decisões como tokens

Transforme o briefing em valores reais, não em adjetivos: duas famílias de fontes com pesos e uma pilha de fallback, uma cor de destaque com uma função, uma escala de espaçamento, uma escala de raio, durações de movimento e easing. Escreva-os como variáveis CSS ou o formato de token do framework. "Limpo e moderno" não é uma decisão. --accent: #8E3B2F é.

• Tipografia: references/typography.md
• Cor: references/color.md
• Movimento: references/motion.md

4. Construa com a fibra

Em seguida, aplique as regras de disciplina durante a construção:

• As leis vêm primeiro. Uma grade, uma coluna, espaçamento de 4 ou 8 pontos, um ponto focal por visualização, todos os oito estados de componente, teclado e pisos de contraste. Estes não são estilo; são a física que todo sistema de design concorda: references/foundations.md.
• Um ponto focal, uma ação primária por visualização. A hierarquia vem do tamanho, peso e espaço, não de caixas.
• Botões são compromissos. Um botão preenchido por visualização é normal. Ações secundárias são links ou botões silenciosos. Se uma região mostrar mais de dois botões, redesenhe-a: references/icons-and-buttons.md.
• Ícones são mobília. Palavras são mais claras. Quando os ícones ganham um lugar, um conjunto, um peso, tamanho consistente: references/icons-and-buttons.md.
• Texto é design. Frases curtas, substantivos concretos, botões verbo-primeiro, sem travessões, sem jargão: references/copy.md.
• Todo estado existe: vazio, carregando, erro, conteúdo longo. Cinco linhas perfeitas e um caminho feliz não é uma tela finalizada.
• A página tem um pulso. Os controles respondem ao pressionar, as transições saem da forma como entraram, uma entrada coreografa o primeiro segundo e as seções revelam uma vez na rolagem. No máximo uma assinatura ambiente, nomeada no briefing. O orçamento de movimento e cada curva que ele precisa: references/motion.md.
• Alinhe blocos de texto à esquerda. Centralize apenas elementos curtos de linha única.

5. Finalize antes da entrega

Nunca apresente uma IU que você não olhou. A passagem de finalização, em ordem:

1. python3 scripts/foldcheck.py <arquivos alterados> e corrija todos os erros que ele reportar.
2. python3 scripts/contrast.py <primeiro plano> <fundo> para cada par de texto que você introduziu. Texto do corpo precisa de 4,5:1 ou melhor; texto grande e bordas precisam de 3:1.
3. Renderize em um navegador real e tire screenshot nas larguras de desktop e celular (node scripts/finish.mjs <url-ou-arquivo> se Playwright estiver disponível, caso contrário, qualquer ferramenta de navegador que seu ambiente fornecer).
4. Aperte os olhos para os screenshots: embaça os olhos ou reduza a imagem. A hierarquia e o ponto focal devem sobreviver.
5. Corrija, verifique novamente apenas as visualizações alteradas e pare após três passagens de correção.

Protocolo completo, rótulos de honestidade e formato de relatório: references/verification.md.

Inegociáveis

Esses padrões são lidos como feitos por máquina. Trate-os como proibidos por padrão, mesmo quando um tutorial os mostrar:

• Pontos e decorações piscando, pulsando, saltando ou flutuantes, incluindo indicadores de "digitando" e pontos de status brilhantes que ninguém pediu.
• Estilo cyberpunk, neon, glitch, synthwave, vaporwave, matrix e holográfico. Brilho não tem fonte, então não convence ninguém.
• Heróis de gradiente roxo-para-azul e índigo-para-fúcsia, texto gradiente, orbes de cor desfocadas atrás do conteúdo.
• Travessões em qualquer texto voltado para o usuário. Use um ponto final, uma vírgula ou parênteses. O mesmo para a lista de jargão de IA em references/copy.md.
• Emoji usado como ícones, marcadores ou cromo de IU.
• Um ícone em cada título e um botão em cada ação.
• Lorem ipsum, "em breve", depoimentos ou métricas inventadas apresentadas como reais.
• Inter, Roboto, Arial ou a pilha do sistema como a fonte de identidade por padrão.
• Uma página que nunca se move. A saída estática soa como um modelo montado; o orçamento de movimento em references/motion.md é parte da finalização, não enfeite.

O catálogo completo com correções: references/anti-slop.md.

O teste do apertar os olhos

Embaça seus olhos (ou reduza um screenshot para tamanho de miniatura) e olhe novamente. Três coisas devem sobreviver ao desfoque: o ponto focal, a ordem de leitura e a ação primária. Se a página se tornar uma sopa cinza, o problema é hierarquia, e nenhuma quantidade de polimento vai corrigi-lo. Corrija espaçamento, tamanho e peso primeiro. Este teste leva dez segundos e pega mais design ruim do que qualquer lista de verificação.

Se o usuário pedir um padrão proibido

Às vezes, uma pessoa realmente quer neon, gradientes fortes ou um tema cyberpunk. Não lute contra ela e não dê sermões. Construa bem: contraste real, hierarquia real, estados funcionais, movimento contido. Diga uma vez, em uma linha, que a habilidade é contra isso por padrão e você seguiu a preferência dela. A lista de proibidos protege a saída não guiada, não a preferência expressa.

Mapa de referência

Arquivo	Leia quando
references/direction.md	Etapa 2, em cada nova página ou reformulação
references/typography.md	Etapa 3, ao escolher ou verificar fontes
references/color.md	Etapa 3, ao escolher ou verificar cor
references/motion.md	Etapa 3 para tokens, Etapa 4 para a passagem de movimento (orçamento, entradas, revelações, ambiente, movimento reduzido)
references/foundations.md	Etapa 4, para layout, espaçamento, hierarquia, estados e as leis nomeadas
references/copy.md	Etapa 4, sempre que texto for escrito
references/icons-and-buttons.md	Etapa 4, para ações, controles e ícones
references/anti-slop.md	Quando a saída parecer familiar de uma forma ruim, ou em revisão
references/verification.md	Etapa 5, antes de dizer que algo está pronto

Relatório

Termine o trabalho de IU com um breve relatório: o que foi construído, a sensação de uma linha do briefing, o rótulo de verificação de references/verification.md (verificado visualmente, verificado estaticamente ou não verificado, com o motivo) e qualquer coisa deixada por fazer. Nunca chame um resultado de "perfeito em pixels" ou "totalmente testado". Diga o que você fez.

Scripts

Zero dependência, sem chamadas de rede, sem telemetria. Os caminhos são relativos à pasta deste arquivo.

python3 scripts/foldcheck.py src/            # auditoria estática para padrões feitos por máquina
python3 scripts/contrast.py "#201B12" "#F6F1E5"   # contraste WCAG para um par
node scripts/finish.mjs ./index.html          # passagem de navegador: screenshots, console, overflow (precisa de Playwright)

foldcheck e contrast sempre rodam. finish é opcional e degrada graciosamente quando o Playwright está faltando; use qualquer ferramenta de navegador que seu ambiente oferecer, porque o ponto é olhar, não a ferramenta.