infographic-creatorpor AntV

Infographic Creator Skill.

Q: ¿Viene con estilos visuales ya preparados?

Sí. theme.stylize selecciona un estilo integrado y le pasa parámetros; los estilos comunes que se listan son rough para un efecto dibujado a mano, pattern para un relleno con patrón, y linear- o radial-gradient.

Un skill de Claude Code y Codex para diagramas y gráficos: crea infografías a partir de un texto dado.

Diagrams & Data Visualization
Image

Descargar OpenDesign Ver guía 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

Encabezados y metadatos leídos del archivo original el 14-09-2026 · 11 870 caracteres en total

01 Qué hace

Qué Hace el Skill infographic-creator en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Un skill de AntV que convierte una descripción de texto en una infografía renderizada. El agente escribe la sintaxis AntV Infographic, un DSL basado en sangría cuya primera línea nombra una plantilla y cuyo bloque de datos lleva title, desc y el campo principal propio de la plantilla — listas, secuencias, comparaciones, valores, nodos y relaciones, o root.

Un bloque theme define la paleta, la fuente y los efectos de estilo. La lista de plantillas incluidas abarca las familias list, sequence, compare, hierarchy, relation y chart, cubriendo líneas de tiempo, SWOT, mapas mentales, roadmaps, análisis de cuadrantes y nubes de palabras. El agente escribe entonces un archivo HTML listo para el navegador llamado <title>-infographic.html que renderiza el diagrama y lo exporta como SVG.

Qué produce

La propia sintaxis AntV Infographic, que el usuario puede leer, conservar o reutilizar.
Un archivo HTML completo escrito con la herramienta Write, llamado <title>-infographic.html.
Una exportación SVG del gráfico terminado, generada a partir de la página renderizada.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Determinar Qué Quiere Mostrar Realmente el Usuario
Antes que nada, el skill lee las necesidades del usuario y la información que quiere expresar, ya que eso determina tanto la plantilla como la estructura de datos.
02
Preguntar de Vuelta Cuando el Briefing Es Escaso
Si la descripción del contenido no es clara y concisa, el skill solicita una en lugar de inventar contenido, y también puede preguntar qué plantilla quiere el usuario.
03
Hacer Coincidir la Forma del Contenido con una Familia de Plantillas
Las secuencias estrictas van a sequence-, los listados de opinión a list-row- o list-column-, las comparaciones binarias a compare-binary-, los árboles a hierarchy-tree-, y los cuadrantes a compare-quadrant-.
04
Expresar la Estructura en el DSL
La estructura se convierte en sintaxis AntV Infographic: una línea de plantilla, un bloque data con title/desc y el campo principal de la plantilla, más un bloque theme opcional.
05
Generar el Archivo HTML
La sintaxis se inserta en un documento HTML completo con la etiqueta de script de AntV Infographic, un contenedor y una llamada de renderizado.
06
Entregar el Archivo y la Sintaxis, Luego Ofrecer Ajustes
La respuesta incluye la ruta del archivo generado y la sintaxis, seguidas de una invitación a ajustar la plantilla, los colores o el contenido.

02 Encuentra tu caso de uso

Cuándo usar el skill infographic-creator

Usa el skill infographic-creator en Claude Code o Codex cuando el trabajo sea diagramas y gráficos de este tipo. Ajuste y límites a continuación se toman del propio archivo del skill.

Buen caso de uso

Mostrar un proceso, pasos o una tendencia de desarrollo en orden estricto, como una línea de tiempo.
Un análisis SWOT de un producto, proyecto o idea.
Un mapa mental que divide un tema en ramas.
Convertir números en un gráfico de barras, columnas, líneas, circular o de nube de palabras.
Mostrar cómo las cosas dependen unas de otras o fluyen entre sí.

Conozca los límites

Producir la imagen en el servidor o sin conexión: el HTML generado carga el script de AntV Infographic desde unpkg, por lo que se renderiza en un navegador.

Qué proporcionar

Una descripción de contenido clara y concisaLo que debe decir el infográfico; el skill lo descompone en title, desc y los data items.
Los campos de datos que necesita su contenidoCuáles de title, desc, items, label, value o icon lleva el contenido, para rellenar los campos correctos.
Valores numéricos, si desea un gráficoLas plantillas chart-* leen un campo values de label más value, opcionalmente con una categoría.

03 Dentro del skill

