Glowbench

A mock-up of the homepage, drawn from this design’s layout, palette and typefaces. A build follows the full prompt below.

Start from this templateRead the build prompt

Typefaces

Ubuntu Sans is a clean, modern humanist UI face with an app-like clarity that keeps focus on the photos and prices.

• Ubuntu SansHeadings: section titles 36px 600, brand 24px
• Ubuntu SansBody: body 16px, 14px meta

Who it is for

• Beauty salons and spas
• Massage and skincare studios
• Clients booking multiple treatments
• Salon owners managing schedules

Layout

1. Header: blue rounded-square logo + name, 'Services' dropdown, center search bar, cart and account pill buttons
2. Category pill tabs (All, Hair, Massage, Nails, Skincare) with URL sync
3. Result count and sort control (newest first)
4. 4-column service grid: rounded photo, name, 'From €X'
5. Service detail with vertical thumbnail strip + main image, duration options, add to cart
6. Cart and checkout: horizontal date strip and time slots, guest details
7. Account area: bookings with reschedule/cancel, leave review
8. Admin: bookings table with lifecycle statuses, review moderation, notification bell, business settings (currency, hours, cancellation policy)
9. Blue footer with four columns (brand, services, support, contact)

Palette

clean, modern, efficient, calm, commercial. It feels like an e-commerce shop for appointments.

• background#f6f7f9
• text#181b20
• primary blue#1a5fd6
• selected tab tint#c3d6f7
• card#ffffff
• border#e5e7eb
• bright blue (decorative)#2478ff
• meta text#5b6270
• input border#8a919c

Every checked pair, measured again

As vibld’s tokens

The palette on the fifteen colour tokens vibld styles a project with, each text colour on the fill it is read on. Marked tokens are solved from the palette, because no swatch held that role at 4.5:1.

• background
• card
• muted
• primary
• secondary
• accent
• destructive *

Type scale

Display

Ubuntu Sans SemiBold 600, 36px section titles, 24px brand

Body

Ubuntu Sans 16px, weight 400, line-height 1.5; 14px meta in #5b6270

A single neutral UI font; the app-like clarity puts the focus on photos and prices.

Spacing and imagery

Full-width 1232px grid, 4-column cards with 32px gaps, compact 24px vertical rhythm, 8px radius images, pill tabs and buttons.

Soft, bright lifestyle photos of treatments and products in rounded frames; no illustration; solid blue footer.

Components

• Header search
• Cart button with count
• Account dropdown
• Category pill tabs synced to URL
• Sort control
• Service card
• Image gallery with vertical thumbnails
• Duration selector
• Multi-service cart
• Date strip + time slot picker
• Guest checkout form
• Booking list with reschedule/cancel
• Star rating review form
• Admin bookings table with status workflow
• Review moderation queue
• Realtime notification bell
• Business settings form

Interactions

• Category tabs filter and update URL
• Search services/categories
• Add multiple services with durations to cart
• Time slots computed from durations and business hours
• Guest checkout or sign in
• Reschedule to a new slot
• Admin approves/rejects reviews
• Realtime unread badge on new bookings/reviews
• Toasts for all actions

Data

• Service{id, name, category, description, images[], options[{durationMin, price}], createdAt}
• Category{id, name, slug}
• CartItem{serviceId, durationMin, price}
• Booking{id, userId?, guestName?, guestEmail?, items[], start, end, status: pending|confirmed|completed|cancelled}
• Review{id, bookingId, rating, comment, status: pending|approved|rejected}
• Notification{id, type, refId, read, createdAt}
• Settings{currency, hours[{day, open, close, closed}], cancellationHours}
• UserRole{userId, role: admin|customer}

Build prompt

The baseline every prompt in the catalog assumes, then this design’s own ten sections, from goal to guardrails.

Copy the baseline and build prompt

### How to use these prompts
Paste a template's build prompt into your coding agent as the first message. Each prompt names its own stack, tokens and acceptance criteria; the rules below apply to all of them and can be prepended once per project.

### Engineering baseline
- TypeScript strict mode, no `any`, small typed components, feature folders, and one source of truth for design tokens (CSS variables consumed by Tailwind).
- Validate every input with a shared zod schema on the client and again on the server or edge function. Never trust client-side checks alone.
- Show loading, empty and error states for every async view. Surface errors in plain language with a retry, and log details to the console in development only.
- Keep secrets out of the bundle. Only publishable keys (for example a Supabase anon key) belong in client code; service-role keys, API keys and webhooks live in server or edge-function environment variables.

### Data and auth baseline (full-stack templates)
- Enable Row Level Security on every table before inserting data. Default-deny, then add owner-scoped policies (`auth.uid() = user_id`) and explicit role checks for admin views.
- Store roles in a separate table checked by a security-definer function, never in a user-editable profile field.
- Upload files to private storage buckets with size and MIME limits, and serve them through signed URLs.
- Rate-limit public endpoints (forms, auth, AI calls) and add a honeypot field or captcha to anonymous forms.
- Take payments through a hosted checkout and verify webhooks by signature. Never handle raw card data.

### Accessibility and UX baseline
- Target WCAG 2.2 AA: 4.5:1 contrast for normal text and 3:1 for large text, input borders, focus rings and meaningful icons or chart lines. Every palette in this catalog lists its verified pairs; re-check with a contrast tool after any colour change.
- Keep body text at 16px or larger with 1.5 line height, nothing below 12px, no light weights under 24px, and uppercase only for short labels.
- Give every interactive element a visible focus ring, full keyboard support, semantic landmarks, labelled form fields, and alt text on meaningful images.
- Respect `prefers-reduced-motion` for every animation. Give drag-and-drop and carousels keyboard and button alternatives.
- Build mobile-first and test at 375px, 768px and 1280px.

