Claude Code 数据可视化反模式目录：26 个图表错误与修正方法（system_prompts_leaks）
【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5.1, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks
本文基于 Claude Code 内置 Data Visualization 技能中的反模式清单 anti-patterns.md，完整拆解其中记录的 26 个真实生产事故——从双轴图、按排名重着色到虚线网格、骨架屏闪烁——并给出每一条的修正方法。文章进一步结合该技能的校验脚本 validate_palette.js 与参考色板 palette.md 的源码实现，说明这些"禁止事项"是如何被计算性规则（Delta E 阈值、色盲模拟、退出码语义）硬性执行的，读完你可以把这份清单直接当作图表交付前的质量门禁使用。
这份目录在整个 dataviz 技能中的位置
SKILL.md 定义了一条固定的七步工作流：先选形态（form heuristic），再按"颜色承担的职责"分配色，然后运行校验器而不是靠肉眼判断色板，接着套用图形规格（mark specs）、默认加上 hover 层、做可访问性终检，最后"渲染出来并亲眼看"。第七步之后，SKILL.md 明确要求把成品对照references/anti-patterns.md——"它是出错的目录。如果你的图表命中任意一条，它就是错的"（见 SKILL.md）。
这份目录的开头即立下基调：
"Check every chart against this list. If your output matches an entry, it is wrong — fix it before shipping. These are real failure modes, each caught in shipping dashboards."
也就是说，它不是风格偏好清单，而是在已上线仪表盘上被抓到的真实失败模式，共 26 条，分为四组：颜色与编码（8 条）、形态（4 条）、图形与界面元素（9 条）、交互与可访问性（5 条）。下面逐条展开，并在每条之后给出仓库内的源码级佐证。
颜色与编码：8 个反模式
1. 双轴图（dual-axis chart）
- 错误：在同一张图里放两个 y 轴。
- 为何误导：两个刻度的对齐方式是任意的，图表会"发明"一个数据中不存在的相关性。原文档记录了一个真实案例：一张 "Adoption" 图把 Users（0–30k）和 Sessions（0–800k）画在一起，评审者直接指出它看起来像"幻觉出来的"。
- 修正：拆成两张图，用小倍数（small multiples），或把两条序列归一化到同一基准（t0 时 = 100）再画在一条轴上。
源码印证：这是 SKILL.md "Non-negotiables"（所有设计系统下都不可妥协）里被点名为"第 1 号图表错误"的规则——"One axis. Never a dual-axis chart (two y-scales)"（SKILL.md）；且 marks-and-anatomy.md 把优先级定为"直接标注优先于网格线，网格线优先于第二轴"。
2. 按筛选重着色（recolor-on-filter）
- 错误：按"当前排名"分配颜色，导致筛掉某个序列后，幸存序列被重新涂色。
- 为何误导：读者已经学到"Acme 是蓝色"，重涂色直接破坏认知锚点。
- 修正：颜色跟随实体（entity），而不是它的行号；幸存序列保持原色相。
源码印证：SKILL.md 同样将其列为不可妥协项："Color follows the entity, never its rank. A filter that changes the series count must not repaint the survivors."（SKILL.md）
3. 超过 8 个色相后循环/生成新色
- 错误：出现第 9 个分类色——被"生成"出来或从已有槽位"复用"。
- 为何误导：在色觉障碍（CVD）视角下，它和现有某个槽位无法区分；同时会破坏顺序检查。
- 修正：把尾部并入 "Other"，拆成小倍数，或使用复合编码（色相 × 形状）。
源码印证：参考色板固定为 8 个槽位（见 palette.md），choosing-a-form.md 明确"永远不要用生成更多色相来解决序列太多"；全 8 色在--pairs all模式下本就无法通过全对校验（任何排序都不行），因此散点/气泡/小倍数这类形态被硬性限制在前三槽位。
4. 用肉眼判断"色盲安全"
- 错误："这几个颜色看起来区分度够了"。
- 修正：运行
scripts/validate_palette.js。相邻色对在 CVD 模拟下的 Delta E 必须 >= 8（OKLab ×100），或落在 6–8 区间且附带次级编码。
源码印证：这正是校验脚本的默认阈值，见 validate_palette.js：
const CVD_TARGET = 8.0, CVD_FLOOR = 6.0; // OKLab Delta E×100, min(protan, deutan), adjacent pairs const NORMAL_FLOOR = 15.0; // OKLab Delta E×100, worst pair on the active pairlist, unsimulated vision注意脚本比清单多了一道正常视力地板：未模拟视线下最差的色对 Delta E 必须 >= 15，这是一道硬门禁——次级编码不能豁免它。Delta E 定义为 OKLab 空间中的欧氏距离 ×100（validate_palette.js），CVD 模拟使用 Machado-Oliveira-Fernandes (2009) severity 1.0 的色盲转换矩阵（validate_palette.js）——源码注释特别强调该模拟模型"是标准的一部分，不是实现细节"，换用其他模拟（如 Viénot-1999）会使边界色对漂移、需要重新校准阈值。Python 孪生实现 validate_palette.py 使用完全一致的阈值常量，保证两套引擎结果锁定（lockstep）。
5. 在名义（无序）类别上用值渐变色
- 错误：当类别没有自然顺序（产品、团队、端点）时，按数值大小把每根柱子涂成深浅不同的色。
- 为何误导：它把柱长已经表达的数值再用色相编码一遍（双重编码），烧掉了唯一的自由通道来表达图表已经展示的信息；并且它按设计就会挂掉分类检查——一条 ramp 横跨明度带、最浅端会掉到彩度地板之下。
- 修正：单一序列 → 所有柱子统一用槽位 1 的颜色；有序类别（漏斗、等级、年龄带）→ 用序数 ramp，并以
--ordinal校验。
源码印证：color-formula.md 给出判别标准——"交换类别顺序是否会改变含义"；而--ordinal模式在源码里实现了四道序数专属检查：明度单调、相邻步长 ΔL >= 0.06、最浅端与画布对比 >= 2.0:1、色相散布 <= 40°（单色相）（validate_palette.js）。反过来，用分类校验器去校验一条正确的序数 ramp会按设计 FAIL（因为它跨明度带、浅端彩度不足），这是预期行为，不应"修好"一条好 ramp 去迎合它（color-formula.md）。
6. 彩虹 / 非邻接的序列色
- 错误：用多色相 ramp 表达数值大小。
- 修正：单色相，浅 → 深。唯一的多色相例外是"类比邻色"或"语义热力"，且必须配 scale legend。
源码印证：参考色板的序列色相是蓝色100→700 共 14 步的完整 ramp（palette.md），并区分两种用途：连续量级编码允许最浅步退向画布；序数 ramp 的最浅端必须仍保持 2:1 对比（浅色模式不低于 step 250#86b6ef，深色模式不深于 step 600#184f95）。
7. 发散中点用色相 / 两极用两个冷色相
- 错误：发散色标中点放一个彩色色相，或两极取两个冷色相。
- 为何误导：中点必须读作"无"，两极必须读作"相反"。blue ↔ aqua 失败（两者皆冷）；blue ↔ red 或 blue ↔ orange 成功（冷暖对立）。
- 修正：两个读作"相反"的色相 + 一个中性灰中点。
源码印证：参考色板明确记录了这个决策过程——"blue <-> red — warm/cool poles that read as opposite. Neutral midpoint is gray (light#f0efec, dark#383835). Equal step count per arm. (blue<->aqua was rejected — both cool, the midpoint doesn't read as 'nothing'.)"（palette.md）。
8. 状态色与非状态序列混用
- 错误：把状态色（good/warning/serious/critical）用于非状态序列，或反过来把序列色用于状态。
- 修正：只有当颜色确实意味着好/坏时才用状态 token；表示身份时永远是分类色。
源码印证：状态色板是"固定、永不换肤"的四步（palette.md），且其色阶被刻意设计成与分类槽位"可区分到一眼不撞、但又不靠色相单独区分"的量级——例如浅色模式下 warning（#fab219，1.79:1）与 serious（#ec835a，2.57:1）按设计低于 3:1 对比，缓解手段是图标 + 标签配对，状态色从不单独承载语义。SKILL.md 进一步规定"一张图里状态与分类永不双用"（color-formula.md）。
形态：4 个反模式
9. 故事只是一个数字，却用了 8 个分类色相
原文称这是"图表最常偏离重点的方式"。
- 修正：用强调法（highlight one, gray the rest），或直接用 stat tile / hero number。
10. 单柱条形图，或两片饼图
- 修正：用 stat tile。数字本身就是图表。
11. 用环形/饼图比较接近的数值
- 修正：用条形图，或干脆给数字。环形/饼图只用于"一眼看整体构成"，且 <= 6 个分段。
12. 承载意义的颜色类别超过约 7 个
- 修正：用表格，或表格 + 图表。超过约 7 个 bin 后，相邻类别会糊在一起。
源码印证：这四条的完整决策表在 choosing-a-form.md：单一当前值 → stat tile（而非单柱）；少数头条数字 → KPI row；占比对限值 → meter（而非两片饼）；>~7 类 → 表格（而非更多颜色）。其后的"序列数阶梯"（choosing-a-form.md）给出量化处置：1–3 条可直接标注；4 条必须强制直接标注（黄橙同屏）且全对形态封顶三条；5–6 为软上限；7–8 是 token 天花板，超过就并入 "Other"、facet 或复合编码。
图形与界面元素：9 个反模式
13. 粗饱和色块、重网格线、无呼吸感
放大后显得"聒噪"甚至幼稚。
- 修正：细图形（thin marks）、退居幕后的发丝级网格/轴、慷慨的留白。饱和填充只用于小图形和强调，永不用于大块。
源码印证：marks-and-anatomy.md 给出固定规格——柱 <= 24px 厚、数据线 2px 圆角接合、标记 >= 8px、面积填充为序列色相约 10% 不透明度（"a wash, never a saturated block"）、网格/轴为偏离画布一级的灰色发丝线。
14. 虚线网格线或轴线
虚线增加视觉噪声，且会被误读为"投影"或"阈值"——哪怕它只是网格。
- 修正：网格线与轴线是实线发丝线，比表面深一级。
15. 每个数据点都标数字
点或分段旁全贴数值，是混乱且读不下去的。
- 修正：>= 2 个序列时图例必须存在；直接标注有选择地做（端点、极值、唯一重要的那条序列），其余交给轴 + tooltip。
源码印证："Label selectively — never a number on every point... Direct labels workbecausethey are sparing — flood the chart and they stop working."（marks-and-anatomy.md）
16. 给图形描边框来分隔
- 修正：相邻填充之间用 2px 表面色间隙（堆叠分段与相邻柱同宽），重叠标记用 2px 表面色圆环（surface ring）。
源码印证："Never draw a border around a mark to separate it. The gap and the ring are the mechanism; a stroke adds contenteditable="false">【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5.1, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
