Voltar
Material gratuito

Como instalar o unslop e tirar a cara de IA do seu app

O link do repositório, a instalação no Claude Code e no Codex, os sinais de cara de IA que a skill procura, a ordem das passadas e como gerar o vídeo de antes e depois.

4 min de leitura
Como instalar o unslop e tirar a cara de IA do seu app

O que você vai aprender

Você pede uma tela para a IA e ela volta com degradê roxo, brilho em volta de tudo, emoji no lugar de ícone e texto em caixa alta gritando. Cada app gerado fica com a mesma cara, e isso é o que o projeto chama de "slop". O unslop é uma skill grátis para Claude Code e Codex que procura esses vícios e refaz a tela como um designer faria numa revisão.

Ela não sai mexendo no código. Primeiro audita a tela e lista cada sinal de IA com o lugar onde ele está. Depois propõe uma direção tirada do seu produto e só então corrige, uma passada por vez. Se a tela já estiver boa, ela avisa e sugere só pequenos ajustes, em vez de redesenhar.

Funciona em Next.js, React, Vue, Svelte, Tailwind ou HTML e CSS puros, em painéis, apps e landing pages. Segundo o README, funciona até em um site no ar quando você só tem o link.

Link do repositório oficial

O código, o README e os exemplos estão no GitHub do autor, Damir Sokolovsky (@heydamir):

Instale só por esse endereço. A licença é CC BY 4.0: dá para usar, alterar e compartilhar, inclusive comercialmente, desde que você dê crédito ao autor e linke o repositório.

Passo a passo da instalação

No Claude Code

  1. Baixe o repositório e copie a pasta da skill para a sua pasta de skills:
git clone https://github.com/heydamir/unslop
mkdir -p ~/.claude/skills && cp -r unslop/skills/unslop ~/.claude/skills/
  1. Para usar só em um projeto, copie para .claude/skills/ dentro da pasta do projeto, em vez da pasta pessoal.
  2. Abra o Claude Code e digite /unslop com o que você quer. Também dá para pedir com suas palavras, e o agente pega a skill sozinho.

No Codex

  1. Peça ao próprio Codex para instalar direto do repositório:
$skill-installer install https://github.com/heydamir/unslop/tree/main/skills/unslop
  1. Ou copie à mão para ~/.agents/skills/ (ou .agents/skills/ dentro de um projeto):
git clone https://github.com/heydamir/unslop
mkdir -p ~/.agents/skills && cp -r unslop/skills/unslop ~/.agents/skills/
  1. No Codex, a chamada é $unslop em vez de /unslop.

Exemplos de pedido

Exemplos do próprio README:

/unslop this dashboard
/unslop the hero of https://example.com
/unslop my landing page and make the story video so I can post it

Em português também funciona, porque o agente entende o pedido: "/unslop este painel" ou "/unslop o topo da minha landing page".

Os sinais de cara de IA e a ordem das passadas

A skill começa pela auditoria. Os sinais que o README cita:

Depois de listar, ela define a direção: o caráter da tela, os um ou dois momentos que carregam a cor e um detalhe de assinatura, tudo tirado do seu produto. Então corrige em passadas, nesta ordem:

  1. espaçamento
  2. cor
  3. ícones
  4. texto
  5. tipografia
  6. layout
  7. detalhes
  8. imagem
  9. movimento

Você pode orientar logo depois da proposta de direção, porque ela só edita depois de apresentá-la.

Como gerar o vídeo de antes e depois

A skill grava um vídeo quadrado de menos de 10 segundos da sua tela se arrumando, pronto para postar. Para esse vídeo, e também para tirar foto de um site no ar, ela precisa de duas coisas instaladas na pasta do projeto onde você roda a skill:

npm install -D playwright
npx playwright install chromium

O vídeo exige ainda o ffmpeg instalado e disponível no PATH do computador. Depois é só pedir, como no terceiro exemplo acima: "e faz o vídeo da história para eu postar".

Limites e cuidados

Fontes

Conferidas em 02/11/2026 e relidas em 03/11/2026.