Criativos por produto
Especificação de cada peça de anúncio. Nada aqui é feito no Canva: o criativo é template HTML mais dados JSON, renderizado em PNG pelo Chromium headless. Determinístico, versionado em git, na marca por construção.
Por que HTML e não design manual
| Canva | Fábrica HTML |
|---|---|
| Uma peça por vez, na mão | 30 peças num comando |
| Marca depende da disciplina de quem monta | Marca garantida no código |
| Testar 20 criativos por semana é inviável | É um arquivo YAML |
| Não dá para validar 20% de texto | Validação automática rejeita a peça |
| Nome do arquivo inconsistente | Nome do arquivo é o nome do anúncio e a utm_content |
Aquele último ponto é o que faz o painel de ROI conseguir dizer qual imagem vendeu.
Formatos
| Nome | Tamanho | Onde |
|---|---|---|
feed | 1080×1080 | Meta feed, Instagram |
story | 1080×1920 | Stories e Reels |
horizontal | 1200×628 | Meta feed horizontal, Google Display |
og | 1200×630 | Open Graph das landings |
carrossel | 1080×1080 ×N | Carrossel de até 6 cartões |
Superfícies e a regra de etapa
Quatro superfícies do manual (item 13), usadas conforme a etapa do funil:
| Superfície | Fundo | Etapa |
|---|---|---|
branco | #FFFFFF | Prospecção — é o padrão |
nevoa | linear-gradient(180deg,#FFFFFF,#EEF4FF) | Prospecção com mockup |
profundo | as três camadas oficiais | Retargeting |
navy | #0B1033 sólido | Dado puro, prova |
A fábrica impõe isso no código: superficie=profundo ou navy com etapa=prospeccao levanta exceção. Isso evita queimar prospecção com criativo escuro, que é o erro mais comum e o mais caro.
Templates
1. afirmacao
Título Figtree 700 entre 72 e 96 px, até três linhas, ancorado na base. Logo e @ no topo esquerdo a 28 px. Margem de 96 px. Botão pílula.
2. dado
Número gigante entre 200 e 260 px, azul 700 tabular (ou #8DB0FF em fundo escuro). Legenda de até 12 palavras com período e base. Título na base.
3. mockup_alerta
Card branco simulando o alerta do Radar de Preço: nome do produto, preço riscado em #6B7790, preço novo em #0A5BF0 700 tabular, pílula #DC2626 com o percentual.
4. mockup_lista
Três cards empilhados simulando o feed do Radar de Anúncios, cada um com miniatura, nome do concorrente e pílula verde #16A34A com "{n} dias no ar".
5. mockup_relatorio
Capa do Raio-X em moldura com sombra — a única sombra permitida em todo o sistema — com KPI grande em destaque.
6. carrossel
Capa Névoa com "Arraste →" e contador. Internos brancos com número grande azul e até 18 palavras. Penúltimo em navy com o dado. Último em Profundo com CTA.
Radar de Preço — as peças
Prospecção · fundo branco
A1 · mockup_alerta — o ângulo da perda
Centro: card branco, borda 1 px #E1E6F0, raio 12. Dentro: "Tênis Runner Preto 42", R$ 289,90 riscado em #6B7790, R$ 259,90 em #0A5BF0 700 tabular, pílula #DC2626 com "−10,3%". Abaixo, em #6B7790 14 px: "Loja X · coletado hoje às 6h12".
Título na base: "O concorrente baixou. Você soube." Botão: Testar grátis
A2 · dado — o ângulo da prova
Número: 62% em 240 px azul 700 tabular. Legenda: "das lojas analisadas tinham o produto campeão mais caro que o concorrente". Base: "1.400 lojas · ago/2026". Título: "Seu campeão está mais caro?"
Este número só vai ao ar quando a análise real existir. Enquanto não existir, roda A1 e A3.
A3 · afirmacao — o ângulo do trabalho manual
Fundo branco limpo, sem mockup. Título ocupando a base: "Você ainda confere preço de concorrente na mão?" Linha de condição em #6B7790: "30 produtos, 3 concorrentes cada, todo dia. R$ 97 por ano."
Retargeting · Profundo
A4 · dado sobre Profundo — a objeção de preço
Número: R$ 0,27 em #8DB0FF. Legenda: "por dia. É o que custa saber o preço do concorrente." Base: "plano anual · 30 produtos". Título branco: "A primeira venda que você não perder já pagou."
A5 · afirmacao sobre Profundo
"Seus 30 produtos. 3 concorrentes cada. Todo dia." Condição: "Começa a rodar hoje. R$ 97 pelo ano inteiro."
Radar de Anúncios — as peças
Prospecção · fundo branco
B1 · mockup_lista — o ângulo da curiosidade
Três cards empilhados, cada um com miniatura cinza neutra, nome do concorrente e pílula verde "47 dias no ar", "31 dias no ar", "9 dias no ar".
Título na base: "Roda há 47 dias. Não é por acaso." Condição: "Acompanhe os anúncios do concorrente. R$ 49 por mês."
B2 · dado — o ângulo do atalho
Número: 21 dias. Legenda: "é quanto um anúncio precisa ficar no ar para você saber que ele converte". Base: "biblioteca pública de anúncios da Meta". Título: "O criativo que funciona já existe."
B3 · afirmacao — o ângulo da economia
"Pare de pagar para aprender o que já se sabe." Condição: "Testar criativo do zero custa caro. Ver o que já roda custa R$ 49."
Retargeting · Profundo
B4 · mockup_lista invertido sobre Profundo, cards escuros, pílula verde mantida. Título: "10 concorrentes. Todo dia. R$ 49 por mês."
Raio-X — as peças de maior volume
É a campanha que mais deve rodar, porque converte melhor: não pede cartão.
Prospecção · Névoa
C1 · mockup_relatorio — o ângulo do dinheiro parado
Capa do relatório em moldura com sombra, mostrando o KPI R$ 84.300 em azul 700 tabular, com a legenda "parados na base · últimos 12 meses · loja real, dados autorizados".
Título na base: "Seu lucro está na recompra." (frase oficial do manual) Botão: Conectar minha loja Condição: "Grátis, sem cartão. 3 minutos."
C2 · dado — o ângulo da compra única
Número: 7 em 10 em 220 px azul 700 tabular. Legenda: "clientes da loja média compram uma vez e não voltam". Base: "e-commerce brasileiro · 2026". Título: "Quantos são na sua?"
C3 · afirmacao — o ângulo do diagnóstico
"Sua loja inteira em um relatório. Em 3 minutos." Condição: "Faturamento, recompra, curva RFV e capital parado. Grátis."
Retargeting · Profundo
C4 · dado sobre Profundo
Número: 3 minutos em #8DB0FF. Título: "Você começou e não terminou." Condição: "Conecte a loja e veja o relatório. Sem cartão."
Carrossel institucional
Seis cartões, capa Névoa, para prospecção e para orgânico.
| Cartão | Superfície | Conteúdo |
|---|---|---|
| 1 · capa | Névoa | "4 números que a sua loja não te mostra" · "Arraste →" · contador 1/6 |
| 2 | Branco | 71% · "compraram uma vez só" |
| 3 | Branco | R$ 84.300 · "parados na base de clientes" |
| 4 | Branco | 47 · "produtos com estoque e zero venda em 90 dias" |
| 5 | Navy | 3 minutos em #8DB0FF · "é o que leva para descobrir os seus" |
| 6 · fechamento | Profundo | "Conectar minha loja" · botão · condição |
Validações que a fábrica aplica
A peça é rejeitada, com mensagem explícita, se:
- Texto ocupar mais de 20% da área renderizada
- Faltar margem mínima — 96 px no 1080, zona segura de 250 px no story
- Houver mais de um degradê na peça
- Houver degradê em texto ou ícone
- Contraste abaixo de AA
- O texto contiver palavra proibida
- Faltar período ou base num template
dado superficieescura cometapa=prospeccao
Nomenclatura
{produto}-{template}-{angulo}-{formato}-{superficie}.png
Exemplos:
preco-mockup-perda-feed-branco.png
preco-dado-62-feed-branco.png
anuncios-lista-curiosidade-feed-branco.png
raiox-relatorio-parado-feed-nevoa.png
raiox-dado-7em10-story-branco.png
Esse nome vira, sem alteração:
- o nome do anúncio na Meta
- o valor de
utm_contentna URL de destino - a chave de junção no painel de ROI
Divergência entre os três falha a validação no publicador. É a disciplina que sustenta toda a medição.