O bom gosto para o Claude Code

O que é e porque importa

Pede ao Claude Code a página da tua app e recebes quase sempre a mesma: título centrado, uma etiqueta pequena por cima, três caixas com um ícone, um degradê suave. Não há nada de errado, mas também não há nada teu. É a média de todas as páginas que o modelo já viu.

A Taste Skill serve para tirar essa média. É uma Agent Skill, ou seja, uma pasta de instruções e pequenos programas que o Claude usa quando lhe pedes uma página. O código está aberto no GitHub com licença MIT, por isso é grátis. Dá ao Claude uma direção artística, fotos reais de arquivos abertos e um controlo num browser a sério antes de te dizer que terminou.

É para quem faz tudo sozinho e não tem um designer: founders, indie hackers, quem programa com IA. Funciona com qualquer tecnologia, de React a HTML simples. O preço é o tempo: uma página leva de 30 a 45 minutos e umas centenas de milhares de tokens.

1. O que precisas e como a instalar

Antes de a instalar, confirma duas coisas no teu computador:

• Node 22 ou mais recente. O Node é o programa que corre JavaScript fora do browser: para veres a tua versão escreve node -v no terminal.
• Chrome, Edge ou Chromium instalado. Serve para abrir a página e tirar-lhe capturas.

Não precisas de chaves API e não instala nada seu no computador. Usa a internet só para procurar fotos. Depois instalas como plugin do Claude Code:

1. Abre o Claude Code e escreve /plugin marketplace add Leonxlnx/taste-skill. Adiciona o catálogo que contém a skill.
2. Depois escreve /plugin install taste-skill@taste-skill. A skill entra no Claude Code com o prefixo taste-skill, assim não se confunde com as outras skills que tens.
3. Abre uma sessão nova, para teres a certeza de que o Claude a vê. Para a atualizar mais tarde, há o /plugin update.

Ou instala-a pelo terminal com o skills, um programa que instala skills nos assistentes de programação:

npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"

2. Como trabalha, em seis passos

Por trás há um estudo: 248 sites recolhidos de duas galerias de design, 156 do One Page Love e 92 dos Sites of the Day da Awwwards, dos quais carregaram 247. As notas não foram dadas por pessoas, mas por modelos de IA, que os avaliaram a partir de capturas e medições. O próprio estudo o diz.

Daí saem as regras e vinte direções, ou seja, vinte maneiras de compor uma página. Quando lhe pedes uma página, o Claude faz assim:

1. Lê o pedido e faz o inventário: de oito a doze coisas que só o teu produto tem e nenhum concorrente. O nome e o que quer dizer, os números, o limite com que vive.
2. Um programa, o draw.mjs, tira ao acaso três direções entre as que servem para o pedido, e o Claude escolhe uma. Tu não escolhes: um modelo deixado à vontade fica sempre com a solução mais óbvia.
3. Encontra a ideia: uma frase que liga uma coisa do teu inventário à direção escolhida. Se a frase também servir para o teu concorrente mais próximo, deita-a fora.
4. Constrói a página com fotos reais: primeiro as tuas. Se não tiveres, o assets.mjs procura imagens do teu mundo em arquivos abertos como Wikimedia Commons, Openverse, o Met e o Art Institute of Chicago (para vídeos, também o Internet Archive e a NASA), e põe os créditos na página.
5. Faz o controlo. O lint.mjs lê o código, o inspect.mjs abre a página num browser a sério a 1440, 768 e 390 píxeis de largura, até ao telemóvel, e marca FAIL onde uma regra falha: títulos com mais de duas linhas, degradês, ecrãs vazios. O Claude tem de corrigir cada FAIL.
6. Olha para as suas capturas, avalia-as, corrige os três piores problemas e volta a verificar. No máximo três voltas.

No fim faz-te um resumo: a direção, a ideia, o que ainda não o convence e a lista das fotos com autor, licença e fonte.

3. O primeiro prompt: a página da tua app

Quanto mais lhe dás, melhor trabalha. Este é o prompt que eu usaria para a página de uma app de fitness feita por um founder sozinho. Troca as partes entre [ ] pelas tuas:

