Como criar UI/UX com Claude Code: um fluxo real da ideia à interface (2026)

O Claude Code realmente consegue criar UI/UX?

Sim - mas você precisa entender a ferramenta primeiro. O Claude Code é uma CLI agêntica que roda no seu terminal: ele lê seu repositório, escreve o código da interface diretamente (React, Next.js, Tailwind, shadcn/ui) e produz algo que roda na hora, em vez de só desenhar um mockup e deixá-lo parado. Essa é a maior diferença em relação à experiência "Claude Design" baseada na web, sobre a qual a maioria dos resultados de busca em inglês na verdade fala.

Simplificando: o Claude Code cria UI/UX no estilo "da ideia ao código que roda", enquanto o Claude Design (web) tende mais para wireframe -> mockup visual. Se você é uma pessoa desenvolvedora trabalhando em um projeto React/Next de verdade, o Claude Code é a escolha certa, porque o resultado cai direto na sua base de código, com Git, testes e build.

Deixa eu ser sincera sobre a pegadinha: por padrão, a UI que o Claude Code produz costuma ser "segura" a ponto de ficar sem graça - layouts simétricos, gradientes roxos, fonte Inter, feature cards com cantos arredondados idênticos. Não é que o modelo não consiga deixar as coisas bonitas; é que faltam restrições estéticas. O resto deste artigo é sobre como você alimenta essas restrições para elevar a qualidade a um nível de produção.

Por que a UI do Claude Code sai "genérica"?

Entenda a causa e você conserta a coisa certa. UI genérica não é o modelo sendo "ruim de estética"; é o resultado de entradas que faltam:

• Nenhum design system. Quando você só diz "faça uma landing page", o modelo não tem paleta, nem escala de espaçamento, nem par de fontes - então ele escolhe os padrões mais seguros que mais viu nos dados de treinamento: Inter, gradientes roxo/azul, sombras suaves.
• Nenhuma referência visual. O Claude Code trabalha principalmente com texto. Se ele nunca chega a "ver" uma referência (um mockup, o screenshot de um site de que você gosta), não tem um alvo estético para mirar.
• Nenhuma restrição de componentes. Sem direção, ele cria na mão o próprio button/input/card em vez de usar uma biblioteca decente - o que leva a inconsistência e acessibilidade fraca.
• Nenhum loop de feedback. Ele escreve o código uma vez e para; não olha o resultado renderizado nem se corrige.

A boa notícia: todas as quatro causas têm conserto com passos concretos. É exatamente por isso que este artigo foca em um processo, e não em um único prompt "mágico".

Antes de começar: o que você precisa

Prepare seu ambiente primeiro para não ter que parar no meio do caminho:

• Claude Code instalado e logado (veja como instalar o Claude Code se você ainda não tiver).
• Node.js (para os servidores MCP que rodam via npx) e um projeto React/Next.js + Tailwind já inicializado.
• Contas/chaves para conectar os servidores MCP (shadcn, Playwright) - entenda o conceito em o que é MCP.

Os três grupos de ferramentas que você vai usar:

O fluxo de trabalho de 6 passos para criar UI/UX com o Claude Code

Este é o processo que eu uso repetidamente. Cada passo tem um objetivo claro, um comando ou prompt específico e um resultado que você deve enxergar. Você não precisa fazer tudo desde o primeiro dia - mas pule um passo e a UI vai ficar "genérica" exatamente naquele ponto.

Passo 1 - Gere um design system decente (skill de inteligência de design)

Este é o passo de maior impacto. Em vez de deixar o modelo adivinhar a paleta e as fontes, use uma skill de inteligência de design para gerar o design system inteiro de uma vez: paleta de cores, par de fontes, escala de espaçamento, raio das bordas e diretrizes de UX combinando com o seu tipo exato de produto (dashboard SaaS, landing page, e-commerce e por aí vai).

Uma skill como a ak-ui-ux-pro-max faz correspondência com uma grande biblioteca de referência - mais de 50 estilos, 161 paletas, 57 pares de fontes, 161 tipos de produto, 99 diretrizes de UX, 25 tipos de gráfico, 10 stacks - então, em vez de "adivinhar algo bonito", ela escolhe uma combinação já validada. Você descreve o produto e ela devolve um design system em forma de tokens, prontos para jogar na sua config do Tailwind.

