企业官网建设流程全解析

如果你最近在用 Claude Code、Codex 或 Cursor 这类 AI 编程助手写数据分析页面，大概率会遇到一个很尴尬的局面：让 AI 画一张图表，它确实画出来了，但坐标轴标签挤成一团、千分位分隔符没了、配色辣眼睛，数据量大一点页面直接卡死。这不是大模型能力不行，而是它在“写代码”和“懂图表”之间缺少一层领域经验的沉淀。

这个痛点，就是我做这个开源图表 skill 的出发点。简单说，我把坐标轴优化、配色规范、性能优化、图表选型这些图表领域的经验，全部固化成了一套 AI 编程助手可以直接读取和执行的技能包。这次大更新之后，它已经不只是“能画图”，而是能把图表做到接近专业前端和数据分析师的水准。

这篇文章我会把这次更新的核心内容、使用方式、定制方法，以及常见坑都梳理一遍。如果你正在用 AI 编程助手做可视化相关的工作，这篇建议收藏。

1. 为什么要给 AI 编程助手做一个图表 skill

先聊一个本质问题：为什么直接让 AI 生成图表，效果总是不稳定？

AI 编程助手本身是通用的代码生成器，它知道 ECharts 的语法，知道 Plotly 的 API，也知道 D3.js 的基本逻辑。但它不知道你的项目中图表的“及格线”在哪里。你如果不告诉它，它就不会主动去做这些事情：

• 数据量过万时自动切换到 canvas 渲染而不是 svg；
• 柱状图标签旋转角度和间隔的自动计算；
• 饼图大类超过 8 个时自动合并为“其他”；
• 折线图缺数据时用断点而不是强行连线；
• 双 Y 轴时主次轴刻度对齐和颜色一致性；
• 深色主题下的配色对比度和标签可读性。

这些经验分散在很多图表库的文档、设计规范和项目代码里，但没有任何一本手册会系统地写给你。普通 prompt 最多只能临时约束其中一两条，没法形成稳定的输出质量。

Skill 机制解决的正是这个问题。在 Claude Code、Codex 等工具中，skill 不是一段简单的提示词，而是一个带有目录结构、包含指令、模板、配置和校验规则的完整知识包。当对话内容命中 skill 的触发条件时，AI 助手会把 skill 中的内容作为上下文加载，再结合当前任务来生成结果。

你可以把这个图表 skill 理解为“给 AI 装了图表部门的专业培训手册”。它不是让 AI 换个说法回答你，而是让 AI 在生成代码的每一步，都按一套已经验证过的标准来执行。

2. 图表 skill 的基本原理与设计思路

网上很多人把 skill 理解成“高级提示词”，这个说法对了一半。从使用效果看，skill 确实是通过指令约束模型行为，但它的工程化程度远高于普通 prompt。

一个标准的 skill 至少包含这三个部分：

• SKILL.md：技能的核心指令文件，描述技能用途、触发条件、执行流程和输出规范；
• 资源文件：包括代码模板、配置文件、数据样例、参考文档等，AI 生成结果时可以按需参考；
• 验证规则：输出结果需要满足的自检清单，相当于给生成结果加了一道质检流程。

我的图表 skill 在最初版本里，重点做的是前两部分：把常用的图表模板整理好，写清楚生成要求。第一版发布后在 GitHub 上收到了不少反馈，很多人确实用了起来，但同时也暴露了几个明显的问题。

其中一个最典型的反馈是：图表库绑得太死。第一版主要面向 ECharts，但相当一部分用户用的是 Plotly，还有一部分人在写 Python 的数据分析脚本，需要的是 matplotlib 和 seaborn。另一个问题是模板的风格和团队规范对不上，改起来要动很多代码，不够灵活。

这次大更新就是围绕这些问题展开的。我从三个层面重构了整个 skill 的结构：

