What this prompt does
This prompt generates a complete search and filter UI system by encoding real e-commerce UX constraints directly into the template rather than leaving them for the AI to guess. The "Industry Design Rules" block inside the template acts as an opinionated spec: it mandates instant filter updates, prohibits dead-end zero-results pages, and enforces mobile-first patterns like bottom sheet filters and sticky search — so the AI cannot produce a "click Apply to filter" relic from 2012.
The seven-section output structure is deliberate. Auto-suggest, active filter pills, zero-results recovery, and mobile experience are each their own generation target, which forces the AI to treat them as first-class concerns rather than afterthoughts. You get runnable [framework] code for the filter sidebar alongside the visual spec — closing the gap between design and implementation in a single pass.
The result count and "Clear all" patterns are explicitly required by the template, which matters because these are the two UI elements most commonly dropped by generalist AI outputs. Users who search on an e-commerce site convert significantly higher than browsers, so precision here is worth the prompt length.
When to use it
- Scaffolding the search and filter layer for a new Shopify, WooCommerce, or headless commerce build before frontend dev starts.
- Generating a React or Vue filter sidebar component spec when you have the facets defined but no time to design interaction states from scratch.
- Presenting a filterable product catalog prototype to a client for UX sign-off before writing a line of production code.
- Rebuilding an underperforming category page where analytics show users abandoning after one or zero filter interactions.
- Creating a mobile-optimized filter experience for a store where mobile traffic exceeds 60% but the current filter UX is a desktop carry-over.
- Designing the zero-results recovery flow when a store has a large, inconsistent product catalog prone to dead-end searches.
Example output
For a [store_type] of "outdoor gear", [product_count] of 4,200, and [framework] of React:
Search bar: Combobox with debounced fetch (300ms), thumbnail + price in dropdown rows,
"Recent: hiking boots, rain jacket" persisted to localStorage, category pills below input.
Filter sidebar (React):
<PriceRangeSlider min={0} max={800} step={10} onChange={applyInstant} />
<ColorSwatch options={["Olive","Navy","Red"]} selected={activeColors} />
<CheckboxGroup label="Brand (142)" options={brands} onChange={applyInstant} />
<SizeButtonGroup sizes={["XS","S","M","L","XL"]} />
Active filters: <FilterPill label="Under $150" onRemove={...} /> <ClearAll />
Zero-results: "No results for 'gortex jacket' — did you mean Gore-Tex jacket?
Try: Waterproof Jackets (312), Rain Gear (87)"
Pro tips
- Set
[facets]precisely — vague inputs like "the usual filters" produce generic checkboxes. List actual facet names:Brand, Price, Color, Material, Rating, In Stock. The AI maps them to the right control type (swatch vs. range slider vs. checkbox) only when names are specific. - For
[framework], go narrow:React with ZustandorVue 3 Composition APIbeats justReact. The generated code quality jumps when state management is named. - Use
[facet_count]to control sidebar density. 4–6 facets produces a clean sidebar; 10+ often triggers accordion collapsing behavior in the output — useful for dense catalogs, but set it intentionally rather than letting it happen by default. - Pair this prompt with a color/brand prompt to fill in the neutral filter palette. The template deliberately leaves filter colors neutral by design rule, so you will need a second pass if you want branded active states.
- If the store has guided selling needs (e.g., "Help me choose"), the current template does not include a recommendation flow — add it explicitly to the seven output sections rather than hoping the AI infers it.
