infographic-creator

SKILL.md

Convert text content into visually compelling infographics using AntV Infographic syntax.

Supports 50+ templates across eight categories: sequences, lists, hierarchies, comparisons, charts, relations, and more

Uses a custom DSL with indentation-based syntax for describing structure, data, and themes; designed for AI streaming and rendering

Includes theme customization (palettes, fonts, stylization effects like hand-drawn and gradient fills) and icon support

Generates responsive HTML files with SVG export capability for easy sharing and saving

Infographics convert data, information, and knowledge into perceptible visual language. They combine visual design with data visualization, compressing complex information with intuitive symbols to help audiences quickly understand and remember key points.

Infographic = Information Structure + Visual Expression

This task uses AntV Infographic to create visual infographics.

Before starting the task, you need to understand the AntV Infographic syntax specifications, including template list, data structure, themes, etc.

Specifications

AntV Infographic Syntax

AntV Infographic syntax is a custom DSL used to describe infographic rendering configurations. It uses indentation to describe information, has strong robustness, and is convenient for AI streaming output and infographic rendering. It mainly contains the following information:

template: Use templates to express the text information structure.

data: Infographic data, including title, desc, data items, etc. Data items typically contain fields such as label, desc, icon, etc.

theme: Theme contains style configurations such as palette, font, etc.

For example: