Design de pôsteres de campanha

Design de Cartazes de Campanha

Para o usuário: envie uma mensagem, por exemplo:

Use a skill de design de cartazes de https://github.com/greatopomu/claude-assets para criar 5 cartazes do Instagram para [marca]. Aqui está o site / folheto antigo deles: [link ou arquivo].

É isso. O Claude pergunta por qualquer outra coisa que precisar.

Para o Claude: este arquivo te diz como executar todo o trabalho. Siga-o do início ao fim. Mantenha o esforço do usuário baixo: pergunte uma vez, depois trabalhe.

---

Parte 0: Configuração (faça isso primeiro, silenciosamente)

As ferramentas auxiliares estão no mesmo repositório, em tools/. Caminhos abaixo como tools/export_png.py são relativos à raiz do repositório.

1. Obtenha as ferramentas. Se você puder executar comandos e o repositório ainda não estiver neste computador: git clone --depth 1 https://github.com/greatopomu/claude-assets.git Se o git não estiver disponível, baixe https://github.com/greatopomu/claude-assets/archive/refs/heads/main.zip e descompacte-o.
2. Instale e verifique: python -m pip install -r tools/requirements.txt depois python tools/check_setup.py. Ele relata o que funciona neste computador. Para provar que todas as ferramentas funcionam, execute python tools/selftest.py.
3. Comece a partir do modelo: copie skills/poster-design/template/index.html para a pasta do projeto. Ele já contém os tokens da marca, a página de pré-visualização (Ajustar / Telefone / 100%) e o modo de exportação ?solo=pN.

Soluções alternativas. Informe claramente ao usuário qual destas se aplica.

Se isso estiver faltando	Faça isso em vez disso
Sem como executar código (um chat simples)	Construa os cartazes como um único arquivo HTML (ou um artefato) usando o modelo. Para exportar, o usuário abre o arquivo no Chrome, adiciona ?solo=p1 ao endereço, abre as Ferramentas do Desenvolvedor (F12 / Cmd+Opt+I) → Menu de Comandos (Ctrl/Cmd+Shift+P) → "Capture full size screenshot". Repita para cada cartaz.
Python funciona, mas nenhum navegador encontrado	Instale Google Chrome ou Edge, defina CHROME_PATH para um navegador baseado em Chromium, ou execute pip install playwright e depois python -m playwright install chromium. Caso contrário, use a exportação manual acima.
Sem Higgsfield CLI ou créditos	Use fotos de banco de imagens (Rota A) ou ChatGPT (Rota B).
Sem navegador embutido (Claude desktop) para ChatGPT	Peça ao usuário para gerar a imagem no ChatGPT e baixá-la, depois compartilhe o arquivo.
Não é possível baixar da internet	Peça ao usuário para baixar as fotos de banco de imagens escolhidas e compartilhá-las.

As ferramentas de imagem são ajudantes opcionais. Se uma não puder ser executada, faça a mesma etapa de outra forma (por exemplo, escolha fotos manualmente) e continue.

---

O que você está fazendo

Cartazes de campanha projetados que parecem ter sido feitos por um designer gráfico sênior. Eles não são imagens de IA com texto sobreposto.

• Construa cada cartaz em HTML, CSS e SVG e depois exporte-o como PNG com um navegador headless (tools/export_png.py).
• Imagens (pessoas, produtos, lugares) são apenas ingredientes. Você as obtém de uma das três rotas (Parte 4). Uma ferramenta de imagem nunca faz o cartaz finalizado.
• Cada marca recebe seu próprio visual. O método permanece o mesmo; a direção de arte é escolhida novamente a cada vez. Nunca reutilize layouts de outra marca.

---

Parte 1: Pergunte primeiro (uma mensagem, apenas o que está faltando)

Leia a mensagem do usuário e quaisquer arquivos ou links. Depois envie uma mensagem curta com apenas as perguntas que você ainda precisa ver respondidas. Ofereça um padrão sensato para cada uma, para que o usuário possa responder "padrões estão bons".

Pergunte sobre estes itens, nesta ordem, pulando qualquer coisa já respondida:

