What this prompt does
This prompt makes the AI a senior e-commerce UX designer specifying a product listing page (PLP) tightly enough to build, optimised for conversion and fast scanning. It defines a faceted filter rail with applied-filter chips and clear-all, a sort dropdown plus a grid/list toggle that persists, scannable product cards, infinite scroll with a sticky compare bar and a no-results state, responsive behaviour with mobile filters as a bottom sheet, and performance/SEO notes. The [catalog_scale] placeholder sizes the page, and [store_type] shapes the relevant facets.
The structure works because the listing page is where revenue happens, and bad filters or slow images make people bounce. The prompt forces the filtered and no-results states to be designed, since those are skipped constantly and leak conversions. It also requires lazy images, skeleton loaders, and crawlable URLs for facets so the page performs and ranks. The [stack] variable keeps the component-by-component spec mapped to your framework, with default, loading, empty, and filtered states per component. The persisted grid/list toggle and applied-filter chips also respect how shoppers actually browse, letting them see what is filtered and undo it in one tap, which keeps a deep faceted catalog navigable instead of trapping people in a filter they cannot easily escape.
When to use it
- Scoping a product listing or category page before coding
- Designing facets for a
[store_type]like fashion or electronics - Building for a large catalog sized by
[catalog_scale] - You need filtered and no-results states designed early, not skipped
- Making filters a bottom sheet on mobile and cards that reflow
- Adding crawlable facet URLs and lazy images for performance and SEO
Example output
You get a component-by-component spec with states (default, loading, empty, filtered) and mobile notes. The filter rail covers price, brand, color, size, rating, and availability with applied-filter chips and clear-all; the product card includes image, title, price with strike-through sale price, rating, and quick-add; and infinite scroll comes with a sticky compare bar and a graceful no-results state. Mobile notes describe the bottom-sheet filters and card reflow.
Pro tips
- Set
[catalog_scale]honestly; designing for 10k+ SKUs changes filter and pagination decisions versus a small catalog - Tailor
[store_type]so the facets match what shoppers filter by in your category - Ask the model to nail the no-results and filtered states early, since those are skipped constantly and quietly lose conversions
- Keep
[stack]accurate so the component spec maps to your framework - Request the crawlable facet URL approach explicitly if SEO matters, since faceted navigation can create indexing problems
- If the product card feels generic, ask it to expand the quick-add and sale-price treatment for fast scanning
