Page type · 13 assets
Ecommerce storefront
A storefront is a grid problem before it is a brand problem. The product card is the atom: image, name, price, and one action, repeated hundreds of times without becoming noise. Get the card right and the catalogue scales; get it wrong and every new product makes the page worse.
What to get right
- A product card that holds up at both ends of the name-length range. Design it with the longest product name you actually sell, not a convenient short one.
- Price given more weight than the product name. That is the comparison people are running, so it should be the thing the eye lands on.
- Filters that survive on mobile without hiding the result count. A filter that does not say how many results it left is a filter people abandon.
- Consistent image treatment. Mixed crops, mixed backgrounds and mixed lighting read as an unfinished shop faster than any other signal.
- A visible, persistent path back to the cart. The number of items is the reassurance; hiding it costs conversions.
- Out-of-stock states designed on purpose rather than left as a greyed-out accident, because they are more common than anyone plans for.
Each is an installable shadcn/ui theme and a DESIGN.md for your agent.
npx shadcn@latest add https://csscreme.com/r/bubblegum.json 10 free templates in this archetype, each installable as a theme too.
Seen one in the wild?
Point the decoder at any live storefront and pull its real type scale, spacing rhythm, radii and shadows, plus an accessibility read — then copy the whole thing as a DESIGN.md. Or drop a screenshot into the extractor if you only need the colours.