跳转到使用指南
infographic-creator作者 AntV

Infographic Creator Skill.

Claude Code 和 Codex 的图表 skill:根据给定文本创建信息图。

  • Diagrams & Data Visualization
  • Image
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
从上游文件读取的前言和章节标题(2026-09-14)· 完整内容 11,870 字符

01 功能说明

infographic-creator Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

一个 AntV skill,将文字描述转化为渲染出的信息图。Agent 编写 AntV Infographic 语法——一种基于缩进的 DSL,首行指定模板,数据块携带 title、desc 以及该模板自身的主字段:列表、序列、对比、数值、节点与关系,或 root。

theme 块用于设置配色、字体和风格化效果。内置模板列表涵盖列表、序列、对比、层级、关系和图表族,覆盖时间线、SWOT、思维导图、路线图、四象限分析和词云。随后 Agent 编写一个名为 <title>-infographic.html 的可直接在浏览器打开的 HTML 文件,用于渲染该图形并导出为 SVG。

它产出什么

  • AntV Infographic 语法本身,用户可以阅读、保留或复用。
  • 一个用 Write 工具编写的完整 HTML 文件,命名为 <title>-infographic.html。
  • 从渲染完成的页面生成的 SVG 导出文件。
查看示例提示词 ↗

工作方式

  1. 01
    弄清用户到底想呈现什么

    在其他一切之前,该 skill 先读取用户的需求以及他们想表达的信息,因为这决定了模板和数据结构。

  2. 02
    当 brief 信息不足时主动追问

    如果内容描述不够清晰简洁,该 skill 会要求补充说明,而不是自行编造内容,也可能询问用户想用哪个模板。

  3. 03
    将内容形态匹配到对应的模板族

    严格的顺序流程对应 sequence-,观点列举对应 list-row- 或 list-column-,二元对比对应 compare-binary-,树状结构对应 hierarchy-tree-,四象限对应 compare-quadrant-。

  4. 04
    用 DSL 表达结构

    结构被转化为 AntV Infographic 语法:一行模板声明,一个包含 title/desc 及该模板主字段的 data 块,外加一个可选的 theme 块。

  5. 05
    生成 HTML 文件

    该语法被嵌入一个完整的 HTML 文档中,包含 AntV Infographic 的 script 标签、一个容器和一次渲染调用。

  6. 06
    交回文件和语法,并提供调整建议

    回复中会附带生成的文件路径和语法,随后邀请用户调整模板、颜色或内容。

02 找到适合场景

何时使用 infographic-creator Skill

当任务是此类图表和图示时,在 Claude Code 或 Codex 中使用 infographic-creator skill。下方的适用范围和限制取自该 skill 自身的文件。

适合场景

  • 按严格顺序展示流程、步骤或发展趋势,例如时间线。
  • 对产品、项目或想法进行 SWOT 分析。
  • 将一个主题拆分为多个分支的思维导图。
  • 将数字转化为柱状图、条形图、折线图、饼图或词云图。
  • 展示事物之间的依赖或流动关系。

了解边界

  • 在服务器端或离线生成图像:生成的 HTML 会从 unpkg 加载 AntV Infographic 脚本,因此需要在浏览器中渲染。

需要提供的信息

  • 清晰简洁的内容描述说明 infographic 要表达的内容;skill 会把它拆分为 title、desc 和各数据项。
  • 内容所需的数据字段内容携带 title、desc、items、label、value 或 icon 中的哪些字段,以便填入正确的字段。
  • 数值数据(如需图表)chart-* 模板读取一个 values 字段,包含 label 与 value,可选带 category。

03 Skill 内部