• 兼容层：不再假设你用什么图表库，而是通过配置项指定，ECharts、Plotly、Chart.js、matplotlib 都可以；
• 模板层：每个图表类型提供基础模板和进阶模板两套，基础模板保证能跑，进阶模板追加性能优化和交互细节；
• 规则层：把坐标轴、颜色、图例、数据格式化、响应式适配等要求独立成规则文件，用户可以通过配置开关控制。

这个设计的好处是，skill 不再是一份只能原样使用的文档，而是一套可以按需裁剪的体系。你不用理解每一行模板代码是怎么写的，只需要通过配置文件告诉 AI 你想要的风格和约束，它就能生成符合要求的图表。

3. 这次大更新的核心内容

这次更新不是小修小补，而是把图表 skill 从“可用”推进到了“好用”的阶段。下面逐条说清楚核心变化。

3.1 支持多 Agent 平台

之前使用这个 skill 需要手动把 SKILL.md 放到指定目录，不同工具的配置方式还不一样。这次更新统一了项目结构，并针对主流 Agent 工具的 skill 目录规范做了适配。

目前支持以下环境：

• Claude Code：把 skill 文件夹放到项目的.claude/skills/目录；
• Codex：放到配置的 skills 目录，并在配置中启用；
• Cursor：通过.cursor/rules/引用规则文件，或按 Agent 模式加载。

这样你在不同工具之间切换时，不需要重新学习整套用法，只是目录位置不同而已。

3.2 新增图表类型

第一版覆盖了常见的柱状图、折线图、饼图、散点图，这次更新把覆盖面扩大到了数据分析和可视化场景中更专业的方向。新增的图表类型包括：

• 六边形蜂窝图：用于展示密度分布和热力关系，比如地理位置数据、用户分布密度；
• 桑基图：用于展示流量流转、资源分配和路径分析；
• 雷达图：用于多维度指标对比，比如产品能力对比、绩效评估；
• 箱线图：用于展示数据分布和异常值检测；
• 词云图：用于文本分析和关键词热度展示；
• 瀑布图：用于展示数据增减过程和构成变化。

结构调整后，每种图表类型都对应一个独立的模板文件，互不影响。你只需要在配置中声明图表类型，AI 就会自动加载对应模板和规则。

3.3 配置化定制

这是这次更新最核心的变化。之前想改样式规范，你得手动改模板源码；现在所有可调项都收敛到了chart-config.yaml配置文件中。

配置文件支持以下维度的定制：

• 图表库选择；
• 主色调和辅助色；
• 坐标系风格，包括网格线、轴线、标签旋转角度；
• 数据格式化规则，包含千分位分隔符、百分比精度；
• 响应式断点和容器尺寸；
• 性能优化开关，比如大数据量时切换 canvas 渲染；
• 输出格式偏好，HTML 单文件、JavaScript 模块还是 Python 脚本。

配置项的优先级高于模板默认值，低于用户当前指令。也就是说，如果对话中明确要求某个特殊处理，以对话指令为准，这样既保留了默认的规范化，又给了灵活度。

3.4 新增自检机制

这次更新为 skill 加了一步“输出前自检”的流程。生成图表代码后，AI 会按照自检清单逐项检查，发现不满足要求的配置会主动修正，不需要你反复打回重做。

自检清单覆盖方面包括：

• 数据是否正确映射到图形属性；
• 坐标轴标签是否有重叠，旋转角度是否合理；
• 数值格式是否符合配置要求；
• 图例和标题是否存在；
• 大数据量场景是否启用了降采样或 canvas 渲染；
• 深色模式下配色对比度是否满足要求；
• 空数据和异常值是否处理。

这一步执行完，输出质量和第一版相比提升非常明显。

4. 环境准备与安装配置

开始使用之前，先确认你的开发环境满足要求。以下是本文示例所用的基础环境，具体版本以实际项目为准，操作思路是通用的。

