Bento Designer Portfolio

Build a complete website with a pale grey stage, giant faded lettering, floating bento cards, a red portrait tile and quiet project pages. The example uses the fictional brand Avery Lane; you can replace its content while retaining the composition, typography and image direction that make this template distinctive.

What you receive

The local example contains 26 connected routes and 11 mapped source images. Navigation leads to real content views, and the controls provide visible feedback. The package includes a visual template, style guide, page library, icon rules and a local validator.

Make it your own

Start with your name or brand, audience, main offering and the pages you need. Supply useful descriptions for each product, project or story. If you do not have final copy yet, the assistant can draft clearly fictional content for you to review.

Tell the assistant if you want a particular framework or starter. Otherwise the Skill uses Next.js App Router with TypeScript. The design becomes real components and routes in that framework. The downloadable example remains a convenient self-contained preview that you can open locally.

Give each item a distinct image subject. Owned photography is welcome; new artwork should share the same lighting, palette and treatment. Preserve the image masks and crop direction, and check important subjects at phone width before calling the page finished.

Check the result

Open every page on desktop and mobile. Try navigation, filters, forms and any cart or booking controls. Run the included validator on the local demo and the appropriate project checks on a framework build. Programmatic checks do not replace visual review.

The example does not send messages, create reservations or take payments. Connect real services only when the production project needs them. All example identities and commercial details are fictional. Generating fresh images may incur the image provider’s charge; viewing the included demo does not require new generation.