Usa a skill design-taste-frontend para criar a landing page de [nome da app], uma app de iPhone que [o que faz, numa frase].
Para quem é: [quem a usa].
A única coisa que a página tem de levar a fazer: [descarregar a app na App Store].
O que só ela tem: [três ou quatro coisas verdadeiras: um número, um limite, um hábito].
Stack: [HTML simples / Next.js].
Fotos minhas: [pasta com as fotos reais, ou: nenhuma].
Não inventes avaliações, clientes nem números. No fim diz-me a direção que saiu, a ideia e que textos de exemplo tenho de substituir.

A última linha conta. A skill não inventa avaliações, clientes nem estatísticas, mas preenche os buracos com textos de exemplo e lista-os no resumo. Esses verificas tu, um a um.

4. Dá-lhe o material que só tu tens

No estudo, as páginas com notas mais altas partiam de uma ideia tirada do próprio produto, não do estilo. Por isso o teu trabalho é dar-lhe essa matéria-prima:

• O nome e o que quer dizer. Pode tornar-se o centro da página.
• As tuas fotos reais: tu, o produto, o sítio. Diz-lhe que são tuas e põe-nas primeiro. Uma foto real do produto acaba em grande no primeiro ecrã.
• As capturas reais da tua app. Para um software, são a imagem mais forte que existe.
• O limite: o que não fazes, ou só fazes de uma certa maneira.

Aqui está o meu material para a página.
Nome: [nome], e quer dizer [significado].
Fotos minhas em [pasta]: são reais, usa-as antes de qualquer outra.
Capturas da app em [pasta].
Números reais: [números].
O limite que nos torna diferentes: [limite].
Parte destas coisas para o inventário e para a ideia, não da categoria.

5. Refazer uma página que já tens

Se já tens a página, não começas do zero: refazer páginas existentes faz parte da skill. Antes de mexer em alguma coisa, abre a tua página num browser a sério, mede-a e guarda as capturas do antes. Mantém a tua tecnologia, os conteúdos e o que funciona, e muda tipos de letra, cores, margens e títulos e, por último, os blocos feitos em série. No fim mostra-te o antes e o depois.

Usa a skill design-taste-frontend para refazer a página em [caminho ou endereço local]. Primeiro regista como está agora, com medições e capturas. Mantém o stack, os conteúdos e os links e formulários que funcionam. No fim mostra-me o antes e o depois nas três larguras e diz-me o que mudaste.

6. Dashboards e ecrãs da app

Também funciona para os ecrãs onde se trabalha: dashboards, painéis de administração, definições. Aqui segue um caminho próprio, de um estudo à parte sobre 23 ecrãs de produtos reais: o draw.mjs --app tira um estilo para o teu tipo de produto, e o inspect.mjs --app verifica com regras próprias, como cor só nos dados e números alinhados.

Usa a skill design-taste-frontend para o dashboard de [app]: é um ecrã onde se trabalha, não uma página para ler. Quem o usa: [quem]. A pergunta a que tem de responder primeiro: [pergunta]. Dados realistas que batam certo: [dados ou ficheiro]. Usa as mesmas cores e tipos de letra da minha landing page.

Os erros mais comuns

• Pô-la a correr sem ver quanto uso te resta. Uma página são de 30 a 45 minutos e umas centenas de milhares de tokens: num plano com limites, é uma boa fatia. Fá-la quando tiveres margem.
• Dar-lhe um pedido de uma linha. Sem o teu material, a ideia vem da categoria e a página volta a parecer-se com todas as outras.
• Usá-la sem Node 22 ou sem Chrome. O inspetor não arranca: o Claude só verifica o código, olha para capturas feitas de outra forma e diz-te que o inspetor não correu.

Checklist

• Tenho Node 22 ou mais recente e Chrome, Edge ou Chromium
• A Taste Skill está instalada e o Claude reconhece-a
• O prompt tem o nome, o que faz, para quem é e a única coisa a levar a fazer
• O inspetor termina com zero FAIL a 1440, 768 e 390
• Substituí os textos de exemplo listados no resumo
• Os créditos das fotos estão no fundo da página

Perguntas frequentes