Como fiz a logo do meu aplicativo com IA

Pensei em contratar um designer de freelance, mas dei uma chance primeiro para experimentar algumas ideias com IA para ter alguma noção pelo menos do que iria atrás.

Meu objetivo era criar algo abstrato. Algum símblo que remetesse a idéia do aplicativo: o controle de agentes simultâneos pelo smartphone.

Pesquisando no Google por ferramentas de IA para gerar logotipos, nenhuma me satisfez de cara por serem concretas demais. Acredito que elas sejam de bom uso caso você tenha uma boa idéia do que quer. Exemplo: “logo para ecommerce de tênis esportivos”. As logos eram muito caricatas e o processo não

Vi que precisava fazer um brainstorming, então abri o chat do Claude com o Opus 5.5 e escrevi:

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

Primeiras ideias: Shield prompt, Testudo panes, Chevron L e Cursor wordmark

Primeiramente percebi que todos os logos eram SVG’s escritas pelo Claude, o que já é muito bom, 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 realizar ajustes com IA, versionar com git, e também no final converter para qualquer formato de imagem na resolução que eu quiser.

Das 4 opções, escolhi a segunda para prosseguir na próxima iteração. Acredito que representa bem o humano no meio com os agentes ao seu redor. Além disso, pus no prompt um print de uma das telas do aplicativo para ele replicar a estética.

Experiment with Testudo panes and Cursor wordmark. Aim for this aesthetic [attached app’s screenshot]

Grade de painéis com o cursor no centro, wordmark “legio” e a versão em barra com status LIVE

Vi que misturar texto iria enfraquecer a marca. Portanto, permaneci apenas com a idéia dos quadrados.

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

Nove variações da grade: Solid, Outline, Fade, Linked rows, Network, Projects, Mono, Tight e Inverted

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

Nove cores suaves para o painel central: Oxblood, Rust, Ochre, Olive, Sage, Teal, Steel blue, Dusk indigo e Plum

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

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

Pedi para o Claude Code então 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.

Create an HTML showcasing this logo

Tela inicial do iPhone com o ícone do Legio entre outros apps, em modo claro, escuro e tinted do iOS 18

Inspirado na logo do Tailscale, que forma um “T”, pensei em formar um “L” com os quadrados da minha logo e manter o tema monocromático.

O showcase final foi esse.

Use monochromatic colors and highlight the first column and last row to make the effect of a “L”.

Com alguns prompts, eu já tinha alcançado a idéia satisfatória do logo. Pedi para gerar o arquivo SVG, passei para o Claude Code, abri um repositório e colei o arquivo lá. Pedi para que gerasse toda a suíte de logos com base no SVG. Todos os tamanhos convencionais de PNG, ICO, glyphs e etc.

Por fim, pedi para gerar o arquivo do Icon Composer. Esse é um software feito pela Apple que gera um arquivo de logo do aplicativo que é adaptável para o iOS: suporte a modo claro, escuro, tinted, glass, etc, pois desde o iOS 18 é possível customizar a home do celular com diferentes temas e as logos dos apps devem seguir essa estética.

Variantes geradas pelo Icon Composer: escuro, escuro alternativo, claro, tinted em roxo e watchOS

← Voltar para os posts