What this prompt does
This prompt builds a complete multi-step booking flow for spas, salons, and grooming studios — service selection, therapist or stylist picker, date and time slot grid, booking summary, add-ons, and confirmation — in a single structured generation. The design contract that separates this from a generic scheduling prompt is the anti-pattern list baked directly into the template: clinical layouts, login walls before browsing, hidden pricing, and aggressive upsells are explicitly forbidden. Those constraints shape the component hierarchy, not just the color choices.
The Industry Design Rules section instructs the AI to treat the booking flow as an extension of the self-care experience. Step transitions are smooth, the stylist carousel includes portfolio samples and next-available-slot data, and the service menu shows duration and price from the first screen. The [framework] variable scopes the output to component code for the service menu and stylist picker — the sections most likely to need custom animation and layout — rather than generating wireframe prose.
When to use it
- You are building a booking page for a day spa, nail salon, lash studio, or barbershop and need the full component set in one pass.
- Your existing booking flow was built on a generic scheduling tool and feels transactional — you want to redesign the UI layer to match the brand without touching the backend.
- You are a freelancer quoting a beauty client and need a high-fidelity prototype fast, before committing to a full build.
- You want to present a custom-branded alternative to Acuity or Booksy that the client actually owns.
- You are building a multi-location spa brand and need consistent UI that scales across locations and service menus.
Example output
Service Menu — "The Ritual Studio"
─────────────────────────────────
[FEATURED] Signature Glow Facial 75 min $145
Vitamin C + gua sha lift. Best seller for first-timers.
Swedish Full Body Massage 60 min $110
Hot Stone Add-on +20 min +$45
Stylist / Therapist Step
─────────────────────────
● Sofia K. — Esthetics + Brow Design ★ 4.9 (212 reviews)
Next available: Today 3:30 PM
[View portfolio ›]
● Dana R. — Massage Therapy ★ 4.8 (178 reviews)
Next available: Tomorrow 11:00 AM
The generated component (framework determined by your [framework] variable) wraps the stylist cards in a horizontal scroll carousel with CSS transitions on step change. Setting [framework] to "React + Framer Motion" versus "Livewire 3 + Alpine.js" produces meaningfully different animation and state-management code, not just syntax differences.
Pro tips
- Set
[business_type]to something specific like "unisex barbershop in Brooklyn" — the prompt adjusts color mood and copy tone away from rose and champagne when the business type signals a different audience. The specificity does real work here. - If your client's brand is masculine or gender-neutral, put the audience note in
[business_type](e.g., "men's grooming studio, modern industrial aesthetic") rather than burying it in the services list. That variable is where the AI anchors tone and palette decisions. - Use
[framework]as "Livewire 3 + Alpine.js" if you are building on Laravel — the component output integrates with Livewire component lifecycle and uses Alpine for transition directives, which is the correct pattern for that stack. - The add-ons section is intentionally subtle by the template's own anti-pattern rule. If your client's revenue model depends on upsells, add an explicit modifier like "moderate upsell emphasis permitted" when filling in the prompt — otherwise the output will suppress them.
- The stylist picker ships with placeholder availability logic. Before deploying, replace the static slot data with a call to your booking backend's availability endpoint. The component structure makes that swap straightforward because the data and the display are separated in the generated output.
