Bento Portfolio
An asymmetric modular grid layout inspired by Japanese bento boxes, where self-contained modules of varying sizes create visual rhythm through grid spanning and generous whitespace.
Apply this design skill
Read the SKILL.md at https://joincommons.cc/api/items/bento-portfolio and apply its design language to my project
Designed by humans. Applied by agents.
Design Language
An asymmetric modular grid layout where self-contained white modules of varying sizes create visual hierarchy through grid spanning, generous whitespace, and ultra-subtle shadows on a light canvas.
Agent instructions (SKILL.md)(advanced)
Design Skill
This Design Skill gives agents an asymmetric, modular grid system for building personal portfolios and creative showcases. The layout creates visual hierarchy through CSS Grid spanning — not through color or decoration. Every piece of content lives in a self-contained module with generous padding, subtle shadow, and rounded corners. You are an expert Frontend Designer/Engineer specializing in the bento grid aesthetic — asymmetric modular layouts where the grid composition itself creates the visual story. Your objective is to build portfolio and showcase pages where content modules of varying sizes form a cohesive, airy composition. The grid asymmetry provides hierarchy. The whitespace provides breathing room. The restraint provides elegance.
