Como Eu Crio Identidades Visuais Inteiras Usando IA, Figma e Código

Ninguém tem tempo pra isso

Vou ser direto: branding sempre foi um problema sem solução boa pra dev indie. Ou você paga uma agência — e aí já era a margem de lucro do ano inteiro — ou abre o Illustrator e finge que sabe o que está fazendo com curvas bézier. Se você tem um produto, dá pra empurrar com a barriga. Com vários? Esquece.

Eu estava nessa situação. O Helsky Labs — meu estúdio indie — tem vários produtos, e cada um parecia que foi feito por uma pessoa diferente. Porque foi, em momentos diferentes, com níveis diferentes de paciência. A marca pessoal, helrabelo.dev, nem existia direito.

Aí eu refiz tudo. Não um por vez ao longo de meses. Tudo num sprint.

Esse é o resultado. Aqui vai como chegou lá.

Três ferramentas. Sem segredo.

O que faz isso funcionar não é nenhuma dessas ferramentas sozinha. É a combinação: o Recraft gera vetores que dá pra manipular por código. O Claude Code faz o trabalho braçal. O Figma é onde você toma as decisões que importam.

Antes de abrir qualquer ferramenta: pense

Aqui é onde todo mundo tropeça. A tentação é abrir o Recraft, digitar "logo bonito" e torcer pelo melhor. Resista.

Pra cada produto, responda antes de gerar qualquer coisa:

1. O que o ícone representa de verdade? Não "um logo" — qual é a metáfora? O Gitography é um branch de git se fundindo com um pin de mapa. Código como geografia. O BookBit é uma página virando. Seja concreto.

2. Qual a personalidade? Profissional mas acessível? Divertido sem ser infantil? Escreve em duas frases e pronto.

3. Qual o território de cor? Cada produto precisa ser dono de uma faixa de cor. Se dois produtos dividem o mesmo verde, você perdeu a oportunidade de diferenciação visual instantânea.

4. Funciona pequeno? Um ícone que fica bonito em 512px e vira uma mancha em 16px não serve pra nada. E 16px é o tamanho de uma aba de navegador — o lugar onde seu logo vai morar 90% do tempo.

Esse planejamento leva uns 15-20 minutos por produto. Parece muito até você perceber que economiza horas de "gera, odeia, gera de novo."

Na prática: a marca pessoal helrabelo.dev

O briefing da minha marca pessoal era simples: um monograma que funcionasse como assinatura. Algo que fizesse sentido gravado a laser em couro, carimbado em papel ou como favicon de 16px.

• Metáfora: As letras "HR" entrelaçadas numa marca contínua — um selo, um carimbo pessoal
• Personalidade: Mínimo, preciso, com um toque artesanal. Marca de desenvolvedor, não identidade corporativa
• Cor: Monocromático. A marca pessoal sussurra. Quem brilha são os produtos
• Tamanho: Tem que sobreviver 16px e parecer intencional em 128px+

A API do Recraft: onde a mágica começa

O Recraft é — até onde eu encontrei — a única ferramenta de IA que gera SVG vetorial de verdade. Não estou falando de PNG com fundo transparente. SVG com paths editáveis, que você abre num editor de texto e consegue ler.

Por que isso importa tanto pra logo:

• Troca de cor vira sed, não Photoshop
• Escala de favicon a outdoor sem perder nitidez
• Arquivos de 2-10KB por logo
• Dá pra compor programaticamente (ícone + wordmark = lockup)

Gerando variações de ícone

API_KEY="sua_chave_api_recraft"

curl -s https://external.api.recraft.ai/v1/images/generations \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $API_KEY" \
  -d '{
    "prompt": "minimalist logo icon, stylized curly braces with a centered diamond node, clean geometric lines, modern flat design, developer-focused, no text",
    "model": "recraftv4_vector",
    "size": "1024x1024",
    "n": 6,
    "controls": {
      "colors": [
        {"rgb": [16, 185, 129]},
        {"rgb": [5, 150, 105]}
      ],
      "background_color": {"rgb": [255, 255, 255]}
    }
  }' > icon-response.json

O que importa aqui:

• model: "recraftv4_vector" — Sem isso você recebe raster. Com isso, SVG.
• n: 6 — Sempre gere o máximo. Mais opções, melhor seleção. São 8 créditos por imagem, 48 no total — algo em torno de R$3.
• controls.colors — Trava a paleta nas suas cores de marca. Sem isso o Recraft escolhe o que der na telha.
• controls.background_color — Branco pra trabalho de logo. Sempre.

Na prática: o monograma HR

Essa foi a chamada real pra minha marca pessoal:

curl -s https://external.api.recraft.ai/v1/images/generations \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $API_KEY" \
  -d '{
    "prompt": "minimalist monogram logo combining letters H and R, interlocked letterforms, single continuous stroke feel, clean geometric, modern, no background decoration, no text besides the letters",
    "model": "recraftv4_vector",
    "size": "1024x1024",
    "n": 6,
    "controls": {
      "colors": [{"rgb": [20, 20, 20]}],
      "background_color": {"rgb": [255, 255, 255]}
    }
  }' > hr-response.json

Detalhe: cinza escuro (rgb(20,20,20)) em vez de preto puro. É sutil, mas faz diferença — fica mais refinado, menos agressivo.

Gerando wordmarks

Mesma API, prompt diferente:

curl -s https://external.api.recraft.ai/v1/images/generations \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $API_KEY" \
  -d '{
    "prompt": "clean modern wordmark logo text \"TokenCentric\", elegant minimal sans-serif typography, single weight, simple letterforms, white background, no icon no symbol just the text",
    "model": "recraftv4_vector",
    "size": "1024x1024",
    "n": 6,
    "controls": {
      "colors": [{"rgb": [16, 185, 129]}],
      "background_color": {"rgb": [255, 255, 255]}
    }
  }' > wordmark-response.json

O que funciona e o que não funciona nos prompts

Funciona:

• Diga o que você NÃO quer. "No text" em prompt de ícone. "No icon no symbol" em prompt de wordmark. A IA precisa de limites.
• Descreva formas, não conceitos. "Stylized curly braces" rende muito mais que "code-related icon."
• Descreva a vibe. "Developer-focused, precise, technical but approachable" guia o resultado.
• Seja breve. Prompt longo dilui o sinal. 2-3 frases.

Não funciona:

• Amontoar conceitos. "Um livro E uma engrenagem E a letra B" vira Frankenstein visual.
• Abstração demais. "Inovação e sinergia" produz clip art corporativo.
• Dar coordenadas. "Ícone no canto superior esquerdo com wordmark abaixo a 30 graus" — o modelo ignora instruções espaciais.

Revisão: onde o gosto entra

Aqui entram os boards de revisão. São páginas HTML que renderizam todas as opções lado a lado, em vários tamanhos, fundo claro e escuro. O Claude Code gera essas páginas automaticamente a partir da resposta da API.

Esse é o board real que usei pra escolher a marca pessoal — monograma HR em cima, alternativa "hel" embaixo, com preview da opção selecionada em tamanho pequeno, fundo escuro e simulando gravação em couro:

O teste de 16px é inegociável. Se não dá pra reconhecer numa aba de navegador, já era. Esse filtro sozinho elimina uns 40% das opções.

Três critérios, nessa ordem:

1. Funciona em 16px?
2. Comunica o que o produto faz?
3. Faz sentido do lado dos outros produtos da família?

Por que a opção 3 ganhou

O monograma HR #03 — canto superior direito — venceu por três razões:

1. Sobrevive a 16px. O traço entrelaçado tem contraste suficiente pra funcionar como favicon. Várias outras viravam borrão.
2. Parece assinatura. O H e o R fluem um pro outro como um selo de cera ou a marca de um tipógrafo. Artesanal, não industrial.
3. Funciona em qualquer contexto. Traço único, sem detalhes finos. Qualquer cor, qualquer fundo, qualquer tamanho.

As opções 1 e 5 quase ganharam, mas os traços mais finos perdiam legibilidade quando pequenas. A 2 era simples demais — não parecia intencional. A 4 e a 6 tinham geometria legal mas cheiravam a corporativo.

Gitography: outra revisão, outro contexto

Pro Gitography — uma ferramenta de analytics de git — o board era mais elaborado. Cores da marca, opções de ícone e variações de wordmark numa página só:

Produto diferente, prompt diferente ("git branch merging with a map pin, connected nodes, data visualization feel"), cor diferente (indigo #4F46E5), mesmo processo. Ícone #5 e wordmark #1 foram os escolhidos.

Variantes de cor: onde o código brilha

Escolheu o ícone e o wordmark? Agora precisa de 6 variantes de cada:

Faz as contas: 3 tipos de asset (ícone, wordmark, lockup) × 6 variantes = 18 arquivos por produto. Multiplica por 7 produtos = 126 SVGs. Fazer isso no braço é perder uma tarde inteira da sua vida abrindo arquivo, trocando cor, exportando, renomeando.

Com o Claude Code, vira conversa:

"Gera as 6 variantes de cor do ícone, wordmark e lockup. Cor primária #10B981, fundo escuro #0D1117."

Ele lê o SVG, identifica as camadas — retângulo de fundo, forma principal, detalhes — e gera tudo por substituição de string:

# Troca de cor simples
sed "s|fill=\"rgb(16,185,129)\"|fill=\"rgb(0,0,0)\"|g" icon-color.svg > icon-black.svg

# Remove fundo pra variantes transparentes
# (deleta o primeiro <path>, que nos SVGs do Recraft é sempre o retângulo de fundo)

A variante branco-no-escuro é mais trabalhosa porque inverte a lógica das camadas, mas continua sendo manipulação de texto. Exatamente o tipo de trabalho que um assistente de código faz melhor que qualquer humano.

Variantes finais do HR Mark

O board de produção final do HR mark — 6 variantes com previews de uso (aba de navegador, carimbo em papel, gravação em couro, header de app) e teste de escala até 16px:

Um SVG entra. Seis arquivos de produção saem. Cada um limpo, editável, com menos de 6KB.

Gitography: o kit completo

Pro Gitography, a geração produz o kit inteiro — ícone, wordmark e lockup empilhado, cada um em 6 variantes:

18 SVGs de produção pra um produto. A estrutura de pastas no final do board mostra como tudo fica organizado.

Figma: a biblioteca, não o ateliê

Com os SVGs prontos, eles vão pro Figma. Mas atenção — eu não projeto no Figma. Eu organizo.

1. Revisão visual — Ver tudo num canvas de verdade, não no VS Code
2. Design system — Estilos de cor, escalas tipográficas, variantes de componente
3. Exportação — PNGs em vários tamanhos, ICO, ICNS, o que cada plataforma pedir
4. Guidelines — Regras de uso, espaçamento mínimo, o que não fazer

A criação aconteceu no Recraft. O Figma é onde você guarda e distribui.

O pipeline de assets

Logo é só o começo. Cada produto precisa de dezenas de arquivos específicos por plataforma:

• Web: 6 tamanhos de favicon, Apple touch icon, PWA icons, OG image
• Desktop: .icns (macOS), .ico (Windows), fundo de DMG
• Mobile: Expo icons, ícones adaptativos Android, splash screens, assets da App Store
• Social: perfil e header do Twitter, banner do LinkedIn, avatar do GitHub

Pra isso existe um pipeline bash que gera tudo a partir de um único SVG:

./tools/generate-assets.sh tokencentric logo.svg electron-app
./tools/sync-to-projects.sh tokencentric

Um arquivo entra. Dezenas de assets saem. Redimensionamento, conversão de formato, safe-zone pra ícone adaptativo do Android — todas aquelas peculiaridades de plataforma que ninguém quer lembrar que existem.

O saldo final

Pra 7 produtos + 1 marca pessoal:

• 126 SVGs de marca — ícone + wordmark + lockup × 6 variantes de cor × 7 produtos
• 280+ assets de plataforma — favicons, ícones de app, cards de redes sociais
• ~560 créditos do Recraft — algo em torno de R$35
• 1 design system — tipografia, linguagem de ícones e padrões de marketing compartilhados
• 1 sprint — do zero ao deploy

R$35. Por uma identidade visual completa pra um estúdio inteiro e todos os seus produtos.

Cada produto agora parece que pertence à mesma família sem perder sua personalidade. O mapa de territórios de cor garante que você reconhece cada um instantaneamente. E o monograma HR amarra tudo — uma assinatura discreta que diz "feito por Hel" sem roubar a cena.

Se você for fazer o seu

Comece pelo sistema, não pelo produto. Defina tipografia, estilo de ícone e territórios de cor primeiro. Depois preenche cada produto. De cima pra baixo, não de baixo pra cima.

Trava a paleta. Sem controls.colors no Recraft, você recebe logos lindos em cores que não têm nada a ver com a sua marca. Use.

Testa em 16px antes de se apaixonar. Sério. Abre o SVG no tamanho de uma aba de navegador. Se não funciona pequeno, não funciona.

Automatiza as variantes. Se você tá abrindo cada SVG pra trocar cor manualmente, está jogando tempo fora. SVG é arquivo de texto. Trata como código.

Delega o trabalho braçal. Chamada de API, download de arquivo, troca de cor, organização de pasta, geração de review board — é exatamente o que uma ferramenta como o Claude Code faz bem. Guarda sua energia criativa pra decisão que importa de verdade: qual ícone conta a história certa?

A marca mãe sussurra. Se a identidade do seu estúdio compete visualmente com os produtos, algo tá errado. O Helsky Labs foi pra monocromático justamente pra cada produto ter espaço pra brilhar.

O que mudou

Há um ano, esse nível de trabalho de marca exigia ou um orçamento sério ou semanas no Illustrator. Hoje o gargalo não é mais a criação — é a curadoria. A IA gera mais opções boas do que você consegue revisar. Seu trabalho virou escolher, não desenhar.

E isso não é pouca coisa. Gosto é o que separa uma marca boa de uma genérica. A IA cuida do trabalho mecânico de gerar vetores limpos. Você cuida do julgamento — qual vetor conta a história certa?

Pra dev indie que publica produto de verdade, isso é um antes e depois. Identidade visual profissional, a preço de chamada de API.