Bento Grid
便当盒网格
源自日式便当盒的非对称模块化网格，通过卡片高低宽窄的拼图组合展示特性。
Live Demo
真的可以点智能交互模式解构
将界面需求拆分为三层高可用提示词。
静态纯净无运行时。
高对比色彩校验。
你刚才看到的这个：苹果发布会或现代科技官网：左上一块大黑色卡片展示核心芯片架构，右上是两块小浅色卡片展示续航与接口，底部是一条横向长条卡片展示生态联动。
它到底是什么
Bento Grid 打破了传统等宽等高卡片的死板感。它借鉴便当盒将主菜、配菜、米饭划分不同规格格子的思路，让最重要的核心卖点占据大尺寸格子（如 2x2 或 2x1），次要功能分布在周围小格子中，既有强烈的视觉节奏与聚焦，又保持了整体外轮廓的整齐划一。
Anatomy · 它由什么组成
Hero Tile主角大卡片
占据 2 列或 2 行的核心焦点
Supporting Tiles辅助小卡片
1x1 标准规格展示细节
Wide Tile横向通栏卡片
跨越整行展示全景或图表
Uniform Radius & Gap统一圆角与间距
外边缘整齐闭合的关键
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 产品核心功能与特性矩阵展示（Features Section） | 用 |
| 功能之间有明确的主次层级、权重差异 | 用 |
| 需要呈现高端、现代、科技感的设计语言 | 用 |
| 数据结构完全同构的大规模数据列表（更适合普通表格或分页列表） | 不用 |
| 高度不定、动态自增的 UGC 用户评论或图片流（更适合瀑布流） | 不用 |
强行把 10 个权重完全相同的普通表单选项塞进便当盒，显得杂乱无章。
在移动端未做单列折叠回退，导致小卡片在手机屏幕上被挤压变形字体重叠。
Similar Patterns
别搞混Bento Grid当前
便当盒网格
源自日式便当盒的非对称模块化网格，通过卡片高低宽窄的拼图组合展示特性。
Masonry Grid
瀑布流
元素宽度一致、高度不等的错落多列流式布局，多用于富图片社区与图文卡片。
一句话区分：源自日式便当盒的非对称模块化网格，通过卡片高低宽窄的拼图组合展示特性。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
使用 Bento Grid 布局展示 4 个功能：第 1 个是 2 列宽的核心卡片（带动态图表），第 2、3 个是 1 列的小卡片，第 4 个横向占满底部两列。统一圆角 16px、浅灰微描边。
不要只对 AI 说
Bad → Better不要这样对 AI 说
排几个大小不一样的卡片。
改成这样说
用 Bento Grid 布局呈现特性：grid-cols-1 md:grid-cols-3 gap-4，核心亮点卡片设置 col-span-2 row-span-2 承载大截图，周边小卡承载指标与微图标，移动端折叠为单列。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。