Ask HN: Como você pode saber se um site/app foi feito com vibe coding?
Ask HN: How can you tell a site/app is vibe coded?
Tenho usado duas ferramentas de código aberto para prevenir e verificar isso em meus próprios sites/projetos. Elas são muito boas em detectar e são dirigidas pela comunidade, então recebem atualizações regularmente. 1. Impeccable (github.com/pbakaus/impeccable) — um CLI que verifica HTML/CSS/JSX com 59 regras determinísticas de anti-padrões. Ele captura os sinais visuais reais: brilho escuro com deslocamento zero em texto, bordas de 1px combinadas com desfoque de sombra de 40px, Inter/Roboto/Geist como a fonte 'tasteful' padrão... etc. Não vou listar todos os 59 aqui. 2. Taste Skill (github.com/Leonxlnx/taste-skill) — preventivo em vez de detetive. É um conjunto de arquivos SKILL.md que você carrega no seu agente de codificação (Cursor, Claude Code, etc.) antes da geração para que a porcaria nunca seja criada em primeiro lugar. --- todos sabem sobre o uso excessivo de Em-dash, mas há outros sinais como o brilho de fundo escuro com deslocamento, bordas grossas, estilo de exibição plano, uso excessivo de esquemas de cores tecnológicos como azul-marinho (especialmente com gradientes) e emojis em cabeçalhos como ícones grandes. há cerca de 5 fontes comuns que as IAs usam etc. o ponto é que seu LLM vai raciocinar que todas essas são escolhas boas e seguras e mesmo quando você diz para serem diferentes, eles darão uma lógica de som ótimo para usá-las... que é exatamente o problema. cada LLM 'raciocina' para usar as mesmas escolhas, então os sites parecem todos iguais.
Uma das maiores pistas é o uso excessivo de gradientes sutis e sombras difusas, especialmente em botões e cartões. Sites 'vibe coded' tendem a ter uma estética genérica de 'saas moderno' que parece boa à primeira vista, mas carece de personalidade e intenção de design.
Eu procuro por inconsistências na hierarquia visual: títulos com pesos de fonte inconsistentes, espaçamento irregular e alinhamento que parece 'quase certo' mas nunca perfeito. Isso sugere que o código foi gerado sem um olhar humano cuidadoso.
Uma dica infalível é verificar o código-fonte: se você vê classes CSS com nomes como 'container', 'wrapper', 'flex', 'grid' repetidas ad nauseam, e sem comentários ou estrutura semântica, é provável que seja vibe coded. Ferramentas como Impeccable podem detectar esses padrões automaticamente.
Outra pista é a falta de microinterações e estados de hover bem pensados. Sites vibe coded geralmente têm animações genéricas de fade-in ou slide-up, mas não têm feedback tátil para ações do usuário, como mudanças de cursor ou transições suaves.
Eu suspeito quando o site usa a mesma paleta de cores 'tech' de sempre: azul-marinho, roxo, e gradientes. É como se o LLM tivesse sido treinado em um conjunto limitado de designs e não conseguisse sair desse padrão.