Skills@joaoguirunas

5 Configurações pro Claude Fazer Sites Lindos (3 Skills + 2 MCPs)

As 5 configurações que tiram a cara de IA dos sites do Claude: 3 skills e 2 MCPs (Figma e Playwright), com instalação e prompts prontos.

Quero ser Gestor de IAVer UI UX Pro Max no GitHubVoltar ao catálogo
ui-ux-pro-max-skill
$ git clone https://github.com/nextlevelbuilder/ui-ux-pro-max-skill
✓ repositório pronto para uso local

O que é

5 Configurações pro Claude Fazer Sites Lindos (3 Skills + 2 MCPs)

Quando um site gerado pelo Claude Code parece genérico, na maioria das vezes o problema não é o modelo, é o setup. Esta página reúne as 5 configurações que fazem a diferença: 3 skills (UI UX Pro Max, Web Design Guidelines e Accessibility) e 2 MCPs (Figma e Playwright), cada uma com link oficial, comando de instalação e prompt pronto.

A divisão de trabalho é simples: o UI UX Pro Max decide o design system, o Web Design Guidelines revisa contra o padrão da Vercel, o Accessibility audita segundo a WCAG 2.2, o Figma MCP desenha no Figma e o Playwright MCP testa a página no navegador antes de você ver. Nenhuma configuração salva um briefing ruim: se você não sabe para quem é o site, ele sai bonito e não vende.

Depois do checklist há um bônus com as 3 frentes de design que já estavam aqui (motion com as skills do Emil Kowalski, refino visual e referência de gosto), para quem quer ir além das cinco.

UI UX Pro Max decide

Skill que gera o design system da página: estilo, paleta, tipografia, espaçamento e anti-padrões, antes de qualquer código.

Web Design Guidelines revisa

Skill de revisão do repositório de skills da Vercel: audita o código contra mais de 100 regras de interface e devolve achados no formato arquivo:linha.

Accessibility audita

Skill do Addy Osmani que guia auditoria e correções segundo a WCAG 2.2, sem prometer conformidade total.

Figma MCP desenha

Conecta o Claude ao Figma para criar frames e componentes no arquivo (exige Full seat). Não publica site.

Playwright MCP testa

Dá ao Claude um navegador: abre a página, clica em tudo e tira prints no desktop e no celular antes de te entregar.

Bônus: motion e gosto

Skills do Emil Kowalski para animação com easing correto e revisão de motion, mais as frentes de refino visual e referência de gosto.

Nível: intermediário · Tempo estimado: ~40 min (estimativa, não cronometrada)

Atenção:

Honestidade antes de começar: o Figma MCP, o Playwright MCP e o comparativo antes/depois ainda não foram testados de ponta a ponta pelo João para esta página. Os comandos abaixo vêm da documentação e dos READMEs oficiais, conferidos em out/2026. Teste cada etapa na sua máquina.

