Bento UI 是一套用于 Web 和 App 的界面实现指南，帮助将内容组织成高度结构化、模块化的分区网格。它被描述为 design-it 技能的子参考，资料明确说明不打算被直接触发，仅在用户请求匹配所述美学时使用。
一、适用场景 当用户想要模块化网格卡片、苹果风格仪表盘样式，或希望各个区块像便当盒一样排列时，可使用本子样式。
二、核心原则
- 严格网格结构：整个 UI 建立在响应式多列网格上，常见为 3x3、4x4 或不规则瀑布流。
- 圆角分区：每个独立内容放在一个卡片内，卡片使用一致且通常较大的圆角。
- 等距间距：分区之间的间隙必须在所有位置完全一致。
三、视觉特征 颜色高度可适配，资料称与 Minimalist Slate 或 Yacht Club 搭配时显得很有高级感；常使用略偏白或浅灰背景让白色分区突出。字体为 Apple 风格，如 SF Pro、Inter；标题通常加粗并放在每个分区的左上角或左下角。视觉素材常依赖高质量、边到边的图片，或在特定网格单元内放置单个大型 3D 图标，以打破纯文字卡片。
四、Web 实现 必须使用 CSS Grid，资料指出 Flexbox 难以维持严格的二维结构。示例中 .bento-container 设为 display: grid、四列 repeat(4, 1fr)、自动行高 200px、gap 24px、padding 24px，背景色使用 var(--bg-primary) 并略深于卡片。.bento-card 使用白色背景、32px 大圆角、32px 内边距、柔和阴影 0 4px 24px rgba(0,0,0,0.04)，可选 1px 细边框，内部用 flex 纵向排列并两端对齐。还提供 .bento-span-2、.bento-span-2-row、.bento-large 等跨格类。
五、App 实现 SwiftUI 使用 ScrollView 与 LazyVGrid，定义两列 flexible 网格、间距 16，卡片使用 24 圆角、secondarySystemGroupedBackground 填充、标题 topLeading 对齐、柔和阴影，并建议用 LazyVGrid 处理均匀网格。资料说明复杂不规则布局需要混用 VStack 和 HStack 来模拟跨格。Flutter 示例使用 flutter_staggered_grid_view 的 StaggeredGrid.count，设置 crossAxisCount 为 4、主轴与交叉轴间距 16，并通过 StaggeredGridTile.count 指定跨格数量。
六、限制与说明 资料未提供该技能的具体安装命令、收费、价格、平台支持范围或效果数据，这些信息暂未提供。资料中的示例代码仅用于说明布局方式，未说明更多扩展功能。