CARD
高亮定价卡Featured Pricing Card
三档定价里中间那档用深色底 + 渐变描边 + "最受欢迎"徽章，视觉重量碾压另外两档。
效果预览
最受欢迎
¥68 /月
- ✓ 无限项目数
- ✓ 优先渲染队列
- ✓ 团队协作 10 人
适合用在哪
定价页、订阅方案选择；想引导用户选特定档位时。
容易踩的坑
- 推荐卡上移后在移动端单列堆叠时仍偏移，与上下卡片重叠或间距不齐。
- 深色卡里的功能清单用 50% 透明白，对比度不足，用户看不清买到什么。
- 徽章写「最受欢迎」但价格与相邻档差距过大，锚定效果失效甚至引起反感。
设计提示词 · Prompt
高亮定价卡（Featured Pricing Card）：在浅色定价卡中间放一张深色卡（#12121A 底、白字），外圈包 1.5px 品牌渐变描边 + 大范围同色柔光投影，整体比两侧卡片高 16-24px（或上移 12px）形成"凸起"。左上角放"最受欢迎"胶囊徽章（半透明白底）。价格数字 48-64px、字重 800、字距 -0.04em。功能清单用半透明白 + ✓ 前缀。两侧卡片刻意做"素"（白底、灰字、无强调），对比之下推荐档自然突出。
Featured Pricing Card: among light pricing cards, place a dark card in the middle (#12121A background, white text), wrapped in a 1.5px brand gradient stroke + a large soft glow shadow in the same color, and make it 16-24px taller than the side cards (or shifted up 12px) to create a "raised" effect. Put a "Most popular" pill badge in the top-left corner (semi-transparent white background). Price numbers at 48-64px, font-weight 800, letter-spacing -0.04em. The feature list uses semi-transparent white + a ✓ prefix. Deliberately keep the side cards "plain" (white background, gray text, no emphasis), so the recommended tier stands out naturally by contrast.
常见搭配
同一页面里经常和「高亮定价卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-pricef">
<div class="d-pricef__in">
<span class="d-pricef__tag">最受欢迎</span>
<div class="d-pricef__num">¥68<small> /月</small></div>
<ul class="d-pricef__list">
<li>✓ 无限项目数</li>
<li>✓ 优先渲染队列</li>
<li>✓ 团队协作 10 人</li>
</ul>
</div>
</div>