data-viz 用于创建能够澄清信息而非仅作装饰的数据可视化。其目标不是让数据显得炫目，而是帮助用户理解模式、比较数值并做出决策。
参考文档： 在图表类型选择、响应式模式、无障碍数据表格、色觉友好调色板与交互设计方面，参考数据可视化参考文档。 当语义状态、图表调色板或分类颜色必须在色觉缺陷下仍保持可区分时，参考色盲 UX 参考。 当数据表格比图表更合适或作为图表的补充呈现时，参考复杂表格 UX 参考。
强制准备： 用户通过 /data-viz 启动此工作流。该技能激活后，加载 $frontend-design —— 其中包含设计原则、反模式与 Context Gathering Protocol（上下文收集协议）。在继续之前遵循该协议——如果尚不存在设计上下文，必须先加载 $setup。此外还需收集：用户试图用数据回答什么问题、受众是谁、数据是实时更新还是静态。
评估可视化需求： 在选择图表前先理解数据故事：
用户试图理解什么？ 跨类别比较（条形图） 随时间变化的趋势（折线图） 部分与整体关系（堆叠条形图或树状图，很少用饼图） 分布或范围（直方图、箱线图、散点图） 层级结构（树状图、旭日图）
数据形态如何？ 数据点数量（少量数值还是数千个） 系列或类别数量（单系列还是多系列） 时间粒度（日、月、年） 数据是连续还是分类
上下文是什么？ 仪表盘（一目了然的摘要）还是探索性分析（深度交互） 移动优先还是桌面优先受众 实时更新还是静态报告 无障碍要求（屏幕阅读器、色觉缺陷）
可视化维度：
图表选择： 将图表与数据关系匹配，而非审美偏好。 条形图用于跨类别比较数值。类别名称较长时使用水平条。数值轴从零开始。 折线图用于随时间变化的趋势。限制在约 5 条线。尽可能在末端直接标注线条。 散点图用于两个变量之间的关系。仅在相关性真实存在时添加趋势线。标注值得注意的离群点。 直方图用于频率分布。当数据的形状（聚集、离散、偏斜）重要时使用。 树状图用于类别较多的层级式部分与整体关系。 避免饼图，除非类别很少且某一扇区明显占主导。即便如此，也优先使用环形图或堆叠条形图。
无障碍数据呈现： 每个图表都必须有可访问的替代方案。 在可视化前提供主要洞察的文本摘要 包含一个正确标记的数据表格作为后备（<caption>、<th scope="...">） 使用 aria-describedby 将图表与其摘要关联 确保数据点之间的键盘导航并伴有可听的值播报 不仅依赖颜色；使用图案、纹理或直接标注
颜色策略： 在数据可视化中有意图地使用颜色。 连续色阶：单一色相在明度上变化，用于表示数量（密度、体积） 发散色阶：两个色相配中性中点，用于表示偏离中心（方差、盈亏） 分类色阶：最大程度区分色相并保持一致亮度，用于区分不同组 避免红绿组合；改用蓝橙或紫黄 用色觉模拟器测试调色板
响应式行为： 图表必须在各种视口尺寸下保持可读。 在中等布局上简化图例并旋转标签 考虑在窄布局上切换图表类型（水平条代替垂直条） 用交互补偿：双指缩放、点按查看精确值、默认显示摘要视图 测试最小宽度下的截断与换行行为
交互设计： 点击或点按图例项以切换系列可见性 悬停或聚焦以高亮某系列并淡化其他系列 刷选或拖拽以选择用于缩放的时间范围 点击数据点在面板或相邻视图中显示详情 在筛选或缩放后提供“重置视图”选项 更新实时图表时不要完全重新渲染；仅对变化的元素做动画
仪表盘设计： 仪表盘将多个可视化组合成一个一目了然的界面。 布局原则： 最重要的指标放在左上角（针对从左到右的阅读者） 通过邻近性与一致尺寸将相关图表视觉分组 对相同类别在所有图表中使用一致的颜色编码 留出呼吸空间；密集的仪表盘会让人不堪重负而非获得信息 交互性： 全局筛选器（日期范围、类别）应同时更新所有图表 点击图表元素应更新详情面板或相关图表 避免在没有明确指示的情况下自动刷新仪表盘；显示“最后更新”时间戳
反模式： 图表垃圾：装饰性 3D、渐变、阴影和不必要的网格线会遮蔽数据 双 y 轴：会诱发误导性比较。改用并排图表 截断的 y 轴：从零以上开始会夸大差异，视觉上具有欺骗性 过多数据系列：10 条以上折线的图表变得不可读。应分组、筛选或拆分 多扇区饼图：人类对角度的感知很差 缺失数据无说明：空白应与零值在视觉上区分开 只用颜色没有图案备份：色盲用户无法区分纯颜色编码的系列 无静态后备的动画图表：自动播放动画会困扰需要稳定参照点的用户 仅以工具提示作为唯一数据来源：触摸和运动障碍用户可能难以触发 无上下文的图表：没有比较、基线或单位的数字毫无意义
验证可视化质量： 发布前： 图表类型与所展示的数据关系匹配 条形图的 y 轴从零开始 颜色在色觉缺陷下可区分 提供无障碍数据表格作为后备 提供主要洞察的文本摘要 图表在窄视口宽度下可读 交互功能可用键盘和触摸操作 工具提示增加精确性，而不只是重复 实时更新不会让用户迷失方向 可视化回答了特定的用户问题