热力图（Heatmap）是什么：效果预览与 AI 设计提示词

效果预览

少 □░▒▓█ 多 · 最近 24 天

适合用在哪

活跃度日历、点击密度、时段分析、行为矩阵。

容易踩的坑

最低一档 0.08 透明度在浅色背景上与空格几乎无差别，用户误以为没有数据。
一年 365 个格子各绑一个 tooltip 监听，应改用事件委托减少内存占用。
格子只有 10px 且无键盘焦点，移动端和键盘用户都无法查看单格数值。

设计提示词 · Prompt

热力图（Heatmap）：CSS Grid 网格（列=周/时，行=天/项），每格用 rgba(品牌色, 透明度) 编码数值——透明度分 4-5 档（0.08 / 0.25 / 0.5 / 0.8 / 1），格子 10-14px、圆角 3px、间隙 3px。必须配图例（"少 □□□□■ 多"）。颜色只用一个色相的深浅——多色相热力图难以比较。悬停 tooltip 显示精确值 + 日期。行列标签 9-10px 灰色。GitHub 贡献图、时段×星期分析都是这个模式的经典应用。

Heatmap: a CSS Grid (columns = weeks/hours, rows = days/items), each cell encoding its value with rgba(brand color, opacity) — opacity in 4-5 steps (0.08 / 0.25 / 0.5 / 0.8 / 1), cells 10-14px, 3px radius, 3px gap. A legend is mandatory ("Less □□□□■ More"). Use shades of a single hue only — multi-hue heatmaps are hard to compare. Hover tooltip shows the exact value + date. Row and column labels 9-10px gray. The GitHub contribution graph and hour×weekday analysis are classic applications of this pattern.

常见搭配

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

图表卡片容器Chart Card Container 工具提示Tooltip 连续打卡Streak

演示 HTML 结构

<div class="s d-heat">
  <i style="--v:.1"></i><i style="--v:.25"></i><i style="--v:.1"></i><i style="--v:.55"></i><i style="--v:.3"></i><i style="--v:.8"></i><i style="--v:.45"></i><i style="--v:.15"></i><i style="--v:.65"></i><i style="--v:.9"></i><i style="--v:.2"></i><i style="--v:.4"></i>
  <i style="--v:.3"></i><i style="--v:.7"></i><i style="--v:.5"></i><i style="--v:.2"></i><i style="--v:.85"></i><i style="--v:.35"></i><i style="--v:.6"></i><i style="--v:.25"></i><i style="--v:.95"></i><i style="--v:.4"></i><i style="--v:.55"></i><i style="--v:.75"></i>
  <span class="d-heat__cap">少 □░▒▓█ 多 · 最近 24 天</span>
</div>