Frontend & UI

design-skills · Bento

Grid of varied blocks on cream, Inter type, compact scale.

What it is

A guideline skill for bento box layouts that present content as grid blocks of varying sizes. Inter throughout, a compact 12 to 32 type scale, peach and blue accents on cream.

Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
From the upstream SKILL.md

Why it matters for design

  • Varying block sizes carry hierarchy, so the grid itself does the ranking.
  • A compact 12 to 32 type scale fits dense text inside small tiles.
  • The cream #FFF5E6 surface keeps block edges readable without heavy borders.

What it covers

  • Brand
  • Style foundations
  • Rules: do
  • Component rule expectations
  • Required output structure
  • Quality gates

How to install

design-skills · Bento

  1. Clone the repo.

    git clone https://github.com/bergside/awesome-design-skills
  2. Point Codex at the skill file.

    skills/bento/SKILL.md
  3. Then describe the UI you want. Codex follows the skill.

How to run it with Codex

  1. Ask Codex to assign each block a size based on content priority.

  2. Define spacing tokens on the 4 to 32 scale before laying out tiles.

  3. Request overflow and long-label handling, which this skill lists as edge cases.

Every plugin here is free, open source, and links to its real upstream source.

More on the codex-design list ↗

Next step

Design with Open Design, without the setup

Install this plugin yourself, or run a whole curated design layer around Codex with Open Design. Bring your own key, own your output.

Open Design Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS, Windows, and Linux