Sob medida até nas capas do blog

Todo post precisa de uma imagem. Ela aparece no topo da página e é o que as pessoas veem quando alguém compartilha o link no WhatsApp ou no LinkedIn.

O caminho fácil é um banco de fotos. Só que a foto não diz nada sobre o post nem sobre quem escreveu, e a mesma imagem aparece em centenas de outros sites. Fizemos diferente, e o processo foi parecido com o que fazemos nos projetos de clientes.

O que a imagem precisava ter

• Ser única por post, sem ninguém desenhar uma a uma.
• Sair sempre igual para o mesmo post, a cada vez que o site é publicado.
• Ter a cara do site: fundo claro, traço fino, um único acento rosa.
• Ser gerada automaticamente, sem depender de nenhum serviço externo.

Como trabalhamos

Cada ideia virou uma página de testes, com as capas de três posts lado a lado: o da API da ANVISA, o de notas fiscais e o da API do Mercos. Assim dava para comparar de verdade, com os títulos reais, em vez de imaginar.

As variações foram geradas por um agente de IA de programação. A cada rodada, ele escrevia o código de várias ideias e montava a página de testes a partir dos nossos comentários. Gerar uma rodada inteira levava minutos. A parte que exigia gente era olhar e decidir.

O critério de decisão foi olhar. Uma ideia que parecia ótima no papel podia sair sem graça, e o contrário também aconteceu. Foram sete rodadas.

Rodada 1: desenhar os dados do projeto

A primeira ideia foi usar informações do próprio código de cada projeto: a lista de arquivos como uma planta baixa, o histórico de alterações como uma régua, os horários de trabalho como uma grade.

A planta baixa foi considerada interessante. O histórico, não. Na revisão, o comentário foi:

“Histórico de commit é ruim, pois alguns desses têm pouco e fica vazio, e vai ficar vazio com o tempo.”

Um projeto pequeno gera uma imagem pobre, e continua assim. Também testamos o céu do Recife no dia da publicação, que ficou bonito, mas “não é característico o suficiente”.

Rodada 2: arte a partir de um código único

Trocamos os dados por algo que nunca falta: o código de identificação da primeira versão do projeto, uma sequência de 40 letras e números. A partir dele, um programa pode gerar qualquer desenho, e o mesmo código gera sempre o mesmo desenho.

Testamos oito estilos: ladrilhos, curvas de nível, linhas de fluxo, uma cordilheira, uma fita métrica, peças de um molde de costura, cores e um harmonógrafo, que simula a caneta presa a dois pêndulos.

O veredito: “o fluxo e as curvas não são tão distintos”, “o molde parece legal, mas meh, e a fita também é meio sem graça”. E o harmonógrafo “tá ganhando”.

Rodada 3: imagens quase iguais

Para ter mais variedade, montamos uma família de máquinas de desenho parecidas com o harmonógrafo. Foi aí que apareceu o problema mais interessante do processo.

Esses dois desenhos vieram de códigos diferentes e saíram quase iguais. A pergunta na hora foi: “pode ter várias colisões visuais, concorda?” Concordamos. Um código único não garante um desenho único. Se a regra do desenho só sabe fazer algumas dezenas de formas, dois posts vão acabar com a mesma.

Isso mudou o critério: além de bonito, o estilo precisa ter muitas formas possíveis. E mudou a direção. O pedido seguinte foi “máquina de desenho não, outras coisas”, e o harmonógrafo, que estava ganhando, saiu da disputa.

Rodadas 4 e 5: outros caminhos

Tentamos de tudo um pouco. Desenho técnico de uma peça usinada, células pintadas como as da página inicial, um número grande que resume o post, uma palavra do título medida.

Depois, fractais, caos matemático, mosaicos coloridos e até sistemas planetários.

Alguns eram bonitos. Da rodada 5, o veredito foi “não gostei de nenhum”. Na nossa leitura, fractais e mosaicos coloridos chamam atenção, mas brigam com o resto do site. Bonito não basta, precisa combinar.

Rodada 6: olhar referências

Em vez de criar mais variações, montamos uma lista de referências de arte gerada por computador e escolhemos as que valia a pena testar: plantas que crescem por regras, o crescimento de um mofo, o kolam (desenho tradicional indiano em volta de pontos) e outras.

As plantas quase convenceram. Faltava resolver a composição, porque o título cobria o desenho na imagem de compartilhamento. E veio a pergunta: dá para fazer em 3D?

Rodada 7: plantas em 3D

A primeira versão em 3D tinha piso em perspectiva e sombras. O comentário foi curto: “o 3D ficou estranho”.

Corrigimos troncos, câmera e sombras. Melhorou, mas ainda havia dois problemas: “o piso tá tosco” e “parece que tem uma árvore repetida em cada post, só mudando a escala dela”.

A resposta foi ter cinco espécies, cada uma com várias regras de crescimento, galhos podados ao acaso e nunca a mesma espécie duas vezes na mesma imagem. Por último, saíram o chão e as sombras, e o tracejado rosa que contornava só o título passou a contornar a imagem inteira.

O resultado não é perfeito. O cipreste às vezes sai fino como um palito, e o pinheiro pode ficar ralo. Mesmo assim, a versão foi considerada boa o bastante. Ela cumpre todos os requisitos, e cedo ou tarde é preciso decidir: uma capa que já funciona vale mais publicada do que em mais uma rodada de ajustes.

O resultado

Cada post ganha um pequeno jardim, desenhado a partir do código da primeira versão do projeto de que ele fala. Quando o post não fala de um projeto, o código usado é o endereço do próprio post, como neste. A capa do topo mostra só as plantas. A imagem de compartilhamento tem o título, duas plantas e a moldura tracejada do site.

Ninguém desenha as capas, e mesmo assim cada uma é só daquele post. Quando um post novo entrar, ele ganha o seu jardim sem que ninguém precise fazer nada.

O que isso diz sobre como trabalhamos

• Testar barato e olhar de verdade. Com o agente de IA gerando as variações, cada rodada levou pouco tempo e mostrou o resultado real, com o conteúdo real.
• Descartar sem dó. Mais de trinta ideias ficaram pelo caminho, várias delas bonitas.
• Decidir com critério. O critério mudou no meio do caminho, quando apareceram as imagens quase iguais, e isso foi bom.
• Saber parar. Quando a solução cumpre os requisitos, a próxima rodada de ajustes custa mais do que entrega.

É o mesmo jeito de trabalhar nos sistemas que fazemos para clientes. Quem quiser os detalhes técnicos, com código, encontra no post sobre como as capas são geradas.