数据插图 是做什么的？
普通的图表库（柱状图、折线图、雷达图）精确但容易让人遗忘。而另一种失败——AI生成的“数据可视化”图片——虽然好看，却无法忠实编码一个数字，因此它只是假装是数据的装饰。这个技能诚实地做到了两全其美：数据驱动生成的SVG几何形状（精确、可复现的核心），而任何AI生成的图像只在氛围层叠加，绝不用于传达数值。
何时使用
- 需要可视化分数/指标/维度，但普通的柱状图、折线图、饼图显得枯燥或不符合品牌风格。
- 遇到如“让这个可视化看起来有设计感”、“要一个更像插图而不是图表的东西”、“为仪表盘生成一个真正的图形，而不是默认图表”等需求。
- 当输出需要看起来是刻意设计的，而非默认库的产物时，优先使用它而不是手动编写一次性图表。
准确性契约（不可妥协）
- 输出中的每一个数量都通过代码从输入值计算得出。 形状长度、半径、标签文本、中心读数数字——所有内容都是通过程序派生的，绝不通过肉眼估算或由图像模型绘制。
- AI图像生成仅作为装饰。 如果叠加生成的背景，将提示词限制为抽象纹理——不要文本、数字、人物或标志。如果图像生成不可用，图形也必须完整且正确。
- 所有内容都带标签。 每个编码元素都有一个标签，标题数字有一个中心读数，一行图例说明该图形的实际含义。一个没人能解码的漂亮图形是失败，而非成功。
如果你曾想让一个图像模型直接“画图表”——停下来。那会破坏契约，结果会（轻微或严重地）错误。
默认形式：有机“绽放”
N个维度/分数 → 从中心点辐射的N个花瓣。每个花瓣：
- 长度编码数值（越长 = 越高），辅以淡淡的整数刻度环，使其仍可作为数字读取，而不仅仅是感觉。
- 饱满度随数值略微变宽——更高的分数在视觉上显得更“丰盛”。
- 颜色通过语义渐变映射到数值区间（例如，高分为绿色，中分为琥珀色，低分为暖红色/红褐色）。
- 一个标签显示维度名称及其精确数字。
- 一个中心圆盘显示平均值，根据其自身数值进行颜色分级，并带有一个简短说明。
- 一行图例用平实的语言说明编码规则（“花瓣长度 = 5分制中的得分”）。
这使每个数据集都像独特的生物体——而不是普通的雷达图——同时每个值仍然精确可读。
构建方法
- 将输入作为简单的
{维度: 值}映射加上一个标题和一个平均值。 - 编写一个小脚本（任何支持SVG输出的语言均可），根据数值直接计算每个花瓣的几何形状——角度 = 按维度数量均匀分布，半径 = 数值的函数，颜色 = 根据阈值查找。
- 将标签和图例渲染为真实的SVG文本元素，不要嵌入任何图像层。
- 可选氛围层： 通过任何可用的图像生成API生成一个抽象、符合主题的背景图像，以低透明度将其合成到插图下方，并置于渐晕效果之后，使中心保持清晰。进行缓存——在构建/编写时生成一次，绝不在每次页面渲染时生成（它很慢且花费钱）。
- 使输出自包含（单个
.svg文件，任何背景都嵌入为数据URI），以便无需管理单独的资产。 - 如果想要形状具有交互性（悬停/点击以显示每个维度的定义、精确分数和来源），为每个元素包裹数据属性（
data-dimension、data-score、data-definition），一个小脚本可以读取这些属性来驱动侧面板。
扩展形式
绽放是默认形式，但不是唯一选项——选择适合数据形状的形式，但无论使用哪种形式，都要保持准确性契约：
- 山脊线/等值线图用于分布或在多个项目上跟踪的值。
- 象形图（重复的图形，最后一个部分填充）当计数是重点且希望它读起来像字面数量时。
- 星座图当项目之间的关系比它们各自的幅度更重要时。
反模式
- 让图像模型渲染图表或数字——值会是错误的或虚构的。
- 一个华丽的图形但没有标签或图例——无法解码就是无用，无论看起来多漂亮。
- 生成的背景足够喧闹，以至于与数据层的可读性竞争——保持低透明度，并置于渐晕效果之后。
- 在每次页面渲染时调用图像生成API而不是缓存——缓慢且不必要地昂贵。
如何使用
安装： 将此文件夹复制到~/.claude/skills/data-illustration/供个人使用，或项目仓库内的.claude/skills/data-illustration/。
调用：
把这6个分数做成一个数据插图绽放，而不是无聊的柱状图——标题定为“Q3回顾”，给它一个中心平均值，并添加一个图例。
这个仪表盘的图表看起来很普通。使用数据插图将其制作成一个精确的、带标签的插图——不要AI绘制的数字，所有内容都从真实数据计算得出。