Landing
电商产品卡片
一个包含图片、标题、价格、评分、徽章和快速加入购物车按钮的产品卡片。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create an e-commerce product card. Include a product image placeholder, title, brand label, star rating with review count, price with optional original price strikethrough, discount badge, and an "Add to cart" button. Use shadcn/ui Card, Button, and Badge components and Tailwind CSS. Add hover image zoom and button reveal effects. Make it responsive for product grids.
中文提示词
创建一个电商产品卡片。包含产品图片占位符、标题、品牌标签、星级评分和评论数、价格及可选的原价删除线、折扣徽章和 "Add to cart" 按钮。使用 shadcn/ui Card、Button 和 Badge 组件以及 Tailwind CSS。添加悬停图片缩放和按钮显示效果。使其适用于产品网格并响应式。
概述
一个面向转化的电商网格产品卡片。展示关键产品信息和清晰的加购操作。
功能特性
- 悬停缩放的产品图片
- 标题和品牌
- 星级评分和评论数
- 促销价和原价删除线
- 折扣徽章
- 加入购物车按钮
- 响应式网格尺寸
使用方法
将提示词复制到 v0 或 Cursor 中。在产品列表网格中使用。
自定义选项
修改提示词以：
- 添加颜色/尺寸色板
- 显示心愿单心形图标
- 添加快速查看弹窗触发
- 显示库存状态徽章