如果你让 AI 写代码画图表大概率会碰到这种场景对话里说了三遍“用 ECharts 画一个折线图”模型也答应了但生成的代码要么引用了根本不存在的图表库 API要么把series里的数据结构写错要么图表默认主题和你的页面风格完全不在一个频道。你复制到本地跑起来控制台先报一串红色警告再给你一张白屏。问题不在于大模型不会写代码而在于它对特定工具链的细节掌握是飘忽的。尤其是图表这种“看起来简单、实际参数很多”的领域模型对 API 的记忆经常是模糊的。也正因为如此把图表能力封装成 Agent 可调用的 Skill就成了一个非常有价值的开源方向。我在 GitHub 上维护的图表 Skill 项目这次做了一次大更新这篇文章就围绕这次更新把“图表 Skill”这个技术选型从原理到实践完整讲一遍。如果你正在做 AI Agent 类应用、想给 Claude Code 或 Codex 这类工具扩展专业能力又或者你只是受够了每次让 AI 画图都要反复调 prompt这篇内容值得读完。文章不会只讲“它很强”而是会说明白 Skill 内部是怎么工作的、大更新到底改了什么、你应该怎么安装配置、以及实际使用中最大的几个坑在哪。1. 为什么“图表”需要做成 Skill先看一个基础问题图表生成这件事靠大模型直接写代码到底难在哪很多人以为难在“模型不会写代码”但事实上 Claude、GPT 这类模型写普通业务逻辑已经很能打了。真正的问题在于图表库属于“API 细节密集型”工具。以 ECharts 为例一个最简单的折线图配置项里要处理title、tooltip、legend、xAxis、yAxis、series这六个顶层字段。真正落到series里面每个系列类型又有一堆自己的专属参数。大模型训练数据里确实包含这些信息但它是“大概知道”不是“精确知道”。你让它直接写它经常把lineStyle写成line把dataZoom的配置结构记错或者忘掉tooltip.trigger应该设成axis。结果是代码能跑但功能不对。Skill 解决的就是这个“精确性”问题。它不要求模型“记住”全部 API而是把图表能力拆成“模型能理解的任务描述 可复用的工具实现”。模型只需要判断用户想画什么图、数据是什么、偏好是什么然后按照 Skill 约定的规范去调用能力剩下的参数细节由 Skill 内部处理。从执行架构上看一个 Skill 通常由三部分组成组成部分作用类比SKILL.md 描述文件告诉 Agent 这个 Skill 能做什么、什么场景用工具的“说明书”脚本或逻辑代码实际干活读取数据、生成配置、渲染图表工具的“引擎”模板或资源文件提供可复用的图表模板、主题、输出格式工具的“模具”这次图表 Skill 大更新本质上就是把这套结构重新做扎实了。更新前它更接近“一个能输出 ECharts 配置的 Prompt 模板”更新后它变成了一个带有输入校验、任务拆解、模板渲染、错误回退的完整工具封装。下面我把这套原理展开讲。2. Skill 的核心概念与运行原理2.1 什么是 Agent SkillSkill 这个名词在 Claude Code、Codex 等 Agent 工具流行之后被越来越多的人提到。简单说Skill 就是一组能够被 Agent 动态加载和调用的“专业能力包”。它和普通的 Prompt 区别在于Skill 不仅是文字描述它还可以包含可执行脚本、配置文件、模板文件。你可以这样理解普通 Prompt 是让模型“照着一句话去写代码”Skill 是给模型“一套随时可取的工具栏 使用说明”。模型收到用户需求后判断当前任务属于哪个 Skill 的职责范围然后按 SKILL.md 里的说明去调用脚本、读取模板、生成结果。2.2 一次完整的图表 Skill 调用过程假设用户说了一句“用这里的数据文件画一个 2023 年到 2024 年的销售额趋势图要深色科技风。”如果没有 Skill模型会凭记忆写一段 ECharts 代码大概率出现主题不统一、字段映射错误、中文字体加载问题。有了 Skill调用过程变成了下面这样Agent 读取用户需求识别任务类型是“数据可视化”。Agent 检查可用的 Skill 列表发现图表 Skill 可以处理这个任务。Agent 读取 SKILL.md按照技能说明提取关键参数数据源路径、图表类型趋势图、风格偏好深色科技风。Skill 内部的解析脚本读取数据文件自动完成字段映射和时间格式归一化。Skill 调用模板渲染逻辑生成一份结构正确的 ECharts 配置必要时输出一个完整的 HTML 文件。Agent 把生成结果返回给用户用户可以直接在浏览器里打开。整个过程里模型不需要记住 ECharts 的每一个配置细节它只需要做“判断”和“决策”真正繁琐的参数组装交给了 Skill 内部代码。2.3 与 Prompt 注入、MCP 工具的对比很多初次接触的人会混淆“Skill”“Prompt 注入”“MCP 工具”这三个概念。它们确实有重叠但解决的问题层级不一样。方案核心思想典型使用方式适合场景Prompt 注入把指令直接写进对话上下文每次对话都附带一段“请按规范输出”的文字简单约束、快速验证Skill把“说明 脚本 模板”打包成可复用能力Agent 按需加载并使用专业任务、复杂流程、需要稳定输出的场景MCP 工具把外部服务能力接入 Agent模型通过工具调用协议访问外部 API需要实时数据、外部系统交互我的判断是Skill 和 MCP 并不冲突未来二者会共存。Skill 适合“高确定性、可离线运行、模板化程度高”的任务MCP 适合需要联网或对接外部系统的任务。图表生成恰好是 Skill 的舒适区。3. 大更新解决了哪些核心问题这次大更新不是一个“加几个模板”的小版本迭代而是把图表 Skill 的使用体验整体提升了一个台阶。下面说清楚它真正解决的问题在哪。3.1 问题一模型不知道“什么时候该用图表 Skill”旧版本最大的问题不是画图效果差而是模型经常“不知道该调用”。你让它“分析一下数据”它可能直接输出一段文字总结完全没有触发图表 Skill。即使触发了模型也可能在“画条形图还是折线图”这种类型判断上反复横跳。新版本在 SKILL.md 里强化了“任务触发条件”和“图表类型选择优先级”。比如用户提到“趋势”“增长”“下降”Skill 会优先建议折线图或面积图提到“占比”“份额”优先饼图或环形图提到“排名”“对比”优先条形图。模型拿到这把“尺子”后决策稳定性会好很多。3.2 问题二图表配置结构不稳定老版本依赖模型直接输出option对象输出的代码经常出现字段名不统一、数据结构缺项的问题。新版本的核心改动是增加了一个“配置生成器”脚本模型只负责输出结构化的任务 JSON脚本根据 JSON 去匹配模板、渲染配置。这个改动把“模型自由发挥”变成“模型做选择题 脚本做填空题”。输出稳定性的提升是非常明显的。3.3 问题三数据文件格式兼容性差真实场景里数据源可能是 CSV、可能是 Excel 导出的制表符分隔文本、也可能是 JSON。旧版本里模型一旦拿到不常见格式的数据处理能力会明显下降。新版本增加了数据预处理模块先对输入文件做格式识别再统一转换为内部标准结构。这个模块对“脏数据”也有基础容错比如空行、缺失列、日期格式不统一。3.4 问题四排错成本高旧版本里模型生成的图表配置报错后用户要把错误信息贴回对话让模型自己修经常来回好几轮。新版本在脚本内部增加了“配置校验”步骤生成完配置先自动检查一轮常见错误直接修正不需要把问题反馈给模型。这个设计大大减少了来回沟通的轮次。4. 环境准备与 Skill 安装需要提前说明的是不同 Skill 项目的安装位置和加载方式与 Agent 工具强相关。下面以主流的 Claude Code 和 Codex 类工具为例演示通用的安装思路。具体路径以你实际使用的版本为准。4.1 前置条件已安装 Node.js建议版本不低于 16ECharts 相关工程基本都依赖 Node 生态。已安装并配置好 Claude Code 或 Codex 等支持 Skill 的 Agent 工具。能正常访问 GitHub。如果网络不稳定可以优先使用 GitHub 镜像站下载仓库压缩包再把文件放到本地目录。不要在命令行里使用任何代理工具。有本地测试用的数据文件比如 CSV 或 JSON。4.2 获取项目文件在 GitHub 上搜索“chart skill”或“skill 图表”相关关键词找到项目仓库。下载方式可以选择git clone也可以直接下载 ZIP 压缩包。# 使用 git clone 方式请替换为实际仓库地址 git clone https://github.com/your-name/chart-skill.git如果你所在网络环境访问 GitHub 不稳定可以在 GitHub 仓库页面选择“Download ZIP”下载或者使用 GitHub 镜像站。注意无论用什么渠道下载都要校验文件完整性尽量选择官方发布渠道。4.3 安装到 Skills 目录假设项目下载后位于~/Downloads/chart-skill你需要把它复制到 Agent 工具能识别的位置。# 创建 skills 目录如果不存在 mkdir -p ~/.claude/skills # 复制图表 Skill 到技能目录 cp -r ~/Downloads/chart-skill ~/.claude/skills/chart-skill对于 Codex 类工具目录可能不同。可以用find或which检查你的配置目录再确定放置位置# 查找可能存在的技能目录 find ~ -type d -name skills 2/dev/null4.4 配置技能白名单部分 Agent 工具需要手动在配置文件中声明允许使用哪些 Skill。以 Claude Code 为例可以在项目根目录的CLAUDE.md中加入类似内容## Skills - chart-skill用于加载本项目的图表 Skill处理数据可视化任务。不同的 Agent 框架配置方式差异较大有的通过settings.json声明有的通过行为准则文件声明。不管哪种方式核心都是让 Agent 能在运行时发现并加载这个 Skill。4.5 验证安装是否成功安装完成后用一句最简单的指令测试请用 chart-skill 读取 data.csv 中的数据画一个柱状图输出 HTML。如果 Agent 能识别图表 Skill并输出指定格式的文件路径说明安装成功。如果 Agent 完全忽略了这个请求优先检查 Skill 目录是否在正确的搜索路径下。5. 核心流程与配置详解把 Skill 安装到本地以后理解它是怎么组织内部逻辑的对你的调试和使用会非常有帮助。一个带脚本的 Skill 通常会包含几个核心文件。5.1 Skill 目录结构下面是一个典型的图表 Skill 目录结构chart-skill/ ├── SKILL.md ├── scripts/ │ ├── generate_config.js │ └── validate_data.js ├── templates/ │ ├── dark_theme.html │ ├── light_theme.html │ └── common_option.json └── assets/ ├── echarts.min.js └── fonts/SKILL.md是整个 Skill 的入口描述Agent 首先读取这个文件来决定是否调用。scripts/generate_config.js负责把任务 JSON 转成 ECharts 配置。scripts/validate_data.js负责检查数据文件的格式和内容。templates/存放 HTML 模板和公共配置。assets/存放图表库本地文件和静态资源。5.2 SKILL.md 示例SKILL.md是 Skill 的“说明书”它直接决定了模型是否会正确使用这个 Skill。这里拿一个简化的 SKILL.md 示例来说明结构# Chart Skill ## 功能描述 根据用户提供的数据文件和图表要求生成可视化图表。 支持折线图、柱状图、饼图、散点图、雷达图等常见图表类型。 可以输出 HTML 文件也可以输出纯 ECharts 配置 JSON。 ## 适用场景 - 用户要求“可视化”“画图”“图表”“趋势图”“占比图”时。 - 用户希望分析数据分布、排名、变化趋势时。 ## 输入要求 - 数据文件支持 CSV、JSON、TSV。 - CSV 文件需要包含表头。 ## 输出格式 - 默认输出一个 HTML 文件文件名为 output.html。 - 可选输出 ECharts option 配置 JSON。 ## 使用步骤 1. 读取用户提供的数据文件路径。 2. 运行 node scripts/validate_data.js data_path 校验数据。 3. 根据用户描述生成任务 JSON。 4. 运行 node scripts/generate_config.js task_json template output_path。 5. 将生成结果返回给用户。 ## 注意事项 - 用户没有明确图表类型时按照数据特征选择最合适的类型。 - 时间序列数据优先选择折线图。 - 类别数据优先选择柱状图。 - 占比数据优先选择饼图。这段描述看起来很简单但它对模型行为的影响非常大。模型读完后知道自己“应该做什么、按什么顺序做、输出什么格式”不确定性大幅降低。5.3 任务 JSON 设计为了让脚本能稳定运行需要定义一套任务 JSON 规范。模型按这个规范输出脚本按这个规范解析。下面是一个任务 JSON 示例{ chart_type: line, title: 2023-2024 销售额趋势, data_source: ./data/sales.csv, x_field: month, y_fields: [sales], theme: dark, output: ./output/sales_trend.html }字段说明字段含义可选值示例chart_type图表类型line / bar / pie / scatter / radartitle图表标题任意字符串data_source数据文件路径本地路径x_fieldX 轴字段名CSV 列名y_fieldsY 轴字段列表一个或多个列名theme主题类型dark / lightoutput输出文件路径本地路径任务 JSON 的好处是“模型只做填空题”它不需要自己组装 ECharts 层次很深的配置对象只需要把用户意图翻译成结构化字段。5.4 配置生成脚本核心逻辑generate_config.js是 Skill 的核心它的任务是把任务 JSON 转成真正能跑的 ECharts 配置。这里给一个简化版的概念示例// 文件路径chart-skill/scripts/generate_config.js const fs require(fs); const path require(path); function loadData(filePath) { const raw fs.readFileSync(filePath, utf-8); const lines raw.trim().split(\n); const headers lines[0].split(,); const rows lines.slice(1).map((line) { const values line.split(,); const obj {}; headers.forEach((header, index) { obj[header.trim()] values[index] ? values[index].trim() : ; }); return obj; }); return rows; } function buildOption(task) { const data loadData(task.data_source); const xData data.map((row) row[task.x_field]); const series task.y_fields.map((field) ({ name: field, type: task.chart_type line ? line : bar, data: data.map((row) Number(row[field]) || 0), smooth: task.chart_type line })); return { title: { text: task.title }, tooltip: { trigger: axis }, legend: { data: task.y_fields }, xAxis: { type: category, data: xData }, yAxis: { type: value }, series: series }; } // 主流程读取任务 JSON生成配置 const taskPath process.argv[2]; const task JSON.parse(fs.readFileSync(taskPath, utf-8)); const option buildOption(task); const outputPath task.output || ./output.json; fs.writeFileSync(outputPath, JSON.stringify(option, null, 2), utf-8); console.log(配置已生成${outputPath});注意这段代码是概念演示重点说明“脚本驱动 模板渲染”的工作方式。在实际的 Skill 项目中逻辑会更复杂包括 HTML 包装、主题注入、ECharts 库路径替换等。6. 深色科技感图表实操示例大模型给用户生成图表时最常见的需求之一就是“深色科技感”。这种风格在数据大屏、汇报演示、内部工具里非常受欢迎。下面演示如何通过图表 Skill 快速生成这种效果。6.1 准备数据文件先准备一个简单的数据文件sales.csvmonth,sales 2023-01,120 2023-02,150 2023-03,135 2023-04,180 2023-05,210 2023-06,195 2023-07,240 2023-08,260 2023-09,230 2023-10,280 2023-11,310 2023-12,3606.2 向 Agent 发起任务在支持 Skill 的 Agent 工具中输入使用 chart-skill读取 sales.csv 中的数据画一个 2023 年每月销售额趋势图。 要求 1. 深色科技感主题。 2. 标题为“2023 月度销售额趋势”。 3. 输出 HTML 文件。Agent 读取 Skill 后会先校验数据再生成任务 JSON随后调用generate_config.js脚本。6.3 生成的 ECharts 基础配置Skill 内部生成的配置大致如下const option { backgroundColor: #0f1923, title: { text: 2023 月度销售额趋势, textStyle: { color: #e0e6ed } }, tooltip: { trigger: axis }, legend: { data: [sales], textStyle: { color: #a0b0c0 } }, xAxis: { type: category, data: [2023-01, 2023-02, 2023-03, 2023-04, 2023-05, 2023-06, 2023-07, 2023-08, 2023-09, 2023-10, 2023-11, 2023-12], axisLine: { lineStyle: { color: #2a3a4a } }, axisLabel: { color: #a0b0c0 } }, yAxis: { type: value, splitLine: { lineStyle: { color: #1e2c38 } }, axisLabel: { color: #a0b0c0 } }, series: [ { name: sales, type: line, data: [120, 150, 135, 180, 210, 195, 240, 260, 230, 280, 310, 360], smooth: true, lineStyle: { width: 3, color: #00d4ff }, areaStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: rgba(0, 212, 255, 0.35) }, { offset: 1, color: rgba(0, 212, 255, 0) } ] } } } ] };这个配置里有几个值得注意的点backgroundColor用了深色背景这是科技感的第一层基础。areaStyle使用了线性渐变色给折线图增加视觉层次。axisLine、splitLine、axisLabel都做了颜色统一避免默认主题的白色刺眼。smooth开启后折线会变平滑视觉上更接近“大屏风格”。如果把这段配置直接放进一个带 ECharts 的 HTML 页面中效果就是常见的深色科技感折线图。6.4 验证输出结果生成完成后在输出目录检查文件# 查看输出目录 ls -la output/ # 如果输出是 HTML直接打开 open output/sales_trend.html浏览器中应该能看到带标题、图例、平滑曲线、渐变面积的深色折线图。如果页面空白优先打开浏览器开发者工具看 Console 是否有 ECharts 相关报错重点检查脚本路径是否正确。7. 大更新新增能力解读这次大更新不只是修 Bug它还加入了几个对实际使用非常有帮助的能力项。7.1 自动字段推断旧版需要用户或模型明确指定“哪一列是 X 轴、哪一列是 Y 轴”。新版增加了字段推断模块脚本会读取 CSV 表头结合数据类型自动判断哪个字段适合做分类轴、哪个字段适合做数值轴。如果判断结果不符合预期模型仍可以通过任务 JSON 里的x_field和y_fields强制指定。7.2 多图表批量生成新增了批量模式可以一次处理多个数据文件批量输出多个图表文件。这个能力在做“日报自动生成”或者“多维度汇报”时非常实用。比如你有一个目录里放着一周七天的数据文件让 Agent 调用 Skill 的批量模式一次生成七张图不会再像以前那样一张一张催。7.3 更丰富的主题系统更新后的主题系统支持“深色科技风”“浅色简约风”“业务报表风”三种预设主题。每个主题不仅包含背景色、字体色还包含坐标轴样式、图例位置、tooltip 样式等细节。对个人开发者来说这种“开箱即用”的视觉统一性比自己反复调样式要高效得多。7.4 配置校验与自动纠错生成配置前脚本会先对任务 JSON 做校验比如检查chart_type是否合法、数据路径是否存在、字段名是否匹配。配置生成后还会做一轮 ECharts 配置结构检查对缺失的字段补默认值对错误字段名做提示。这一步把很多“运行后才暴露”的问题提前到了生成阶段。8. 常见问题与排查思路在实际使用中最容易出问题的是下面几个环节。我整理成了一份排查表。问题现象可能原因排查方式解决方案Agent 完全不调用 SkillSkill 不在 Agent 的搜索目录中检查 skills 目录路径查看 Agent 工具文档把 Skill 放到正确的全局或项目 skills 目录提示“找不到脚本文件”相对路径或权限问题检查脚本是否有执行权限路径是否正确给脚本添加执行权限或用绝对路径CSV 数据读取后字段为空CSV 编码不是 UTF-8用编辑器查看文件编码另存为 UTF-8 编码后重试生成的图表是白屏ECharts 库文件路径错误打开浏览器控制台查看报错修改 HTML 模板中的脚本引用路径图表标题是乱码HTML 模板缺字库或未声明 UTF-8检查 HTML 的 meta charset在 HTML 中声明meta charsetUTF-8数据列数多但图表只展示了一个系列任务 JSON 的 y_fields 配置遗漏查看生成的 JSON 文件在 y_fields 中补充需要展示的字段名模型生成的 JSON 格式非法模型输出被截断或手误打开 JSON 文件用 JSON 格式化工具检查让模型重新生成或手动修正 JSON 后重跑如果遇到问题一个很实用的调试思路是把流程拆开逐段验证。先确认数据文件能被正确读取再确认任务 JSON 内容正确最后单独运行generate_config.js脚本看脚本本身能否成功生成配置。这样能快速定位是“模型理解问题”还是“脚本运行问题”。9. 最佳实践与工程建议9.1 把 Skill 纳入项目版本管理Skill 不应该是一个散落在本地目录里的“一次性脚本”。建议你把 Skill 放进 Git 仓库和项目代码一起管理。这样团队成员可以直接同步同一份 Skill解决“我本地能用、别人那里不行”的经典协作问题。# 在项目根目录创建 skills 目录并纳入 Git mkdir -p skills git add skills/ git commit -m add chart skill9.2 在 SKILL.md 中明确边界一个常见的误区是告诉模型“这个 Skill 什么都能做”。这会适得其反。更稳妥的做法是在 SKILL.md 里明确写清楚“这个 Skill 擅长什么、不擅长什么”。比如“本 Skill 只处理图表生成不负责数据分析结论的撰写”。边界清晰模型才不会乱来。9.3 注意数据安全图表 Skill 通常会读取本地文件如果你在团队项目中共享 Skill要警惕敏感数据泄露风险。不要让 Skill 把数据文件内容偷偷写入日志也不要在无授权的情况下读取生产环境数据。如果 Skill 支持访问外部资源需要添加白名单约束。9.4 保留模型决策权而不是完全取代虽然 Skill 内部做了很多自动化处理但不要让模型完全丧失判断力。比如“用户明明要的是占比关系模型却因为没有接收到明确指令默认选了折线图”这就是错误的自动化。要维护好“决策权在模型、执行权在 Skill”的原则。9.5 对模板进行持续沉淀图表模板的价值会随着使用次数增加而变大。每当你调出一个满意的视觉方案都可以沉淀到templates/目录中。以后新的任务可以直接基于这套模板生成不必重新调样式。这个积累过程才是图表 Skill 长期价值的核心。10. 总结与应用思考图表 Skill 这次大更新真正改变了什么我的判断是它把“让模型画图”从一道自由发挥题变成了一个结构化流程。模型不再需要把一个庞大的图表库 API 塞进自己的上下文里它只需要理解任务、生成结构化参数剩下的交给 Skill 里的脚本和模板。这种做法不仅提升了生成稳定性还让图表输出具备了一致性和可维护性。对于个人开发者建议把这套 Skill 用在一个你日常高频重复的场景里比如周报图表生成、数据大屏搭建、内部 Dashboard 原型制作。先用一个最小流程跑通再逐步补充模板和脚本。对于做 Agent 应用开发的团队图表 Skill 的架构思路值得参考它本质上是用“结构化任务 JSON 脚本执行 模板渲染”来约束模型输出。这套思路可以推广到其他领域比如报表生成、PPT 生成、文档格式化等。不是所有任务都适合让模型直接输出最终结果很多任务更适合让模型“做决策、填参数”再由专业工具完成最终渲染。关于下一步的学习方向可以重点关注两个点一是 Agent 的 Skill 机制本身的演进二是 ECharts 这类可视化库的配置能力边界。前者让你更理解大模型应用的产品化方式后者让你在自定义图表模板时更有底气。两者结合图表 Agent 的体验会越来越接近专业产品。 图表Skill大更新：让AI Agent稳定生成ECharts可视化
如果你让 AI 写代码画图表大概率会碰到这种场景对话里说了三遍“用 ECharts 画一个折线图”模型也答应了但生成的代码要么引用了根本不存在的图表库 API要么把series里的数据结构写错要么图表默认主题和你的页面风格完全不在一个频道。你复制到本地跑起来控制台先报一串红色警告再给你一张白屏。问题不在于大模型不会写代码而在于它对特定工具链的细节掌握是飘忽的。尤其是图表这种“看起来简单、实际参数很多”的领域模型对 API 的记忆经常是模糊的。也正因为如此把图表能力封装成 Agent 可调用的 Skill就成了一个非常有价值的开源方向。我在 GitHub 上维护的图表 Skill 项目这次做了一次大更新这篇文章就围绕这次更新把“图表 Skill”这个技术选型从原理到实践完整讲一遍。如果你正在做 AI Agent 类应用、想给 Claude Code 或 Codex 这类工具扩展专业能力又或者你只是受够了每次让 AI 画图都要反复调 prompt这篇内容值得读完。文章不会只讲“它很强”而是会说明白 Skill 内部是怎么工作的、大更新到底改了什么、你应该怎么安装配置、以及实际使用中最大的几个坑在哪。1. 为什么“图表”需要做成 Skill先看一个基础问题图表生成这件事靠大模型直接写代码到底难在哪很多人以为难在“模型不会写代码”但事实上 Claude、GPT 这类模型写普通业务逻辑已经很能打了。真正的问题在于图表库属于“API 细节密集型”工具。以 ECharts 为例一个最简单的折线图配置项里要处理title、tooltip、legend、xAxis、yAxis、series这六个顶层字段。真正落到series里面每个系列类型又有一堆自己的专属参数。大模型训练数据里确实包含这些信息但它是“大概知道”不是“精确知道”。你让它直接写它经常把lineStyle写成line把dataZoom的配置结构记错或者忘掉tooltip.trigger应该设成axis。结果是代码能跑但功能不对。Skill 解决的就是这个“精确性”问题。它不要求模型“记住”全部 API而是把图表能力拆成“模型能理解的任务描述 可复用的工具实现”。模型只需要判断用户想画什么图、数据是什么、偏好是什么然后按照 Skill 约定的规范去调用能力剩下的参数细节由 Skill 内部处理。从执行架构上看一个 Skill 通常由三部分组成组成部分作用类比SKILL.md 描述文件告诉 Agent 这个 Skill 能做什么、什么场景用工具的“说明书”脚本或逻辑代码实际干活读取数据、生成配置、渲染图表工具的“引擎”模板或资源文件提供可复用的图表模板、主题、输出格式工具的“模具”这次图表 Skill 大更新本质上就是把这套结构重新做扎实了。更新前它更接近“一个能输出 ECharts 配置的 Prompt 模板”更新后它变成了一个带有输入校验、任务拆解、模板渲染、错误回退的完整工具封装。下面我把这套原理展开讲。2. Skill 的核心概念与运行原理2.1 什么是 Agent SkillSkill 这个名词在 Claude Code、Codex 等 Agent 工具流行之后被越来越多的人提到。简单说Skill 就是一组能够被 Agent 动态加载和调用的“专业能力包”。它和普通的 Prompt 区别在于Skill 不仅是文字描述它还可以包含可执行脚本、配置文件、模板文件。你可以这样理解普通 Prompt 是让模型“照着一句话去写代码”Skill 是给模型“一套随时可取的工具栏 使用说明”。模型收到用户需求后判断当前任务属于哪个 Skill 的职责范围然后按 SKILL.md 里的说明去调用脚本、读取模板、生成结果。2.2 一次完整的图表 Skill 调用过程假设用户说了一句“用这里的数据文件画一个 2023 年到 2024 年的销售额趋势图要深色科技风。”如果没有 Skill模型会凭记忆写一段 ECharts 代码大概率出现主题不统一、字段映射错误、中文字体加载问题。有了 Skill调用过程变成了下面这样Agent 读取用户需求识别任务类型是“数据可视化”。Agent 检查可用的 Skill 列表发现图表 Skill 可以处理这个任务。Agent 读取 SKILL.md按照技能说明提取关键参数数据源路径、图表类型趋势图、风格偏好深色科技风。Skill 内部的解析脚本读取数据文件自动完成字段映射和时间格式归一化。Skill 调用模板渲染逻辑生成一份结构正确的 ECharts 配置必要时输出一个完整的 HTML 文件。Agent 把生成结果返回给用户用户可以直接在浏览器里打开。整个过程里模型不需要记住 ECharts 的每一个配置细节它只需要做“判断”和“决策”真正繁琐的参数组装交给了 Skill 内部代码。2.3 与 Prompt 注入、MCP 工具的对比很多初次接触的人会混淆“Skill”“Prompt 注入”“MCP 工具”这三个概念。它们确实有重叠但解决的问题层级不一样。方案核心思想典型使用方式适合场景Prompt 注入把指令直接写进对话上下文每次对话都附带一段“请按规范输出”的文字简单约束、快速验证Skill把“说明 脚本 模板”打包成可复用能力Agent 按需加载并使用专业任务、复杂流程、需要稳定输出的场景MCP 工具把外部服务能力接入 Agent模型通过工具调用协议访问外部 API需要实时数据、外部系统交互我的判断是Skill 和 MCP 并不冲突未来二者会共存。Skill 适合“高确定性、可离线运行、模板化程度高”的任务MCP 适合需要联网或对接外部系统的任务。图表生成恰好是 Skill 的舒适区。3. 大更新解决了哪些核心问题这次大更新不是一个“加几个模板”的小版本迭代而是把图表 Skill 的使用体验整体提升了一个台阶。下面说清楚它真正解决的问题在哪。3.1 问题一模型不知道“什么时候该用图表 Skill”旧版本最大的问题不是画图效果差而是模型经常“不知道该调用”。你让它“分析一下数据”它可能直接输出一段文字总结完全没有触发图表 Skill。即使触发了模型也可能在“画条形图还是折线图”这种类型判断上反复横跳。新版本在 SKILL.md 里强化了“任务触发条件”和“图表类型选择优先级”。比如用户提到“趋势”“增长”“下降”Skill 会优先建议折线图或面积图提到“占比”“份额”优先饼图或环形图提到“排名”“对比”优先条形图。模型拿到这把“尺子”后决策稳定性会好很多。3.2 问题二图表配置结构不稳定老版本依赖模型直接输出option对象输出的代码经常出现字段名不统一、数据结构缺项的问题。新版本的核心改动是增加了一个“配置生成器”脚本模型只负责输出结构化的任务 JSON脚本根据 JSON 去匹配模板、渲染配置。这个改动把“模型自由发挥”变成“模型做选择题 脚本做填空题”。输出稳定性的提升是非常明显的。3.3 问题三数据文件格式兼容性差真实场景里数据源可能是 CSV、可能是 Excel 导出的制表符分隔文本、也可能是 JSON。旧版本里模型一旦拿到不常见格式的数据处理能力会明显下降。新版本增加了数据预处理模块先对输入文件做格式识别再统一转换为内部标准结构。这个模块对“脏数据”也有基础容错比如空行、缺失列、日期格式不统一。3.4 问题四排错成本高旧版本里模型生成的图表配置报错后用户要把错误信息贴回对话让模型自己修经常来回好几轮。新版本在脚本内部增加了“配置校验”步骤生成完配置先自动检查一轮常见错误直接修正不需要把问题反馈给模型。这个设计大大减少了来回沟通的轮次。4. 环境准备与 Skill 安装需要提前说明的是不同 Skill 项目的安装位置和加载方式与 Agent 工具强相关。下面以主流的 Claude Code 和 Codex 类工具为例演示通用的安装思路。具体路径以你实际使用的版本为准。4.1 前置条件已安装 Node.js建议版本不低于 16ECharts 相关工程基本都依赖 Node 生态。已安装并配置好 Claude Code 或 Codex 等支持 Skill 的 Agent 工具。能正常访问 GitHub。如果网络不稳定可以优先使用 GitHub 镜像站下载仓库压缩包再把文件放到本地目录。不要在命令行里使用任何代理工具。有本地测试用的数据文件比如 CSV 或 JSON。4.2 获取项目文件在 GitHub 上搜索“chart skill”或“skill 图表”相关关键词找到项目仓库。下载方式可以选择git clone也可以直接下载 ZIP 压缩包。# 使用 git clone 方式请替换为实际仓库地址 git clone https://github.com/your-name/chart-skill.git如果你所在网络环境访问 GitHub 不稳定可以在 GitHub 仓库页面选择“Download ZIP”下载或者使用 GitHub 镜像站。注意无论用什么渠道下载都要校验文件完整性尽量选择官方发布渠道。4.3 安装到 Skills 目录假设项目下载后位于~/Downloads/chart-skill你需要把它复制到 Agent 工具能识别的位置。# 创建 skills 目录如果不存在 mkdir -p ~/.claude/skills # 复制图表 Skill 到技能目录 cp -r ~/Downloads/chart-skill ~/.claude/skills/chart-skill对于 Codex 类工具目录可能不同。可以用find或which检查你的配置目录再确定放置位置# 查找可能存在的技能目录 find ~ -type d -name skills 2/dev/null4.4 配置技能白名单部分 Agent 工具需要手动在配置文件中声明允许使用哪些 Skill。以 Claude Code 为例可以在项目根目录的CLAUDE.md中加入类似内容## Skills - chart-skill用于加载本项目的图表 Skill处理数据可视化任务。不同的 Agent 框架配置方式差异较大有的通过settings.json声明有的通过行为准则文件声明。不管哪种方式核心都是让 Agent 能在运行时发现并加载这个 Skill。4.5 验证安装是否成功安装完成后用一句最简单的指令测试请用 chart-skill 读取 data.csv 中的数据画一个柱状图输出 HTML。如果 Agent 能识别图表 Skill并输出指定格式的文件路径说明安装成功。如果 Agent 完全忽略了这个请求优先检查 Skill 目录是否在正确的搜索路径下。5. 核心流程与配置详解把 Skill 安装到本地以后理解它是怎么组织内部逻辑的对你的调试和使用会非常有帮助。一个带脚本的 Skill 通常会包含几个核心文件。5.1 Skill 目录结构下面是一个典型的图表 Skill 目录结构chart-skill/ ├── SKILL.md ├── scripts/ │ ├── generate_config.js │ └── validate_data.js ├── templates/ │ ├── dark_theme.html │ ├── light_theme.html │ └── common_option.json └── assets/ ├── echarts.min.js └── fonts/SKILL.md是整个 Skill 的入口描述Agent 首先读取这个文件来决定是否调用。scripts/generate_config.js负责把任务 JSON 转成 ECharts 配置。scripts/validate_data.js负责检查数据文件的格式和内容。templates/存放 HTML 模板和公共配置。assets/存放图表库本地文件和静态资源。5.2 SKILL.md 示例SKILL.md是 Skill 的“说明书”它直接决定了模型是否会正确使用这个 Skill。这里拿一个简化的 SKILL.md 示例来说明结构# Chart Skill ## 功能描述 根据用户提供的数据文件和图表要求生成可视化图表。 支持折线图、柱状图、饼图、散点图、雷达图等常见图表类型。 可以输出 HTML 文件也可以输出纯 ECharts 配置 JSON。 ## 适用场景 - 用户要求“可视化”“画图”“图表”“趋势图”“占比图”时。 - 用户希望分析数据分布、排名、变化趋势时。 ## 输入要求 - 数据文件支持 CSV、JSON、TSV。 - CSV 文件需要包含表头。 ## 输出格式 - 默认输出一个 HTML 文件文件名为 output.html。 - 可选输出 ECharts option 配置 JSON。 ## 使用步骤 1. 读取用户提供的数据文件路径。 2. 运行 node scripts/validate_data.js data_path 校验数据。 3. 根据用户描述生成任务 JSON。 4. 运行 node scripts/generate_config.js task_json template output_path。 5. 将生成结果返回给用户。 ## 注意事项 - 用户没有明确图表类型时按照数据特征选择最合适的类型。 - 时间序列数据优先选择折线图。 - 类别数据优先选择柱状图。 - 占比数据优先选择饼图。这段描述看起来很简单但它对模型行为的影响非常大。模型读完后知道自己“应该做什么、按什么顺序做、输出什么格式”不确定性大幅降低。5.3 任务 JSON 设计为了让脚本能稳定运行需要定义一套任务 JSON 规范。模型按这个规范输出脚本按这个规范解析。下面是一个任务 JSON 示例{ chart_type: line, title: 2023-2024 销售额趋势, data_source: ./data/sales.csv, x_field: month, y_fields: [sales], theme: dark, output: ./output/sales_trend.html }字段说明字段含义可选值示例chart_type图表类型line / bar / pie / scatter / radartitle图表标题任意字符串data_source数据文件路径本地路径x_fieldX 轴字段名CSV 列名y_fieldsY 轴字段列表一个或多个列名theme主题类型dark / lightoutput输出文件路径本地路径任务 JSON 的好处是“模型只做填空题”它不需要自己组装 ECharts 层次很深的配置对象只需要把用户意图翻译成结构化字段。5.4 配置生成脚本核心逻辑generate_config.js是 Skill 的核心它的任务是把任务 JSON 转成真正能跑的 ECharts 配置。这里给一个简化版的概念示例// 文件路径chart-skill/scripts/generate_config.js const fs require(fs); const path require(path); function loadData(filePath) { const raw fs.readFileSync(filePath, utf-8); const lines raw.trim().split(\n); const headers lines[0].split(,); const rows lines.slice(1).map((line) { const values line.split(,); const obj {}; headers.forEach((header, index) { obj[header.trim()] values[index] ? values[index].trim() : ; }); return obj; }); return rows; } function buildOption(task) { const data loadData(task.data_source); const xData data.map((row) row[task.x_field]); const series task.y_fields.map((field) ({ name: field, type: task.chart_type line ? line : bar, data: data.map((row) Number(row[field]) || 0), smooth: task.chart_type line })); return { title: { text: task.title }, tooltip: { trigger: axis }, legend: { data: task.y_fields }, xAxis: { type: category, data: xData }, yAxis: { type: value }, series: series }; } // 主流程读取任务 JSON生成配置 const taskPath process.argv[2]; const task JSON.parse(fs.readFileSync(taskPath, utf-8)); const option buildOption(task); const outputPath task.output || ./output.json; fs.writeFileSync(outputPath, JSON.stringify(option, null, 2), utf-8); console.log(配置已生成${outputPath});注意这段代码是概念演示重点说明“脚本驱动 模板渲染”的工作方式。在实际的 Skill 项目中逻辑会更复杂包括 HTML 包装、主题注入、ECharts 库路径替换等。6. 深色科技感图表实操示例大模型给用户生成图表时最常见的需求之一就是“深色科技感”。这种风格在数据大屏、汇报演示、内部工具里非常受欢迎。下面演示如何通过图表 Skill 快速生成这种效果。6.1 准备数据文件先准备一个简单的数据文件sales.csvmonth,sales 2023-01,120 2023-02,150 2023-03,135 2023-04,180 2023-05,210 2023-06,195 2023-07,240 2023-08,260 2023-09,230 2023-10,280 2023-11,310 2023-12,3606.2 向 Agent 发起任务在支持 Skill 的 Agent 工具中输入使用 chart-skill读取 sales.csv 中的数据画一个 2023 年每月销售额趋势图。 要求 1. 深色科技感主题。 2. 标题为“2023 月度销售额趋势”。 3. 输出 HTML 文件。Agent 读取 Skill 后会先校验数据再生成任务 JSON随后调用generate_config.js脚本。6.3 生成的 ECharts 基础配置Skill 内部生成的配置大致如下const option { backgroundColor: #0f1923, title: { text: 2023 月度销售额趋势, textStyle: { color: #e0e6ed } }, tooltip: { trigger: axis }, legend: { data: [sales], textStyle: { color: #a0b0c0 } }, xAxis: { type: category, data: [2023-01, 2023-02, 2023-03, 2023-04, 2023-05, 2023-06, 2023-07, 2023-08, 2023-09, 2023-10, 2023-11, 2023-12], axisLine: { lineStyle: { color: #2a3a4a } }, axisLabel: { color: #a0b0c0 } }, yAxis: { type: value, splitLine: { lineStyle: { color: #1e2c38 } }, axisLabel: { color: #a0b0c0 } }, series: [ { name: sales, type: line, data: [120, 150, 135, 180, 210, 195, 240, 260, 230, 280, 310, 360], smooth: true, lineStyle: { width: 3, color: #00d4ff }, areaStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: rgba(0, 212, 255, 0.35) }, { offset: 1, color: rgba(0, 212, 255, 0) } ] } } } ] };这个配置里有几个值得注意的点backgroundColor用了深色背景这是科技感的第一层基础。areaStyle使用了线性渐变色给折线图增加视觉层次。axisLine、splitLine、axisLabel都做了颜色统一避免默认主题的白色刺眼。smooth开启后折线会变平滑视觉上更接近“大屏风格”。如果把这段配置直接放进一个带 ECharts 的 HTML 页面中效果就是常见的深色科技感折线图。6.4 验证输出结果生成完成后在输出目录检查文件# 查看输出目录 ls -la output/ # 如果输出是 HTML直接打开 open output/sales_trend.html浏览器中应该能看到带标题、图例、平滑曲线、渐变面积的深色折线图。如果页面空白优先打开浏览器开发者工具看 Console 是否有 ECharts 相关报错重点检查脚本路径是否正确。7. 大更新新增能力解读这次大更新不只是修 Bug它还加入了几个对实际使用非常有帮助的能力项。7.1 自动字段推断旧版需要用户或模型明确指定“哪一列是 X 轴、哪一列是 Y 轴”。新版增加了字段推断模块脚本会读取 CSV 表头结合数据类型自动判断哪个字段适合做分类轴、哪个字段适合做数值轴。如果判断结果不符合预期模型仍可以通过任务 JSON 里的x_field和y_fields强制指定。7.2 多图表批量生成新增了批量模式可以一次处理多个数据文件批量输出多个图表文件。这个能力在做“日报自动生成”或者“多维度汇报”时非常实用。比如你有一个目录里放着一周七天的数据文件让 Agent 调用 Skill 的批量模式一次生成七张图不会再像以前那样一张一张催。7.3 更丰富的主题系统更新后的主题系统支持“深色科技风”“浅色简约风”“业务报表风”三种预设主题。每个主题不仅包含背景色、字体色还包含坐标轴样式、图例位置、tooltip 样式等细节。对个人开发者来说这种“开箱即用”的视觉统一性比自己反复调样式要高效得多。7.4 配置校验与自动纠错生成配置前脚本会先对任务 JSON 做校验比如检查chart_type是否合法、数据路径是否存在、字段名是否匹配。配置生成后还会做一轮 ECharts 配置结构检查对缺失的字段补默认值对错误字段名做提示。这一步把很多“运行后才暴露”的问题提前到了生成阶段。8. 常见问题与排查思路在实际使用中最容易出问题的是下面几个环节。我整理成了一份排查表。问题现象可能原因排查方式解决方案Agent 完全不调用 SkillSkill 不在 Agent 的搜索目录中检查 skills 目录路径查看 Agent 工具文档把 Skill 放到正确的全局或项目 skills 目录提示“找不到脚本文件”相对路径或权限问题检查脚本是否有执行权限路径是否正确给脚本添加执行权限或用绝对路径CSV 数据读取后字段为空CSV 编码不是 UTF-8用编辑器查看文件编码另存为 UTF-8 编码后重试生成的图表是白屏ECharts 库文件路径错误打开浏览器控制台查看报错修改 HTML 模板中的脚本引用路径图表标题是乱码HTML 模板缺字库或未声明 UTF-8检查 HTML 的 meta charset在 HTML 中声明meta charsetUTF-8数据列数多但图表只展示了一个系列任务 JSON 的 y_fields 配置遗漏查看生成的 JSON 文件在 y_fields 中补充需要展示的字段名模型生成的 JSON 格式非法模型输出被截断或手误打开 JSON 文件用 JSON 格式化工具检查让模型重新生成或手动修正 JSON 后重跑如果遇到问题一个很实用的调试思路是把流程拆开逐段验证。先确认数据文件能被正确读取再确认任务 JSON 内容正确最后单独运行generate_config.js脚本看脚本本身能否成功生成配置。这样能快速定位是“模型理解问题”还是“脚本运行问题”。9. 最佳实践与工程建议9.1 把 Skill 纳入项目版本管理Skill 不应该是一个散落在本地目录里的“一次性脚本”。建议你把 Skill 放进 Git 仓库和项目代码一起管理。这样团队成员可以直接同步同一份 Skill解决“我本地能用、别人那里不行”的经典协作问题。# 在项目根目录创建 skills 目录并纳入 Git mkdir -p skills git add skills/ git commit -m add chart skill9.2 在 SKILL.md 中明确边界一个常见的误区是告诉模型“这个 Skill 什么都能做”。这会适得其反。更稳妥的做法是在 SKILL.md 里明确写清楚“这个 Skill 擅长什么、不擅长什么”。比如“本 Skill 只处理图表生成不负责数据分析结论的撰写”。边界清晰模型才不会乱来。9.3 注意数据安全图表 Skill 通常会读取本地文件如果你在团队项目中共享 Skill要警惕敏感数据泄露风险。不要让 Skill 把数据文件内容偷偷写入日志也不要在无授权的情况下读取生产环境数据。如果 Skill 支持访问外部资源需要添加白名单约束。9.4 保留模型决策权而不是完全取代虽然 Skill 内部做了很多自动化处理但不要让模型完全丧失判断力。比如“用户明明要的是占比关系模型却因为没有接收到明确指令默认选了折线图”这就是错误的自动化。要维护好“决策权在模型、执行权在 Skill”的原则。9.5 对模板进行持续沉淀图表模板的价值会随着使用次数增加而变大。每当你调出一个满意的视觉方案都可以沉淀到templates/目录中。以后新的任务可以直接基于这套模板生成不必重新调样式。这个积累过程才是图表 Skill 长期价值的核心。10. 总结与应用思考图表 Skill 这次大更新真正改变了什么我的判断是它把“让模型画图”从一道自由发挥题变成了一个结构化流程。模型不再需要把一个庞大的图表库 API 塞进自己的上下文里它只需要理解任务、生成结构化参数剩下的交给 Skill 里的脚本和模板。这种做法不仅提升了生成稳定性还让图表输出具备了一致性和可维护性。对于个人开发者建议把这套 Skill 用在一个你日常高频重复的场景里比如周报图表生成、数据大屏搭建、内部 Dashboard 原型制作。先用一个最小流程跑通再逐步补充模板和脚本。对于做 Agent 应用开发的团队图表 Skill 的架构思路值得参考它本质上是用“结构化任务 JSON 脚本执行 模板渲染”来约束模型输出。这套思路可以推广到其他领域比如报表生成、PPT 生成、文档格式化等。不是所有任务都适合让模型直接输出最终结果很多任务更适合让模型“做决策、填参数”再由专业工具完成最终渲染。关于下一步的学习方向可以重点关注两个点一是 Agent 的 Skill 机制本身的演进二是 ECharts 这类可视化库的配置能力边界。前者让你更理解大模型应用的产品化方式后者让你在自定义图表模板时更有底气。两者结合图表 Agent 的体验会越来越接近专业产品。