Crea un sito di prenotazione premium con Claude Code

Claude Desktop

Claude Code crea il tuo sito nell'app desktop. Una build completa è una sessione lunga, quindi usa un piano Claude a pagamento con margine.

Scarica Claude Desktop

https://claude.ai/download

Node.js

Scarica la versione LTS. Claude la usa per creare e controllare il tuo sito.

Scarica Node.js

https://nodejs.org/en/download

Account GitHub

Gratis. Il codice del tuo sito vive qui, e Hostinger esegue il deploy da qui.

Crea un account GitHub

https://github.com/signup

Account Supabase

Il piano gratuito basta. Consente due progetti attivi: se ne hai già due, metti in pausa quello che non usi. Conserva i tuoi servizi, gli orari, le prenotazioni e l'accesso al dashboard.

Crea un account Supabase

https://supabase.link/r4gdwhi

Account Resend

Il piano gratuito invia 100 email al giorno e 3.000 al mese. Ogni prenotazione ne invia diverse: il codice, la richiesta ricevuta, il tuo avviso e la conferma.

Crea un account Resend

https://resend.com/signup

Il tuo dominio

Il tuo sito vive su questo dominio, e le e-mail di prenotazione partono da qui. Un indirizzo gratuito come Gmail non può inviarle. Compri il dominio con il tuo piano Hostinger? Prendi il piano prima del Passo 3.

Hosting Hostinger

Ti serve l'hosting nel Passo 5, quando il tuo sito va online.

Scegli un piano Hostinger

Usa il piano Business (Unlimited) o un piano Cloud: solo questi eseguono Node.js Web Apps, fino a 5 su Business e 10 su Cloud.

Scegli il tipo di attività

La tua parte. Il Booking Engine è lo stesso per tutte e tre: il design, i testi e i servizi di esempio sono pensati per quella che scegli.

Che tipo di attività è?

Salone di parrucchiere

Tagli, colore e styling, con i servizi da salone già pronti del motore.

