/dataviz 深度核查 v2.1.199 · 已交叉核查 · Claude Code

本页目录11

Slash 命令看官方文档

图表 / 仪表板设计指导(bundled skill):按数据选图表形式、按角色分配颜色、用内置脚本校验调色板的色盲安全与对比度,并应用标记 / 交互 / 无障碍规则。需 v2.1.198+。

Syntax

/dataviz [request]

示例

/dataviz 用 Recharts 给这组月度营收数据画个合适的图,配色要过色盲校验

深度使用指南

最近核查 2026-07-04

· 来源 3 个

github.comClaude Code CHANGELOG · v2.1.198
code.claude.comCommands 参考 · code.claude.com
code.claude.comSkills · code.claude.com

· 含官方文档· v2.1.199已交叉核查

它到底是什么

/dataviz 不是绘图工具,而是一个 bundled skill(官方内置技能) —— 在 Claude 写第一行图表代码之前,给它注入一套"图表设计方法论 + 可运行的校验器"。

官方 changelog(v2.1.198)原句:

Added /dataviz skill for chart and dashboard design guidance with a runnable color-palette validator

官方 Commands 参考页对它的完整定位:

Design guidance for charts, graphs, and dashboards. Claude picks the chart form for the data, assigns color by role, validates the palette for colorblind safety and contrast with a bundled script, and applies mark, interaction, and accessibility rules. Uses a brand-neutral placeholder palette that you replace with your own.

要点拆开就是四件事:按数据的"工作"选图表形式 → 按角色(而非好看)分配颜色 → 用捆绑脚本校验调色板(色盲安全 + 对比度)→ 套用标记 / 交互 / 无障碍规则。默认调色板是品牌中立的占位色,可以换成你自己的品牌色。

需要 Claude Code v2.1.198+
没有官方专页(docs/en/dataviz 是 404),唯一官方文档出处是 Commands 参考页的条目;skill 正文打包在安装二进制里

怎么触发(两条路)

1. 手动调用:

/dataviz [request]

request 是可选自由文本,会作为 ## User Request 追加到 skill prompt 之后。例如:

/dataviz 用 Recharts 给这组月度营收数据画个合适的图,配色要过色盲校验
/dataviz 检查 #2563eb,#16a34a,#f59e0b,#dc2626 这组分类色是否色盲安全

2. 自动触发:skill 是 userInvocable 且带自动触发描述 —— 只要你让 Claude 画任何介质的任何图表(HTML/React artifact、内联 SVG、matplotlib / plotly / d3 / Recharts 等任意库的绘图代码、要渲染上传的 PNG、发进 Slack 的图),它就应在写代码前先读这个 skill。触发词覆盖 chart / graph / plot / dashboard / heatmap / sparkline / "categorical colors" / "sequential palette" 等。

与 artifact-design 的分工:做带图表的 artifact 页面时,artifact-design skill 会引导模型"图表的事加载 dataviz"(灰度开关渐进开放)—— 页面归 artifact-design 管,图表归 dataviz 管。

方法论:七步流程(颜色最后定)

skill 的核心论点:"大多数烂图表都是先挑颜色" —— 所以流程里颜色排第 2-3 步,绝不排第一:

步	做什么	参考文件
1	选形式:数据的"工作"是什么(量级 / 身份 / 极性 / 单一头条数 / 随时间变化)?有时答案是"不要图表"(用 stat tile / hero number)	`choosing-a-form.md`
2	按职责配色:分类(身份)/ 顺序(量级)/ 发散(极性)/ 状态(state)各有一条规则;分类色按固定顺序分配,永不循环	`color-formula.md`
3	跑校验器:`node scripts/validate_palette.js "<hex,hex,…>" --mode light`,FAIL 必须修完才能继续;dark 模式用该模式的 surface 重跑	`validate_palette.js`
4	标记规范:细 mark、4px 圆角数据端、2px 线、≥8px 标记点、堆叠段之间 2px surface 间隙、选择性直接标注	`marks-and-anatomy.md`
5	默认加 hover 层:line/area 上十字线 + tooltip,bar/dot/cell 逐 mark tooltip;唯一可跳过的是无图形的 stat tile	`interaction.md`
6	无障碍收尾:≥2 个系列必有图例、≤4 个系列同时直接标注;必须有表格视图;暗色模式是单独选色再校验,不是自动翻转	—
7	渲染后人眼看一遍:校验器只管颜色不管布局,标签碰撞 / 几何 / 溢出要自己看	—

