Bento
- 469 installs
- 2.2k repo stars
- Updated June 28, 2026
- bergside/awesome-design-skills
bento is a design-system agent skill that lays out feature grids, pricing highlights, and dashboard widgets using asymmetric bento tiles for developers prioritizing scannable marketing and product overview pages.
About
bento is a bergside/awesome-design-skills design-system skill that teaches agents how to author implementation-ready bento grid guidance for marketing and product UI. The SKILL.md defines a modern clean visual style with a 12/14/16/20/24/32 typography scale using Inter and JetBrains Mono, a 4/8/12/16/24/32 spacing scale, and semantic color tokens such as primary #FAD4C0 and surface #FFF5E6. Developers reach for bento when feature grids, pricing highlights, or dashboard widgets need asymmetric card blocks with clear hierarchy and soft spacing instead of uniform card rows. The skill mandates WCAG 2.2 AA acceptance criteria, keyboard-first interaction states, and a six-step guideline workflow ending in a code-review QA checklist. Required output structure covers tokens, component anatomy, accessibility requirements, anti-patterns, and migration notes so engineers receive concrete rules rather than vague aesthetic adjectives.
- Asymmetric tile grids
- Feature spotlight hierarchies
- Responsive span breakpoints
- Card grouping for scanability
- Marketing and dashboard showcases
Bento by the numbers
- 469 all-time installs (skills.sh)
- Ranked #609 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/bergside/awesome-design-skills --skill bentoAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 469 |
|---|---|
| repo stars | ★ 2.2k |
| Last updated | June 28, 2026 |
| Repository | bergside/awesome-design-skills ↗ |
How do you design scannable bento grid layouts?
Lay out feature grids, pricing highlights, and dashboard widgets using asymmetric bento tiles that prioritize scannability on marketing pages and product overviews.
Who is it for?
Frontend and design engineers defining bento-style feature grids, pricing sections, or dashboard widget layouts with explicit tokens and accessibility gates.
Skip if: Backend API design, dense data tables without tile layouts, or projects that already have a locked design system unrelated to bento grids.
When should I use this skill?
A marketing page, pricing section, or product overview needs asymmetric bento tile layouts with documented tokens, states, and accessibility criteria.
What you get
Design-system guidance with typography and spacing tokens, tile layout rules, component state specs, accessibility criteria, and QA checklists.
- design-system guidelines
- component state specs
- QA checklists
By the numbers
- Typography scale uses 6 sizes: 12/14/16/20/24/32
- Spacing scale uses 6 values: 4/8/12/16/24/32
- Targets WCAG 2.2 AA accessibility compliance
Files
<!-- TYPEUI_SH_MANAGED_START -->
Bento Design System Skill (Universal)
Mission
You are an expert design-system guideline author for Bento. Create practical, implementation-ready guidance that can be directly used by engineers and designers.
Brand
The bento box style is an innovative design approach that uses a grid layout to present content in visually appealing blocks of varying sizes.
Style Foundations
- Visual style: modern, clean
- Typography scale: 12/14/16/20/24/32 | Fonts: primary=Inter, display=Inter, mono=JetBrains Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger | Tokens: primary=#FAD4C0, secondary=#80A1C1, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFF5E6, text=#111827
- Spacing scale: 4/8/12/16/24/32
Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states
Writing Tone
concise, confident, helpful
Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit
Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels
Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.
Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules. 2. Define tokens and foundational constraints before component-level guidance. 3. Specify component anatomy, states, variants, and interaction behavior. 4. Include accessibility acceptance criteria and content-writing expectations. 5. Add anti-patterns and migration notes for existing inconsistent UI. 6. End with a QA checklist that can be executed in code review.
Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist
Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).
Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.
Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.
<!-- TYPEUI_SH_MANAGED_END -->
Overview
Modular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Style Foundations
- Visual style: modern, clean
- Typography scale: 12/14/16/20/24/32
- Typography fonts: primary=Inter, display=Inter, mono=JetBrains Mono
- Typography weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, neutral, success, warning, danger
- Spacing scale: 4/8/12/16/24/32
Colors
- Primary (#FAD4C0): Token from style foundations.
- Secondary (#80A1C1): Token from style foundations.
- Success (#16A34A): Token from style foundations.
- Warning (#D97706): Token from style foundations.
- Danger (#DC2626): Token from style foundations.
- Surface (#FFF5E6): Token from style foundations.
- Text (#111827): Token from style foundations.
- Neutral (#FFF5E6): Derived from the surface token for official format compatibility.
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Use bento for asymmetric marketing tile grids with warm token palettes; use the shadcn skill when the target aesthetic is minimal monochrome utility-first components.
FAQ
What typography scale does the bento skill define?
The bento skill defines a 12/14/16/20/24/32 typography scale with Inter for primary and display text and JetBrains Mono for monospace, plus font weights from 100 through 900 for hierarchy control.
What accessibility standard does bento require?
The bento skill requires WCAG 2.2 AA compliance, keyboard-first interactions, visible focus states, and testable accessibility acceptance criteria in every generated design-system guideline.
What deliverable structure does bento mandate?
The bento skill mandates seven output sections: context and goals, design tokens, component rules, accessibility requirements, content standards, anti-patterns, and a QA checklist executable during code review.