PRODUCT LIFECYCLE
付费墙Paywall
被锁的内容虚化显示，上方浮出锁标记 + 升级说明 + 按钮。让用户先看到「我错过了什么」，再谈付费。
效果预览
🔒
解锁批量导出
升级后可使用全部 12 个高级模板
适合用在哪
免费版访问高级功能、超过额度时的拦截、内容平台的会员专享。
容易踩的坑
- 虚化内容仍完整存在于 DOM，查看源码就能读到全文，付费形同虚设。
- 遮罩挡住整屏却没有关闭或返回入口，用户只能离开页面，跳出率飙升。
- 模糊层叠在长文上，低端手机滚动时 blur 重绘明显卡顿。
设计提示词 · Prompt
付费墙（Paywall）：底层真实内容保留但 filter:blur(2.4px) 且 opacity:.5，让用户看得出后面有东西。上方盖一层从透明到纯白的纵向渐变（rgba(255,255,255,.4) → #fff 62%），中央偏下放锁徽章（26-40px 圆形渐变底 + 白色锁图标 + 同色阴影）、11-13px 加粗标题（说清解锁得到什么，不要写「升级到专业版」这种内部语言）、以及一个主按钮。文案必须具体：把「解锁全部功能」换成「解锁批量导出与 10 个协作席位」。不要一次弹两个墙。
Paywall: keep the real underlying content but apply filter:blur(2.4px) and opacity:.5 so users can tell there's something behind it. Overlay a vertical gradient from transparent to solid white (rgba(255,255,255,.4) → #fff 62%). Slightly below center, place a lock badge (26-40px circle with a gradient background, a white lock icon and a same-color shadow), an 11-13px bold title (spell out what unlocking gives — avoid internal language like "Upgrade to Pro"), and one primary button. Copy must be specific: replace "Unlock all features" with "Unlock bulk export and 10 collaborator seats". Never show two walls at once.
常见搭配
同一页面里经常和「付费墙」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-paywall">
<div class="lc-paywall__bg">
<div class="lc-paywall__blk"></div><div class="lc-paywall__blk"></div>
<div class="lc-paywall__blk"></div><div class="lc-paywall__blk lc-paywall__blk--s"></div>
<div class="lc-paywall__blk"></div><div class="lc-paywall__blk lc-paywall__blk--s"></div>
</div>
<div class="lc-paywall__lock">
<div class="lc-paywall__badge">🔒</div>
<b>解锁批量导出</b>
<span>升级后可使用全部 12 个高级模板</span>
<button class="d-btn d-btn--p d-btn--sm" style="margin-top:2px">升级查看</button>
</div>
</div>
</div>