FORM & INPUT
分步表单Multi-step Wizard
长表单拆成几步，顶部步骤条显示进度，每步只问 3-5 个问题。
效果预览
✓
2
3
第 2 步 · 设置团队空间
邀请同事，或者之后再说。
输入邮箱邀请成员…
适合用在哪
注册引导、结账流程、贷款申请、问卷；字段超过 10 个就该拆步。
容易踩的坑
- 返回上一步时已填数据被清空，用户被迫重填，流失率陡增。
- 下一步按钮不先校验当前步，到最后提交才集中报错，用户找不到出错字段。
- 切换步骤后焦点不移到新步骤标题，键盘和读屏用户停留在已消失的按钮上。
设计提示词 · Prompt
分步表单（Multi-step Wizard）：顶部横向步骤条——已完成步骤（品牌实心圆 + 对勾）、当前步骤（品牌实心圆 + 外圈 3px 12% 光晕）、未来步骤（灰圆 + 数字），圆点之间用 2px 进度条连接（已走部分品牌色填充）。每步只放 3-5 个字段 + 底部"上一步（幽灵）/ 下一步（实心）"双按钮。切换步骤时内容面板做 200ms 横向滑动过渡。最后一步的提交按钮文案改为具体动作（"确认支付 ¥299"），比"提交"转化率高。
Multi-step Wizard: horizontal stepper at the top — completed steps (solid brand circle + checkmark), current step (solid brand circle + outer 3px 12% glow), future steps (gray circle + number); circles are connected by a 2px progress bar (the traversed part filled with brand color). Each step holds only 3-5 fields + a pair of buttons at the bottom: "Back (ghost) / Next (solid)". When switching steps the content panel does a 200ms horizontal slide transition. On the last step the submit button label becomes a concrete action ("Confirm payment ¥299"), which converts better than "Submit".
常见搭配
同一页面里经常和「分步表单」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-wizard">
<div class="d-wizard__steps">
<span class="d-wizard__dot is-done">✓</span><span class="d-wizard__bar"><i></i></span>
<span class="d-wizard__dot is-cur">2</span><span class="d-wizard__bar"></span>
<span class="d-wizard__dot">3</span>
</div>
<div class="d-wizard__panel">
<b>第 2 步 · 设置团队空间</b>
<span>邀请同事，或者之后再说。</span>
<div class="d-input d-input--focus" style="margin-top:3px"><span class="d-input__ph">输入邮箱邀请成员…</span></div>
</div>
</div>