PRODUCT LIFECYCLE
成就徽章Achievement Badge
金色圆环徽章，带持续扫过的高光和名称说明。用于奖励里程碑，是游戏化体系里最直观的正反馈。
效果预览
🏆
连续活跃 30 天
解锁于 2026 年 3 月
适合用在哪
完成任务、达成里程碑、连续使用若干天后的解锁提示。
容易踩的坑
- 高光无限循环且不适配减弱动效偏好，长时间停留会分散注意力。
- 徽章发得太滥（如登录即得），奖励贬值，用户很快对解锁提示无感。
- emoji 作为徽章主体未加 aria-label，读屏只念出表情名而非成就名。
设计提示词 · Prompt
成就徽章（Achievement Badge）：62px 圆形，用 conic-gradient 从 200deg 起在浅黄到琥珀之间循环，做出金属环质感；内圈叠一个 inset:5px 的白色圆（box-shadow 用 inset 0 2px 6px rgba(0,0,0,.08) 做内凹），中心放一个 24px 的 emoji 或图标。整个徽章叠加一个 overflow:hidden 的高光层，用一条 24px 宽、skewX(-20deg) 的白色渐变带以 3s 循环斜扫而过，模拟金属反光。下方两行：11px 加粗名称 + 8.5px 浅灰获得条件，行距收紧。
Achievement Badge: a 62px circle using a conic-gradient starting at 200deg that cycles between light yellow and amber to create a metallic ring; inside, an inset:5px white circle (box-shadow inset 0 2px 6px rgba(0,0,0,.08) for a recessed look), with a 24px emoji or icon at the center. Overlay the whole badge with an overflow:hidden highlight layer: a 24px-wide white gradient band, skewX(-20deg), sweeps diagonally across on a 3s loop to mimic metallic glare. Below, two lines: an 11px bold name + an 8.5px light-gray unlock condition, with tight line spacing.
常见搭配
同一页面里经常和「成就徽章」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-badge">
<div class="lc-badge__b"><em>🏆</em><span class="lc-badge__sh"></span></div>
<b>连续活跃 30 天</b>
<span>解锁于 2026 年 3 月</span>
</div>
</div>