Real context.
Useful constraints.
A complete brief for this working fictional example.
TASK AND PERSON
A small studio needs to compare monthly and annual pricing without confusing totals or implied purchases.
DESIGN AND CONTENT
Build a pricing section for the fictional client portal Gather. Study the credited Oladapo Ridwan pricing reference. Use a true-white canvas, oversized left-aligned heavy Inter heading, outlined white outer plan cards and a navy #1b203d central featured card with lime #b4ff50 heading and action. Avoid invented popularity labels. Use quiet monthly/yearly controls, aligned prices and concrete feature lists. The three readable plans are Solo, Studio and Collective. Monthly prices are £12, £29 and £59; annual per-month equivalents £10, £24 and £49. Include concrete feature differences and identify Studio as the featured option without invented popularity claims.
BEHAVIOR AND STATES
The Monthly / Yearly toggle updates the displayed equivalent and annual billed total together (£120, £288, £588). Always say “billed yearly” near annual figures. Choose Solo, Choose Studio and Choose Collective each open a review dialog with plan, cadence, billing amount and a no-charge demo notice. There is no checkout. Close returns focus to the invoking button.
DELIVERY
Deliver a working responsive web interface, not a static image. Use local fictional data and in-memory state. No authentication, analytics, remote data requests, payments or persistent storage. Serve any bundled fonts and images locally. Include an obvious return-to-prompt link and clearly identify this as a demonstration. Keep every visible navigation item or action useful; do not add decorative fake controls.
ACCESSIBILITY AND RESPONSIVENESS
Use semantic headings, labelled inputs and real buttons. Touch controls must be at least 44 px high. Provide visible keyboard focus and announce updates with a status region. Do not rely only on color. Dialogs need a visible title, Escape dismissal, focus containment and focus restoration. At 390 px, preserve the reading order and all actions without horizontal page overflow. Respect reduced motion.
ACCEPTANCE
On desktop and a 390 px phone, complete the primary task described above, exercise an invalid or empty state, recover without losing unrelated inputs, and restore its initial state using the reset control where provided, or by refreshing. Verify displayed calculations and selected states against the fictional data. Report exactly what was checked; do not claim usability improvements or reliable independent regeneration.
ASSETS AND OPTIONAL VISUAL REFERENCES
No external images are needed; create the described surfaces and graphics in code. The written requirements define the scope; reference links are optional visual context.
Oladapo Ridwan: https://dribbble.com/shots/26967688-Pricing-page-Untitled-UI
Scroll to read. Copy includes the full prompt.Inputs, credit and review
