Skip to content
Content
Skill

/infographic-creator

基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。

From plugin
antv-infographic-skills
5.7k5 skills
Install
$ npx -y skills add antvis/infographic --skill infographic-creator --agent claude-code

How 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.md
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
Read more
Ships withantv-infographic-skills

🦋 An Infographic Generation and Rendering Framework, bring words to life! AntV Infographic is AntV's next-generation declarative infographic visualization engine.

Get the whole plugin
Stats
5,912
Stars
454
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
2mo ago
Last commit
11mo ago
Created

Repo: antvis/infographic