10 Skills Anti Cara de IA pro Claude
As 10 skills de design que tiram a cara de IA do site no Claude Code, com link, comando de instalação e como testar sem instalar todas.
O que é
10 Skills Anti Cara de IA pro Claude
Site feito com IA costuma sair com a mesma cara: gradiente roxo, emoji no título, três cards iguais e um botão genérico. Esta página reúne 10 skills open source de design e front-end criadas para atacar esse problema, cada uma com o link do repositório, o comando de instalação tirado do README e um campo dizendo se foi testado.
Serve para quem usa o Claude Code para criar sites e quer instalar com critério. Você leva uma tabela comparativa, um passo a passo por skill, seis prompts para testar antes e depois, e a explicação de por que não vale instalar as dez de uma vez.
Ressalva principal: cada skill é de um autor diferente e nenhuma foi testada aqui. Dois casos fogem do padrão: o Frontend Design da Anthropic tem plugin próprio em outro repositório, e o UI Skills usa o próprio CLI e um servidor MCP, não o npx skills add.
10 skills de design em uma tabela
Nome, para que serve, link, instalação e status de teste de cada uma, lado a lado.
Comandos conferidos no README
Cada comando vem do repositório oficial, lido em 20/10/2026, com os 2 casos fora do padrão explicados.
Teste de antes e depois
Prompts para gerar a mesma página com e sem a skill e comparar tipografia, cores e espaçamento.
Skill, plugin, MCP e CLI sem confusão
O que cada termo significa na hora de instalar e por que os comandos são diferentes.
Seis prompts prontos
Página de teste, comparação, revisão de arquivo, caça a sinais de cara de IA, conflito entre skills e inventário.
Nível: intermediário (usa terminal) · Tempo estimado: ~15 min para instalar e testar uma skill; as dez de uma vez não valem o esforço. O tempo de uma geração de página varia com a skill e com o modelo.
Não testado neste tutorial: nenhuma das 10 skills foi instalada e rodada por nós. Os comandos vêm do README de cada repositório, lido em 20/10/2026. A coluna Testado? da tabela diz isso linha a linha. Teste uma por vez, em um projeto de teste, e compare o resultado antes de adotar.
Código de terceiros no seu computador: cada skill pertence a um autor diferente, e algumas rodam scripts e instalam arquivos fora da pasta do projeto. Exemplos dos próprios READMEs: a Taste Skill executa scripts em Node 22 ou mais novo e precisa de Chrome, Edge ou Chromium; o Impeccable instala um binário em ~/.impeccable/bin na primeira execução e, no Claude Code, instala também ganchos (hooks) do projeto; a Interface Design, com o comando --agent claude-code -g do README, instala em ~/.claude/skills/interface-design. Leia o README antes de rodar qualquer comando.
Dois comandos fogem do padrão. (1) Frontend Design: o link que circula (anthropics/skills) não tem um plugin chamado frontend-design. O plugin existe no marketplace oficial claude-plugins-official, outro repositório da Anthropic, e o comando correto está na tabela. (2) UI Skills: não usa npx skills add. Ele tem um CLI próprio (npx ui-skills) e um servidor MCP. O README não traz um comando de instalação para o Claude Code.
Taste Skill: o README diz que uma geração leva cerca de 30 a 45 minutos e algumas centenas de milhares de tokens, o que pesa no limite do seu plano. O README também mostra patrocinadores e um link de afiliado de um serviço de API (Kimi). Nada disso é necessário para usar a skill.
Pré-requisitos
- Claude Code instalado e funcionando: siga a documentação oficial em https://code.claude.com/docs
- Node.js, porque os comandos npx precisam dele. A Taste Skill pede Node 22 ou mais novo
- Chrome, Edge ou Chromium instalado, só para a Taste Skill
- Um projeto de teste (uma pasta nova com uma landing page fictícia). Não use o site de um cliente para experimentar
- Custo: as skills são open source (MIT ou Apache-2.0 nos repositórios conferidos). O gasto real é de tokens do seu plano do Claude
Conceitos-chave
- 01
Skill
É uma pasta com um arquivo SKILL.md e, às vezes, scripts e referências. O Claude Code carrega esse conhecimento quando o assunto combina. As dez desta página são skills de design.
- 02
Plugin e marketplace
Plugin é um pacote instalável do Claude Code, que pode trazer skills, agentes e ganchos. O marketplace é o catálogo. Por isso alguns comandos têm duas etapas: adicionar o catálogo e instalar o plugin.
- 03
CLI npx skills
É um instalador de linha de comando que copia a skill de um repositório do GitHub para a pasta certa do seu agente. A maioria dos comandos da tabela usa ele. Não é um plugin do Claude Code.
- 04
MCP
É um servidor que o Claude consulta por ferramentas, em vez de uma pasta copiada. O UI Skills oferece um servidor MCP além do CLI.
Passo a passo
- 01
Crie um projeto de teste
Uma pasta vazia basta. Ela vai guardar a página de teste e deixa claro o que a skill mudou.
mkdir teste-skill && cd teste-skill - 02
Gere uma página SEM nenhuma skill, como base
Use o primeiro prompt da seção de prompts, sem citar skill. Guarde essa pasta para comparar depois. Sem base, você não sabe se a skill ajudou ou se foi o acaso.
- 03
Escolha UMA skill e instale pelo comando da tabela
A primeira da lista (Taste Skill) e a segunda (Impeccable) são as que o vídeo sugere testar primeiro. Isso é opinião do autor do vídeo original, não um resultado que medimos. Instale só uma, reinicie o Claude Code e confira com o prompt de inventário.
- 04
Gere a mesma página COM a skill e compare
Use o prompt de comparação. Olhe tipografia, cores, espaçamento e componentes. Se a diferença não compensar o gasto de tokens, desinstale ou troque de skill.
- 05
Só depois acrescente a segunda skill
Skills de design podem dar orientações diferentes. Rode o prompt de conflito antes de empilhar uma segunda skill. Esta é uma recomendação nossa, não uma regra dos autores.
As 10 skills: link e instalação
A tabela traz o que a legenda do vídeo prometeu: o link e o comando de cada skill. Comandos lidos nos READMEs oficiais em 20/10/2026. Os dois casos fora do padrão (Frontend Design e UI Skills) aparecem destacados abaixo da tabela.
| Nome | Para que serve | Link | Instalação | Testado? |
|---|---|---|---|---|
| 1. Taste Skill | Orienta o Claude a criar front-end com mais critério visual, para a interface parar de parecer genérica | https://github.com/Leonxlnx/taste-skill | npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" | Não testado. Comando do README (20/10/2026) |
| 2. Impeccable | Linguagem de design que ajuda o agente de código a fazer design melhor, com comandos próprios | https://github.com/pbakaus/impeccable | npx impeccable install (depois, dentro do Claude Code: /impeccable init) | Não testado. Comando do README (20/10/2026) |
| 3. Frontend Design (Anthropic) | Skill oficial para gerar interfaces com direção estética definida, evitando o visual genérico | https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design (a skill também está em https://github.com/anthropics/skills) | /plugin install frontend-design@claude-plugins-official | Não testado. Plugin conferido no marketplace oficial (20/10/2026) |
| 4. Hallmark | Skill contra o visual genérico de IA para design de interface | https://github.com/Nutlope/hallmark | npx skills add nutlope/hallmark | Não testado. Comando do README (20/10/2026) |
| 5. Emil Kowalski | Skills para designers e engenheiros, com foco em interface (o vídeo destaca animação) | https://github.com/emilkowalski/skills | npx skills@latest add emilkowalski/skills | Não testado. Comando do README (20/10/2026) |
| 6. UI/UX Pro Max | Inteligência de design com estilos, paletas e fontes por tipo de projeto | https://github.com/nextlevelbuilder/ui-ux-pro-max-skill | /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill e depois /plugin install ui-ux-pro-max@ui-ux-pro-max-skill | Não testado. Comando do README (20/10/2026) |
| 7. Feel Better | Ajustes de microdetalhes para a interface parecer mais refinada | https://github.com/jakubkrehel/make-interfaces-feel-better | npx skills add jakubkrehel/make-interfaces-feel-better | Não testado. Comando do README (20/10/2026) |
| 8. Interface Design | Consistência de interface com memória das decisões de design do projeto | https://github.com/Dammyjay93/interface-design | npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g | Não testado. Comando do README (20/10/2026) |
| 9. UI Skills | Registro de skills para design engineers, que você consulta por CLI ou por MCP | https://github.com/ibelick/ui-skills | Não usa npx skills add. CLI: npx ui-skills start. MCP: https://www.ui-skills.com/mcp | Não testado. O README não traz instalação para o Claude Code |
| 10. GSAP Skills | Skills oficiais da GreenSock para o agente usar a biblioteca de animação GSAP do jeito certo | https://github.com/greensock/gsap-skills | npx skills add https://github.com/greensock/gsap-skills | Não testado. Comando do README (20/10/2026) |
Nenhum dos 10 repositórios estava arquivado em 20/10/2026, e o último commit mais antigo era de 20/06/2026 (Interface Design). Isso mostra que existem e não foram abandonados formalmente, mas não prova que cada um é bem mantido nem que funciona bem no seu projeto.
Passo a passo de cada skill
- 01
Taste Skill (Leonxlnx, licença MIT)
Exige Node 22 ou mais novo e Chrome, Edge ou Chromium. O README também descreve um plugin do Claude Code (/plugin marketplace add Leonxlnx/taste-skill e /plugin install taste-skill@taste-skill). Escolha um dos dois caminhos, não os dois.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" - 02
Impeccable (pbakaus, licença Apache-2.0)
Rode na raiz do projeto. O instalador mostra os agentes detectados (por exemplo ~/.claude) e pergunta se instala no projeto ou globalmente. Depois, dentro do Claude Code, inicialize.
npx impeccable install - 03
Inicializar o Impeccable no Claude Code
Digite no Claude Code depois de recarregar. Este é o segundo comando do Quick start do README.
/impeccable init - 04
Frontend Design (Anthropic)
O plugin vem do marketplace oficial claude-plugins-official, cujo README manda instalar plugins assim. Se o Claude Code não reconhecer esse marketplace, adicione-o antes com /plugin marketplace add anthropics/claude-plugins-official (não testado). A skill também existe como pasta dentro de anthropics/skills (licença Apache-2.0 na própria skill). O repositório inteiro anthropics/skills tem muito mais estrelas do que esta skill sozinha.
/plugin install frontend-design@claude-plugins-official - 05
Hallmark (Nutlope, licença MIT)
Reexecute o mesmo comando quando quiser atualizar, segundo o README.
npx skills add nutlope/hallmark - 06
Emil Kowalski (licença MIT)
O repositório mudou para emilkowalski/skills, e o comando abaixo é o do README atual. Se você ver tutoriais antigos com outro nome de repositório, use este.
npx skills@latest add emilkowalski/skills - 07
UI/UX Pro Max (licença MIT)
O README oferece plugin (dois comandos, abaixo) e um CLI próprio (npm install -g ui-ux-pro-max-cli, depois uipro init --ai claude dentro do projeto). Aqui está o primeiro comando do plugin.
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill - 08
Instalar o plugin do UI/UX Pro Max
Segundo comando, logo depois do primeiro.
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill - 09
Feel Better (jakubkrehel, licença MIT)
Skill para microdetalhes de interface.
npx skills add jakubkrehel/make-interfaces-feel-better - 10
Interface Design (licença MIT)
Este é o comando do README para o Claude Code: ele instala a skill globalmente em ~/.claude/skills/interface-design, e você pode chamá-la com /interface-design. Sem as opções --agent claude-code -g, o README só diz que o CLI detecta o agente e instala no lugar certo. Há também um fluxo de plugin do Claude Code, se preferir.
npx skills add https://github.com/dammyjay93/interface-design --skill interface-design --agent claude-code -g - 11
UI Skills (licença MIT): consultar pelo CLI
Este NÃO é um npx skills add. O README mostra um CLI para navegar e baixar skills do registro (por exemplo npx ui-skills get baseline-ui). Comece pelo comando start.
npx ui-skills start - 12
UI Skills: ligar o servidor MCP no Claude Code
O README lista o endereço MCP e as ferramentas list_skills e get_skill, mas não traz o comando para o Claude Code. O comando abaixo usa a sintaxe geral do Claude Code para MCP remoto e não foi testado. Veja a doc oficial de MCP antes.
claude mcp add --transport http ui-skills https://www.ui-skills.com/mcp - 13
GSAP Skills (GreenSock, licença MIT)
O README marca o npx skills como o caminho recomendado e detecta o agente instalado. Para o Claude Code, ele também cita /plugin marketplace add greensock/gsap-skills.
npx skills add https://github.com/greensock/gsap-skills
Prompts prontos
Cole os prompts no Claude Code, dentro da pasta teste-skill. Onde aparecer [NOME-DA-SKILL], escreva o nome da skill que você instalou. [NEGÓCIO] é um negócio fictício, por exemplo uma clínica ou uma loja. [CAMINHO] é o arquivo que você quer revisar. [LISTA] é a lista de skills instaladas. Nenhum prompt pede para editar ou apagar nada sem o seu ok.
Prompt: criar a página de teste (base)
Crie uma landing page de teste para [NEGÓCIO] em HTML e CSS, em uma pasta chamada base. Antes de escrever o código, me diga em cinco linhas a direção visual que você vai seguir.
Prompt: comparar com e sem a skill
Agora crie a mesma landing page para [NEGÓCIO] em uma pasta chamada com-skill, usando a skill [NOME-DA-SKILL]. Depois compare as pastas base e com-skill e liste as diferenças de tipografia, cores, espaçamento e componentes. Diga com honestidade se a diferença compensa.
Prompt: caçar os sinais de cara de IA
Procure no meu projeto os sinais de visual genérico de IA, como gradiente roxo, emoji em título, três cards idênticos em sequência e botão com texto genérico. Para cada sinal, me diga o arquivo, a linha e uma alternativa. Não edite nada ainda.
Prompt: revisar um arquivo com a skill
Revise o arquivo [CAMINHO] seguindo as regras da skill [NOME-DA-SKILL]. Liste os problemas por arquivo e linha, do mais grave ao menos grave, e proponha a correção de cada um. Só altere o arquivo depois do meu ok.
Prompt: checar conflito entre skills
Tenho estas skills de design instaladas: [LISTA]. Diga quais orientações de uma contradizem as de outra e qual seguir neste projeto. Não desinstale nada.
Prompt: inventário das skills instaladas
Liste as skills de design instaladas neste projeto e no meu usuário, com o nome de cada uma e em que situação você a usaria.
Erros comuns
- O comando npx skills add falha ou dá comando não encontrado → o Node não está instalado ou está fora do PATH → instale o Node pelo site oficial e abra um terminal novo
- A Taste Skill não roda os scripts → falta Node 22 ou mais, ou um navegador Chrome, Edge ou Chromium → rode node --version e instale o que faltar
- O /plugin install frontend-design diz que não encontrou o plugin → você tentou instalar a partir de anthropics/skills, que não tem esse plugin → use o comando da tabela, com @claude-plugins-official
- Tentei npx skills add no UI Skills e nada instalou → ele usa CLI e MCP próprios → use npx ui-skills start ou ligue o servidor MCP
- Instalei muitas skills e o resultado ficou inconsistente → regras de design que se contradizem → desinstale e volte a uma skill só, ou rode o prompt de conflito
- A skill não parece ter efeito → o Claude Code precisa recarregar as skills ou a skill não combinou com o seu pedido → reinicie o Claude Code e cite o nome da skill no pedido
- Segui um tutorial antigo e o repositório não existe → o autor mudou o repositório de lugar (caso do Emil Kowalski) → use o link e o comando desta página, conferidos em 20/10/2026
Checklist final
- Você criou um projeto de teste fictício, não usou o site de um cliente
- Você gerou uma página base sem skill para comparar
- Você instalou uma skill por vez, conferindo o comando no README
- Você leu o README antes de rodar scripts ou instaladores de terceiros
- Você comparou a página com e sem a skill e decidiu se vale ficar com ela
- Você rodou o prompt de conflito antes de instalar a segunda skill
Perguntas frequentes
Preciso instalar as 10 skills?
Não. A ideia é testar uma ou duas e manter só o que melhora o seu resultado. Instalar tudo aumenta o risco de regras que se contradizem.
Qual delas é a oficial da Anthropic?
O Frontend Design. O plugin está em https://github.com/anthropics/claude-plugins-official/tree/main/plugins/frontend-design e a skill também aparece em https://github.com/anthropics/skills. O número de estrelas desse repositório é do conjunto de skills, não de uma skill sozinha.
Funciona só no Claude Code?
A maioria usa o instalador npx skills, e o README do GSAP Skills diz que ele funciona com mais de 40 agentes. Esta página só cobre o Claude Code e não testou os outros.
Isso garante que o site não terá cara de IA?
Não. As skills guiam o modelo, mas o resultado depende do seu pedido, da sua marca e da sua revisão. Compare sempre com uma página base.
Fontes oficiais
- Taste Skillgithub.com/Leonxlnx/taste-skill (abre em nova aba)
- Impeccablegithub.com/pbakaus/impeccable (abre em nova aba)
- Frontend Design (plugin oficial)github.com/anthropics/claude-plugins-official (abre em nova aba)
- Anthropic Skillsgithub.com/anthropics/skills (abre em nova aba)
- Hallmarkgithub.com/Nutlope/hallmark (abre em nova aba)
- Emil Kowalski Skillsgithub.com/emilkowalski/skills (abre em nova aba)
- UI/UX Pro Maxgithub.com/nextlevelbuilder/ui-ux-pro-max-skill (abre em nova aba)
- Feel Bettergithub.com/jakubkrehel/make-interfaces-feel-better (abre em nova aba)
- Interface Designgithub.com/Dammyjay93/interface-design (abre em nova aba)
- UI Skillsgithub.com/ibelick/ui-skills (abre em nova aba)
- GSAP Skillsgithub.com/greensock/gsap-skills (abre em nova aba)
- Instalador npx skillsgithub.com/vercel-labs/skills (abre em nova aba)
Próximos passos
- Configurar o Claude para sites mais bonitos, com Figma e Playwright/open-source/skills/seus-sites-com-claude-parecem-genericos
- Ver a lista das 15 skills essenciais do Claude/open-source/skills/15-skills-essenciais-pra-ter-no-claude
- Montar um fluxo de design com 5 ferramentas/open-source/skills/5-plugins-de-design-claude-code
Comece agora
Pronto para colocar 10 Skills Anti Cara de IA pro Claude para rodar?
Ver a Taste Skill no GitHubPróximo passo
Veja os outros recursos do catálogo
Dezenas de recursos entre squads, skills, apps e integrações — todos usados em produção pelo João.
Voltar ao catálogo