迷你趋势线（Sparkline）是什么：效果预览与 AI 设计提示词

效果预览

¥128,400本月收入

▲ 12.4%

适合用在哪

数据卡、表格行内、股票列表、监控面板。

容易踩的坑

SVG 没有 role="img" 和趋势描述文字，读屏用户只得到一个孤立数字。
涨跌只用红绿区分，在中美市场语义相反，且色弱用户无法识别方向。
表格每行都实时重绘 sparkline，超过 100 行时滚动明显卡顿。

设计提示词 · Prompt

迷你趋势线（Sparkline）：SVG polyline 或 path，尺寸 60-100×24-40px，1.5-2px 线宽，可选渐变面积填充。颜色跟语义走：涨绿跌红或统一品牌色。永远与一个大数字成对出现（数字是主、曲线是辅）。去掉所有轴、网格、标签——sparkline 的美德就是"零装饰"。表格里每行一条时用统一起点缩放（各自归一化 vs 全局缩放要想清楚：比走势用归一化，比绝对值用全局）。悬停显示该点数值 + 时间。

Sparkline: an SVG polyline or path, size 60-100×24-40px, 1.5-2px stroke, with an optional gradient area fill. Color follows meaning: green up / red down, or a uniform brand color. Always pair it with a large number (the number is primary, the curve secondary). Remove all axes, grids, and labels — the virtue of a sparkline is "zero decoration". When each table row has one, decide the scaling deliberately (per-row normalization vs global scale: normalize to compare trends, use global scale to compare absolute values). On hover show the value + time for that point.

常见搭配

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

数据卡Stat / KPI Card 数据表格Data Table 图表卡片容器Chart Card Container

演示 HTML 结构

<div class="s d-spark">
  <div class="d-spark__info"><b>¥128,400</b><span>本月收入</span></div>
  <div class="d-spark__up">▲ 12.4%</div>
  <svg viewBox="0 0 84 30"><path d="M2,26 L12,22 L22,24 L32,17 L42,19 L52,12 L62,14 L72,7 L82,4" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>