Generate Bento-style grid layouts for web and mobile apps

Bento UI is a design-style child skill ('everything in its right place - a highly structured, modular grid of distinct compartments'), part of the design-it family and not meant to be triggered directly. Three core principles: Strict Grid Structure (the entire UI sits on a responsive, multi-column grid - usually 3x3, 4x4, or irregular masonry), Rounded Compartments (every distinct piece of content lives inside a card with consistent, usually large, border-radius), and Equal Spacing (the gap between compartments must be perfectly consistent everywhere).

Use it when the user's request matches this modular, grid-organized aesthetic - dashboards, feature showcases, or landing pages that should feel structured and premium like an Apple product page. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA is highly adaptable but looks premium with Minimalist Slate or Yacht Club palettes, typically a slightly off-white or light-gray background so white compartments visually pop, Apple-esque typography (SF Pro, Inter) with bold headlines placed top-left or bottom-left of each compartment, and high-quality edge-to-edge images or single large 3D icons breaking up text-heavy cards. The web implementation mandates CSS Grid over flexbox, since flexbox can't reliably maintain the strict 2D structure: grid-template-columns: repeat(4, 1fr) with fixed grid-auto-rows, a consistent gap, and cards using a very large border-radius: 32px with a subtle shadow and 1px border for crispness. Different bento sizes come from grid span utility classes - .bento-span-2 (grid-column: span 2), .bento-span-2-row (grid-row: span 2), and .bento-large (spanning both) - so a hero card can span 2x2 while smaller stat cards fill 1x1 cells around it.

.bento-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 24px;
}
.bento-large { grid-column: span 2; grid-row: span 2; }

SwiftUI reproduces the grid with LazyVGrid and flexible GridItem columns inside a ScrollView, manually composing different span sizes by setting explicit card heights (a 1x2 tall card at 180*2 + 16 spacing) and grouping smaller cards in a nested VStack beside it, with each BentoCard using a RoundedRectangle(cornerRadius: 24) fill and top-leading title overlay against a systemGroupedBackground.

Designers and developers building a dashboard, feature showcase, or landing page that should feel structured, modular, and premium - an Apple-product-page aesthetic - rather than a loose, freeform layout - the grid discipline itself becomes the design language, so consistency across compartment sizing and spacing matters more than any single card's individual polish.