Shijiuwei/unslop

O que unslop faz?

unslop foi criado por Damir Sokolovsky (@heydamir), que iniciou a série Unslopping no X. É licenciado sob CC BY 4.0, portanto mantenha este crédito em qualquer cópia ou adaptação.

UIs geradas por IA (vibecoded) falham das mesmas maneiras previsíveis. Cada superfície brilha, cada rótulo tem um emoji, o espaçamento é o que o modelo digitou naquele dia e o texto grita. Unslopping corrige o acabamento e mantém o produto. Os recursos, o conteúdo e a ordem das seções permanecem. O que muda é que cada tamanho, cor, palavra e imagem se torna deliberado.

Remover a 'sujeira' (slop) é apenas metade do trabalho. Uma tela limpa, mas que poderia pertencer a qualquer produto, é o próximo modelo. Cada execução termina com uma tela que apenas este produto poderia ter.

A diferença entre sujeira e acabamento está em onde a riqueza visual é aplicada. A sujeira espalha cor e efeitos sobre o cromo (chrome), os fundos, botões, bordas e rótulos. O acabamento mantém o cromo sóbrio e coloca a riqueza em um ou dois momentos de conteúdo que as pessoas lembram, como um objeto renderizado, um gráfico bonito ou uma imagem do universo do produto.

Trabalhe como um designer fazendo uma revisão de alinhamento (redline pass), uma camada de cada vez, em toda a tela.

Como é um bom resultado

• Um elemento brilhante. Cada tela tem uma coisa polida que carrega a cor e o acabamento: um objeto renderizado, uma cena pintada ou um gráfico rico. Tudo ao redor é sóbrio, para que seja lido instantaneamente.
• Cromo sóbrio. Navegação, botões e texto usam neutros matizados e um acento. Nada brilha, nada compete com o elemento brilhante.
• Uma ideia clara. Você pode dizer em uma frase o que o visual mostra e por que pertence a este produto.
• Texto sobre espaço calmo. O título fica em uma parte da imagem ou layout que foi deixada vazia para ele, curto e específico, com uma ação primária e uma secundária e nada empilhado abaixo delas.
• Produto real, material real. As prévias se parecem com o aplicativo real com dados plausíveis, e os objetos parecem coisas reais com peso, luz e sombra.

Quais estilos visuais tendem a funcionar e quais falham estão em referências/visuals.md. Exemplos concluídos para aprender estão em referências/refs.md, e tratamentos de código, como desenhar uma imagem em glifos, estão em referências/effects.md.

Como executar

1. Veja a tela. Encontre os arquivos que a renderizam. Se você puder executar o aplicativo ou abrir o arquivo em um navegador e tirar uma captura de tela, faça isso, para julgar o que as pessoas veem e não apenas o código.
   • Apenas um link para um site ativo, sem código? Salve a página com node <pasta da skill>/scripts/snapshot.mjs <url> unslop/original.html e trabalhe em uma cópia desse arquivo. Adicione --dark ou --light para corresponder ao tema que o usuário vê. Ele também salva original.live.png, uma captura de tela da página ativa, então renderize a cópia salva e compare as duas antes de começar. Fundos animados desenhados por scripts não sobrevivem, então descreva-os na auditoria a partir da página ativa.
   • Apenas uma captura de tela? Reconstrua a tela como um único arquivo HTML estático primeiro, combinando-a de perto, e trate isso como o original.
   • Em ambos os casos, o resultado é uma página redesenhada em código que o usuário pode entregar a quem quer que seja o dono do site real, então diga isso no relatório.
2. Auditoria. Percorra referências/sinais.md e liste cada sinal que encontrar, uma linha cada com onde ele está.
3. Decida quanto mudar. Leia a auditoria honestamente antes de planejar qualquer coisa.
   • Muita sujeira, muitos sinais em cor, tipografia, ícones e texto. Execute o processo completo abaixo.
   • Pouca sujeira, uma tela que é majoritariamente projetada com alguns sinais restantes. Modo polimento. Corrija apenas o que a auditoria encontrou, tire a direção da marca existente em vez de inventar uma nova, e mantenha a paleta, tipografia, layout e visual. Ideias maiores, como um momento que está faltando ou uma cena para o herói, vão para o relatório como sugestões, não como mudanças.
   • Sem sujeira. Diga claramente e sugira no máximo dois ou três pequenos refinamentos, com valores exatos. Aplique-os apenas se o usuário concordar e pare por aí. Nunca mude uma tela boa apenas para torná-la diferente.