# In Claude Code, describe the product so the skill generates a design system
Use the ui-ux design-intelligence skill: generate a design system for a
SaaS task-management landing page, professional yet modern tone, audience
is developers. Return a palette (with hex codes), one font pairing
(heading/body), a spacing scale, radius, and 5 core UX guidelines.
Output it as tokens.

Resultado esperado: uma tabela de tokens concreta (não "um azul suave"), pronta para copiar e colar direto no tailwind.config. Daqui para frente, cada componente faz referência à mesma fonte única.

Passo 2 - Escreva regras estéticas no CLAUDE.md

Um design system só é útil se o Claude Code obedecer a ele em toda sessão. A forma mais duradoura é fixar as regras em um arquivo CLAUDE.md na raiz do repositório - esse arquivo é carregado automaticamente no contexto sempre que você trabalha (detalhes no guia do CLAUDE.md).

# CLAUDE.md - Design rules (UI/UX)

## Aesthetics (must follow)
- DO NOT use the Inter or Roboto font. Use the font pairing in the design tokens.
- DO NOT use default purple/blue gradients. Only use colors from the palette tokens.
- Every spacing/color/radius must reference tokens - no loose hardcoded values.
- UI components must use shadcn/ui - do not hand-roll button/input/card.
- Minimum contrast 4.5:1; every interactive element has a visible focus ring.
- Minimum touch target 44x44px; no horizontal scroll on mobile.

Esse é o guarda-corpo mais importante: ele transforma decisões estéticas em restrições firmes, não em sugestões vagas. Toda vez que o Claude Code está prestes a recorrer "convenientemente" à Inter, essa regra o puxa de volta.

Passo 3 - Conecte uma biblioteca de componentes via MCP (shadcn/ui)

Para fazer o Claude Code montar componentes decentes em vez de reescrever os próprios, conecte o shadcn via MCP. Os componentes do shadcn/ui já cuidam da acessibilidade (Radix por baixo) e são consistentes no estilo:

claude mcp add shadcn -- npx -y shadcn@latest mcp

Uma vez conectado, você pede algo como "use o shadcn para adicionar um formulário de login", e o Claude Code puxa os componentes certos (button, input, dialog) e os monta em cima dos seus tokens do Passo 1. O resultado: menos componentes feitos na mão, menos bugs de acessibilidade e uma UI visivelmente mais consistente.

Passo 4 - Dê ao Claude Code uma referência visual

O modelo faz um trabalho de UI muito melhor quando tem um alvo para mirar. Antes de mandar ele codar uma tela, entregue uma referência visual: uma imagem de mockup, o screenshot de uma página de que você gosta ou um componente existente.

O que funciona: cole a imagem de referência na sessão e descreva exatamente o que você quer pegar emprestado - "siga o layout da hero e o ritmo de espaçamento desta imagem, mas use a minha paleta e as minhas fontes dos tokens". Quanto mais específica você for ("bastante espaço em branco", "tipografia como ponto focal", "um CTA marcante"), menos genérico fica o resultado. Não diga só "deixe bonito" - aponte que tipo de bonito.

Passo 5 - O loop de screenshot -> comparar -> refinar (Playwright MCP)

Este é o passo que diferencia este guia dos outros. Em vez de você mesma tirar screenshot da tela e descrever as falhas, deixe o Claude Code "ver" o resultado sozinho com o Playwright MCP: ele abre a página renderizada, tira um screenshot, compara com a referência e então corrige o código - repetindo pelo menos duas vezes.

claude mcp add playwright -- npx -y @playwright/mcp@latest

O prompt do loop:

Use Playwright MCP: open http://localhost:3000 and screenshot the hero
screen. Compare it to the reference on spacing, hierarchy, and contrast.
List the 3 biggest gaps, fix the code, screenshot again, and loop until
it matches the reference. Keep the constraints in CLAUDE.md.

A cada passagem, o modelo enxerga a diferença entre "o que ele codou" e "o que ele deveria acertar", então a qualidade sobe em vez de estagnar depois da primeira tentativa. Isso é o mais próximo de compensar a fraqueza visual de uma ferramenta que pensa primeiro em texto.

