跳转到使用指南
kpi-dashboard-design作者 Seth Hobson

KPI Dashboard Design Skill.

Claude Code 和 Codex 的图表 skill:KPI 仪表板设计,包括指标选择、图表类型、布局和实时模式。

  • Diagrams & Data Visualization
  • Dashboard
wshobson/agents · plugins/business-analytics/skills/kpi-dashboard-design/SKILL.mdSKILL.md
--- name: kpi-dashboard-design description: Design effective KPI dashboards with metrics selection, visualization best practices, and real-time monitoring patterns. Use this skill when building an executive SaaS metrics dashboard tracking MRR, churn, and LTV/CAC ratios; designing an operations center with live service health and request throughput; creating a cohort retention analysis view for a product team; or debugging a dashboard where metrics contradict … --- ## When to Use This Skill ## Core Concepts ## Detailed worked examples and patterns ## Best Practices ## Related Skills
前言和章节标题读取自上游文件,2026-09-14 · 完整 5,423 字符

01 功能说明

kpi-dashboard-design Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

这个 skill 提供了一套全面的模式,用于设计能够驱动业务决策的关键绩效指标(KPI)仪表盘。它涵盖三个仪表盘层级——面向高管的战略层级(按月/季度更新)、面向经理的战术层级(按周/月更新)以及面向团队的运营层级(实时/每日更新)。

这个 skill 覆盖完整的生命周期:使用 SMART 框架挑选有意义的 KPI,选择合适的可视化方式,建立从高管摘要到部门视图再到详细下钻的仪表盘层级结构,并排查常见问题,例如部门间指标不一致、告警疲劳,以及实时查询导致的数据库性能问题。它还包含用于同期群分析、MRR 归一化、预聚合指标和动态告警阈值的具体 SQL 和 Python 模式。

它产出什么

  • 在提示信息或数据字典中明确记录归一化公式的 SQL 查询
  • 用于预聚合指标快照的 Python 代码,将 OLAP 与 OLTP 工作负载分离开
  • 基于滚动平均值和标准差的动态告警阈值逻辑
查看示例提示词 ↗

工作方式

  1. 01
    定义 KPI 级别与受众

    将仪表盘范围匹配到三个级别之一:面向高管、按月/季度更新的战略级;面向经理、按周/月更新的战术级;或面向团队、实时/每日更新的运营级。

  2. 02
    对每个指标应用 SMART 原则

    确保每个 KPI 具备明确定义(Specific)、可量化(Measurable)、目标现实可行(Achievable)、与目标相关(Relevant),并设定明确周期(Time-bound)。

  3. 03
    构建三层层级结构

    设计仪表盘结构:一个高管摘要页展示 4-6 个带趋势指示器和关键告警的核心 KPI,一个覆盖销售/市场/运营/财务的部门视图,以及用于根因分析的详细下钻页面。

  4. 04
    限定范围并展示上下文

    每个视图最多聚焦 5-7 个 KPI,并始终包含对比、趋势和目标值,以便用户能够有意义地解读数字。

  5. 05
    支持从摘要到明细的下钻

    设计导航路径,使用户能够从高层高管指标点击深入到每个数字背后的详细数据和根因分析。

02 找到适合场景

何时使用 kpi-dashboard-design Skill

在 Claude Code 或 Codex 中需要此类图表时使用 kpi-dashboard-design skill。适用范围和限制取自该 skill 的自有文件。

