小界面步骤卡 <UiSteps />

三张圆角步骤卡，每张上半是一个小界面（输入框、选项胶囊或完成提示），下半是步骤号、标题和说明。

分组: 操作 · 三步上手
组件: UiSteps · #ui-steps

适合

上手、设置、新建这类三步流程
每一步都能画成一个简单的界面动作

不适合

步骤带命令且超过 3 步：用 StepTrack
步骤没有先后：用 NumberedColumns

内容上限

1	steps 正好 3 步：title ≤ 8 字，text ≤ 36 字
2	ui: field（label ≤ 10 字，value ≤ 24 字符）/ options（2–4 个，各 ≤ 8 字符）/ done（≤ 14 字）

字段

字段	类型
`kicker` · 必填	`string`	小节名，2–8 字
`title` · 必填	`string \| string[]`	标题；数组手动断行
`lead`	`string`	一两句导语，≤ 60 字
`source`	`string`	事实出处
`steps` · 必填	`[UiStep × 3]`	步骤与小界面

示例代码

<UiSteps kicker="新建演示" title="三步，从空目录到 PASS" steps={[{ title: '建目录', text: '…', ui: { kind: 'field', label: '演示文件', value: 'src/decks/demo/index.tsx' } }, …]} />