bento-grid-ui

Bento Grid UI

当每个想法都放在自己的格子里，并且这些格子以紧密、规则的网格排列时，页面最容易扫描。

一个由圆角单元格组成的矩形网格，单元格跨越不同的行列数，每个单元格包含一个想法，单元格之间具有相等的小间距。Apple 功能页面使其自 2022 年起成为默认的产品布局。

时期： 2022–至今 · 时代： 当代与空间 · 领域： 图形与 UI 设计 · 别称： Bento 布局、Bento Box 网格、模块化卡片网格

何时加载此技能

当用户要求以下内容时加载：“bento”、“bento grid”、“bento box layout”、“card grid”、“feature grid”、“modular cards”、“apple-style features”、“tiled layout”、“dashboard tiles”。

适用于：产品功能页面、SaaS 落地页、个人作品集、应用仪表盘、发布说明页面。

不要使用的情况：

• 内容为长篇散文时，因为每个单元格最多 30 个词会破坏论点的连贯性。
• 项目有严格的顺序或排名，读者必须从上到下阅读时。
• 内容不均或稀疏时，因为少于 5 个单元格的网格会留下明显的空洞。

系统指令

当以 Bento Grid UI 风格生成 UI 或图形布局时，你必须：

1. 将页面划分为 4 列或 12 列的网格，让每个单元格跨越 1、2 或 3 列以及 1 或 2 行。
2. 在所有单元格之间保持一个 12px 到 16px 的统一间隙，并且绝不混合间隙大小。
3. 为每个单元格设置 20px 到 28px 的圆角，并在页面的所有单元格上使用相同的圆角半径。
4. 在每个单元格中放入一条信息：一个最多 8 个词的标题、一个视觉元素或一个数字。
5. 让功能单元格为 2x2，并用 1x1 或 2x1 填充其他单元格，这样大小能体现重要性顺序。
6. 用同一色系的 2 到 4 种色调填充单元格，再加上一到两个强调色的单元格。
7. 将单元格内容对齐到相同的内边距 24px，并将文本锚定在左上角或左下角。

护栏

以下每一点都会破坏风格。在返回输出之前，请对照列表检查。

• 绝不： 一个网格中单元格之间的间隙大小不同。
• 绝不： 网格中出现破坏矩形的空洞。
• 绝不： 一个页面上有不同圆角半径的单元格。
• 绝不： 一个单元格中包含多条信息或号召性用语。
• 绝不： 第一个视口中超过 8 个单元格。
• 绝不： 使用厚重的边框或硬阴影，这会破坏平铺效果。
• 绝不： 单元格内包含超过 30 个词的段落。

向量特征

轴	分数	1 分意味着	5 分意味着
装饰性	■■□□□ 2/5	纯粹极简	极繁主义
维度感	■■□□□ 2/5	严格 2D	完全 3D/空间
网格刚性	■■■■■ 5/5	混乱/有机	严格的数学网格
拟物写实	■■□□□ 2/5	抽象数字	照片级材质
排版表现力	■■■□□ 3/5	中性/隐形	实验性/说明性

保持这些分数。如果某个请求将任何轴移动了 2 分或更多，则你已经偏离了该风格：请转到“风格退化后备”。

空间与网格逻辑

• 网格机制： 桌面端为 4 列网格，间隙 16px，行高 200px 到 280px；单元格跨越 1 到 3 列和 1 到 2 行；在 768px 以下时网格收缩为 1 或 2 列。
• 空白比例： 间隙占 5–8% 的面积；开放空间转移到单元格内部，内边距为 24px 到 32px；间距尺度为 8、12、16、24、32 和 64px。
• 对齐规则： 单元格边缘在两个轴上对齐到网格；单元格内的文本左对齐并锚定到顶部或底部；整个 bento 块在宽度为 1120px 到 1280px 的容器中居中。
• 容器几何： 单元格是圆角矩形，半径 24px，无外边距；单元格宽高比为 1:1、2:1 和 1:2，内部的视觉元素裁剪到相同的半径。

排版

