Como Desenhar uma App Bonita com IA

Para obter uma app bonita da IA, deixe de lhe pedir que "a torne bonita" e comece a dar-lhe o que um designer pediria: duas ou três referências de que goste, uma direção visual com nome e regras concretas para tipografia, cor e espaçamento. Depois, crie um ecrã, corrija-o até ficar certo e peça à IA que aplique o mesmo sistema ao resto. A maior parte do "aspeto de IA" vem de pedidos vagos que produzem respostas médias; um input específico produz um design específico.

Porque é que os designs da IA parecem genéricos

Peça à IA "um dashboard SaaS moderno e limpo" e ela dar-lhe-á o meio estatístico de todos os dashboards que já viu: a mesma fonte sans-serif, um gradiente roxo-azul, cartões arredondados com sombras suaves, ícones em círculos com ar de emoji e um cabeçalho centrado a dizer "O seu fluxo de trabalho, simplificado". Nenhuma destas escolhas está errada por si só. O problema é que nenhuma foi escolhida para o seu produto.

Um bom design é sobretudo um conjunto de decisões. O seu trabalho é tomar o pequeno número de decisões que dão carácter à app e deixar a IA tomar as milhares de pequenas decisões de forma consistente.

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

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

Para cada uma, escreva o que gosta, em palavras simples:

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

Depois, passe estas descrições à IA e anexe capturas de ecrã 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 por inteiro é um risco legal e de credibilidade.

Passo 2: escolha uma direção visual e dê-lhe um nome

Uma direção visual é uma descrição curta do ambiente. Dá à IA um filtro para cada decisão que toma. Algumas que funcionam bem:

Coloque-a no primeiro pedido, juntamente com quem é a app:

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

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

Estes três elementos garantem a maior parte da qualidade visual. Ser explícito sobre eles é a melhoria mais importante que pode fazer.

Tipografia

• Uma ou duas famílias tipográficas. Uma fonte para os títulos e uma para o corpo de texto, ou uma família em vários pesos.
• Uma escala tipográfica. Um conjunto pequeno de tamanhos usado de forma consistente — por exemplo 14, 16, 20, 28 e 40 px — em vez de cada componente escolher o seu.
• Texto de corpo legível. Cerca de 16 px na web, uma altura de linha de aproximadamente 1,5 e linhas com cerca de 60 a 75 caracteres em textos longos.
• Hierarquia através do peso e do tamanho, não da cor. Títulos mais grossos e maiores; texto secundário mais pequeno e num cinzento mais suave.

Cor

• Sobretudo neutros. Fundos, superfícies, bordas e cinzentos do texto fazem a maior parte do trabalho.
• Uma cor de acento para ações e estados selecionados. Uma segunda só se tiver uma função clara.
• Cores semânticas para sucesso, aviso e erro — e usadas só para isso.
• Contraste. A 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 cinzento claro sobre branco falha muitas vezes; peça à IA que verifique.
• Modo escuro, se o quiser, desenhado de forma deliberada e não simplesmente invertido.

Espaçamento e layout

• Uma escala de espaçamento como 4, 8, 12, 16, 24, 32, 48, 64 px. Tudo se ajusta a ela.
• Alinhamento. As margens alinham-se; o conteúdo fica numa grelha ou numa coluna de largura máxima consistente.
• Proximidade. Coisas relacionadas perto umas das outras, coisas não relacionadas mais afastadas. Esta regra corrige a maioria dos ecrãs sobrecarregados.
• Menos contentores. Nem tudo precisa de um cartão. Bordas, linhas divisórias e espaço em branco agrupam o conteúdo de forma mais discreta.

Um pedido que monta o sistema uma vez:

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

Se trabalhar com um construtor que lida com código, isto costuma tornar-se em tokens de design — variáveis CSS ou um tema Tailwind — o que significa que as alterações futuras acontecem num único sítio.

Passo 4: crie primeiro um ecrã como deve ser

Não gere doze ecrãs e depois tente corrigi-los todos. Escolha o ecrã que os utilizadores veem mais — muitas vezes o dashboard ou a lista principal — e itere até ficar certo. Depois:

Use o dashboard como referência para todas as outras páginas: o mesmo cabeçalho, espaçamento, tamanhos de texto, estilos de botões e estilo de tabelas. Atualize as páginas de Definições e Marcações para corresponderem.

Um ecrã de referência acabado comunica o seu gosto muito melhor do que qualquer adjetivo.

Passo 5: itere com pedidos específicos e pequenos

O feedback à IA funciona como o feedback a um designer júnior: específico, uma área de cada vez e claro sobre o que se mantém.

Acrescente sempre o que se deve manter — "mantenha todas as rotas, textos e funcionalidades iguais" — para que uma passagem visual não remova funcionalidades em silêncio. E verifique cada alteração num ecrã do tamanho de um telemóvel antes de pedir a seguinte; veja como criar uma app web otimizada para telemóvel para perceber o que é um bom resultado em ecrãs pequenos.

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

Depois de a estrutura estar certa, estas pequenas coisas fazem uma app parecer acabada:

• Estados vazios. O que um novo utilizador vê sem dados: uma explicação curta 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 roletas em todo o lado.
• Estados de erro. Mensagens em linguagem simples junto ao campo que causou o problema.
• Estados de passagem do rato, foco e pressionado em todos os elementos interativos — os anéis de foco são importantes para quem usa o teclado.
• Conteúdo real. Substitua "Lorem ipsum" e "João Silva" por texto e dados realistas; o conteúdo de exemplo esconde problemas de layout.
• Ícones de um único conjunto, com um ou dois tamanhos e espessura de traço consistente.
• Imagens com um propósito. Fotografias reais do seu produto, do seu espaço ou das suas pessoas são melhores do que stock genérico. Quando usar imagens de stock ou geradas, mantenha um estilo consistente.
• Texto. Rótulos curtos e específicos ("Reservar aula", e não "Enviar") contribuem tanto para a qualidade percebida como qualquer escolha de cor.

Erros comuns

• Redesenhar tudo num único pedido. Reescritas grandes introduzem regressões. Avance página a página.
• Demasiadas cores de acento. Se tudo está destacado, nada está.
• Centrar tudo. O texto centrado é difícil de ler para além de um título; alinhe a maior parte do conteúdo à esquerda.
• Texto minúsculo e de baixo contraste que parece elegante num monitor grande e é ilegível num telemóvel ao sol.
• Decoração acima da hierarquia. Gradientes e sombras não resolvem um ecrã em que a ação mais importante não é óbvia.
• Ignorar a página inicial. Para muitos produtos é a primeira impressão; veja como criar uma landing page que converte.

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

Desenhar com a Mythex

Na Mythex descreve o design no chat, vê-o na pré-visualização em direto e verifica a moldura do tamanho de telemóvel antes da alteração seguinte. A documentação tem padrões curtos para isto: pedidos de design e UI sobre como indicar o que mudar e o que manter, e redesenhar a sua UI para renovar uma página de cada vez sem perder funcionalidades. A Mythex também pode pesquisar fotos de stock ou gerar uma imagem no chat — uma imagem de destaque, um fundo, uma imagem de partilha — e colocá-la na app quando lho pedir. Se uma passagem correr mal, volte ao checkpoint anterior. Veja os modelos se preferir começar a partir de um design existente e ajustá-lo.

Perguntas