Como criar um app bonito com IA

Para obter de uma IA um app com boa aparência, pare de pedir que ela “deixe bonito” e comece a dar o que um designer precisaria: duas ou três referências de que você gosta, uma direção de design nomeada e regras concretas para tipografia, cor e espaçamento. Depois, construa uma tela, ajuste até ficar certa e peça à IA que aplique o mesmo sistema em todo o resto. Grande parte do “visual de IA” vem de prompts vagos que produzem respostas medianas; uma entrada específica gera um design específico.

Por que os designs de IA parecem genéricos

Peça a uma IA “um dashboard SaaS moderno e limpo” e ela vai entregar o meio estatístico de todos os dashboards que já viu: a mesma fonte sans-serif, um gradiente roxo para azul, cartões arredondados com sombras suaves, ícones parecidos com emojis em círculos e um hero centralizado dizendo “Seu fluxo de trabalho, simplificado”. Nenhuma dessas escolhas está errada isoladamente. O problema é que nenhuma foi escolhida para o seu produto.

Bom design é, sobretudo, uma sequência de decisões. Seu trabalho é tomar o punhado de decisões que dão personalidade ao app e deixar a IA fazer as milhares de pequenas decisões de forma consistente.

Passo 1: reúna referências antes de pedir

Gaste vinte minutos reunindo duas a quatro referências — apps ou sites cujo visual combine com o seu produto. Boas fontes são produtos que o seu público já usa, galerias de design e sites de empresas de áreas próximas.

Para cada uma, anote o que você gosta, em palavras simples:

• “Muito espaço em branco, conteúdo em uma coluna estreita, rótulos pequenos em cinza acima de números grandes.”
• “Tabelas densas com divisórias finas, sem sombras nos cartões, uma cor de destaque para ações.”
• “Títulos grandes com serifa, fundo off-white quente, fotografia em vez de ilustrações.”

Depois, passe essas descrições para a IA e anexe capturas de tela se a sua ferramenta aceitar imagens. Inspire-se nas qualidades, não no produto: copiar o layout, a marca ou o texto de outra empresa é um risco jurídico e de credibilidade.

Passo 2: escolha uma direção de design e dê um nome a ela

Uma direção é uma descrição curta do sentimento geral. Ela dá à IA um filtro para cada decisão que tomar. Algumas que funcionam bem:

Coloque isso no primeiro prompt, junto com quem é o público do app:

Crie um app de agendamento para um estúdio de yoga independente. Direção de design: calma e minimalista, como um horário impresso de estúdio. Fundo off-white quente, texto quase preto, e um verde-sálvia discreto como única cor de destaque para botões e estados selecionados. Uma serifa para os títulos e uma sans-serif limpa para o corpo do texto. Espaçamento generoso, sem gradientes, sem sombras, sem emojis. Priorize o celular.

Passo 3: defina as regras — tipografia, cor e espaçamento

Esses três fatores carregam a maior parte da qualidade visual. Ser explícito sobre eles é a melhoria mais importante que você pode fazer.

Tipografia

• Uma ou duas famílias tipográficas. Uma para títulos e uma para o corpo do texto, ou uma família em vários pesos.
• Uma escala tipográfica. Poucos tamanhos usados de forma consistente — por exemplo 14, 16, 20, 28 e 40 px — em vez do que cada componente escolher.
• Texto de corpo legível. Por volta de 16 px na web, altura de linha de cerca de 1,5 e largura de linha de cerca de 60 a 75 caracteres para textos longos.
• Hierarquia por peso e tamanho, não por cor. Títulos mais grossos e maiores; textos secundários menores e em cinza mais suave.

Cor

• Predominantemente neutras. Fundos, superfícies, bordas e tons de cinza do texto fazem a maior parte do trabalho.
• Uma cor de destaque para ações e estados selecionados. Uma segunda só se tiver uma função clara.
• Cores semânticas para sucesso, alerta e erro — e usadas apenas para isso.
• Contraste. O WCAG 2 pede uma razão de contraste de pelo menos 4,5:1 para texto de corpo normal e 3:1 para texto grande. Texto cinza-claro sobre branco costuma falhar; peça à IA para verificar.
• Modo escuro, se você quiser, pensado de forma deliberada, e não apenas invertido.

Espaçamento e layout

• Uma escala de espaçamento, como 4, 8, 12, 16, 24, 32, 48, 64 px. Tudo se encaixa nela.
• Alinhamento. As bordas se alinham; o conteúdo fica em uma grade ou em uma coluna de largura máxima consistente.
• Proximidade. Itens relacionados ficam próximos, itens não relacionados ficam mais afastados. Essa única regra corrige a maioria das telas poluídas.
• Menos contêineres. Nem tudo precisa de um cartão. Bordas, divisórias e espaço em branco costumam agrupar o conteúdo de forma mais discreta.

