Transforma o Claude num gênio do design com esses cinco plugins grátis.
Chega de site com cara de IA. Copia o comando de cada um, instala em um minuto e o Claude passa a desenhar com estilo de site de verdade, acabamento fino e até 3D.
O prompt usa os cinco juntos. Instala os plugins primeiro, nos cards aqui embaixo.
Esses plugins são pro Claude Code do computador. Manda pra ti mesmo e abre lá.
Me manda o link por e-mailCopia, cola, instala
Os comandos "no terminal" vão no terminal do computador, dentro da pasta do teu site. Os que começam com / vão dentro do Claude Code.
- 1
Awesome Design MD
Sistemas de design tirados de sites reais como Stripe e Notion, prontos pro Claude copiar o estilo.
no terminal, na pasta do sitenpx getdesign@latest add stripeTroca stripe por notion, linear, vercel, apple… São mais de 80 sites. Depois é só pedir: "usa o DESIGN.md".
Ver no GitHub → - 2
Taste
Regras de bom gosto por cima do Claude: tira a cara genérica de IA das páginas que ele cria.
no terminalou, dentro do Claude Code (as duas linhas juntas):npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"Ver no GitHub →/plugin marketplace add Leonxlnx/taste-skill /plugin install taste-skill@taste-skill - 3
Impeccable
Passada de acabamento: tu clica num elemento no navegador e o Claude te mostra variações dele.
no terminalou, dentro do Claude Code (depois instala o Impeccable no menu /plugin):npx impeccable install/plugin marketplace add pbakaus/impeccableQuando ele perguntar da checagem automática de design, responde que sim. O modo ao vivo é /impeccable live, com o site rodando no teu computador.
Ver no GitHub → - 4
Playwright CLI
O Claude abre teu site num navegador de verdade, clica, testa e tira print sozinho.
no terminal (as duas linhas juntas)Ver no GitHub →npm install -g @playwright/cli@latest playwright-cli install --skills - 5
img2threejs
Manda uma foto e o Claude refaz o objeto em 3D, em código, girando no navegador.
no terminalnpx --yes img2threejs@latest installDepois, no Claude Code: /img2threejs + a foto.
Ver no GitHub →
3 passos
- 1Instala os cinco: copia o comando de cada card e cola no terminal (ou no Claude Code, nos que começam com /).
- 2Fecha e abre o Claude Code de novo, pra ele enxergar os plugins novos.
- 3Abre a pasta do teu site no Claude Code e cola o prompt. Ele escolhe o estilo, faz a página, dá a passada de acabamento e testa no navegador.
Do que tu precisa
- O Claude Code no computador.
- O Node instalado (versão 22 ou mais nova cobre todos). O img2threejs pede também o Python 3.10 ou mais novo.
- O Chrome (ou o Edge) no computador.
Perguntas comuns
É grátis mesmo?
Sim. Os cinco são de código aberto e não pedem chave nem assinatura.
E se eu nunca usei o Claude Code?
É simples de instalar. A página oficial do Claude Code mostra o passo a passo pro teu sistema.
Precisa instalar os cinco?
Não. Cada um funciona sozinho. Se for pra começar com um, começa pelo Taste ou pelo Awesome Design MD.
Posso copiar o site da Stripe?
O estilo serve de referência. Usa a tua marca, as tuas cores e o teu texto por cima, pra não ficar igual ao deles.
Ele juntou primeiro essas cinco ferramentas de design pro Claude Code. Vale ver o original.