01 功能说明
图表选择、视觉编码、上下文标签、无障碍设计和响应式呈现。
Data Visualization 是一项图表设计技能。它将有关比较、趋势、构成、分布和关系的问题映射到候选图表形式，然后处理标签、坐标轴、上下文和视觉编码。
其范围是信息呈现，而非数据收集或统计证明。它强调使用真实数据、直接标注、非颜色提示，以及表格等响应式替代方案。底层产品配色方案的设计仍是另一项独立工作。
预期交付成果
确定查看者需要理解的比较或模式。
选择一种简单的图表，并定义坐标轴、标签、单位和一致的系列呈现方式。
使用实际数据，补充有用的上下文，并检查非颜色提示和小屏幕上的表现。
02 适用场景
请提供实际数据、字段定义、读者的问题和显示约束。此技能用于指导图表设计；数据验证和图表实现仍属于独立任务。
03 关键决策
图表形式是否合理，取决于它需要揭示的关系。
标签、形状或图案可以传达仅靠色相无法表达的信息。
04 示例任务
以下示例简报尚未经过测试。使用前请检查此技能的设置说明。
从 designer-skills 仓库将此任务的 SKILL.md 加载到智能体支持的技能位置。入口文件未规定通用的安装命令。
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md请提供实际数据、字段定义、读者的问题和显示约束。此技能用于指导图表设计；数据验证和图表实现仍属于独立任务。
运行此技能前，请调整这份简报的范围、来源材料和约束。
使用 data-visualization，根据所提供的月度数值重新设计这张目标值与实际值对比图。推荐一种单位和上下文清晰的图表，解释其坐标轴选择，并提供易读的移动端替代方案和文本摘要。不要根据趋势推断原因。依据以下可观察的标准检查实际输出。
OpenDesign 为编码智能体提供本地设计工作区。此页面的收录并不意味着该技能已被捆绑提供，也不意味着其中包含其外部工具、凭据和软件依赖项。
05 来源与许可证
本页描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。
9a6930cf84a8图表选择、视觉编码、上下文标签、无障碍设计和响应式呈现。
由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数是带有日期的受欢迎程度信号，并不代表技能使用量或质量评分。
06 开始前的问题
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/data-visualization/SKILL.md