IA by DNACX

#13 no GitHub · Design e visual

Como usar o Taste no Claude Code: passo a passo

Uma skill que faz o assistente de código desenhar sites e telas de aplicativo com direção de arte, fotos reais e conferência no navegador, em vez de montar a página genérica de sempre.

Para quem
Quem quer que o Claude Code monte uma página ou tela com aparência cuidada a partir de um briefing.
Estrelas (02/11/2026)
108.687, #13 no ranking
Licença
MIT
Repositório
Leonxlnx/taste-skill

Passo a passo

Antes de começar: Claude Code instalado; Node 22 ou mais novo; Chrome, Edge ou Chromium instalado; Internet, usada para achar as fotos.

  1. Confira os requisitos

    A skill roda scripts com Node 22 ou mais novo e usa um Chrome, Edge ou Chromium instalado para olhar a página que ela construiu. Não precisa de chave de API.

  2. Adicione o catálogo do plugin

    Digite o comando dentro da sessão do Claude Code, não no terminal comum. Ele registra o repositório como fonte de plugins.

    Comando
    /plugin marketplace add Leonxlnx/taste-skill

  3. Instale o plugin

    O nome da skill ganha o prefixo taste-skill:, para não se misturar com as outras que você já usa. Para atualizar depois, o README indica /plugin update.

    Comando
    /plugin install taste-skill@taste-skill

  4. Descreva o cliente e a página

    Peça uma página ou tela contando quem é o negócio e o que ela precisa mostrar. O README chama isso de briefing e diz que cada exemplo dele nasceu de um briefing só. A skill lista o que só esse cliente tem, sorteia três direções de design, escolhe uma e constrói.

  5. Espere a construção terminar

    Uma construção leva de 30 a 45 minutos, segundo o README. No fim a skill confere a página no navegador em três larguras de tela e corrige os três maiores problemas, em até três rodadas.

Primeiro teste

O README não traz um prompt de exemplo. Ele descreve seis etapas: ler o briefing, sortear três de 20 direções, achar a ideia, construir com fotos reais e creditadas, conferir no navegador e corrigir os três maiores problemas.

Cuidados

  • Custo e tempo: uma construção leva cerca de 30 a 45 minutos e algumas centenas de milhares de tokens, segundo o autor. Isso pesa no limite do seu plano.
  • A skill usa a internet para buscar fotos em coleções abertas (Wikimedia Commons, Openverse, Met). Só entram arquivos de domínio público, CC0, CC BY e CC BY-SA, e a skill coloca os créditos na página. Mantenha os créditos ou troque por fotos suas.
  • Ela roda scripts de Node e abre um navegador de verdade no seu computador para conferir a página.
  • O README avisa que o projeto não tem token ou criptomoeda oficial. Qualquer token com o nome dele não tem ligação com o autor.

Como desfazer

O README não traz um passo de desinstalação.

O que o README não confirma

Esta página foi montada lendo o README. Estes pontos não estão escritos lá:

  • O README não traz um prompt de exemplo nem diz como chamar a skill depois de instalada no Claude Code.
  • O README não diz se é preciso reiniciar o Claude Code depois de instalar o plugin. A instrução de iniciar uma nova sessão aparece só para o Codex.
  • O tempo de 30 a 45 minutos, o gasto de tokens e o estudo de 247 sites são afirmações do autor, não medidas de forma independente.
  • Existe outro caminho de instalação no README, npx skills add com o repositório e a skill design-taste-frontend. Não foi o escolhido aqui, porque o plugin é o caminho que o README marca como de Claude Code.
  • O README não fala de restrição de sistema operacional.

Dúvidas

Preciso de chave de API ou de conta?

Não. O README diz que a skill não instala nada e não usa chaves de API. Ela só precisa de internet para achar fotos.

Funciona com a tecnologia do meu site?

O README responde que sim para React, Vue, Svelte e HTML puro, porque as regras são sobre design e não sobre o framework.

Serve para painéis e telas de aplicativo?

Sim, desde a versão 2.1, segundo o README. A skill distingue página de tela de aplicativo e constrói painéis, telas de administração e de configurações com regras próprias.

A DNACX já usou o Taste?

Esta página foi montada a partir do README oficial. A DNACX não rodou cada passo, então confira a saída de cada comando e, se algo falhar, volte ao README do repositório.

Próxima da lista

← #12 Claude-Mem · #14 Agent Reach →

Ver as 15 skills

Por Diogo Kammers, da DNACX. Passo a passo montado a partir do README oficial de Leonxlnx/taste-skill, lido em . A DNACX não rodou cada passo desta página. A skill é de terceiros e a DNACX não a criou.