• 分类： 新无衬线体 · 几何无衬线体
• 字间距： 显示大小取 -0.03em；正文保持 0；小标题取 +0.01em。
• 行高： 显示 1.05 到 1.15；正文 1.45；标题 1.3。
• 层次规则：
  • 功能单元格标题设为 40px 到 56px，其他标题设为 20px 到 28px，标题设为 14px。
  • 标题使用字重 600，标题使用 400；副文本使用对比度为 4.5:1 的柔和颜色。
  • 标题限制在 8 个词以内，标题限制在 20 个词以内，因为单元格空间有限。
  • 将 64px 或更大的大数字与每个关键指标的 14px 标题配对。

字体搭配

显示字体	正文字体	备注
Inter Tight	Inter	适合短单元格标题的紧凑显示大小。
Geist	Geist	单一字体族，使用 400、500 和 600 字重。
Plus Jakarta Sans	Inter	适合消费类产品的更温暖显示字体。

色彩与光照

• 调色板结构： 中性页面，以低饱和度的 2 到 4 种同色系色调填充单元格，以及一到两个覆盖大约 15% 网格的强调色单元格。
• 对比规则： 墨水色在单元格上约为 17:1，石墨色在单元格上约为 5:1；白色文本在强调蓝上约为 4.7:1，满足 WCAG AA 正文文本要求；保持每对单元格的对比度为 4.5:1 或更高。
• 表面处理： 纯色或近乎纯色的填充；单元格可以包含照片、产品渲染图或两种相近色调的渐变，并且一个单元格从不混合超过一种表面类型。
• 光照与阴影： 大多无阴影；可选的 0 1px 2px rgba(0, 0, 0, 0.06) 阴影或 1px border of rgba(0, 0, 0, 0.06) 用于将白色单元格与页面分离。

调色板

名称	十六进制	角色
页面	#F5F5F7	页面背景
单元格	#FFFFFF	默认单元格填充
单元格色调	#E8E8ED	次单元格填充
墨水色	#1D1D1F	文本
石墨色	#6E6E73	副文本
强调蓝	#0071E3	强调色单元格和链接
夜色	#000000	深色单元格填充

材质与纹理

• 表面模拟： 无；单元格读作涂漆午餐盒的隔间，但表面是纯色或图像，不模仿任何材质。
• 边框规则： 默认无边框；当白色单元格位于白色页面上时，使用 1px solid rgba(0, 0, 0, 0.06) 边框；深色模式使用 1px rgba(255, 255, 255, 0.1)。
• 模糊与层级： 默认模糊为 0px；层级限制为页面上的 0 1px 2px 阴影和悬停时的 0 12px 32px rgba(0, 0, 0, 0.12) 提升。

装饰与图标

• 图标： 简单图标，描边 1.5px 到 2px，圆头端点，尺寸 24px 到 32px，使用墨水色或白色（在强调色单元格上）；每个单元格最多一个图标。
• 插图： 产品渲染图、UI 截图和大数字，裁剪到单元格圆角；抽象渐变填充空白单元格。
• 装饰元素： 2x2 功能单元格 · 超大指标数字 · UI 截图裁剪 · 药丸标签 · 渐变单元格

运动与交互

• 源于屏幕： 是
• 过渡物理： 单元格以 40ms 到 60ms 的间隔入场，淡入并向上移动 12px；悬停时单元格缩放到 1.02，阴影加深；相邻单元格不移动。
• 缓动函数： cubic-bezier(0.25, 0.1, 0.25, 1)
• 持续时间（毫秒）： 350
• 悬停与激活： 悬停将单元格缩放到 1.02 并添加 0 12px 32px rgba(0, 0, 0, 0.12) 阴影；激活缩放到 0.98；焦点添加 2px 强调蓝环，偏移 2px。

代码与令牌入门

在根元素上设置 data-style="bento-grid-ui" 并粘贴令牌。文件 tokens.css 包含相同的令牌和一组参考规则。

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Tailwind 模式：

元素	类名
页面	bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8
网格	mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]
卡片	rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]
功能卡片	rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2
标题	font-semibold text-2xl leading-[1.1] tracking-[-0.03em]

视觉包

此风格的图片和图标是文件。按原样使用它们，或者将它们作为规范，用相同的语言绘制你自己的版本。