1. Informações básicas da marca: nome, o que vende, cidade ou país, quem são os clientes.
2. Ativos da marca: arquivo de logotipo, cores da marca (ou site ou folheto do qual você possa amostrá-las) e quaisquer fontes da marca.
3. Tamanho e uso: padrão 1080 × 1350 para Instagram. Outras opções: 1080 × 1080, 1080 × 1920 stories, A4 ou A3 para impressão.
4. Quantos cartazes e o que cada um deve dizer: por exemplo, serviços, ofertas, um evento, ou "sua escolha".
5. Detalhes obrigatórios: preços, datas, número de telefone, endereço, site ou call to action. Qualquer coisa não fornecida é marcada como um espaço reservado.
6. Regras para pessoas: padrão são as regras da Parte 6.
7. Imagens: padrão é usar o que estiver disponível, nesta ordem: fotos de banco de imagens (gratuitas), ChatGPT no navegador embutido (gratuito, limitado), depois Higgsfield (créditos pagos). Pergunte se créditos pagos podem ser usados.
8. Onde salvar: padrão é uma nova pasta com o nome da marca.

Não pergunte sobre escolhas de design como estilo, layout ou efeitos. Essas são suas responsabilidades. Você mostrará a direção na Parte 2.

---

Parte 2: Planeje, depois mostre um ponto de verificação

Faça tudo isso sozinho, depois mostre ao usuário um plano curto para aprovação.

1. Amostre as cores da marca dos arquivos deles com um script (tools/sample_colours.py); não adivinhe. Planeje redesenhar o logotipo como SVG limpo, nunca um recorte borrado.
2. Pesquise a categoria: como 3 ou 4 marcas líderes anunciam (layout, tipo, imagens, tom), incluindo um concorrente local. Pegue emprestado o pensamento, nunca os ativos. Salve anotações e fontes em RESEARCH.md.
3. Colete verdades locais: lugares reais, hábitos cotidianos, palavras que as pessoas realmente usam e detalhes regionais. Exemplos de detalhes regionais: a cor de veículo usual naquele estado, ou vestimenta local.
4. Escolha a direção de arte: escolha uma opção por linha da tabela da Parte 3, para se adequar a esta marca e público. Também escolha as fontes (Google Fonts) e como as cores são usadas: qual lidera, qual é o acento e quais são os fundos.
5. Escreva as ideias dos cartazes: para cada cartaz, uma ideia, um título com menos de 8 palavras, uma frase de apoio que comece com o que o cliente ganha, um call to action, a imagem necessária e seu elemento de história. Nenhum dois cartazes compartilham um layout ou elemento de história.

Ponto de verificação, o único antes de construir. Mostre ao usuário:

• as cores
• a direção de arte em 2 ou 3 linhas
• as fontes
• a lista de cartazes com seus títulos

Pergunte "Pode prosseguir, ou quer mudar algo?" Mantenha curto.

---

Parte 3: Escolhas de direção de arte

Escolha por marca. Marcas diferentes devem diferir em várias linhas.

Escolha	Opções
Iluminação	escuro e dramático · claro e arejado · tons médios terrosos · preto e branco mais uma cor
Uso de cor	uma cor lidera com um acento · fotos duotônicas · blocos de cor ousados · neutro com um acento da marca
Tipo	grotesco pesado · condensado e alto · geométrico redondo · serifa editorial mais sans-serif · acento manuscrito
Formas	blobs e ondas orgânicos · ângulos geométricos duros · linhas finas e grades · papel recortado · círculos e arcos
Tratamento de foto	recorte sobre formas · sangria total com sobreposição de cor · foto dentro de uma forma · faixa larga de foto · tingida · colagem
Textura e luz	brilhos e rastros de luz · plano e limpo · granulado · pontos de meio-tom · apenas sombras suaves
Layout	título no topo, imagem abaixo · tela dividida · imagem centralizada, tipo ao redor · liderado por tipo · diagonal · grade de painéis
Elemento de história	cartão de aplicativo ou interface · adesivo ou selo · ingresso ou recibo · mapa ou rota · número grande ou gráfico · citação · antes e depois

