HERO SECTION
邮箱招募首屏Email Capture Hero
首屏只做一件事——收邮箱。输入框和按钮被包进同一个圆角容器里，像一颗胶囊。
效果预览
每周一封
只讲有用的
4,000+ 独立开发者已订阅
适合用在哪
产品未上线阶段的 Waitlist、Newsletter 落地页、内测招募。
容易踩的坑
- 输入框没有关联 label 只靠 placeholder，读屏用户不知道要填什么，输入后提示也消失。
- 未设置 type="email" 和 autocomplete="email"，移动端弹出普通键盘且无法自动填充。
- 提交失败时只把边框变红而不给文字原因，用户不知道是格式错还是已注册。
设计提示词 · Prompt
邮箱招募首屏（Email Capture Hero）：把 input 和 button 包进同一个白色圆角容器（圆角 14-16px、1px 描边、内边距 4-6px），输入框无边框透明底，按钮嵌在右侧成为"内嵌按钮"（Inset Button）。容器宽度限制在 420-480px。上方是 40-56px 标题 + 一行副文案，下方 12px 处是极小的隐私说明（"不发广告，随时退订"）。提交后按钮原地切换为勾选状态并显示"已加入，请查收邮件"。
Email Capture Hero: wrap the input and button inside one white rounded container (14-16px radius, 1px stroke, 4-6px padding); the input is borderless with a transparent background, and the button sits on the right as an "Inset Button". Limit the container width to 420-480px. Above it, a 40-56px headline + one line of supporting copy; 12px below it, a tiny privacy note ("No spam, unsubscribe anytime"). After submission, the button switches in place to a checkmark state and shows "You're in — check your inbox".
常见搭配
同一页面里经常和「邮箱招募首屏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-hero-email">
<h3 class="d-h2">每周一封<br>只讲有用的</h3>
<p class="d-sub">4,000+ 独立开发者已订阅</p>
<div class="d-hero-email__form">
<input placeholder="you@example.com" readonly>
<button class="d-btn d-btn--p d-btn--sm">订阅</button>
</div>
<span class="d-hero-email__note">不发广告，随时退订</span>
</div>