O que banner-forge faz?

Transforme uma configuração de marca em uma campanha de display completa e pronta para rede. Prioridade à configuração, Figma opcional. Todo entregável com menos de 150KB, com clickTag vinculado e aprovado no validador.

Quando invocar

Use esta skill quando o usuário solicitar:

Gerar banners de anúncios, anúncios de display, tamanhos IAB ou banners HTML5
Redimensionar um criativo para as especificações de rede de anúncios
Produzir zips para Google Ads / DV360 / TTD / Adform / Amazon DSP
Transformar um frame do Figma em banners de produção
Animar um banner com GSAP
Validar um banner HTML5 existente contra regras de rede

Não invocar para: criativos estáticos ou em vídeo para feed do Meta/LinkedIn/TikTok (o Meta recusa HTML5 — encaminhe o usuário para o caminho V1 estático/vídeo quando disponível, ou produza PNG/MP4 estático diretamente).

Princípio fundamental

Um único pipeline, baseado em arquivos e retomável. Cada estágio lê sidecars JSON do estágio anterior e escreve os seus próprios. Falhas são isoladas a um estágio. Nunca reconstrua o que você não precisa.

banner.config.json
    → scripts/build.js    → build/<size>/{index.html, assets/, meta.json}
    → scripts/render.js   → build/<size>/{backup.png, preview.gif, preview.mp4}
    → scripts/package.js  → dist/<network>/<size>.zip
    → scripts/validate.js → dist/validation-report.json

Caminho feliz (config → entregáveis)

Verifique se um arquivo banner.config.json existe na raiz do projeto. Se não existir, copie banner.config.example.json e peça ao usuário para preenchê-lo.
Execute node scripts/build.js — os templates em templates/gsap/ são preenchidos a partir da configuração e escritos por tamanho em build/<size>/.
Execute node scripts/render.js — Puppeteer captura o último frame da animação como backup.png (comprimido com sharp), depois um MP4 completo via page.screencast nativo e um GIF via gifski.
Execute node scripts/package.js — constrói zips por rede em dist/<network>/<size>.zip com o manifesto correto (Adform manifest.json, Google index.html na raiz com variável clickTag).
Execute node scripts/validate.js — verifica tamanho do arquivo (≤150KB), presença de clickTag, assets necessários e correção do manifesto. Escreve dist/validation-report.json.
Resuma para o usuário: tamanhos construídos, bytes totais, falhas de validação e onde os zips foram parar.

Todos os cinco estágios são encapsulados por scripts/build-all.sh ou npm run all.

Pontos de entrada

A partir de um arquivo de configuração (padrão, sem Figma)

O usuário fornece ou edita banner.config.json. A skill executa o pipeline de quatro estágios. Veja banner.config.example.json para o esquema.

A partir de um frame do Figma

/banner-from-figma <url> aciona scripts/figma-import.js, que usa o MCP do Figma para extrair tokens, estilos de texto e assets em um banner.config.json e, em seguida, segue para o pipeline padrão.

Fallback gracioso para usuários Figma com licença gratuita: a escrita de volta requer uma licença paga do Figma. A skill detecta isso e degrada para modo somente leitura, gravando a configuração gerada no disco em vez de enviar variantes de volta ao arquivo Figma. Registre um único aviso e continue.

A partir de um brief (sem Figma, sem configuração)

/banner-from-brief <path> lê um brief (markdown, texto, PDF via futura extração de PDF), pede ao Claude que sintetize tokens da marca + texto + tamanhos + redes em banner.config.json e, em seguida, segue para o pipeline padrão.

Matriz de tamanhos canônica

Consulte references/SIZES.md para a tabela completa. Os 15 tamanhos MVP:

300x250, 336x280, 300x600, 728x90, 970x90, 970x250, 160x600, 120x600, 320x50, 320x100, 300x50, 300x1050, 468x60, 250x250, 200x200.

Regras:

Tamanhos com destino ≤ 50KB (300x50, 320x50, variantes mobile-first de 300x600) devem usar o template CSS-only, não GSAP. Consulte references/ANIMATION.md.
Tamanhos com um limite fixo de polite-load (Google 150KB inicial / 2,2MB total) são pré-validadas em scripts/validate.js.

Padrão clickTag

