数据卡（Stat / KPI Card）是什么：效果预览与 AI 设计提示词

效果预览

月收入 MRR▲ 12.4%

¥128,400 ▲

较上月 +¥14,200

适合用在哪

仪表盘、数据总览区、财报页；一切需要"数字先行"的地方。

容易踩的坑

涨跌只靠红绿区分，约 8% 男性有红绿色弱，必须同时保留 ▲▼ 图标。
数字不加 tabular-nums，实时刷新时宽度跳动，整行卡片左右抖。
大数字不做单位缩写，1234567 直接撑破卡片，应显示为 1.23M 并在 title 中给出全值。

设计提示词 · Prompt

数据卡（Stat / KPI Card）：核心是数字排版——28-48px、字重 750-800、letter-spacing:-0.03em、font-variant-numeric:tabular-nums（数字等宽，跳动时不抖）。上方 11px 灰色大写标签，下方涨跌徽章（涨绿跌红，▲▼ 三角）和一条 60-90px 宽的迷你趋势线（Sparkline，SVG 或 7-12 根小柱）。卡片白底 + 1px 描边 + 12px 圆角 + 内边距 20px。多个数据卡并排时数字基线必须严格对齐。

Stat / KPI Card: the core is number typography — 28-48px, font-weight 750-800, letter-spacing:-0.03em, font-variant-numeric:tabular-nums (monospaced digits so they don't jitter when changing). An 11px gray uppercase label above, and below it a change badge (green for up, red for down, with ▲▼ triangles) and a 60-90px wide mini trend line (Sparkline, SVG or 7-12 small bars). Card: white background + 1px stroke + 12px radius + 20px padding. When multiple stat cards sit side by side, the number baselines must be strictly aligned.

常见搭配

同一页面里经常和「数据卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

迷你趋势线Sparkline 仪表盘布局Dashboard Layout 数字滚动计数Odometer / Count-up Animation 图表卡片容器Chart Card Container

演示 HTML 结构

<div class="s d-stat">
  <div class="d-stat__top"><span>月收入 MRR</span><span class="d-badge d-badge--g">▲ 12.4%</span></div>
  <div class="d-stat__val">¥128,400 <i>▲</i></div>
  <div class="d-stat__foot">
    <span>较上月 +¥14,200</span>
    <span class="d-stat__spark"><i style="height:30%"></i><i style="height:45%"></i><i style="height:38%"></i><i style="height:58%"></i><i style="height:66%"></i><i style="height:82%"></i><i style="height:100%"></i></span>
  </div>
</div>