SkillNexus #10 · 可视化设计：为什么 Skill 评测需要 6 种图表

Skills 全生命周期创造平台，让你的 Skill 可生成、可量化、可管理、可成长。

SkillNexus 系列导航（共 10 篇）

SkillNexus 的 Eval 页面有 6 种图表：雷达图、趋势折线、热力图、箱线图、对比柱状图、Pareto 散点图。

为什么需要这么多？每种图表解决的是不同的问题——用错图表，数据就会说谎。

图表 1：雷达图——截面快照

解决的问题：一眼看出 Skill 的强弱维度分布。

雷达图是 Eval 页的核心图表，8 个维度均匀分布在圆周上，得分越高越靠外。

为什么选雷达图而不是柱状图？

柱状图更精确，但雷达图更直观——你能立刻看出"这个 Skill 的形状"：是均衡型（接近正圆），还是偏科型（某几个维度特别突出或凹陷）。

两个版本的雷达图叠加时，差异一目了然：B 版本的轮廓比 A 版本更大，说明整体提升；某个维度的轮廓缩小，说明那里退化了。

设计细节：当历史数据 ≥ 5 条时，雷达图会显示 min/max 置信带——不只是均值，还能看到得分的稳定性。一个均值 8 分但置信带很宽的 Skill，不如均值 7.5 分但置信带很窄的 Skill 可靠。

图表 2：趋势折线——时间维度

解决的问题：追踪 Skill 随版本迭代的变化轨迹。

雷达图是截面，趋势折线是纵切面。横轴是时间（或版本号），纵轴是各维度得分，8 条线同时显示。

关键设计：8 条线同时显示会很乱，所以默认只高亮总分和最弱的 2 个维度，其他维度淡化显示，点击可以切换高亮。

趋势折线最有价值的时刻是进化后：你能看到某次进化让 G1 从 6.5 跳到 8.2，同时 S2 从 8.0 微降到 7.8——这是权衡，不是失败，但你需要看到它。

图表 3：热力图——跨版本矩阵

解决的问题：在多个版本 × 多个维度的矩阵里，快速找到规律。

热力图的横轴是版本（v1、v2、v3……），纵轴是 8 个维度，颜色深浅表示得分高低。

它能发现趋势折线看不到的东西：某个维度在所有版本里都是浅色（持续低分），说明这是结构性问题，不是某次进化的偶然失误；某个版本整列都是深色，说明那次进化效果全面，值得分析它做了什么。

热力图特别适合有 5 个以上版本的 Skill——版本少时折线图更清晰，版本多时热力图的全局视角更有价值。

图表 4：箱线图——稳定性分析

解决的问题：均值相同的两个 Skill，哪个更稳定？

这是最容易被忽视的图表，也是最重要的之一。

一个 Skill 在 10 条测试用例上的 G1 得分可能是：

• Skill A：8, 8, 8, 8, 8, 8, 8, 8, 8, 8（均值 8，极度稳定）
• Skill B：10, 10, 10, 10, 10, 2, 2, 2, 2, 2（均值 6，两极分化）

均值不同，但更重要的是：Skill B 在某类输入上完全失效。箱线图能立刻暴露这个问题——中位数、四分位距、异常值一目了然。

实际意义：箱线图的异常值（outlier 点）往往就是最值得关注的测试用例——那些让 Skill 表现异常差的边界情况，正是下一次进化的重点。

图表 5：对比柱状图——A vs B 差值

解决的问题：两个版本对比时，精确量化每个维度的差值。

雷达图叠加能看出"形状差异"，对比柱状图能看出"精确数字"。每个维度一组柱子，A 版本和 B 版本并排，差值用颜色标注（绿色提升、红色下降）。

设计原则：差值小于 0.3 分的维度用灰色显示，避免把统计噪声误读为有意义的变化。0.3 分是经验阈值——在 LLM Judge 的评分精度下，小于这个值的差异通常不可靠。

图表 6：Pareto 散点图——权衡可视化

解决的问题：在效果和成本之间，哪个版本是最优权衡？

这是 SkillMOO 进化引擎专属的图表。横轴是 S2 成本意识（越高越省 token），纵轴是 G1 正确性（越高越准确）。每个版本是一个点。

Pareto 前沿上的点是"无法同时在两个维度更优"的版本——你只能在这些点里选，选哪个取决于你的实际需求：高频调用的 Skill 优先选成本低的，关键任务的 Skill 优先选准确率高的。

为什么用纯前端 SVG 实现而不是引入图表库？

SkillNexus 的所有图表都是纯前端实现，没有引入 ECharts、D3 或 Recharts。原因很简单：这些图表的需求非常具体，通用图表库的配置成本不低于自己实现，而且自己实现可以精确控制交互细节（比如雷达图的置信带、热力图的版本对齐逻辑）。

两处雷达图的定位区别

SkillNexus 在两个地方都有雷达图，但含义不同：

同一个组件，两种语境，两种答案。

图表选择的原则

回到最开始的问题：为什么需要 6 种图表？

因为每种图表回答的是不同的问题：

用一种图表回答所有问题，必然会有信息损失。6 种图表，6 个视角，完整描述一个 Skill 的质量状态。

SkillNexus · 2026 · skyseraph · GitHub