Guias

Como pedir uma interface bonita para o Claude Code e o Cursor

Por Thales Andrades MachadoPublicado em 23 de outubro de 2026Atualizado em 23 de outubro de 202610 min de leitura

Em resumo

Para conseguir uma interface bonita no Claude Code ou no Cursor, descreva o efeito pelo que se vê e pelo que o dispara, anexe uma captura de referência, passe os tokens de design e liste critérios de qualidade. Depois peça uma captura do resultado, compare com a referência e corrija uma diferença por vez.

Pedir "deixa mais bonito" ao Claude Code ou ao Cursor costuma devolver a mesma interface de sempre. O assistente não tem como adivinhar a imagem que você tem na cabeça, então escolhe o padrão mais provável. A documentação do Claude Code usa exatamente esse caso como exemplo do que evitar: em vez de pedir para deixar o painel com visual mais bonito, ela sugere colar a captura do design, pedir a implementação, pedir uma captura do resultado e mandar listar e corrigir as diferenças.

Um bom pedido de interface tem cinco partes: o efeito descrito em termos visuais, referências, tokens de design, critérios de qualidade e um plano de iteração. Este guia mostra como escrever cada uma, com exemplos prontos para adaptar.

Por que "deixa mais bonito" não funciona?

A orientação de prompts da Anthropic é direta: o Claude responde bem a instruções claras e explícitas, e, se você quer mais do que a tarefa exige, precisa pedir, em vez de esperar que o modelo deduza. A página sugere pensar no modelo como um profissional brilhante e recém-chegado, que ainda não conhece as normas e o jeito de trabalhar da sua equipe. Na mesma documentação, a seção sobre front-end avisa que, sem orientação, os modelos tendem a padrões genéricos.

"Bonito" é uma palavra que cada pessoa preenche com uma imagem diferente. O que a IA consegue executar são decisões: qual cor, qual tamanho, qual movimento, em que momento e com que duração. Cada adjetivo que você troca por uma decisão aproxima o resultado do que você imaginou.

Explicar o motivo também ajuda. A documentação da Anthropic observa que dar contexto e motivação a uma instrução permite que o modelo generalize a partir da explicação. "Use contraste alto porque muita gente abre o app no celular, na rua" ensina mais do que "use contraste alto".

Como descrever um efeito visual sem saber o nome dele?

Você não precisa saber que um efeito se chama "glassmorphism" para pedir um. Precisa descrever seis coisas:

O que aparece: forma, cor, tamanho e posição na tela.
Como se move: direção, velocidade e se o movimento é contínuo ou acontece uma vez.
O que dispara: entrada na tela, rolagem, cursor, clique, toque ou tempo.
Quanto dura: o tempo da animação e se ela termina, volta ou se repete.
Como fica no celular: o que acontece sem cursor e em telas estreitas.
Como fica com movimento reduzido: a versão estática ou mais calma.

Veja a diferença na prática:

Pedido vago	Pedido específico
"Um menu bonito"	"Uma barra de ícones fixa no rodapé; o ícone mais perto do cursor cresce e os vizinhos crescem menos, com movimento de mola; no celular, os ícones ficam em tamanho fixo"
"Um card que chame atenção"	"Um feixe de luz percorre a borda do cartão do plano recomendado, numa volta a cada 6 segundos, e um brilho suave segue o cursor dentro do cartão"
"Texto com animação"	"No manifesto, cada palavra começa desfocada e quase transparente e fica nítida conforme a pessoa rola a página"
"Uma transição legal"	"Ao clicar num card da galeria, ele se expande até virar a página de detalhe, e a imagem do card vira a imagem principal da nova página"

Pedidos como os da direita descrevem efeitos que o catálogo do THM Componentes já traz prontos, como Bússola, Pavio, Cadência e Translado. Se você conhece o nome técnico, use, mas mantenha a descrição: o mesmo nome pode designar comportamentos bem diferentes.

Que referências mandar para a IA?

Uma imagem resolve em segundos o que um parágrafo não resolve, e os dois assistentes aceitam imagens no chat. No Claude Code, você arrasta a imagem para a janela, cola com Ctrl+V (Alt+V no Windows e no WSL) ou informa o caminho do arquivo, e pode pedir coisas como gerar o CSS que reproduz um mockup. No Cursor, a documentação do Agent recomenda anexar imagens para dar contexto visual em trabalho de interface e implementação de design, arrastando o arquivo para o chat ou colando da área de transferência.

Três cuidados deixam a referência útil:

Diga o que copiar. "Use a hierarquia e o espaçamento desta captura, não as cores" evita que a IA reproduza a marca de outra empresa.
Mande o estado que importa. Se o detalhe está no hover, no foco ou no tema escuro, mande a captura desse estado.
Prefira poucas referências. Duas ou três imagens, cada uma com um papel definido, orientam mais do que um mural de dez telas sem explicação.

As referências também podem estar no próprio projeto. No Claude Code, o @ inclui um arquivo na conversa, como @src/components/PlanCard.vue; no Cursor, as menções com @ indicam ao Agent os arquivos relevantes. A documentação do Claude Code recomenda apontar padrões que já existem no código para a IA seguir, e um componente que já está do jeito que você quer é a referência mais fiel que você pode dar.

Como passar tokens de design para a IA?

Tokens são o vocabulário visual do projeto. O formato publicado pelo grupo comunitário de design tokens do W3C define um token como uma informação associada a um nome legível por pessoas, no mínimo um par de nome e valor. Num projeto Vue ou Nuxt com Tailwind CSS v4, os tokens ficam no bloco @theme, que gera as classes utilitárias e também as variáveis CSS correspondentes:

