用途：这是 HyperFrames 组合中 steps 步骤幻灯片的专用技能。当需要展示有顺序的流程，或说明工作流、管道、操作步骤时使用；与 evolution-flow 不同，它适合 3 个以上阶段。
主要能力：提供步骤幻灯片的 HTML 结构、CSS 与 GSAP 入场动画方案。结构使用带 id="s-N" 的 .scene.clip 容器，内含 .eyebrow、.scene-title 和 ol.steps；每个 li.step 内由 .step-num 圆形序号标记与 .step-body 正文组成。CSS 关键：.steps 使用 list-style: none、flex 纵向排列、gap 28px、margin-top 56px、position: relative；.step 使用 flex 横向对齐、gap 32px；.step-num 为 72×72、border-radius 50%、flex-shrink 0 的圆形标记；.step-body 字号 38–44px、字重 500、行高 1.4；连接线由 .steps::before 生成左侧竖线，content 为空、position: absolute、left 36px、top 36px、bottom 36px、width 2px。
使用方式：用 GSAP 时间线按 start 时间依次入场，.eyebrow 用 y: -15、opacity: 0、duration 0.5、ease "power3.out"；.scene-title 用 y: 40、opacity: 0、duration 0.7、ease "expo.out"；各步的 .step-num 用 scale: 0、opacity: 0、duration 0.5、ease "back.out(1.7)"；.step-body 用 x: 20、opacity: 0、duration 0.5、ease "power2.out"。序号圆与正文形成交叉节奏；连接线也可用 scaleY: 0 到 1、transformOrigin: top 呈现。
适用场景与检测：构建生成器时，Markdown 中以 1. 2. 的编号列表可识别为 steps，与无序列表 title-bullets 区分。选择规则：顺序重要的分步流程用 steps，无序罗列用 title-bullets，两个状态对比（before/after）用 evolution-flow。
限制与原则：建议 3–5 个步骤，每步文字保持一行简短；顺序不重要时不应用 steps。资料未提供安装命令、平台支持范围、收费或价格信息。