infographic-creatorpor AntV

Infographic Creator Skill.

Q: Ela vem com estilos visuais prontos?

Sim. theme.stylize seleciona um estilo integrado e passa parâmetros para ele; os estilos comuns listados são rough para um efeito desenhado à mão, pattern para um preenchimento com padrão, e linear- ou radial-gradient.

Um skill do Claude Code e Codex para diagramas e gráficos: cria infográficos a partir de um texto fornecido.

Diagrams & Data Visualization
Image

Baixar OpenDesign Ver guia de uso

antvis/chart-visualization-skills · skills/infographic-creator/SKILL.mdSKILL.md

--- name: infographic-creator description: Create beautiful infographics based on given text content. Use when users request to create infographics. --- ## Specifications ## Generation Process

Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 11.870 caracteres no total

01 O que faz

O Que o Skill infographic-creator Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Um skill do AntV que transforma uma descrição em texto em um infográfico renderizado. O agente escreve a sintaxe AntV Infographic, uma DSL baseada em indentação cuja primeira linha nomeia um template e cujo bloco de dados carrega title, desc e o campo principal do próprio template — lists, sequences, compares, values, nodes and relations, ou root.

Um bloco theme define paleta, fonte e efeitos de estilização. A lista de templates incluída abrange as famílias list, sequence, compare, hierarchy, relation e chart, cobrindo linhas do tempo, SWOT, mapas mentais, roadmaps, análise de quadrantes e nuvens de palavras. O agente então escreve um arquivo HTML pronto para navegador chamado <title>-infographic.html que renderiza o diagrama e o exporta como SVG.

O que ele produz

A própria sintaxe AntV Infographic, que o usuário pode ler, guardar ou reutilizar.
Um arquivo HTML completo escrito com a ferramenta Write, chamado <title>-infographic.html.
Uma exportação SVG do gráfico finalizado, produzida a partir da página renderizada.

Veja o exemplo de prompt ↗

Como funciona

01
Descobrir o Que o Usuário Realmente Quer Mostrar
Antes de qualquer coisa, o skill lê as necessidades do usuário e as informações que ele quer expressar, pois isso define tanto o template quanto a estrutura dos dados.
02
Pedir Mais Detalhes Quando o Briefing For Vago
Se a descrição do conteúdo não for clara e concisa, o skill solicita uma, em vez de inventar conteúdo, e também pode perguntar qual template o usuário deseja.
03
Combinar a Forma do Conteúdo com uma Família de Templates
Sequências estritas vão para sequence-, listagens de opinião para list-row- ou list-column-, comparações binárias para compare-binary-, árvores para hierarchy-tree- e quadrantes para compare-quadrant-.
04
Expressar a Estrutura na DSL
A estrutura se torna sintaxe AntV Infographic: uma linha de template, um bloco data com title/desc e o campo principal do template, além de um bloco theme opcional.
05
Gerar o Arquivo HTML
A sintaxe é inserida em um documento HTML completo com a tag de script do AntV Infographic, um container e uma chamada de renderização.
06
Entregar o Arquivo e a Sintaxe, Depois Oferecer Ajustes
A resposta traz o caminho do arquivo gerado e a sintaxe, seguidos de um convite para ajustar o template, as cores ou o conteúdo.

02 Encontre o ideal para você

Quando Usar a Skill infographic-creator

Use a skill infographic-creator no Claude Code ou Codex quando o trabalho for diagramas e gráficos desse tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Mostrar um processo, etapas ou uma tendência de desenvolvimento em ordem estrita, como uma linha do tempo.
Uma análise SWOT de um produto, projeto ou ideia.
Um mapa mental dividindo um tópico em ramificações.
Transformar números em um gráfico de barras, colunas, linhas, pizza ou nuvem de palavras.
Mostrar como as coisas dependem umas das outras ou fluem entre si.

Conheça os Limites

Produzir a imagem no servidor ou offline: o HTML gerado carrega o script AntV Infographic do unpkg, então ele é renderizado em um navegador.

O Que Fornecer

Uma descrição de conteúdo clara e concisaO que o infográfico deve dizer; o skill divide isso em title, desc e os itens de dados.
Os campos de dados que seu conteúdo precisaQuais de title, desc, items, label, value ou icon o conteúdo carrega, para que os campos certos sejam preenchidos.
Valores numéricos, se você quiser um gráficoTemplates chart-* leem um campo values composto por label e value, opcionalmente com uma categoria.

03 Dentro da skill

