Stat Card
统计卡片
WebDesktop上手难度: 中等
一个只装一个数字的小卡片，配上标签和变化趋势。
Live Demo
真的可以点今日新增
1,284
↑ 12%较昨日
活跃用户
8,420
↓ 3%较上周
转化率
4.2%
持平较上周
今日清理
0
—较昨日
你刚才看到的这个：后台首页顶部那几个并排的小卡片：「今日新增 1,284 ↑12%」「活跃用户 8,420 ↓3%」「转化率 4.2%」。
它到底是什么
Stat Card 回答的是「现在怎么样」。它必须包含：指标名（说清是什么）、数值（大的）、以及对比信息（比上期涨了多少）。少了第三项，这个卡就只是一个孤零零的数字。
统计卡stat card数据卡片指标卡metric cardkpi
Anatomy · 它由什么组成
Label指标名
12px 次要色
Value数值
28px，tabular-nums
Delta变化
↑12% vs 上周
Context基准
说清对比对象
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 需要一眼看到几个核心指标 | 用 |
| 指标有明确的对比基准（昨天、上周） | 用 |
| 数字比趋势更重要 | 用 |
| 需要展示数字的变化过程 | 视情况 |
| 指标之间需要交叉分析 | 不用 |
涨跌颜色要遵守习惯：国内用红涨绿跌，美股用绿涨红跌，别搞反。
「↑12%」必须说清和什么比——和上个月比？同比？
Similar Patterns
别搞混一句话区分：一个只装一个数字的小卡片，配上标签和变化趋势。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一组统计卡片：今日新增 1,284（较昨日 ↑12%）、活跃用户 8,420（↓3%）、转化率 4.2%（持平）。涨跌用红涨绿跌。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个数据显示最近数据。
改成这样说
加统计卡片组：指标名 12px 次要色 + 数值 28px tabular-nums + 变化行（必须标注基准如「较昨日」），国内红涨绿跌，桌面 4 列平板 2 列手机 1 列，值为 0 时显示「—」避免误读。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。