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.
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
-
Clone the repo.
git clone https://github.com/bergside/awesome-design-skills -
Point Codex at the skill file.
skills/bento/SKILL.md -
Then describe the UI you want. Codex follows the skill.
How to run it with Codex
-
Ask Codex to assign each block a size based on content priority.
-
Define spacing tokens on the 4 to 32 scale before laying out tiles.
-
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.