• 操作系统：本文以 macOS / Linux 为例，Windows 的路径略有不同；
• 开发工具：Node.js 18+，Git；
• Agent 工具：Claude Code 或 Codex，任选其一；
• 图表库：默认使用 ECharts，也可以通过配置切换到 Plotly 或 Chart.js。

安装方式非常简单。假设你的 Agent 工具已经初始化了一个项目目录，只需要把 skill 目录克隆到对应位置。

以 Claude Code 为例，进入项目根目录后执行：

mkdir -p .claude/skills git clone https://github.com/yourname/chart-skill.git .claude/skills/chart-skill

注意，yourname请替换为实际仓库地址。如果你不方便直接 clone，也可以到 GitHub 仓库页面下载 ZIP 包，解压后放到.claude/skills/chart-skill目录。文件目录结构如下：

.claude/skills/chart-skill/ ├── SKILL.md ├── chart-config.yaml ├── templates/ │ ├── echarts/ │ ├── plotly/ │ └── chartjs/ ├── schemas/ │ └── chart-config.schema.json └── assets/ ├── sample-data.csv └── reference/

项目中的SKILL.md是技能入口文件，chart-config.yaml是核心配置文件，templates/目录里是不同图表库的模板，schemas/目录提供了配置文件的格式验证。

安装完成后，可以在项目目录下直接启动 Claude Code，输入“加载图表 skill”，如果能看到技能解析成功的提示，说明安装无误。Codex 用户请查阅你使用的 Codex 版本对 skill 目录的要求，将项目放到对应位置即可。

5. 完整使用示例与代码实现

下面用一个实际场景，演示从安装到生成一张专业图表全流程操作。

5.1 场景设定

假设你是一个数据分析工程师，刚拿到一份某电商平台 2024 年各品类的月度销售额数据，格式是 CSV。你需要让 AI 生成一张适合汇报使用的季度趋势堆叠面积图，要求配色协调、数字有千分位分隔符、图表能自适应页面宽度。

数据文件sales.csv内容如下：

月份,数码,家电,服饰,美妆 2024-01,120,86,45,30 2024-02,132,92,52,35 2024-03,145,90,68,42 2024-04,158,102,73,48 2024-05,170,115,79,55 2024-06,183,126,88,61

5.2 编写配置文件

在项目目录下创建或修改chart-config.yaml，指定这次的图表需求：

chart: type: stacked-area library: echarts title: 2024 年各品类季度销售趋势 theme: light color_palette: - "#4E79A7" - "#F28E2B" - "#59A14F" - "#E15759" data: format: csv source: ./sales.csv axis: x_label_rotation: 0 x_label_interval: auto number_format: thousand_separator: true decimal_places: 0 responsive: enable: true min_width: 320 performance: large_data_threshold: 5000

配置项含义如下：type声明图表类型是堆叠面积图，library选择 ECharts，color_palette指定了一组色盲友好的配色，thousand_separator开启千分位，responsive开启自适应。剩余项使用模板默认值即可。

5.3 在 Agent 对话中调用

打开 Claude Code，输入以下指令：

读取本项目的 chart-config.yaml 配置，并参考 sales.csv 中的数据，生成一张图表的完整 HTML 页面。要求使用配置中的配色，标题居中显示，图表宽高自适应页面。

