Em algum momento entre um projeto de cliente e outro, criei o Infograiphify, um script em Python que transformava artigos e páginas em infográficos. Ele analisava o texto e montava um visual a partir dos pontos principais. Funcionava, mas estava mais pra prova de conceito do que pra ferramenta de verdade.
O Claude Code deixou esse script inteiro obsoleto. Dê a ele um prompt estruturado e ele gera o infográfico como uma página HTML e CSS, e você fica com um arquivo editável, responsivo e versionável em vez de uma imagem chapada. Assim, qualquer infográfico que você precisar entra fácil no pipeline de conteúdo que você montou com o Claude.
Por que a saída em HTML ganha dos geradores de imagem
Um infográfico gerado como código dá pra editar, versionar no git, publicar direto numa página e converter em PDF ou PNG quando você precisa de uma versão estática. Simples assim.
Gerador de imagem ainda não renderiza texto e número de forma confiável, e em infográfico o texto e os números são o ponto inteiro. Quando precisa corrigir ou atualizar um número, a imagem tem que ser gerada de novo. Com HTML e CSS, é só uma edição pequena no código.
Tem também a questão do dinheiro. Infográfico encomendado a designer ou agência costuma custar entre US$300 e US$2.000 cada, dependendo da profundidade da pesquisa (essa faixa é estimativa minha de mercado, não um estudo). Quando o resultado é código produzido dentro de um fluxo que você já roda, o custo de cada peça extra vira só o tempo de revisão. É a mesma lógica da redução de 60% a 80% no custo de conteúdo que eu medi nos pipelines de conteúdo em n8n: o time para de produzir peça na mão e passa a revisar e aprovar.
Blog de marketing adora dizer que infográfico ganha 178% mais links do que post comum. O número é reciclado sem fim de pesquisa em pesquisa, e eu não apostaria orçamento nele, mas a direção bate com o que eu vejo: página com visual de dados original atrai link que texto sozinho não atrai.
Como escrever o prompt de infográfico no Claude Code
Um prompt de infográfico útil força a hierarquia antes de pedir qualquer pixel. Se você só digitar "faça um infográfico sobre X", recebe um pôster genérico com degradê, cinco ícones e nenhuma informação. A estrutura abaixo resolve isso, e está perto do que eu rodo em produção:
Task: Create an infographic and implement it as a responsive HTML+CSS page.
Topic: <one or two sentences, framed as the problem it solves>
Audience: <who reads this>
Goal: <what they should understand or do after 30 seconds>
Output:
1. Title and optional subtitle
2. Maximum 5 sections, each with:
- headline (6 words max)
- one core insight
- one supporting data point with its source
- a specific visual suggestion (bar chart, before/after, comparison)
3. Layout structure (vertical, mobile-first, clear section separation)
4. Design system (neutral background, one accent color, 8px spacing)
Constraints:
- Scannable in under 30 seconds
- Do NOT invent precise numbers; use ranges or label estimates
- No generic stock-icon visuals
- Semantic HTML, no wrapper soup
Dois desses campos fazem quase todo o trabalho. O tema precisa ser apresentado como um problema, tipo "por que design gerado por IA parece genérico", e não "design com IA". E as restrições são o que impede o resultado de desabar na média estatística de todos os infográficos da internet. Escrevi mais sobre esse padrão no meu artigo sobre prompts no Claude Code: entrada vaga gera a média, estrutura gera algo aproveitável.
Uma nota prática sobre modelo: qualquer que seja a lista de modelos quando você ler isto, o intermediário basta pra infográfico. O modelo de topo queima mais token e entrega praticamente o mesmo layout. Guarde o caro pras tarefas em que a profundidade de raciocínio muda o resultado de verdade.
Onde o infográfico entra num pipeline de conteúdo
Nos pipelines de SEO que eu construo pra clientes, os artigos já vão da pesquisa de palavra-chave até a publicação com um humano aprovando cada etapa. Isso importa porque um artigo raramente é uma peça só hoje em dia. O post vira seção de newsletter, carrossel no LinkedIn, infográfico, às vezes roteiro de vídeo curto.
Falei do lado estratégico disso em reaproveitamento de conteúdo em escala; o Claude Code é só o renderizador mais barato que eu encontrei pra parte visual. Se você já investiu em skills do Claude Code, o template de prompt acima pode virar uma, e aí o time inteiro dispara do mesmo jeito.
O ponto de falha pra ficar de olho é a integridade dos dados. Um LLM a quem você pede "estatísticas críveis" vai produzir, todo feliz, estatísticas que soam críveis. Em todo pipeline que eu rodo, os números vêm de uma fonte escolhida por um humano (Search Console, dados de venda, um estudo publicado com URL, os relatórios do próprio cliente), e o modelo só formata.
Em site WordPress, que é onde mora a maior parte do meu trabalho de integração de IA no WordPress, o fluxo é ainda mais curto. O HTML gerado entra num bloco de HTML personalizado ou num template de página e vai pro ar no mesmo deploy do artigo. Nada de upload na biblioteca de mídia nem configuração de compressão, e o texto dentro do infográfico continua rastreável, coisa que um PNG nunca oferece. Buscadores e motores de resposta leem as estatísticas dentro do seu visual como conteúdo de verdade da página.
Então, o que você faz na prática
Se você publica conteúdo baseado em dados e ainda paga por infográfico, ou simplesmente pula a parte visual, faça o teste: escolha um post que já existe, rode o template de prompt acima no Claude Code e compare o HTML com o orçamento que um designer teria passado. Depois decida se infográfico entra no seu pipeline de rotina ou continua como encomenda ocasional. Na maioria das operações de conteúdo que eu audito, a resposta fica óbvia depois da primeira renderização.
Se você quer a produção de conteúdo rodando como pipeline, do rascunho ao visual e à publicação, com gente aprovando as etapas certas, isso é trabalho de pipelines de conteúdo com IA no WordPress. Me conta como funciona o seu processo hoje.