por que o Claude entrega design genérico por padrão, as 5 skills que consertam isso na prática, e o passo a passo pra montar a sua própria quando nenhuma encaixa no seu brand.
você já sabe reconhecer. gradiente roxo em fundo branco, fonte Inter, sombra soft no card, um emoji perdido no meio da seção. bate o olho e pensa: isso aqui foi o Claude que fez.
não é culpa do modelo. é o comportamento default dele.
quando você pede "monta uma landing page" sem mais nenhuma instrução, o modelo não vai atrás da escolha mais interessante. ele vai atrás da mais provável. e a escolha mais provável é a média de tudo que ele viu treinando: milhões de páginas seguras, genéricas, esquecíveis. o resultado é design que parece design de IA porque é literalmente o centro estatístico do que existe na web.
a Anthropic tem nome pra isso, chama de convergência distribucional. na prática significa uma coisa só: sem direção, o Claude sempre cai no lugar-comum.
skill é como você tira ele desse lugar.
o que é uma skill, rápido
pensa num arquivo markdown(texto) que o Claude lê antes de começar a trabalhar. em vez de você repetir suas preferências, seu design system e seu tom em todo prompt, você escreve isso uma vez e ele carrega sozinho. é uma descrição de cargo que você entrega antes de passar a tarefa.
a diferença no output é grande. mesmo prompt, mesmo Claude, mas com a skill certa carregada ele para de ser um designer genérico e vira um colaborador que conhece seu trabalho.
testei um monte delas, com antes e depois em cima do mesmo prompt pra ver o que muda de verdade. dá pra separar 5 que realmente movem o ponteiro pra web design.
1. Frontend Design (a oficial da Anthropic)
essa é a mais popular do ecossistema, e por um motivo justo: foi a própria Anthropic que soltou. passou de 277 mil instalações.
o segredo dela não é ensinar o Claude a desenhar bonito, é ensinar o que não fazer. o arquivo lista explicitamente os clichês pra evitar: fontes batidas, esquema de cor de sempre, aquela estrutura de sombra de card que todo mundo reconhece. é uma aula curta de bom gosto embutida no modelo.
no teste de antes e depois isso fica óbvio. a mesma landing page que saía com gradiente roxo e emoji vira uma coisa editorial, com pareamento de serif elegante e sans-serif limpo, animações de fade no scroll, hover states pensados. de um prompt só.
quando usar: sempre que for começar um projeto do zero e quiser fugir do default na primeira tentativa. é a sua base.
e não te prende no estilo dela. se você quer o resto das regras mas só fontes sans-serif, é só editar o markdown e mandar: "só use Geist, Google Sans ou DM Sans". o Claude ajusta o arquivo.
2. Impeccable (a caixa de ferramentas)
feita pelo Paul Bakaus, essa virou uma das queridinhas da comunidade, passou de 45,9 mil stars no GitHub em pouco tempo. e dá pra entender por quê.
o barato dela são os comandos. tem o /impeccable puro, mas vem com cerca de 20 subcomandos que você chama conforme o contexto:
- /impeccable animate adiciona animações de intro e movimento de forma coesa, do jeito que faz sentido pra página
- /impeccable quieter roda uma auditoria de "barulho" no design (gradiente demais, peso de fonte pesado em todo heading, emoji espalhado) e enxuga o excesso, trazendo elegância no lugar do grito
- /impeccable audit faz um check de qualidade e acessibilidade
- /impeccable document gera um design.md que captura seu design system inteiro, pra qualquer agente reler depois
por baixo ela tem 46 regras determinísticas de detecção de slop, aquelas que rodam sem depender do modelo adivinhar. pega padrão AI-generated na régua.
quando usar: pra iterar em cima do que você já tem. pegou uma página pronta e quer domar o exagero? quieter. tá sem vida? animate. em dois prompts o site muda de patamar.
detalhe que vale além da ferramenta: a Impeccable tem uma aba de "slop" que mostra os padrões que ela ensina a IA a evitar. olha essa lista você mesmo. aprender a reconhecer que uma borda de acento na lateral do card virou clichê de IA te faz desenhar melhor no braço também.
3. UIUX Pro Max (a que força o Claude a pensar)
essa é um banco de dados de design com esteroide, e a mais estrelada da lista: passou de 105 mil stars no GitHub. são 67 estilos de UI, 161 paletas de cor, 57 pares de fonte, 99 diretrizes de UX e 16 tech stacks pra ele saber como implementar em cada framework.
o ponto dela não é te dar código rápido, é o contrário. ela força o Claude a raciocinar antes de escrever qualquer linha. ele roda seu layout por uma busca em cinco domínios em paralelo (produto, estilo, cor, landing, tipografia), aplica as regras de raciocínio e só então devolve um design system completo, com os anti-padrões pra evitar já marcados.
https://x.com/nett0eth/status/2073490435066982554
o resultado é seção intencional, não decorativa. no teste ele fez coisas do tipo transição de light pra dark bem no bloco de KPI, justamente pra destacar o número que precisa saltar. é o tipo de decisão que você espera de um humano, não de um gerador.
quando usar: quando você tem clareza do conteúdo e quer profundidade de design. e um aviso que vale ouro: quanto mais específico você for sobre o que quer em cada seção, melhor. skill não lê sua mente, ela amplifica sua direção. mandar "usa a skill e faz um redesign mais drástico, explora as paletas e os pares de fonte" muda completamente o que volta.
4. Web Design Guidelines (a auditora, da Vercel Labs)
essa é pro fim do projeto, não pro começo. vem da Vercel Labs, tem 29 mil stars no GitHub, e audita seu código contra a lista de web interface guidelines da Vercel, mais de 100 regras: foco de teclado funcionando, nunca desabilitar zoom, não bloquear paste, indicador de loading em botão, hierarquia de heading, ARIA, e por aí vai.
e tem um truque que eu gosto: você pode pedir pro Claude anotar os problemas direto na tela do preview. em vez de ler uma lista, você vê no site, em laranja, onde tá faltando aria-label, onde a navegação por teclado quebra, onde o CTA não tem foco. fica visual.
quando usar: quando o design já tá bom e você quer garantir que é acessível e não vai constranger ninguém que usa teclado ou leitor de tela. é o QA antes de subir.
5. Astryx (o design system feito pra agente, da Meta)
https://x.com/nett0eth/status/2073826299789889884
o quinto é de outra categoria: não é uma skill de gosto, é um design system inteiro. as 4 acima ensinam o Claude a desenhar melhor, uma tela de cada vez. a Meta apostou no caminho oposto e abriu o Astryx, o design system que cresceu 8 anos dentro de casa, virou o maior e mais usado da empresa e roda em mais de 13 mil apps. agora é open source e, o detalhe que importa aqui, agent ready.
a sacada é essa: em vez de torcer pro modelo ter bom senso a cada componente, você entrega pra ele um sistema onde tudo já nasce acessível e consistente. são mais de 150 componentes, 7 temas prontos, dark mode e uma CLI que a pessoa e o agente usam do mesmo jeito, lendo a mesma doc. tem até um CLAUDE.md no repositório pro Claude entender a casa antes de escrever a primeira linha.
roda em React e StyleX, tá em beta, já com 8,2 mil stars.
quando usar: quando você quer consistência de sistema, não só uma tela bonita. as skills afinam o gosto do modelo, o Astryx garante que a fundação já é sólida antes de qualquer prompt. os dois se somam.
onde achar mais skills
essas 5 cobrem uns 90% do que um web designer faz no Claude. mas se quiser explorar, tem diretório bom:
- UI Skills é focado em design engineer, mas serve pra web design também. lista várias dessas 4 e tem coisas de acessibilidade e de Shadcn
- Type UI é o meu favorito pra quem pensa visual primeiro. você rola e vê preview de cada estética (minimalista, neo-brutalismo, corporativo sofisticado) e chama a que quer sem escrever parágrafo de instrução
- MCP Market é repositório grande da comunidade, vai em Agent Skills > Categories > Design Tools e tem lista sem fim
- skills.sh é onde a Vercel e outros publicam oficial, bom pra pegar direto da fonte
como criar a sua própria skill
quando nenhuma delas encaixa 100% no seu brand ou no seu stack. aí você faz a sua.
no app do Claude ou no Claude Code, vai em Customize > Skills > Create Skill > Create with Claude. ele começa te perguntando o que a skill deve fazer.
a parte que separa uma skill útil de uma inútil é o quanto você é específico aqui. em vez de "faz design bonito", dá regra de raciocínio. por exemplo:
- sempre identifique o tipo de produto primeiro (dashboard, landing, app), porque o design muda com o contexto
- sempre infira o objetivo da tela antes de desenhar: que ação importa mais e o que o usuário tem que notar primeiro
- default pra paleta contida, fundo e superfície mais neutros
- uma fonte de corpo primária e, se precisar, uma display pra heading grande
o Claude puxa uma conversa e vai perguntando sobre seu stack (tokens de Tailwind, por exemplo), suas proporções de espaçamento, seus limites de layout. seja detalhista, é isso que faz a skill valer. no fim ele empacota tudo num .md com pastas de referência e você acessa por um slash command próprio.
só que criar a skill é a parte fácil. o difícil é que ela não quebre na sessão seguinte, e aí entra o eixo que muita gente pula. eu já destrinchei o framework de 8 passos do Matt Pocock pra escrever skill que se sustenta (gatilho, estrutura, direcionamento, poda) num artigo à parte, e ele vale mais que qualquer skill de design que você instalar:
https://x.com/nett0eth/status/2075976597513830727
vale ler junto, é o mesmo raciocínio de "dar a régua certa pro modelo" aplicado uma camada acima. o guia oficial da Anthropic, The Complete Guide to Building Skills for Claude, também destrincha os princípios.
o que fica
o Claude não é um designer impressionante por padrão. isso não é novidade pra ninguém que já pediu uma landing page e recebeu o gradiente roxo de sempre.
skill é como você fecha esse gap. não porque o modelo ficou mais inteligente, mas porque você deu a ele a régua que um designer de verdade carrega na cabeça. o modelo importa menos que o loop que você constrói em volta dele.
configura uma vez. o salto no output é grande o bastante pra você não querer mais trabalhar sem.
fica a pergunta: quantos dos seus projetos ainda estão saindo com o gradiente roxo de sempre só porque você nunca carregou uma skill antes de pedir? Salva e compartilha 👍
Fontes / links :
- Frontend Design (Anthropic)
- Impeccable (Paul Bakaus)
- Web Design Guidelines (Vercel Labs
- UIUX Pro Max
- Astryx (design system agent-ready, da Meta)
- The Complete Guide to Building Skills for Claude
- Meu último artigo (framework de 8 passos pra criar skills):
