Voltar para Guias

Tutorial · IA agêntica · 20 min

Skills de design para agentes de IA: sites sem cara de IA

Instale as skills do Emil Kowalski, o Impeccable e o Taste, e conecte os MCPs do Figma e do Playwright para o Claude Code, Codex ou Cursor desenhar, construir, testar e revisar sozinho.

Começar tutorial
Três cartas marfim abertas em leque sobre azul-marinho, com uma curva de animação, linhas de texto e uma grade em vermelho, e um cursor vermelho sobre a carta da frente.
Paulo Cauhi ·

Todo site feito por IA parece o mesmo: fonte Inter em tudo, gradiente roxo para azul, card dentro de card, um ícone num quadradinho em cima de cada título. Isso acontece porque os modelos aprenderam com os mesmos templates. Este guia instala três skills de design que ensinam gosto ao seu agente, e dois servidores MCP que deixam ele ler o seu Figma e abrir o próprio site num navegador para testar e tirar screenshots. Tudo funciona no Claude Code, no Codex e no Cursor, e tudo é open source ou tem plano grátis.

01Instalar as skills Emil Kowalski, Impeccable e Taste, com um comando cada.02Conectar os MCPs Figma para ler o design, Playwright para abrir e fotografar o site.03Usar tudo junto Um prompt que desenha, constrói, testa e revisa sozinho.

Antes de começar

  • Um agente de código: Claude Code, Codex ou Cursor.
  • Node.js 18 ou mais novo, para o npx. Confira com node --version.
  • Uma pasta de projeto aberta no terminal. As skills se instalam por projeto, a não ser que você peça instalação global.
  • Uma conta no Figma, se quiser usar o MCP do Figma. O servidor remoto funciona em todos os planos, inclusive o grátis.

Skill e MCP, em palavras simples

Uma skill é um manual. É uma pasta com um arquivo SKILL.md escrito por alguém experiente, dizendo ao agente o que fazer e o que evitar. O agente lê o manual quando o seu pedido combina com ele, ou quando você chama a skill pelo nome. Não tem servidor, não tem chave de API.

Um MCP é uma ferramenta. É um pequeno servidor que dá ao agente mãos novas: ler um arquivo do Figma, abrir um navegador, clicar, tirar screenshot. A skill diz como fazer bem; o MCP deixa o agente fazer.

Skills do Emil Kowalski: animação e acabamento

Emil Kowalski é design engineer no time de Web da Linear, trabalhou antes no time de design da Vercel e criou o Sonner e o Vaul, bibliotecas React de toast e de gaveta. As skills dele são o que ele corrige quando revisa uma interface: por exemplo, o agente usa ease-in numa animação de entrada quando o certo é ease-out, ou uma borda sólida onde caberia uma sombra semitransparente.

A principal é a emil-design-eng (mais animação, com conselhos de design). O pacote traz outras, como animate, review-animations, improve-animations, apple-design, prototype, mobile-native e pick-ui-library.

Na pasta do projeto, rode:

Terminal
npx skills@latest add emilkowalski/skills

O instalador lista as skills do pacote e pergunta quais quer e para quais agentes. Para pular a pergunta dos agentes e instalar direto no Claude Code, no Codex e no Cursor:

Terminal
npx skills@latest add emilkowalski/skills -a claude-code -a codex -a cursor

Adicione -g para instalar para todos os seus projetos. Reinicie o agente depois de instalar.

Primeiro uso. Com um projeto que já tem alguma animação, peça: "Use a skill review-animations e revise as animações desta página." Para criar uma do zero: "Use a skill animate para animar a abertura deste modal."

Site do Emil Kowalski: design engineer, trabalha no time de Web da Linear e antes no time de design da Vercel; projetos como aiforui.dev e Sonner.
Captura de tela: emilkowal.ski.

Impeccable: o vocabulário de design do agente

O Impeccable é de Paul Bakaus, criador do jQuery UI, que passou pelo Chrome DevTools, pelo AMP e pelos Web Stories no Google. É uma skill só, com 24 comandos que viram um vocabulário compartilhado entre você e o agente, e 61 regras que detectam os vícios de site feito por IA sem usar modelo nenhum: Inter em tudo, gradiente roxo para azul, card dentro de card, texto cinza sobre fundo colorido, o ícone em quadradinho em cima de cada título.

