Módulo 3 · Aula 1 · Aula grátis
Por que todo app de IA parece igual
Ontem eu pedi uma tela de preços para o Antigravity. Uma frase só: "cria uma tela de preços bonita para um app de assinatura".
Veio isto:
Não está feia. Esse é o problema.
Olha de novo comigo. Fundo com gradiente roxo virando azul. Três cards iguais, o do meio um pouco maior, com a tarja "Mais popular". Sombra grande embaixo de cada card. Canto arredondado em tudo, no mesmo tamanho. Emoji no lugar do ícone. E a frase "Simples, rápido e poderoso".
Você já viu essa tela. Não uma vez. Umas duzentas.
Por que isso acontece
A IA não tem gosto. Ela tem média.
Quando você pede "uma tela de preços bonita", ela responde com o que mais apareceu no material que ela leu. Template de landing page, biblioteca de componente pronta, página de SaaS de 2021. O que volta é a média da internet.
E tem uma segunda parte, que é a que importa.
Uma tela simples como essa tem umas quarenta decisões dentro dela. Quanto de espaço entre o título e o subtítulo. Qual o raio do canto do botão. Se a sombra existe. Qual fonte, qual peso, qual tamanho. Onde entra a cor forte e onde ela não entra.
Você tomou zero dessas decisões. A IA tomou as quarenta.
A regra
Cara de IA não é falta de talento. É falta de decisão.
Decida cinco coisas antes de pedir a tela:
- A escala de espaço. Uma lista fixa: 4, 8, 12, 16, 24, 32, 48, 64. Nada fora dela.
- O par de fontes. Uma para título, uma para texto. Duas no máximo.
- Uma cor de acento com papel definido. Só na ação principal, e mais nada.
- Os raios de canto. Um para caixa grande, outro para botão e campo. Dois ao todo.
- O peso das superfícies. Ou borda de 1px, ou sombra leve. Escolha um e repita.
Cinco decisões. O resto a IA preenche sem estragar, porque o que estraga é justamente o que você não decidiu.
Os oito sinais de cara de IA
Estes são os oito que eu procuro primeiro em qualquer tela. Vale para tela gerada por IA e vale para tela feita à mão com pressa.
1. O gradiente que não resolve nada. Roxo virando azul no fundo, sem motivo. Gradiente é ferramenta para criar profundidade ou separar seção. Quando ele só existe para dar um charme, ele entrega que ninguém decidiu o fundo.
Conserto: fundo de uma cor só. Se a seção precisa se separar, mude a cor da superfície.
2. A sombra de 40px. Card flutuando com sombra grande e difusa. Parece que a tela toda está levitando.
Conserto: borda de 1px numa cor próxima do fundo. Se precisar de sombra, blur baixo e opacidade baixa.
3. O espaçamento sorteado. 13px aqui, 18px ali, 22px acolá. Ninguém percebe cada valor, mas todo mundo sente a tela desalinhada.
Conserto: a escala de espaço da regra acima. Todo valor sai dela.
4. O canto arredondado em tudo. Botão, card, campo, foto de perfil e aviso com o mesmo canto redondo. Some a diferença entre o que é caixa e o que é ação.
Conserto: dois raios. Um para superfície grande, um menor para controle.
5. O emoji no lugar do ícone. Foguete no card de plano, estrelinha no botão, cadeado no campo de senha. O emoji muda de desenho em cada sistema e não combina com nada ao redor.
Conserto: uma família de ícones só, com a mesma espessura de traço.
6. Os três cards iguais lado a lado. Ícone em cima, título, duas linhas de texto. Três vezes. É o formato mais gerado do mundo.
Conserto: pergunte qual dos três é o mais importante. Se nenhum for, talvez seja uma lista.
7. A fonte que veio de fábrica. Uma fonte só, em oito tamanhos parecidos. Ninguém sabe o que ler primeiro.
Conserto: quatro ou cinco tamanhos, com salto visível. Peso resolve mais que tamanho.
8. O texto que não diz nada. "Simples, rápido e poderoso." "Transforme sua rotina."
Conserto: se o concorrente pode colar a mesma frase no site dele, ela não serve.
O conserto, passo a passo
Peguei a tela lá de cima e apliquei as cinco decisões. Não mudei nenhum texto de lugar, não mudei o layout, não redesenhei nada. Só troquei valores.
Passo 1: tirei o gradiente. Fundo de uma cor só.
Passo 2: sombra virou borda de 1px.
Passo 3: todo espaçamento passou a sair da escala.
Passo 4: dois raios de canto, e a cor forte só no botão do plano recomendado.
Mesma tela. Mesma estrutura. Mesmo conteúdo. Levou quatro minutos.
Cole isto
Esse é o prompt que eu rodo antes de arrumar qualquer coisa. Ele não conserta nada. Ele só me mostra o que eu não decidi.
Audite esta tela procurando cara de IA. Não altere nenhum arquivo ainda.
Liste, com arquivo e linha:
1. Todo valor de espaçamento usado. Aponte os que estão fora de uma escala de 4 em 4.
2. Todo raio de canto usado. Se houver mais de 2 valores diferentes, diga quais.
3. Toda sombra. Marque as que têm blur acima de 24px ou opacidade acima de 0.15.
4. Todo gradiente. Diga onde está e o que ele resolve.
5. Toda família e peso de fonte. Se houver mais de 2 famílias, diga.
6. Toda cor escrita direto no componente, fora dos tokens do projeto.
7. Emoji usado como ícone.
8. Texto genérico de marketing: simples, rápido, poderoso, transforme, revolucione.
Devolva uma tabela com três colunas: sinal, onde está, o que eu preciso decidir.
Não proponha conserto e não escolha valores por mim. Eu decido e te devolvo a lista.A última linha é a mais importante. Se você deixar a IA escolher os valores, ela vai escolher a média de novo.
No seu app
Leva uns dez minutos.
- Abra a tela mais recente do seu projeto e salve um print. Esse é o seu antes.
- Cole o prompt acima e leia a tabela que voltar.
- Escolha os cinco valores da regra e escreva num bloco de notas.
- Devolva os cinco valores para a IA e peça para aplicar só isso, sem mexer no layout.
- Salve o depois e guarde os dois prints lado a lado.
Você vai usar esse par de prints de novo no módulo 6, quando escrever o arquivo que manda na aparência do projeto inteiro.
Pontos-chave
- A IA não tem gosto, tem média. O que volta é a média da internet.
- Uma tela tem umas quarenta decisões. Decida cinco e o resto se comporta.
- Os oito sinais: gradiente sem motivo, sombra pesada, espaço sorteado, canto igual em tudo, emoji no lugar de ícone, três cards iguais, fonte de fábrica e texto que qualquer um poderia escrever.
- Audite antes de consertar. E não deixe a IA escolher os valores.
Próxima aula
Seis perguntas para qualquer tela. Os oito sinais pegam o que está errado na superfície. As seis perguntas pegam o que está errado na estrutura, que é onde mora o problema mais caro.