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