🎨 Site com cara de designer profissional usando Claude
Nível 3 · 🐷 Circe · ⏱️ ~30–45 min · Pré-requisitos: Claude Code instalado e logado (exige uma conta da Anthropic com plano ou crédito de API que dê acesso ao Claude Code), conta no Figma, Node.js (para rodar o MCP do Playwright)
📌 Pra que serve
A ideia do vídeo é dar ao Claude (Claude Code) um "kit de designer": skills com regras de tipografia, espaçamento, layout e animação, mais conexões (MCP) com Figma e Playwright. Assim ele deixa de entregar aquele site genérico de IA e passa a desenhar, construir, testar e tirar print do que ele mesmo cria. Serve para quem quer um site com acabamento profissional sem ser designer.🛠️ Passo a passo
1. Abra o Claude Code (no vídeo aparece "Claude Code · Opus" na caixa de prompt) na pasta do projeto do seu site. 2. Instale as skills de design do Emil Kowalski e a Impeccable. Segundo o vídeo, elas dão as regras de tipografia, espaçamento, layout e animação. Os quadros mostram quatro cartões: Tipografia (Título 44, Subtítulo 30, corpo 20 com altura de linha 1.5), Espaçamento (intervalos de 40 e 60), Layout (grade com colunas) e Animação. O vídeo não mostra como instalar (veja o aviso abaixo). 3. Instale a Taste Skill. Ela faz o Claude se inspirar em um site bom de verdade, em vez de entregar o "site que a IA costuma entregar". O vídeo ilustra esse vício com o degradê roxo de sempre. Também depende do setup do autor. 4. Conecte o MCP do Figma. Com ele o Claude consegue desenhar as telas. No vídeo aparece o Claude montando um frame "Home · desktop" e uma "Página nova". Será preciso autorizar o acesso à sua conta do Figma. 5. Conecte o MCP do Playwright com o comando da seção de links, rodado no terminal. Com ele o Claude abre o site, testa e tira print do que construiu, e pode se corrigir olhando o resultado. 6. Descreva o site em portug uês. Escreva algo como "Faz um site pra minha marca de …", completando com o seu nicho. Envie e deixe o Claude desenhar, construir e testar. 7. Revise e peça ajustes. Se algo ficar genérico, peça por tipografia, espaçamento ou cores diferentes.⚠️ O que ficou de fora: o autor manda o "setup completo" por comentário ("SITE"), então o vídeo não mostra os comandos de instalação, os links das skills nem o prompt exato. Não consegui confirmar os repositórios oficiais das skills, então não vou chutar comandos para elas. Sem elas, os passos 2 e 3 não podem ser feitos como no vídeo. Procure pelos nomes (Emil Kowalski design skill, Impeccable, Taste Skill) no GitHub ou pegue o setup com o autor.
💡 Dica: coloque no prompt o nicho, o público e uma referência de site que você admira. Peça também para o Claude tirar prints com o Playwright e se corrigir antes de te entregar.
🔗 Links e instalação
Fonte: https://www.instagram.com/reel/DeakyY6z51c/Claude Code: https://docs.claude.com/en/docs/claude-code
Figma: https://www.figma.com
Playwright MCP: https://github.com/microsoft/playwright-mcp
Comando para adicionar o MCP do Playwright ao Claude Code (rode no terminal, com o Node.js instalado):
claude mcp add playwright -- npx @playwright/mcp@latestPara o Figma, o vídeo não mostra o comando. Veja a documentação do MCP do Figma no site oficial (https://www.figma.com) e siga as instruções de conexão com o Claude Code. As skills de design (Emil Kowalski, Impeccable e Taste Skill) não têm link confirmado no material.