PRODUCT LIFECYCLE
候补名单Waitlist
产品未上线时收集邮箱的落地页模块：一个大数字展示已有多少人在等，加一个极简邮箱输入 + 排队进度条。
效果预览
12,048 人已加入
我们会在每周三发放一批内测名额，优先通知先加入的人。
you@email.com加入候补
前 500 名免费用
适合用在哪
产品预热页、内测申请、限量发布的预约。核心是让用户觉得「现在加入有位置优势」。
容易踩的坑
- 人数是写死或虚报的，被发现后严重损害信任，预热反而变成负面口碑。
- 邮箱框不设 type=email，移动端弹出普通键盘，输入困难。
- 提交后只清空输入框不给排位反馈，用户会重复提交多次。
设计提示词 · Prompt
候补名单（Waitlist）：居中卡片，圆角 11px、细描边。第一行是 24-32px 的大数字（用渐变文字），后面紧跟小号的「人已加入」；第二行一行 9.5px 浅灰说明（说什么时候能进、会通知你什么）。表单只有一行：一个占位符为「you@email.com」的输入框 + 一个深色「加入候补」按钮，横向排列，输入框 flex:1。表单下方一条细进度条表示已放出名额比例，配右侧小数（如「前 500 名免费用」）。提交后整块替换为「你排在第 1,204 位」的成功态。
Waitlist: a centered card with 11px radius and a thin border. The first row is a 24-32px big number (in gradient text) immediately followed by a small "people joined"; the second row is a 9.5px light-gray explanation (when they can get in and what you'll notify them about). The form is a single row: an input with placeholder "you@email.com" + a dark "Join waitlist" button, laid out horizontally with the input at flex:1. Below the form, a thin progress bar shows the share of spots released, with a small note on the right (e.g. "First 500 get it free"). After submission, the whole block is replaced by a success state reading "You're #1,204 in line".
常见搭配
同一页面里经常和「候补名单」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-center">
<div class="lc-wait">
<div class="lc-wait__n">12,048<em> 人已加入</em></div>
<p>我们会在每周三发放一批内测名额，优先通知先加入的人。</p>
<div class="lc-wait__f"><i>you@email.com</i><em>加入候补</em></div>
<div class="lc-wait__p"><i><b></b></i><span>前 500 名免费用</span></div>
</div>
</div>