Ecommerce website prompts

Separate the storefront from the checkout

Say it in the first paragraph: "this is the storefront; checkout is handled by [service]; the buy button links to [a checkout URL / adds to a cart held in local state]". A model left to decide will build a fake payment form, which is the one part you can't ship.

Describe the products as objects

A ring, a scarf, a bottle, a T-shirt: each has a material, and the material is what the site should show. Say what the product does on screen. Silk ripples. Metal catches a light that follows the cursor. A T-shirt turns. One material behaviour, applied to every product, gives the shop a look of its own.

Then give the facts for each: name, price, variants, one sentence, and the image files.

Write the buying path

From product to bought in as few steps as possible: pick a variant, add, a drawer opens with the total, go to checkout. Describe each step and its empty and error states: nothing selected, sold out, quantity limits. These are the states that get skipped when a prompt only describes the homepage.

What an ecommerce prompt should contain

• Storefront only, and the name of the checkout service.
• The products: count, names, prices, variants, image files.
• The material idea: how products behave on screen.
• The buying path, step by step, with sold-out and empty states.
• Pages: home, product, and the short legal ones (shipping, returns).
• Type and colour in numbers, as for any other site.

A prompt to start from

Build the storefront for [brand], which sells [what] — [number] products. This is the storefront only: checkout is handled by [service], and "Buy" opens [checkout URL per product / a cart drawer whose button links to checkout].

Products, in ./products.json: name, price, [variants], one sentence, and image files in ./products. Use the real data.

The idea: [how the products behave — e.g. "each scarf is a square of cloth that ripples slowly on a pale ground; clicking one brings it forward and flattens it so the pattern can be read"].

Pages:
- Home: the brand name, one line, then the products in the idea above.
- Product: the product large on the left; name, price, variant picker, "Add" and three lines of detail on the right.
- Shipping and returns: plain text pages.

Cart drawer: slides in from the right with the items, quantity steppers, subtotal and the checkout button. States: empty ("Nothing here yet"), sold-out variant (disabled, struck through), maximum quantity.

Stack: Vite + React + TypeScript, plain CSS; cart in local state, saved to localStorage.

Look: ground [#hex], text [#hex], no accent beyond the products. [Serif typeface] for names at 40px, [sans typeface] 14px for everything else. Generous space: products never touch.

Phones: one product per screen, the drawer becomes a full-height sheet. Run it and walk the path from home to the checkout link.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to make a template's prompt yoursKeep a template's design and replace its subject: what to change in the prompt, what to leave alone, and the order to do it in.
• The anatomy of a website promptThe seven parts of a website prompt that builds a site worth shipping, with an annotated example.

• Landing pages
• Portfolios
• Product pages
• Hero sections
• Small business