saas-logo

logotipo SaaS

Todo arquivo que este skill usa vem em sua própria pasta, ao lado deste SKILL.md, e os caminhos aqui são relativos a essa pasta. Ele não precisa de nada de outros skills ou outras pastas, então não vá procurá-los. A menos que o usuário nomeie outro local, salve tudo o que ele produz em out/saas-logo/ sob o projeto atual.

Um símbolo, plano. O que retorna é a marca sozinha em um fundo transparente, cortada em suas bordas, mais a mesma marca em seu bloco de ícone de aplicativo: arquivos que podem ser colocados diretamente em um site. As marcas nas quais este skill se baseia são estudadas em references/analysis.md: o que cada uma das onze é como geometria, as oito regras que todas seguem e as cinco famílias nas quais se encaixam. Leia uma vez antes do primeiro logotipo; é isso que significa "parecer um logotipo SaaS real" aqui.

O prompt enviado ao modelo de imagem está em prompt.md e carrega tudo o que o modelo precisa: as regras compartilhadas (tela, bloco, preenchimentos planos, peso, cor) e as cinco famílias nas quais as marcas de referência se encaixam, cada uma com suas próprias regras. Seu trabalho é o pensamento antes do prompt (a família e o símbolo) e o julgamento depois.

Etapas

1. Conheça o produto

Leia o briefing, README, texto de landing, o que existir. Escreva uma linha: "Nome — o que o usuário faz com ele, em um verbo, em um objeto." "Atribui tarefas a agentes de codificação" → atribuir, um cartão de tarefa. "Publica uma pasta como site" → publicar, uma página. A marca mostra o verbo ou o objeto, nunca a categoria (sem engrenagem, nuvem, foguete, gráfico). Observe a cor da marca se o produto tiver uma (seus tokens CSS, seu favicon) e sua inicial.

2. Escolha uma família

As cinco famílias na seção 3 do prompt.md, com o que cada uma é melhor:

• Primitiva sólida (Vercel, Miro): infraestrutura, ferramentas de desenvolvedor, qualquer coisa que queira parecer inevitável, onde uma forma carrega a ideia.
• Primitiva repetida (Slack, Claude, Linear, Intercom, PostHog): colaboração, comunicação, IA, qualquer coisa sobre muitas partes se movendo juntas.
• Letra (Webflow, Miro, Notion): um produto cujo nome é sua marca, quando a inicial tem uma forma forte (A, M, N, W, K, Z, S, V).
• Objeto facetado (Airtable, página do Notion): dados, armazenamento, documentos, qualquer coisa com algo que você preenche ou empilha.
• Traço suave (Mintlify, Intercom): produtos amigáveis voltados ao consumidor, documentação, suporte, qualquer coisa acolhedora em vez de técnica.

Quando o usuário nomeia uma marca de referência, a família é dada: "como o Slack" ou "como o Claude" → Primitiva repetida; "como o Vercel" → Primitiva sólida; "como o Webflow" ou "como o Notion" → Letra; "como o Airtable" → Objeto facetado; "como o Mintlify" ou "como o Intercom" → Traço suave. Quando o usuário nomeia uma família, use-a. Quando nada apontar para lugar nenhum, distribua os conceitos por duas ou três famílias; a folha decide.

3. Escreva 3–4 conceitos

Cada conceito tem 2–3 frases que o modelo de imagem pode desenhar sem adivinhar:

• Símbolo como geometria, não como substantivo. Não "um cartão de tarefa" mas "um retângulo arredondado, mais largo que alto, com um segundo idêntico atrás dele deslocado para cima e para a direita por um quarto de sua altura". Não "um hash" mas "quatro pílulas, cada uma uma barra com uma protuberância redonda em uma extremidade, giradas 90° em torno do centro".
• A contagem e o ritmo para uma primitiva repetida: "cinco barras verticais, alturas escalonadas 3-5-4-2-3 da esquerda para a direita".
• A família, nomeada, e para uma letra qual letra e quais dois ou três traços.
• A cor: a cor da marca pelo hex quando houver uma, ou "bloco preto, marca branca" ou "bloco marigold, marca preta".
• Exclusões quando o conceito convida extras: "sem ponto", "sem moldura em torno das barras", "o contraespaço permanece vazio".

Faça as silhuetas diferirem entre os conceitos (alta vs larga, uma massa vs dispersa). Descarte qualquer conceito que precise de mais primitivas do que sua família permite, ou uma cor que a família proíbe.

4. Componha e gere

Para cada conceito, pegue prompt.md e substitua {{input}} por:

<Product> — <o que é e faz>. O verbo é <verbo>; o objeto é <objeto>.
Cor da marca: <hex ou "nenhuma">. Inicial: <letra>.
Família: <uma das cinco>

Conceito: <o conceito da etapa 3>

Gere todos os conceitos em paralelo através do OpenRouter (abaixo), uma imagem cada, quadrada. Salve como <conceito>.png ou .jpg, o que vier (o trecho abaixo os diferencia).

Modelo padrão: google/gemini-3.1-flash-lite-image (Nano Banana 2 Lite), o mais barato e rápido; lida bem com geometria plana o suficiente para toda a execução, e um conceito que falha nele geralmente falha nos outros também. Aumente o nível apenas quando solicitado, ou quando um guardado precisar de uma renderização mais limpa do que duas rodadas fornecem: google/gemini-3.1-flash-image (Nano Banana 2), depois google/gemini-3-pro-image (Nano Banana Pro), que desenha a geometria mais limpa: extremidades planas, peso uniforme, preenchimentos verdadeiramente planos.

