SmartHub AppsMáquina de aquisição

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

CanvaFábrica HTML
Uma peça por vez, na mão30 peças num comando
Marca depende da disciplina de quem montaMarca garantida no código
Testar 20 criativos por semana é inviávelÉ um arquivo YAML
Não dá para validar 20% de textoValidação automática rejeita a peça
Nome do arquivo inconsistenteNome 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

NomeTamanhoOnde
feed1080×1080Meta feed, Instagram
story1080×1920Stories e Reels
horizontal1200×628Meta feed horizontal, Google Display
og1200×630Open Graph das landings
carrossel1080×1080 ×NCarrossel 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ícieFundoEtapa
branco#FFFFFFProspecção — é o padrão
nevoalinear-gradient(180deg,#FFFFFF,#EEF4FF)Prospecção com mockup
profundoas três camadas oficiaisRetargeting
navy#0B1033 sólidoDado 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ãoSuperfícieConteúdo
1 · capaNévoa"4 números que a sua loja não te mostra" · "Arraste →" · contador 1/6
2Branco71% · "compraram uma vez só"
3BrancoR$ 84.300 · "parados na base de clientes"
4Branco47 · "produtos com estoque e zero venda em 90 dias"
5Navy3 minutos em #8DB0FF · "é o que leva para descobrir os seus"
6 · fechamentoProfundo"Conectar minha loja" · botão · condição

Validações que a fábrica aplica

A peça é rejeitada, com mensagem explícita, se:

  1. Texto ocupar mais de 20% da área renderizada
  2. Faltar margem mínima — 96 px no 1080, zona segura de 250 px no story
  3. Houver mais de um degradê na peça
  4. Houver degradê em texto ou ícone
  5. Contraste abaixo de AA
  6. O texto contiver palavra proibida
  7. Faltar período ou base num template dado
  8. superficie escura com etapa=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:

Divergência entre os três falha a validação no publicador. É a disciplina que sustenta toda a medição.

© 2026 EcomSmart · Uso interno · pt-BR