基于给定文字内容创建精美信息图。当用户请求创建信息图时使用。
npx skills add https://github.com/LingyiChen-AI/OpenSkills --skill infographic-creator复制此命令并粘贴到 Claude Code 中以安装该技能
从飞书邮箱读取周报邮件，根据年度报告模板生成年度总结报告
读取飞书云文档（支持多个链接），解析文档中的文本、表格、图片等内容，根据用户选择的开发语言和存储结构，将产品需求文档转换为研发开发需求文档
支持多种图表类型的绘制工具，包括思维导图、流程图、数据可视化图表、数学函数图等；可根据用户需求生成 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 文件必须包含：