Gerador de Infográficos
Gere especificações completas de infográficos a partir de qualquer conteúdo, dado ou tópico. Produz layout estruturado + todo o texto + pontos de dados + esquema de cores — pronto para renderizar como HTML/CSS, com Satori (server-side), no Canva, Figma ou qualquer ferramenta de design.
Postagens no LinkedIn com imagens têm 2 a 3 vezes mais engajamento. Este skill transforma seu conteúdo em ativos visuais sem habilidades de design.
Inspirado pela renderização Satori do content-pipeline: IA escreve o conteúdo → spec estruturado → renderizado como imagem com marca.
Estágio
Este skill pertence ao Estágio S2: Conteúdo
Quando Usar
- Após
viral-post-writercriar uma postagem no LinkedIn — adicione um visual - Após
content-research-briefcoletar estatísticas — visualize-as - Ao criar conteúdo de comparação — gráfico de comparação de recursos/preços
- Ao compartilhar dados ou estatísticas — cartões de destaque de estatísticas
- Ao criar uma lista — lista de verificação visual ou lista numerada
- Para qualquer postagem em mídia social que se beneficiaria de uma imagem com marca
Esquema de Entrada
content: string # (obrigatório) Conteúdo a visualizar — texto de postagem, dados ou artigo
infographic_type: string # (opcional, padrão: detectado automaticamente)
# "stat_highlight" — 1 a 3 números-chave, grandes e em negrito
# "comparison" — comparação lado a lado de produto/recurso
# "process_flow" — fluxo de trabalho passo a passo ou instruções
# "checklist" — lista de itens com marcadores de verificação
# "timeline" — eventos cronológicos
# "data_chart" — representação de gráfico de barras/pizza
# "quote_card" — citação em destaque com atribuição
# "feature_grid" — grade de recursos/benefícios com ícones
platform: string # (opcional, padrão: "linkedin")
# "linkedin" — 1080×1350 (retrato, engajamento ideal)
# "instagram" — 1080×1080 (quadrado)
# "twitter" — 1200×675 (paisagem)
# "facebook" — 1200×630
# "blog" — 1200×800 (imagem em destaque)
brand: object # (opcional) Personalização de marca
name: string # Nome da empresa/marca pessoal
primary_color: string # Hex — "#0066FF"
secondary_color: string # Hex — "#1A1A2E"
accent_color: string # Hex — "#FF6B35"
font_style: string # "modern" | "classic" | "bold" | "minimal"
logo_text: string # Logotipo baseado em texto — "Affitor" | "@seudominio"
output_format: string # (opcional, padrão: "spec")
# "spec" — spec JSON estruturado (para qualquer renderizador)
# "html" — HTML/CSS renderizável (autocontido)
# "both" — spec + HTML
Fluxo de Trabalho
Etapa 1: Analisar Conteúdo e Selecionar Tipo
Leia o conteúdo de entrada e detecte o melhor tipo de infográfico:
| Padrão de Conteúdo | Tipo Detectado Automaticamente |
|---|---|
| Contém 1 a 3 números/estatísticas proeminentes | stat_highlight |
| Contém "vs", dados de comparação | comparison |
| Contém etapas numeradas ou um processo | process_flow |
| Contém uma lista de itens (3 a 10) | checklist ou feature_grid |
| Contém datas ou eventos cronológicos | timeline |
| Contém uma citação notável | quote_card |
| Contém porcentagens ou proporções | data_chart |
Se infographic_type for fornecido, use esse. Caso contrário, detecte automaticamente.
Etapa 2: Extrair Dados Visuais
Do conteúdo, extraia exatamente o que precisa aparecer no infográfico:
Para stat_highlight:
stats:
- number: "30%" # O número grande
label: "comissão" # O que mede
context: "recorrente" # Contexto adicional
- number: "60"
label: "dias de cookie"
context: "média do setor: 30"
Para comparison:
items:
- name: "HeyGen"
features:
- label: "Comissão"
value: "30% recorrente"
highlight: true # vencedor para esta linha
- label: "Cookie"
value: "60 dias"
highlight: true
- name: "Synthesia"
features:
- label: "Comissão"
value: "25% único"
highlight: false
- label: "Cookie"
value: "30 dias"
highlight: false
Para process_flow:
steps:
- number: 1
title: "Pesquisar"
description: "Encontre programas vencedores"
icon: "🔍"
- number: 2
title: "Criar"
description: "Escreva conteúdo que converta"
icon: "✍️"
Para checklist:
items:
- text: "Comissão recorrente"
checked: true
- text: "Cookie de 60+ dias"
checked: true
- text: "Teste gratuito disponível"
checked: true
- text: "Gerente de afiliados dedicado"
checked: false
Etapa 3: Projetar Layout
Com base no tipo + plataforma, defina o layout:
Dimensões da plataforma:
| Plataforma | Largura | Altura | Proporção |
|---|---|---|---|
| 1080 | 1350 | 4:5 (retrato) | |
| 1080 | 1080 | 1:1 (quadrado) | |
| 1200 | 675 | 16:9 (paisagem) | |
| 1200 | 630 | ~2:1 | |
| Blog | 1200 | 800 | 3:2 |
Estrutura do layout (todos os tipos):
┌─────────────────────────────┐
│ CABEÇALHO │ 10 a 15% da altura
│ Manchete / Título │
├─────────────────────────────┤
│ │
│ CORPO │ 70 a 80% da altura
│ Dados / Conteúdo │
│ (layout específico do │
│ tipo) │
│ │
├─────────────────────────────┤
│ RODAPÉ │ 10% da altura
│ Marca / CTA / Fonte │
└─────────────────────────────┘
Etapa 4: Gerar Esquema de Cores
Se as cores da marca forem fornecidas: Use-as diretamente.
Se não houver cores da marca: Gere uma paleta profissional:
# Opções de paleta profissional padrão
palettes:
dark_modern: # Fundo escuro, texto claro
bg: "#1A1A2E"
text: "#FFFFFF"
accent: "#0066FF"
secondary: "#16213E"
light_clean: # Fundo claro, texto escuro
bg: "#FFFFFF"
text: "#1A1A2E"
accent: "#0066FF"
secondary: "#F0F4F8"
warm_bold: # Tons quentes
bg: "#FFF8F0"
text: "#2D2D2D"
accent: "#FF6B35"
secondary: "#FFE8D6"
dark_gradient: # Gradiente escuro
bg: "linear-gradient(135deg, #1A1A2E, #16213E)"
text: "#FFFFFF"
accent: "#00D4AA"
secondary: "#2A2A4A"
Seleção automática com base na plataforma:
- LinkedIn →
dark_modernoulight_clean(profissional) - Twitter →
dark_gradientouwarm_bold(chama atenção) - Instagram → Qualquer (maior flexibilidade visual)
Etapa 5: Gerar Todo o Texto
Escreva cada pedaço de texto que aparece no infográfico:
copy:
headline: string # Título principal — em negrito, curto (máx. 8 palavras)
subheadline: string # Linha de apoio opcional
body_items: string[] # Rótulos de dados, descrições, etc.
cta: string # Texto de chamada para ação — "Link na bio" | "Veja os comentários para o link"
footer: string # Nome da marca ou @seudominio
source: string # "Dados: openaffiliate.dev" ou atribuição de fonte
Regras de texto:
- Manchetes: 3 a 8 palavras, declaração ousada ou número específico
- Todo o texto deve ser legível em escala móvel (não muito pequeno)
- Não mais de 50 palavras no total no infográfico (menos = melhor)
- Dados > adjetivos (mostre números, não "incrível" ou "fantástico")
Etapa 6: Saída
Saída do spec (padrão):
Spec estruturado completo que qualquer renderizador pode consumir:
infographic_spec:
type: string
platform: string
dimensions:
width: number
height: number
colors:
background: string
text: string
accent: string
secondary: string
layout:
header: object
body: object
footer: object
data: object # Dados específicos do tipo (estatísticas, itens de comparação, etapas, etc.)
copy:
headline: string
subheadline: string
body_items: string[]
cta: string
footer: string
source: string
Saída HTML (se output_format for "html" ou "both"):
Gere um arquivo HTML autocontido com CSS inline que renderiza o infográfico nas dimensões exatas. Isso pode ser:
- Aberto em um navegador e capturado de tela
- Renderizado no lado do servidor com Satori ou Puppeteer
- Usado como ponto de partida para iteração de design
<!-- Autocontido, sem dependências externas -->
<div style="width: 1080px; height: 1350px; ...">
<!-- Cabeçalho -->
<!-- Corpo (específico do tipo) -->
<!-- Rodapé -->
</div>
Etapa 7: Autovalidação
Antes de apresentar a saída, verifique:
- Contagem total de palavras no infográfico ≤ 50 palavras
- Todo o texto legível com zoom de 50% (tamanho mínimo de fonte eficaz)
- Contraste de cores atende à acessibilidade (WCAG AA: proporção 4,5:1)
- Pontos de dados são precisos e atribuídos
- O layout não parece apertado — espaço em branco é intencional
- As dimensões da plataforma estão corretas
Se alguma verificação falhar, corrija antes de entregar.
Formato de Saída
## Infográfico: [Manchete]
### Spec
- **Tipo:** [stat_highlight]
- **Plataforma:** [LinkedIn] — 1080×1350
- **Cores:** [dark_modern] — bg: #1A1A2E, accent: #0066FF
### Visualização (representação de texto)
┌─────────────────────────────────┐
│ │
│ HeyGen vs Synthesia │
│ A Comparação Real │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ HeyGen │ │Synthesia │ │
│ │ │ │ │ │
│ │ 30% rec. │ │ 25% único│ │
│ │ 60 dias │ │ 30 dias │ │
│ │ ★ 127 │ │ ★ 84 │ │
│ └──────────┘ └──────────┘ │
│ │
│ 🏆 Vencedor: HeyGen │
│ │
│ ─────────────────────────── │
│ @seudominio · openaffiliate.dev │
└─────────────────────────────────┘
### Dados
[Spec estruturado como YAML ou JSON]
### HTML (se solicitado)
[Bloco de código HTML/CSS autocontido]
### Próximos Passos
- Publique no [platform] com sua postagem viral de `viral-post-writer`
- Crie variações para outras plataformas: `--platform instagram`
- Gere mais infográficos a partir de dados diferentes em seu `content-research-brief`
Tratamento de Erros
- Conteúdo sem dados extraíveis: Gere um tipo
quote_cardouchecklist. Observação: "Nenhum dado numérico encontrado. Um infográfico do tipo [tipo] foi criado." - Muitos dados para um infográfico: Selecione os 3 a 5 pontos de dados mais impactantes. Observação: "O conteúdo tem [X] pontos de dados. Os [Y] mais impactantes foram selecionados para clareza visual. Considere criar vários infográficos."
- Nenhuma cor da marca: Use a paleta padrão. Observação: "Nenhuma cor da marca especificada. Usando [nome da paleta]. Adicione cores da marca para identidade visual consistente."
- Saída HTML muito complexa: Simplifique o layout. Infográficos devem ser simples — a complexidade mata o impacto visual.
Exemplos
Exemplo 1: Usuário: "Faça um infográfico comparando HeyGen vs Synthesia para o LinkedIn" → tipo: comparison, plataforma: linkedin (1080×1350) → Extrair: comissão, cookie, avaliação, preço de cada → Saída: cartão de comparação lado a lado com vencedor destacado → Paleta dark modern, números em negrito
Exemplo 2: Usuário: "Crie um cartão de estatísticas do meu resumo de pesquisa mostrando os números-chave da HeyGen" → tipo: stat_highlight, plataforma: linkedin → Extrair: "$60M arrecadados", "40K negócios", "30% de comissão" → Saída: 3 números grandes com rótulos e contexto
Exemplo 3: Usuário: "Visualize as etapas do funil de afiliados como um infográfico" → tipo: process_flow, plataforma: blog (1200×800) → Etapas: Pesquisar → Conteúdo → Landing → Implantar → Rastrear → Otimizar → Saída: fluxo horizontal com ícones e breves descrições
Feedback e Relato de Problemas
Quando este skill produzir saída inesperada, incompleta ou incorreta, gere um
bloco skill_feedback (veja shared/references/feedback-protocol.md para o esquema completo).
Modos de falha específicos do skill:
- Nenhum dado extraível do conteúdo: O conteúdo é puramente narrativo, sem estatísticas/números. Relate como
data_quality. - A saída HTML não renderiza corretamente: Problemas de CSS, dimensões erradas, estouro de texto. Relate como
wrong_outputcom o HTML. - Muitas palavras no infográfico: >50 palavras o torna ilegível. Relate como
wrong_output.
Gatilhos de detecção automática:
infographic_spec.datatem <2 pontos de dados- Contagem total de palavras em todos os campos de texto > 60
- Dimensões não correspondem à plataforma declarada
Relate problemas: GitHub Issues | Discussions
Referências
shared/references/social-data-providers.md— fontes de dados para conteúdo de infográficoshared/references/platform-rules.md— requisitos de imagem específicos da plataformashared/references/flywheel-connections.md— mapa mestre de conexões do volanteshared/references/feedback-protocol.md— padrão de detecção e relato de problemas
Conexões do Volante
Alimenta
social-media-scheduler(S5) — infográfico pronto para agendar com postagemlanding-page-creator(S4) — infográfico como imagem herói ou visual de seçãoemail-drip-sequence(S5) — infográfico como conteúdo visual de e-mailbio-link-deployer(S5) — infográfico no hub de links
Alimentado Por
content-research-brief(S2) — estatísticas-chave e dados para visualizaçãoviral-post-writer(S2) — conteúdo de postagem para criar visual acompanhanteaffiliate-blog-builder(S3) — dados de blog para infográfico de imagem em destaquetrending-content-scout(S1) — dados de engajamento para visuais de referênciatraffic-analyzer(S1) — dados de tráfego para infográficos de comparaçãocomparison-post-writer(S3) — dados de comparação para formato visualcommission-calculator(S1) — dados de comissão para destaques de estatísticas
Loop de Feedback
- Postagens S6 com infográficos vs sem →
performance-analyser(S6)