Pré-requisitos

  • Claude Code instalado e logado (https://code.claude.com/docs/en/quickstart)
  • Node.js 18 ou mais novo (Playwright MCP e npx) e Python 3 (UI UX Pro Max). Confira com node --version e python3 --version
  • Para a configuração do Figma: conta Figma com Full seat e um arquivo de Design seu. Seat Dev só lê
  • Um briefing: para quem é o site, o que ele vende e qual ação o visitante deve tomar

Conceitos-chave

  1. 01

    Skill

    Instruções que o Claude carrega quando são relevantes, guardadas em .claude/skills/NOME/SKILL.md (projeto) ou ~/.claude/skills/ (todos os projetos). Skills ensinam e revisam.

  2. 02

    MCP

    Conexão do Claude com uma ferramenta externa, como o Figma ou um navegador. MCPs dão mãos ao Claude: ele passa a agir fora do chat.

  3. 03

    Quem faz o quê

    UI UX Pro Max escolhe layout, tipografia e cor. Web Design Guidelines revisa contra o padrão da Vercel. Accessibility audita WCAG 2.2. Figma MCP desenha dentro do Figma. Playwright MCP testa no navegador.

Passo a passo

  1. 01

    Configuração 1: UI UX Pro Max (skill)

    Repositório: github.com/nextlevelbuilder/ui-ux-pro-max-skill (licença MIT). Opção A, plugin dentro do claude. Opção B, pela CLI: use o pacote ui-ux-pro-max-cli (não o antigo uipro-cli, que está desatualizado). No Claude Code ela ativa sozinha quando você pede uma interface.

    # Opção A (dentro do claude) /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill /plugin install ui-ux-pro-max@ui-ux-pro-max-skill # Opção B (no terminal, na pasta do projeto) npm install -g ui-ux-pro-max-cli uipro init --ai claude
  2. 02

    Configuração 2: Web Design Guidelines (skill da Vercel)

    Está no repositório oficial de skills da Vercel (github.com/vercel-labs/agent-skills). É uma skill de revisão: audita o código contra as regras de interface e precisa de internet, porque busca as regras ao vivo. Sobre licença: o repositório não declara uma no GitHub, então verifique antes de redistribuir qualquer arquivo. Siga as perguntas do instalador e confirme depois, com o primeiro prompt abaixo, que a skill web-design-guidelines ficou ativa.

    npx skills add vercel-labs/agent-skills
  3. 03

    Configuração 3: Accessibility (skill do Addy Osmani)

    Repositório: github.com/addyosmani/web-quality-skills (MIT). Audita e corrige acessibilidade seguindo a WCAG 2.2. Se instalar como plugin, as skills ganham namespace (por exemplo /web-quality-skills:accessibility).

    npx skills add addyosmani/web-quality-skills # ou como plugin (dentro do claude) /plugin marketplace add addyosmani/web-quality-skills /plugin install web-quality-skills@addy-web-quality-skills
  4. 04

    Configuração 4: Figma MCP

    Comando oficial da documentação do Figma para o Claude Code. O --scope user vale para todos os projetos. Depois abra o claude, digite /mcp, escolha figma, clique em Authenticate e permita o acesso no navegador. Ao final aparece Authentication successful. Veja o aviso logo abaixo sobre o que ele faz de verdade.

    claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
  5. 05

    Configuração 5: Playwright MCP

    Servidor oficial da Microsoft (github.com/microsoft/playwright-mcp, Apache-2.0). Por padrão o navegador abre com janela; para rodar sem janela, adicione --headless nos argumentos do servidor.

    claude mcp add playwright npx @playwright/mcp@latest
  6. 06

    Confira tudo

    Reabra o claude, liste os MCPs e rode o primeiro prompt abaixo para confirmar skills e ferramentas.

    claude mcp list
  7. 07

    Peça a página, revise, audite e teste

    Use os prompts abaixo na ordem: pedir a landing com briefing, revisar com a Vercel, auditar a acessibilidade e, por último, o pedido de teste com o Playwright.

Atenção:

O Figma MCP escreve DENTRO do Figma (cria frames, componentes e variáveis no seu arquivo). Ele não gera nem publica um site no ar. Para escrever no arquivo é preciso Full seat e permissão de edição; seat Dev é somente leitura. A documentação lista limites atuais do write-to-canvas: sem assets de imagem e sem fontes personalizadas. Sem Full seat, pule a configuração 4 e use o design system da sua marca no lugar (tutorial em Próximos passos).

Prompts prontos

Troque só o que está entre colchetes em caixa-alta. O pedido de teste com o Playwright é o que fecha o ciclo: ele roda toda vez, antes de você ver a página.

Prompt: conferir as 5 configurações

Liste as skills que você tem disponíveis e confirme se estas três estão ativas: ui-ux-pro-max, web-design-guidelines e accessibility. Depois liste as ferramentas dos MCPs figma e playwright que você consegue usar agora. Se algo faltar, me diga exatamente o que não encontrou, sem tentar instalar nada.

Prompt: pedir a landing com briefing antes do design

Quero uma landing page para vender [SERVIÇO, ex.: consultoria de tráfego pago]. Antes de desenhar qualquer coisa, me faça as perguntas que faltam sobre: para quem é, a promessa principal, a prova (resultados, depoimentos), a objeção mais comum e a ação que o visitante deve fazer. Depois use a skill ui-ux-pro-max para gerar o design system (estilo, paleta, tipografia, espaçamento) e me mostre em um resumo. Só quando eu aprovar, construa a página em [STACK, ex.: HTML + Tailwind]. Evite o visual "cara de IA": gradiente roxo, cartões iguais empilhados, emoji como ícone.

Prompt: revisar contra o padrão da Vercel

Use a skill web-design-guidelines para revisar todos os arquivos da página [CAMINHO, ex.: index.html ou src/**/*.tsx]. Devolva os achados no formato arquivo:linha e depois corrija os de severidade alta. Me mostre o que mudou.

Prompt: auditar acessibilidade (WCAG 2.2)

Use a skill accessibility para auditar esta página segundo a WCAG 2.2: contraste, nome e papel dos elementos, ordem do foco e navegação só pelo teclado, texto alternativo e hierarquia de títulos. Corrija o que for correção de código e liste o que exige decisão minha. Não diga que o site "está 100% acessível"; diga o que foi checado e o que ainda precisa de teste manual.

Prompt: testar com o Playwright antes de me mostrar

Antes de me mostrar, abre a página com o Playwright, clica em todos os botões e links, testa no celular e no desktop e me manda os prints com o que você corrigiu.

Prompt: espelhar a página no Figma (só com Full seat)

Using this Figma file: [URL DO ARQUIVO FIGMA], create a new page called "Landing" and build the desktop and mobile versions of this landing page with auto layout, using the colors and typography from the design system we approved. Work in small steps: inspect the file first, create the variables, then the sections.

Prompt: antes e depois honesto

Gere duas versões da mesma landing para [SERVIÇO]: A) sem usar nenhuma skill, só o que você sabe por padrão; B) usando ui-ux-pro-max, web-design-guidelines e accessibility e testando no Playwright. Salve em /antes e /depois, tire um print de cada em desktop e celular e liste em 5 pontos as diferenças reais (não elogie; aponte o que mudou).