@import "tailwindcss";
@theme {
  --color-brand-600: oklch(0.55 0.19 262);
  --color-ink: oklch(0.21 0.02 262);
  --color-surface: oklch(0.985 0.004 262);
  --font-display: "Sua Fonte de Títulos", serif;
  --radius-card: 1rem;
}

Com o bloco pronto, o pedido fica curto e preciso: "fundo bg-surface, texto text-ink, destaque brand-600, títulos em font-display e cartões com rounded-card". Para não repetir isso em toda conversa, registre as regras num arquivo que a IA lê sozinha:

Claude Code: o CLAUDE.md, que o Claude lê no início de cada conversa. Mantenha o arquivo curto; a própria documentação avisa que um CLAUDE.md inchado faz o Claude ignorar as instruções que importam.
Cursor: as regras do projeto em .cursor/rules, em arquivos .mdc. Uma regra pode valer sempre, ser escolhida pelo Agent conforme a descrição, valer para arquivos específicos ou ser chamada manualmente com uma menção @.

Quais critérios de qualidade incluir no pedido?

Critério de qualidade é o que transforma "ficou bom?" numa pergunta com resposta. Inclua os que valem para o seu projeto:

Critério	Como escrever no pedido
Responsivo	"Funciona de 360 px a 1440 px; no celular, os cards ficam em uma coluna"
Toque	"Alvos de toque com pelo menos 24 por 24 px", como pede o critério 2.5.8 das WCAG 2.2
Contraste	"Texto com contraste mínimo de 4,5:1", o nível AA do critério 1.4.3
Teclado	"Tudo operável por teclado, com foco visível"
Movimento	"Com prefers-reduced-motion, a animação vira um fade curto ou fica estática"
Desempenho	"Sem piorar LCP, INP e CLS; efeito pesado carregado sob demanda"
Tema	"Só tokens do @theme; funciona no tema claro e no escuro"
Estados	"Hover, foco, desabilitado, carregando, vazio e erro"

Não é preciso repetir todos em todo pedido. Deixe os permanentes no CLAUDE.md ou nas regras do Cursor e, no pedido, coloque só os específicos daquela tela. O prefers-reduced-motion, por exemplo, é uma media query que detecta quando a pessoa ativou no aparelho a opção de reduzir movimentos não essenciais; vale para todo efeito, então merece estar nas regras fixas.

Como iterar até a interface ficar boa?

A primeira versão raramente é a final, e tudo bem. O que faz diferença é o ciclo de correção:

Planeje as mudanças grandes. No Claude Code, o modo de planejamento, ativado com Shift+Tab, faz o Claude ler os arquivos e propor um plano antes de editar. Use quando a mudança envolve várias telas; se dá para descrever a mudança em uma frase, peça direto.
Peça evidência visual. Uma captura do resultado no celular e no computador, comparada com a referência, com a lista de diferenças.
Corrija uma coisa por vez. "Aumente o espaço entre os grupos do formulário para o próximo token da escala" é verificável; "deixe o formulário mais bonito" não é.
Volte atrás sem medo. No Claude Code, Esc interrompe a ação em andamento, e Esc duas vezes ou /rewind restaura a conversa e o código de um ponto anterior. Esses pontos de restauração só registram as mudanças feitas pelas ferramentas de edição do Claude, então mantenha o Git como rede de segurança.
Recomece quando travar. A documentação do Claude Code recomenda: se você corrigiu a mesma coisa mais de duas vezes na mesma sessão, use /clear e comece de novo com um pedido mais específico, que já inclua o que você aprendeu.

Como fica um pedido completo?

Junte as partes num pedido só e adapte ao seu caso:

Contexto: projeto Nuxt com Tailwind CSS v4. Os tokens estão no bloco @theme e as regras visuais, no CLAUDE.md.
Tarefa: criar a seção de planos da página inicial, com três cartões lado a lado no computador e em coluna no celular. O plano do meio é o recomendado.
Efeito: no cartão recomendado, um feixe de luz percorre a borda numa volta a cada 6 segundos e um brilho suave segue o cursor dentro do cartão. Nos outros, só uma elevação leve no hover.
Referência: a captura anexada. Copie a hierarquia e o espaçamento, não as cores.
Critérios: apenas tokens do @theme; contraste mínimo de 4,5:1; foco visível; alvos de toque de pelo menos 24 por 24 px; com prefers-reduced-motion, o feixe fica parado; sem piorar LCP, INP e CLS.
Verificação: ao terminar, tire capturas em 390 px e em 1440 px, compare com a referência, liste as diferenças e corrija uma por vez. Diga quais arquivos você alterou.

Onde o THM Componentes entra nesse processo?

Descrever um efeito complexo do zero é a parte mais difícil do pedido. No THM Componentes, cada um dos 268 componentes para Vue 3 e Nuxt vem com um prompt pronto para Claude Code e Cursor, então você parte de uma descrição completa e acrescenta só o contexto do seu projeto: onde usar, quais tokens aplicar e quais critérios conferir. Efeitos como Miragem, uma lente de vidro líquido com refração que segue o cursor, ou Tombo, etiquetas que caem, empilham e podem ser arrastadas e arremessadas, são difíceis de descrever com precisão; com o prompt pronto, o trabalho vira ajuste fino. O suporte oficial é para Vue 3 e Nuxt; em React, a IA precisa converter o código, e o resultado pede revisão.

Para o método completo de acabamento, veja Como deixar um app feito com IA com visual profissional. Para os erros que mais aparecem e a correção de cada um, veja O que é vibe coding e onde o design costuma falhar.