Stats
Actions
Tags
Generates AntV Infographic DSL code from text content to create data visualizations. Activates when users request infographic creation.
How this skill is triggered — by the user, by Claude, or both
Slash command
/antv-infographic-skills:infographic-creatorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
信息图（Infographic）将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化，用直观符号压缩复杂信息，帮助受众快速理解并记住要点。
信息图（Infographic）将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化，用直观符号压缩复杂信息，帮助受众快速理解并记住要点。
Infographic = Information Structure + Visual Expression
本任务使用 AntV Infographic 创建可视化信息图。
在开始任务前，需要理解 AntV Infographic 语法规范，包括模板列表、数据结构、主题等。
title、desc、label 等文案必须保持英文，不要自动翻译成中文。title、desc、label 等文案必须保持中文，不要自动翻译成英文。AntV Infographic 语法是一种自定义 DSL，用于描述信息图渲染配置。它使用缩进表达结构，适合 AI 直接生成并流式输出。核心信息包括：
title、desc 和主数据字段。palette、字体、风格化等。例如：
infographic list-row-horizontal-icon-arrow
data
title Title
desc Description
lists
- label Label
value 12.5
desc Explanation
icon document text
theme
palette #3b82f6 #8b5cf6 #f97316
infographic <template-name>。infographic 前缀。data / theme 块，块内统一使用两个空格缩进。键 空格 值；对象数组使用 - 作为条目前缀。icon 可以使用精确图标 ID，例如 mingcute/server-line，也可以使用语义关键词短语，例如 star fill。rocket launch，不要写 rocket-launch。lists、sequences、nodes、items 以及 compares/children 下的语义型数据项，默认应补充 icon；不要因为字段是可选就省略。icon。rocket、shield、database、users、chart line，而不是省略 icon 字段。icon。value 尽量使用纯数值；数值单位优先放在 label 或 desc 中表达。palette 推荐使用行内简单数组写法，例如 palette #4f46e5 #06b6d4 #10b981。palette 中的颜色值是裸值，不加引号，不加逗号。data 只放一个与模板匹配的主数据字段，避免同时混用 lists、sequences、compares、values、root、nodes。主数据字段选择规则：
list-* → listssequence-* → sequences，可选 order asc|descsequence-interaction-* → sequences + relations
sequences 表示泳道列表labelchildren 表示节点列表children 下的每一项都必须写成对象条目，并包含 labelid、icon、step、desc、valuestep 用于表示时间层级；相同 step 处于同一高度compare-* → compares
compare-binary-* / compare-hierarchy-left-right-*
compares 第一层必须且只能有两个根节点，分别表示对比双方childrenchildren 下children 下的每一项都必须写成对象条目，并包含 labelchildren 内含 1 个对象条目compare-swot
compares 可直接放多个根节点childrencompare-quadrant-*
compares 直接放 4 个象限根节点hierarchy-structure → itemshierarchy-* → 单一 root，通过 children 递归嵌套relation-* → nodes + relations
chart-* → values
chart-line-plain-text / chart-bar-plain-text / chart-column-simple 都使用单条有序 valueslabel 表示类目，使用 value 表示数值values 中条目的排列顺序表达items 兜底主题规则：
theme 用于自定义主题，例如 palette、base、stylizetheme.base.text.font-family 指定字体，如 851tegakizatsutheme.stylize 选择内置风格并传参
rough：手绘效果pattern：图案填充linear-gradient / radial-gradient：渐变风格按模板类别给出精简但完整的正向示例：
list-* 模板infographic list-grid-badge-card
data
title Feature List
lists
- label Fast
icon flash fast
- label Secure
icon shield check
sequence-* 模板infographic sequence-ascending-steps
data
title 发布流程
sequences
- label 需求确认
icon clipboard check
- label 开发实现
icon code
- label 发布上线
icon rocket
order asc
sequence-interaction-* 模板infographic sequence-interaction-compact-animated-badge-card
data
title 登录校验流程
sequences
- label 用户
icon user
children
- label 发起登录
id user-login
step 0
icon login
- label 收到结果
id user-result
step 2
icon inbox check
- label 服务端
icon server
children
- label 校验凭证
id server-verify
step 1
icon shield check
- label 返回结果
id server-return
step 2
icon send
relations
user-login - 提交账号密码 -> server-verify
server-verify - 生成结果 -> server-return
server-return - 返回结果 -> user-result
hierarchy-* 模板infographic hierarchy-tree-curved-line-rounded-rect-node
data
title 组织结构
root
label 公司
children
- label 产品部
- label 技术部
compare-swot 模板infographic compare-swot
data
title 产品 SWOT
compares
- label Strengths
icon trophy
children
- label 品牌认知高
icon star
- label Weaknesses
icon alert circle
children
- label 成本压力大
icon wallet
compare-binary-* 模板infographic compare-binary-horizontal-simple-fold
data
title 餐桌价格对比
compares
- label 原价
icon tag
children
- label 原价
value 500
icon tag
- label 实际支付
icon wallet
children
- label 实际支付
value 450
icon check bold
compare-quadrant-* 模板infographic compare-quadrant-quarter-simple-card
data
title 任务优先级
compares
- label 高价值低成本
- label 高价值高成本
- label 低价值低成本
- label 低价值高成本
chart-line-plain-text 模板infographic chart-line-plain-text
data
title 模型 A 准确率变化
desc 第 4 周提升最明显
values
- label Week1
value 86.5
- label Week2
value 87.3
- label Week3
value 89.1
- label Week4
value 91.2
theme
palette #4f46e5 #db2777 #14b8a6
relation-* 模板infographic relation-dagre-flow-tb-simple-circle-node
data
title 系统关系
nodes
- label API
- id db
label DB
relations
API - 读写 -> db
items 示例infographic list-row-horizontal-icon-arrow
data
title 要点总结
items
- label 效率优先
desc 聚焦关键动作
- label 结果导向
desc 输出可执行结论
sequence-*sequence-interaction-*list-row-* / list-column-* / list-grid-*compare-binary-*
childrencompare-swotcompare-quadrant-*hierarchy-tree-*chart-line-plain-textchart-bar-plain-text / chart-column-simplerelation-*chart-wordcloudhierarchy-mindmap-*infographic list-row-horizontal-icon-arrow
data
title 产品增长要点
desc 聚焦获客、转化、复购三个阶段
lists
- label 获客
desc 多渠道投放与内容触达
icon rocket launch
- label 转化
desc 优化路径并减少流失
icon chart line
- label 复购
desc 会员权益与分层运营
icon repeat
theme
palette #3b82f6 #8b5cf6 #f97316
只输出一个 plain 代码块，不添加任何解释性文字：
infographic list-row-horizontal-icon-arrow
data
title 标题
desc 描述
lists
- label 条目
value 12.5
desc 说明
icon document text
theme
palette #3b82f6 #8b5cf6 #f97316
输出前检查以下事项：
infographic <template-name>icon，尤其是列表、步骤、节点、对比项与名称中含 icon 的模板palette 是否为裸颜色值，且没有引号和逗号sequence-interaction-* 的泳道节点是否都写成 children -> - label ...compare-binary-* / compare-hierarchy-left-right-* 是否只有两个根节点，且两侧内容都放在各自的 children 下children 下的每一项是否都显式包含 labelchart-line-plain-text 是否使用单条有序 values在创建信息图之前，先理解用户需求与想表达的信息，以便确定模板和数据结构。
若用户提供清晰的内容描述，应将其拆解为清晰、简洁的结构。
否则需要向用户澄清（如：“请提供清晰简洁的内容描述。”、“你希望使用哪个模板？”）
icon，不要等用户单独提醒。{syntax}。关键注意：必须尊重用户输入的语言。例如用户输入中文，则语法中的文本也必须是中文。
当得到最终的 AntV Infographic 语法后，可按以下步骤生成完整 HTML 文件：
{title} - Infographichttps://unpkg.com/@antv/infographic@latest/dist/infographic.min.jscontainer 的容器 divwidth: '100%'、height: '100%'）{title}{syntax}const svgDataUrl = await infographic.toDataURL({ type: 'svg' });可参考的 HTML 模板：
<div id="container"></div>
<script src="https://unpkg.com/@antv/infographic@latest/dist/infographic.min.js"></script>
<script>
const infographic = new AntVInfographic.Infographic({
container: '#container',
width: '100%',
height: '100%',
});
infographic.render(`{syntax}`);
document.fonts?.ready.then(() => {
infographic.render(`{syntax}`);
}).catch((error) => console.error('Error waiting for fonts to load:', error));
</script>
使用 Write 工具生成 HTML 文件，命名为 <title>-infographic.html
展示给用户：
**注意：**HTML 文件必须包含：
npx claudepluginhub antvis/infographic --plugin antv-infographic-skillsCreates data-driven infographics from text content using AntV Infographic DSL syntax, with template selection, data structuring, and theme configuration.
Generates infographics with AI-driven iterative design and quality review, supporting 10 types and 8 styles for data stories, comparisons, timelines, and process visuals.
Generates publication-quality infographics from natural language descriptions using Nano Banana Pro AI with Gemini 3 Pro quality review and optional Perplexity Sonar research. Supports 10 types, 8 industry styles, and colorblind-safe palettes.