What this prompt does
This prompt generates a complete hotel booking UI specification, component by component, following a documented industry pattern: hero imagery with date picker, room showcase, calendar with rate indicators, side-by-side room comparison, amenities grid, categorized reviews, and a multi-step booking flow with add-ons. The template bakes in hospitality-specific design rules — transparent pricing, no hidden fees, no small room photos — so the output skips generic UI advice and goes straight to decisions that affect conversion.
What makes it effective is the explicit anti-pattern list. Telling the AI what NOT to do (unavailable dates without explanation, tiny room photos, complicated cancellation language) is often more valuable than telling it what to do. The output reflects how real hotel bookers think: they compare rooms side-by-side, they care about what's included in the rate, and they read the cancellation policy before entering a card number.
The [framework] variable pulls actual code for the two most technically complex components — room showcase and availability calendar — which are the hardest parts to implement from scratch and the ones where a working starting point saves the most time.
When to use it
- Building a booking site for a boutique hotel, resort, or vacation rental property
- Redesigning a hotel's existing site that has poor mobile conversion or a clunky date picker
- Prototyping a hospitality platform where multiple properties need a consistent booking UI
- Creating a demo or pitch deck mockup for a hospitality client
- Adding accommodation booking to an existing travel or events platform
Example output
For hotel_type: boutique urban hotel, room_types: Standard Queen, Deluxe King, Corner Suite, target_guest: business and weekend travelers, room_count: 3, framework: React:
Hero: Full-bleed rooftop bar photo at dusk.
Overlay: "Check In / Check Out" date range picker (React DayPicker),
"Guests" dropdown, "Check Availability" button in gold (#C9A84C).
Room Showcase — Standard Queen:
Photo gallery: 5 images (room, bathroom, desk, view, detail)
From: $189/night | Max: 2 guests | 280 sq ft
Amenities: Fast WiFi, Nespresso, blackout curtains, smart TV
Availability Calendar:
Green = under $200 | Yellow = $200-299 | Red = $300+
Sold-out dates grayed with tooltip: "Sold out — try nearby dates"
Comparison Table (Standard Queen vs Deluxe King vs Corner Suite):
Size: 280 / 340 / 520 sq ft
View: City / City / Panoramic corner
Bed: Queen / King / King + sofa bed
Breakfast included: No / No / Yes
Rate from: $189 / $239 / $389
Pro tips
- Set
target_guestas specifically as possible — "business travelers on weekday stays" produces a different booking flow emphasis (desk setup, late checkout add-on, invoice billing) than "couples on anniversary trips." - The rate color-coding in the availability calendar only works if you tell the AI your actual price tiers. Add a line like
Rate bands: budget <$150, mid $150-250, premium >$250to get accurate threshold logic. - Pair this prompt with a payment integration prompt afterward — the booking flow section covers guest details, add-ons, and the payment step, but generating gateway-specific code (Stripe, Braintree, etc.) requires a separate focused prompt.
- For resorts, change
Color Moodin your run to lean on thenature-inspiredvariant explicitly — the template mentions it but won't default there unless you reinforce it with an amenities list that includes things like "private beach, outdoor pool, hiking trails." - If you're generating React code, specify your component library (shadcn/ui, MUI, Radix) in the
[framework]variable — e.g.,React + shadcn/ui— or the output will use plain JSX with inline styles that you'll have to rework.
