infographic-item-creat…
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…
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
$ 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.
/infographic-creatorContext preview
The summary Claude sees to decide when to auto-load this skill.
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
name: infographic-creator description: 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
信息图(Infographic)将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化,用直观符号压缩复杂信息,帮助受众快速理解并记住要点。
`Infographic = Information Structure + Visual Expression`
本任务使用 [AntV Infographic](https://infographic.antv.vision/) 创建可视化信息图。
在开始任务前,需要理解 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 list-grid-badge-card
data
title Feature List
lists
- label Fast
icon flash fast
- label Secure
icon shield checkinfographic sequence-ascending-steps
data
title 发布流程
sequences
- label 需求确认
icon clipboard check
- label 开发实现
icon code
- label 发布上线
icon rocket
order ascinfographic 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-resultinfographic hierarchy-tree-curved-line-rounded-rect-node
data
title 组织结构
root
label 公司
children
- label 产品部
- label 技术部infographic compare-swot
data
title 产品 SWOT
compares
- label Strengths
icon trophy
children
- label 品牌认知高
icon star
- label Weaknesses
icon alert circle
children
- label 成本压力大
icon walletinfographic 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 boldinfographic compare-quadrant-quarter-simple-card
data
title 任务优先级
compares
- label 高价值低成本
- label 高价值高成本
- label 低价值低成本
- label 低价值高成本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 #14b8a6infographic relation-dagre-flow-tb-simple-circle-node
data
title 系统关系
nodes
- label API
- id db
label DB
relations
API - 读写 -> dbinfographic 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
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…
Generate or update infographic Structure components for this repo (TypeScript/TSX in src/designs/structures). Use when asked to design, implement, or modify…
Generate AntV Infographic syntax only. Use when asked to turn notes, outlines, reports, or other user content into the Infographic DSL with template selection,…
Update template catalogs and UI prompts after adding new infographic templates (src/templates/*.ts), including SKILL.md template list, site gallery template…