4. Defina a direção e pare. Escreva as cinco linhas descritas abaixo. Mostre a auditoria e a direção ao usuário e aguarde a resposta dele antes de editar, pois mudar a direção depois significa refazer tudo. Se você tiver uma ferramenta para fazer perguntas ao usuário, faça-a através dela; caso contrário, pergunte em texto simples e pare. Pule a espera apenas quando o usuário já disse para simplesmente fazer.
5. Corrija em nove passagens, em ordem. Termine uma passagem em toda a tela antes de começar a próxima. Quando quase todas as linhas mudam, planeje as passagens em ordem e então escreva a nova tela de uma só vez, desde que cada passagem seja aplicada. O espaçamento vem primeiro porque tudo mais se lê de forma diferente uma vez que o ritmo está certo. O texto vem antes da tipografia e do layout porque o comprimento do título decide seu tamanho e onde ele fica. Os visuais e o movimento vêm por último porque devem caber em uma tela que já funciona sem eles.
6. Verifique. Execute a lista de verificação no final deste arquivo, renderize novamente e compare com a lista de auditoria. Qualquer coisa ainda na lista é corrigida.
7. Relate a direção, algumas linhas por passagem sobre o que mudou e qualquer prompt de imagem que você escreveu.
8. Registre, quando solicitado ou quando o usuário quiser algo para compartilhar. Construa o arquivo de história e renderize o vídeo descrito em Vídeo da história. Se o usuário pedir no início, escreva cada passagem no arquivo de história conforme avança.

Mantenha uma execução rápida. Renderize a tela para verificar no máximo três vezes. Ao gerar uma imagem, inicie-a logo após a direção ser confirmada e continue fazendo as primeiras passagens enquanto ela é executada, em vez de esperar por ela.

Os valores exatos para cada passagem estão em referências/tokens.md.

Direção

Antes de tocar em qualquer coisa, escreva cinco linhas curtas. Derive-as do que a página diz que o produto faz e para quem é. Nunca a partir do que está na moda.

• Produto. O que faz e para quem, em uma frase simples.
• Caráter. Duas ou três palavras concretas, como calmo, preciso, um pouco acolhedor ou rápido, técnico, lúdico. Palavras como limpo, moderno, elegante, mínimo e premium não são permitidas, porque descrevem todos os modelos.
• Mundo. O lugar ou material ao qual o produto naturalmente pertence. Um aplicativo de notas vive perto de papel e tinta, uma ferramenta de monitoramento perto de instrumentos e turnos noturnos, um aplicativo de viagens perto de mapas e luz de janela. Este mundo define o tom dos neutros, o acento e o visual.
• Momentos. Um ou dois lugares onde a tela ganha cor rica, material e detalhe, escolhidos a partir do que o produto mostra. Um cartão ou dispositivo renderizado dentro da prévia, um gráfico cujas cores significam cada série, um objeto do mundo colocado ao lado do conteúdo. Escreva o que são.
• Assinatura. Um pequeno detalhe que apenas este produto teria, usado de forma consistente. Um ponto de status ativo para uma ferramenta de monitoramento, teclas (keycaps) para uma ferramenta de desenvolvedor, sublinhados desenhados à mão para um aplicativo de ensino, uma linha de rota para um aplicativo de entrega. Um detalhe, não cinco.

Os exemplos aqui mostram apenas a forma de uma resposta. Derive a sua a partir do produto à sua frente, mesmo quando um exemplo coincidentemente se encaixa.

Se o produto já tem uma marca real, como um arquivo de logotipo, uma cor ou uma tipografia que não é sujeira, mantenha-a e construa a direção em torno dela. Um gradiente violeta para azul, brilhos (sparkles) e brilho (glow) são sujeira mesmo quando estão no logotipo, portanto não contam como marca a menos que o usuário diga que sim.

1. Espaçamento

• Tudo está em uma grade de 4px. Margens, preenchimentos, lacunas e alturas fixas são múltiplos de 4, então 28 ou 104 são aceitáveis mesmo que não estejam na lista de tokens. Um passo de 2px é aceitável para ajustes dentro de controles pequenos, e um valor ímpar que centraliza exatamente algo permanece.
• Mesma coisa, mesmo tamanho. Todas as linhas em uma lista compartilham uma altura e uma lacuna, todos os cartões em uma linha compartilham um preenchimento.
• O espaço mostra agrupamento. O espaço dentro de um grupo é menor do que o espaço entre grupos, então uma lista é lida como um bloco e as seções como separadas.
• As coisas se alinham. Os ícones ficam em uma coluna, os rótulos começam em uma linha, os números alinhados à direita em uma coluna. Nada é deslocado da linha com um translate solto ou margem ímpar.
• O preenchimento segue a densidade. Painéis compactos e barras laterais em torno de 16, cartões de 20 a 24, bordas de página de 24 a 32.
• A navegação é a parte mais densa de um aplicativo. As linhas têm 32 a 36 de altura com 2 a 4 entre elas, ícones em uma coluna, rótulos em uma linha. O rótulo de uma seção fica mais próximo de seus próprios itens do que da seção acima, como 24 acima e 8 abaixo. Meça a barra lateral após a passagem, é onde o espaçamento quebra com mais frequência.
• Remova valores únicos que quebram o ritmo, como mt-[13px] ou py-[11px], e substitua-os por passos da escala.

2. Cor

• Construa a partir de uma rampa neutra, matizada em direção ao mundo da direção. Escolha grafite, quente ou tinta dos tokens, ou matize a sua própria da mesma forma. Fundo, superfícies elevadas, bordas e texto vêm todos dessa rampa.
• Em aplicativos e painéis de controle, os fundos, superfícies, bordas e texto permanecem neutros, a rampa grafite ou algo igualmente cinza. As pessoas olham para eles por horas e o conteúdo deve carregar a cor. Uma tela cujo fundo é lido como laranja, marrom, azul ou verde foi longe demais. O mundo se mostra no acento, nos gráficos e nos momentos, não nas superfícies. Páginas de destino podem matizar suas superfícies mais em direção ao mundo.
• Três papéis de texto: primário, secundário e silenciado. Não dez lavandas ligeiramente diferentes.
• No cromo, um acento, usado raramente. Ele marca a ação primária, a seleção ou o único número que importa.
• Os momentos da direção são a exceção. Dentro deles, a cor pode ser rica, vários matizes em um gráfico, um objeto renderizado com materiais reais, uma imagem com sua própria luz, desde que permaneça dentro do mundo e cada cor signifique algo.
• Se a marca tem uma cor real, ela se torna o acento e sai das superfícies. Se não há cor de marca real, tire o acento do mundo.
• Acento com texto sobre ele atinge contraste de 4,5 para 1. Se não atingir, escureça-o ou coloque texto escuro sobre ele. Acento usado como texto ou tinta sobre uma superfície clara precisa do mesmo contraste, então use um tom mais escuro dele lá.
• Em temas escuros, o botão primário pode ser um branco off-white da rampa com texto escuro, e o acento pode viver em um lugar menor como a seleção ou um número-chave. Isso geralmente parece mais deliberado do que um botão colorido.
• Cores semânticas carregam apenas significado, como verde para uma boa mudança e vermelho para um erro, e são suavizadas para se encaixar dentro da paleta.
• Remova gradientes de matiz em superfícies, texto gradiente, brilhos coloridos e sombras coloridas, lavagens de cor radial e bolhas atrás do conteúdo, e bordas neon.
• As bordas são hairlines silenciosas, a cor do texto da rampa a 6 a 10% de opacidade.
• Em temas escuros, a profundidade vem de passos de superfície e hairlines, não de sombras. Uma janela ou objeto flutuando sobre uma imagem pode manter uma sombra neutra suave. Em temas claros, as sombras são neutras, suaves e pequenas.
• Um gradiente é permitido apenas como uma pequena mudança de tom dentro de um neutro, como uma linha ativa indo de #2b2b2b para #1f1f1f. Nunca de um matiz para outro.

3. Ícones

