What a cosmetics storefront needs: page structure and modules

The flow first: four stages, and a cosmetics shop uses the same four

The generation flow on the platform is fixed at four stages. A cosmetics storefront goes through exactly the same pipeline as anything else — what changes is what you say at each turn, and which facts the pages have to state.

Below is that flow applied to a skincare shop. There are nine prompts you need to type, all copy-paste ready. If an edit goes wrong you do not restart the project — every meaningful change leaves a checkpoint you can roll back to.

• Describe the idea — one sentence saying which category you sell and to whom
• The agent generates — it plans the architecture, scaffolds a real project, writes the code and runs it in an isolated sandbox
• Preview and iterate — watch it live, keep talking to change structure and copy; build errors are caught and fixed automatically, up to five rounds
• Ship it — one-click deploy to a production URL (custom domain, SSL, version history), or export to GitHub and take over

Stage 1 · Describe the idea: category, audience, tone (prompt 1)

“Cosmetics” is an even broader word than pet supplies: skincare is about ingredients and repeat purchase, makeup is about shades and swatches, fragrance is about mood and occasion — the page structure differs for each. So narrow the category in your first sentence, then say who buys it.

What to check: does the headline name the category you meant, does the navigation show the right categories (cleanser / serum / moisturiser), and does the tone match what you had in mind?

Build me a skincare storefront selling cleansers, serums and moisturisers to individual consumers aged 25-35, clean and rational style, with ingredients and suitable skin types in the foreground. Start with the home page and the product list.

Stage 2 · The agent generates: nothing for you to type

The agent plans the architecture, scaffolds a real project, writes production-grade code and gets it running inside a resource-limited sandbox. You do not write code and you do not configure an environment.

Two things to look at: which files and endpoints it created (products, cart, orders) and whether the preview is up. If the build fails, it catches, analyses and fixes the error itself, up to five rounds.

Stage 3 · Preview and iterate (1/5): a home page that carries the brand (prompt 2)

Cosmetics are bought by looking, so the first screen decides whether anyone scrolls. Click through the preview on desktop and on a phone first, then keep editing in conversation.

What to check: are the featured products visible, is there a brand story or an ingredient claim, and does it still hold together on a phone?

Rework the home page into three bands: a hero featuring one skincare set (cleanser + serum + moisturiser) with the bundle price; a middle section grouped by benefit (cleansing / hydration / early ageing) with three featured products each; a bottom section with the brand story and a link to the ingredients and safety page.

Stage 3 · Preview and iterate (2/5): product list and detail need cosmetics-specific fields (prompt 3)

This is where a cosmetics storefront differs most from a generic shop. Saying “it is great” is not enough: buyers want to know the size, whether it suits their skin, whether it contains alcohol or fragrance, how to use it, and how long it keeps after opening.

What to check: can the list be filtered by category and skin type, does the detail page carry every field below, and are multi-size prices clear?

• Size: 30ml / 50ml, switchable when there are several
• Suitable skin type: dry / oily / combination / sensitive
• Ingredients: the key actives, plus whether alcohol or fragrance is present
• How to use it, and how much
• Shelf life, and the period after opening
• A caution: patch test first if your skin is sensitive

Add category filters (cleanser / serum / moisturiser) and skin-type filters (dry / oily / combination / sensitive) to the product list. The product detail page must include: size switching, suitable skin type, key ingredients, whether it contains alcohol or fragrance, how to use it, shelf life, period after opening, cautions, and 3-5 FAQs.

Stage 3 · Preview and iterate (3/5): spell out trust and after-sales (prompt 4)

Cosmetics storefronts usually fail to convert not because the design is ugly but because buyers hesitate: they do not know who made it, what happens if it does not suit their skin, or whether an opened jar can be returned. State these on the page instead of waiting to be asked.

One caution: keep efficacy claims restrained — avoid wording like “instant results” or “cures”. Which claims and qualifications are actually required depends on your market's rules; this article only covers page structure, not compliance advice.

Add three pages: About (operating entity, address, manufacturer and any filing information), Returns policy (the conditions and window for returning unopened items, and that opened items cannot be returned), and Contact (support email and working hours). Link all three from the footer, and put a returns link at the bottom of the product detail page too.

Stage 3 · Preview and iterate (4/5): cart, bundles and checkout (prompts 5 and 6)

Payment is decided here: buyers abroad usually mean Stripe or PayPal settling in USD; buyers in mainland China mean Alipay or WeChat Pay settling in CNY. Getting this wrong is painful to undo later.

Cosmetics also commonly sell as sets — a bundle priced below buying the items separately lifts the average order. What to check: does the cart total update correctly, is the bundle price applied, and is the cart empty after a successful payment?

Add a cart and checkout flow: the cart supports changing quantities and removing items; the checkout page shows the order summary and total and pays through Stripe; after a successful payment clear the cart and generate an order number.

Support bundle products: cleanser, serum and moisturiser can be packaged into a set with its own price and a strike-through comparison price, priced as a set when added to the cart.

Stage 3 · Preview and iterate (5/5): a content section that also helps search (prompt 7)

Skincare content (how to use it, when to use it, what to pair it with) reduces support questions and doubles as a set of pages search engines can find. It does not need to be long — set the structure up first.

Add a skincare guide section: an article list and article pages, starting with three articles — how to choose a cleanser, the order to apply serums, and how to use moisturiser morning and night. Link related products at the bottom of each article.

Stage 4 · Ship it (prompt 8)

Once content and flow are right, handle the last three pre-launch checks: click every page on a phone, make the title and description read like a sentence, and confirm images load without stalling.

Then ship. Either deploy straight to a production URL — your own custom domain, SSL, version history per deploy — or export to GitHub: every project is a real repository and the code is yours.

Check the layout of every page on mobile and fix overflow and misalignment; rewrite the home page title and description so they say what the shop sells; make sure product images load smoothly.

One last thing before launch: your own products (prompt 9)

The sample products are placeholders. The store is ready only once real names, sizes, ingredients, prices, stock and photos are in. With many products, put them into one table first and have the platform replace them in one pass.

Replace the product data with the table I give you: name, size, key ingredients, suitable skin type, price, stock, image path, in that order, keeping the existing categories.

FAQ

The three questions we hear most:

• What do cosmetics storefronts most often leave out? — The returns policy and the period after opening. Those two cause the most after-sales disputes, and they are a page-structure problem, not a copywriting one.
• Do I need my own lab reports? — Structurally, the page only has to display the qualifications you already hold. Which qualifications are required, and which claims you may make, depend on your market's rules.
• Can I sell sets and bundles? — Yes. Supporting “bundle products” (a set with its own price) covers it without any extra machinery.

Next step

If you want to walk these four stages yourself, start from any of the links below.