Pricing
粗野主义定价卡片
高对比度定价卡片,粗边框、硬阴影、等宽字体和原始布局张力。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a brutalist pricing card. Use a white or off-white background with a 3-4px solid black border and a hard 8px black shadow offset down-right. Typography should be mostly monospace or a grotesque sans-serif, with a giant price number, a small all-caps plan name, and a bulleted feature list using arrow symbols instead of checkmarks. Add a raw "BEST VALUE" tape-style banner in black with white text, rotated slightly. The CTA button should be black with white uppercase text and no border-radius. On hover, the card shifts 4px up-left and the shadow moves closer. Use Tailwind CSS. No gradients, no soft shadows.
中文提示词
创建一个粗野主义定价卡片。使用白色或米白色背景,3-4px 纯黑实线边框,以及向右下方偏移的 8px 硬黑阴影。排版主要使用等宽字体或怪诞无衬线:巨大的价格数字、小字号全大写套餐名、使用箭头符号而非勾选标记的项目列表。添加一条原始的 "BEST VALUE" 胶带式横幅,黑底白字,稍微旋转。CTA 按钮应为黑底白字大写文本,无圆角。悬停时卡片向左上方移动 4px,阴影靠近。使用 Tailwind CSS。不使用渐变和柔和阴影。

Overview
一张原始而有个性的定价卡片,摒弃柔和渐变,采用高对比度、硬边和字体态度。
Features
- 粗黑边框和硬偏移阴影
- 等宽/怪诞无衬线字体
- 巨大价格数字
- 全大写套餐名
- 箭头符号功能列表
- 旋转胶带横幅
- 零圆角 CTA
- 悬停位移和阴影变换
Usage
适用于独立产品、创意工具或希望呈现反企业、自信定价风格的品牌。
Customization
修改 prompt 以:
- 反转为黑底白边框
- 在旁边添加第二张卡片用于对比
- 使用手绘风格边框替代完美直线
- 添加划掉的原始价格