Menu
基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
从飞书邮箱读取周报邮件，根据年度报告模板生成年度总结报告
读取飞书云文档（支持多个链接），解析文档中的文本、表格、图片等内容，根据用户选择的开发语言和存储结构，将产品需求文档转换为研发开发需求文档
支持多种图表类型的绘制工具，包括思维导图、流程图、数据可视化图表、数学函数图等；可根据用户需求生成 Mermaid、ECharts、Mindmap、DrawIO、GeoGebra 等格式的图表，并导出为 PNG、SVG、HTML 等格式
解析用户上传的文件（PDF/Word/图片），提取文本内容和图片并保存到本地，使用图像识别能力理解图片内容，根据文件内容和用户需求判断文章类型（品牌动向/产品动态/政策规则/营销战役/客户证言/行业资讯），使用不同prompt生成Markdown格式的文章，使用Markdown语法引用图片，确保配图与文章内容契合，并对生成结果进行质量打分。适用于需要从现有文档生成各类品牌和产品内容的场景，如品牌报道、产品发布、政策公告、营销宣传、客户案例等。
生成结构化的会议纪要，包含议题摘要、决策事项和行动项
处理 Word 文档，支持读取、分析、总结和转换 docx 文件
| name | infographic-creator |
| description | 基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。 |
信息图（Infographic）将数据、信息与知识转化为可感知的视觉语言。它结合视觉设计与数据可视化，用直观符号压缩复杂信息，帮助受众快速理解并记住要点。
Infographic = Information Structure + Visual Expression
本任务使用 AntV Infographic 创建可视化信息图。
在开始任务前，需要理解 AntV Infographic 语法规范，包括模板列表、数据结构、主题等。
AntV Infographic 语法是一种自定义的 DSL，用于描述信息图渲染配置。它使用缩进描述信息，具有较强鲁棒性，便于 AI 流式输出并渲染信息图。主要包含以下信息：
例如：
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>，模板从下方列表中选择（见“可用模板”部分）。
使用 data / theme 块，块内用两个空格缩进。
键值对使用「键 空格 值」；数组使用 - 作为条目前缀。
icon 使用图标关键词（如 star fill）。
data 应包含 title/desc + 模板对应的主数据字段（不一定是 items）。
主数据字段选择（只用一个，避免混用）：
list-* → listssequence-* → sequences（可选 order asc|desc）compare-* → compares（支持 children 分组对比），可包含多个对比项hierarchy-structure → items（每一项对应一个独立层级，每一层级可以包含子项，最多可嵌套 3 层）hierarchy-* → 单一 root（树结构，通过 children 嵌套）；relation-* → nodes + relations；简单关系图可省略 nodes，在 relations 中用箭头语法chart-* → values（数值统计，可选 category）items 兜底compare-binary-* / compare-hierarchy-left-right-* 二元模板：必须两个根节点，所有对比项挂在这两个根节点的 children
hierarchy-*：使用单一 root，通过 children 嵌套（不要重复 root）
theme 用于自定义主题（palette、font 等）
例如：暗色主题 + 自定义配色
infographic list-row-simple-horizontal-arrow
theme dark
palette
- #61DDAA
- #F6BD16
- #F08BB4
使用 theme.base.text.font-family 指定字体，如手写风格 851tegakizatsu
使用 theme.stylize 选择内置风格并传参
常见风格：
rough：手绘效果pattern：图案填充linear-gradient / radial-gradient：线性/径向渐变例如：手绘风格（rough）
infographic list-row-simple-horizontal-arrow
theme
stylize rough
base
text
font-family 851tegakizatsu
禁止输出 JSON、Markdown 或解释性文字
按模板类别的数据语法示例（使用对应字段，避免同时添加 items）：
list-* 模版infographic list-grid-badge-card
data
title Feature List
lists
- label Fast
icon flash fast
- label Secure
icon secure shield check
sequence-* 模版infographic sequence-steps-simple
data
sequences
- label Step 1
- label Step 2
- label Step 3
order asc
hierarchy-* 模版infographic hierarchy-structure
data
root
label Company
children
- label Dept A
- label Dept B
compare-* 模版infographic compare-swot
data
compares
- label Strengths
children
- label Strong brand
- label Loyal users
- label Weaknesses
children
- label High cost
- label Slow release
四象限图
infographic compare-quadrant-quarter-simple-card
data
compares
- label High Impact & Low Effort
- label High Impact & High Effort
- label Low Impact & Low Effort
- label Low Impact & High Effort
chart-* 模版infographic chart-column-simple
data
values
- label Visits
value 1280
- label Conversion
value 12.4
relation-* 模版边标签写法：A -label-> B 或 A -->|label| B
infographic relation-dagre-flow-tb-simple-circle-node
data
nodes
- id A
label Node A
- id B
label Node B
relations
A - approves -> B
A -->|blocks| B
items 示例infographic list-row-horizontal-icon-arrow
data
items
- label Item A
desc Description
icon sun
- label Item B
desc Description
icon moon
模板选择建议：
sequence-*
sequence-timeline-*sequence-stairs-*sequence-roadmap-vertical-*sequence-zigzag-*sequence-circular-simplesequence-color-snake-steps-*sequence-pyramid-simplelist-row-* 或 list-column-*compare-binary-*compare-swothierarchy-tree-*chart-*quadrant-*list-grid-*relation-*chart-wordcloudhierarchy-mindmap-*绘制互联网技术演进信息图
infographic list-row-horizontal-icon-arrow
data
title Internet Technology Evolution
desc From Web 1.0 to AI era, key milestones
lists
- time 1991
label Web 1.0
desc Tim Berners-Lee published the first website, opening the Internet era
icon web
- time 2004
label Web 2.0
desc Social media and user-generated content become mainstream
icon account multiple
- time 2007
label Mobile
desc iPhone released, smartphone changes the world
icon cellphone
- time 2015
label Cloud Native
desc Containerization and microservices architecture are widely used
icon cloud
- time 2020
label Low Code
desc Visual development lowers the technology threshold
icon application brackets
- time 2023
label AI Large Model
desc ChatGPT ignites the generative AI revolution
icon brain
在创建信息图之前，先理解用户需求与想表达的信息，以便确定模板和数据结构。
若用户提供清晰的内容描述，应将其拆解为清晰、简洁的结构。
否则需要向用户澄清（如：“请提供清晰简洁的内容描述。”、“你希望使用哪个模板？”）
{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 文件必须包含：