CARD
贴纸徽章卡Sticker / Badge Card
卡片顶部骑缝贴一枚旋转了几度的彩色胶囊徽章，像手账里贴的贴纸，瞬间有了亲和力。
效果预览
STEP 1
1
选定一个细分人群
不要试图服务所有人。先找到 100 个愿意付费的种子用户。
适合用在哪
步骤说明、活动卡片、新手引导、想要轻松感的页面。
容易踩的坑
- 父容器设了 overflow:hidden，骑缝徽章上半截被直接裁掉。
- 每张卡徽章都旋转同一角度，失去随手贴的自然感，应在 -2° 到 -4° 间交替。
- 白字 10px 压在橙红渐变上，对比度接近 3:1，徽章文字难以辨认。
设计提示词 · Prompt
贴纸徽章卡（Sticker / Badge Card）：在卡片上边缘"骑缝"贴一枚绝对定位的胶囊徽章（top:-10-12px、left:16-20px、rotate(-2~-4deg)），徽章用暖色渐变（如橙→红）+ 白字 10-11px 700 字重 + 同色系柔光投影，旋转角度是灵魂——端正了就没有贴纸感。卡内放编号 + 标题 + 说明。整卡白底 + 1px 描边 + 14px 圆角 + 20px 内边距，为徽章预留上方 16px 空间。适合 2-4 张并排做步骤流。
Sticker / Badge Card: "straddle" an absolutely positioned pill badge across the card's top edge (top:-10-12px, left:16-20px, rotate(-2~-4deg)). The badge uses a warm gradient (e.g. orange→red) + white 10-11px text at 700 weight + a soft glow shadow in the same color family; the rotation angle is its soul — keep it upright and the sticker feel is gone. Inside the card, place a number + title + description. Card: white background + 1px stroke + 14px radius + 20px padding, leaving 16px of space above for the badge. Suitable for 2-4 cards side by side as a step flow.
常见搭配
同一页面里经常和「贴纸徽章卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-sticker">
<span class="d-sticker__tag">STEP 1</span>
<div class="d-sticker__step">
<span class="d-sticker__num">1</span>
<b>选定一个细分人群</b>
</div>
<p>不要试图服务所有人。先找到 100 个愿意付费的种子用户。</p>
</div>