Data Display
用户资料卡片
一个包含封面图、头像、简介、统计和社交链接的资料卡片。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create a user profile card component. Include a cover image placeholder at the top, a large overlapping avatar, user name, role/title, short bio, stats row (followers, following, projects), and social media links. Use shadcn/ui Card, Avatar, and Button components and Tailwind CSS. Make it responsive and add hover effects on interactive elements.
中文提示词
创建一个用户资料卡片组件。顶部包含封面图片占位符、大型重叠头像、用户名、职位/头衔、简短简介、统计行（followers、following、projects）和社交媒体链接。使用 shadcn/ui Card、Avatar 和 Button 组件以及 Tailwind CSS。使其响应式并为交互元素添加悬停效果。
概述
一个用于用户目录、团队页面和社交功能的资料卡片模式。将身份、统计和操作整合在一张紧凑卡片中。
功能特性
- 封面图片占位符
- 重叠头像
- 姓名、职位和简介
- 统计行
- 社交链接按钮
- 悬停效果
- 响应式布局
使用方法
将提示词复制到 v0 或 Cursor 中。用用户资料字段替换模拟数据。
自定义选项
修改提示词以：
- 添加关注/私信操作
- 显示徽章或认证状态
- 包含位置和加入日期
- 扩展为完整资料页面布局