Forms
设置页面
使用标签页组织的完整账户设置页面,包含个人资料、通知和安全设置。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create an account settings page with three tabs: Profile, Notifications, and Security. Profile tab includes avatar upload, name, email, and bio fields. Notifications tab has toggles for email, push, and marketing alerts. Security tab has current password, new password, and 2FA toggle. Use shadcn/ui Tabs, Card, Switch, Input, Button, and Avatar components and Tailwind CSS. Make it responsive and accessible.
中文提示词
创建一个账户设置页面,包含三个标签:Profile、Notifications 和 Security。Profile 标签包含头像上传、姓名、邮箱和简介字段。Notifications 标签包含邮件、推送和营销通知的开关。Security 标签包含当前密码、新密码和双因素认证开关。使用 shadcn/ui Tabs、Card、Switch、Input、Button 和 Avatar 组件以及 Tailwind CSS。使其响应式且可访问。

概述
一个完整的设置页面模式,涵盖个人资料、通知偏好和安全设置。使用标签页组织内容,避免让用户感到不知所措。
功能特性
- 设置分类的标签页布局
- 带头像上传占位符的个人资料
- 通知开关切换
- 密码更改和双因素认证开关
- 可访问的表单标签和聚焦状态
- 响应式设计
使用方法
将提示词复制到 v0 或 Cursor 中。将表单连接到你的用户 API 和认证提供方。
自定义选项
修改提示词以:
- 添加账单/订阅标签
- 包含团队/组织设置
- 添加外观/主题偏好
- 添加账户删除危险区域