本文へ移動
cccskills
無料GitHub で公開

data-visualization

数据可视化和仪表盘设计时使用。适用于图表选型、仪表盘布局、BI 工具使用。

インストール方法を見る

含まれるファイル(2)

  • SKILL.md1.7 KB
  • templates/dashboard-template.md997 B

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

数据可视化(Data Visualization)

适用场景

  • 业务仪表盘设计
  • 图表选型
  • 报告配图
  • 实时监控面板

核心原则

1. 图表服务于问题
   先有问题再选图表

2. 简洁优先
   不要 3D / 彩虹色 / 动画

3. 受众决定复杂度
   管理层看 KPI 大数字
   分析师看明细交互

4. 对比是可视化之魂
   同比 / 环比 / 基线 / 目标线

图表选型

数据关系推荐图表
趋势折线图
对比柱状图
占比饼图(≤5 类)/ 堆叠柱状
分布直方图 / 箱线图
相关散点图
漏斗漏斗图
排名水平条形图
地理地图

工具

工具适合
Metabase开源 / 自助 BI
Apache Superset开源 / 功能全
Grafana运维 / 实时
LookerGoogle 企业
Tableau商业智能标杆
Power BI微软生态
ECharts前端嵌入
RechartsReact 简单图表

配套模板

  • templates/dashboard-template.md — 仪表盘设计模板

质量自检

□ 图表服务于问题
□ 选型合适
□ 简洁不花哨
□ 有对比基线
□ 有时间筛选
□ 受众匹配
□ 移动端可看

常见坑

  1. 3D 饼图——扭曲比例
  2. 彩虹色——无语义
  3. 图表太多——信息过载
  4. 无基线——看不出好坏
  5. 指标无定义——看不懂

与其他 skill 的协作

上游:sql-analysis → 数据查询
下游:analysis-report → 配图

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

A/B 测试设计与分析时使用。适用于产品实验、功能验证、转化率优化。融合假设驱动 + 样本量计算 + 置信度判断。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

上线前业务方/产品方验收时使用。适用于功能交付确认、UAT、发布会签。融合 BDD Given-When-Then、Specification by Example、ATDD。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

设计无障碍可访问的界面时使用。适用于满足 WCAG 标准、键盘导航、屏幕阅读器支持。优先使用 WCAG 2.2 AA 级标准 + 键盘 + 焦点 + 对比度 + ARIA。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

实现可访问性(无障碍)时使用。覆盖 WCAG 2.2 AA / ARIA / 键盘导航 / 屏幕阅读器 / 颜色对比 / 焦点管理。融合 React Aria / Radix UI / Headless UI 实践 + axe-core 自动化测试。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

AI 模型部署时使用。适用于推理服务 / GPU / TensorRT / 监控 / 扩缩容。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

数据分析报告输出时使用。适用于业务分析报告、周报、专项分析、决策支持。融合洞察 + 建议 + 行动项。

日本語の概要は準備中です。原文の説明を表示しています。

zhaoxuya520/AI-Fullstack-Delivery-Workflow532026年5月19日 更新

zhaoxuya520 のスキルをすべて見る

このスキルの問題を報告する