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

Bento Grid.

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. 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. 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 demands clarity — every feature must be strong enough to stand on its own.

02

Size communicates importance

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 — 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 what makes a composition land.

04 · Use With Claude / Cursor
Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build — Claude applies it automatically
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 — mention the skill name to invoke it automatically
★ 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

Beautiful designs in minutes.

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

↓ SKILL.MD↓ DESIGN.MD