• Cada emoji usado como ícone ou como decoração em um rótulo se torna um ícone de linha de um conjunto. Use o conjunto que o projeto já tem, caso contrário lucide.
• Um tamanho e um traço em todos os lugares, 16 ou 18px com um traço de 1.5.
• Os ícones assumem a cor de seu papel de texto, geralmente secundário ou silenciado. Eles nunca recebem suas próprias cores.
• A caixa do ícone tem a mesma largura em cada linha e a lacuna para o rótulo é fixa, 8 ou 10, para que os rótulos se alinhem.
• Descarte ícones que não acrescentam nada, como um emoji em cada título de cartão ou antes de cada rótulo de seção. Categorias que precisam de cor recebem um pequeno ponto de status.

4. Texto

• Os títulos dizem o que o produto faz para quem, em palavras simples, de modo que não poderiam se encaixar em outro produto. Use os fatos já na página e não invente novos.
• Sem pontos de exclamação no texto da interface, e nunca !!.
• Sem títulos de saudação como Bem-vindo de volta, Damir! 👋. O título nomeia o contexto, como o nome da página ou o período, por exemplo Outubro de 2026.
• Rótulos curtos. Pesquisar, não Pesquisar qualquer coisa....
• Uma mudança diz com o que está comparando, como +12% vs mês passado ou 3 a menos vs mês passado.
• Títulos, subtítulos, rótulos, botões e legendas terminam sem ponto final. Apenas parágrafos de várias frases mantêm seus pontos finais.
• Sem palavras de hype como supercarregado, sem emendas, desbloqueie, mágico, revolucione ou game-changing, e nenhum com tecnologia de IA em tudo.
• Alegações que não podem ser verificadas, como Amado por mais de 10.000 equipes ou 10x mais rápido, tornam-se discretas e específicas se o usuário confirmar que são reais, e são removidas caso contrário. Pergunte e liste-as no relatório.
• Os dados de exemplo parecem reais, com números e nomes plausíveis, nunca [X] ou 123.456.
• Distintivos como PRO, Novo ✨ ou Beta 🚀 vão embora a menos que o produto realmente precise deles, e então são texto discreto.

5. Tipografia

• Escolha a tipografia para o caráter da direção, a partir das famílias nos tokens. Mantenha a fonte do projeto quando ela fizer parte de uma marca real. Um padrão como Inter que ninguém escolheu pode ser trocado quando outra família se encaixar melhor no caráter. Uma família para a interface, mais no máximo uma parceira de qualquer linha dos tokens: uma mono para figuras e meta ou uma face display para títulos grandes.
• Alguns tamanhos de uma escala e dois pesos, 400 e 500, com 600 no máximo para ênfase rara. Sem títulos de 700 a 900, sem texto gradiente.
• A hierarquia vem do tamanho e da cor, não do peso.
• Frase com inicial maiúscula (Sentence case) em todos os lugares. Rótulos como NAVEGAÇÃO ou PAGO ESTE MÊS com rastreamento largo se tornam Navegação e Pago este mês.
• Texto pequeno nunca recebe espaçamento negativo entre letras. Legibilidade em texto pequeno significa maior, um pouco mais negrito ou ligeiramente mais solto. Rastreamento apertado é apenas para texto display grande.
• Os números usam tabular-nums e um formato em toda a tela. Se uma figura tem casas decimais, todas as figuras têm casas decimais. Se uma não tem, nenhuma tem.

6. Layout

• Uma grade ou coluna clara. O conteúdo principal tem uma largura máxima que não se estica através de uma tela de 2000px.
• Uma coluna de texto tem uma medida confortável, 600 a 720px.
• Margens laterais e lacunas de grade compartilham o mesmo valor do token de espaçamento da página.
• Seções contrastam por tom de superfície ou por uma margem vertical maior, nunca por um separador ou borda.
• Uma barra lateral de navegação é um painel com seu próprio fundo e não uma lista flutuante.
• O conteúdo se encaixa na janela de visualização sem rolagem horizontal e, em uma tela cheia, sem rolagem vertical quando possível. Se o usuário tirou uma captura de tela de um painel específico, esse painel se encaixa sem rolagem.
• Tabuletas (tables) de dados têm linhas que alternam a cor de fundo ou uma linha separadora, e a coluna mais importante é a primeira.

7. Detalhes

