View the frozen task prompt
Build the most advanced commerce experience you believe could realistically define premium
eCommerce in 2030. You have ONE attempt — a single agentic run, no follow-up questions, no second
chances. Your work will be judged not only on correctness, but on originality, engineering
quality, commercial viability, accessibility, resilience, adaptability, AI-readiness, and your
ability to anticipate requirements that were never explicitly stated. Treat everything below as
the floor, not the ceiling. Exceed it. Surprise us.
Pick a fictional premium brand and product, and a small but believable catalog (one hero product
+ several related products with real data: prices, ratings, stock, attributes, copy). Give it a
point of view — a brand world a real customer would remember and buy into.
FLOOR — INTERACTIVE 3D PRODUCT CONFIGURATOR (WEBGL):
- Render the hero product in an interactive 3D configurator using the raw WebGL (or WebGL2) API.
Write your own shaders. NO 3D/graphics libraries (no three.js, babylon, regl, etc.).
- It must be animated (subtle motion / rotate / shader effect) AND interactive (drag to orbit,
move or change the light).
- A real configurator: at least three option groups (e.g. color/material, a component/part, and a
finish or add-on such as engraving). Each choice updates the WebGL scene/material in real time.
- The configuration is the source of truth: it drives the displayed price (per-option deltas),
availability, gallery and what gets added to the cart (reflected in the cart line item).
- Respect prefers-reduced-motion (calm static fallback) and keep the canvas accessible (labelled,
not a keyboard trap, non-WebGL fallback image and equivalent non-3D controls for every option).
FLOOR — REAL COMMERCE LOGIC (not just static markup):
- A working cart (add/remove, quantities, line items, live subtotal, tax, shipping rule with a
free-shipping threshold) shown in a mini-cart/drawer, and it MUST persist across a full reload.
- Variant-driven state: color/size updates price, availability, gallery and the 3D material;
handle out-of-stock and disabled combinations correctly.
- Dynamic pricing & promotions: discount with strikethrough, a "frequently bought together"
bundle with a combined/discounted price, at least one quantity break, and a coupon/voucher field
that validates codes and correctly adjusts the order total (accept valid, reject invalid).
- A size / fit recommendation computed from user input. Instant client-side search/filtering.
- Multi-currency AND multi-locale: switch at least two currencies and two languages with correct,
locale-aware price, number and date formatting (Intl APIs).
FLOOR — MULTI-STEP CHECKOUT:
- A real flow with distinct steps: cart review → shipping address → shipping/payment method
(mocked, no real payment) → order review → confirmation with an order summary and order number.
- Validate inputs (required fields, email/postal format) with inline, accessible error messages.
- The checkout total must exactly match the cart (items, discounts, coupon, tax, shipping).
FLOOR — AGENTIC & AI-READY:
- A built-in AI shopping assistant that performs MULTI-STEP actions in the UI and shows its steps
live (e.g. "build a bundle under <budget>, apply the best discount and add it to the cart", or
"recommend a size and check out"). It must take real actions (configure, add to cart, apply
coupon, advance checkout), not a scripted chat bubble, and the user must be able to take over /
undo at any point.
- Agentic-commerce ready: comprehensive, valid JSON-LD structured data (at least Product, Offer,
AggregateRating, BreadcrumbList — add more where it helps) plus semantic HTML and clear,
machine-readable state, so an EXTERNAL shopping agent could understand the catalog, prices and
availability and transact on the user's behalf. Design for both humans and agents.
RAISE THE CEILING — EXPERIENCE, DELIGHT & GAMIFICATION:
- Make this the greatest shopping experience a user has felt: emotional, premium, story-driven.
- Weave in tasteful gamification that fits a premium brand (e.g. rewards/loyalty, progress toward
a perk or free shipping, unlockables, streaks, a reveal/spin moment, badges, referral hooks) —
it must add genuine motivation and joy, never feel cheap, and never harm UX, performance or
accessibility.
- Add surprising, delightful details and micro-moments that a world-class team would ship.
RAISE THE CEILING — ANTICIPATE THE UNSTATED:
- Add what a top commerce team would obviously include even though it isn't listed here (think
trust signals, returns/shipping clarity, sustainability, social proof, post-purchase, support,
edge-case handling, empty/loading/error states). Inferring the right unstated requirements is
part of the score.
QUALITY BAR (hard gates, not nice-to-haves):
- Truly mobile-first: it must work flawlessly on a phone (touch targets, thumb reach, no overflow)
— not merely responsive. Fluid micro-animations, Dark Mode, full WCAG AA accessibility.
- Performance despite WebGL: target Lighthouse > 95 for Performance, Accessibility, Best Practices
AND SEO; cumulative layout shift < 0.1; no console or network errors.
OUTPUT CONTRACT (mandatory):
- Deliver a single runnable, static web app in the current working directory. Entry point is an
`index.html` in the root. Use your own CSS and JS (separate files are fine, relatively linked);
a multi-page or client-routed flow is fine as long as `index.html` is the entry point.
- NO external libraries, UI/CSS frameworks, or CDN dependencies of any kind (no Tailwind,
Bootstrap, Shadcn, jQuery, three.js, font CDNs, etc.). Everything must run fully offline.
- No build step: the app must work by serving the folder with a static web server.
There are no follow-up questions and only a single run. Start implementing immediately.