Build a complete, premium booking website for **{{BUSINESS_NAME}}**, a hair salon in {{CITY}}, in this empty folder. The booking system is an installed package — the **Profit Studio Booking Engine**. It owns availability, bookings, booking emails and the owner's dashboard. You design and build the public website around it, and nothing the engine provides. ## 1. Set up 1. Scaffold a Vite + React + TypeScript app **in the current folder**: `npm create vite@latest . -- --template react-ts --no-interactive`, then `npm install`. create-vite stops without an error when the folder is not empty — a `.DS_Store` or a `.claude/` folder is enough — so check that `package.json` now exists. If it does not, scaffold into a new subfolder the same way, move all of its files (dotfiles included) up into this folder without overwriting or deleting anything already here, and remove the empty subfolder. Remove the template's demo content. 2. `npm install --save-exact @profitstudio/booking-engine@2.0.0-beta.1`, then `npx booking-engine init --preset hair-salon`. 3. Read `node_modules/@profitstudio/booking-engine/docs/BUILD-A-SITE.md` once: it has every file to wire, the booking API and the error table. Open `docs/INTEGRATION.md` only at a section it names, and nothing else in the package. 4. Wire the engine as BUILD-A-SITE §1 shows, with the engine's `hairSalonPreset` as `preview.preset`; in `preview.business` use `{{BUSINESS_NAME}}`, the time zone `{{TIMEZONE}}` and a plausible placeholder `contact` in {{CITY}}. The dashboard on `/admin/` mounts `<BookingAdmin engine={engine} siteUrl="/" content={siteContent} />` and gets only your brand accent (light and dark) in `src/admin-theme.css`. One public page (sections and an in-page booking flow), no client-side routes. No backend yet: no Supabase project, no `supabase` commands, no `.env.local` — the site runs in preview mode with a visible “Preview — sample data, bookings are not saved” banner. ## 2. Design — the creative part Make it feel like a real, distinctive hair salon, not a template: - **Style direction:** {{STYLE_DIRECTION}} - **Audience:** Local clients, mostly 25–55, booking cuts, color and styling — most of them on a phone, often in a hurry. - **Tone:** Confident, warm and expert. Never clinical, never luxury cliché. - **Sections:** - Hero with the salon's personality and one clear “Book an appointment” action - Services and prices loaded from the engine (duration, price, “from” prices), grouped sensibly — with the owner's optional service photos (cut, colour, styling work) shown in the site's own style when a service has one, and a complete typeset menu without them - The team / stylists — placeholder bios and names the owner will edit, clearly marked - The salon space and approach (what makes this salon different) - Testimonials — clearly marked as placeholder examples, never presented as real reviews - Opening hours (from the engine) and location / contact (from the engine's business contact) - The booking flow - Footer with a discreet “Staff login” link to /admin/ - **Booking experience:** - Service first, then the date and time together, then details, then the email code, then confirmation - A real month calendar with month and year navigation that shows each day's status from the engine — open, only a few times left, fully booked, closed or past — loaded with one getAvailability call per visible month (INTEGRATION.md §8 and the calendar helpers in §9); on phones a week strip with the same statuses and a “Month” view - Times grouped as Morning / Afternoon / Evening (a segmented switch with counts when there are many); the chosen time continues inline (“1:30 PM — Continue”), and a “soonest time” shortcut comes from data already loaded - Keep the chosen service, duration, price, date and time visible at every step — a summary beside the calendar on wide screens, a sticky bar on phones - The code step feels like part of the salon's flow: the masked address the code went to, one large code field, “Send a new code”, “Choose another time”, and a reminder to check spam - Designed states, not error dumps: times loading, times that could not load (Try again), a time just taken by someone else (fresh times), a fully booked day (the next available day), a closed day, and online booking switched off (contact details) - Pending wording: “Request received — we'll confirm your appointment shortly.” Confirmed wording: “You're booked.” - **Imagery:** Real, coherent photography is part of the design, not an extra: the hero, the salon space, details of the work (hands, tools, colour, texture) and the storefront, all in one photographic direction. Show hair and craft, never posed stock smiles. Never present a photographed person as one of the salon's stylists: sample team cards show work, not faces, and stay labelled as samples until the owner adds real portraits. Motifs (scissor, comb, hair-texture curves) frame the photos; they do not replace them. Service photos are the owner's (added per service in the dashboard): present them as part of the menu's design, never as stock fillers. - **Avoid:** - A generic SaaS landing page look, purple gradients, glassmorphism everywhere - Invented awards, certifications, review counts or ratings - Medical or clinical styling - Hard-coded services, prices or opening hours (they come from the engine) - **Words:** call customers “clients” and bookings “appointments”. How: - **Identity first.** A short `DESIGN.md`: the concept in one sentence, a display face with character and a readable text face (both self-hosted with `@fontsource`), colour tokens with every text/background pair at 4.5:1 or better, a type and spacing scale, how motion behaves. Every value lives in one CSS file of custom properties. Two businesses in this niche with different style directions must not look like the same layout recoloured. Plain CSS, no UI kit. - **Composition.** Varied rhythm — full-bleed moments, asymmetric grids, one focal point per screen; designed for phones first, from 320 px to wide screens; keyboard-accessible with visible focus; motion of 150–600 ms with a purpose, off under `prefers-reduced-motion`. - **Engine data, never hard-coded:** services, prices, opening hours, contact details and availability (BUILD-A-SITE §3). “Open now” lines come from `getOpeningTimes`. Show each service's optional `image` in your own style when it has one, and make the services section complete with none. - **Owner-editable copy.** Declare the texts, photos, logo, brand colours and heading style the owner may change in `src/content/site.ts` (BUILD-A-SITE §2), with your copy and photos as defaults, render the page from it as text, and bake it in with the Vite plugin. - **Photos.** Free, properly licensed photographs (Unsplash or Pexels licence), at most six, downloaded into `photos/source/` and recorded in `PHOTOS.md` — never hot-linked, never a photographed person presented as staff (sample team cards show the work and say “Sample photo”; content-list images cannot have defaults, so sample cards may be text-only or share one site image). Search terms that work: “hair salon interior”, “hairdresser cutting hair close up”, “hair colour bowl brush”, “salon chair mirror”. Prepare them with `npx booking-engine photos` (BUILD-A-SITE §5): AVIF + WebP at two or three widths, `width`/`height` on every `<img>`, fixed `aspect-ratio` frames with `object-fit: cover`, the hero eager with `fetchpriority="high"`, everything else lazy. When no fitting photo exists, design the frame without one. - **The booking flow** follows BUILD-A-SITE §4 with the calendar helpers: server slots only, the business time zone, the two steps (`requestBooking`, then the code and `verifyBooking`), every error in the table, contact details when online booking is off, success only after `verifyBooking` returned `ok: true`. On a phone: the step's name always visible, the choice and price in view, 44 px targets, the right input types, inline validation, a loading state on the control that waits, a code field that accepts a pasted code, focus on each new step's heading. - **Every “Book” button always answers.** Whatever the booking section is showing — loading, the flow, online booking off, no services, a calendar that failed to load — each Book/CTA button on the page scrolls to the booking section and moves focus to its heading, so the visitor sees that state's message and the shop's contact details. Never route a CTA only through the flow component (it is not on the page in those states), and never leave a click that does nothing. Check it with online booking off as well as on. ## 3. Work efficiently The viewer's Claude plan pays for every step, so keep the session lean: - Read BUILD-A-SITE.md once; don't re-read files you wrote or explore the package. - Photos: start from the leads above or spend at most about ten minutes searching; judge candidates on one contact sheet of small thumbnails, not one by one at full size. - Screenshots: about eight in all — desktop and a 390 px phone (device emulation), downscaled to at most 1280 px wide. Don't capture very long pages at full resolution. - Don't simulate the engine's error answers to see every state: build each state from the error table and check it in the code. - `npm run build` and `npx booking-engine doctor --dist dist` once midway and once at the end; afterwards fix and rerun only what failed. ## 4. Finish - `CLAUDE.md` in the project root: the engine's boundaries (from `BOOKING_ENGINE.md`), where the design lives, and that new booking features need a new engine version, never custom database code. - Done when: `npm run build` and `npx booking-engine doctor --dist dist` pass; every field in `src/content/site.ts` is used and the page looks as designed with the defaults; the key sections show real photos (`PHOTOS.md`, AVIF/WebP with dimensions; `DESIGN.md` matches the tokens); `npm run dev` serves `/` with the preview banner and a booking flow that reaches the code step and the honest preview message, and `/admin/` shows “Connect your backend”. Stop the dev server. - End with a short summary: what you built, the design choices, and anything in the engine's documentation that was unclear or wrong.

Barbiere

Tagli, sfumature, cura della barba e rasature, prenotati in fretta dal telefono.

Build a complete, premium booking website for **{{BUSINESS_NAME}}**, a barbershop in {{CITY}}, in this empty folder. The booking system is an installed package — the **Profit Studio Booking Engine**. It owns availability, bookings, booking emails and the owner's dashboard. You design and build the public website around it, and nothing the engine provides. ## 1. Set up 1. Scaffold a Vite + React + TypeScript app **in the current folder**: `npm create vite@latest . -- --template react-ts --no-interactive`, then `npm install`. create-vite stops without an error when the folder is not empty — a `.DS_Store` or a `.claude/` folder is enough — so check that `package.json` now exists. If it does not, scaffold into a new subfolder the same way, move all of its files (dotfiles included) up into this folder without overwriting or deleting anything already here, and remove the empty subfolder. Remove the template's demo content. 2. `npm install --save-exact @profitstudio/booking-engine@2.0.0-beta.1`, then `npx booking-engine init`. 3. Read `node_modules/@profitstudio/booking-engine/docs/BUILD-A-SITE.md` once: it has every file to wire, the booking API and the error table. Open `docs/INTEGRATION.md` only at a section it names, and nothing else in the package. 4. Wire the engine as BUILD-A-SITE §1 shows, with this site's own preset as `preview.preset` — write it in `src/lib/preset.ts` and export it as `sitePreset` (BUILD-A-SITE §1) with the words “clients” and “appointments”; in `preview.business` use `{{BUSINESS_NAME}}`, the time zone `{{TIMEZONE}}` and a plausible placeholder `contact` in {{CITY}}. - Write `sitePreset` from this sample data (prices are US dollars: use the local currency at a plausible local price level; `id` "barbershop", `label` "Barbershop"): - Classic Cut · 30 min (+10 min buffer) · 40 · “Scissor or clipper cut, styled and finished with a neck shave.” - Skin Fade · 45 min (+10 min buffer) · 45 · “Tight fade blended to the skin, shaped on top, sharp line-up.” - Beard Trim & Line-up · 20 min (+5 min buffer) · 25 · “Shape, trim and a hot-towel line-up for the beard.” - Cut & Beard · 60 min (+10 min buffer) · 60 · “A full haircut and beard shape in one sitting.” - Hot Towel Shave · 40 min (+10 min buffer) · 45 · “Straight-razor shave with hot towels and a cool finish.” - Buzz Cut · 20 min (+5 min buffer) · 25 · “One length all over, cleaned up at the neck and ears.” - Kids Cut (under 12) · 30 min (+10 min buffer) · 28 · “A patient, quick cut for younger clients.” - Opening hours: Tuesday to Friday 10:00–19:00, Saturday 09:00–17:00; closed Sunday and Monday - Policies: 15-minute slot interval, at least 1 hour's notice, up to 30 days ahead, the owner confirms each request, a phone number is required; every other policy as in BUILD-A-SITE §1 The dashboard on `/admin/` mounts `<BookingAdmin engine={engine} siteUrl="/" content={siteContent} presets={[sitePreset]} />` and gets only your brand accent (light and dark) in `src/admin-theme.css`. One public page (sections and an in-page booking flow), no client-side routes. No backend yet: no Supabase project, no `supabase` commands, no `.env.local` — the site runs in preview mode with a visible “Preview — sample data, bookings are not saved” banner. ## 2. Design — the creative part Make it feel like a real, distinctive barbershop, not a template: - **Style direction:** {{STYLE_DIRECTION}} - **Audience:** Neighbourhood regulars and newcomers, mostly 18–50, who book a cut every three to five weeks — almost always on a phone, often the same day. - **Tone:** Easygoing, sharp and confident; plain-spoken and welcoming to everyone. No macho bravado, no “gentlemen's club” clichés. - **Sections:** - Hero with the shop's character and one clear “Book a chair” action, plus the soonest open time for the first service on the menu (named) when it is known - The menu: services, durations and prices loaded from the engine, readable at a glance like a board on the wall — with the owner's optional service photos (cuts, fades, beard work) shown in the site's own style when a service has one, and a complete menu without them - The barbers — placeholder names and short bios the owner will edit, clearly marked as samples (portraits come later from the owner) - The shop: the chairs, the music, the routine of a visit — what a first-timer can expect - Kind words — clearly marked as placeholder examples, never presented as real reviews - Opening hours (from the engine) and location / contact (from the engine's business contact), with directions - The booking flow - Footer with a discreet “Staff login” link to /admin/ - **Booking experience:** - Service first, then the date and time together, then details, then the email code, then confirmation — fast enough to finish standing in line for coffee - Make the soonest time obvious: a “Next open: today 4:15 PM” shortcut from data already loaded, and a week view that opens on today — on a closed day, say so and offer the next open time - Short services mean many times: group them Morning / Afternoon / Evening with counts, and keep the list scannable on a phone - There is one shared calendar: never offer “choose your barber” or show staff availability — the engine does not book per barber - Keep the chosen service, duration, price, date and time visible at every step — a summary beside the times on wide screens, a sticky bar on phones - The code step stays in the shop's voice: where the code went (masked), one large code field that accepts a pasted code, “Send a new code”, “Choose another time”, and a reminder to check spam - Designed states: times loading, times that could not load (Try again), a time just taken (fresh times), a fully booked day (the next open day), a closed day, and online booking switched off (call or message the shop) - Pending wording: “Request received — we'll confirm your chair shortly.” Confirmed wording: “You're booked. See you in the chair.” - **Imagery:** Real photography of the craft is part of the design: clippers and straight razors, the chair, the lather, the line-up, a door, window or street at dusk (no other shop's name, no barber pole, no identifiable people; if no such licensed photo exists, a designed frame such as a painted window sign) — one coherent photographic direction. Never present a photographed person as one of the shop's barbers: sample barber cards show tools or work, not faces, and stay labelled as samples until the owner adds real portraits. Graphic motifs (rules, numerals, signage lettering) frame the photos; they do not replace them. Service photos are the owner's (added per service in the dashboard): present them as part of the menu's design, never as stock fillers. - **Avoid:** - Barber-pole stripes, skulls, mustache icons and other stock barbershop clichés - A generic SaaS landing page look, purple gradients, glassmorphism - Invented awards, review counts, ratings or “best in town” claims - A “choose your barber” step or per-barber availability (not supported by the engine) - Hard-coded services, prices or opening hours (they come from the engine) - **Words:** call customers “clients” and bookings “appointments”. How: - **Identity first.** A short `DESIGN.md`: the concept in one sentence, a display face with character and a readable text face (both self-hosted with `@fontsource`), colour tokens with every text/background pair at 4.5:1 or better, a type and spacing scale, how motion behaves. Every value lives in one CSS file of custom properties. Two businesses in this niche with different style directions must not look like the same layout recoloured. Plain CSS, no UI kit. - **Composition.** Varied rhythm — full-bleed moments, asymmetric grids, one focal point per screen; designed for phones first, from 320 px to wide screens; keyboard-accessible with visible focus; motion of 150–600 ms with a purpose, off under `prefers-reduced-motion`. - **Engine data, never hard-coded:** services, prices, opening hours, contact details and availability (BUILD-A-SITE §3). “Open now” lines come from `getOpeningTimes`. Show each service's optional `image` in your own style when it has one, and make the services section complete with none. - **Owner-editable copy.** Declare the texts, photos, logo, brand colours and heading style the owner may change in `src/content/site.ts` (BUILD-A-SITE §2), with your copy and photos as defaults, render the page from it as text, and bake it in with the Vite plugin. - **Photos.** Free, properly licensed photographs (Unsplash or Pexels licence), at most six, downloaded into `photos/source/` and recorded in `PHOTOS.md` — never hot-linked, never a photographed person presented as staff (sample team cards show the work and say “Sample photo”; content-list images cannot have defaults, so sample cards may be text-only or share one site image). Free photos already checked for this niche, to start from (confirm the licence on each page; replace any): https://www.pexels.com/photo/barber-perfecting-a-fade-haircut-close-up-39559270/ (a fade being cut, close up (hero)); https://www.pexels.com/photo/vintage-barber-shop-interior-with-classic-chairs-37764947/ (a row of classic barber chairs); https://www.pexels.com/photo/customer-at-barber-16553361/ (a lathered shave in progress); https://www.pexels.com/photo/tools-at-barbershop-7697712/ (clippers and tools on a counter); https://www.pexels.com/photo/hairdresser-scissors-and-tools-10317439/ (scissors and combs); https://www.pexels.com/photo/gray-hand-tool-1319459/ (a brass shaving bowl and razors). Search terms that work: “barber fade close up”, “barbershop interior chairs”, “straight razor shave”, “barber tools clippers”. Prepare them with `npx booking-engine photos` (BUILD-A-SITE §5): AVIF + WebP at two or three widths, `width`/`height` on every `<img>`, fixed `aspect-ratio` frames with `object-fit: cover`, the hero eager with `fetchpriority="high"`, everything else lazy. When no fitting photo exists, design the frame without one. - **The booking flow** follows BUILD-A-SITE §4 with the calendar helpers: server slots only, the business time zone, the two steps (`requestBooking`, then the code and `verifyBooking`), every error in the table, contact details when online booking is off, success only after `verifyBooking` returned `ok: true`. On a phone: the step's name always visible, the choice and price in view, 44 px targets, the right input types, inline validation, a loading state on the control that waits, a code field that accepts a pasted code, focus on each new step's heading. - **Every “Book” button always answers.** Whatever the booking section is showing — loading, the flow, online booking off, no services, a calendar that failed to load — each Book/CTA button on the page scrolls to the booking section and moves focus to its heading, so the visitor sees that state's message and the shop's contact details. Never route a CTA only through the flow component (it is not on the page in those states), and never leave a click that does nothing. Check it with online booking off as well as on. ## 3. Work efficiently The viewer's Claude plan pays for every step, so keep the session lean: - Read BUILD-A-SITE.md once; don't re-read files you wrote or explore the package. - Photos: start from the leads above or spend at most about ten minutes searching; judge candidates on one contact sheet of small thumbnails, not one by one at full size. - Screenshots: about eight in all — desktop and a 390 px phone (device emulation), downscaled to at most 1280 px wide. Don't capture very long pages at full resolution. - Don't simulate the engine's error answers to see every state: build each state from the error table and check it in the code. - `npm run build` and `npx booking-engine doctor --dist dist` once midway and once at the end; afterwards fix and rerun only what failed. ## 4. Finish - `CLAUDE.md` in the project root: the engine's boundaries (from `BOOKING_ENGINE.md`), where the design lives, and that new booking features need a new engine version, never custom database code. - Done when: `npm run build` and `npx booking-engine doctor --dist dist` pass; every field in `src/content/site.ts` is used and the page looks as designed with the defaults; the key sections show real photos (`PHOTOS.md`, AVIF/WebP with dimensions; `DESIGN.md` matches the tokens); `npm run dev` serves `/` with the preview banner and a booking flow that reaches the code step and the honest preview message, and `/admin/` shows “Connect your backend”. Stop the dev server. - End with a short summary: what you built, the design choices, and anything in the engine's documentation that was unclear or wrong.

Studio di massaggi e benessere

Massaggi e trattamenti, con un'esperienza di prenotazione rilassante.

Build a complete, premium booking website for **{{BUSINESS_NAME}}**, a massage & wellness studio in {{CITY}}, in this empty folder. The booking system is an installed package — the **Profit Studio Booking Engine**. It owns availability, bookings, booking emails and the owner's dashboard. You design and build the public website around it, and nothing the engine provides. ## 1. Set up 1. Scaffold a Vite + React + TypeScript app **in the current folder**: `npm create vite@latest . -- --template react-ts --no-interactive`, then `npm install`. create-vite stops without an error when the folder is not empty — a `.DS_Store` or a `.claude/` folder is enough — so check that `package.json` now exists. If it does not, scaffold into a new subfolder the same way, move all of its files (dotfiles included) up into this folder without overwriting or deleting anything already here, and remove the empty subfolder. Remove the template's demo content. 2. `npm install --save-exact @profitstudio/booking-engine@2.0.0-beta.1`, then `npx booking-engine init`. 3. Read `node_modules/@profitstudio/booking-engine/docs/BUILD-A-SITE.md` once: it has every file to wire, the booking API and the error table. Open `docs/INTEGRATION.md` only at a section it names, and nothing else in the package. 4. Wire the engine as BUILD-A-SITE §1 shows, with this site's own preset as `preview.preset` — write it in `src/lib/preset.ts` and export it as `sitePreset` (BUILD-A-SITE §1) with the words “guests” and “sessions”; in `preview.business` use `{{BUSINESS_NAME}}`, the time zone `{{TIMEZONE}}` and a plausible placeholder `contact` in {{CITY}}. - Write `sitePreset` from this sample data (prices are US dollars: use the local currency at a plausible local price level; `id` "massage-studio", `label` "Massage & Wellness Studio"): - Swedish Massage — 60 min · 60 min (+15 min buffer) · 95 · “Long, flowing strokes to ease tension and settle the mind.” - Swedish Massage — 90 min · 90 min (+15 min buffer) · 135 · “The full-body Swedish session with time for slower, deeper work.” - Deep Tissue — 60 min · 60 min (+15 min buffer) · 105 · “Firm, focused pressure for tight shoulders, back and legs.” - Deep Tissue — 90 min · 90 min (+15 min buffer) · 150 · “Unhurried deep work on the areas you choose.” - Hot Stone — 75 min · 75 min (+20 min buffer) · 125 · “Warm basalt stones and long strokes to release and soften.” - Pregnancy Massage — 60 min · 60 min (+15 min buffer) · 100 · “Side-lying comfort and gentle pressure, from the second trimester.” - Reflexology — 45 min · 45 min (+15 min buffer) · 70 · “Pressure-point work on the feet in a reclined chair.” - Opening hours: Monday to Friday 10:00–20:00, Saturday 09:00–17:00, Sunday 10:00–16:00 - Policies: 15-minute slot interval, at least 4 hours' notice, up to 60 days ahead, the owner confirms each request, a phone number is required; every other policy as in BUILD-A-SITE §1 The dashboard on `/admin/` mounts `<BookingAdmin engine={engine} siteUrl="/" content={siteContent} presets={[sitePreset]} />` and gets only your brand accent (light and dark) in `src/admin-theme.css`. One public page (sections and an in-page booking flow), no client-side routes. No backend yet: no Supabase project, no `supabase` commands, no `.env.local` — the site runs in preview mode with a visible “Preview — sample data, bookings are not saved” banner. ## 2. Design — the creative part Make it feel like a real, distinctive massage & wellness studio, not a template: - **Style direction:** {{STYLE_DIRECTION}} - **Audience:** Adults 25–65 looking for relief from everyday tension or simply an hour of quiet — often booking in the evening on a phone, sometimes for the first time. - **Tone:** Calm, warm and reassuring; clear and practical. Never clinical, never mystical, and never promise health outcomes. - **Sections:** - Hero that slows the visitor down, with one clear “Book a session” action - Treatments loaded from the engine — each length is its own service (e.g. 60 and 90 minutes), shown as a calm, readable list with durations and prices — with the owner's optional service photos in the site's own style when a service has one, and complete without them - What to expect: arriving, the room, comfort and pressure, privacy — written for a first-timer - The therapists — placeholder names and short bios the owner will edit, clearly marked as samples - Questions (what to wear, arriving early, cancelling) as plain text the owner can edit - Opening hours (from the engine) and location / contact (from the engine's business contact) - The booking flow - Footer with a discreet “Staff login” link to /admin/ - **Booking experience:** - Treatment and length first, then the date and time together, then details, then the email code, then confirmation - A calm calendar: the next open days first, times grouped Morning / Afternoon / Evening; never a countdown or scarcity pressure - There is one shared calendar: never offer “choose your therapist” or show per-therapist availability - The note field is optional and invites preferences (pressure, areas to avoid) — never ask for medical history or health details in the form - Keep the chosen treatment, length, price, date and time visible at every step - The code step is gentle and clear: where the code went (masked), one large code field that accepts a pasted code, “Send a new code”, “Choose another time”, a reminder to check spam - Designed states: loading, could not load (Try again), a time just taken, a fully booked day (the next open day), a closed day, online booking switched off (call or email the studio) - Pending wording: “Request received — we'll confirm your session shortly.” Confirmed wording: “Your session is booked.” - **Imagery:** Quiet, tactile photography: hands at work, linen, warm stones, oil, soft light across a treatment room — one coherent direction, little colour, lots of air. Never present a photographed person as one of the studio's therapists: sample therapist cards show the room or hands, not faces, and stay labelled as samples. No before/after imagery. Service photos are the owner's (added per service in the dashboard): present them as part of the design, never as stock fillers. - **Avoid:** - Spa clichés: orchids, Buddha statues, stacked stones, lotus icons - Medical claims, diagnoses, “cures” or before/after promises - Countdown timers, scarcity pressure or pushy upsells - A “choose your therapist” step or per-therapist availability (not supported by the engine) - Hard-coded services, prices or opening hours (they come from the engine) - **Words:** call customers “guests” and bookings “sessions”. How: - **Identity first.** A short `DESIGN.md`: the concept in one sentence, a display face with character and a readable text face (both self-hosted with `@fontsource`), colour tokens with every text/background pair at 4.5:1 or better, a type and spacing scale, how motion behaves. Every value lives in one CSS file of custom properties. Two businesses in this niche with different style directions must not look like the same layout recoloured. Plain CSS, no UI kit. - **Composition.** Varied rhythm — full-bleed moments, asymmetric grids, one focal point per screen; designed for phones first, from 320 px to wide screens; keyboard-accessible with visible focus; motion of 150–600 ms with a purpose, off under `prefers-reduced-motion`. - **Engine data, never hard-coded:** services, prices, opening hours, contact details and availability (BUILD-A-SITE §3). “Open now” lines come from `getOpeningTimes`. Show each service's optional `image` in your own style when it has one, and make the services section complete with none. - **Owner-editable copy.** Declare the texts, photos, logo, brand colours and heading style the owner may change in `src/content/site.ts` (BUILD-A-SITE §2), with your copy and photos as defaults, render the page from it as text, and bake it in with the Vite plugin. - **Photos.** Free, properly licensed photographs (Unsplash or Pexels licence), at most six, downloaded into `photos/source/` and recorded in `PHOTOS.md` — never hot-linked, never a photographed person presented as staff (sample team cards show the work and say “Sample photo”; content-list images cannot have defaults, so sample cards may be text-only or share one site image). Free photos already checked for this niche, to start from (confirm the licence on each page; replace any): https://unsplash.com/photos/massage-on-leg-with-white-towel-yBLLzNcA6GU (hands at work over a white towel (hero)); https://www.pexels.com/photo/settee-by-the-window-6628520/ (a treatment table by a tall window); https://unsplash.com/photos/hands-massaging-a-persons-forearm-with-gentle-pressure-YBfzGCJjLuI (hands working on a forearm). Search terms that work: “massage hands towel”, “treatment room window”, “spa linen stones”. Prepare them with `npx booking-engine photos` (BUILD-A-SITE §5): AVIF + WebP at two or three widths, `width`/`height` on every `<img>`, fixed `aspect-ratio` frames with `object-fit: cover`, the hero eager with `fetchpriority="high"`, everything else lazy. When no fitting photo exists, design the frame without one. - **The booking flow** follows BUILD-A-SITE §4 with the calendar helpers: server slots only, the business time zone, the two steps (`requestBooking`, then the code and `verifyBooking`), every error in the table, contact details when online booking is off, success only after `verifyBooking` returned `ok: true`. On a phone: the step's name always visible, the choice and price in view, 44 px targets, the right input types, inline validation, a loading state on the control that waits, a code field that accepts a pasted code, focus on each new step's heading. - **Every “Book” button always answers.** Whatever the booking section is showing — loading, the flow, online booking off, no services, a calendar that failed to load — each Book/CTA button on the page scrolls to the booking section and moves focus to its heading, so the visitor sees that state's message and the shop's contact details. Never route a CTA only through the flow component (it is not on the page in those states), and never leave a click that does nothing. Check it with online booking off as well as on. ## 3. Work efficiently The viewer's Claude plan pays for every step, so keep the session lean: - Read BUILD-A-SITE.md once; don't re-read files you wrote or explore the package. - Photos: start from the leads above or spend at most about ten minutes searching; judge candidates on one contact sheet of small thumbnails, not one by one at full size. - Screenshots: about eight in all — desktop and a 390 px phone (device emulation), downscaled to at most 1280 px wide. Don't capture very long pages at full resolution. - Don't simulate the engine's error answers to see every state: build each state from the error table and check it in the code. - `npm run build` and `npx booking-engine doctor --dist dist` once midway and once at the end; afterwards fix and rerun only what failed. ## 4. Finish - `CLAUDE.md` in the project root: the engine's boundaries (from `BOOKING_ENGINE.md`), where the design lives, and that new booking features need a new engine version, never custom database code. - Done when: `npm run build` and `npx booking-engine doctor --dist dist` pass; every field in `src/content/site.ts` is used and the page looks as designed with the defaults; the key sections show real photos (`PHOTOS.md`, AVIF/WebP with dimensions; `DESIGN.md` matches the tokens); `npm run dev` serves `/` with the preview banner and a booking flow that reaches the code step and the honest preview message, and `/admin/` shows “Connect your backend”. Stop the dev server. - End with a short summary: what you built, the design choices, and anything in the engine's documentation that was unclear or wrong.

Personalizza e copia il tuo prompt

La tua parte.

Apri Customize Prompt sul prompt qui sopra Inserisci il nome e la città della tua attività: il fuso orario parte dal tuo, quindi cambialo solo se l'attività si trova altrove Scegli una direzione stilistica: ognuna dà al tuo sito un aspetto diverso Copia il prompt: lo invii a Claude nel Passo 2

Warm editorial — espresso, rame e crema, un serif elegante e impaginazioni da rivista

Modern minimal — quasi bianco e antracite con un solo accento deciso e una griglia rigorosa

Bold urban — nero profondo, grigi cemento e un accento elettrico, con un contrasto forte

Soft natural — salvia, sabbia e rosa cipria, caratteri arrotondati, calmo e arioso

Heritage modern — verde bottiglia, sangue di bue e ottone su carta calda, classico ma mai teatrale

Industrial clean — nero, acciaio e grigi cemento con un colore segnale e numeri grandi

Neighbourhood warm — crema, terracotta e inchiostro, caratteri amichevoli e spaziature rilassate

Quiet Nordic — avena, pietra e salvia tenue su bianco caldo, margini ampi e movimenti delicati

Warm earth — argilla, terracotta e oliva scuro, titoli arrotondati e forme organiche

Night calm — blu inchiostro profondo e toni caldi di candela, soffuso e intimo

Il prompt installa il Booking Engine esattamente alla versione 2.0.0-beta.1, la versione con cui è stata testata questa guida. Non cambiarla in latest.

Apri una cartella vuota

La tua parte.

Claude Desktop Code Local

Crea una cartella nuova e vuota per il tuo sito, per esempio in Documenti Avvia una sessione Local e scegli quella cartella Se Claude Desktop lo chiede, considera attendibile la cartella

Invia il tuo prompt

Parte di Claude Code: tu approvi le sue azioni e aspetti.

Incolla il prompt che hai copiato nel Passo 1 e invialo Clicca su Allow quando Claude chiede di eseguire un comando Lascialo lavorare: una build completa è una sessione lunga, quindi tienila aperta

Crea il progetto del sito e installa il Booking Engine

Progetta il sito: font, colori, layout e testi per la tua attività

Trova foto gratuite con licenza e le prepara per il web

Crea il flusso di prenotazione e la pagina della dashboard del titolare

Controlla tutto con npm run build e npx booking-engine doctor

Se Claude si ferma perché hai raggiunto un limite di utilizzo, aspetta che si azzeri, poi scrivi continue nella stessa sessione.

Guarda il tuo sito

Parte di Claude Code, poi la tua: avvia l'anteprima, tu la guardi.

Mostrami il mio sito

Avvia il tuo sito sul tuo computer e ti dà il suo indirizzo.

Start the website's dev server with npm run dev and open it in the Browser pane. Then give me its local address. Don't change any files.

Guarda l'anteprima nel Browser pane di Claude Desktop, oppure apri nel browser l'indirizzo che ti dà Claude Controlla il design in una finestra larga e in una stretta Clicca su un pulsante Book: il flusso di prenotazione si apre e arriva al passaggio che chiede un codice via e-mail Apri /admin/: aggiungilo all'indirizzo o chiedi a Claude di aprirlo; mostra Connect your backend

Il banner in alto dice Preview: sono dati di esempio e nessuna prenotazione viene ancora salvata. Vuoi delle modifiche? Chiedile a Claude nella stessa sessione prima di proseguire.

Crea il tuo progetto Supabase

La tua parte: nel tuo account Supabase.

Questo passo ha tre parti: Supabase, poi l'e-mail, poi un prompt che collega tutto. I valori che inserisci vengono salvati in questa guida e riutilizzati nel Passo 5, così scrivi ciascuno una volta sola.

Apri la dashboard di Supabase

https://supabase.com/dashboard

Clicca su New project, scegli una regione vicina alla tua attività e il piano Free Salva la password del database nel tuo gestore di password: non inviarla mai a Claude Quando il progetto è pronto, clicca su Connect e incolla qui sotto la Project URL e la Publishable key

Crea il tuo accesso alla dashboard

La tua parte: nel tuo account Supabase.

Supabase Authentication Users

Clicca su Add user, poi su Create new user Inserisci la tua email e una password sicura Lascia selezionato Auto Confirm User e crea l'utente

Supabase Authentication Sign In / Providers

Disattiva Allow new users to sign up e salva: solo tu accedi alla dashboard

Accedi alla Supabase CLI

La tua parte: una volta, prima del collegamento.

Clicca su Terminal nella barra del titolo della sessione Esegui il comando qui sotto Approva l'accesso nella finestra del browser che si apre

npx supabase@2 login

Se Claude ti chiede di collegare tu il progetto, esegui qui il comando che ti dà e digita la password del database nel Terminal, mai nella chat.

Verifica il tuo dominio di invio

La tua parte: in Resend e nel DNS del tuo dominio.

Le e-mail di prenotazione partono dal tuo dominio: lo stesso che il tuo sito userà nel Passo 5. Non hai ancora un dominio? Acquistane uno in Hostinger, poi torna qui:

Hostinger Domains

Apri i domini di Resend

https://resend.com/domains

Clicca su Add domain e inserisci il dominio di invio indicato qui sopra Scegli la regione più vicina ai tuoi clienti Tieni aperta la pagina con i record DNS

Hostinger Domains DNS / Nameservers

Scegli il tuo dominio e aggiungi ogni record mostrato da Resend, con lo stesso tipo e valore Tornato in Resend, clicca su Verify DNS records

La verifica di solito richiede meno di 15 minuti e può richiedere fino a 72 ore. Nel frattempo prosegui con i passaggi successivi. Il dominio è gestito altrove? Aggiungi lì gli stessi record e mantieni i tuoi record e-mail esistenti.

Aggiungi i tuoi secret e-mail a Supabase

La tua parte: la chiave va solo in Supabase, mai nella chat.

In Resend, apri API Keys e clicca su Create API key Scegli Sending access e il tuo dominio verificato, poi copia la chiave: Resend la mostra una sola volta In Supabase, apri Edge Functions, poi Secrets, e aggiungi questi due

RESEND_API_KEY

Tieni segreta la chiave di Resend

Incollala solo nei secret delle Edge Functions di Supabase. Non inviarla mai a Claude, non metterla mai in un file del sito o in un prompt e non aggiungerla mai a Hostinger.

Chiedi a Claude di collegare tutto

Parte di Claude Code: si ferma ogni volta che qualcosa spetta a te.

Nella stessa sessione di Claude, copia questo prompt e invialo:

Claude chiede prima di ogni azione: clicca su Allow. Si ferma quando tocca a te.

Hai finito quando Claude dice Connected. Le e-mail di prenotazione partono quando Resend mostra il tuo dominio come Verified: l'e-mail di prova del Passo 4 lo conferma.

Apri la tua dashboard

Parte di Claude Code, poi la tua: avvia il sito, tu accedi.

Avvia il mio sito collegato

Avvia il tuo sito, ora collegato a Supabase, e ti dà gli indirizzi del sito e della dashboard.

Stop any dev server that is still running, so the new .env.local is read. Then start the website with npm run dev, open /admin/ in the Browser pane, and give me two addresses: the website and its /admin/ dashboard. Don't change any files.

Apri la dashboard e accedi con le credenziali che hai creato nel Passo 3. Il tuo sito gira ancora sul tuo computer, ma qui è già tutto reale: la dashboard, le prenotazioni e le e-mail usano il tuo progetto Supabase, e il tuo sito online del Passo 5 usa gli stessi dati.

Completa la configurazione

La tua parte: nella dashboard.

Scegli prima dove arrivano gli avvisi di nuove richieste

Senza un indirizzo per gli avvisi, nessuno viene informato delle nuove richieste e la prenotazione online non può essere attivata.

Segui Finish setting up in cima alla dashboard: ti guida tra i dati della tua attività, i servizi, gli orari di apertura e l'e-mail In Email & online booking, imposta Send new-request alerts to sulla tua casella di posta, poi clicca su Send test email e controlla che sia arrivata

Prima di attivare le prenotazioni, clicca su ogni pulsante Book del tuo sito: deve portare alla sezione di prenotazione e mostrare i tuoi contatti. Un pulsante che non fa nulla è un bug: chiedi a Claude di correggerlo.

Attiva la prenotazione online

Prenota un appuntamento di prova

La tua parte: prima come cliente, poi come titolare.

Sul tuo sito, prenota un servizio con il tuo indirizzo e-mail. Poi spunta ogni voce man mano che la vedi accadere:

Il codice di 6 cifre è arrivato e il sito ha confermato che la richiesta è stata ricevuta

L'avviso di nuova richiesta è arrivato al tuo indirizzo per gli avvisi

Hai cliccato su Confirm request nella dashboard e l'e-mail di conferma è arrivata

Lo stesso orario non viene più proposto sul tuo sito

Nessuna e-mail? Controlla prima lo spam, poi apri Email & online booking nella dashboard: mostra lo stato di ogni e-mail e cosa correggere.

Modifica i testi e le foto del tuo sito

La tua parte: nella dashboard, senza codice.

Apri Website nella dashboard Cambia il titolo principale o la foto principale Clicca su Preview per controllare, poi su Publish Ricarica il tuo sito: la modifica è lì

Claude ha progettato il sito; la dashboard modifica i testi, le foto e i colori del brand che ha reso modificabili. Per una nuova sezione o un layout diverso, chiedi a Claude.

Crea un repository GitHub privato

La tua parte: nel tuo account GitHub.

Il tuo sito funziona sul tuo computer. Ora va online: GitHub conserva il codice e Hostinger lo compila e lo pubblica, con gli stessi dati Supabase che hai appena testato.

Crea un repository GitHub

https://github.com/new

Dagli il nome della tua attività e scegli Private Lascia disattivati README, .gitignore e license, così il repository resta vuoto Clicca su Create repository e copia il suo indirizzo

Invia il tuo sito su GitHub

Parte di Claude Code: tu approvi il push.

Invia il mio sito su GitHub

Controlla che non sia incluso nessun segreto, esegue il commit del tuo sito e lo invia al tuo nuovo repository.

Put this website on GitHub at {{REPOSITORY_URL}}, on the main branch. Stop the dev server first. Before committing, check that .gitignore keeps node_modules, dist, .env, .env.local and supabase/.temp/ out of Git, and run npx booking-engine doctor. Show me the list of files you will commit and make sure no secret, key or password is in any of them. Then initialise Git if needed, commit everything with a clear message and push it to main. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it's done, tell me the commit you pushed.

L'indirizzo del tuo repository

https://github.com/your-name/your-booking-website

Crea la tua Web App

La tua parte: in Hostinger. Non hai ancora un hosting? Prendi un piano in Requisiti.

Hostinger Websites Create site Web App

Se Hostinger ti offre la scelta del dominio, scegli il tuo dominio, altrimenti la tua app parte su un dominio temporaneo Seleziona Import Git Repository Autorizza GitHub e seleziona il repository che Claude ha appena inviato

Configura ed esegui il deploy

La tua parte: in Hostinger.

Mantieni le impostazioni di Vite rilevate da Hostinger Scegli Node.js 22 o successivo Assicurati che il comando di build sia npm run build e che la directory di output sia dist

Prima del deploy, trova Environment variables in Review build settings, clicca su Edit e aggiungi queste due: i tuoi valori del Passo 3, pronti da copiare. Sono integrati nel sito, quindi se ne cambi uno in seguito serve un nuovo deploy.

Solo valori pubblici

Non aggiungere mai qui la Secret key di Supabase o la chiave di Resend. Tutto ciò che inizia con VITE_ è visibile nel browser, e i tuoi secret e-mail restano in Supabase.

Clicca su Finish, poi su Deploy, e attendi la fine della build

Se la build si ferma e nomina una variabile, correggi il valore di quella variabile in Hostinger ed esegui di nuovo il deploy.

Aggiungi il tuo indirizzo online agli avvisi del titolare

Parte di Claude Code.

Verifica il tuo sito online

La tua parte.

Apri il tuo dominio: compare il lucchetto e non c'è il banner Preview Controlla i tuoi servizi, prezzi e orari di apertura Dal telefono, prenota un appuntamento di prova e inserisci il codice Apri /admin/ sul tuo sito online, accedi e conferma la richiesta Controlla che siano arrivati sia l'avviso sia l'e-mail di conferma

D'ora in poi, cambia servizi, prezzi, orari e i testi e le foto del tuo sito nella dashboard: sono online subito. Per modifiche al design o al codice, chiedi a Claude e approva il push: Hostinger ricompila il tuo sito a ogni push su main. I motori di ricerca vedono un nuovo titolo o una nuova descrizione della pagina dopo la build successiva.