Use o padrão global duplo para que um único zip passe no Google, DV360, TTD e Adform:

<script>
  var clickTag = "https://exemplo.com/landing";
  var clickTAG = clickTag; // TTD + Adform legado em maiúsculas
</script>

Adform adicionalmente requer um manifest.json na raiz do zip. scripts/package.js lida com isso por rede.

Regras completas: references/CLICKTAG.md.

Animação

Padrão: GSAP 3.13+ (gratuito para uso comercial, incluindo anúncios a partir de abril de 2025). Agrupado via npm, embutido no build.
Tamanhos ≤50KB: Template CSS-only. Zero bytes de JS.
Nunca: Lottie carregado de lottiefiles.com (CORS rejeitado pelo Google Ads). Se Lottie for necessário, embutir o JSON — esse template vai para V1.
Nunca: Runtime Rive, Canvas puro ou WebGL em display programático (DSPs rejeitam).

Consulte references/ANIMATION.md para a árvore de decisão completa.

Redes suportadas

MVP: Google Ads, DV360, The Trade Desk, Adform. V1: Amazon DSP (2x retina).

Diferenças por rede (manifesto, polite-load, retina, capitalização clickTag) são tratadas em scripts/package.js orientadas por references/NETWORK_SPECS.md.

Fontes

Agrupe apenas famílias Fontsource (OFL, Apache, Ubuntu Font License). Apenas auto-hospedadas — nunca acesse fonts.googleapis.com em tempo de execução (GDPR).

Recuse: Helvetica, Futura, qualquer família Adobe Fonts, qualquer fonte de fundição (Monotype, H&Co, Commercial Type). Substitua por Inter / Figtree / Manrope e registre um aviso.

Consulte references/LEGAL.md para a regra completa de fontes.

Imagens

MVP: apenas imagem de herói fornecida pelo usuário.

V1: geração opcional por IA via Nano Banana (Gemini 2.5 Flash Image) ou FLUX.1 schnell (Apache 2.0). Nunca FLUX.1 dev — não comercial. Consulte references/IMAGE_MODELS.md. A saída de IA aciona a preservação de metadados C2PA; removê-los viola a política da plataforma.

Modos de falha a serem observados

Primeiro download do Puppeteer — ~170MB Chromium. Avise o usuário antes do primeiro npm install.
gifski não instalado — optionalDependencies no package.json; render.js recai para apenas ffmpeg se ausente e registra um aviso de qualidade.
Configuração sem clickUrl — recuse construir. clickTag sem URL é inútil.
Configuração referencia uma fonte não presente em assets/fonts/ — avise e substitua.
Imagem de herói ausente — a construção prossegue com um placeholder neutro; o validador sinaliza.
Falha de escrita de volta do MCP Figma (licença gratuita) — registre aviso, escreva configuração no disco, continue.
Erro de digitação no nome da rede — package.js lista redes válidas e sai.

Divulgação progressiva

Tudo acima é a referência em contexto. Material mais profundo está em references/ e é carregado apenas quando necessário:

references/SIZES.md — tabela de tamanhos canônica, disponibilidade por rede, limites de tamanho de arquivo.
references/NETWORK_SPECS.md — formas de manifesto, polite-load, retina, capitalização clickTag por rede.
references/CLICKTAG.md — o snippet global duplo exato e variações por rede.
references/ANIMATION.md — árvore de decisão GSAP vs CSS vs Lottie, convenções de temporização.
references/IMAGE_MODELS.md — Nano Banana, FLUX, Imagen, licenciamento, risco de marca d'água.
references/LEGAL.md — divulgação de IA, licenciamento de fontes, marcas registradas, FTC/DSA/EU AI Act.

Critérios de sucesso

Uma execução bem-sucedida produz, para cada tamanho:

Um index.html autônomo (sem CDN externo, exceto a ponte clickTag)
Um backup.png abaixo de 40KB
Uma prévia GIF (opcional) e prévia MP4 (opcional)
Um zip por rede abaixo de 150KB com manifesto + polite-load + clickTag duplo
Uma entrada de relatório de validação de pass ou pass-with-warnings

Falhe alto. Nunca envie um banner que o validador sinalizar sem informar o usuário.

banner-forge

O que é banner-forge?

Perguntar na sua IA favorita

Documentação