最后拿结果对照 anti-patterns.md("错误图表目录"):命中任何一条就是错的。

调色板校验器(changelog 里说的 "runnable validator")

node scripts/validate_palette.js "#hex,#hex,..." [--mode light|dark] [--surface #hex] [--pairs adjacent|all] [--ordinal]

六项检查:亮度带、彩度下限、相邻色对的色盲(CVD)区分度、对比度等,逐项 pass/fail
达标线:CVD 分离度 ≥ 12 达标;8–12 只在有次级编码(纹理 / 直接标注)时才合法;contrast 出 WARN 就必须补可见标签或表格视图,不可无视
也可以 <script type="module"> 直接挂进图表页面,从 <body> 的 data-palette 读色板、console.table 输出报告
另附等价的 Python 版 validate_palette.py

skill 原文的铁律:"Never eyeball whether a palette is colorblind-safe — run the script."(色盲安全是可计算的,永远别靠肉眼判断。)

捆绑文件清单

文件	用途
`references/choosing-a-form.md`	数据的工作 → 图表形式启发式
`references/color-formula.md`	四类颜色职责(分类/顺序/发散/状态)的分配公式
`references/palette.md`	已验证的默认调色板 —— 换品牌色只改这个文件的值
`references/marks-and-anatomy.md`	标记 / 图表解剖规范
`references/interaction.md`	hover / tooltip / 筛选行的交互规则
`references/components.md`	stat tile / KPI 行等组件规范
`references/anti-patterns.md`	反模式目录(交付前对照)
`scripts/validate_palette.js` / `.py`	六项检查的可运行校验器

设计铁律(non-negotiables 精选)

单轴:永不做双 y 轴图。两个量纲不同的指标 → 两张图、small multiples、或统一基期指数化(skill 称之为"第一大图表错误")
颜色跟实体、不跟排名:筛选改变系列数量后,存活系列不得被重新涂色
第 9 个系列不是新色相:并入 "Other"、拆 small multiples 或换复合编码
顺序色 = 单色相浅→深;发散色 = 双色相 + 灰色中点;永不彩虹、中点永不放彩色
状态色(good/warning/serious/critical)是保留色,不能拿来当"系列 4",且必须带图标 + 文字,不能只靠颜色
文字永远用文本 token(primary/secondary/muted),不穿系列色;旁边放色块承载身份

与同类方式对比

方式	差别
直接提示 "画个好看的图"	得到的是审美形容词;`/dataviz` 给的是程序化检查(可运行校验器 + pass/fail),"对"是构造出来的不是品出来的
artifact-design(bundled skill)	管页面的排版与气质;图表专项规则由 dataviz 管,两者在带图 artifact 里协同
社区自制 data-visualization skill(如 NTCoding/claude-skillz)	第三方、需手动安装;官方版内置、自动触发、且带可运行校验脚本
`/code-review` `/batch` 等	同属 bundled skill 家族,`disableBundledSkills` 一并开关

经典使用场景

仪表板开发:让 Claude 用 React/Recharts 搭 dashboard,skill 自动介入 —— 形式选择、配色、hover、暗色模式一次到位
品牌化:把 references/palette.md 的值换成品牌色 ramp,方法论不变,校验器照跑
纯校验:/dataviz 检查这组 hex 是否色盲安全 —— 只用第 3 步的校验能力
Python 报告图:matplotlib / plotly 出图同样触发,规则与 Web 图表一致

常见坑

版本不够:< v2.1.198 没有这个命令;claude --version 确认,skill 面板(/skills)里应能看到 "Data Visualization"
disableBundledSkills: true 会连它一起关:该设置(或 CLAUDE_CODE_DISABLE_BUNDLED_SKILLS=1)关闭的是全部 bundled skills,官方未提供单独关某一个的开关
校验器 FAIL/WARN 不可忽略:FAIL 必须换色;contrast WARN 义务性补偿(可见标签或表格视图),skill 明文"not dismissable"
它不替你画图:注入的是方法论 prompt,图仍由 Claude 写代码生成 —— 布局问题(标签碰撞 / 溢出)校验器不管,要走第 7 步人眼检查
别去找官方专页:docs/en/dataviz 不存在(404),文档出处只有 Commands 参考页一行;深入细节都在 skill 内嵌的 references 里
自动触发会占上下文:任何图表任务都会加载 skill 正文;不需要时只能用 disableBundledSkills 全局关闭

关闭方式

settings.json 里 "disableBundledSkills": true,或环境变量 CLAUDE_CODE_DISABLE_BUNDLED_SKILLS=1 —— 关闭全部 bundled skills(含 /dataviz)
官方 Skills 页原句:"Claude Code includes a set of bundled skills that are available in every session unless disabled with the disableBundledSkills setting"

来源

Claude Code CHANGELOG · v2.1.198 —— "Added /dataviz skill for chart and dashboard design guidance with a runnable color-palette validator"(官方一手)
Commands 参考 · code.claude.com —— /dataviz [request] 条目与 "Requires Claude Code v2.1.198 or later"(官方一手)
Skills · code.claude.com —— bundled skills 机制与 disableBundledSkills(官方一手;该页未点名 dataviz)
本机 Claude Code v2.1.198 安装实体(~/.local/share/claude/versions/2.1.198)—— 内嵌 SKILL.md 全文、9 个捆绑文件、validate_palette.js 用法与六项检查(一手实体,非网络来源;七步流程 / 铁律 / 触发词均逐字取自此处)

全网调研整理

典型场景

仪表板开发:让 Claude 用 React/Recharts 搭 dashboard,skill 自动介入,形式选择 / 配色 / hover / 暗色模式一次到位
品牌化:把 skill 内 references/palette.md 的值换成品牌色 ramp,方法论不变、校验器照跑
纯校验:/dataviz 检查一组 hex 是否色盲安全(只用校验器能力,六项检查逐项 pass/fail)
Python 报告图:matplotlib / plotly 出图同样触发,规则与 Web 图表一致

实用技巧

颜色最后定:skill 的七步流程里选形式在先、配色在后,大多数烂图表都是先挑颜色
校验器可以脱离会话用:node validate_palette.js "#hex,#hex,..." --mode light|dark,或作为 <script type=module> 挂进页面读 body 的 data-palette 输出 console.table
CVD 分离度 ≥12 达标,8–12 只在有纹理 / 直接标注等次级编码时才合法;contrast WARN 必须补可见标签或表格视图
带图表的 artifact 页面里它与 artifact-design 分工:页面归 artifact-design,图表归 dataviz

常见坑

< v2.1.198 没有该命令;disableBundledSkills: true 会连同全部 bundled skills 一起关掉,无单项开关
它注入的是方法论 prompt 而非绘图工具:布局问题(标签碰撞 / 溢出)校验器不管,渲染后仍需人眼检查
没有官方专页(docs/en/dataviz 是 404),唯一文档出处是 Commands 参考页一行;细节都在 skill 内嵌 references 里
任何图表任务都会自动加载 skill 正文、占用上下文;不需要时只能全局关闭 bundled skills

来源

创建于

v2.1.198

变化时间线(按版本倒序)

新增v2.1.198· 2026/07/02 · 10 天前

新增 /dataviz 斜杠命令用于图表和仪表板设计指导