适合场景

  • 构建一个跟踪 MRR、流失率和 LTV/CAC 比率的高管级 SaaS 指标仪表盘
  • 设计一个具备实时服务健康状态和请求吞吐量监控的运营中心
  • 为产品团队创建群组留存分析视图
  • 调试一个由于计算方法不一致导致指标相互矛盾的仪表盘
  • 建立指标治理机制,确保组织内定义一致

    需要提供的信息

    • 现有指标定义分享当前指标的计算方式(例如 MRR 对年付计划的处理或群组分组逻辑),以诊断不一致之处或统一公式。

    03 Skill 内部

    kpi-dashboard-design Skill 为 Claude Code 和 Codex 提供的规则

    SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

    1. 使用一致的颜色语义

      在所有仪表盘视图中一致地使用红色表示负面表现或问题,绿色表示正面表现或健康状态。

    2. 绝不展示虚荣指标

      排除那些看起来光鲜但无法驱动可执行决策的指标,只关注团队能够据此采取行动改善结果的数据。

    3. 绝不使用 3D 图表

      避免使用三维可视化,因为它会扭曲感知,使用户更难准确比较数值。

    4. 记录计算方法

      永远不要隐藏指标的计算方式。始终记录公式和逻辑,最好直接放在仪表盘卡片上或工具提示中,以避免出现相互矛盾的解读。

    5. 让更新频率匹配指标类型

      为每个 KPI 设置合适的仪表盘刷新频率:运营类指标实时或每日更新,战术类指标每周或每月更新,战略类指标每月或每季度更新。

    6. 确保移动端响应式设计

      设计仪表盘时应确保在移动设备上同样有效,而不仅仅是在桌面屏幕上,以便高管和团队成员可以随时随地访问关键指标。

    7. 保留留白以提升可理解性

      避免仪表盘布局中元素过多而显得拥挤。留白有助于理解,帮助用户聚焦于最重要的指标。

    04 投入使用

    在 Claude Code 或 Codex 中安装 kpi-dashboard-design

    一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

    将 kpi-dashboard-design 添加到 Claude Code、Codex 或您的 Agent

    在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

    Terminal
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    用于 plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md 的通用 skills CLI 形式;该仓库可能会记录其自身路径。

    给 Skill 分配第一个图表和图示任务

    按 skill 自身的术语撰写;把括号中的部分换成你的内容。

    Starter prompt
    Design an executive SaaS metrics dashboard for [our company] that tracks monthly recurring revenue, customer churn rate, and LTV/CAC ratio. The dashboard needs to update weekly and show trends over the past 12 months with comparisons to our target goals. We've been getting conflicting MRR numbers between this dashboard and finance reports because annual subscriptions are normalized differently. Include the calculation methodology directly on each metric card and ensure the design works on mobile devices for our remote executive team.

    来源:依据 SKILL.md,按 skill 自身的术语撰写。

    检查首次结果

    SKILL.md 本身如何描述正确的结果:

    • 确认队列(cohort)查询使用 DATE_TRUNC('month', created_at),而不是按天截断日期,因为按天会导致队列过小而无法呈现趋势
    • 检查用户感知质量指标(如 P95 页面加载时间和任务完成率)是否与基础设施正常运行时间指标并列展示
    • 测试实时仪表盘是否从预聚合的汇总表中读取数据,而不是对生产数据库运行复杂查询
    • 验证告警阈值是否基于滚动平均值动态设定,而非导致告警疲劳的静态数值

    在 OpenDesign 中,通过其 SKILL.md 链接导入 kpi-dashboard-design:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

    05 开源、可追溯

    来源、许可与验证

    本页面事实的来源,以及最后检查时间。

    Repository
    github.com/wshobson/agents 分支 main
    Skill 文件
    plugins/business-analytics/skills/kpi-dashboard-design/SKILL.md 验证时记录的内容校验和;commit 4236bb9
    License
    MIT 来自 LICENSE。
    仓库星标数
    39,635 GitHub 快照拍摄于 2026-09-14,针对整个 wshobson/agents 仓库,该仓库在此目录中包含 18 个 skills。不是 kpi-dashboard-design 的评分或使用计数。
    已由 OpenDesign 验证
    2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

    SKILL.md 内部

    1. 何时使用此 Skill列出六种场景:高管仪表盘、KPI 选择、实时监控、部门视图、布局改进、指标治理
    2. 核心概念定义了具有三个层级的 KPI 框架、SMART KPI 标准,以及三层仪表盘层级结构
    3. 详细的实例讲解和模式指向 references/details.md,以获取各部门常见 KPI 及更深入的模式
    4. 最佳实践五条应做事项(限制 KPI 数量、展示上下文、颜色一致、可下钻、更新频率适当)和五条不应做事项(虚荣指标、布局拥挤、3D 图表、隐藏方法论、忽视移动端)
    5. 故障排查解决五个问题:MRR / 财务口径冲突、基础设施指标良好但用户投诉、队列趋势平坦、数据库负载过重、告警疲劳
    6. 相关 Skill链接到 data-storytelling skill,用于将仪表盘发现转化为高管叙事
    Skill 自身的描述
    「设计有效的 KPI 仪表板,包含指标选择、可视化最佳实践和实时监控模式。当构建跟踪 MRR、流失率和 LTV/CAC 比率的高管 SaaS 指标仪表板;设计包含实时服务健康状况和请求吞吐量的运营中心;为产品团队创建队列留存分析视图;或调试因计算方法不一致而导致指标相互矛盾的仪表板时,使用此 skill。」

    来自 SKILL.md 的前置描述。完整文件约 5,423 字符。在 GitHub 上阅读完整文件。

    06 安装之前

    关于 kpi-dashboard-design Skill 的常见问题

    以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

    如果仪表盘显示指标健康,但用户却在抱怨,该怎么办?

    仪表盘可能只跟踪了诸如 API 正常运行时间之类的基础设施指标,而没有跟踪用户感知的质量。请在基础设施正常运行时间和错误率之外,加入客户感知类指标,如 P95 页面加载时间、任务完成率和支持工单量。系统健康状况并不总能反映用户体验。

    KPI Dashboard Design

    在真实的图表和图表任务上运行 kpi-dashboard-design。

    下载 OpenDesign,从其 SKILL.md 链接导入 kpi-dashboard-design,粘贴上述提示词,并在查看结果前阅读计划。

    终端
    npx skills add https://github.com/wshobson/agents --skill kpi-dashboard-design

    OpenDesign 桌面客户端

    一套设计系统,让每一次创作都保持品牌一致

    在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

    • 覆盖网页、PPT、原型、数据看板、图像与视频
    • 140+ 设计系统,以及完整模板与技能库
    • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
    免费下载

    支持 macOS 与 Windows