Pular para o conteúdo
valents

5 skills grátis que dão bom gosto de design à sua IA

Impeccable, Taste Skill, Hallmark, Hue e a skill do shadcn/ui ajudam a IA a fugir do site genérico.

Por Breno Valente· 4 min de leitura
5 skills grátis que dão bom gosto de design à sua IA
Imagem: GitHub, shadcn/ui

Skills são pastas com instruções que o Claude Code carrega quando precisa. Estas cinco, todas de código aberto, ensinam a IA a criar sites e interfaces com menos cara de template.

Peça a uma IA um site sem nenhuma orientação de design e o resultado costuma ser parecido: fonte Inter em tudo, gradiente roxo, cartões dentro de cartões. Uma skill ajuda a corrigir isso. Neste guia você conhece cinco skills de design que existem de verdade, com repositório oficial, licença e comando de instalação confirmados.

Primeiro, o que é uma skill. Segundo a documentação oficial do Claude Code, é uma pasta com um arquivo SKILL.md. O Claude lê a descrição de cada skill e carrega as instruções completas só quando o assunto pede. Você também pode chamar a skill direto, digitando uma barra e o nome, como /hallmark. As skills pessoais ficam em ~/.claude/skills/nome-da-skill/SKILL.md e valem para todos os seus projetos. As de projeto ficam em .claude/skills/ dentro do repositório.

Impeccable, de Paul Bakaus (repositório pbakaus/impeccable), é um vocabulário de design para o agente. Você escreve comandos como /impeccable critique, audit, polish, bolder ou animate, apontando para uma parte da página. Ele também revisa o que já existe: o critique dá uma nota de usabilidade e o audit confere acessibilidade, desempenho e responsividade. Tem ainda um detector de vícios de design de IA que roda sem IA e sem chave de API. A licença é Apache-2.0. Instale na raiz do projeto com npx impeccable install e depois rode /impeccable init.

Taste Skill, de Leonxlnx, tem o nome exato design-taste-frontend. A versão atual dá à IA uma direção de arte, busca fotos reais em acervos abertos, com crédito na página, e confere o resultado em um navegador de verdade, em três larguras de tela. Licença MIT. O comando é npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend". Exige Node 22 ou mais novo e Chrome, Edge ou Chromium. O próprio README avisa que uma construção leva de 30 a 45 minutos e algumas centenas de milhares de tokens, então prepare o limite do seu plano.

Hallmark, de Nutlope (Together AI), é uma skill que tenta impedir o visual de página gerada por IA. Ela sorteia três temas de um catálogo, monta a página em HTML e CSS e confere o resultado com um verificador no navegador. Também refaz páginas existentes com /hallmark redesign e só avalia com /hallmark audit. Licença MIT. Instale com npx skills add nutlope/hallmark -g. As checagens no navegador pedem Chrome e o pacote puppeteer-core; sem eles, só rodam as checagens estáticas.

Hue, de Dominik Martn, funciona ao contrário das outras: é uma skill que gera outra skill. Você dá a ela o site de uma marca, uma captura de tela ou uma descrição, e ela monta uma linguagem de design completa, com cores, tipografia, espaçamento e componentes. Depois, tudo que a IA criar com essa skill segue a marca. Licença MIT. Para o Claude Code, rode git clone https://github.com/dominikmartn/hue ~/.claude/skills/hue e peça algo como: faça uma skill de design a partir deste site.

A quinta é a skill oficial do shadcn/ui, que fica no repositório shadcn-ui/ui (licença MIT). Ela ensina o Claude a achar, instalar e atualizar componentes do jeito certo para o seu projeto. Entra em ação sozinha quando encontra um arquivo components.json. A página oficial mostra o comando pnpm dlx skills add shadcn/ui. Ela cuida de componentes e padrões de código, não de estética de marca, e funciona melhor junto com as outras.

Nem tudo do post original se confirmou. O Hallmark aparece lá com 21 temas e 58 verificações, mas o README atual do repositório fala em cinquenta temas na versão 2, e não achei a contagem de 58 na fonte oficial; por isso esses números ficaram de fora. As opções de variação, animação e densidade do Taste Skill são da versão antiga, que hoje mora no repositório Leonxlnx/taste-skill-classics. O Hue se instala com git clone, não com um comando de pacote.

Cuidados antes de instalar. Skills são instruções e scripts que rodam na sua máquina, então leia o repositório antes, como faria com qualquer código de terceiros. No Impeccable, o modo live é para uso local: o README avisa para não injetá-lo em site publicado, e que aplicar edições pode chamar o CLI do Claude ou do Codex com as verificações de permissão desligadas. Skills de design também não substituem seu olho: revise o resultado, troque as fotos pelas suas e respeite fontes e imagens com direitos autorais ao copiar uma marca com o Hue.

Por onde começar: se você já tem um site, use o Impeccable e peça um critique de uma seção só. Se vai criar um do zero, teste o Hallmark ou o Taste Skill. Se tem uma marca definida, gere uma skill com o Hue. Se usa shadcn/ui, instale a skill dele. Todas são gratuitas e de código aberto; o custo real é o consumo de tokens do seu plano de IA.

Fontes

Gostou? Receba o resumo da semana

O que você quer receber

Leia também

Ver tudo →