12 Skills Gratuitas Que Corrigem o Design Genérico da IA

Fonte Inter. Gradiente roxo. Cards arredondados com sombras. Quando comecei a fazer vibe coding, o verdadeiro gargalo nunca foi o código. Foi o design. Toda interface gerada por IA parecia ter saído da mesma fábrica de templates.

Um único arquivo SKILL.md muda a forma como o agente pensa sobre design. Instalei e testei dezenas de design skills nos últimos meses. A maioria foi removida em menos de uma semana porque ou conflitavam entre si ou produziam melhorias marginais. As 12 abaixo são as que realmente ficaram.

Por onde começar

O plugin oficial frontend-design da Anthropic é a base. Ele vem com o Claude Code e define regras fundamentais para layout, tipografia e escolhas de cores. Sem ele, o agente recorre ao mesmo combo de Inter + gradiente roxo toda vez. Pense nisso como o piso, não o teto.

O Impeccable vai além do plugin oficial com 20 slash commands: /polish, /audit, /distill, /bolder, /quieter, e mais. Cada um aborda uma preocupação específica de design. O /audit executa uma verificação abrangente de qualidade em acessibilidade, temas e breakpoints responsivos. O /distill reduz um componente ao essencial. Eu uso o /polish antes de cada deploy como uma revisão final.

Controlando a intensidade do design

O Taste Skill tem uma abordagem diferente. Em vez de slash commands, ele usa três variáveis numéricas como DESIGN_VARIANCE para controlar o quanto o agente se desvia dos padrões. Configure baixo para interfaces corporativas conservadoras. Aumente para landing pages experimentais. A granularidade é útil, embora encontrar o ponto ideal exija tentativa e erro. Minha primeira tentativa com alta variância produziu algo que parecia uma página do MySpace de 2006.

Ícones e recursos visuais

O Better Icons conecta mais de 150 coleções de ícones com mais de 200.000 ícones. Você busca por palavra-chave e ele sincroniza o SVG diretamente no seu projeto. Antes disso, eu baixava ícones manualmente de cinco sites diferentes. A qualidade da busca varia por coleção, mas para ícones comuns de UI, ele encontra o resultado certo rapidamente.

Inteligência de design a nível de componente

O UI Design Brain contém princípios de design para mais de 60 componentes em cinco estilos de design. Ele diz ao agente como um modal deve se comportar em um sistema minimalista versus um glassmórfico. Esse nível de especificidade importa porque instruções genéricas do tipo “deixe bonito” produzem resultados genéricos.

O UI UX Pro Max vai mais longe: mais de 50 estilos de design, 97 combinações de paletas de cores, 57 pareamentos de fontes e raciocínio específico por indústria para mais de 160 tipos de produto. O escopo é ambicioso. Sinceramente, a quantidade de opções pode deixar a geração mais lenta se você não restringir o contexto. Eu normalmente defino o estilo e a paleta explicitamente em vez de deixar o agente escolher.

Revisão e controles de qualidade

O agent-skills da Vercel inclui um conjunto de regras de revisão de UI com mais de 100 checkpoints. Ele avalia consistência de espaçamento, contraste de cores, estados de interação e comportamento responsivo. Rodar isso depois da fase de design captura problemas que parecem normais no laptop mas quebram no mobile.

O UI Skills adiciona verificações de qualidade específicas para Tailwind. Comandos como /baseline-ui garantem uso consistente de utility classes, e /fixing-accessibility executa uma auditoria focada de acessibilidade. Se sua stack é baseada em Tailwind, isso preenche uma lacuna que design skills gerais não cobrem.

Cobertura completa do workflow

O Designer Skills Collection é o pacote mais completo desta lista: 63 skills e 27 comandos cobrindo todo o workflow de design, do wireframe à produção. Ele é opinativo, o que significa que ocasionalmente conflita com outros skills. Tive que desativar algumas regras sobrepostas para evitar instruções contraditórias chegando ao agente.

O Design Plugin aplica princípios de design no nível do código. Em vez de sugerir melhorias, ele bloqueia padrões que violam seu design system configurado. Isso é útil em equipes onde várias pessoas usam o mesmo agente.

O visual premium

O Super Design foca em tipografia premium e espaçamento generoso. Ele direciona o agente para escolhas que transmitem sofisticação: fontes maiores, margens mais amplas, paletas de cores contidas. Os resultados ficam visivelmente mais polidos, embora o espaçamento possa ser excessivo em páginas com muito conteúdo.

O Make Interfaces Feel Better é especificamente sobre micro-interações. Hover states, transições de loading, comportamentos de scroll, feedback de botões. Esses pequenos detalhes são o que separa “parece ok” de “a experiência é boa.” Percebi a maior melhoria de qualidade percebida com este skill em comparação com qualquer outro desta lista.

O que não funcionou

Nem toda combinação funciona bem junto. Instalar todos os 12 simultaneamente criou instruções conflitantes que confundiram o agente. A configuração prática é empilhar três ou quatro skills que cobrem preocupações diferentes: um para regras fundamentais, um para orientação a nível de componente, um para revisão e um para a lacuna estética específica do seu projeto.

Também descobri que skills que atuam na mesma camada (como dois sistemas de paleta de cores concorrentes) se anulam. Escolha um por preocupação e mantenha a decisão.

Todos os 12 são gratuitos. Comece com o plugin oficial frontend-design e o Impeccable, depois adicione com base em onde seu resultado ainda parece genérico. E remova Inter do seu font stack.