/infographic-creator
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
$ npx -y skills add antvis/infographic --skill infographic-creator --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/infographic-creator
Context preview
The summary Claude sees to decide when to auto-load this skill.
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
SKILL.md
infographic-creator.SKILL.mdname: infographic-creator
description: 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
信息图(Infographic)将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化,用直观符号压缩复杂信息,帮助受众快速理解并记住要点。
`Infographic = Information Structure + Visual Expression`
本任务使用 [AntV Infographic](https://infographic.antv.vision/) 创建可视化信息图。
在开始任务前,需要理解 AntV Infographic 语法规范,包括模板列表、数据结构、主题等。
Language Lock
- Prompt 的书写语言和示例语言不能决定最终输出语言。
- 如果用户输入英文,则生成的 `title`、`desc`、`label` 等文案必须保持英文,不要自动翻译成中文。
- 如果用户输入中文,则生成的 `title`、`desc`、`label` 等文案必须保持中文,不要自动翻译成英文。
规范
AntV Infographic 语法
AntV Infographic 语法是一种自定义 DSL,用于描述信息图渲染配置。它使用缩进表达结构,适合 AI 直接生成并流式输出。核心信息包括:
1. template:用模板表达信息结构。 2. data:信息图数据,包含 `title`、`desc` 和主数据字段。 3. theme:主题配置,包含 `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`。
- 如果不确定精确图标 ID,也要优先写一个简洁的语义关键词,例如 `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-*` → `lists`
- `sequence-*` → `sequences`,可选 `order asc|desc`
- `sequence-interaction-*` → `sequences` + `relations`
- `sequences` 表示泳道列表
- 每个泳道必须包含 `label`
- 每个泳道的 `children` 表示节点列表
- `children` 下的每一项都必须写成对象条目,并包含 `label`
- 节点可选 `id`、`icon`、`step`、`desc`、`value`
- `step` 用于表示时间层级;相同 `step` 处于同一高度
- `compare-*` → `compares`
- `compare-binary-*` / `compare-hierarchy-left-right-*`
- `compares` 第一层必须且只能有两个根节点,分别表示对比双方
- 两个根节点都应包含 `children`
- 真正的对比项写在各自的 `children` 下
- `children` 下的每一项都必须写成对象条目,并包含 `label`
- 即使每一侧只有 1 个指标,也要写成 `children` 内含 1 个对象条目
- `compare-swot`
- `compares` 可直接放多个根节点
- 每个根节点下可选 `children`
- `compare-quadrant-*`
- `compares` 直接放 4 个象限根节点
- `hierarchy-structure` → `items`
- `hierarchy-*` → 单一 `root`,通过 `children` 递归嵌套
- `relation-*` → `nodes` + `relations`
- 简单关系也可直接用箭头语法表达关系
- `chart-*` → `values`
- `chart-line-plain-text` / `chart-bar-plain-text` / `chart-column-simple` 都使用单条有序 `values`
- 每个数据点使用 `label` 表示类目,使用 `value` 表示数值
- 折线图的顺序由 `values` 中条目的排列顺序表达
- 结构无法明确判断时,再用 `items` 兜底
主题规则:
- `theme` 用于自定义主题,例如 `palette`、`base`、`stylize`
- 使用 `theme.base.text.font-family` 指定字体,如 `851tegakizatsu`
- 使用 `theme.stylize` 选择内置风格并传参
- `rough`:手绘效果
- `pattern`:图案填充
- `linear-gradient` / `radial-gradient`:渐变风格
- 仅输出 Infographic 语法本身,不输出 JSON、解释性文字或额外 Markdown 段落
数据语法示例
按模板类别给出精简但完整的正向示例:
- `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
- labelRead more
name: infographic-creator description: 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
信息图(Infographic)将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化,用直观符号压缩复杂信息,帮助受众快速理解并记住要点。
`Infographic = Information Structure + Visual Expression`
本任务使用 [AntV Infographic](https://infographic.antv.vision/) 创建可视化信息图。
在开始任务前,需要理解 AntV Infographic 语法规范,包括模板列表、数据结构、主题等。
Language Lock
- Prompt 的书写语言和示例语言不能决定最终输出语言。
- 如果用户输入英文,则生成的 `title`、`desc`、`label` 等文案必须保持英文,不要自动翻译成中文。
- 如果用户输入中文,则生成的 `title`、`desc`、`label` 等文案必须保持中文,不要自动翻译成英文。
规范
AntV Infographic 语法
AntV Infographic 语法是一种自定义 DSL,用于描述信息图渲染配置。它使用缩进表达结构,适合 AI 直接生成并流式输出。核心信息包括:
1. template:用模板表达信息结构。 2. data:信息图数据,包含 `title`、`desc` 和主数据字段。 3. theme:主题配置,包含 `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`。
- 如果不确定精确图标 ID,也要优先写一个简洁的语义关键词,例如 `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-*` → `lists`
- `sequence-*` → `sequences`,可选 `order asc|desc`
- `sequence-interaction-*` → `sequences` + `relations`
- `sequences` 表示泳道列表
- 每个泳道必须包含 `label`
- 每个泳道的 `children` 表示节点列表
- `children` 下的每一项都必须写成对象条目,并包含 `label`
- 节点可选 `id`、`icon`、`step`、`desc`、`value`
- `step` 用于表示时间层级;相同 `step` 处于同一高度
- `compare-*` → `compares`
- `compare-binary-*` / `compare-hierarchy-left-right-*`
- `compares` 第一层必须且只能有两个根节点,分别表示对比双方
- 两个根节点都应包含 `children`
- 真正的对比项写在各自的 `children` 下
- `children` 下的每一项都必须写成对象条目,并包含 `label`
- 即使每一侧只有 1 个指标,也要写成 `children` 内含 1 个对象条目
- `compare-swot`
- `compares` 可直接放多个根节点
- 每个根节点下可选 `children`
- `compare-quadrant-*`
- `compares` 直接放 4 个象限根节点
- `hierarchy-structure` → `items`
- `hierarchy-*` → 单一 `root`,通过 `children` 递归嵌套
- `relation-*` → `nodes` + `relations`
- 简单关系也可直接用箭头语法表达关系
- `chart-*` → `values`
- `chart-line-plain-text` / `chart-bar-plain-text` / `chart-column-simple` 都使用单条有序 `values`
- 每个数据点使用 `label` 表示类目,使用 `value` 表示数值
- 折线图的顺序由 `values` 中条目的排列顺序表达
- 结构无法明确判断时,再用 `items` 兜底
主题规则:
- `theme` 用于自定义主题,例如 `palette`、`base`、`stylize`
- 使用 `theme.base.text.font-family` 指定字体,如 `851tegakizatsu`
- 使用 `theme.stylize` 选择内置风格并传参
- `rough`:手绘效果
- `pattern`:图案填充
- `linear-gradient` / `radial-gradient`:渐变风格
- 仅输出 Infographic 语法本身,不输出 JSON、解释性文字或额外 Markdown 段落
数据语法示例
按模板类别给出精简但完整的正向示例:
- `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🦋 An Infographic Generation and Rendering Framework, bring words to life! AntV Infographic is AntV's next-generation declarative infographic visualization engine.
Repo: antvis/infographic
Other skills on antv-infographic-skills.
- /infographic-item-creator
Generate or update infographic Item components for this repo (TypeScript/TSX in src/designs/items). Use when asked to design, implement, or modify data item visuals, layout logic, or registerItem composites.
Open skill - /infographic-structure-creator
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify structure layouts (list/compare/sequence/hierarchy/relation/geo/chart), including layout logic, component composition, and
Open skill - /infographic-syntax-creator
Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection, data structuring, and theme hints. Do not use for HTML rendering or TS/TSX component implementation.
Open skill - /infographic-template-updater
Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template mappings, and the AIPlayground prompt list.
Open skill

