这个效果是怎么做出来的
GitHub 贡献图的本质是一张 CSS Grid 铺出来的日历：53 列乘 7 行，每格是一个小方块，按当天次数映射到 1 到 5 档颜色（data-level 属性存档位，CSS 按属性选择器上色）。用 Grid 而不是逐格绝对定位的好处是列宽行高自动对齐，横竖间隙用 gap 一条搞定。数据端就是一个函数：把日期数组折叠成「第几周第几天」，塞进对应格子。
点击详情的要点是定位：弹出气泡时读格子的 getBoundingClientRect，把气泡绝对定位在格子正上方，贴近屏幕边缘时自动翻转到下方或收进边界内，否则第一行和最后一行的气泡会被裁掉。气泡出现加一个 150 毫秒的上浮淡入，轻而不闹。
怎么用这条提示词
适合打卡、提交、消费记录这类一年维度的行为热力展示。发给 AI 时说明你的数据结构（日期加次数的数组），它会生成整年的映射逻辑。移动端记得叮嘱「格子缩小后保持正方形且间隙不变」，Grid 的 fr 单位方案和固定像素方案 AI 会自己选。
想效果更好？试试这些
五档颜色别用同一色的五级透明度，绿色系改成从浅到深的同色相递进（类似 GitHub 的 #9be9a8 到 #0e4429）更有辨识度。今天的格子加一圈描边，用户找「今天」不用猜。鼠标悬停显示轻提示、点击才弹详情，两层信息不打架。格子数超过 400 个后别给每个格子绑事件，用事件委托挂在容器上，性能和内存都省一半。