Na raiz do projeto, rode:

Terminal
npx impeccable install

O instalador detecta os agentes que você tem (Claude Code, Codex, Cursor e outros), deixa você ajustar a lista e pergunta se instala no projeto ou globalmente. Para decidir de antemão, use --providers=claude,codex,cursor e --scope=project. Ele também oferece instalar um hook que roda o detector sempre que o agente edita um arquivo de interface. Reinicie o agente depois.

Depois, dentro do agente, rode uma vez por projeto:

Claude Code ou Cursor
/impeccable init

O init olha o projeto, pergunta só o que falta (público, objetivo, tom de voz) e grava tudo num PRODUCT.md, que os outros comandos leem. No Codex a skill se chama com $impeccable em vez de /impeccable (por exemplo $impeccable init), e é preciso abrir /hooks e aprovar o hook do projeto depois de instalar.

Os comandos que você mais vai usar:

  • /impeccable critique faz uma revisão de UX: hierarquia, clareza, impacto.
  • /impeccable audit roda as checagens técnicas: acessibilidade, performance, responsivo.
  • /impeccable polish é a passada final antes de publicar.
  • /impeccable bolder e /impeccable quieter deixam o design mais ousado ou mais contido.
  • /impeccable typeset e /impeccable layout corrigem fontes, espaçamento e ritmo.

Pode também escrever em linguagem natural: /impeccable refaça esta seção hero. E sem agente nenhum, npx impeccable detect src/ (ou uma URL) lista os problemas da sua interface.

No Claude Code também dá para instalar como plugin: /plugin marketplace add pbakaus/impeccable, depois instale pela lista do /plugin.

Página inicial do Impeccable: 'The missing design vocabulary for agents', com um card de exemplo marcado com os vícios de IA e os comandos polish, distill e clarify.
Captura de tela: impeccable.style.

Taste: gosto para quem começa do zero

O Taste Skill, de Leon Lin, se descreve como uma skill que dá bom gosto à sua IA e impede que ela gere o genérico de sempre. Ele lê o seu pedido, deduz a linguagem visual e ajusta três botões de 1 a 10 no topo do arquivo: DESIGN_VARIANCE (quanto o layout ousa), MOTION_INTENSITY (quanta animação) e VISUAL_DENSITY (quanta informação por tela).

Instale:

Terminal
npx skills add Leonxlnx/taste-skill

O pacote traz várias skills; o instalador pergunta quais quer. Para instalar só a principal:

Terminal
npx skills add Leonxlnx/taste-skill --skill "design-taste-frontend"

O mesmo -a claude-code -a codex -a cursor do passo 1 funciona aqui. Outras skills do pacote que valem conhecer: gpt-taste (regras mais rígidas, pensadas para GPT e Codex), redesign-existing-projects (para melhorar um site que já existe), e estilos prontos como minimalist-ui, high-end-visual-design e industrial-brutalist-ui.

Primeiro uso. "Use a skill design-taste-frontend e crie a landing page de uma padaria artesanal." Compare com o que o agente fazia antes.

Cuidado com cópias. Existem repositórios com nomes parecidos. O original é github.com/Leonxlnx/taste-skill, com o site tasteskill.dev.

Página inicial do Taste Skill: 'The Anti-Slop Frontend Framework for AI Agents', com o comando npx skills add Leonxlnx/taste-skill e dois sites de exemplo.
Captura de tela: tasteskill.dev.

Figma MCP: o agente lê o seu design

O MCP oficial do Figma deixa o agente ler um frame (componentes, variáveis, layout) e transformar em código, e também escrever de volta no Figma. Use o servidor remoto: ele funciona em todos os planos, inclusive o grátis, e não precisa do app desktop. O servidor desktop exige um assento Dev ou Full num plano pago.

Claude Code. O jeito recomendado pelo Figma é o plugin oficial:

Terminal
claude plugin install figma@claude-plugins-official

Reinicie o Claude Code, digite /plugin, vá na aba Installed, escolha figma, aperte Enter para autenticar e clique Allow access no navegador. Prefere configurar à mão? Rode claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp, abra /mcp, escolha figma e Authenticate.

Codex. No app do Codex, clique em Plugins no canto superior esquerdo, depois no + ao lado de Figma, em Install Figma, e autorize. Pela linha de comando:

