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