mcpField
K
kpi-dashboard-design

kpi-dashboard-design

github.com/xgent-ai设计与 UI178 次安装今天更新
代码仓库

关于 kpi-dashboard-design

KPI Dashboard Design 是一项面向业务指标看板设计团队的技能，提供 KPI 选择、布局、视觉编码、图表选择和交互设计指导。

主要功能

  1. 01选择与目标匹配的可量化 KPI
  2. 02规划看板布局与视觉层级
  3. 03按数据类型选择图表
  4. 04统一状态颜色编码
  5. 05规划筛选、下钻与导出

适用场景

  1. 01设计收入或留存看板
  2. 02为趋势和比较数据选择图表
  3. 03检查看板是否拥挤或缺少背景信息

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/xgent-ai/skills --skill kpi-dashboard-design

安装后在 Claude Code 中输入/kpi-dashboard-design确认已加载。

详细介绍

KPI 仪表板设计

设计有效的仪表板，清晰传达关键指标。

KPI 选择框架

优秀的 KPI 应：

  • 与业务目标相关
  • 可衡量且可量化
  • 受团队影响
  • 定期更新
  • 简单易懂

常见业务 KPI

目标KPI
收入MRR、ARR、收入增长
获客CAC、新用户数、转化率
留存流失率、NPS、DAU/MAU
效率LTV:CAC、资金消耗率
质量错误率、响应时间

仪表板布局

┌─────────────────────────────────────────────────┐
│              Executive Summary                  │
│  [Revenue ▲12%]  [Users ▲8%]  [Churn ▼2%]      │
├─────────────────────┬───────────────────────────┤
│                     │                           │
│   Revenue Trend     │    User Acquisition      │
│   (Line Chart)      │    (Bar Chart)           │
│                     │                           │
├─────────────────────┼───────────────────────────┤
│                     │                           │
│   Retention Funnel  │    Top Products          │
│   (Funnel Chart)    │    (Table)               │
│                     │                           │
└─────────────────────┴───────────────────────────┘

视觉设计原则

/* Traffic light colors for status */
.metric-good { color: #22c55e; }    /* Green */
.metric-warning { color: #f59e0b; } /* Amber */
.metric-bad { color: #ef4444; }     /* Red */

/* Visual hierarchy */
.metric-primary {
  font-size: 2.5rem;
  font-weight: 700;
}

.metric-secondary {
  font-size: 1.5rem;
  font-weight: 500;
}

图表选择

数据类型图表
随时间变化的趋势折线图
比较条形图
构成饼图/环形图
分布直方图
相关性散点图
漏斗阶段漏斗图

交互功能

  • 深入查看详细视图
  • 选择日期范围
  • 按细分项筛选
  • 导出为 CSV/PDF
  • 定时发送电子邮件报告

最佳实践

  • 每个仪表板最多展示 5-7 个 KPI
  • 展示趋势，而不只是快照
  • 使用一致的颜色编码
  • 包含对比时段（与上个月相比）
  • 实时或每小时更新数据
  • 每季度检查仪表板的相关性

常见错误

  • 指标过多（信息过载）
  • 缺乏清晰的视觉层次
  • 缺少背景信息（没有对比）
  • 数据过时或陈旧
  • 指标无人负责

评论

支持 Markdown