elmir-mammadli/ai-deslop

AI de-slop

Objetivo: uma página que pareça projetada por uma pessoa com ponto de vista. Uma voz tipográfica, conteúdo real onde antes havia rótulos, decoração apenas onde carrega significado. Remover os indícios é metade do trabalho; a outra metade é provar que nada quebrou onde eles estavam.

Trabalhe nesta ordem e não pule etapas: escopo → auditoria → lista de manutenção → editar → reparar → verificar → relatório. Uma passagem só é concluída quando todos os portões da "Definição de pronto" são atendidos.

1. Escopo

• Liste cada site, página, componente compartilhado, arquivo de dados e miniatura no escopo. O site pai conta, não apenas demonstrações ou subpáginas. Se o usuário disser "tudo", significa tudo; nunca pare em um subconjunto e relate como concluído.
• O conteúdo vive em três lugares; audite todos os três: folhas de estilo, marcação/componentes e arquivos de dados (arrays de títulos, dados tipográficos, rótulos de navegação, metadados).
• Pergunte uma vez se o escopo não estiver claro. Caso contrário, prossiga.

2. Audite com o script e depois a olho nu

Execute o scanner incluído primeiro. Ele lista cada candidato com arquivo:linha, agrupado por indício, e retorna 1 enquanto houver indícios de nível fix.

python3 <skill-dir>/scripts/audit.py <caminhos...> --keep-caps ".wordmark,.logo,.heroTitle"
python3 <skill-dir>/scripts/audit.py src --only caps,tracking,period      # foco
python3 <skill-dir>/scripts/audit.py src --json > audit.json               # legível por máquina

• Indícios fix devem chegar a zero (ou ter um marcador deslop-keep com justificativa). Indícios check (gradiente, brilho, counter-css, sobrancelha, listra, em-heading, forma) precisam de um veredito humano cada, registrado no relatório.
• O scanner ignora comentários e pastas node_modules/build. Ele não pode julgar intenção, encontrar quebras de layout nem ver texto renderizado; para isso servem as etapas 5 e 6.
• Pesquisas adicionais que o script não cobre estão em references/audit.md.

3. Os 20 indícios: ações exatas e regras de manutenção

#	Indício	Ação exata	Manter apenas quando
1	Tags e pills	raio 999px → 3 a 4px, ou transforme a tag em texto colorido simples	Carrega estado que o lê aciona (urgência, status, filtro ativo)
2	Itálico excessivo	delete font-style: italic, utilitários italic, <em>/<i> usados para enfeite	Títulos reais de obras, termo estrangeiro citado, wordmark
3	Fontes padrão de IA	substitua Instrument Serif, Instrument Sans, Geist, Geist Mono, Space Grotesk, IBM Plex Mono, JetBrains Mono, Space Mono quando usadas como voz da página	Nunca como voz; veja regras de fontes
4	Kerning negativo	delete todo letter-spacing e tracking-[-…], tracking-tight(er) negativos	Nunca
5	UI excessivamente detalhada	delete gadgets: pontos de status ao vivo, rastreadores falsos, lentes de cursor, botões magnéticos, marquees com scroll-skew, contadores giratórios, medidores de nível decorativos	O gadget é o produto (calculadora, planejador, configurador)
6	Uso excessivo de divisores	mantenha no máximo uma regra estrutural por lista; delete regras que apenas separam	A regra agrupa linhas em uma tabela ou lista
7	Sombras e opacidades	tokens de cor sólida; delete brilhos, blur, backdrop-filter, sombras com blur acima de 40px	Um scrim mantém o texto legível sobre uma foto; uma única elevação sutil em um overlay real (diálogo, menu)
8	Containers com borda	desagrupe cards cuja borda apenas decora; delete faixas de acento à esquerda (border-left ≥ 3px)	A caixa é um objeto real (formulário, recibo, ingresso, folha, tabela), ou a faixa sinaliza status (sucesso/erro em formulário)
9	Diagramas excessivamente detalhados	corte "Plate I", "Fig. 2", legendas e rótulos que não explicam	Todo elemento mapeia algo real
10	Texto verboso e redundante	uma linha de divulgação no rodapé em vez de notas "sample" repetidas; corte frases que reafirmam o título	A nota adiciona informação não declarada em outro lugar
11	Migalhas de pão de código	delete // LABEL, texto de link /services, [1], EV-01, R-03, STATUS:, rótulos em CAPS TEL/MAIL/AREA	Uma breadcrumb real de navegação ("Home / Sobre")
12	Numeração de seções	delete "01 /", "§", "Capítulo 1", numerais romanos, "Z1", contadores zero-padded na marcação e em CSS counter()	A ordem é o conteúdo: instruções, linhas do tempo, etapas de formulário, perguntas de quiz, números que correspondem a marcadores em um diagrama. Então use 1. simples, não 01
13	Sobrancelhas	delete o pequeno rótulo acima de um título; se continha fatos (local, comércio, preço), mova-os para o título ou a primeira frase	É um rótulo funcional: rótulo de formulário, legenda, dt, cabeçalho de tabela, cabeçalho de coluna de rodapé
14	Dithering, ruído	delete texturas de dither e ruído	A textura é a direção de arte (impressão risograph, borda de papel); marque com deslop-keep
15	Imagens ASCII	delete	Nunca por padrão
16	Squircles	raio 12px e acima → 4 a 6px (seções, cards, imagens, diálogos)	Círculos verdadeiros (igual largura e altura: avatares, pontos de ícone, checks redondos), formas deliberadas (janelas em arco, extremidades de tubo) com deslop-keep
17	Fontes mono	substitua pela fonte de texto do site mais font-variant-numeric: tabular-nums	Código real na página
18	Subtítulos em CAIXA ALTA	delete text-transform: uppercase, utilitários uppercase, caps em strings de origem; delete também seu letter-spacing positivo	Wordmarks, sinalização real (PERIGO / AVISO / NOTA, marcadores de cano) e uma marca construída em títulos condensados de display (mantenha esses seletores em --keep-caps)
19	Fundos gradiente	cor sólida	Escalas de dados (temperatura, estações), scrims em fotos, hair-lines de parada brusca
20	Pontos finais em títulos	remova o ponto final de h1 a h3, títulos de página, títulos de cards e dados, linhas de rodapé de display com uma frase	Frases de corpo, parágrafos com várias frases, abreviações ("Co.", "Inc.")

