E-commerce product detail page
Create a persuasive product page with clear variant selection, delivery expectations, and honest proof.
Build prompt
Copy as-is, then replace the variables
Build a responsive product detail page for [PRODUCT], made by [BRAND] for [TARGET CUSTOMER]. The primary purchase reason is [CORE BENEFIT]. Above the fold: - Product gallery with thumbnail navigation, meaningful alt text, zoom, and a clear placeholder treatment. - Product name, concise value proposition, rating summary labeled as sample data, price, payment information, and stock status. - Variant selectors for [VARIANTS] that make unavailable combinations obvious. - Quantity, Add to cart, delivery estimate for [DEFAULT LOCATION], returns summary, and secure checkout reassurance. Supporting content: - Benefit-led product story with concrete specifications. - Comparison or “why this version” section when it helps the decision. - Materials, dimensions, care, delivery, returns, and warranty in scannable disclosure sections. - Reviews breakdown and a small set of believable sample reviews clearly labeled as examples. - Related products that explain why each recommendation is relevant. Behavior and quality: - Updating a variant must update price, stock, gallery, and delivery message consistently. - Include out-of-stock, low-stock, invalid combination, cart loading, cart error, and cart success states. - Keep the purchase controls usable on mobile without obscuring content. - Do not use fake scarcity timers, misleading discounts, or unsupported sustainability claims. Art direction: [ART DIRECTION]. Use a coherent commerce design system with clear hierarchy and accessible controls.
Expected outcome
A realistic responsive PDP with gallery, variants, cart behavior, product details, and commerce edge cases.
Why it works
- Connects variants to all dependent commerce information instead of treating selectors as decoration.
- Requests honest proof and explicitly rules out manipulative conversion patterns.
- Balances persuasive storytelling with specifications and fulfillment details.
[PRODUCT / BRAND]Example: Arc Daypack / Northline[TARGET CUSTOMER]Example: urban commuters who carry a laptop and gym kit[CORE BENEFIT]Example: organized capacity without a bulky silhouette[VARIANTS]Example: color and size[DEFAULT LOCATION]Example: United Kingdom[ART DIRECTION]Example: technical outdoor catalogue with crisp macro photographyMethod sources
Traceable, not copied blindly
This prompt is an original editorial adaptation. The references below informed its structure and review criteria; their text is not presented as our own.
Awesome GitHub Copilot
GitHub · 38k+ GitHub stars · MIT
Used for prompt structure, explicit inputs, output contracts, guardrails, and validation steps.
Prompt Engineering Guide
DAIR.AI · 70k+ GitHub stars · MIT
Used for task decomposition, prompt chaining, and evaluation patterns.
v0 Text Prompting Guide
Vercel · Official product documentation · Reference only
Used for the component-first, specific, incremental workflow behind these build prompts.
Keep building
Launch
High-converting SaaS landing page
Turn a product idea into a focused landing page with clear hierarchy, credible proof, and a deliberate conversion path.
Open promptApp
Product analytics dashboard
Generate an information-dense dashboard that still feels calm, legible, and useful on smaller screens.
Open promptPortfolio
Distinctive developer portfolio
Create a portfolio that communicates engineering judgment through case studies rather than skill-logo wallpaper.
Open prompt