# 5 boas práticas de UI/UX para gerar telas com IA

> Published 2026-09-28T20:39:52.181Z on https://www.crazystack.com.br/pt/p/5-boas-praticas-de-ui-ux-para-gerar-telas-com-ia/
> Source video: https://www.youtube.com/watch?v=Qdw3Dt_-tzc

Prompt bom nasce de princípio de design nomeado. Neste guia, você vê cinco boas práticas de UI/UX que transformam um prompt genérico de frontend em uma tela que guia o usuário até a conversão, com o teste real de uma landing page gerada no Cursor e refinada no UX Pilot.

## Do prompt genérico à interface profissional

Boas práticas de UI/UX aplicadas a prompts são princípios de design citados pelo nome dentro da instrução que você dá à IA, e é isso que separa uma tela genérica de uma interface que conduz à conversão. A diferença apareceu no teste do vídeo da Fernanda Kipper: uma landing page para coletar interessados em cursos gratuitos foi gerada de duas formas, e a versão com design aplicado ficou visivelmente mais clara.

A primeira versão saiu de um prompt curto e padrão no [Cursor](https://cursor.com), editor de código com IA baseado no VS Code. O resultado funcionava, mas tinha problemas clássicos: dois botões de call to action com o mesmo peso visual, textos competindo pela atenção e dados de prova social escondidos no fim da página.

A segunda versão seguiu outro fluxo. O conceito foi criado no [UX Pilot](https://uxpilot.ai), ferramenta de design assistido por IA, exportado para o [Figma](https://www.figma.com) e implementado com o MCP do Figma junto ao [Claude Code](https://claude.com/product/claude-code), ferramenta de codificação agêntica da Anthropic que roda no terminal. A diferença não estava na ferramenta, e sim nos conceitos citados em cada prompt.

Duas dicas práticas do processo:

1. Os prompts técnicos não precisam sair do nada. Descreva o objetivo em uma IA de conversa, peça ajuda para redigir o prompt ideal, ajuste o texto e só então aplique na ferramenta de design.
2. Selecione apenas a seção que você quer alterar. Isso evita que a IA refaça partes que já estavam boas e mantém o controle nas suas mãos.

## Hierarquia visual: um só elemento pode gritar por vez

Hierarquia visual é a ordem em que o olho percorre os elementos da tela, e ela é construída com peso de fonte, tamanho, cor e posicionamento. Na versão problemática da landing page, título, formulário e dois botões disputavam atenção ao mesmo tempo, e o cérebro do usuário não sabia para onde ir.

O erro mais custoso foram dois CTAs de força igual. Clicar em "ver cursos disponíveis" é muito mais fácil do que preencher um formulário, então parte dos usuários escapa pela ação simples e as inscrições caem. Um único CTA visualmente dominante concentra a ação desejada.

Também importa onde cada informação aparece. O argumento que convence — número de cursos, horas de conteúdo, linguagens como JavaScript e TypeScript — estava escondido abaixo da dobra, depois do pedido de inscrição. A ordem certa é promessa primeiro, prova social junto, ação depois.

O vídeo mostrou o teste clássico com exemplos de texto: leia este título primeiro, depois este parágrafo, por último esta nota. O cérebro segue essa ordem sozinho, e qualquer frase colocada fora do topo da hierarquia será ignorada por parte dos leitores. Se a informação importa, ela precisa de peso de fonte, cor ou posição para entrar no caminho do olho.

## Padrões F e Z: onde posicionar cada elemento

Padrões de visualização definem o caminho que o olho faz na página, e escolher o certo orienta onde posicionar cada elemento. O padrão F, documentado pelo Nielsen Norman Group em [estudos de leitura na web](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/) publicados em 2006 e atualizados em 2017, é típico de páginas com muito texto, como blogs: o usuário escaneia as primeiras linhas e as bordas esquerdas em forma de F, e o que estiver fora desse caminho tende a ser ignorado. Nos eye-tracking do Nielsen Norman Group, os usuários leram, em média, apenas cerca de 20% do texto de uma página — o resto foi escaneado.

O padrão Z serve para páginas com mais elementos e menos texto, como landing pages e apps. O olho parte do topo à esquerda, atravessa até a direita, desce na diagonal até o canto inferior esquerdo e fecha a leitura à direita. É o padrão adequado para o caso do curso gratuito.

| | Padrão F | Padrão Z |
| --- | --- | --- |
| Ideal para | Páginas com muito texto, como blogs | Páginas com poucos textos e muitos elementos, como landing pages |
| Caminho do olho | Linhas horizontais no topo e borda esquerda, em forma de F | Topo da esquerda para a direita, diagonal até a base, base da esquerda para a direita |
| Risco | Conteúdo fora do F é ignorado | Elementos fora do Z passam despercebidos |
| No caso do vídeo | Não se aplica à landing page | Título no topo, prova social no meio, CTA no fim do Z |

Para aplicar o conceito via IA, o prompt foi direto: refatorar o layout aplicando a lei da hierarquia visual, estabelecendo o título como ponto focal com peso extra bold e contraste máximo, o formulário como foco secundário e a ação do CTA visualmente dominante. Em duas iterações, a IA removeu o segundo botão e reduziu o texto que gritava demais.

Um detalhe de método: quando a página antiga foi anexada como referência de imagem, a IA do UX Pilot copiou as cores e fontes fracas do original. Na rodada que funcionou, a referência saiu e o prompt trabalhou só com o princípio de design. Anexar o resultado ruim como contexto tende a reproduzir o resultado ruim.

## Lei da proximidade de Gestalt

A lei da proximidade, um dos princípios de Gestalt, diz que elementos próximos são percebidos como um grupo. Três fileiras de bolinhas com o mesmo espaçamento parecem uma coisa só; afaste uma delas e o cérebro passa a enxergar dois grupos. Cores diferentes produzem o mesmo efeito de separação.

Na prática, um argumento só "cola" no dado que o sustenta se estiver visualmente perto dele. Na landing page, os números — 150 cursos gratuitos e mais de 2.000 horas de conteúdo — foram trazidos para junto do título "aprenda programação de graça", formando uma única unidade de valor. Separados, ficavam soltos e sem sentido.

O prompt que materializou o princípio pediu duas coisas: agrupar visualmente as estatísticas de prova social logo abaixo do título principal, reduzindo o gap entre elas, e aumentar o espaço entre esse bloco e o formulário, separando a promessa da ação. Espaço em branco separa tanto quanto cor ou borda.

O logo da Unilever é o exemplo clássico do princípio fora de interfaces: cada desenho interno (uma cenoura, uma flor, peixes) existe sozinho, mas o conjunto forma a letra U. Agrupamento é leitura instantânea, sem esforço do usuário.

## Affordance: o elemento explica como se usa

Affordance é a propriedade visual ou interativa de um elemento que sugere como ele deve ser utilizado, sem curva de aprendizado. Um botão com relevo pede clique, um switch pede deslize, um campo com Cursor piscando pede digitação, um ícone de microfone pede voz. O conceito vale para telas e para objetos físicos, como o botão de um controle ou o giro do termostato.

Nas interfaces geradas por IA, os escapes mais comuns são pequenos e irritantes: botão sem Cursor pointer, link sem sublinhado, ausência de hover. Um Cursor pointer no botão, um glow ao passar o mouse e o sublinhado em links custam poucas linhas de CSS e eliminam a dúvida sobre o que é clicável.

Um detalhe positivo do caso estudado foi a seta no botão de inscrição. A seta não muda a affordance do botão, que já indica clique; ela comunica continuidade — preencha o formulário e você terá acesso aos cursos. Pequenos sinais assim carregam significado além da usabilidade básica.

## Componentes como máquinas de estado

Tratar cada componente interativo como uma máquina de estado significa mapear em que situações ele muda de aparência, como na teoria vista na faculdade: um estado inicial, transições disparadas por interação do usuário ou por eventos do sistema, e estados finais.

O formulário deixa o padrão claro:

1. Estado inicial: campos incompletos, botão desabilitado.
2. Campos preenchidos: botão habilitado, campos indicam que não falta nada.
3. Usuário envia: estado de loading.
4. Do loading saem dois caminhos exclusivos: erro (mensagem na tela) ou sucesso (confirmação visual).

O erro mais comum nas telas geradas por IA é esquecer o loading. Você clica, nada acontece, e o conteúdo surge do nada. Outro defeito frequente é um componente ocupar dois estados incompatíveis ao mesmo tempo, exibindo erro e sucesso juntos. Se a máquina de estados tivesse sido desenhada, essas transições seriam mutuamente exclusivas.

Você não precisa diagramar cada componente simples, mas pedir à IA que preveja loading, erro e sucesso já resolve a maior parte dos casos. Em componentes complexos, com estados como idle, carregando e parcialmente preenchido, o mapeamento minucioso vale a pena porque cada estado bloqueia algo diferente na tela.

## Wireframes antes do design final

Começar pelo wireframe troca a pressa pelo acerto: o modo de wireframe do UX Pilot gera apenas blocos e posicionamento, sem cores nem tipografia, e é muito mais barato corrigir estrutura nessa fase do que depois do design final. Você valida o fluxo — o que vem primeiro, o que agrupa, onde fica o CTA — e só então parte para o visual.

O fluxo completo recomendado:

1. Wireframe para validar a estrutura e o posicionamento.
2. Design final para a camada visual.
3. Exportação para o Figma.
4. Conexão do MCP do Figma com a IA de código de sua preferência para implementar.

Esse caminho preserva as decisões de design tomadas no início, em vez de deixá-las a cargo da sorte do primeiro prompt. O UX Pilot tem créditos gratuitos para testar wireframes, telas únicas e fluxos completos antes de assinar o plano pago.

A mesma sequência de dicas circula em tutoriais brasileiros de frontend, como o vídeo da Fernanda Kipper e conteúdos no estilo do Dev Doido do canal do youtube — o material de origem importa menos do que aplicar os conceitos no seu próximo projeto. Para variar as fontes de estudo, o agregador [crazystack.com.br](https://crazystack.com.br) reúne materiais de desenvolvimento.

## Perguntas frequentes

### Preciso ser designer para usar esses conceitos em prompts?

Não. Os cinco princípios — hierarquia visual, proximidade, affordance, máquinas de estado e wireframes — têm nomes técnicos que a IA reconhece. Citar o nome do conceito no prompt já eleva o resultado, mesmo sem formação em design.

### Qual ferramenta usar para gerar a interface?

O fluxo mostrado usa UX Pilot para o conceito, Figma para o design e Claude Code ou Cursor para implementar via MCP do Figma. O ponto central é que a ferramenta importa menos que os conceitos citados no prompt.

### Por que dois botões de CTA reduzem a conversão?

Porque eles dividem o peso visual e o usuário escolhe a ação mais fácil, que costuma ser navegar em vez de preencher o formulário. Um único CTA dominante concentra a ação desejada.

### O que é affordance em uma interface?

É a propriedade visual que indica como um elemento deve ser usado: botão que pede clique, switch que pede deslize, campo que pede digitação. Sem ela, o usuário precisa aprender por tentativa e erro.

### Vale anexar o print da tela antiga como referência no prompt?

Só se a tela antiga tiver qualidade. No teste, anexar o layout ruim fez a IA copiar cores e fontes fracas. Sem a referência, o prompt trabalhou só com o princípio de design e o resultado melhorou.

## Do vídeo para o artigo: transforme seu conteúdo

O que tornou este material útil foi a sequência: um problema visível, um princípio de design e o prompt exato que aplica o princípio. Se você gravou vídeos com esse tipo de conhecimento — aulas, reviews de ferramentas, opiniões técnicas —, esse conteúdo está preso num formato que busca e cita pouco.

Com o [Skala Blog](https://skalablog.com), você cola a URL do vídeo do YouTube, a transcrição é gerada e vira um artigo estruturado como este, pronto para revisão e publicação. O conhecimento que você explicou em 25 minutos de vídeo passa a existir também em texto pesquisável.

[Source video](https://www.youtube.com/watch?v=Qdw3Dt_-tzc)