Terminal
codex mcp add figma --url https://mcp.figma.com/mcp

Cursor. No chat do agente, digite:

Cursor (chat)
/add-plugin figma

Clique Add Plugin, abra Cursor Settings → Tools & MCP e clique Connect ao lado do Figma.

Primeiro uso. No Figma, clique com o botão direito num frame, escolha Copy link to selection e cole no prompt: "Implemente este design: (link)". O agente extrai o frame pelo link.

O Figma avisa que escrever no canvas vai virar um recurso pago por uso; por enquanto é grátis durante o beta.

Playwright MCP: o agente abre e fotografa o próprio site

O Playwright MCP, da Microsoft, dá ao agente um navegador de verdade. Ele abre uma página, redimensiona para celular ou desktop, clica, lê os erros do console e salva screenshots. É isso que fecha o ciclo: o agente vê o que construiu e corrige sozinho, em vez de você conferir tudo.

Claude Code:

Terminal
claude mcp add playwright npx @playwright/mcp@latest

Codex:

Terminal
codex mcp add playwright npx "@playwright/mcp@latest"

Cursor. Abra Cursor Settings → MCP → Add new MCP Server, dê um nome, escolha o tipo command e use npx @playwright/mcp@latest. O README do projeto também tem um botão que instala direto no Cursor.

Por padrão o navegador abre numa janela visível, então você vê o agente trabalhando. Para esconder, adicione --headless ao comando.

Primeiro uso. Com o site rodando: "Abra http://localhost:3000 com o Playwright, tire um screenshot em 1440 px e outro em 390 px, e me diga o que está quebrado."

Um prompt que usa as cinco ferramentas de uma vez (troque o link pelo seu frame):

Leia o frame do Figma neste link: https://www.figma.com/design/...
Construa essa landing page no projeto, seguindo o design.
Use a skill design-taste-frontend para tipografia, espaçamento e layout,
e a emil-design-eng para as animações.
Depois abra a página com o Playwright em 1440 px e 390 px de largura,
tire um screenshot de cada, e confira o console.
Rode /impeccable audit e /impeccable polish, corrija o que aparecer,
e me mostre os screenshots finais.

No Codex, troque /impeccable por $impeccable. Sem Figma? Tire a primeira linha e descreva a página em palavras; o Taste cuida da direção visual.

Problemas comuns

  • npx: command not found. Falta o Node.js. Instale a versão LTS em nodejs.org e abra um terminal novo.
  • A skill não aparece. Reinicie o agente. Confira se instalou para o agente certo (-a) e no escopo certo: por padrão fica na pasta do projeto, então abra o agente nessa pasta, ou reinstale com -g. npx skills list mostra o que está instalado.
  • Codex não roda o hook do Impeccable. Abra /hooks e aprove o hook do projeto. Depois de um npx impeccable update, pode ser preciso aprovar de novo.
  • O Figma não autentica, ou o plugin não instala. Sua organização pode ter bloqueado plugins; peça ao administrador ou use o comando manual claude mcp add / codex mcp add.
  • O agente não acha o frame. Use Copy link to selection num frame específico, não o link do arquivo inteiro.
  • O navegador do Playwright não abre. Confira o Node 18+. Num servidor sem tela, use --headless. Para usar outro navegador, --browser aceita chrome, firefox, webkit ou msedge.

As ferramentas deste guia: emilkowalski/skills (MIT), de Emil Kowalski; pbakaus/impeccable (Apache-2.0), de Paul Bakaus; Leonxlnx/taste-skill (MIT), de Leon Lin; o Figma MCP server, do Figma; e o Playwright MCP (Apache-2.0), da Microsoft. As skills são instaladas pelo skills, da Vercel Labs. Comandos conferidos em 18 de setembro de 2026.

Um e-mail por novidade

Quando publico algo novo sobre IA e agentes, você recebe um e-mail. Sem spam, e você cancela com um clique.

Seu endereço fica armazenado na Brevo, o serviço de e-mail que uso, apenas para enviar estas mensagens.

As interações estão indisponíveis no momento. O artigo continua disponível.

Comentários

Comentários

As interações estão indisponíveis no momento. O artigo continua disponível.

Privacidade dos comentáriosDiretrizes para comentários