Reglas que el skill infographic-creator le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Nombrar la Plantilla en la Primera Línea
La primera línea debe ser infographic <template-name>, con la plantilla tomada de la lista incluida en lugar de inventada.
Emitir Solo la Sintaxis
La respuesta debe ser únicamente la sintaxis de AntV Infographic — sin JSON, sin envoltorio Markdown, sin texto explicativo alrededor.
Exactamente Un Campo de Datos Principal
Elija un único campo principal para la familia — lists para list-, sequences para sequence-, compares para compare-, values para chart-, nodes más relations para relation-, root para hierarchy- — y nunca mezcle dos de ellos.
Sangrar con Dos Espacios
data y theme son bloques separados, todo dentro de ellos se sangra con dos espacios, los pares clave-valor se escriben key value y las entradas de array comienzan con -.
Responder en el Idioma del Usuario
Title, desc, labels y cualquier otra cadena dentro de la sintaxis deben escribirse en el idioma en que escribió el usuario.
Recurrir a Items
Cuando no está claro qué campo de datos principal aplica, use items.
Dos Raíces para Comparaciones Binarias
Las plantillas compare-binary- y compare-hierarchy-left-right- deben tener exactamente dos nodos raíz, con todos los elementos de comparación colgando bajo esas dos raíces.
Una Raíz para Jerarquías
Los árboles hierarchy-* usan un único root anidado a través de children, y root no debe repetirse.

04 Ponlo a trabajar

Instalar infographic-creator en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Agrega infographic-creator a Claude Code, Codex o tu agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

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

Forma genérica de la CLI de skills para skills/infographic-creator/SKILL.md; el repositorio puede documentar su propia ruta.

Asignar al Skill una Primera Tarea de Diagramas y Gráficos

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su 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.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Abra el archivo HTML directamente en un navegador para confirmar que el infográfico se renderiza, luego guárdelo como SVG con el botón de exportación.
Verifique que el título de la página siga el patrón {title} - Infographic.
Compruebe que el destino de renderizado sea un div contenedor con el id container.
Compruebe que el contenedor sea responsivo, con ancho y alto al 100%.
Compruebe que la página realmente exponga un botón de exportación a SVG.

En OpenDesign importe infographic-creator desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: AntV
Repository: github.com/antvis/chart-visualization-skills Rama master
Archivo de skill: skills/infographic-creator/SKILL.md Suma de verificación de contenido registrada en la verificación; commit 089b687
License: MIT De LICENSE.
Estrellas del repositorio: 489 Instantánea de GitHub tomada el 14-09-2026 para todo el repositorio antvis/chart-visualization-skills, que contiene 2 skills en este catálogo. No es una calificación ni un recuento de uso para infographic-creator.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

EspecificacionesAgrupa las reglas de sintaxis del DSL, ejemplos de datos y la lista de plantillas.
Sintaxis AntV InfographicDefine plantilla, datos y tema como las tres partes del DSL.
Especificaciones de SintaxisCubre la primera línea, la sangría, las palabras clave de icono y el campo de datos por familia.
Ejemplos de Sintaxis de DatosFragmentos copiables para las plantillas de lista, secuencia, jerarquía, comparación, gráfico y relación.
Plantillas DisponiblesEnumera todos los nombres de plantillas y asigna los tipos de contenido a las familias de secuencia, comparación, jerarquía, gráfico y relación.
EjemploConstruye una infografía de la evolución de la tecnología de Internet con list-row-horizontal-icon-arrow.
Proceso de GeneraciónDos fases: entender el requisito y luego renderizar el archivo HTML.
Paso 1: Comprender los Requisitos del UsuarioExtraiga la estructura, aclare los campos, elija una plantilla y escriba la sintaxis.
Paso 2: Renderizar la InfografíaConstruya el archivo HTML y muestre al usuario la ruta del archivo y la sintaxis.

La descripción propia del Skill

"Crea infografías hermosas basadas en contenido de texto proporcionado. Use cuando los usuarios soliciten crear infografías."

Descripción de encabezado de SKILL.md. El archivo completo tiene aproximadamente 11.870 caracteres. Lea el archivo completo en GitHub.

06 Antes de instalar

Preguntas Sobre el Skill infographic-creator

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Puedo cambiar los colores y las fuentes?

Sí. La parte de tema de la sintaxis lleva la configuración de estilo, incluida la paleta y la fuente, de modo que ambas se definen de forma deliberada en lugar de dejarse al renderizador.

¿Viene con estilos visuales ya preparados?

Sí. theme.stylize selecciona un estilo integrado y le pasa parámetros; los estilos comunes que se listan son rough para un efecto dibujado a mano, pattern para un relleno con patrón, y linear- o radial-gradient.

¿La infografía estará en mi idioma?

Sí. El skill respeta el idioma de la entrada del usuario, así que una solicitud escrita en chino produce texto en chino dentro de la sintaxis.

Infographic Creator

Ejecute infographic-creator en una Tarea Real de Diagramas y Gráficos.

Descarga OpenDesign, importa infographic-creator desde su enlace SKILL.md, pega el prompt anterior y lee el plan antes del resultado.

Descargar OpenDesign Ver todas las skills