Regras que o skill infographic-creator dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Nomeie o Template na Primeira Linha
A primeira linha deve ser infographic <template-name>, com o template retirado da lista incluída em vez de inventado.
Produza Apenas a Sintaxe
A resposta deve conter apenas a sintaxe AntV Infographic — sem JSON, sem envoltório Markdown, sem texto explicativo ao redor.
Exatamente Um Campo de Dados Principal
Escolha um único campo principal para a família — lists para list-, sequences para sequence-, compares para compare-, values para chart-, nodes mais relations para relation-, root para hierarchy- — e nunca misture dois deles.
Use Indentação de Dois Espaços
data e theme são blocos separados, tudo dentro deles é indentado com dois espaços, pares chave-valor são escritos como key value e entradas de array começam com -.
Responda na Língua do Usuário
Title, desc, labels e toda outra string dentro da sintaxe devem ser escritas na língua em que o usuário escreveu.
Recorra a Items
Quando não estiver claro qual campo de dados principal se aplica, use items.
Duas Raízes para Comparações Binárias
Templates compare-binary- e compare-hierarchy-left-right- devem ter exatamente dois nós raiz, com todos os itens de comparação dependendo dessas duas raízes.
Uma Raiz para Hierarquias
Árvores hierarchy-* usam uma única root aninhada por meio de children, e root não deve ser repetida.

04 Coloque em prática

Instale infographic-creator no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione infographic-creator ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

npx skills add https://github.com/antvis/chart-visualization-skills --skill infographic-creator

Formato genérico da CLI skills para skills/infographic-creator/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Diagramas e Gráficos

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu material.

Starter prompt

Turn the text below into an infographic about [our product evolution], covering [five] milestones. Each entry needs a time, a label, a one-line description and an icon, and the milestones must appear in strict chronological sequence.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Abra o arquivo HTML diretamente em um navegador para confirmar que o infográfico é renderizado corretamente e depois salve-o como SVG usando o botão de exportação.
Verifique se o título da página segue o padrão {title} - Infographic.
Verifique se o destino de renderização é uma div contêiner com o id container.
Verifique se o contêiner é responsivo, com largura e altura em 100%.
Verifique se a página realmente expõe um botão de exportação em SVG.

No OpenDesign importe o infographic-creator a partir do link do seu SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Branch master
Arquivo da skill: skills/infographic-creator/SKILL.md Checksum de conteúdo registrado na verificação; commit 089b687
License: MIT De LICENSE.
Estrelas do repositório: 489 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório antvis/chart-visualization-skills, que contém 2 skills neste catálogo. Não é uma classificação ou contagem de uso para infographic-creator.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

EspecificaçõesAgrupa as regras de sintaxe do DSL, exemplos de dados e a lista de templates.
AntV Infographic SyntaxDefine template, dados e tema como as três partes do DSL.
Especificações de SintaxeCobre a primeira linha, indentação, palavras-chave de ícones e o campo de dados por família.
Exemplos de Sintaxe de DadosTrechos copiáveis para templates de lista, sequência, hierarquia, comparação, gráfico e relação.
Templates DisponíveisLista todos os nomes de templates e mapeia tipos de conteúdo para as famílias sequência, comparação, hierarquia, gráfico e relação.
ExemploConstrói um infográfico de evolução da tecnologia da internet com list-row-horizontal-icon-arrow.
Processo de GeraçãoDuas fases: entender o requisito e depois renderizar o arquivo HTML.
Etapa 1: Entender os Requisitos do UsuárioExtrai a estrutura, esclarece os campos, escolhe um template e escreve a sintaxe.
Etapa 2: Renderizar o InfográficoConstrói o arquivo HTML e mostra ao usuário o caminho do arquivo e a sintaxe.

A Descrição da Própria Skill

"Crie infográficos bonitos com base em conteúdo de texto fornecido. Use quando os usuários solicitarem criar infográficos."

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 11.870 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill infographic-creator

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Posso alterar as cores e fontes?

Sim. A parte de tema da sintaxe carrega a configuração de estilo, incluindo a paleta e a fonte, então ambas são definidas de forma deliberada em vez de deixadas para o renderizador.

Ela vem com estilos visuais prontos?

Sim. theme.stylize seleciona um estilo integrado e passa parâmetros para ele; os estilos comuns listados são rough para um efeito desenhado à mão, pattern para um preenchimento com padrão, e linear- ou radial-gradient.

O infográfico será no meu idioma?

Sim. A skill respeita o idioma da entrada do usuário, então uma solicitação escrita em chinês produz texto em chinês dentro da sintaxe.

Infographic Creator

Execute infographic-creator em uma tarefa real de diagramas e gráficos.

Baixe OpenDesign, importe infographic-creator a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills