PRICING
三档定价Three-tier Pricing
左中右三张价卡：入门 / 推荐（深色凸起）/ 旗舰。中间那张永远卖得最好。
效果预览
入门
¥0/月
3 个项目 · 1 个自动化流
★ 最受欢迎
¥68/月
无限项目 · 优先渲染 · 团队协作
旗舰
¥198/月
私有部署 · 专属客服 · SSO
适合用在哪
SaaS 订阅页、会员体系、服务套餐页。定价页的默认形态。
容易踩的坑
- 推荐档上移 12-16px 后移动端纵向堆叠仍保留位移，卡片之间出现重叠。
- 移动端堆叠顺序未调整，推荐档排在第二张，多数用户滑不到就离开了。
- 三档功能清单条数不一致导致按钮不齐，应让按钮贴底对齐方便横向比较。
设计提示词 · Prompt
三档定价（Three-tier Pricing）：三张卡横排（移动端纵向堆叠），中间"推荐档"视觉突出——深色底 + 渐变描边 + 上移 12-16px + "最受欢迎"徽章，两侧卡片刻意做素。每张卡结构：档位名（大写小字）→ 价格（大数字 + /月小字）→ 一句档位定位 → 功能清单（✓ 前缀，5-7 条，两档差异要明显）→ 全宽按钮（推荐档实心、两侧描边）。三档价格锚定：中间档设计成"性价比最优解"，高档位的存在是为了让中档显得便宜。功能清单里放"对方没有我有"的条目最有说服力。
Three-tier Pricing: three cards side by side (stacked vertically on mobile), with the middle "recommended tier" visually emphasized — dark background + gradient border + lifted 12-16px + a "Most Popular" badge, while the two side cards are deliberately plain. Each card's structure: tier name (small uppercase) → price (large number + small "/mo") → one-line tier positioning → feature list (✓ prefix, 5-7 items, with clear differences between tiers) → full-width button (solid on the recommended tier, outlined on the sides). Price anchoring across the three tiers: design the middle tier as the "best value" choice; the high tier exists to make the middle one look cheap. Items in the feature list that "they don't have but we do" are the most persuasive.
常见搭配
同一页面里经常和「三档定价」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-tier">
<div class="d-tier__card">
<span class="d-tier__name">入门</span>
<span class="d-tier__price">¥0<small>/月</small></span>
<span class="d-tier__feat">3 个项目 · 1 个自动化流</span>
<button class="d-tier__btn">免费开始</button>
</div>
<div class="d-tier__card d-tier__card--hot">
<span class="d-tier__name">★ 最受欢迎</span>
<span class="d-tier__price">¥68<small>/月</small></span>
<span class="d-tier__feat">无限项目 · 优先渲染 · 团队协作</span>
<button class="d-tier__btn">开始 14 天试用</button>
</div>
<div class="d-tier__card">
<span class="d-tier__name">旗舰</span>
<span class="d-tier__price">¥198<small>/月</small></span>
<span class="d-tier__feat">私有部署 · 专属客服 · SSO</span>
<button class="d-tier__btn">联系销售</button>
</div>
</div>