infographic-creator skill 给 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 在第一行命名模板

    第一行必须是 infographic <template-name>,模板名取自内置列表,不能自行编造。

  2. 仅输出语法本身

    回复必须只包含 AntV Infographic 语法——不含 JSON,不含 Markdown 包装,也不含周围的说明文字。

  3. 仅使用一个主数据字段

    为该类模板选择单一主字段——list 类用 lists,sequence 类用 sequences,compare 类用 compares,chart 类用 values,relation 类用 nodes 加 relations,hierarchy 类用 root——切勿混用其中两种。

  4. 使用两个空格缩进

    data 和 theme 是各自独立的区块,其内部所有内容缩进两个空格,键值对写作 key value,数组条目以 - 开头。

  5. 使用用户的语言回答

    语法中的 title、desc、labels 以及其他所有字符串,都必须使用用户输入时所用的语言。

  6. 无法判断时回退到 items

    当不清楚适用哪个主数据字段时,使用 items。

  7. 二元对比使用两个根节点

    compare-binary- 和 compare-hierarchy-left-right- 模板必须恰好有两个根节点,所有对比项都挂在这两个根节点之下。

  8. 层级结构使用单一根节点

    hierarchy-* 树通过 children 嵌套单一的 root,root 不得重复出现。

04 投入使用

在 Claude Code 或 Codex 中安装 infographic-creator

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 infographic-creator 添加到 Claude Code、Codex 或您的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

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

针对 skills/infographic-creator/SKILL.md 的通用 skills CLI 形式;仓库可能记录了自己的路径。

给 Skill 分配第一个图表和图示任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

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.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 直接在浏览器中打开该 HTML 文件,确认 infographic 能正常渲染,然后用导出按钮将其保存为 SVG。
  • 检查页面标题是否符合 {title} - Infographic 的格式。
  • 检查渲染目标是否为一个 id 为 container 的容器 div。
  • 检查容器是否为响应式布局,宽度和高度均为 100%。
  • 检查页面是否确实提供了 SVG 导出按钮。

在 OpenDesign 中通过 SKILL.md 链接导入 infographic-creator:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
AntV
Skill 文件
skills/infographic-creator/SKILL.md 验证时记录的内容校验和;提交 089b687
License
MIT 来自 LICENSE。
仓库星标数
489 2026-09-14 为整个 antvis/chart-visualization-skills 仓库拍摄的 GitHub 快照,该仓库在此目录中包含 2 个 skills。不是 infographic-creator 的评分或使用计数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 规格说明汇总了 DSL 语法规则、数据示例和模板列表。
  2. AntV 信息图语法将模板、数据和主题定义为 DSL 的三个部分。
  3. 语法规格涵盖首行、缩进、图标关键字,以及每个系列的数据字段。
  4. 数据语法示例提供列表、序列、层级、对比、图表和关系模板的可复制片段。
  5. 可用模板列出全部模板名称,并将内容类型映射到序列、对比、层级、图表和关系系列。
  6. 示例使用 list-row-horizontal-icon-arrow 构建一张互联网技术演进信息图。
  7. 生成流程分两个阶段:先理清需求,再渲染 HTML 文件。
  8. 第一步:理解用户需求提取结构、明确字段、选定模板并编写语法。
  9. 第二步:渲染信息图构建 HTML 文件,并向用户展示文件路径和语法。
Skill 自身的描述
"根据给定的文本内容创建精美的信息图。在用户请求创建信息图时使用。"

来自 SKILL.md 的 front-matter 描述。完整文件约 11,870 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 infographic-creator Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

可以更改颜色和字体吗?

可以。语法中的 theme 部分承载样式配置,包括配色和字体,因此二者都是刻意设定的,而不是交由渲染器随意处理。

它自带现成的视觉样式吗?

是的。theme.stylize 用于选择内置样式并向其传入参数;常见样式包括用于手绘效果的 rough、用于图案填充的 pattern,以及线性或径向渐变(linear- 或 radial-gradient)。

生成的信息图会是我使用的语言吗?

会的。该 skill 遵循用户输入的语言,因此用中文写的请求会在语法中生成中文文本。

Infographic Creator

在真实的图表和图示任务上运行 infographic-creator。

下载 OpenDesign,从其 SKILL.md 链接导入 infographic-creator,粘贴上方提示词,在查看结果之前先阅读计划。

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

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows