Pricing
定价表
一个以转化为目标的定价区域，包含 3 个套餐、月付/年付切换和功能对比。
作者：mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度beginner
英文提示词
Create a pricing section with 3 tiers: Basic, Pro, and Enterprise. Include a monthly/yearly toggle at the top with a "Save 20%" badge for yearly. Each card should show plan name, price, feature list with checkmarks, and a CTA button. Highlight the middle tier as "Most Popular" with a larger shadow and accent border. Use shadcn/ui Card and Button components and Tailwind CSS. Make it fully responsive and add hover lift effects.
中文提示词
创建一个包含 3 个套餐的定价区域：Basic、Pro 和 Enterprise。顶部包含月付/年付切换，年付显示 "Save 20%" 徽章。每张卡片显示套餐名称、价格、带勾选标记的功能列表和 CTA 按钮。中间套餐突出显示为 "最受欢迎"，使用更大的阴影和强调色边框。使用 shadcn/ui Card 和 Button 组件以及 Tailwind CSS。使其完全响应式并添加悬停提升效果。
## 概述
一个旨在提升转化的定价表。清晰区分不同套餐，并引导用户选择主推方案。
## 功能特性
- 3 个具有清晰层级的定价套餐
- 月付/年付账单切换
- "最受欢迎" 高亮套餐
- 带勾选标记的功能列表
- 响应式卡片布局
- 悬停提升动画
## 使用方法
将提示词复制到 v0 或 Cursor 中。替换套餐名称、价格和功能以匹配你的产品。
## 自定义选项
修改提示词以：
- 在卡片下方添加对比表格
- 包含免费试用徽章
- 添加企业版 "联系销售" CTA
- 切换到深色主题