Como fiz a logo do meu aplicativo com IA

Durante o desenvolvimento do meu aplicativo de ssh Legio, cheguei a um momento em que vi a necessidade de criar um ícone para ele.

Pedi ao Claude Code para adicionar um logo para o app no Xcode. Ele fez o básico previsível.

Utilizei essa logo provisoriamente por um bom tempo durante o desenvolvimento, mas sempre tive em mente que iria criar uma logo definitiva.

Prototipação

Meu objetivo era criar algo abstrato. Algum símbolo que remetesse à ideia do aplicativo: o controle de agentes simultâneos pelo smartphone.

Pensei em contratar um designer de freelance, mas percebi que não saberia nem o que pedir. Por isso, vi que precisava de um brainstorming. Abri o chat do Claude e comecei a jogar termos relacionados.

Ideas for logos. App name: Legio. References: Agents, Tmux, Cloud, Remote, Multiplexer, Terminal, Shell

Primeiramente percebi que todos os logos eram SVG’s escritas pelo Claude. Isso é ótimo, pois é um formato que ao invés de guardar pixels, guarda um texto com a informação vetorial de como reconstuir a logo. Dessa forma, consigo facilmente realizar ajustes com IA, versionar com git e, ao final, converter para qualquer formato de imagem na resolução que eu quisesse.

Das 4 opções, achei a segunda promissora. Ela conota uma representação do humano no loop rodeado de agentes.

No próximo prompt, anexei um print de uma das telas do aplicativo para convergir os estilos.

I like only the testudo panes. Make variations with colors, filling and adding connections between squares. Show me a grid with 9 variations

7 fade is the best one. But instead of fading, make only the corners dark. Experiment with different hues, please. Aim for less brightness. Make 9 variations

A esta altura eu já estava satisfeito com o resultado. Pedi para gerar um SVG do logo em azul, abri um repositório e passei para o Claude Code aplicar no projeto do XCode. Porém, ao instalar o app com a nova logo, o resultado me desagradou bastante.

Showcase

Descobri que, em meio a outros ícones de aplicativos, apenas o formato de cruz da minha logo se destacava. A ideia dos agentes ao redor do humano no loop se perdeu.

Pedi então ao Claude Code para criar um HTML com o showcase da minha logo em diferentes contextos. Isso melhorou completamente meu olhar crítico ao julgar a logo num contexto mais realista.

Além disso, inspirado na logo da Tailscale, que forma um “T”, pensei em formar um “L” com os quadrados da minha logo e manter o tema monocromático.

Use monochromatic colors and highlight the first column and last row to make the effect of a “L”. Create an HTML page showcasing the logo.

Fiquei bastante feliz com o resultado!

Depois, pedi para gerar a logo suite, para tê-la em todos os tamanhos e formatos, e também gerar o arquivo para o Icon Composer da Apple. Assim, a logo estava preparada para qualquer variação de ícone que o iOS pudesse requisitar.

Aprendizado

O pulo do gato para mim foi pedir ao Claude para construir o showcase. Isso aumentou em muito a minha capacidade de avaliação da logo e terminou me dando a ideia da logo final. Num ambiente sem IA, o showcase levaria algumas horas (ou algumas centenas de reais), e idealmente deveria ser evitado antes da reta final do projeto devido aos custos de tempo e dinheiro. Porém, para o Claude isso é tão trivial quanto gerar a própria logo.

Julgar o esforço de uma IA com base no esforço humano é uma falsa equivalência. Protótipos de alta fidelidade no final das contas se tornam mais baratos do que os de baixa fidelidade. Percebi que, nesse processo de ideação, deveria ter testado no showcase alguns passos antes. Isso acabou me custando tempo e tokens.

Da mesma forma, as logos iniciais poderiam também ser mais exploradas. O primeiro grid de logos foi 2x2. Depois aumentei os experimentos para um grid 3x3. Mantive esse limite pois acho que, acima de 3x3, o salto seria de 9 logos experimentais para 16, um feito humanamente bem mais difícil e, inconscientemente, associei o mesmo esforço à máquina. Falsa equivalência. Para um próximo projeto, vou já iniciar com grids de 4x4 ou 5x5.

Bônus

Esta logo inspirou a logo desse blog também, como é perceptível: mesmo sistema de quadrados squircle em grade 3x3, mas com a coluna do meio e o quadrado inferior esquerdo acesos para formar um “J” em vez de um “L”.