• Cantos arredondados seguem uma escala, coerentes com o caráter. Botões, campos e painéis pequenos usam um canto, cartões e modais usam outro. Nada é um círculo completo a menos que seja intencional.
• As bordas dos campos de entrada sinalizam o estado: repouso, foco, erro. O estado de repouso é uma hairline, o erro é o semântico, o foco é o acento.
• Os links têm uma cor de repouso do mesmo valor do texto e uma cor de foco que é o acento. Sublinhados aparecem no foco ou no hover, não em repouso.
• Listas de navegação linear, uma barra de guias ou uma lista vertical, nunca ambas no mesmo nível.
• Itens vazios mostram um estado vazio discreto, não um título Nada aqui.
• Micro-interações com um toque de cor do mundo, o acento em um hover ou o traço de um ícone que acende.

8. Visuais

• Gere uma imagem de herói que pareça que foi feita para o produto, uma cena do universo do produto ou um objeto renderizado que parece real, nunca um gradiente abstrato, uma malha de wireframe ou um espaço vazio com partículas.
• A imagem tem espaço para o título e para qualquer texto que fique sobre ela ou ao lado dela.
• A escala e o enquadramento funcionam com a medida de texto, sem recorte estranho.
• A iluminação na imagem corresponde ao tema do produto. Se o tema for escuro, a imagem pode ser noturna ou com pouca luz. Se for claro, a iluminação é clara e arejada.
• Use a ferramenta de imagem disponível. Se não houver, descreva a imagem em detalhes no relatório e prossiga com um espaço reservado ou um placeholder de cor sólida.
• Seções de recursos mostram o que o produto faz, com números reais ou um breve texto, não apenas um título e um espaço em branco.

9. Movimento

• Micro-interações: hover nos botões muda a cor de fundo lentamente durante 200ms com ease-out. Links sublinham no hover. Itens de lista mostram um fundo sutil no hover.
• Espera-se que o conteúdo apareça. As seções deslizam para cima 16px com opacidade 0 para 1 ao rolar, em 400ms com um atraso escalonado. Ou aparecem, sem movimento.
• O estado de carregamento mostra um shimmer ou um spinner, não um flash de conteúdo vazio.
• Modais e painéis deslizam de uma borda ou aparecem com uma escala de 0.95 a 1, 200ms ease-out.
• Nenhuma animação infinita, nenhuma partícula flutuante, nenhum brilho pulsante.

Verificação

Depois de todas as passagens, verifique esta lista. Qualquer item que falhar é corrigido.

• O espaçamento é múltiplo de 4, elementos semelhantes são do mesmo tamanho.
• Cores: uma rampa neutra, um acento, sem gradientes, sem brilhos, sem superfícies coloridas.
• Ícones: todos de um conjunto, um tamanho, uma cor, alinhados.
• Texto: fatos, sem hype, sem saudações, sem pontos de exclamação.
• Tipografia: uma ou duas famílias, pesos 400/500, frase com inicial maiúscula.
• Layout: grade clara, sem estouro, hierarquia.
• Detalhes: cantos, bordas consistentes, estados.
• Visuais: imagem do mundo do produto, espaço para texto.
• Movimento: sutil, sem infinito.
• A tela parece que pertence a este produto e não a um modelo.
• Cada mudança na auditoria foi resolvida.

Relatório

Quando terminar, escreva um resumo de algumas linhas.

• Direção. As cinco linhas.
• Mudanças. Algumas linhas por passagem sobre o que mudou e por quê.
• Prompt da imagem. O prompt exato que você usou, se gerou uma imagem.
• Observações. Qualquer sugestão que o usuário possa considerar, como um ícone de aplicativo ou uma página adicional.

Vídeo da história

Quando solicitado ou quando o usuário quiser algo para compartilhar, construa um arquivo de história. O formato está em referências/story.md, e a pasta story-frame/ tem um modelo para renderizar quadros.

1. Capture quadros: estado original, depois de cada passagem e final.
2. Anote cada quadro com o que mudou.
3. Renderize um vídeo com ffmpeg ou a ferramenta que você tiver, com 2 segundos por quadro e uma transição suave.
4. Salve o vídeo como unslop-story.mp4.

Se não conseguir renderizar o vídeo, compile os quadros em um arquivo de documento ou markdown e descreva o que cada um mostra.