An original editorial brief with reference-guided visual styling for this working shop and checkout. The full prompt covers layout, validation, totals, review, recovery, and phone behavior.
Build FIELD / GOODS, a fictional single-product checkout, as a responsive working interface. Help a visitor understand the total, enter delivery details, review their choices, and finish a clearly labelled local demonstration. The product is the Everyday Tote, Natural canvas, priced at £48 including VAT. No payment details, account, remote service, analytics, or real orders are required.
DESIGN AND HIERARCHY
Use Inter throughout, a forest-green outer presentation canvas, white store surfaces, dark green-black text, pale neutral product-image areas, thin gray-green separators, and pill-shaped forest-green primary buttons. Use this storefront composition (an optional supplied product-page reference can guide proportions): compact store navigation, breadcrumb, large square product photograph with four thumbnails on the left, and product information on the right. Adapt the composition to the fictional Fieldgoods tote; do not reproduce the retailer logo, headphone product, ratings, financing, or scarcity claims. Header has Fieldgoods, section navigation, a link to the prompt, Guest label, and a live Bag count. The default page is the product page, followed by Delivery, Review, and Complete. Delivery and review retain the same green visual language.
PRODUCT PAGE
Show The Everyday Tote, a short description, Natural canvas material, £48.00 VAT-inclusive price, and one supported finish labelled Natural canvas / One size. Do not imply unavailable colors. Four accessible thumbnail buttons switch between the full photo and crop details of handles, canvas, and base; they are views of one supplied image, not four different photographs. Mark selected views with aria-pressed and visible borders. Keep quantity 1–4, a primary Continue to checkout button, and an outlined Add to bag button. Add to bag updates the header count and announces quantity and total in a status message without navigating; continuing or opening Bag enters Delivery and preserves quantity. Show standard delivery information, the fictional-demo notice, and the prompt link. Checkout includes Back to product with preserved state. Reset and Start again return to the default product page and clear all state. On phones, stack gallery before product controls, keep the cart action visible, and avoid horizontal overflow.
DESKTOP AND PHONE LAYOUT
On desktop, put the delivery form on the left and a persistent order-summary card on the right. The summary shows the supplied generated tote image, name, material/color, unit price, quantity 1–4 with minus/plus buttons, item subtotal, delivery charge, and final total. State “VAT included” without inventing a tax breakdown. On a 390 px phone, stack the form and summary in a clear reading order with no horizontal overflow; keep the total close to the main action through an in-form total row as well as the summary. Do not hide required fields behind an unexplained menu.
DELIVERY FORM
Group the form into Contact and Delivery address. Required fields are email, first name, last name, address, city, and UK postcode. Country is a visible fixed United Kingdom value; do not offer unsupported countries. Optional fields should not be invented. Use persistent labels, meaningful placeholders, input types, visible focus, and error associations. Use fictional details only and disable browser autofill for this demonstration. “Use sample details” fills alex@example.com, Alex Morgan, 12 Sample Street, Norwich, NR1 1AA. Clearly identify these as fictional sample values. A reset action clears the form, shipping choice, quantities, errors, and flow state.
Validate on submit: all required fields must contain non-whitespace text, email must have a plausible local@domain form, and postcode must follow a basic UK postcode pattern. This is local format validation, not deliverability or address verification. Show an error beside each invalid field and an error summary that names the fields and lets the user focus them. Focus the first invalid field. Preserve valid inputs after an error. Editing an erroneous field clears its current message so the user can correct it and resubmit.
DELIVERY AND TOTALS
Offer two visible radio options: Standard delivery, 3–5 working days, Free; Express delivery, 1–2 working days, £6. These are fictional demonstration options. Selecting one immediately updates the summary and in-form total. Totals must equal £48 × quantity plus delivery, formatted in GBP. Limit quantity to 1–4 and disable minus/plus at their bounds. Do not use a discount field, fabricated scarcity, countdowns, ratings, or hidden fees.
REVIEW AND COMPLETION
The primary action is “Review order — £[total]”. After validation, show a short labelled loading state and then a review step. Preserve all form, quantity, and delivery choices. Review shows the delivery contact/address, chosen delivery option, total, and Edit details action. The primary action becomes “Finish demo”; it completes a fictional flow without creating an order. Completion clearly says “This was a demo. No order was placed and no payment was taken.” Offer Start again and a link to the prompt. Do not use a payment logo or claim secure payment processing when no payment exists.
Include a small Demo controls disclosure with a “Simulate a review error” checkbox. When enabled, a valid submission shows a recoverable in-page error after the loading state and stays on Delivery. A Retry review button uses the same details. Toggling the simulation off and retrying must reach Review without losing data. Surface state changes to assistive technology. Disable submission while busy to prevent repeated transitions.
ACCESSIBILITY AND LOCAL STATE
Use native form, labels, fieldsets, radios, buttons, and correctly associated error descriptions. Give icon-only quantity buttons accessible names and at least 44 px control height. Ensure keyboard navigation follows the visual order. Focus the relevant heading when moving to Review or Complete; focus the first invalid field when validation fails. The form must work without relying on color alone. Respect reduced motion. Keep state in memory, reset on refresh, and do not send or persist any entered values.
ASSETS AND CREDIT
Use the supplied local AI-generated tote image as fictional concept imagery. Do not fetch runtime assets. Use the written layout and behavior requirements above as the complete brief. Do not present this as a proven conversion case study.
ACCEPTANCE
On desktop and a 390 px phone, a reviewer can submit an empty form and find its errors, use sample details, select Express, set quantity 2, and see £102 in the summary and primary action. Simulate a review error, turn the simulation off, retry, review the same choices, return to edit without data loss, and finish the demo. Reset returns to Product with quantity 1, Standard, an empty form, and an empty demo bag. Record actual checks and limitations; do not claim full accessibility compliance, address verification, conversion gains, or reliable independent regeneration.
Scroll to read. Copy includes the full prompt.