O que anti-slop faz?
UIs criadas por "vibe coding" falham das mesmas maneiras previsíveis. Este skill funde três coisas em um fluxo de trabalho: o método passo a passo do unslop, a maquinaria de direção de arte do taste-skill e uma lista de 20 sinais datados com um script que captura os mecânicos.
Créditos e licenças
- O método é adaptado do unslop por Damir Sokolovsky (https://github.com/heydamir/unslop),
licenciado sob CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Adaptado: condensado e fundido com
taste-skill por Leonxlnx e os sinais de Molveau em
references/playbook.md. Mantenha este crédito em qualquer cópia ou adaptação. O original está armazenado sem modificações emreferences/vendor/unslop/. - A execução de direção de arte, as regras da casa e o inspetor vêm do taste-skill por Leonxlnx
(https://github.com/Leonxlnx/taste-skill), MIT, armazenados sem modificações em
references/vendor/taste/. - A lista dos 20 sinais e
scripts/detect-tells.mjssão de Molveau (MIT). scripts/story.mjsé adaptado do renderizador do unslop (CC BY 4.0, mudanças listadas em seu cabeçalho); ele permanece CC BY 4.0, assim comoscripts/story-server.mjs, seu servidor local.scripts/story-contrast.mjsé de Molveau (MIT).
Comece por aqui
Leia references/playbook.md primeiro, começando pelo bloco "Faça isso primeiro"; abra os arquivos dos fornecedores apenas para se aprofundar ou para exemplos práticos. O
playbook é a doutrina fundida (direção, passes, cópia, espaçamento, cor, tipo, ícones, detalhes, dados,
telas de app, imagens, movimento, verificações) com tags de origem e as decisões onde as fontes discordam.
A tabela "Quando ler o quê" abaixo é o índice de profundidade.
Sobreposição: este é o passe do visual gerado por IA. As linhas de crítica do skill ui são a revisão de design geral mais leve, e
design-grill é a auditoria profunda com múltiplas lentes; use-os para qualidade de design além dos sinais.
Portão de direção
Faça isso antes de qualquer código para uma nova página ou tela e como passo 3 de cada execução pesada de slop, mesmo quando a solicitação for de uma linha ou disser para apenas fazer. O resto deste skill remove erros; ele não dá caráter a uma tela. Ignorado, o resultado é a página mediana que todo modelo faz: correta nos detalhes, mas sem dono.
- Cinco linhas. Produto: o que faz, para quem. Caráter: duas ou três palavras concretas (
calmo, exato, um pouco quente), nunca limpo, moderno, elegante, mínimo ou premium. Mundo: o lugar ou material ao qual o produto pertence; ele tinge os neutros e define o acento. Momentos: os um ou dois lugares que recebem cor rica e detalhe. Assinatura: um pequeno detalhe que só este produto tem, usado consistentemente. Um momento é desenhado com cuidado, não apenas limpo: um gráfico redesenhado para o que deve dizer (linhas suaves, uma comparação espelhada, uma escala real), ou o objeto do próprio produto renderizado com peso e luz. - Inventário, depois a ideia. Liste 8 a 12 coisas que nenhum concorrente compartilha (nome, rua, números do briefing, materiais, ferramentas, rituais, documentos que o ofício imprime). Escreva: "Nesta tela, [um item] se torna [o dispositivo]". Esse dispositivo é o momento.
- Recuse os padrões de segunda ordem a menos que a marca já os possua. Eles são o que um modelo usa
quando os sinais óbvios são proibidos:
- uma página creme, pedra ou off-white quente com um acento laranja queimado, terracota, sálvia ou floresta, com ou sem um título em serifa (o visual "papel e tinta" é o novo padrão, não uma direção);
- Fraunces, Instrument Serif, Playfair ou Georgia como a fonte do título por reflexo; system-ui como a única fonte;
- Inter ou Geist sobre branco com um acento índigo ou azul;
- hero, três recursos, depoimentos, chamada para ação, nessa ordem, sem argumentação para isso; em uma tela de app, quatro cartões iguais de estatísticas sobre um gráfico de barras;
- uma pílula de subtítulo centralizada, título e dois botões como a primeira tela inteira.
- Teste de troca. Substitua o nome e o ramo pelo de um concorrente. Se a tela ainda servir, mude a afirmação, o momento e a assinatura, e teste novamente.
- Mostre e espere. Mostre as cinco linhas e a ideia, e espere pelo dono. Se não puder perguntar (o usuário disse para apenas construir, ou você executa sem uma pessoa), escreva-as como um comentário no topo do arquivo principal e construa exatamente aquilo.
Profundidade: playbook anti-slop §2 (direção) e §12 (telas de app); o skill design-inspiration-index para
referências reais.
A ideia central
Slop espalha cor e efeitos sobre o chrome: fundos, botões, bordas, rótulos. Craft mantém o chrome quieto e coloca a riqueza em um ou dois momentos de conteúdo que as pessoas lembram. Remover slop é metade do trabalho; uma tela limpa que poderia pertencer a qualquer produto é o próximo gabarito. Cada execução termina com uma tela que só este produto poderia ter.
Ordem do trabalho
- Página do zero ou redesenho profundo? Siga a execução do taste-skill (
references/vendor/taste/taste-skill.md) com as substituições do playbook. Telas de app: playbook §12. - Olhe para a tela, renderizada se possível, não apenas o código.
- Audite contra a lista de sinais (
references/vendor/unslop/unslop/references/signs.md) e os 20 sinais (references/tells.md). Uma linha por sinal, com onde ele está. - Avalie o tamanho do trabalho (pesado, leve, sem slop) e escreva a direção, depois espere pelo dono (playbook §1 e §2).
- Corrija em nove passes, cada um em toda a tela: espaçamento, cor, ícones, cópia, tipografia, layout, detalhes, visuais, movimento (playbook §3 a §14).
- Verifique com a checklist do playbook, execute o detector, compare com a auditoria (playbook §15).
- Relate a direção, algumas linhas por passe, e cada alegação que você removeu ou não pôde verificar.
Os 20 sinais
Tabela completa com substituições: references/tells.md. Resumo, com o que o script captura:
| # | Sinal | Script |
|---|---|---|
| 1 | Gradiente violeta/fúcsia/índigo | sim |
| 2 | Texto gradiente | sim |
| 3 | Emoji na cópia | sim |
| 4 | Inter ou Space Grotesk em todo lugar | não |
| 5 | Borda lateral colorida | sim |
| 6 | Glassmorfismo decorativo | sim |
| 7 | Modo escuro de baixo contraste | não |
| 8 | Três caixas de ícones em uma linha | não |
| 9 | Pílula de subtítulo acima do título | não |
| 10 | Lucide por padrão | sim |
| 11 | shadcn/ui sem modificações | não |
| 12 | Aparecimento ao scroll | sim |
| 13 | Brilho que segue o cursor | não |
| 14 | Desvanecimento ao passar o mouse em botões | sim |
| 15 | Espaçamento inconsistente | não |
| 16 | Travessões na cópia | sim |
| 17 | Cópia com jargões | sim |
| 18 | Palavras de destaque em itálico serifado | não |
| 19 | Space Grotesk com seu parceiro serifado de display usual (par em references/tells.md) | sim |
| 20 | Grão sobre um gradiente | não |
O detector
node <pasta do skill>/scripts/detect-tells.mjs [--json] [--include-tests] <caminhos...>
Sem dependências, Node 20 ou superior, sem imports fora desta pasta do skill, então funciona quando o skill
está instalado sozinho. Saída 0 limpo, 1 achados, 2 uso. Ele pula node_modules .git .next dist build .open-next coverage e arquivos de teste. Ele reporta caminho:linha #rótulo do sinal correspondência. Limites estão listados no
final de references/tells.md; trate um acerto como "olhe aqui".
Teste de catraca em um projeto
Uma catraca fixa a contagem de hoje e falha quando ela aumenta, então os sinais só podem diminuir. Esboço para
node:test (adapte os caminhos e a linha de base):
import { test } from 'node:test';
import assert from 'node:assert/strict';
import { readFileSync, globSync } from 'node:fs'; // globSync precisa do Node 22; no 20 percorra as pastas você mesmo
import { detectTells } from './.agents/skills/anti-slop/scripts/detect-tells.mjs';
const BASELINE = { 10: 8, 5: 1 }; // número do sinal -> achados permitidos hoje
test('nenhum novo sinal de vibe coding', () => {
const files = globSync('{app,components}/**/*.{ts,tsx,css}').map((path) => ({ path, text: readFileSync(path, 'utf8') }));
const now = {};
for (const f of detectTells(files)) now[f.tell] = (now[f.tell] ?? 0) + 1;
for (const [tell, n] of Object.entries(now)) assert.ok(n <= (BASELINE[tell] ?? 0), `sinal ${tell}: ${n} achados, linha de base ${BASELINE[tell] ?? 0}`);
});
Reduza a linha de base sempre que corrigir um; nunca a aumente.
Vídeo de história
Um clipe quadrado, de cerca de 10 segundos, onde a tela se desfaz do slop passo a passo com marcações vermelhas. Faça-o apenas
quando solicitado. Construa o arquivo de história exatamente como a seção "Story video" do unslop diz
(references/vendor/unslop/unslop.md: um story.html, CSS .s1 a .s5 no topo, data-gap,
data-radius, data-slop, trocas), então renderize com o renderizador adaptado deste skill:
node <pasta do skill>/scripts/story.mjs unslop-story/story.html unslop-story.mp4 # --wide para 16:9, --play para assistir
O que ele adiciona ao renderizador do unslop:
- Uma etapa de Acessibilidade. Uma etapa cujo nome contém Acessibilidade mostra medições ao vivo. Coloque
data-contrastem dois a quatro elementos de texto cujo contraste muda; cada um mostra sua proporção WCAG, vermelho abaixo de 4.5:1 (3:1 para texto grande), branco comAAquando passa, cinza?quando uma cor não pode ser lida (comolab()oucolor(display-p3 ...)): use cores sRGB, hex ouoklch()nesses elementos. Coloquedata-targetem um ou dois controles; cada um mostra seu tamanho, vermelho abaixo de 24 por 24 px. Escolha elementos que falham no antes; nunca marque um elemento que ainda falha no depois. - Uma legenda,
<meta name="story-caption" content="...">, canto inferior esquerdo. Declare apenas o que é verdade sobre a execução, como o modelo e que a tela não foi editada manualmente. - O crédito
molveau/skills · método unslop por @heydamiré desenhado em cada quadro, conforme a licença CC BY 4.0 do unslop pede. Não o remova.
A história é uma apresentação de arquivos reais: o passo 0 é o antes como estava, e o último passo é igual ao arquivo limpo que você entrega. Não polia a história além da tela entregue.
Quando ler o quê
| Necessidade | Leia |
|---|---|
| As regras fundidas, valores e decisões de conflito | references/playbook.md |
| Os 20 sinais com substituições e os limites do detector | references/tells.md |
| O método completo do unslop, direção, nove passes, checklist, vídeo de história | references/vendor/unslop/unslop.md |
| Valores exatos (espaçamento, escala tipográfica, rampas, curvas de movimento) | references/vendor/unslop/unslop/references/tokens.md (seus valores de movimento são substituídos: ui playbook §10 e motion §5 vencem, conflito do playbook 19) |
| A lista de auditoria de sinais | references/vendor/unslop/unslop/references/signs.md |
| Visuais de hero, prompts de imagem, quais estilos funcionam | references/vendor/unslop/unslop/references/visuals.md |
| Código de glifo, meio-tom, pontilhado e duotone | references/vendor/unslop/unslop/references/effects.md |
| Telas de referência finalizadas (imagens) | references/vendor/unslop/unslop/references/refs.md |
| Capturar uma URL ao vivo para trabalhar em uma cópia | references/vendor/unslop/unslop/scripts/snapshot.mjs |
| Uma página do zero ou um redesenho profundo: inventário, direção decidida, ideia, regras da casa, portão | references/vendor/taste/taste-skill.md |
| Dashboards, telas de administração e configurações em profundidade | references/vendor/taste/taste-skill/references/app-screens.md |
| Deck de cópia, aritmética de duas linhas, prova sem inventar | references/vendor/taste/taste-skill/references/copy.md |
| Escala tipográfica, configuração de display, carregamento de fontes | references/vendor/taste/taste-skill/references/type.md |
| Papéis da paleta, campos, páginas escuras, contraste | references/vendor/taste/taste-skill/references/colour.md |
| Margens, espaço vazio, o quadro, seções, o telefone | references/vendor/taste/taste-skill/references/layout.md |
| Encontrar, creditar, colocar e tratar imagens e vídeo | references/vendor/taste/taste-skill/references/imagery.md |
Receitas de movimento (opt-in: playbook motion §9) e cenas de scroll | references/vendor/taste/taste-skill/references/motion.md, references/vendor/taste/taste-skill/references/scenes.md |
| Julgar um resultado com uma rubrica | references/vendor/taste/taste-skill/references/critique.md |
| O registro de sinais datados por onda | references/vendor/taste/taste-skill/references/tells.md |
| O estudo por trás dos números do taste | references/vendor/taste/taste-skill/references/research.md |
Os arquivos dos fornecedores mantêm o layout original, então alguns links relativos dentro deles podem não funcionar
aqui. Os scripts do taste-skill leem sua pasta library/ (não a leia inteira; execute draw.mjs); alguns
scripts precisam de Node 22, um navegador, Playwright, ffmpeg ou acesso à rede. Quais verificações visuais executar são
decididas no playbook ui, conflito 14 (o conflito 14 deste playbook aponta para lá).