主题 · 产品 · 入门

预约 / 排程

预约/排程站 = 服务列表、含时间槽的周/日条，以及确认摘要。

直达修改 Prompt →

Restore & reset

Book a moment that's just for you.

Facials, massage, and nails with the therapists our members love.

Signature Facial60 min · $120

Deep Tissue90 min · $160

Gel Manicure45 min · $55

MonTueWedThuFri

9:0010:3013:0015:30

ServiceSignature Facial

WhenMon · 10:30

Total$120

怎么向 AI 描述它

Build a clean appointment-booking site for a spa called "Lumina Spa".

STYLE
- Soft lavender #f3f1fb page, ink #1d1d1f text, violet accent #6c5ce7
- White surfaces, hairline #ececf0 borders, 8–10px radii, generous whitespace
- System sans; the accent appears on the primary button and the selected day

LAYOUT
- Top bar: "Lumina Spa" wordmark left, links Services / Team, a pill "My bookings" button right
- A service list: each row has a service name and a "duration · price" line
  - Signature Facial — 60 min · $120
  - Deep Tissue — 90 min · $160
  - Gel Manicure — 45 min · $55
- A calendar area: a week strip (Mon active, Tue, Wed, Thu, Fri) and a 4-up time-slot grid (9:00, 10:30, 13:00, 15:30)
- [tall] A booking summary: Service, When (Mon · 10:30), Total ($120), and a "Confirm booking" button
- [tall] Footer: "© 2026 Lumina Spa" + Gift cards · Policies

COMPONENTS
- Navbar, button, list, badge
- Service row: name + duration·price; day chip + time slot chip are selectable

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the service list and the time slots.

CHANGES
- Add a fourth service "Hot Stone" (75 min · $140)
- Add two more time slots (12:00, 17:00) for a 6-up grid
- Mark the most popular service with a small "Popular" badge

DO NOT
- Do not touch the calendar week strip or the summary
- Do not change the row anatomy (name, duration·price)

Build a clean, accessible appointment-booking site for "Lumina Spa".

STYLE
- #f3f1fb base, #1d1d1f ink, violet #6c5ce7 accent, white surfaces, hairline #ececf0, 8–10px radii
- System sans; type scale 9/10/11/12/14px

LAYOUT
- Sticky top bar: wordmark, Services / Team, pill "My bookings"
- Service list: name + duration·price (3 rows: Signature Facial 60min·$120 / Deep Tissue 90min·$160 / Gel Manicure 45min·$55)
- Calendar: week strip Mon(active) Tue Wed Thu Fri + 4-up slot grid 9:00/10:30/13:00/15:30
- Booking summary (tall pages): Service, When (Mon · 10:30), Total ($120), Confirm booking
- Footer: copyright + Gift cards · Policies

COMPONENTS
- Navbar, button, list, badge, link
- Service rows and slots are real radio-style controls with visible focus rings

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Full keyboard focus rings; every control has an accessible label
- prefers-reduced-motion: selection transitions settle instantly

MOTION
- Slot select: 120ms ease-out highlight; no layout shift
- No auto-advancing carousels

修改类 Prompt 只动目标，不碰页面其余部分。

提示

把流程压成三步：服务 → 时段 → 总价。一旦选定时段立即显示合计，确认时无意外。

另见

组件

导航栏→按钮→列表→徽章→

风格

极简→Fluent 设计→Material 设计→

主题

AI 聊天产品界面→AI SaaS 落地页→

预约 / 排程

Book a moment that's just for you.

提示

另见

组件

动画

风格

主题

Prompt

术语

反模式