Não defina como padrão fundos escuros com acentos brilhantes. Use-os apenas quando a marca pedir.

---

Parte 4: Obtendo imagens (três rotas)

Use a rota que se adequa a cada cartaz. Verifique cada imagem contra as regras de pessoas (Parte 6) antes de usá-la. Registre fontes e licenças em RESEARCH.md.

A. Fotos de banco de imagens (Pexels, Unsplash, Pixabay). Grátis, pessoas e lugares reais.

• Pesquise com várias consultas locais.
• Compare 20 a 30 miniaturas em uma única folha de contato (tools/contact_sheet.py).
• Rejeite fotos com:
  • o lugar ou pessoas erradas
  • uma violação das regras
  • placas de carro legíveis ou detalhes privados
  • danos ou bagunça que prejudique a mensagem
  • sem espaço para texto
• Baixe com 1600 a 2000 px de largura.
• Corrija detalhes locais se necessário. tools/recolour.py muda uma cor dentro de uma área.
• Deixe a forma da foto decidir o layout: fotos em retrato funcionam em sangria total; fotos em paisagem funcionam como uma faixa ou dentro de um quadro.

B. ChatGPT no navegador embutido. Grátis; melhor para cenas completas.

• O usuário deve estar logado. Digite um prompt detalhado: assunto, roupas que sigam as regras, cenário, luz, "portrait 4:5, no text, no logos".
• Para mudar um detalhe, fique na mesma conversa do ChatGPT: "Same image, change only …".
• Limite: o plano gratuito permite cerca de 3 imagens por dia.
• Obtendo o arquivo: o download do ChatGPT não funciona a partir do painel do navegador.
  • Melhor: peça ao usuário para clicar em baixar e te dizer o nome do arquivo.
  • Alternativa: mostre a imagem em tela cheia em seu tamanho real, capture-a em blocos de screenshot 2 × 2 e junte-os com tools/stitch_tiles.py.

C. Higgsfield. Créditos pagos; melhor para recortes.

• Verifique o saldo e o preço primeiro (higgsfield account status, higgsfield generate cost …).
• GPT Image 2.6 com --background transparent dá recortes. Use qualidade média para pessoas e baixa para objetos. O plano básico executa cerca de 4 trabalhos de uma vez.
• Limpe o brilho fraco ao redor de cada recorte com tools/clean_cutout.py.
• Para mudar um detalhe de uma imagem, passe-a de volta com --image e descreva apenas a mudança.

Cada prompt de imagem afirma: o assunto e ação, roupas que seguem as regras de pessoas, iluminação que corresponde ao clima do cartaz, enquadramento, "fotorrealista, sem texto, sem logotipos, sem marca d'água", e espaço deixado para texto quando é uma cena completa.

---

Parte 5: Construindo os cartazes

Configure primeiro (comece de skills/poster-design/template/index.html):

