# Os 5 plugins grátis que transformam o Claude num gênio do design

Um guia do @souoallan · feito pelo Breeze
A ideia é do @duncanrogoff: https://www.instagram.com/reel/DfAtBw1iQj9/

Os cinco são grátis, de código aberto e funcionam no **Claude Code**. Links conferidos em 29/10/2026.

## Do que tu precisa

- O **Claude Code** no computador (a aba **Code** do app do Claude serve).
- Uma pasta com o teu site (ou uma pasta vazia, se for começar do zero).

Só isso. **Tu não digita nada no terminal:** copia o prompt de instalação abaixo, cola no Claude Code e ele instala os cinco sozinho. Quando ele pedir licença pra rodar alguma coisa, clica em **Permitir**.

## Passo 1 · Cola isto no Claude Code (instala os cinco)

```
Instala pra mim estes 5 plugins de design, um de cada vez, nesta pasta. Eu não sei mexer no terminal: roda tu todos os comandos e eu só clico em Permitir quando tu pedir.

1. Awesome Design MD (github.com/VoltAgent/awesome-design-md): baixa o DESIGN.md do estilo stripe pra esta pasta.
2. Taste (github.com/Leonxlnx/taste-skill): instala a skill design-taste-frontend.
3. Impeccable (github.com/pbakaus/impeccable): instala e liga a checagem automática de design.
4. Playwright CLI (github.com/microsoft/playwright-cli): instala com as skills.
5. img2threejs (github.com/img2threejs/img2threejs): instala.

Antes, confere se falta alguma coisa no computador (Node 22 ou mais novo, Git, Python 3.10 ou mais novo, Chrome ou Edge) e instala o que faltar. Fala comigo em português simples, me avisa quando terminar cada um e, no fim, me diz se eu preciso fechar e abrir o Claude Code de novo.
```

Quer outro estilo em vez do Stripe? Troca `stripe` no prompt por `notion`, `linear.app`, `vercel`, `apple`… (lista completa no link do Awesome Design MD).

## Os 5 plugins

### 1. Awesome Design MD

Sistemas de design tirados de sites reais (Stripe, Notion, Linear, Vercel, Apple e mais de 80 outros). Cada um vira um arquivo `DESIGN.md` com cores, fontes, espaçamentos e regras. O Claude lê o arquivo e faz a página no mesmo estilo.

- Link: https://github.com/VoltAgent/awesome-design-md
- Licença: MIT (grátis)

### 2. Taste

Regras de bom gosto por cima do Claude: direção de arte, imagens de referência e uma conferida no navegador no fim. Tira a cara genérica de "página feita por IA".

- Link: https://github.com/Leonxlnx/taste-skill
- Licença: MIT (grátis)

### 3. Impeccable

Passada de acabamento. Dá ao Claude um vocabulário de design (comandos como polish, bolder, critique e audit) e caça os vícios de página feita por IA antes de tu publicar. No modo ao vivo, tu clica num elemento no navegador, escolhe uma direção e o Claude troca por variações ali mesmo. A que tu aceitar vai pro código.

- Link: https://github.com/pbakaus/impeccable
- Licença: Apache 2.0 (grátis)
- Modo ao vivo: pede pro Claude "abre o Impeccable ao vivo" (ou digita `/impeccable live` no Claude Code).

### 4. Playwright CLI

Ferramenta da Microsoft que deixa o Claude abrir o teu site num navegador de verdade, clicar, preencher, testar e tirar print, sem tu precisar fazer nada.

- Link: https://github.com/microsoft/playwright-cli
- Licença: Apache 2.0 (grátis)

### 5. img2threejs

Tu manda uma foto de um objeto e o Claude refaz ele em 3D, todo em código (Three.js), pronto pra girar e animar no navegador. Ele compara o resultado com a foto a cada passada até ficar parecido.

- Link: https://github.com/img2threejs/img2threejs (antes ficava em hoainho/img2threejs)
- Licença: Apache 2.0 (grátis)
- Usar: manda a foto no Claude Code e pede "refaz esse objeto em Three.js mantendo as proporções e as cores".

## Passo 2 · Prompt pra usar os cinco juntos

Abre a pasta do teu site no Claude Code e cola:

```
Quero refazer a página inicial deste site com cara de site profissional, não de página feita por IA.

1. Estilo: usa o DESIGN.md que está na pasta do projeto (Awesome Design MD) como base de cores, fontes e espaçamentos. Adapta pra minha marca: mantém meu nome, meu logo e meu texto.
2. Bom gosto: segue a skill do Taste em todas as decisões de layout e imagem. Nada de degradê roxo genérico, cards todos iguais ou ícone aleatório.
3. 3D: pega a foto [nome da foto] desta pasta e usa o img2threejs pra refazer o objeto em 3D, girando devagar no topo da página.
4. Acabamento: quando a página estiver pronta, roda o Impeccable (critique e depois polish) e corrige o que ele apontar.
5. Teste: abre a página com o Playwright CLI no celular e no computador, clica em todos os botões, tira print das duas telas e me mostra. Se algo quebrar, arruma e testa de novo.

Antes de começar, me mostra o plano em 5 linhas e espera o meu ok.
```

Depois, pra ajustar ao vivo, pede "abre o Impeccable ao vivo", clica no elemento que não gostou e escolhe uma das variações.