Uma imagem vale mais que mil tokens

Parte do meu trabalho na Repaint é fazer a IA gerar sites que realmente fiquem bonitos. É surpreendentemente difícil. Os modelos de IA tendem a cair nos mesmos clichês visuais repetidamente. É tão consistente que um "site de IA" está se tornando uma estética reconhecível.

Testamos dezenas de formas de quebrar esse padrão. No caminho, obtivemos uma compreensão muito mais profunda dos modelos, que queríamos compartilhar.

Este é um site de IA bem padrão: estilo genérico, conteúdo mínimo e layouts sobreutilizados. E claro, o ocasional botão ilegível.

Eu só dei uma quantidade mínima de direção. Pode parecer injusto, mas acho que é um bom teste. Obviamente, se você continuar dando instruções, poderia transformar isso progressivamente em um ótimo site. Mas aí você está fazendo todo o design. O modelo está apenas programando. A maioria das pessoas não sabe fazer isso. O grande avanço é quando a IA consegue fazer design sem que um humano especifique cada detalhe.

O estilo padrão da IA é basicamente um problema universal. Aqui ele aparece em um site de terapeuta. Você pensaria que um site de terapeuta ficaria dramaticamente diferente. Mas não, ele simplesmente faz mais ou menos o mesmo site com botões verdes.

Como melhorar sites feitos com IA?

Sistemas de design

Um primeiro passo óbvio: pré-construir as cores, fontes, bordas arredondadas e sombras. Essas decisões são difíceis de acertar quando você está apenas olhando código. Iniciar a IA com um bom conjunto significa menos formas de errar.

Ajuda um pouco. Você tem menos erros graves de cor. E aqui ele usou um fundo com imagem. Mas no geral os layouts, a densidade de conteúdo e a estrutura geral são basicamente iguais. Um sistema de design dá ao modelo uma paleta; não ensina como compor.

Coaching

Outra abordagem: dar ao modelo um grande conjunto de instruções sobre como fazer design. Instruí-lo a fazer coisas que normalmente não faria. O chatbot principal do Claude AI tem uma habilidade que faz exatamente isso:

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:

Purpose: What problem does this interface solve? Who uses it?
Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
Constraints: Technical requirements (framework, performance, accessibility).
Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?

CRITICAL: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:

Production-grade and functional
Visually striking and memorable
Cohesive with a clear aesthetic point-of-view
Meticulously refined in every detail

Frontend Aesthetics Guidelines
Focus on:

Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
Spatial Composition: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
Backgrounds & Visual Details: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
IMPORTANT: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

É uma melhoria real. O layout geral é similar ao anterior. Mas finalmente parece um site real de terapeuta, com fontes mais suaves e um estilo de botão único. Se você trocasse sua imagem, poderia publicá-lo sem problema.

Nos nossos testes, descobrimos que instruções personalizadas não corrigem a repetição. O modelo ainda recorre aos mesmos padrões, então basicamente ainda parece o site padrão de IA. Só uma versão muito mais bonita.

Além disso, é mais difícil evitar os padrões sobreutilizados do que o prompt do Claude sugeriria. Eles dizem:

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts)

Então, em vez disso, o modelo sobreusa outras fontes como Jost e Cormorant Garamond. E agora não consegue lidar com situações onde Inter é a escolha certa. Basicamente, você pode forçar a eliminação dos maus hábitos, mas de um jeito ou de outro, ele vai fazer as mesmas coisas repetidamente.

Imagens de referência

E se você pular as palavras completamente e simplesmente mostrar ao modelo o que você quer? Alimentá-lo com uma captura de tela de um design que você gosta e pedir que construa algo similar.

Essa foi a primeira tática onde o modelo criou novos layouts fora dos mesmos 2-3 que sempre faz. Ele nunca faz uma imagem de meia tela por conta própria.

Imagens são uma forma super eficiente de compartilhar muita informação. O modelo capta layout, espaçamento, relações de cor e densidade tudo de uma vez: coisas que você nunca pensaria em descrever em um prompt. Mas é frágil. Ele não consegue reproduzir layouts complexos ou animações. E se o modelo precisa preencher mais conteúdo fora da referência, volta ao estilo padrão.

