Esta é a lista completa do carrossel SKILLS: as 10 skills e padrões que mais ajudam um agente de código a fugir da cara de IA no design. Juntas, elas somam mais de 740 mil estrelas no GitHub, e três vêm direto da Anthropic, da Vercel e do Google. Quase tudo instala com um comando e roda no Claude Code, no Codex e no Cursor.
Antes de começar
- Um agente de código: Claude Code, Codex ou Cursor.
- Node.js 18 ou mais novo, para o
npx. - Rode os comandos na pasta do projeto. O instalador
skillspergunta para quais agentes instalar;-a claude-code -a codex -a cursorpula a pergunta e-ginstala para todos os projetos. - Não precisa instalar as 10. Comece por uma de direção visual e uma de revisão.
UI/UX Pro Max · 130 mil estrelas
Um motor de design inteiro dentro do agente. Ele consulta uma base local com 79 estilos, 192 paletas por tipo de produto, 74 pares de fontes e 119 regras de UX antes de desenhar a tela.
npx skills add nextlevelbuilder/ui-ux-pro-max-skill --skill ui-ux-pro-maxNo Claude Code também existe o plugin: /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill. Repositório: nextlevelbuilder/ui-ux-pro-max-skill.
frontend-design · skill oficial da Anthropic
A skill que a própria Anthropic publica para o Claude fugir do visual genérico: escolher uma direção estética clara e executar com cuidado em vez de repetir o template de sempre. Fica no repositório oficial de skills, com 178 mil estrelas.
npx skills add anthropics/skills --skill frontend-designRepositório: anthropics/skills.
Awesome DESIGN.md · 118 mil estrelas
Uma coleção de 74 arquivos DESIGN.md com a linguagem visual de sites reais (Apple, Airbnb, Claude e outros). Não é instalação: você copia o arquivo da marca que admira para a raiz do projeto e pede ao agente para seguir aquele estilo.
Primeiro uso. Baixe um arquivo em getdesign.md ou na pasta design-md/ do repositório, salve como DESIGN.md e peça: "Construa esta página seguindo o DESIGN.md." Repositório: VoltAgent/awesome-design-md.
Taste Skill · 90 mil estrelas
Dá bom gosto ao agente. Ele deduz a linguagem visual do seu pedido e ajusta três controles de 1 a 10: ousadia do layout, intensidade de animação e densidade de informação.
npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"Cuidado com cópias de nome parecido. O original é Leonxlnx/taste-skill.
Impeccable · 71 mil estrelas
De Paul Bakaus, criador do jQuery UI e ex-Google. Uma skill com comandos que viram vocabulário entre você e o agente: critique, audit, polish, bolder, quieter, além de um detector dos vícios mais comuns de site feito por IA.
npx impeccable installDepois rode /impeccable init dentro do agente (no Codex, $impeccable init). Passo a passo completo no nosso guia de skills de design. Repositório: pbakaus/impeccable.
Skills do Emil Kowalski · 41 mil estrelas
Emil é design engineer na Linear, passou pelo time de design da Vercel e criou o Sonner e o Vaul. O pacote ensina animação e micro interação: curvas certas, duração, e revisão de animações que já existem.
npx skills@latest add emilkowalski/skillsRepositório: emilkowalski/skills.
web-design-guidelines · skill oficial da Vercel
Revisa o seu código de interface contra as Web Interface Guidelines da Vercel: acessibilidade, foco, formulários, estados de carregamento. Peça "revise minha UI" e ela devolve a lista do que corrigir. Fica no repositório oficial de skills da Vercel, com 31 mil estrelas.
npx skills add vercel-labs/agent-skills --skill web-design-guidelinesRepositório: vercel-labs/agent-skills.
Hallmark · 29 mil estrelas
Uma skill anti slop da Together AI. Para cada pedido ela escolhe uma estrutura e um de 21 temas, e passa a página por dezenas de checagens antes de entregar. Tem também audit, redesign e study, que extrai o estilo de um site que você admira.
npx skills add nutlope/hallmarkRepositório: Nutlope/hallmark.
design.md · formato oficial do Google
A especificação do Google Labs para descrever uma identidade visual ao agente: tokens exatos (cores, fontes, espaçamentos) no topo do arquivo e o porquê de cada escolha em texto. É o formato por trás do item 3. O pacote oficial valida o seu arquivo:
npx @google/design.md lint DESIGN.mdRepositório: google-labs-code/design.md.
Huashu Design · 24 mil estrelas
Protótipos em HTML, slides e animações direto do agente. Antes de construir, ela propõe três direções visuais para você escolher. A documentação é em chinês, mas a skill funciona com pedidos em qualquer idioma.
npx skills add alchaincyf/huashu-designRepositório: alchaincyf/huashu-design.
Comentários
Ficou com alguma dúvida ou tem algo a acrescentar? Participe da conversa.
Sem precisar de conta. Clique em Entrar e escolha um nome para comentar.
Carregando a conversa…
Privacidade dos comentáriosDiretrizes para comentários