kpi-card-glossary
当用户需要了解 KPI 指标卡的设计规范时使用。触发场景：用户问"KPI 卡片应该包含哪些元素？"、"如何设计关键业务指标的展示？"、"KPI 数值的字体和样式是什么？"。不适用于：普通数据表格、非关键指标的展示。关键 trigger 信号：KPI 卡片 / 关键指标 / 指标卡设计 / Label Value Trend。
Quellinformationen
- Repository
- Natsummerance/agents
- Letzte Quellaktivität
- 27. August 2026 um 07:35
- Erkannte Sprache von SKILL.md
- Chinesisch
- Sterne
- 3
- Forks
- 0
Installationsoptionen
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Datei-Explorer
3 DateienSKILL.md wird angezeigt
SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau- name
- kpi-card-glossary
- description
- 当用户需要了解 KPI 指标卡的设计规范时使用。触发场景：用户问"KPI 卡片应该包含哪些元素？"、"如何设计关键业务指标的展示？"、"KPI 数值的字体和样式是什么？"。不适用于：普通数据表格、非关键指标的展示。关键 trigger 信号：KPI 卡片 / 关键指标 / 指标卡设计 / Label Value Trend。
- source_book
- 《ENCY-charts 数据可视化设计规范》 ENCY Design Team
- source_chapter
- 4.2 KPI 指标卡
- tags
- ["kpi-card","dashboard-design","key-metrics","component-design"]
- source_project
- ENCY-charts 设计规范
- related_skills
- ["clarity-first-principles","semantic-colors-glossary"]
# KPI Card（KPI 指标卡）
## R (Reading) — 原文引用
> ".kpi-card__label { font-size: 12px; font-weight: 400; color: var(--chart-axis-label); } .kpi-card__value { font-size: 28px; font-weight: 600; font-family: var(--chart-number-font); font-variant-numeric: tabular-nums; } .kpi-card__trend { font-size: 11px; }"
## I (Interpretation) — 方法论骨架
**定义**：一种特殊的图表容器组件，用于展示关键业务指标的核心数值、趋势和微型图表。
**核心组成**：
- **Label（指标名）**：12px / 400 字重 / #86909C
- **Value（主数值）**：28px / 600 字重 / DIN Alternate 字体 / tabular-nums
- **Trend（趋势标识）**：11px / 颜色编码（绿=涨，红=跌）
- **Micro Chart（可选）**：40px 高的迷你折线图
**典型示例**：
```css
.kpi-card__value {
font-size: 28px;
font-weight: 600;
font-family: var(--chart-number-font);
font-variant-numeric: tabular-nums;
}
```
**适用场景**：
- Dashboard 顶部的核心指标概览
- 业务报表的关键数据展示
- 实时监控面板的核心指标
## A1 (Past Application) — 书中作者用过的案例
在 ENCY-charts 规范中，作者定义了完整的 KPI 卡片样式，包括 Label/Value/Trend/Micro Chart 四层结构。
## A2 (Future Trigger) — 何时调用此 skill
**调用场景**：
- 设计师问"KPI 卡片应该包含哪些元素？"
- 前端工程师说"KPI 数值的字体和样式是什么？"
**关键 trigger 词**：KPI 卡片 / 关键指标 / 指标卡设计 / Label Value Trend
## E (Execution) — 可执行步骤
**步骤 1：定义四层结构（Label → Value → Trend → Micro Chart）** — 完成标准: 四层 DOM 结构均已生成且层级正确，Label/Value/Trend/Micro Chart 类名规范
**步骤 2：应用样式规范（28px/600/DIN Alternate/tabular-nums）** — 完成标准: Value 元素字号 28px、字重 600、字体 DIN Alternate、含 tabular-nums，且经渲染验证生效
**步骤 3：添加趋势标识（绿色上涨，红色下跌）** — 完成标准: Trend 元素使用 var(--chart-success)/var(--chart-danger) 且配合箭头图标，色盲友好
**步骤 4：可选嵌入微型图表** — 完成标准: 若嵌入，Micro Chart 高度 40px、类型为迷你折线图，且仅用于有趋势意义的指标
## B (Boundary) — 边界与盲点
**不适用场景**：
- 非关键指标的展示
- 普通数据表格
**相关 skills**：
- `clarity-first-principles` — 清晰性优先原则
- `semantic-colors-glossary` — 语义色
---
## 附录：源仓库实现细节（源自 ENCY-charts 设计规范）
> 具体实现细节请见上游 ENCY-charts 仓库对应组件的源码与示例。
### 可执行步骤扩展
1. **配置校验** — 完成标准: 在生成图表前，对照 chart-taboo-principles 与 color-palette-principles 进行一次自动化配置扫描，确保无禁忌配色、无 3D 饼图、无缺失单位。
2. **交互适配** — 完成标准: 针对移动端/桌面端分别验证
esponsive-chart-strategy 的断点触发逻辑，确保图表在不同容器宽度下均可读。
3. **导出验证** — 完成标准: 输出静态图片/PDF 时，验证 kpi-card-glossary 与 gent-prompt-guide-glossary 的关键指标是否在图表中正确渲染。
### 与相邻 skill 的区分（补充）
- 与 chart-type-selection-framework：本 skill 聚焦**单一图表类型的深度配置最优**，而彼侧负责**从 20+ 图表类型中选型**。
- 与
esponsive-chart-strategy：彼侧管**全局响应式布局**，本 skill 管**单图内部的编码与视觉细节**。
---
## 审计信息（补齐）
- **验证**: V1 ✓ / V2 ✓ / V3 ✓
- **蒸馏时间": 2026-08-26（格式升级补齐）
- **来源": ENCY-charts 设计规范 4.6 / 7 + vendor/larashero3-dotcom__lieflat-charts 等
Auf GitHub ansehen