### Content guardrails
- Use original copy, fictional sample data and placeholder or licensed imagery. Do not reuse another product's name, logo, screenshots or marketing text.
- Label demo testimonials and metrics as samples. Collect the minimum personal data the feature needs.

### Goal
Build "Glowbench", a shop-style booking platform for a salon and spa. Clients add treatments to a cart, pick a slot that fits the combined duration and check out as guests or members; the owner manages bookings, reviews, alerts and settings.

### Stack
React 18 + TypeScript + Vite, Tailwind CSS, shadcn/ui (Tabs, Command for search, Sheet for the cart, Popover, Table, Badge, Dialog, Form, Toast via Sonner), lucide-react, date-fns and date-fns-tz. TanStack Query and react-hook-form + zod. Supabase: Auth (email; guest checkout allowed), Postgres (categories, services, service_options, bookings, booking_items, reviews, notifications, settings, user_roles), Realtime (notifications), and an Edge Function `get-slots` / `create-booking` that computes and locks availability server-side.

### Pages & layout
1. **Header**: logo, a "Services" dropdown, a central search (Command palette), a "Cart" pill with a count badge and an "Account" dropdown.
2. **Catalog**: category pill tabs synced to `?category=`, a result count, a sort Select and a 4-column grid of cards (rounded photo, name, "From {price}").
3. **Service detail**: vertical thumbnail strip with the main image, description, duration and price options, and "Add to cart".
4. **Cart Sheet**: items with durations, total time and price, and "Choose time".
5. **Checkout**: horizontal date strip, time slot grid for the total duration, then guest details (name, email, phone) or sign in, then confirm.
6. **Account**: upcoming and past bookings with reschedule and cancel (respecting the policy), plus a review form after completion.
7. **Admin**: bookings table (filters, status transitions pending → confirmed → completed or cancelled), reviews moderation queue, a notifications bell with unread count, and settings (currency, weekly hours, cancellation window).
8. **Footer**: solid blue with four columns.

### Design system
Tokens: `--background: #f6f7f9`, `--foreground: #181b20`, `--primary: #2478ff`, `--primary-strong: #1a5fd6`, `--primary-tint: #c3d6f7`, `--card: #ffffff`, `--border: #e5e7eb` (decorative), `--input-border: #8a919c`, `--muted-foreground: #5b6270`, `--radius: 0.5rem`, pills at 9999px. Font: Ubuntu Sans 400/500/600. Scale: 36/24/18/16/14/12px. Spacing: 8px base, 32px grid gaps, 48px section spacing. Motion: 150ms hovers and 250ms sheet slide. Light theme, with dark admin tokens: `--background: #0f1115`, `--foreground: #e6e8eb`, `--muted-foreground: #9aa3ae`, `--primary: #6b93e8`.

### Components & interactions
- Tabs: active tint pill; arrow-key navigation; the URL updates.
- Search: debounced, grouped results for services and categories, with an empty state.
- Slot grid: loading skeleton, disabled unavailable slots, a "No times this day" empty state, and times shown in the business timezone.
- Cart: quantity is one per service with a duration Select; remove with undo toast.
- Checkout submit: loading, then a success page; on a race condition, "That time was just taken" with refreshed slots.
- Admin table: status Select with confirmation Dialog for cancel; the realtime bell badge increments.
- Every mutation shows a success or error toast.

### Data & state
Tables are listed above. `bookings(id, user_id null, guest_name, guest_email, start_at, end_at, status, total_price, currency)`, `booking_items(booking_id, service_id, duration_min, price)`, and a unique exclusion constraint on overlapping `tstzrange` for the single-resource case. The cart lives in React context plus sessionStorage. Server state goes through TanStack Query.

### Accessibility
White on `#2478ff` fails AA, so every filled button, link and the footer use `--primary-strong`. Tabs, Command and Sheet use Radix semantics with focus management. Slot buttons are labelled with the full date and time. Price text includes the currency code for screen readers. Form errors are linked to their fields, the notification count is announced politely, and images have treatment-descriptive alt text. Verified contrast: meta #5b6270 on #f6f7f9 = 5.72:1; button #ffffff on #1a5fd6 = 5.75:1; tab #181b20 on #c3d6f7 = 11.74:1; input border #8a919c on #ffffff = 3.18:1; dark muted #9aa3ae on #0f1115 = 7.4:1.

### Security
RLS: services, categories and approved reviews are public-read. Customers read and update only their own bookings and reviews, and guests access a booking through a signed, expiring token link emailed to them. Admins are checked via `user_roles` with a security definer `has_role()`. Slot computation and booking creation happen only in the Edge Function, with zod validation, overlap checks and rate limiting. Review text is escaped. Service images are admin-only uploads (images under 5 MB). Payments, if added, go through hosted Stripe Checkout.

### Performance & SEO
Code-split the admin and lazy-load catalog images with fixed aspect ratios. Add per-service meta and OG images and BeautySalon JSON-LD.

### Guardrails
- Use original copy and placeholder imagery only, with no real salon or product brands.
- Show no fabricated reviews; seeded ones are flagged as demo.
- Collect only the guest details needed.
- Keep components small and typed, with no `any`, and show errors visibly.
- Done when: multi-service slots respect total duration; overlapping bookings are impossible; guests can book and manage via the link; admin status changes and review moderation work; realtime notifications appear.

Open the builderAll templatesThis palette on its own