What this prompt does
This prompt frames the model as a senior product designer and front-end engineer tasked with designing a high-converting hotel room booking page that returns real component markup and class names, not vague wireframe talk. The booking page lives or dies on the comparison table, so the prompt is built to make refundable-versus-not and the real total visible side by side. Four variables shape it: [property_type] sets the context, [stack] decides the markup idiom, [addons] lists the upsells that feed the live total, and [currency] carries the currency and tax rule like "USD, 12% city tax."
The deliverables run from a sticky search bar with a date-range picker and guest stepper, through room-type cards with a compare toggle, into the comparison table covering size, bed, view, inclusions, refundable status, and price per night. Add-on selectors for [addons] update a live total, and a cancellation-policy block sits beside a transparent breakdown — room times nights, taxes, fees — in [currency]. By wiring add-ons and taxes into one live total early, the price never jumps at checkout, which is where bookings are lost. Because the prompt asks for real markup and class names for the chosen stack rather than wireframe talk, the comparison table, carousel, and add-on selectors arrive as concrete structure you can refine, and the accessibility requirements — focus order and ARIA on the carousel and table — are baked in instead of bolted on after the interactive parts are already built.
When to use it
- Building a hotel or property booking page that needs a room comparison
- Making refundable versus non-refundable and the real total visible together
- Wiring
[addons]upsells into a live, transparent total - Encoding tax rules through
[currency]so the breakdown is honest - Producing real markup with class names for your
[stack] - Specifying accessibility for the carousel and comparison table
Example output
You get a component tree plus annotated markup with class names for your stack: the sticky search bar with validation for sold-out dates, room-type cards with an image carousel and compare toggle, the comparison table, the add-on selectors that update the total, the cancellation-policy block, and the transparent breakdown in your currency. It also includes mobile layout notes and accessibility details such as focus order and ARIA on the carousel and table.
Pro tips
- Wire
[addons]and taxes into one live total early so the price never jumps at checkout — that jump is where bookings are lost. - Put the real tax rule in
[currency], like "USD, 12% city tax," so the breakdown is accurate rather than a placeholder. - Lead with the comparison table; people abandon when they cannot see refundable-versus-not and the total side by side.
- Set
[property_type]so room types and inclusions fit the venue. - Ask for the carousel and table accessibility (focus order, ARIA) explicitly; retrofitting it later is painful.
- If the markup is heavy, ask the model to extract the comparison table into its own component for your
[stack].
