步骤条（Stepper）是什么：效果预览与 AI 设计提示词

效果预览

✓ 2 3 4

购物车配送支付完成

适合用在哪

结账流程、多步表单、引导流程、物流跟踪。

容易踩的坑

步骤超过 5 个仍横向排列，移动端标签挤压换行，节点与文字对不齐。
当前步骤只靠品牌色标记，未加 aria-current="step"，读屏用户不知道进行到哪一步。
未完成的步骤也允许点击跳转，用户跳过必填步骤到最后才发现无法提交。

设计提示词 · Prompt

步骤条（Stepper）：横向排列的节点（20-24px 圆）+ 节点间 2px 连接线。三态——已完成：品牌实心底白字对勾、连接线品牌色实线；当前：白底品牌色描边圆环 + 外圈 3px 12% 光晕；未到：灰底灰字数字。节点下方放步骤短标签，当前标签品牌色加粗。移动端简化为"第 2 步，共 4 步"文字 + 一条分段进度条。步骤可点击回跳已完成步骤（未到的不可点）。

Stepper: horizontally arranged nodes (20-24px circles) + 2px connecting lines between nodes. Three states — completed: solid brand background with a white checkmark, connecting line as a solid brand-color line; current: white background with a brand-color ring border + outer 3px 12% glow; upcoming: gray background with a gray number. Short step labels sit below the nodes, with the current label bold in brand color. On mobile, simplify to the text "Step 2 of 4" + a segmented progress bar. Users can click to jump back to completed steps (upcoming ones are not clickable).

常见搭配

同一页面里经常和「步骤条」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

分步表单Multi-step Wizard 上手清单Onboarding Checklist 面包屑导航Breadcrumbs

演示 HTML 结构

<div class="s d-stepwrap">
  <div class="d-stepper">
    <span class="d-stepper__dot d-stepper__dot--done">✓</span>
    <span class="d-stepper__line d-stepper__line--done"></span>
    <span class="d-stepper__dot d-stepper__dot--cur">2</span>
    <span class="d-stepper__line"></span>
    <span class="d-stepper__dot d-stepper__dot--todo">3</span>
    <span class="d-stepper__line"></span>
    <span class="d-stepper__dot d-stepper__dot--todo">4</span>
  </div>
  <div class="d-stepper__labels"><span>购物车</span><span>配送</span><span>支付</span><span>完成</span></div>
</div>