Let's get something out of the way: generating e-commerce UI with AI is harder than landing pages. Way harder.
I spent the last two weeks testing over 40 AI e-commerce UI prompts across different tools. Most of the output looked like it was designed by someone who's never actually bought anything online. Generic product cards. Checkout flows that would make users bounce. Cart UIs that forgot basic things like quantity selectors.
But some prompts worked. Really worked. The kind of output you'd actually ship to a client or use in your own store.
This guide is everything I learned. You'll get copy-paste prompts for product cards, detail pages, shopping carts, and checkout flows that generate results worth using.
Key Takeaways:
- E-commerce UI needs conversion-focused prompts—generic "make it pretty" doesn't cut it
- Always specify interactive states (hover, loading, empty cart, out of stock)
- Product cards need trust signals: reviews, badges, shipping info
- Checkout flows require explicit multi-step logic or you'll get a mess
In This Article
- Why E-commerce UI Is Different
- Product Card Prompts That Convert
- Product Detail Page Prompts
- Shopping Cart UI Prompts
- Checkout Flow Prompts
- E-commerce Navigation Prompts
- Common Mistakes and Fixes
- Complete Mini-Project
- FAQ
Why E-commerce UI Is Different
Here's my hot take: landing page prompts and e-commerce prompts are fundamentally different animals.
Landing pages are about storytelling. You guide users through a narrative. E-commerce UI is about transactions. Users need to find products, understand them quickly, trust them, and buy without friction.
When you write a vague prompt like "create a product page," AI has no idea if you want:
- A minimal luxury brand aesthetic
- A high-conversion Amazon-style layout
- A fashion boutique with image galleries
- A tech product with spec tables
The result? Something generic that works for nothing.
E-commerce UI also has states that landing pages don't:
- Out of stock indicators
- Sale/discount badges
- Size/color variant selectors
- Quantity controls
- Review ratings
- Trust badges (shipping, returns, security)
Miss any of these in your prompt, and you'll get an incomplete UI that needs heavy fixing.
The fix is specificity. Let's get into the prompts.
Product Card Prompts That Convert
Product cards are the bread and butter of e-commerce. They appear in category pages, search results, recommendations, and homepages. Get them wrong, and your conversion rate tanks.
The Basic Product Card That Works
Prompt:
Build a product card component in React with Tailwind CSS. Include: - Product image (16:9 aspect ratio, object-cover) - Product title (max 2 lines, truncate with ellipsis) - Price display with original price strikethrough if on sale - Star rating (1-5) with review count - "Add to Cart" button - Hover effect: slight shadow lift and image zoom The card should be 280px wide. Use subtle rounded corners (8px). Make the button primary color (indigo-600) with hover state.
This generates a solid foundation. But here's what most people miss:
Product Card with Trust Signals
Create an e-commerce product card (React + Tailwind) that converts. Must include: - Image with "Sale" badge (red, top-left corner) when discountPercent > 0 - Wishlist heart icon (top-right, toggleable) - Product title (2 lines max) - Price: show sale price in red, original in gray strikethrough - Rating stars with "(123 reviews)" text - "Free Shipping" badge if freeShipping prop is true - Add to Cart button (full width) - Quick View button appears on hover States to handle: - Default, hover, out of stock (grayed out, "Notify Me" button instead) - Loading state for Add to Cart (spinner) Card width: 300px. Use shadows and 12px border radius.
Want to try this yourself?
Product Card Variants Quick Reference
| Use Case | Key Elements to Add |
|---|---|
| Fashion | Size selector preview, color swatches, "New Arrival" badge |
| Electronics | Spec highlights, "Compare" checkbox, warranty badge |
| Food/Grocery | Weight/quantity, expiry indicator, dietary badges (vegan, organic) |
| Luxury | Minimal design, no discount badges, "Exclusive" text |
Product Detail Page Prompts
Product detail pages (PDPs) are where purchasing decisions happen. They need more complexity than cards: image galleries, variant selection, detailed descriptions, and social proof.
Full Product Detail Page Prompt
Build a product detail page section in React with Tailwind CSS. Layout (desktop): - Left 50%: Image gallery with thumbnail strip below main image - Right 50%: Product info section Image Gallery: - Main image (600x600px container) - 5 thumbnail images below, clickable to swap main image - Lightbox on main image click Product Info Section: - Breadcrumb: Home > Category > Product Name - Product title (h1) - Rating: 5 stars with "4.8 (2,341 reviews)" - clickable to scroll to reviews - Price: $99.99 (strike through $149.99 if sale, show "33% OFF" badge) - Short description (2-3 sentences) - Color selector: circular swatches, selected has ring - Size selector: buttons (S, M, L, XL), out of stock sizes grayed out - Quantity: minus/plus buttons with input field (min 1, max 10) - "Add to Cart" primary button (large, full width) - "Buy Now" secondary button below - Trust row: Free Shipping icon, 30-day Returns icon, Secure Checkout icon Mobile: stack vertically, image gallery becomes horizontal scroll.
This is detailed, but e-commerce pages need it. Compare this to a lazy prompt like "create a product page" and you'll see why specificity matters.
The Reviews Section (Don't Skip This)
Create a product reviews section (React + Tailwind). Include: - Header: "Customer Reviews" with average rating (4.8/5 stars) and total count - Rating breakdown: 5 bars showing percentage for 5,4,3,2,1 stars - Filter buttons: "All", "With Photos", "5 Star", "4 Star", etc. - Individual review cards: - Avatar, name, verified purchase badge - Star rating and date - Review title (bold) and body text - Helpful? thumbs up/down with count - Review images (thumbnails, clickable) - "Load More Reviews" button at bottom Style: clean, readable, subtle gray borders between reviews.
If you've read our AI form prompts guide, you know that breaking complex UIs into sections generates better results. Same principle applies here.
Shopping Cart UI Prompts
Shopping carts have more states than people realize. Empty cart. Single item. Multiple items. Items out of stock. Updated quantities. Removed items.
Here's how to prompt for carts that actually work:
Slide-Out Cart Drawer
Build a shopping cart drawer component (React + Tailwind). Behavior: - Slides in from the right (300px width on desktop, full width mobile) - Overlay darkens the background - "X" close button top right Content: - Header: "Your Cart (3 items)" - Cart items list (scrollable if overflow): - Product thumbnail (80x80px) - Product name (link) - Selected variant (e.g., "Size: M, Color: Blue") - Quantity selector (minus/plus) - Price (per item and line total) - Remove button (trash icon) - Subtotal row - "Free shipping on orders over $50" notice (or "$X more for free shipping" progress) - "Checkout" primary button (full width) - "Continue Shopping" link Empty state: show illustration, "Your cart is empty" message, and "Browse Products" button. Include smooth transitions for add/remove animations.
Want to try this yourself?
Full Cart Page
For dedicated cart pages (not just drawers), add:
Create a full shopping cart page (React + Tailwind). Layout: - Left 65%: Cart items table - Right 35%: Order summary sidebar (sticky) Cart Items Table: - Columns: Product (image + name + variant), Price, Quantity, Total - Each row has remove button - "Update Cart" button if quantities changed - "Clear Cart" link Order Summary Sidebar: - Subtotal - Shipping estimate (or "Calculated at checkout") - Promo code input with "Apply" button - Order total - "Proceed to Checkout" button - Accepted payment icons (Visa, Mastercard, PayPal, Apple Pay) - "Secure checkout" trust badge Empty cart: redirect message or empty state.
This generates a professional cart page similar to what you'd see on major e-commerce sites.
Checkout Flow Prompts
Checkout is where money changes hands. It's also where most AI-generated UIs fall apart because checkout has complex logic: form validation, payment integration, shipping options, and multi-step flows.
Here's the thing—you can't generate working Stripe or payment integrations with AI UI prompts. But you can generate the UI structure that your backend will plug into.
Multi-Step Checkout UI
Build a multi-step checkout flow UI (React + Tailwind). Frontend only, no actual payment processing. Steps indicator at top: 1. Information → 2. Shipping → 3. Payment → 4. Review Step 1 - Information: - Email input - First name, Last name (side by side) - Phone number - "Continue to Shipping" button - "Return to Cart" link Step 2 - Shipping: - Saved addresses (if any) with radio selection - "Add new address" form (street, city, state, zip, country) - Shipping method radio buttons: - Standard (5-7 days) - Free - Express (2-3 days) - $9.99 - Next Day - $19.99 - "Continue to Payment" button Step 3 - Payment: - Payment method tabs: Credit Card | PayPal | Apple Pay - Credit card form: Card number, Expiry, CVV, Name on card - Billing address: "Same as shipping" checkbox or new form - "Review Order" button Step 4 - Review: - Order summary (all items, images, quantities, prices) - Shipping address displayed - Payment method (masked card number) - Total breakdown - "Place Order" button Right sidebar (sticky): Order summary with item thumbnails, subtotal, shipping, tax, total. Mobile: steps stack vertically, sidebar becomes accordion at top.
That's a lot—but checkout flows are a lot. If you don't specify each step, AI will give you a single-page mess or skip crucial elements.
Single-Page Checkout (Simpler Alternative)
If you want something faster:
Create a single-page checkout form (React + Tailwind). Sections: 1. Contact (email, phone) 2. Shipping Address (full form) 3. Shipping Method (radio options) 4. Payment (credit card inputs, billing address checkbox) 5. Order Summary (collapsible on mobile) All sections visible on one page with clear visual separation. Include form validation states (error borders, helper text). "Complete Order" button at bottom.
Single-page checkouts convert better for low-cart-value stores. Multi-step works better for complex purchases. Pick based on your use case.
E-commerce Navigation Prompts
Navigation on e-commerce sites is different from SaaS or blogs. You need category menus, search bars, cart icons with counts, and user account dropdowns.
E-commerce Header
Build an e-commerce header (React + Tailwind). Top bar: Free shipping notice, currency selector, language selector Main header: - Logo (left) - Search bar (center, expandable on mobile) - Icons (right): user account dropdown, wishlist with count badge, cart with count badge Mega menu navigation: - Categories: Men, Women, Kids, Sale - On hover, show mega dropdown with subcategories in columns + featured image Mobile: hamburger menu, search icon, cart icon only. Sticky header on scroll (compact version).
For more navigation patterns, check out our AI landing page prompts guide—the header section applies to e-commerce too.
Common Mistakes and Fixes
After testing dozens of e-commerce prompts, here's what goes wrong most often:
| Mistake | Why It Happens | Fix |
|---|---|---|
| Missing hover states | AI defaults to static UI | Add "include hover effects for buttons, cards, and interactive elements" |
| No loading states | Forgot to specify async actions | Add "show loading spinner when Add to Cart is clicked" |
| Generic product images | AI generates placeholders | Specify "use placeholder images from unsplash.com/photos/product" |
| Broken mobile layouts | Desktop-first prompts | Always add "Mobile: [specific layout instructions]" |
| Missing empty states | Only described filled states | Add "Empty state: show X when cart/wishlist is empty" |
| No accessibility | Not specified | Add "include aria labels, keyboard navigation, focus states" |
Here's a pro tip: after generating your initial UI, run a second prompt: "Review this component for missing states: loading, error, empty, disabled. Add them."
If you're new to thinking about edge cases in prompts, our vibe coding best practices guide covers this in depth.
Complete Mini-Project: Full Product Page
Let's tie it all together. Here's a workflow to generate a complete product page:
Step 1: Generate the Product Card
Start with the product card prompt from earlier. Test it in isolation.
Step 2: Generate Product Detail Section
Use the PDP prompt. Make sure image gallery and variant selectors work.
Step 3: Add Cart Integration
Generate the cart drawer. Add state management to track items.
Step 4: Build Checkout
Generate checkout flow. Connect to cart data.
Step 5: Refine and Connect
Use follow-up prompts like:
- "Add a 'Quick Add' modal that appears when clicking Quick View on product cards"
- "Make the cart icon in header show real-time item count"
- "Add success toast when item is added to cart"
This iterative approach—building section by section—gives you better results than trying to generate an entire e-commerce site in one prompt. If you've read about context engineering, you know why: smaller context, better output.
You Might Also Like
- Build Your Portfolio with AI: 20+ Prompts That Work - Same prompt-first approach for portfolio sites
- Build a Startup Landing Page with AI - Complementary guide for marketing pages
- 10 Vibe Coding Mistakes That Kill Your Projects - Common errors to avoid when generating e-commerce UIs
Frequently Asked Questions
What are the best AI e-commerce UI prompts?
The best AI e-commerce UI prompts are specific about conversion elements: trust signals (reviews, badges), interactive states (hover, loading, out of stock), and clear visual hierarchy. Generic prompts generate generic output. Include exact dimensions, color specifications, and all UI states in your prompts.
How do I generate product pages with AI?
Break the product page into sections: image gallery, product info, variant selectors, add-to-cart area, and reviews. Generate each section with detailed prompts specifying dimensions, states, and interactions. Then combine them with a layout prompt. This modular approach produces better results than one massive prompt.
Can AI generate working checkout flows?
AI can generate the UI/frontend for checkout flows, but not actual payment processing. You'll get forms, step indicators, and validation UI—but Stripe, PayPal, or payment gateway integrations require backend code. Use AI prompts for the frontend structure, then connect it to your payment backend.
What should I include in shopping cart prompts?
Shopping cart prompts need: item display (image, name, variant, quantity, price), quantity controls, remove buttons, subtotal calculation, shipping estimates, promo code input, and—critically—empty cart state. Also specify the cart style: drawer/slide-out vs. full page.
Why do my AI e-commerce UIs look generic?
Generic prompts produce generic output. Most AI e-commerce UI prompts fail because they don't include: trust signals (shipping badges, return policy), specific interactive states, conversion-focused CTAs, or proper mobile layouts. Add these details and your output improves dramatically.
Written by the Fardino Team. We build AI tools for frontend developers. Try Fardino free →