Skill 命中后，AI 会读取配置和数据文件，按规则生成代码。下面是生成结果的核心部分，以 ECharts 为例：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>2024 年各品类季度销售趋势</title> <!-- 建议在正式项目中使用按需引入的 ECharts 构建版本 --> <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> <style> html, body { margin: 0; padding: 0; background: #fff; } #chart { width: 100%; height: 520px; } @media (max-width: 600px) { #chart { height: 360px; } } </style> </head> <body> <div id="chart"></div> <script> var chartDom = document.getElementById('chart'); var chart = echarts.init(chartDom); var source = [ ['月份', '数码', '家电', '服饰', '美妆'], ['2024-01', 120, 86, 45, 30], ['2024-02', 132, 92, 52, 35], ['2024-03', 145, 90, 68, 42], ['2024-04', 158, 102, 73, 48], ['2024-05', 170, 115, 79, 55], ['2024-06', 183, 126, 88, 61] ]; var option = { backgroundColor: '#fff', title: { text: '2024 年各品类季度销售趋势', left: 'center', textStyle: { fontSize: 16, fontWeight: 'bold' } }, tooltip: { trigger: 'axis' }, legend: { top: 40, type: 'scroll' }, grid: { left: '10%', right: '5%', top: 80, bottom: 50, containLabel: false }, xAxis: { type: 'category', data: source.slice(1).map(function (item) { return item[0]; }), axisLabel: { interval: 'auto' } }, yAxis: { type: 'value', axisLabel: { formatter: function (val) { return val.toLocaleString('zh-CN'); } } }, series: ['数码', '家电', '服饰', '美妆'].map(function (name, index) { return { name: name, type: 'line', stack: 'total', smooth: false, symbol: 'circle', symbolSize: 6, areaStyle: {}, data: source.slice(1).map(function (row) { return row[index + 1]; }) }; }) }; chart.setOption(option); window.addEventListener('resize', function () { chart.resize(); }); </script> </body> </html>

代码说明：

• xAxis.axisLabel.interval: 'auto'会自动计算标签密度，避免文字重叠；
• yAxis.axisLabel.formatter使用了toLocaleString('zh-CN')实现千分位分隔；
• series使用循环生成，方便后续新增品类时不用复制大量重复代码；
• window.addEventListener('resize', ...)让图表在窗口变化时自适应；
• 移动端通过媒体查询降低图表高度，保证在小屏上不出现内容挤压。

用浏览器打开生成的 HTML 文件，你会看到一张完整的堆叠面积图。如果你想用 Python 数据分析链路，也可以把配置中的library改为matplotlib，AI 会生成对应风格的 Python 脚本。

5.4 使用六边形蜂窝图模板

这次新增的六边形蜂窝图模板是更新中关注度比较高的功能，它特别适合展示大量散点数据的密度分布。使用方式同样简单，修改配置：

chart: type: hexbin library: echarts title: 用户活跃时段与时长分布 data: format: csv source: ./user-activity.csv hexbin: binSize: 12 color: "#5B9BD5"

AI 生成时会自动把 x、y 轴数据映射到六边形网格，通过颜色深浅表示不同网格的密度。这个模板对数据的分布趋势可视化效果非常直观，适合处理经纬度、点击热区、用户行为密度等场景。

6. 运行结果与效果验证

生成图表后，除了肉眼判断好不好看，还应该按明确的标准验证结果。我建议按下面的顺序检查：

第一，确认页面控制台有没有报错。打开浏览器开发者工具，在 Console 面板查看是否有 JavaScript 异常。如果出现ECharts is not defined，说明图表库没有正确加载，需要检查 CDN 地址是否可访问。

第二，使用 skill 自带的输出格式。生成的 HTML 文件用浏览器打开后，检查标题、图例、坐标轴标签是否完整。图例若超出可视区域，需要检查legend.type是否设置成了scroll，并确认 top 值是否给图例留出了空间。

第三，验证数据格式。将鼠标悬停在图表数据点上，tooltip 显示的数值应带有千分位分隔符。如果没有，检查配置项number_format.thousand_separator是否被后续代码覆盖。

第四，验证响应式效果。把浏览器窗口从宽屏拖到手机宽度，图表应自动调整高度，而不是出现横向滚动条或内容溢出。如果出现溢出，优先检查grid的百分比预留是否合理。

第五，大数据量表现。如果你手头有超过 5000 条数据的文件，建议用增量数据试一次。正常情况下 ECharts 在大数据量下依然能保持流畅，如果明显卡顿，检查配置中的performance.large_data_threshold是否触发，以及是否启用了 canvas 渲染。

7. 常见问题与排查思路

在实际使用过程中，用户反馈的问题主要集中在以下几个方面，我整理成了一张排查表。

如果你遇到“GitHub 克隆速度慢或失败”，这通常是网络原因导致的。可以优先尝试在非高峰时段重新 clone，或者到仓库页面下载 ZIP 包再手动解压到 skills 目录。不要在项目文件里保存任何需要绕过访问限制的额外工具配置，保持开发环境的干净和安全。

8. 最佳实践与工程建议

这部分内容来自我在实际项目中的使用经验，不针对某个特定场景，但在大多数工程环境下都适用。

8.1 按团队规范定制默认配置

图表 skill 最值得投入的地方，是把它和自己的团队规范结合。多数设计团队会有自己的配色、字体、间距和 Logo 规范。把规范沉淀到chart-config.yaml里，以后团队所有成员通过 AI 生成图表时，都会自动遵守统一规范，不再需要每次口头沟通样式要求。

例如你的团队主色调是品牌蓝#1677FF，辅助色是橙色#FA8C16，可以在配置文件中固定：

theme: primary_color: "#1677FF" secondary_color: "#FA8C16" font_family: '"PingFang SC", "Microsoft YaHei", sans-serif'

这样 AI 生成的每张图表，在命名和配色上都会保持一致，避免了反复调整的无谓沟通成本。

8.2 用配置优先级管理“规范”和“例外”

我见过一个常见误区：为了让 AI 听自己的话，把配置项写得非常细，结果对话里临时要求的特例反而被配置锁死，AI 怎么都不改。正确的做法是利用“配置优先、指令兜底”的机制。

配置适合承接通用规则，比如所有图表默认开启千分位、默认使用团队配色；对话指令适合承接单次特例，比如“这张图不要显示图例”“这张图用暖色调”。当指令和配置冲突时，明确告诉 AI “本次以我的指令为准”，它会跳过相关配置项。

8.3 数据隐私和权限边界

使用图表 skill 时，数据文件会被当作上下文的一部分传给大模型。如果你的数据包含用户隐私、密钥、内部财务数据，请一定注意脱敏。建议在传入数据之前做三件事：

• 去掉姓名、手机号、邮箱等直接标识字段；
• 用 mock 数据完成图表样式验证，确认无误后再接入真实数据；
• 涉及内网数据时，确认你的 Agent 工具运行在合规环境，且没有把数据发送到非授权外部服务。

8.4 成本控制：控制上下文占用

Skill 目录里的模板文件如果全部加载，会占用不少 token。实际使用中，多数对话只会用到一两种图表类型。为了控制成本，建议按需裁剪模板目录，只保留你常用的图表模板。比如你只做 ECharts 报表，那就只保留templates/echarts/的内容，删除其他图表库的模板。

9. 总结与后续学习方向

这次图表 skill 的大更新，核心是把“AI 画图”这件事从不可控的碰运气，变成了有标准、有配置、有自检的工程化流程。你不再需要每次反复调整 prompt，而是通过一份配置文件，就能让 AI 输出接近专业水准的可视化代码。无论是 Claude Code、Codex 还是 Cursor，接入方式都已经统一成“放目录、改配置、发指令”三步。

如果你还没有用过这个 skill，下一步建议从一个最小场景开始：拿一份你自己手头的数据，配好chart-config.yaml，让 AI 生成一张你最常用的图表类型，然后对照本文的验证清单检查输出。跑通一次之后，再逐步尝试六边形蜂窝图、桑基图等新图表，以及按团队规范定制默认配置。

图表可视化的难点从来不在于图表的 API，而在于对数据和视觉规范的判断力。skill 的意义在于把这种判断力从人的脑子里复制到 AI 的执行流程里。后续我会继续往这个方向推进，后面计划补充更多图表类型的模板，以及针对数据大屏场景的性能优化方案。

如果你在安装或使用中遇到了配置文件校验不过、图表类型模板加载不到等问题，先对照上面的排查表走一遍，大部分问题都能定位到具体环节。