Passo 6 - Trave os design tokens e verifique a acessibilidade

Quando estiver satisfeita com a UI, trave tudo para que não "derive" nas sessões seguintes. Exporte seus design tokens para um único arquivo-fonte (por exemplo tokens.css ou um bloco no tailwind.config) e anote no CLAUDE.md que essa é a fonte da verdade - toda tela nova precisa fazer referência a ela, sem valores soltos.

Logo em seguida, faça uma verificação rápida de acessibilidade (detalhes na seção abaixo): contraste 4.5:1, focus rings visíveis, touch targets >=44px, sem rolagem horizontal e respeito ao prefers-reduced-motion. Travar os tokens somado a verificar a acessibilidade transforma um "build bonito por sorte" em um sistema repetível.

Um exemplo real: construindo uma landing page, antes/depois

Para deixar concreto, aqui vai um caso ilustrativo com uma landing page para um gerenciador de tarefas SaaS (público desenvolvedor). O processo segue exatamente os seis passos acima.

O build v1 (sem restrições): o Claude Code devolveu o clássico visual "genérico" - uma hero centralizada, fonte Inter, um gradiente roxo no botão de CTA, três feature cards com cantos arredondados idênticos. Rodava, mas dava para perceber "isso foi a IA que fez" de relance.

Depois de aplicar os passos 1-5: o design system passou para um par de fontes com mais personalidade (uma serifada para os títulos, uma sem serifa para o corpo), uma paleta neutra com uma cor de destaque quente, espaçamento mais amplo e um CTA de cor sólida em vez de gradiente. Depois de três loops do Playwright, a hierarquia ficou mais clara e os feature cards ganharam ritmos diferentes em vez de se repetir.

Sendo honesta sobre os limites: o Claude Code faz layout, espaçamento sistemático e montagem de componentes muito bem. O que eu ainda ajusto na mão são as micro-interações (tempo de animação, easing) e algumas decisões de "gosto" que as regras em texto têm dificuldade de transmitir por completo. Em outras palavras: ele dá conta de 80% da estrutura, e os últimos 20% ainda precisam de um olhar humano. Se você quiser se aprofundar na construção do frontend, leia construindo um frontend React com o Claude Code.

Verifique acessibilidade e responsividade (não pule)

A maioria dos guias só fala de "ficar bonito" e pula a acessibilidade - o que é uma pena, porque é justamente aqui que o Claude Code ajuda muito, já que ele consegue verificar com código. Rode este checklist antes de dar por concluído:

• Contraste >= 4.5:1 para texto normal (3:1 para texto grande) - conforme a WCAG 2.1 AA.
• Foco visível: todo elemento interativo (link, botão, input) tem um focus ring claro quando você navega com o teclado usando Tab.
• Touch targets >= 44x44px no mobile para os toques não errarem.
• Sem rolagem horizontal nos principais breakpoints (360px, 768px, 1024px).
• Respeite o prefers-reduced-motion: desligue ou reduza a animação para usuários sensíveis a movimento.
• HTML semântico + alt: níveis de heading corretos, imagens com texto alt, formulários com labels.

Você pode delegar direto: "audite a página inteira contra o checklist de acessibilidade no CLAUDE.md, liste as violações com a linha de código e corrija-as". Como é um trabalho baseado em regras, o Claude Code faz isso rápido e com poucos erros.

Os limites reais do Claude Code para design de UI/UX

Para você calibrar as expectativas - e esta é a parte que a maioria dos guias evita:

• Raciocínio visual complexo ainda é fraco. Ele "lê" screenshots razoavelmente bem, mas julgamentos sutis sobre equilíbrio visual e ritmo de layout ainda não estão no nível de uma pessoa designer.
• Não é pixel-perfect. Não espere uma correspondência pixel a pixel com o Figma; ele segue o espírito do design, não um projeto exato.
• Regras em texto não substituem imagens. Você pode descrever "premium" com palavras, mas uma referência visual é sempre muito mais eficaz.
• Micro-interações e animações sutis. Tempo, easing, transições suaves - essa parte geralmente precisa de ajuste manual.
• Ainda precisa de revisão humana. Ele acelera muito, mas a decisão estética final e a experiência emocional ainda são suas.

