ashuwhy/identidade-da-marca

Identidade da marca

O processo abaixo é a parte durável. Os modelos de imagem, especificações de ícones e tamanhos de loja mudam; verifique a especificação da plataforma atual antes de renderizar qualquer coisa, e (verificado em 2026-10) marca os tamanhos com maior probabilidade de mudança.

Os scripts ficam em ~/claude-skills/tools/brand/. make_versus.py (a folha da etapa 3) e make_fonts.py (etapa 5) funcionam em qualquer aplicativo como estão. O restante (prompts, desenho do candidato, o renderizador de ativos, molduras de loja, pôsteres) foram escritos para um aplicativo específico e desenham sua marca, então leia-os pelo método e adapte-os. Eles precisam de rsvg-convert, Pillow, fontTools e Chrome headless.

1. Briefing

Um único briefing compartilhado colado à frente de cada conceito (tools/brand/logo-prompts.md é um exemplo já trabalhado):

• onde será usado (ícone do inicializador, listagem da loja), portanto deve ser legível em 48px e sobreviver como uma silhueta monocromática
• vetor plano, formas sólidas, sem gradientes, sombras, 3D, textura ou texto
• a paleta exata em hexadecimal, e "nada mais"
• uma marca centralizada em um bloco de canto arredondado
• várias variações em uma grade por execução, para que uma execução explore um conceito em vez de apostar em uma única renderização
• uma lista de proibições dos clichês da categoria

Feito quando: o briefing cabe em um parágrafo e cada conceito é uma linha extra.

2. Rodadas

• Rodada 1: seis ou sete conceitos mais um briefing aberto. Escolha um.
• Rodada 2: mantenha o vencedor e varie um eixo por prompt (geométrico versus arredondado, o que o acento significa, o contraponto, o teste de estresse monocromático pequeno). Soletre a anatomia das letras em palavras; os modelos confundem glifos semelhantes entre scripts.
• Mostre a pessoas de fora da construção antes de prosseguir. Como um script, símbolo ou cor é lido pelo público pode afundar uma marca que nenhum prompt capturaria. Um comentário externo vale uma rodada.
• Rodada 3 teste: uma criança conseguiria desenhar de memória após um olhar? Atribua qualquer esboço a quem o desenhou.

3. Folha de confronto

Redesenhe os dois ou três finalistas em código (strings SVG), depois coloque-os no que um ícone de inicializador realmente encontra (make_versus.py faz tudo a partir dos SVGs):

• as máscaras de círculo e squircle
• uma visão "num relance" desfocada
• ícones temáticos (monocromáticos) em tons claro e escuro do sistema
• 48, 32, 24 e 16px, mostrados ampliados
• participação de tinta, e um veredito de uma linha por candidato

Confie na folha em vez de uma preferência. Uma marca que precisa de explicação perde para uma que se lê por si mesma primeiro.

Feito quando: um candidato vence na folha e posso dizer em uma frase por quê.

4. Um desenho, todos os ativos

O vencedor se torna uma função com parâmetros (cores, detalhe ativado ou desativado abaixo de um tamanho). Um script renderiza todos os ativos a partir dela; icon-assets.md tem a matriz e a regra por trás de cada tamanho. No aplicativo, desenhe a marca com um componente a partir dos mesmos números em vez de enviar PNGs, para que fique nítida em todos os tamanhos e possa mudar de cor no modo escuro.

Em seguida, um kit de logotipo (versões com texto e marca pura, claro e escuro, SVG e PNG) nos docs do repositório, para que ninguém tire um print do aplicativo para obter um logotipo.

5. Tipografia

Fontes auto-hospedadas, subconjunto para woff2 com fontTools (os scripts que o produto precisa, mais sua moeda e símbolos), eixos variáveis mantidos. Uma compilação que baixa fontes tem uma dependência de rede que pode falhar em um deploy. (verificado em 2026-10: next/font/google falhou uma compilação do Vercel dessa forma.)

6. Arte da loja e pôsteres

• Renderize molduras de loja como HTML através do Chrome headless nos tamanhos atuais da loja (verificado em 2026-10: fotos de telefone Play 1080x1920, gráfico de destaque 1024x500, ícone de listagem 512px RGB sem alfa). Use capturas reais de um telefone real dentro de uma moldura desenhada. O Chrome pode sair com código diferente de zero após escrever, então trate o arquivo de saída como o sinal de sucesso.
• Nenhum nome ou dado de usuário real em qualquer tela, e cada afirmação na cópia verdadeira para a compilação em revisão.
• Envie com play.py icon e play.py art (veja expo-release). O ícone de listagem é seu próprio ativo; nenhuma compilação o altera.
• Pôsteres e miniaturas: projete para cada corte que o aplicativo fizer, e envie cada renderização para um novo caminho (veja mobile-performance, Imagens).