mcpField
K
kpi-dashboard-design

kpi-dashboard-design

github.com/secondsky设计与 UI240515 次安装5 周前更新
代码仓库

关于 kpi-dashboard-design

用于规划 KPI 仪表盘的设计技能，涵盖指标筛选、布局、图表选择和视觉层级，适合需要清晰呈现业务表现的团队。

主要功能

  1. 01KPI 筛选标准
  2. 02常见业务 KPI 示例
  3. 03仪表盘布局指导
  4. 04按数据类型选择图表
  5. 05视觉设计原则
  6. 06仪表盘交互建议

适用场景

  1. 01为业务目标选择指标
  2. 02规划管理层摘要仪表盘
  3. 03为趋势或比较选择图表
  4. 04检查仪表盘的清晰度与背景信息

安装

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

$npx skills add https://github.com/secondsky/claude-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