Landing
深度 Bento 网格
具有分层卡片、氛围发光和错开滚动显现的 bento 网格。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度advanced
英文提示词
Create a dark-mode bento feature grid with 5 cards of varying sizes arranged in an asymmetric layout. Each card should have a near-black background, a 1px subtle border, and a faint inner glow on hover. Use one large hero card that spans two rows, with a gradient mesh background behind the text. The other cards should include a small label, bold headline, and a one-line description. Add staggered fade-up animations on scroll or load. Typography should be crisp and modern. Use Tailwind CSS. Avoid icons—rely on typography, border, and light for hierarchy.
中文提示词
创建一个深色模式 bento 功能网格,包含 5 张大小不一的卡片,以不对称布局排列。每张卡片使用近黑色背景、1px 微妙边框,悬停时有 faint 内发光。使用一张跨两行的大号主卡片,文字后方有渐变网格背景。其他卡片包含小标签、粗体标题和一行描述。添加滚动或加载时的错开淡入上移动画。排版应清晰现代。使用 Tailwind CSS。避免使用图标——依靠字体、边框和光线建立层级。

Overview
一个精致的 bento 网格,使用深度、光线和错开动效替代扁平卡片和通用图标。
Features
- 5 张卡片深色不对称 bento 布局
- 带渐变网格的大号主卡片
- 微妙 1px 边框和悬停内发光
- 错开淡入上移动画
- 以排版驱动层级
- 无图标
Usage
适用于高端或创意落地页的产品功能区域。
Customization
修改 prompt 以:
- 为网格添加光标聚光灯效果
- 更改网格渐变颜色
- 让其中一张卡片包含小型数据可视化
- 为卡片间添加滚动视差偏移