PRODUCT LIFECYCLE
排行榜Leaderboard
按分数排序的名单，前三名有特殊标记，自己那一行高亮。用社会比较驱动参与度。
效果预览
1KKai9,840
2LLin9,215
3MMomo8,772
4我你（阿涛）8,120
适合用在哪
社区积分、学习进度、团队内部业绩、活动赛事的实时排名。
容易踩的坑
- 名次只用金银铜颜色表达，没有数字或文字，色弱和读屏用户无法分辨。
- 实时刷新时整表重排闪烁，用户正在看的那一行突然跳走。
- 只展示头部玩家，排名靠后的大多数用户找不到自己，参与感反而下降。
设计提示词 · Prompt
排行榜（Leaderboard）：白底圆角卡，每行 flex 布局：左侧名次（15-20px 宽、居中，第一名用金色、二三名用银铜色）、中间用户名（11px 加粗）、右侧分数（加粗主色）。行高 30-34px、内边距 5-6px，行间无边框、靠悬停/高亮区分。当前用户那一行用浅主色底（#eef2ff）高亮并固定在列表中可见的位置（若排名靠后可做一个吸底浮层）。只显示前 5-10 名即可，不要做无限长榜；分数用等宽数字（font-variant-numeric:tabular-nums）避免位数变化时抖动。
Leaderboard: a white rounded card, each row in a flex layout: rank on the left (15-20px wide, centered; first place in gold, second and third in silver and bronze), username in the middle (11px bold), score on the right (bold, primary color). Row height 30-34px, padding 5-6px, no borders between rows — distinguish them via hover/highlight. The current user's row gets a light primary background (#eef2ff) and stays visible in the list (if they rank low, use a bottom-pinned floating row). Show only the top 5-10; don't build an endless board. Use tabular figures for scores (font-variant-numeric:tabular-nums) to avoid jitter when digit counts change.
常见搭配
同一页面里经常和「排行榜」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-lb">
<div class="lc-lb__r"><em>1</em><span class="d-av d-av--sm">K</span><b>Kai</b><span>9,840</span></div>
<div class="lc-lb__r"><em>2</em><span class="d-av d-av--sm" style="background:linear-gradient(135deg,#f59e0b,#ef4444)">L</span><b>Lin</b><span>9,215</span></div>
<div class="lc-lb__r"><em>3</em><span class="d-av d-av--sm" style="background:linear-gradient(135deg,#06b6d4,#4f46e5)">M</span><b>Momo</b><span>8,772</span></div>
<div class="lc-lb__r is-me"><em>4</em><span class="d-av d-av--sm">我</span><b>你（阿涛）</b><span>8,120</span></div>
</div>
</div>