• um index.html com tokens de cor, fontes e o logotipo como um símbolo SVG
• uma assinatura compartilhada (logotipo mais estilo de call to action) que se adequa à direção de arte
• uma página de pré-visualização mostrando cada cartaz na proporção real, dimensionado para caber, com botões Ajustar / Telefone (390 px de largura) / 100%
• um modo ?solo=pN para exportação
• sirva a pasta de um servidor local (não file://) e abra-a no painel do navegador

Cada cartaz:

• Uma ideia: título, linha de apoio, call to action.
• Pelo menos quatro camadas, com pelo menos um elemento cruzando na frente do assunto.
• Um elemento de história que mostra o produto funcionando, como um cartão de aplicativo realista, ingresso, rastreador, mapa ou selo.
• Formas, gradientes e luz personalizados, não caixas de modelo.
• Varie os efeitos de assinatura em todo o conjunto, mantendo o sistema compartilhado.

Princípios de design (não negociáveis). Estes são os erros que fazem um cartaz parecer feito por máquina. Planeje para eles enquanto constrói, não apenas no final.

• Espaço para respirar. O texto tem pelo menos 24 px de espaço livre (40 px é melhor) de cada borda de forma, anel, linha, selo e imagem. Um círculo ou anel nunca deve correr ao longo, através ou perto do texto.
• Sem quase-acertos. Dois elementos ou se sobrepõem claramente e intencionalmente (por um quarto do menor ou mais), ou ficam bem separados. Bordas que quase se tocam, ou se alinham por acidente, parecem um erro. Exemplos: o topo de um produto alinhado com o topo do círculo atrás dele, ou um adesivo raspando em um canto da caixa.
• Círculos encontram painéis claramente. Um círculo que encontra um rodapé ou faixa ou para bem antes dele (24 px ou mais) ou vai claramente por baixo dele (40 px ou mais). Nunca apenas roça a borda.
• Embalagem clara. Verifique cada recorte na cor de fundo real do cartaz, não apenas no branco e preto. Fundo residual, bordas serrilhadas e áreas sólidas "foscas" só aparecem na cor real.
• Menos decorações. Cada anel extra, contorno ou folha é mais uma coisa que pode apertar o texto. Se não adicionar significado, deixe de fora.
• Hierarquia visual. Decida a ordem de leitura: (1) título ou produto, (2) linha de apoio, (3) elemento de história, (4) assinatura. Tamanho, peso e cor devem seguir essa ordem. Apenas uma coisa grita.
• Emparelhamento e agrupamento. Cada ícone fica bem ao lado da única coisa que rotula, com espaçamento igual em cada par. Cada detalhe de contato tem seu próprio ícone: WhatsApp ao lado do número, Instagram ao lado do identificador. Agrupe itens relacionados sob um pequeno cabeçalho ("Peça agora", "Disponível em"). Separe grupos não relacionados com espaço claro.
• Alinhamento.
  • Uma margem esquerda para o logotipo, título, corpo e rodapé.
  • Blocos de rodapé alinham-se ao topo, para que seus pequenos cabeçalhos compartilhem uma linha.
  • Linhas e colunas de selos têm espaçamento uniforme e medido.
• Quebras de linha.
  • O texto corrido nunca termina em uma única palavra curta. Use text-wrap: balance em títulos e texto do corpo, depois leia cada linha.
  • Uma quebra deve cair entre frases, não dentro de uma ("over oats, / guinea corn" está errado; "over / oats, guinea corn and soy pulp" está certo).
  • Os títulos quebram por significado, com um <br> onde você escolher.
• Um nome por coisa. Use os mesmos nomes de produtos ou sabores, listas de ingredientes e alegações em cada cartaz do conjunto. Antes de publicar, liste cada alegação (como "sem adição de açúcar" ou "100% natural") para o cliente confirmar.
• O rodapé também é projetado. Ele recebe o mesmo cuidado que o herói: hierarquia, emparelhamento, alinhamento e pelo menos 36 px de preenchimento.

Menu de técnicas (escolha por cartaz; não use todas):

• Profundidade:
  • ordem das camadas: fundo → textura → brilho ou campos de cor → formas → assunto → elemento de primeiro plano → elemento de história → sobreposição para legibilidade → tipo → assinatura
  • uma linha, forma ou cartão de primeiro plano cruzando o assunto
  • um assunto saindo de seu cartão ou quadro
  • um cartão colocado atrás do assunto para que uma mão se sobreponha a ele
• Luz e cor:
  • um brilho radial desfocado atrás do assunto
  • luz de borda solicitada no prompt de imagem para combinar com o cartaz
  • rastros de luz (um caminho SVG desenhado duas vezes: brilho desfocado mais núcleo nítido)
  • tipo de contorno ou neon usando filter: drop-shadow empilhado (não text-shadow)
  • uma sobreposição de cor da marca em fotos: clara no assunto, sólida atrás do texto
  • reclassificar uma imagem (dia para noite, mais quente) com um script
• Forma e textura:
  • blobs ou ondas com uma linha de acento fina
  • bordas de foto curvas ou anguladas
  • grades desbotadas, pontos ou padrões
  • anéis e raios
  • selos circulares com texto em um caminho (<textPath> com textLength)
• Tipo:
  • uma face de exibição pesada e uma face de texto limpa
  • entrelinhamento do título 0,85 a 0,92, ligeiramente apertado

...

[truncado para tradução]