infográfico editorial

O que infográfico editorial faz?

Estilo de referência: o post "Anthropic entra na consultoria." Esse post tem:

• uma manchete pesada de duas linhas, com a segunda linha na cor de destaque;
• um subtítulo: uma frase simples dizendo o que aconteceu;
• um grande objeto principal feito de partes, com rótulos numerados apontando para elas;
• um fato lateral;
• uma linha "Por que está acontecendo" com três colunas de ícones;
• uma linha de autor e uma linha de fontes.

O objetivo é explicar uma ideia em cerca de 10 segundos.

Formato

• Padrão: uma imagem independente, 1080×1350 (4:5). É adequado para feeds do LinkedIn e Instagram e tem alta capacidade de salvamento.
• Como slide de carrossel: o tamanho corresponde aos carrosséis, então o PNG pode ser inserido como {"type": "photo", "image": "images/x.png", "fit": "contain"}, ou copiado como capa.
• Como slide de apresentação: o layout 4:5 não se encaixa em 16:9. Crie um layout separado 16:9 se o usuário precisar.

Peças:

• Template: pipeline/remotion/src/Infographic.tsx.
• Build: pipeline/build_infographic.py.
• Cada infográfico vive em sua própria pasta infographics/<slug>/ com um arquivo infographic.json e uma subpasta images/ opcional.
• Saída: out/infographics/<slug>.png.

1. Escolha uma ideia que tenha partes

Bons encaixes:

• uma ação com 2 a 4 componentes: "Anthropic entra na consultoria" com estratégia, operações e tecnologia;
• uma arquitetura: as fontes, conectores, agendamento e saídas do Morning Loop;
• um framework ou um antes → depois.

Se a ideia é um número único, use um slide gráfico de carrossel ou um short. Se precisar de mais de 4 partes, faça um carrossel.

2. Escreva o texto (enxuto)

• manchete: duas linhas, 2 a 4 palavras cada, com ponto final no final da linha 2. A linha 2 é a recompensa.
  • Exemplos: ["Anthropic entra na", "consultoria."], ["Seu chefe de IA", "de gabinete."].
• subtítulo: uma frase, no máximo 25 palavras: quem fez o quê e por que importa.
• chamadas: 2 a 4 itens. Cada um tem um title de 1 a 2 palavras e um text de no máximo 12 palavras.
  • Elas são lidas de cima para baixo, então ordene-as como uma sequência ou como camadas (a de cima = a mais estratégica).
• lateral: opcional. Um fato marcante, no máximo 22 palavras, ex.: "treinar 10.000 engenheiros até 2027…".
• por que: um título como "Por que eles estão fazendo isso" ou "Por que construir um", mais exatamente 3 itens. Cada item tem um title de 2 a 3 palavras e um text de no máximo 7 palavras.
• créditos: {"name", "org"}. fontes: as publicações, o episódio, ou "Fringe Lines podcast, " .

Honestidade:

• Todo fato precisa de uma fonte que você possa nomear em sources.
• Não adicione números que a fonte não declara.
• Use ressalvas ("supostamente", "de acordo com o S-1") quando apenas um veículo noticiou.

3. Visual principal

• Padrão: a pilha de blocos integrada ("hero": {"label": "Anthropic"}). Desenha um bloco isométrico na cor de destaque por chamada, alternadamente deslocados, com linhas-guia terminando em cada bloco, e o rótulo no bloco superior. Não precisa de arquivo de imagem.
• Imagem como herói: "hero": {"image": "images/hero.png", "fit": "contain"}. Use uma captura de tela do produto, um gráfico ou slide do compartilhamento de tela do episódio, ou uma imagem de objeto/local fornecida. Nunca os apresentadores ou qualquer pessoa real: sem molduras de câmera ou fotos de rosto.
• Imagens geradas por IA (como a renderização de concreto da referência): apenas quando o usuário solicitar, por exemplo, através do conector Canva. Sem pessoas reais e sem "fotos" falsas de eventos reais.

4. infographics/<slug>/infographic.json

{
  "headline": ["Seu chefe de IA", "de gabinete."],
  "dek": "O agente \"Morning Loop\" do Quinn lê suas ferramentas de trabalho toda semana às 8h e entrega um briefing antes de ele abrir o laptop.",
  "hero": {"label": "Morning Loop"},
  "callouts": [
    {"title": "Fontes", "text": "Email do Outlook, calendário e tarefas, Slack, Asana, SharePoint."},
    {"title": "Conectores", "text": "Conectores empresariais aprovados alcançam cada fonte."}
  ],
  "side": {"title": "Fechando o ciclo", "text": "No fim do dia ele responde ao briefing…"},
  "why": {"title": "Por que construir um", "items": [
    {"icon": "clock", "title": "Comece à frente", "text": "A triagem está pronta antes das 9."},
    {"icon": "check", "title": "Nada escapa", "text": "Ele sinaliza o que você perdeu."},
    {"icon": "plug", "title": "Sem novas ferramentas", "text": "Usa a pilha que você já paga."}
  ]},
  "byline": {"name": "Fringe Lines", "org": "Episódio de 30 de outubro de 2026"},
  "sources": "Fringe Lines podcast, 30 de outubro de 2026.",
  "accent": "#FF5A1F"
}

• Ícones: chart rings target users bolt shield dollar clock globe check mail calendar plug brain. Adicione um novo ao mapa Icon em Infographic.tsx se necessário: um traço de 36×36.
• Cor de destaque: o padrão é laranja da Fringe Lines. O vermelho da referência é #C8231B.

5. Renderize e faça QA

~/.shorts-skill/bin/python pipeline/build_infographic.py infographics/<slug>

A renderização leva cerca de 20 segundos. Abra o PNG e verifique:

• A manchete cabe em 2 linhas. Se não, encurte-a; não a reduza.

• O subtítulo cabe em 3 linhas ou menos.

• Os textos das chamadas não colidem. Com 4 chamadas, cada texto deve ficar em 2 linhas ou menos, então corte palavras.

• Cada linha-guia termina em seu bloco.

• A nota lateral não invade a caixa "por que".

• As três colunas "por que" estão equilibradas (comprimentos de texto semelhantes).

• A linha de fontes cabe em 2 linhas.

• Nenhum apresentador, convidado ou pessoa real aparece em lugar nenhum.

Relate o caminho do PNG, as fontes usadas e qualquer coisa que precise de verificação de fatos.