Quando você ainda precisa de uma pessoa designer de verdade? Quando está construindo uma nova identidade de marca do zero, ou quando precisa de um design system complexo com vários produtos. O Claude Code é o "braço construtor rápido e consistente", não um substituto para o pensamento de design.

Acelere: a skill de UI/UX pronta no AgentKit

O Passo 1 (gerar o design system) é a parte que dá mais trabalho se você mesma construir a skill. É aqui que uma skill pronta economiza bastante tempo: a ak-ui-ux-pro-max - a versão completa com 161 paletas, 57 pares de fontes, 99 diretrizes de UX, 25 tipos de gráfico e 10 stacks - vem junto com o AgentKit. O Claude Code chama essa skill automaticamente quando você trabalha em UI, então você não precisa reescrever regras de design do zero a cada projeto.

Uma linha para evitar confusão: o AgentKit aqui é o kit para o Claude Code (agentkit.best, usando a CLI ak), que é diferente do AgentKit da OpenAI (Agent Builder/ChatKit). Se você se importa com o kit de dev em si, veja o que tem no Engineer Kit - o Engineer Kit está atualmente por $99 (o site não lista mensalidade), com "garantia de devolução do dinheiro" e "atualizações vitalícias", segundo as informações na página.

Quer pular a construção de um design system na mão? O conjunto de skills de UI/UX do AgentKit traz a ak-ui-ux-pro-max para que o Claude Code já venha com uma paleta, fontes e diretrizes de UX sólidas de fábrica.

Perguntas frequentes (FAQ)

Qual a diferença entre o Claude Code e o Claude Design (web)?

O Claude Code é uma CLI agêntica que roda no seu terminal, escrevendo o código da UI diretamente no seu repositório, onde ele roda na hora. O Claude Design (web) tende mais para wireframe -> mockup visual no navegador. Se você está construindo um projeto React/Next de verdade, o Claude Code encaixa melhor, porque o resultado vive na sua base de código.

A UI que o Claude Code produz pode ter qualidade de "produção"?

Sim, se você aplicar o fluxo completo: um design system + restrições no CLAUDE.md + componentes decentes (shadcn) + um loop de refino + uma verificação de acessibilidade. Pule essas etapas e a UI vira genérica com facilidade. Micro-interações e a estética mais sutil ainda devem ser revisadas na mão.

Preciso saber Figma?

Não é obrigatório. Você pode trabalhar inteiramente a partir de uma descrição em texto mais uma imagem de referência. Mas, se você tiver um mockup no Figma, usá-lo como referência visual ajuda o Claude Code a seguir a estética muito melhor.

Preciso de uma skill paga?

Não necessariamente. Você pode escrever regras de design no CLAUDE.md de graça. Uma skill pronta como a ak-ui-ux-pro-max só deixa você pular a construção do design system - útil quando você trabalha em vários projetos e quer consistência, mas não é uma exigência.

Quais servidores MCP eu deveria conectar para design de UI?

Os dois que mais valem a pena: o shadcn MCP (para montar componentes decentes e acessíveis) e o Playwright MCP (para o Claude Code tirar screenshot da UI renderizada, comparar com uma referência e refinar em loop).

Como faço a UI ficar menos genérica?

Alimente-o com restrições: proíba fontes/cores padrão no CLAUDE.md, dê a ele uma referência visual específica, use o seu próprio design system em vez de deixar o modelo adivinhar e rode o loop de screenshot -> comparar -> corrigir pelo menos duas vezes.

Conclusão + próximos passos

Resumindo, o Claude Code cria UI/UX bem quando você dá restrições suficientes: gere um design system, trave regras estéticas no CLAUDE.md, conecte shadcn + Playwright via MCP, dê uma referência visual, rode o loop de refino e então trave os tokens e verifique a acessibilidade. Não espere pixel-perfect - use-o como um braço construtor rápido e consistente, e guarde as decisões de gosto para você.

Próximo passo: leia construindo um frontend React com o Claude Code para se aprofundar no código da interface e, se você quiser pular a construção de um design system na mão, considere a skill ak-ui-ux-pro-max que vem com o AgentKit (veja o box abaixo).