Modern UI/UX for E-commerce — by Claude Design
Twelve screens for a digital-goods store, drawn at 1440 and 390 and delivered as HTML pages you open in a browser. Six flows — home, all products, product page, bundle page, cart drawer and checkout success — each one designed at both widths so the responsive behaviour is a decision rather than an afterthought. The 24-section design system the screens were built from is included, so the tokens behind every spacing value and control height are in the same download.
What you get
- 4 canvas files (HTML) — Desktop Store (home, all products), Desktop Product and Checkout (product, bundle, cart drawer, checkout success), Mobile (all six at 390), and the full Design System
- 12 screens in total: 6 flows × 2 breakpoints
- 13 colour tokens, a 7-step type scale and 24 documented component sections
- README.txt with the consolidated prompt that produced the whole set, written so it can be pointed at another store
- React 18.3.1 bundled locally, so every page renders with no internet connection
- LICENSE.txt
Works with
- Any modern browser — no build step, no server, no dependencies to install
- Any framework: these are design files, not an implementation
- Claude Design, for anyone who wants to run the included prompt on their own store
One licence, personal and client work, forever. No resale.
Most e-commerce UI kits give you components and leave the hard part — deciding what each screen has to accomplish — as an exercise. This set is the opposite. It is twelve finished screens covering the whole path from landing on a store to downloading what you bought, with a design system underneath that explains why each one looks the way it does.
What the six flows cover
Home sets the offer and shows what is popular. All Products is the catalog with filters, sort and a density toggle. The product page carries a sticky gallery, the buy column and a file manifest, because a digital buyer wants to know exactly what lands in their inbox. The bundle page is centred rather than split, since a bundle has no single hero image. The cart drawer has no quantity stepper, because a downloadable file is always quantity one. Checkout success is a delivery screen, not a thank-you screen.
Designed at both widths
Every flow exists at 1440 and at 390, so the responsive decisions are visible rather than implied: where the filter rail becomes a drawer, where the nav collapses, where a two-column layout stacks and in what order.
Is this code?
No. These are design files that happen to be HTML, so they open in a browser with nothing installed. They are a specification to build from, not an implementation to drop in.
Does it include Figma?
No. The files are HTML canvases, not a .fig library.
Reviews
Nothing here yet.
Questions & answers
No questions yet. If something about this product isn't clear, ask — we answer publicly so the next person finds it too.