PRICING
免费增值卡Freemium Card
免费档也要认真做一张卡——它是付费版的"广告位"和信任起点。
效果预览
免费开始¥0
不需要信用卡，注册即用。升级随时可以。
适合用在哪
SaaS 定价页、开发者工具、任何免费增值模式的产品。
容易踩的坑
- 免费卡的限制只写在底部 11px 灰字里，用户注册后才发现被卡住而产生被骗感。
- 浅绿渐变底上的描边按钮对比度低于 3:1，看起来像禁用状态。
- 免费版功能清单比付费档还长，用户觉得免费已够用，付费转化被稀释。
设计提示词 · Prompt
免费增值卡（Freemium Card）：浅绿渐变底卡片（与付费卡区分气质）——"免费开始"标题 + 大字 ¥0 + 免费版包含的 3-4 项真实能力 → "无需信用卡"微文案 → 描边按钮（不是实心——不能比付费版的按钮更显眼，但也不能点不动）。底部一行小字显示免费版限制（"3 个项目 · 社区支持"）。设计原则：免费卡真诚、付费卡华丽——免费是入口不是终点，但入口体验差一切白搭。
Freemium Card: a card with a light green gradient background (distinct in tone from paid cards) — a "Start free" title + a large ¥0 + 3-4 real capabilities included in the free plan → "No credit card required" microcopy → an outlined button (not solid — it must not be more prominent than the paid plans' buttons, but it also can't feel unclickable). A small line at the bottom states the free plan's limits ("3 projects · Community support"). Design principle: free card sincere, paid cards lavish — free is the entrance, not the destination, but if the entrance experience is bad, nothing else matters.
常见搭配
同一页面里经常和「免费增值卡」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-freemium"> <div class="d-freemium__row"><b>免费开始</b><span class="d-tier__price">¥0</span></div> <p>不需要信用卡，注册即用。升级随时可以。</p> <div class="d-freemium__bar"><span>3 个项目</span><span>1 个自动化流</span><span>社区支持</span></div> <button class="d-btn d-btn--g d-btn--block" style="margin-top:3px">免费注册</button> </div>