Menú
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
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.
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.
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 registration.
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.
Basado en la clasificación ocupacional SOC
| name | infographic-creator |
| description | 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。 |
信息图（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 文件必须包含：