Forms
多步骤向导
一个带进度指示器、步骤验证和导航的多步骤表单向导。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a 3-step wizard for onboarding. Step 1: Account info (name, email). Step 2: Workspace details (workspace name, team size). Step 3: Preferences (theme, notifications). Include a progress stepper at the top, previous/next buttons, step validation before advancing, and a success screen at the end. Use shadcn/ui Card, Button, Input, Select, and Progress components and Tailwind CSS. Persist step data in memory.
中文提示词
创建一个 3 步入职向导。第 1 步:账户信息(姓名、邮箱)。第 2 步:工作区详情(工作区名称、团队规模)。第 3 步:偏好设置(主题、通知)。顶部包含进度步骤条、上一步/下一步按钮、进入下一步前的步骤验证以及最后的成功页面。使用 shadcn/ui Card、Button、Input、Select 和 Progress 组件以及 Tailwind CSS。在内存中持久化步骤数据。

概述
一个将复杂表单分解为可管理步骤的多步骤表单向导。包含验证和进度跟踪。
功能特性
- 3 步入职流程
- 进度步骤条
- 上一步/下一步导航
- 每步验证
- 成功完成页面
- 响应式卡片布局
使用方法
将提示词复制到 v0 或 Cursor 中。将步骤替换为你的入职或结账流程。
自定义选项
修改提示词以:
- 添加步骤摘要审核
- 将数据持久化到 localStorage
- 支持分支逻辑
- 添加步骤间动画过渡