IA gerou referências de web design em cinco estilos: de fintech a Web 1.0

O Habr publicou um experimento de geração de referências de web design com IA. O autor cria assets para cinco temas: games, fintech, estilo Web 1.0, ecologia e serviços de IA. A publicação se apresenta como um primeiro ensaio, e a palavra «condicionais» aparece já no anúncio. É um enquadramento honesto: trata-se de material para inspiração e moodboards, e não de uma substituição do designer.

A parte aberta do material não traz nomes de modelos, versões nem o texto dos prompts. Por isso, a seguir não analisamos os resultados do autor, e sim o que esse conjunto de temas de fato testa e como esse tipo de trabalho costuma ser feito.

Por que justamente esses cinco estilos

O conjunto foi escolhido para extrair do modelo linguagens visuais o mais distintas possível. Cada tema carrega seu próprio vocabulário de formas, cores e tipografia:

• Games. Fundos escuros, neon ou texturas de fantasia, destaques agressivos, imagens hero em grande formato.
• Fintech. Paleta contida, bastante espaço em branco, cards, gráficos, sensação de confiança e ordem.
• Web 1.0. Bordas, botões com gradiente, tabelas apertadas, fontes padrão. O modelo precisa imitar uma estética que hoje ninguém projeta a sério.
• Ecologia. Texturas naturais, verde suave e tons terrosos, formas orgânicas, fotografias em vez de ilustrações.
• Serviço de IA. Gradientes, brilhos, motivos «neurais» abstratos. Aqui o modelo corre o risco de entregar um clichê que já vimos centenas de vezes.

O par mais interessante é Web 1.0 e serviço de IA. O primeiro testa a precisão da estilização; o segundo mostra se o modelo consegue fugir da imagem mais batida de IA.

Onde os modelos generativos costumam tropeçar

Web design é mais difícil do que ilustração por três motivos. O primeiro é o texto. Títulos, rótulos de botões e menus em imagens geradas muitas vezes viram pseudoletras. O segundo é o grid. O modelo desenha algo «parecido com um site», mas alinhamento, espaçamentos e hierarquia com frequência se desfazem quando se olha com atenção. O terceiro é a coesão. Com cinco imagens do mesmo projeto, é difícil montar um conjunto único, com as mesmas cores, arredondamentos e ícones.

Por isso, é mais sensato tratar esses resultados como matéria-prima. Dá para aproveitar a composição, o esquema de cores ou o clima, e montar texto, grid e componentes manualmente no Figma ou em código.

Como aplicar isso no trabalho

Se quiser repetir o experimento, comece pela fórmula do prompt: tema, tipo de página (landing page, dashboard, catálogo), clima, paleta, época ou gênero de referência. Peça blocos separados, como uma seção hero ou um card de plano, e não o site inteiro de uma vez. Assim fica mais fácil controlar os detalhes.

Depois, registre os parâmetros que funcionaram e reutilize-os em todas as variações: o mesmo formato, a mesma descrição de iluminação e de paleta. Isso aumenta as chances de manter um estilo comum.

Por fim, avalie o tempo, e não a beleza da imagem. Se em 20 minutos você obteve dez direções para discutir com o cliente, a ferramenta se pagou, mesmo que nenhum layout sirva para produção. Os resultados completos, as ferramentas usadas e os prompts do autor é melhor consultar no original no Habr: é lá que ficará claro quão convincente foi o resultado em cada um dos cinco temas.