5 Plugins de Design pro Claude Code
As 5 ferramentas de design para o Claude Code parar de entregar tela com cara de IA: Taste Skill, Web Design Guidelines, Awesome Design e mais.
O que é
5 Plugins de Design pro Claude Code
Cinco ferramentas open source para o Claude Code entregar telas com mais critério visual: a Taste Skill, a Web Design Guidelines da Vercel, os arquivos DESIGN.md do Awesome Design, o Image to Code e o Playwright CLI. O reel chama tudo de plugin. Na prática são três skills, uma coleção de arquivos de design e um CLI, e a página explica o que cada coisa é e como instalar.
Serve para quem cria sites e interfaces com o Claude Code e quer um fluxo de design: criar com gosto, revisar o código com regras de interface, usar um design system pronto como referência e olhar o resultado no navegador. Você leva os comandos conferidos nos READMEs, seis prompts prontos e os avisos de cada ferramenta.
Ressalva principal: nenhuma das cinco foi testada aqui, e o Image to Code é descrito pelo autor para o Codex, não para o Claude Code. Esta página não repete o tutorial de configuração com Figma e Playwright MCP, e não faz a lista longa de 10 skills: cada uma tem a sua página.
Taste Skill para criar com gosto
Skill que orienta o Claude a gerar front-end com referência de design premium, com o comando de instalação do README.
Revisão de código com a Vercel
Web Design Guidelines revisa os seus arquivos contra regras de interface e devolve os achados por arquivo e linha.
DESIGN.md como referência
Arquivos de design system extraídos de sites reais, com paleta, tipografia, componentes e espaçamento, para copiar para o projeto.
Playwright CLI para olhar o resultado
O Claude abre o navegador, tira screenshot e lista as mensagens do console, com menos peso de contexto que o MCP.
Seis prompts prontos
Criar, revisar, aplicar um DESIGN.md, gerar referência por imagem, inspecionar no navegador e fechar o ciclo.
Nível: intermediário (usa terminal) · Tempo estimado: ~30 min para instalar e testar as ferramentas. A Taste Skill, sozinha, pode levar bem mais, porque uma geração dela é longa (veja o aviso abaixo).
Não verificado no Claude Code: o Image to Code. O README do repositório diz que ele precisa de um agente que gere imagens e escreva código, e cita ChatGPT Images e o modo de imagem do Codex. O repositório oferece um plugin para o Claude Code, mas não verificamos se o Claude Code consegue gerar as imagens de referência. Teste antes de depender dele.
Não testado neste tutorial: as cinco ferramentas. Os comandos vêm dos READMEs lidos em 20/10/2026. Teste em uma pasta de projeto fictícia, não no site de um cliente, e guarde a saída real antes de seguir para um projeto de verdade.
Custo e patrocínio: o README da Taste Skill diz que uma geração leva cerca de 30 a 45 minutos e algumas centenas de milhares de tokens, o que pesa no seu plano. O mesmo README mostra patrocinadores e um link de afiliado de um serviço de API (Kimi). Nada disso é necessário para usar a skill.
Marca de terceiros: os DESIGN.md do Awesome Design vêm de marcas reais, como Claude, Vercel e Figma. Use como referência de estrutura e de linguagem visual, não copie o logo, o nome nem a identidade de outra empresa para o site de um cliente. Isto não é aconselhamento jurídico.
Pré-requisitos
- Claude Code instalado e funcionando: siga a documentação oficial em https://code.claude.com/docs
- Node.js 22 ou mais novo para a Taste Skill e Node 18 ou mais novo para o Playwright CLI
- Chrome, Edge ou Chromium instalado, exigido pela Taste Skill
- Git, para clonar o repositório do Awesome Design
- Uma pasta de projeto de teste com uma página fictícia
- Para o Image to Code: um agente que gere imagens e escreva código (o README cita ChatGPT Images e o Codex)
- Custo: as ferramentas são gratuitas (MIT ou Apache-2.0 nos repositórios conferidos; o repositório vercel-labs/agent-skills não tem arquivo LICENSE em out/2026, e o README da skill diz MIT). O gasto real é de tokens do seu plano
Conceitos-chave
- 01
Skill
Pasta com um SKILL.md que o Claude Code carrega quando o assunto combina. A Taste Skill, a Web Design Guidelines e o Image to Code são skills.
- 02
DESIGN.md
É um arquivo de texto com a linguagem visual de um site (paleta, tipografia, componentes, espaçamento) que o agente lê para manter a interface coerente. O Awesome Design é uma coleção desses arquivos, e não uma skill nem um plugin.
- 03
CLI
Programa de linha de comando. O Playwright CLI controla o navegador por comandos curtos e ainda instala skills para o Claude Code usar. O README dele diz que, para agentes de código, o CLI é mais econômico em contexto do que o MCP.
- 04
Playwright CLI x Playwright MCP
O MCP é um servidor que o Claude consulta, com estado persistente e mais detalhe da página, e pesa mais no contexto. O CLI faz comandos pontuais. A página sobre sites com cara genérica usa o MCP. Aqui o foco é o CLI.
Passo a passo
- 01
Crie uma pasta de teste
Uma pasta vazia, onde você vai gerar uma página fictícia e instalar as skills só ali, sem tocar em projeto real.
mkdir teste-design && cd teste-design - 02
Instale a Taste Skill
Dois caminhos no README. Escolha um. O npx skills copia a skill de design-taste-frontend. Exige Node 22 ou mais e um navegador Chrome, Edge ou Chromium.
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend" - 03
Ou instale a Taste Skill como plugin do Claude Code
Dentro do Claude Code. São dois comandos em sequência: primeiro o marketplace, depois o plugin. O segundo comando está logo abaixo.
/plugin marketplace add Leonxlnx/taste-skill - 04
Plugin da Taste Skill: instalar
Segundo comando, logo depois do marketplace. Pule este passo e o anterior se você já instalou com o npx.
/plugin install taste-skill@taste-skill - 05
Instale a Web Design Guidelines (Vercel)
Este é o comando de instalação que a Vercel publica na página oficial de guidelines. A skill lê os arquivos que você indicar e busca as regras mais recentes no repositório web-interface-guidelines. O repositório vercel-labs/agent-skills não tem arquivo LICENSE (out/2026); o README da skill diz MIT.
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines - 06
Pegue um DESIGN.md do Awesome Design
Não há instalador: é copiar o arquivo. Clone o repositório (comando abaixo) e depois copie o DESIGN.md da marca que serve de referência (por exemplo design-md/claude/DESIGN.md) para a raiz do projeto. O caminho existe no repositório. A cópia em si não foi testada.
git clone https://github.com/VoltAgent/awesome-design-md - 07
Copie o DESIGN.md para a raiz do projeto
Troque a pasta de destino se o seu projeto não estiver na pasta atual. O Claude passa a ler esse arquivo quando você pedir uma página no estilo dele.
cp awesome-design-md/design-md/claude/DESIGN.md ./DESIGN.md - 08
Instale o Image to Code (não verificado no Claude Code)
O Image to Code saiu do repositório da Taste Skill em outubro de 2026 e agora vive em Leonxlnx/imagegen-skills. Quem seguiu o link antigo da Taste Skill não o encontra lá. O README também mostra um plugin do Claude Code (/plugin marketplace add Leonxlnx/imagegen-skills e /plugin install imagegen-skills@imagegen-skills), que instala as quatro skills do repositório.
npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "image-to-code" - 09
Instale o Playwright CLI
Instalação global pelo npm, segundo o README. O segundo comando, logo abaixo, instala as skills que o Claude Code vai usar. Exige Node 18 ou mais novo.
npm install -g @playwright/cli@latest - 10
Instale as skills do Playwright CLI
O README diz que o Claude Code usa as skills instaladas localmente.
playwright-cli install --skills - 11
Abra uma página no navegador e tire um screenshot
Com um servidor local rodando no endereço de exemplo (troque pela sua porta), o primeiro comando abre o navegador visível. Você pode rodar os comandos à mão ou pedir ao Claude. O segundo comando fica no próximo passo.
playwright-cli open http://localhost:3000 --headed - 12
Tire o screenshot e leia o console
O screenshot salva a imagem da página aberta. Para as mensagens do console, o README lista o comando playwright-cli console. O Claude só consegue apontar um erro se interpretar essa saída, então peça isso no prompt.
playwright-cli screenshot
As 5 ferramentas: link e instalação
| Nome | Para que serve | Link | Instalação | Testado? |
|---|---|---|---|---|
| 1. Taste Skill (cerca de 99,8 mil estrelas, out/2026) | Skill que orienta o Claude a criar front-end com referência de design premium | 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. Web Design Guidelines (Vercel) | Skill que revisa o código de interface contra regras de acessibilidade, formulários, foco e desempenho | https://github.com/vercel-labs/agent-skills | npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines | Não testado. Comando da página da Vercel (20/10/2026). Sem arquivo LICENSE no repositório (out/2026) |
| 3. Awesome Design (cerca de 122,5 mil estrelas, out/2026) | Coleção de arquivos DESIGN.md extraídos de sites reais, com paleta, tipografia, componentes e espaçamento | https://github.com/VoltAgent/awesome-design-md | Sem instalador: copie design-md/[MARCA]/DESIGN.md para a raiz do projeto | Não testado. Caminho conferido no repositório |
| 4. Image to Code | Skill que gera imagens de design, estuda e depois constrói o site para ficar próximo delas | https://github.com/Leonxlnx/imagegen-skills | npx skills add https://github.com/Leonxlnx/imagegen-skills --skill "image-to-code" | Não verificado no Claude Code. README cita Codex |
| 5. Playwright CLI (cerca de 14,4 mil estrelas, out/2026) | CLI que controla o navegador e instala skills para o agente abrir, inspecionar e tirar screenshots | https://github.com/microsoft/playwright-cli | npm install -g @playwright/cli@latest e depois playwright-cli install --skills | Não testado. Comando do README (20/10/2026) |
Prompts prontos
Cole os prompts no Claude Code, dentro da pasta de teste. [NEGÓCIO] é um negócio fictício, por exemplo uma clínica ou uma loja. [TECNOLOGIA] é a tecnologia do site, como HTML e CSS ou Astro. [CAMINHO] é o arquivo a revisar. Os prompts que alteram arquivos pedem o seu ok antes.
Prompt: criar a página com a Taste Skill
Use a skill design-taste-frontend para criar uma landing page de [NEGÓCIO] em [TECNOLOGIA]. Antes de escrever o código, me diga em cinco linhas a direção visual que você vai seguir.
Prompt: revisar o código com a Web Design Guidelines
Use a skill web-design-guidelines e revise o arquivo [CAMINHO]. Mostre os achados no formato arquivo:linha, do mais grave ao menos grave, e proponha a correção de cada um. Só altere o arquivo depois do meu ok.
Prompt: criar a página seguindo um DESIGN.md
Leia o DESIGN.md na raiz do projeto e crie uma página de [NEGÓCIO] seguindo a paleta, a tipografia, o espaçamento e os botões dele. Não use o nome, o logo nem os textos da empresa de origem do arquivo.
Prompt: gerar a referência por imagem (Image to Code)
Use a skill image-to-code para gerar as imagens de referência de uma landing page de [NEGÓCIO] e depois construir o site para ficar o mais próximo possível delas. Me mostre as imagens antes de escrever o código. Se você não conseguir gerar imagens neste ambiente, me diga em vez de improvisar.
Prompt: olhar o resultado no navegador com o Playwright CLI
Use o playwright-cli para abrir http://localhost:3000, tirar um screenshot da página e listar as mensagens do console. Descreva o que está desalinhado, cortado ou com erro e proponha as correções. Só edite os arquivos depois do meu ok.
Prompt: fechar o ciclo de criar, revisar e olhar
Crie a landing page de [NEGÓCIO] em [TECNOLOGIA]. Depois revise o código com a skill web-design-guidelines, abra a página com o playwright-cli, tire um screenshot e me entregue uma lista única de correções por prioridade. Não aplique nada antes do meu ok.
Erros comuns
- 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
- Procurei o Image to Code no repositório da Taste Skill e não achei → a skill mudou para Leonxlnx/imagegen-skills em outubro de 2026 → instale a partir do repositório novo
- O Image to Code não gera as imagens no Claude Code → a skill exige um agente que gere imagens e escreva código, e o README cita Codex → use um ambiente com geração de imagem ou pule esta ferramenta
- A Web Design Guidelines não achou nada para revisar → ela lê os arquivos que você indica, não a página publicada → passe o caminho do arquivo ou um padrão de arquivos
- O Claude diz que o DESIGN.md não existe → o arquivo ficou na pasta do clone e não na raiz do projeto → copie para a raiz, com o nome DESIGN.md
- O playwright-cli não é reconhecido → a instalação global do npm não está no PATH → rode playwright-cli --help para confirmar e refaça a instalação, como no README
- O Playwright CLI não achou o erro sozinho → o comando só lista o console, e quem interpreta é o Claude → peça no prompt para listar o console e descrever os problemas
Checklist final
- Você criou uma pasta de teste e não usou um projeto de cliente
- A Taste Skill foi instalada por um dos dois caminhos, e não pelos dois
- Você sabe que a Web Design Guidelines revisa arquivos, não páginas publicadas
- O DESIGN.md está na raiz e você não vai copiar o logo nem o nome da marca de origem
- Você decidiu se vai testar o Image to Code, sabendo que o README cita Codex
- playwright-cli --help responde e você tirou um screenshot da página de teste
- Você revisou os achados antes de aceitar qualquer alteração
Perguntas frequentes
Isso é plugin ou skill?
Depende da ferramenta. A Taste Skill, a Web Design Guidelines e o Image to Code são skills. O Awesome Design é uma coleção de arquivos DESIGN.md. O Playwright CLI é um programa de linha de comando que também instala skills. Só a Taste Skill e o Image to Code oferecem plugin do Claude Code.
Preciso das cinco?
Não. Cada uma resolve uma etapa: criar, revisar, dar uma referência, gerar imagem e olhar o navegador. Comece por uma ou duas e compare com uma página feita sem skill.
A Web Design Guidelines audita o meu site publicado?
Não. A skill revisa os arquivos de código que você indicar, usando as regras da Vercel, e devolve os achados por arquivo e linha.
Qual a diferença para a lista de 10 skills?
Aquela página compara 10 skills de design com link e instalação de cada uma. Esta explica 5 ferramentas de um fluxo, com prompts e avisos, e inclui um CLI e arquivos de referência que a outra não cobre.
Fontes oficiais
- Taste Skillgithub.com/Leonxlnx/taste-skill (abre em nova aba)
- Web Design Guidelines, instalaçãovercel.com/design/guidelines (abre em nova aba)
- Skills da Vercelgithub.com/vercel-labs/agent-skills (abre em nova aba)
- Awesome Design (DESIGN.md)github.com/VoltAgent/awesome-design-md (abre em nova aba)
- Image to Codegithub.com/Leonxlnx/imagegen-skills (abre em nova aba)
- Playwright CLIgithub.com/microsoft/playwright-cli (abre em nova aba)
- Instalação do Claude Codecode.claude.com/docs (abre em nova aba)
Próximos passos
- Comparar 10 skills de design lado a lado/open-source/skills/10-skills-anti-cara-de-ia
- Configurar o Claude com Figma e Playwright MCP para sites mais bonitos/open-source/skills/seus-sites-com-claude-parecem-genericos
- Ver as 15 skills essenciais do Claude/open-source/skills/15-skills-essenciais-pra-ter-no-claude
Comece agora
Pronto para colocar 5 Plugins de Design pro Claude Code 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