文件	内容
pack/hero.svg	Hero 面板，800 x 600。以该风格的视觉语言绘制的抽象图片。
pack/pattern.svg	图案平铺，80 x 80。双向重复。
pack/icons.svg	图标精灵：home、search、heart、star、bell、user、mail、calendar、image、bolt、play、check、close、sliders。

• 图标： 轮廓线，24px 画布上描边 1.75，圆头端点，圆角连接，容器：圆角。使用：<svg class="icon"><use href="pack/icons.svg#home"/></svg>。图标采用 currentColor。
• 图标家族： 精灵图取自 Lucide (Regular) by Lucide Contributors，许可证 ISC。原因：单一字重的纯圆线：在单元格中安静，是目前产品界面的默认选择。它是一个用于演示的开源替代品。对于产品，使用品牌的图标库，并按照以下规则选择家族。
• 显示类型： 字重 600，字间距 -0.03em，行高 1.05，大小写：无。
• 字重： 显示 600，副标题 500，正文 400，粗体文本 600，标签和按钮 500。该风格使用 3 个字重（400、500、600），没有其他字重。显示字重比正文重 200。强调通过大小实现：较大的词就是强调，因此字重保持较少。
• 正文字体： 16px，行高 1.5。
• 页面： hero 堆叠，左对齐，紧凑密度，强调倾斜 0°。
• 文本颜色： --color-text 仅用于主要阅读区域。在每个区域上，使用其对应的令牌：--color-on-bg、--color-on-surface、--color-on-primary、--color-on-accent。

如何选择图标包

图标包是图片的字体。选择时要像选择文本字体一样谨慎。以下规则适用于开源集合和许可库。

1. 描边匹配字干。 将图标放在正文大小的文本旁边。图标的线条与字母的字干应具有相同的粗细。
2. 端点和角遵循圆角令牌。 平头端点与斜角连接配合半径为零。圆头端点与圆角连接配合柔和的半径。
3. 填充模式遵循时代技术。 印刷时代裁剪实体形式。屏幕时代通过深度填充和阴影为形式着色。当前产品界面绘制轮廓。
4. 隐喻不晚于风格时代。 每张图片都是该时代已知的对象。使用后来隐喻的图标会破坏时代感。
5. 一个家族，一个网格。 所有图标来自一个家族和一个变体，绘制在一个画布上。不要在一个表面上混合家族。
6. 家族覆盖产品需求。 在承诺之前，列出产品需要的每个概念。缺少其中任何一个图标的家族就是错误的家族。
7. 颜色是令牌。 图标采用 currentColor。第二种颜色来自令牌，而不是来自文件。
8. 许可证允许使用。 阅读该集合的许可证。在许可证要求的地方注明出处。带有品牌的产品使用其许可库，并应用相同的规则来选择家族。

风格退化后备

当用户要求变体时，不要即兴创作。转向此处命名的相邻风格，并加载其技能。

• 如果用户要求更有序：转向 swiss-international（瑞士国际风格）。将圆角设为 0px，移除单元格填充并用 1px 规则分隔单元格；保留 12 列网格和字体尺度。

• 如果用户要求更玻璃感：转向 glassmorphism（玻璃态）。使用 rgba(255, 255, 255, 0.18) 填充单元格，并在渐变页面上使用 backdrop-filter blur(20px)；保留间隙和圆角。

• 如果用户要求更大胆：转向 neo-brutalism-ui（新粗野主义 UI）。添加 3px 黑色边框和 4px 4px 0 0 #000000 阴影，并使用响亮纯色填充单元格；保留网格和 16px 间隙。

• 如果用户要求更扁平：转向 flat-design（扁平设计）。移除阴影和边框，使用纯色单元格填充，不使用摄影图片；保留 24px 圆角和间隙。

• 来源于（如需更正统的版本，请前往）： flat-design、swiss-international

• 搭配良好： glassmorphism、swiss-international

• 向量特征最近似： bauhaus、material-design、swiss-international

情感目标

有序的好奇心：观看者感觉产品组织有序、紧凑，并且可以在几秒钟内轻松扫描。

关键词

…

[已截断供翻译]