O Claude escreve código bom e design médio. Não é culpa dele: aprendeu com a internet inteira, e a internet inteira usa o mesmo gradiente roxo, a mesma fonte Inter e o mesmo salto no hover. Sem direção, ele entrega a média do que viu.
Três skills mudam isso. Skill é um arquivo de instruções que o Claude lê quando a tarefa combina com ele: não muda o seu código, muda o critério de quem escreve. Abaixo estão as três, com os repositórios oficiais, os comandos exatos e a ordem para usar as três juntas. Os números de estrelas foram conferidos na API do GitHub em 4 de setembro de 2026.
Antes de instalar
Você precisa do Claude Code e de um terminal aberto na pasta do projeto. O instalador nativo abaixo não exige Node.
Como ler os comandos daqui em diante: linha com $ roda no terminal, linha começando com barra roda dentro do Claude, e frase entre aspas é um prompt que você digita como texto normal.
01. Frontend Design, da Anthropic
É a base, e por isso vem primeiro. Com ela o Claude passa a decidir paleta, tipografia e layout antes de escrever a primeira linha, em vez de cuspir o mesmo template de sempre.
anthropics / skills
Skill oficial da Anthropic. Fica em skills/frontend-design, dentro do plugin example-skills.
github.com/anthropics/skills/tree/main/skills/frontend-design174k
estrelas · Python
Não tem comando para chamar: peça uma interface e ela entra sozinha. Um prompt que funciona: "Crie a landing page do [produto]. Quero direção visual própria, tipografia com personalidade e paleta pensada pra esse público. Nada de gradiente roxo, nada de Inter."
02. Impeccable, do Paul Bakaus
Uma skill com 23 comandos e um detector com 61 regras que caçam a cara de IA na tela. Depois da instalação, o detector roda sozinho a cada edição.
pbakaus / impeccable
Linguagem de design para agentes de código. O detector roda sem IA e sem chave de API.
github.com/pbakaus/impeccable65.4k
estrelas · JavaScript
Os quatro que mais rendem no dia a dia:
$ npx impeccable detect ./src— as 61 regras varrem a interface atrás de gradiente roxo, Inter e salto no hover./impeccable critique— crítica honesta da tela, como um diretor de arte faria./impeccable polish— pente-fino de alinhamento, espaçamento, contraste e microtexto./impeccable audit— checagem técnica: acessibilidade, performance e responsivo.
Atalho: /impeccable pin audit transforma o comando em /audit. Digitar só /impeccable lista os 23.
03. Review Animations, do Emil Kowalski
Emil passou por Vercel e Linear, e escreveu as regras que ele mesmo usa para julgar movimento. A skill revisa cada animação com esse rigor. Aprovação é conquistada, não dada.
emilkowalski / skills
12 skills de design e animação. As que interessam aqui: review-animations, improve-animations e animate.
github.com/emilkowalski/skills35.2k
estrelas · Markdown
A de revisão é um comando manual, e só entra quando o pedido vem de você: /review-animations [arquivo]. Sem caminho, ela revisa o diff atual. O que muda na prática: ease-out na entrada em vez de ease-in, algo entre 150 e 300 ms no lugar de 600, e zero salto no hover. Uma animação melhor não é mais rápida. É intencional.
O fluxo: as três juntas, em toda tela
- 1Criar. Peça a tela com o prompt do Frontend Design. Ele decide direção, paleta e tipo antes de codar.
- 2Detectar. npx impeccable detect ./src pega a cara de IA. Corrija, depois /impeccable polish.
- 3Animar. Você digita /review-animations no arquivo. Aplique as correções.
- 4Publicar. Só depois que os três passarem.
Prompt para colar e adaptar: