PRODUCT LIFECYCLE
连续打卡Streak
用一个大数字 + 一周七天的小格子展示连续使用天数，已打卡的格子填色。用「不想断掉」的心理维持留存。
效果预览
27天连续
一二三四五六日
适合用在哪
学习/健身/习惯类产品，也可用于工作类产品的「连续活跃」激励。
容易踩的坑
- 按服务器时区判断「今天」，跨时区用户深夜打卡被算作断签。
- 已打卡与未打卡只靠颜色区分，色弱用户分不清，应叠加勾号或文字。
- 断签直接清零且无补签机制，长连续用户一次失误就可能永久流失。
设计提示词 · Prompt
连续打卡（Streak）：顶部是 25-36px 的琥珀色大数字（当天数），紧跟小号「天连续」；下面是七个 19-22px 的圆角小方块代表周一到周日，已打卡的用琥珀到橙的渐变填充 + 白字，未打卡的是浅灰底浅灰字，今天那格再叠一圈浅黄外环突出。数字切换时可用 count-up 补间。注意：断签后不要用惩罚性文案（「你失去了 XX 天」），改成「重新开始也很棒」，避免情绪反弹。
Streak: at the top, a 25-36px amber big number (the day count) followed by a small "day streak"; below, seven 19-22px rounded squares for Monday through Sunday — checked-in days are filled with an amber-to-orange gradient and white text, unchecked days use a light-gray background with light-gray text, and today's square gets an extra light-yellow outer ring to stand out. Use a count-up tween when the number changes. Note: after a broken streak, avoid punitive copy ("You lost XX days"); use "Starting over is great too" instead to avoid an emotional backlash.
常见搭配
同一页面里经常和「连续打卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-streak">
<div class="lc-streak__n"><b>27</b><span>天连续</span></div>
<div class="lc-streak__days">
<i class="is-on">一</i><i class="is-on">二</i><i class="is-on">三</i><i class="is-on">四</i><i class="is-on">五</i><i class="is-on is-today">六</i><i>日</i>
</div>
</div>
</div>