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 NEXGERCORE, without the setup

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

NEXGERCORE เดสก์ท็อป

ดีไซน์ซิสเต็มเดียว ทุกงานที่ออกมาคือแบรนด์ของคุณ

ใน NEXGERCORE IDE ฉบับเต็ม ใช้กฎแบรนด์ชุดเดียวกันได้ทั้งเว็บไซต์ สไลด์ โปรโตไทป์ที่กดเล่นได้ แดชบอร์ด รูปภาพ และวิดีโอ HTML เชื่อม Codex, Claude Code, Cursor และ coding agent ตัวอื่นที่มีอยู่ในเครื่องคุณแล้ว จากนั้นสร้างงานในเครื่องได้ฟรี

  • เว็บ สไลด์ โปรโตไทป์ แดชบอร์ด รูปภาพ และวิดีโอ
  • ดีไซน์ซิสเต็มกว่า 140 ชุด พร้อมคลังเทมเพลตและสกิลครบ
  • เชื่อม Codex ในเครื่องและ coding agent อีกกว่า 21 ตัว · ใช้ฟรี
ดาวน์โหลดฟรี

รองรับ macOS, Windows และ Linux