← Back to Skills / Marketplace / bento-grid
SKL · 06● FREE

BentoGrid.

Asymmetric cards that vary in size and weight — the layout behind Apple's product pages and viral feature sections.

● Live preview · Bento Grid demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

This is the layout style behind Apple's product launch pages, the designs that go viral on Dribbble, and the feature sections that make people screenshot and share. Instead of equal-width cards in boring rows, elements snap into an asymmetric grid where some cards are wide, some are tall, some are tiny — each one showcasing exactly one feature or idea. The result looks like a beautifully composed magazine spread rather than a feature list. You've scrolled past a Bento Grid layout hundreds of times without knowing it had a name.

● Looks Like
Apple's feature pagesArc Browser's websiteNotion's marketing siteLinear's feature sectionsMost viral Dribbble product shots from the last two years
02 · Best For / Avoid If
＋ Best For
+Marketing and landing pages, especially feature showcase sections
+Portfolio homepages and about pages
+Product overview pages where you need to communicate multiple features quickly
+App Store screenshots and pitch decks (the same visual logic applies)
+Any section where you're trying to show variety and capability at a glance
× Avoid If
×Your app's core product is forms, tables, or data entry — Bento is for showcasing, not for functional UI
×You need users to read content in a specific linear order
×You're building the actual product interface rather than the marketing page for it
×Your content is text-heavy — Bento cells work best with one bold idea each, not paragraphs
03 · Design Philosophy
01

Every cell has one job

The discipline of Bento Grid is that each cell communicates exactly one thing. One feature. One metric. One visual. The moment a cell tries to say two things, the grid collapses into noise. This constraint is what forces the design to be clear — you can't hide weak positioning behind a crowded card.

02

Size communicates importance

In a standard card grid everything is equal, which means nothing is special. In a Bento Grid, the largest cell is the most important feature. The smallest cells are supporting details. Users intuitively understand this hierarchy without reading anything — size is the navigation system.

03

The grid creates the story

A well-designed Bento layout has a reading path — not a forced left-to-right one, but a natural eye movement from the largest element to the medium ones to the details. The composition tells a story about the product in the same way a magazine cover does. Getting this right is the difference between a Bento Grid that looks impressive and one that just looks busy.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Too many cells
More than eight cells in a single Bento section starts to feel overwhelming. If you have more features, break them into two separate Bento sections.
! WARNING
Cells that are too similar in size
The whole point is varied sizing. If Claude produces five equally-sized cards in a grid, that's just a card grid — not a Bento Grid. Be explicit about size variation.
! WARNING
Forgetting the cell content style
Each cell needs a clear visual — an icon, a screenshot, a bold number, an illustration. Cells with only text look unfinished. Tell Claude what the visual in each cell is.
! WARNING
Using it for the whole site
Bento Grid is a section treatment, not a full site design. It works as your feature showcase section, not as your navigation, forms, or dashboard.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

↓ SKILL.MD↓ DESIGN.MD