Um prompt que configura o sistema de uma vez:

Antes de criar mais telas, configure um pequeno sistema de design e use-o em todo lugar: escala tipográfica de 14/16/20/28/40 px, altura de linha do corpo 1,5, escala de espaçamento de 4/8/12/16/24/32/48 px, neutras do quase branco ao quase preto, uma cor de destaque (#3F6B5A) apenas para ações principais, e vermelho somente para erros. Botões, campos e cartões devem compartilhar o mesmo raio de borda. Verifique se todo o texto atende ao contraste WCAG AA.

Se você trabalha em um criador que entende código, isso geralmente vira tokens de design — variáveis CSS ou um tema do Tailwind — o que significa que mudanças futuras acontecem em um único lugar.

Passo 4: construa primeiro uma tela com cuidado

Não gere doze telas e depois tente corrigir todas. Escolha a tela que os usuários mais veem — muitas vezes o dashboard ou a lista principal — e itere até ficar certa. Depois:

Use o dashboard como referência para todas as outras páginas: mesmo cabeçalho, espaçamento, tamanhos de texto, estilos de botão e estilo de tabela. Atualize as páginas Configurações e Agendamentos para combinar.

Uma tela de referência finalizada comunica o seu gosto muito melhor do que qualquer adjetivo.

Passo 5: itere com pedidos específicos e pequenos

O feedback para uma IA funciona como o feedback para um designer júnior: específico, uma área por vez e claro sobre o que manter.

Sempre acrescente o que manter — “mantenha todas as rotas, textos e funcionalidades iguais” — para que uma passada visual não remova funcionalidades silenciosamente. E confira cada mudança em uma tela do tamanho de celular antes de pedir a próxima; veja como criar um app web compatível com celular para entender como é um bom resultado em telas pequenas.

Passo 6: os detalhes que separam o bom do genérico

Depois que a estrutura está certa, estes pequenos detalhes deixam um app com cara de acabado:

• Estados vazios. O que um usuário novo vê sem dados: uma breve explicação e uma ação clara, e não uma tabela em branco.
• Estados de carregamento. Esqueletos com a forma do conteúdo, e não spinners em todo lugar.
• Estados de erro. Mensagens em linguagem simples ao lado do campo que causou o problema.
• Estados de hover, foco e pressionado em cada elemento interativo — os anéis de foco importam para quem usa o teclado.
• Conteúdo real. Substitua “Lorem ipsum” e “João da Silva” por textos e dados realistas; conteúdo fictício esconde problemas de layout.
• Ícones de um mesmo conjunto, em um ou dois tamanhos, com espessura de traço consistente.
• Imagens com propósito. Fotos reais do seu produto, local ou pessoas vencem o banco de imagens genérico. Se usar imagens de banco ou geradas, mantenha um estilo consistente.
• Textos. Rótulos curtos e específicos (“Reservar aula”, e não “Enviar”) ajudam a qualidade percebida tanto quanto qualquer escolha de cor.

Erros comuns

• Redesenhar tudo em um único prompt. Reescritas grandes introduzem regressões. Vá página por página.
• Cores de destaque demais. Se tudo está destacado, nada está.
• Centralizar tudo. Texto centralizado é difícil de ler além de um título; alinhe à esquerda a maior parte do conteúdo.
• Texto minúsculo e de baixo contraste que parece elegante em um monitor grande e é ilegível em um celular na luz do sol.
• Decoração no lugar de hierarquia. Gradientes e sombras não consertam uma tela em que a ação mais importante não é óbvia.
• Ignorar a landing page. Para muitos produtos, ela é a primeira impressão; veja como criar uma landing page que converte.

Para mais padrões de prompt além de design, leia como escrever prompts para criadores de apps com IA. Se o seu trabalho é o próprio produto — um portfólio de design ou de fotografia — como criar um site de portfólio aprofunda a apresentação.

Criando design com a Mythex

Na Mythex, você descreve o design no chat, vê o resultado na prévia ao vivo e confere a moldura do tamanho de celular antes da próxima mudança. A documentação tem padrões curtos para isso: prompts de design e UI, sobre como nomear o que mudar e o que manter, e redesenhe sua interface, para renovar uma página por vez sem perder funcionalidades. A Mythex também pode buscar fotos de banco ou gerar uma imagem no chat — uma imagem de destaque, um plano de fundo, uma imagem de compartilhamento — e colocá-la no app quando você pedir. Se uma etapa der errado, volte ao checkpoint anterior a ela. Veja os modelos se preferir começar de um design existente e ajustá-lo.

Perguntas