Dica:

Os prompts do Figma e do antes/depois seguem a estrutura da documentação oficial e ainda não passaram por teste real do João. Rode, compare com o que você esperava e ajuste.

Erros comuns

  • Skill instalada mas "não ativa": reabra o claude depois de instalar e confira se ela está em .claude/skills/ ou instalada como plugin (com namespace, ex.: /web-quality-skills:...).
  • Instalou uipro-cli e veio versão velha: use o pacote ui-ux-pro-max-cli.
  • UI UX Pro Max não roda: falta Python 3. Confira com python3 --version.
  • Figma: "não consigo escrever no arquivo": seat Dev só lê. Escrever exige Full seat e permissão de edição no arquivo.
  • Figma: estourou o limite: contas Starter e seats View/Collab têm poucas chamadas de leitura por mês. Veja a tabela oficial de limites e considere outro seat.
  • Figma: imagem ou fonte própria não aparece no canvas: limitação atual do write-to-canvas.
  • Playwright abre uma janela e atrapalha: é o padrão. Configure o servidor com --headless.
  • MCP aparece no claude mcp list mas não responde: rode /mcp, reautentique (no caso do Figma) e reinicie a sessão.
  • Web Design Guidelines falha: ela busca as regras ao vivo no GitHub e precisa de internet.
  • Resultado bonito que não vende: o briefing estava vago. Responda as perguntas do segundo prompt antes de qualquer design.

Checklist final

  • As 3 skills (ui-ux-pro-max, web-design-guidelines, accessibility) aparecem como ativas no prompt de conferência
  • claude mcp list mostra playwright e, se você tem Full seat, figma autenticado
  • O briefing foi respondido antes do design
  • O design system foi aprovado antes do código
  • A revisão da Vercel rodou e os achados de severidade alta foram corrigidos
  • A auditoria WCAG 2.2 rodou e as pendências manuais foram anotadas
  • O Playwright clicou em tudo, no desktop e no celular, e você viu os prints
  • Você comparou o antes e o depois da mesma página

Bônus: refino de motion e gosto

Estas três frentes já estavam nesta página e continuam valendo como complemento às cinco. Motion real: o repositório de skills do Emil Kowalski (github.com/emilkowalski/skills, "Skills for Design Engineers") traz a skill emil-design-eng, que cobre animação e conselhos de design, e a review-animations, que revisa suas animações com critérios rígidos. Refino visual: espaçamento, tipografia, layout e alinhamento consistentes, obtidos via skills de design e regras de revisão. Referência de gosto: alimentar o Claude com exemplos de design de alto padrão desloca o resultado do genérico para interfaces polidas. Para refino e gosto, os nomes exatos de skill variam no ecossistema, então trate-os como frentes, não como repositórios fixos.

Prompt: aplicar motion com as skills do Emil Kowalski (depois de instalar o repositório)

Use a skill review-animations para revisar todas as animações e transições de [CAMINHO DA PÁGINA]. Aponte o que está sem easing adequado, longo demais ou sem propósito, e corrija. Depois use emil-design-eng para sugerir no máximo 3 melhorias de motion que reforcem a hierarquia da página.

Links úteis

Próximos passos

Comece agora

Pronto para colocar 5 Configurações pro Claude Fazer Sites Lindos (3 Skills + 2 MCPs) para rodar?

Ver UI UX Pro Max no GitHub

Pró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

Formação Gestor de IA

Aprenda a montar recursos como este, do zero

Quero ser Gestor de IA

Formação Gestor de IA

Falta um passo pro checkout

Deixa seu nome e WhatsApp. Você vai direto pro pagamento e a gente te acompanha de perto na entrada.

Com DDD. Só usamos pra te acompanhar na formação.