5. Olhe

Alinhe os blocos com bash <pasta deste skill>/scripts/sheet.sh sheet.png a.png b.png … e abra-o. Para ver as referências ao lado deles, bash <pasta deste skill>/scripts/fetch-references.sh out/saas-logo/references puxa as onze marcas através do Brandfetch em uma folha própria (precisa de um ID de cliente Brandfetch; veja o cabeçalho do script). Julgue cada bloco da mesma forma que a análise julga as referências:

• Plano — um preenchimento por forma, sem gradiente, sem sombra, sem bisel. Qualquer outra coisa é um re-roll, não um guardado.
• Cantos comprometidos — todos afiados ou todos arredondados, como a família diz.
• Contagem — as primitivas que o conceito nomeou e nada mais. Um ponto extra, uma moldura, um entalhe é uma falha em nomear no re-roll ("sem moldura em torno das barras").
• Silhueta — aperte os olhos. Uma forma clara a 16px, sem uma segunda imagem acidental: três barras e uma curva se tornam um rosto, um chevron e um ponto se tornam um cursor, quatro pílulas se tornam um moinho de vento.
• Significado — você consegue dizer o verbo ou o objeto sem o nome? Se parecer um ícone de categoria, o conceito está errado, não a renderização.
• Tela — bloco centralizado em cinza plano, nada mais nele, sem texto. O tamanho do bloco e a cor exata variam um pouco entre as renderizações; isso é normal. Quando um conjunto precisa corresponder exatamente, gere tudo em uma rodada com um modelo, ou recorte para o bloco.

Re-rolar apenas o que falhou, com o conceito refinado para nomear a falha. Duas rodadas é normal; um conceito que falha duas vezes geralmente é o conceito, não o modelo. Substitua-o.

6. Corte

A renderização é um arquivo de trabalho: uma tela cinza com o bloco sobre ela. Corte cada guardado nos arquivos que serão usados:

bash <pasta deste skill>/scripts/cut.sh <conceito>.png out/saas-logo/<produto> --name <produto>

Ele escreve <produto>-mark.png, a marca sozinha em um fundo transparente, cortada em suas bordas sem preenchimento, e <produto>-tile.png, o bloco de ícone de aplicativo arredondado com cantos transparentes. A cor da tela é lida dos cantos da renderização e a cor do bloco de uma faixa dentro da borda do bloco, e os pixels da borda são separados deles, para que as bordas permaneçam suaves sem halo. Quando vários conceitos são entregues, nomeie-os separadamente (--name relay-bars, --name relay-block). A primeira execução cria um pequeno venv Python com Pillow e NumPy em scripts/.venv dentro deste skill; depois disso é instantâneo.

Abra os dois arquivos sobre um fundo escuro e um claro e verifique: sem franja de cor do bloco ao longo da borda da marca, sem lasca de tela nos cantos do bloco, nada da marca cortado. Uma franja significa que o bloco da renderização não era plano (um gradiente ou uma vinheta apareceu); re-role a renderização em vez de remendar o corte. Um leve tom de cor bem na borda, visto apenas com zoom, é ruído JPEG dos modelos Lite e Flash; quando importar, renderize o guardado mais uma vez com google/gemini-3-pro-image, que responde em PNG.

7. Entregue

Coloque os PNGs da marca e do bloco em out/saas-logo/<produto>/. Copie-os para onde o produto mantém os ativos da marca (public/, brand/, assets/) apenas quando o usuário pedir. Mantenha as renderizações e sheet.png fora do caminho, em uma pasta renders/ ao lado deles. No resumo, nomeie os -mark.png e -tile.png recomendados pelo caminho, diga qual conceito você recomenda em uma linha e por quê, e liste os outros como alternativas com seus arquivos.

Gerando através do OpenRouter

A chave da API vem de OPENROUTER_API_KEY. Se não estiver definida, pare e peça ao usuário para defini-la, em vez de adivinhar outro provedor.

KEY="$OPENROUTER_API_KEY"

# request.json: {"model": "google/gemini-3.1-flash-lite-image", "prompt": "<o prompt composto>", "aspect_ratio": "1:1"}
curl -sS https://openrouter.ai/api/v1/images \
  -H "Authorization: Bearer $KEY" \
  -H "Content-Type: application/json" \
  -d @request.json > response.json

python3 - <<'PY'
import base64, json, pathlib
data = json.loads(pathlib.Path("response.json").read_text())["data"][0]
image = base64.b64decode(data["b64_json"])
# Lite e Flash respondem com bytes JPEG, Pro com PNG; nomeie o arquivo para o que é.
ext = "png" if image.startswith(b"\x89PNG") else "jpg"
pathlib.Path(f"concept.{ext}").write_bytes(image)
PY

scripts/sheet.sh e scripts/cut.sh aceitam qualquer formato.

Arquivos

• prompt.md — o modelo de prompt; {{input}} recebe a linha do produto, a família e o conceito. A seção 3 contém as cinco famílias.
• references/analysis.md — o estudo das onze marcas: cada uma como geometria, as regras que compartilham, as cinco famílias.
• scripts/fetch-references.sh — puxa as marcas de referência através da Logo API do Brandfetch (ID do cliente de BRANDFETCH_CLIENT_ID) para uma pasta e uma folha; qualquer lista de domínios funciona, para um conjunto diferente de referências.
• scripts/sheet.sh — alinha blocos na tela cinza (precisa de rsvg-convert; brew install librsvg).
• scripts/cut.sh, scripts/cut.py — corta uma renderização nos PNGs transparentes de marca e bloco que são entregues.