Templates de código e estilo

Essa é talvez a ideia mais de força bruta. Simplesmente dê código. É o que o ChatGPT faz agora. Ele usa uma biblioteca de templates quando cria sites.

Quando você faz isso, obviamente a qualidade sobe muito. Você está apenas dando as respostas para a IA. Mas a maioria das pessoas não tem código prévio para o que quer. Então isso é principalmente uma tática para construtores de plataformas, criando uma ferramenta para outras pessoas.

Mas tem um porém:

"Make a therapist website"

"Make a lawyer website"

"Make a plumber website"

"Make a bakery website"

Se você dá exemplos para a IA, ela gera sites que parecem notavelmente similares, e faz os ajustes mínimos necessários para corresponder ao contexto. Então quando o ChatGPT cria sites agora, independente do prompt, parece a mesma startup de tecnologia.

Infelizmente, mesmo com todas essas táticas, não tenho certeza de que fizemos algo melhor que um template genérico do Wix.

Auto-iteração

Por que não deixar o modelo olhar sua própria saída e melhorá-la? Um designer do Wix pode fazer muitas iterações, afinal.

Na teoria isso resolve tudo. Na prática ele cozinha por 20 minutos, gasta $10 em tokens e estagna rápido. Por exemplo, fiz ele iterar sobre o site do lighthouse de antes. Ele nem notou o botão ilegível.

A auto-iteração é provavelmente o futuro. Mas os modelos de hoje não estão totalmente prontos.

Depois de explorar todas essas abordagens, tínhamos opções reais para melhorar o estilo. Mas além disso, sentimos que entendíamos como os modelos de IA funcionam em um nível muito mais profundo.

O que aprendemos sobre os modelos de IA

Os modelos realmente preferem o estilo padrão

Existe uma estética padrão incorporada nos modelos. É como o site médio nos dados de treinamento. Toda vez que toma uma decisão, usa o estilo padrão a menos que tenha uma razão explícita para não fazer isso. É por isso que os sites de IA são tão reconhecíveis, e por que a auto-iteração realmente não te leva a lugar nenhum. O modelo não converge para um design único. Ele converge para o padrão. Se você quer que a IA quebre o padrão, precisa dar algo que o tire do padrão, como imagens de referência ou amostras de código.

Imagens têm mais largura de banda que palavras

É difícil direcionar o modelo com palavras. Você pode escrever um parágrafo sobre querer algo "limpo, moderno, com bastante espaço em branco" mas é quase inútil. Você sempre acaba com o estilo padrão. Imagens podem fazer o modelo criar designs únicos porque carregam mais informação. Uma captura de tela codifica centenas de micro-decisões sobre espaçamento, cores e layouts que você não consegue definir com palavras. Então, a menos que tenha amostras de código, imagens de referência são a melhor forma de direcionar a IA.

Pré-construir é uma curva de compensação

Cada tática que testamos era uma forma de pré-tomar decisões pela IA. Quando você dá mais, pode elevar o teto de qualidade, mas perde flexibilidade. Preparar-se para cada caso de uso potencial só importa para uma plataforma geral como a Repaint. Se é só para você, pode (e deve) dar à IA referências específicas para maximizar a qualidade visual.

Como fazer melhores designs com IA

A forma mais simples de evitar o genérico é dar à IA referências visuais únicas, como imagens de sites que você gosta, amostras de código, ou ambos. Uma vez que você tem o estilo, a IA deveria conseguir gerar mais seções que combinem. Isso é muito mais eficaz do que simplesmente ficar dando instruções repetidamente, que é o que a maioria das pessoas faz.

Ou se encontrar referências e construir um estilo é intimidante, você poderia experimentar o Repaint. Construímos uma grande biblioteca de estilos com amostras de código e variáveis de design. A IA não é forçada a um único estilo porque temos muitas opções.

De forma mais ampla, em qualquer ferramenta visual de IA, seja design de apps, geração de imagens ou geração de vídeo, em vez de dizer "deixe mais premium," tente dar mais capturas de tela e exemplos. É dramaticamente mais eficaz.