What this prompt does
This prompt has the AI act as a senior product designer and front-end engineer designing a product detail page (PDP) built to convert, specified tightly enough to build. It covers an above-the-fold gallery with zoom and thumbnails, a variant selector with out-of-stock handling, trust signals like a stock indicator and shipping estimator, social proof with rating distribution and photo reviews, a sticky mobile add-to-cart, and performance/a11y with an LCP target. The [product_type] placeholder shapes the gallery and variants, and [brand_tone] sets the visual voice.
The structure works because the PDP is where the sale is won or lost, so the prompt prioritises the elements that move conversion over decorative ones. It asks the model to return the three highest-impact conversion elements to build first, so you ship the money parts before another hero animation. The [stack] variable produces a section-by-section layout and a matching component list, while the variant section defines exactly how out-of-stock combinations behave. Folding trust signals like a stock indicator, shipping estimator, returns, and security badges into the spec addresses the unspoken hesitations that stall a purchase, the questions a buyer has about delivery and risk that, left unanswered, quietly send them back to search rather than to checkout.
When to use it
- Designing a high-converting product detail page
- Selling a
[product_type]with color/size variants or out-of-stock combos - You want conversion elements ranked by impact, not a flat feature list
- Adding trust signals: stock indicator, shipping estimator, returns, security badges
- Building a sticky mobile add-to-cart with thumb-reachable controls
- Setting an LCP target and image strategy for performance
Example output
You get the section-by-section layout, the component list for your [stack], and the three highest-impact conversion elements to build first. Above the fold covers the gallery, title, price with discount badge, and primary CTA; the variants section defines color/size selection and out-of-stock behaviour; trust covers stock, shipping estimate, returns, and security badges; social proof covers rating distribution, top and photo reviews, and Q&A. Mobile adds a sticky add-to-cart.
Pro tips
- Set
[product_type]accurately; physical goods with variants need different gallery and selector treatment than digital products - Use
[brand_tone]to steer the visual voice so a premium, minimal feel carries through every section - Ask the model to rank conversion elements by impact and ship those first, rather than starting with a hero animation
- Keep
[stack]accurate so the component list is buildable - Push the sticky mobile add-to-cart and trust signals early; they tend to pay off faster than decorative polish
- If out-of-stock handling is vague, ask it to define exactly how unavailable variant combinations behave
- For the social proof section, ask it to specify the rating distribution and photo reviews, since real customer images and a star breakdown reassure buyers more than a single average rating