Remova também: uma frase em cor de destaque dentro de um título (mesmo indício que #2), wordmarks gigantes contornados ou traçados, bolhas e círculos decorativos, molduras vazias e tiras de filme.

4. Fontes

• Nunca envie uma fonte padrão de IA (#3) como voz. Escolha pelo assunto, baseado no que a página é sobre: comércios de sinalização ganham uma fonte highway ou condensed, comércios tradicionais uma Caslon ou Didone, estúdios uma serifada editorial com uma sans serif silenciosa.
• Uma face de display mais uma face de texto, ou uma família. Sem terceira família para rótulos.
• Números usam font-variant-numeric: tabular-nums na face de texto, nunca uma mono.
• Ao trocar, atualize também: imports de fonte, variáveis CSS, listas de classe de layout, comentários de cabeçalho que nomeiam fontes e quaisquer dados que exibem nomes de fontes (fichas de catálogo, guias de estilo). Depois, verifique novamente cada título cuja largura ou contagem de linhas dependia da fonte antiga.
• Não carregue itálico ou pesos não utilizados após remover itálicos.

5. Regras de cópia

• Títulos: sem ponto final, sem <em>, sem span de destaque, sentença com capitalização inicial.
• Reescreva títulos de duas frases staccato em uma frase natural:
  • "Feche a válvula. Depois ligue." → "Feche a válvula e depois ligue"
  • "Encontre o vazamento. Planeje o telhado." → "Encontre o vazamento e planeje o telhado"
  • "Rápido, contido, explicado." → "Rápido, contido e explicado"
  • "Um site profissional. Um preço claro." → "Um site profissional a um preço claro"
  • "Sete camadas. Uma que você vê." → "Sete camadas, e você vê uma"
  • Uma pergunta mais uma instrução pode permanecer em duas partes: "Água desligada? Agende uma visita matinal".
• Ao remover uma sobrancelha que carregava um fato, o fato deve sobreviver em algum lugar visível.
• Siga as próprias regras de estilo do projeto (variante ortográfica, palavras proibidas, estilo de travessão). Verifique a consistência ortográfica após as edições.
• Nunca invente provas: sem avaliações falsas, contagens, logotipos, prêmios. Rotule amostras uma vez, no rodapé.

6. Editar

• Mudanças mecânicas (caps, tracking, itálico, raios, pontos finais em títulos) por script; decisões de julgamento (reescritas, gadgets, layouts) manualmente.
• Edite CSS regra por regra com um parser pequeno (corresponda blocos seletor { corpo }, altere o corpo, escreva de volta). Nunca execute uma grande regex de backtracking sobre uma folha de estilo inteira.
• Lista de manutenção primeiro, edições depois. Anote quais seletores mantêm caps e quais números permanecem, depois passe essa lista para o script.
• Marque exceções deliberadas inline para que futuras auditorias as pulem: /* deslop-keep: motivo */ em CSS, {/* deslop-keep: motivo */} em JSX, na mesma linha ou na anterior.

7. Reparar o que a remoção quebrou

Cada remoção pode deixar um buraco. Verifique cada um destes, para cada site:

1. Grids com uma primeira coluna pequena (44px 1fr, 80px 1fr 360px, 90px 1fr 1.4fr) que continha um número ou código: remova essa coluna em todos os breakpoints.
2. Margem esquerda ou padding de 28 a 60px em p, dd, h3, li que alinhava texto após um número removido: ajuste para 0.
3. Regras counter-reset / counter-increment remanescentes, li > span / dt span, display: flex; gap em títulos que apenas espaçavam um número.
4. Classes mortas não mais referenciadas na marcação (pule as dinâmicas como s[\badge_${x}`]), regras vazias, parâmetros e props index` não usados, imports e variáveis de fonte não usados, comentários desatualizados.
5. Títulos que sobrepunham uma imagem ou dependiam de uma contagem de linhas, após qualquer mudança de fonte.
6. Nunca remova bordas dentro de ::before / ::after sem ler a regra: uma borda esquerda mais inferior rotacionada 45° é um checkmark desenhado.

8. Verificar

• Verificação renderizada de cada página a 1440 e 390 de largura, com prefers-reduced-motion: reduce para que seções animadas renderizem finalizadas. Role a página inteira antes de capturar para que imagens lazy carreguem; remova overlays de desenvolvimento. Uma área de imagem em branco é lazy loading ou um otimizador de imagem de desenvolvimento travado até prova em contrário; compare com produção antes de chamar de bug.
• Passagem automatizada em cada rota em ambas as larguras: zero erros de console, zero overflow horizontal (scrollWidth > innerWidth).
• Verificações do projeto: type check, lint (zero novos avisos), verificação de cópia ou palavras proibidas do projeto, build de produção.
• Reexecute o script de auditoria: total de fix deve ser 0.
• Atualize thumbnails, prévias e imagens de showroom que mostram o design antigo e verifique-os novamente.
• Restaure arquivos que builds ou servidores de desenvolvimento reescrevem (por exemplo tsconfig.json, next-env.d.ts) antes de commitar.

9. Definição de pronto

Todos devem ser verdadeiros:

• Cada item no escopo foi auditado (folhas de estilo, marcação, dados, thumbnails).
• audit.py relata fix: 0; cada ocorrência restante de check tem um veredito.
• Toda exceção está na lista de manutenção ou carrega um marcador deslop-keep com motivo.
• Cada página foi renderizada e examinada, a 1440 e 390.
• Zero erros de console e zero overflow horizontal em cada rota.
• Type check, lint, verificação de cópia e build de produção passam.
• Pré-visualizações e thumbnails atualizadas.
• Nada enviado ou publicado sem a autorização do usuário.

10. Relatório

Termine com um breve relatório no seguinte formato:

1. Escopo: o que foi coberto (contagem de sites e páginas).
2. Removido: por indício, o que mudou e aproximadamente quantas instâncias.
3. Mantido intencionalmente: cada exceção e seu motivo.
4. Reparado: quebra de layout encontrada e corrigida.
5. Verificado: cada verificação e seu resultado.
6. Itens em aberto: qualquer coisa não feita ou não verificada, declarada claramente.

Armadilhas vistas na prática

• O disco enche rápido com perfis de navegador headless. Capture uma página de cada vez, delete cada perfil, monitore o espaço livre. Um disco cheio quebra o shell e o servidor de desenvolvimento.
• Não mate o servidor de desenvolvimento do usuário. Inicie o seu próprio em outra porta e pare-o quando terminar.
• Corresponder apenas por nomes de classe remove rótulos funcionais; corresponda por posição e tipo de elemento.
• Títulos orientados a dados e títulos de página com template literals são perdidos por uma varredura de títulos apenas em JSX; o script verifica também title:, heading: e title=.
• Uma passagem que pula o site pai, o arquivo de dados ou as thumbnails não está concluída.

Projetando novos trabalhos sem os indícios

Comece pelo assunto, não por um template: uma face de display e uma face de texto escolhidas para o ofício ou público, uma cor de destaque com significado, cantos de 0 a 6px, rótulos em sentença com capitalização inicial, títulos sem ponto final, sem sobrancelhas, sem seções numeradas a menos que a ordem importe, cópia real em vez de rótulos placeholder, e cada elemento decorativo vinculado a algo verdadeiro sobre o negócio. Execute audit.py antes de entregar o trabalho.