Baue eine Premium-Buchungs-Website mit Claude Code

Claude Desktop

Claude Code baut deine Website in der Desktop-App. Ein vollständiger Build ist eine lange Sitzung, nutze also einen bezahlten Claude-Tarif mit genug Spielraum.

Claude Desktop herunterladen

https://claude.ai/download

Node.js

Lade die LTS-Version herunter. Claude baut und prüft damit deine Website.

Node.js herunterladen

https://nodejs.org/en/download

GitHub-Konto

Kostenlos. Hier liegt der Code deiner Website, und Hostinger stellt sie von hier aus bereit.

GitHub-Konto erstellen

https://github.com/signup

Supabase-Konto

Der kostenlose Tarif reicht. Er erlaubt zwei aktive Projekte — hast du schon zwei, pausiere eines, das du nicht nutzt. Er speichert deine Leistungen, Öffnungszeiten, Buchungen und deine Dashboard-Anmeldung.

Supabase-Konto erstellen

https://supabase.link/r4gdwhi

Resend-Konto

Der kostenlose Tarif sendet 100 E-Mails pro Tag und 3.000 pro Monat. Jede Buchung sendet mehrere: den Code, die Anfragebestätigung, deinen Hinweis und die Bestätigung.

Resend-Konto erstellen

https://resend.com/signup

Deine eigene Domain

Deine Website läuft darauf, und Buchungs-E-Mails werden von ihr aus gesendet. Eine kostenlose Adresse wie Gmail kann sie nicht senden. Kaufst du die Domain mit deinem Hostinger-Tarif? Hol dir den Tarif vor Schritt 3.

Hostinger-Hosting

Hosting brauchst du in Schritt 5, wenn deine Website live geht.

Wähle einen Hostinger-Tarif

Nutze den Business-Tarif (Unlimited) oder einen Cloud-Tarif — nur diese betreiben Node.js Web Apps: bis zu 5 bei Business, 10 bei Cloud.

Wähle deine Geschäftsart

Dein Teil. Die Booking Engine ist für alle drei gleich — Design, Texte und Beispiel-Leistungen sind auf die Art zugeschnitten, die du wählst.

Was für ein Geschäft ist es?

Friseursalon

Schnitte, Farbe und Styling, mit den fertigen Salon-Leistungen der Engine.

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.

Barbier

Schnitte, Fades, Bartpflege und Rasuren, schnell per Handy gebucht.

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.

Massage- & Wellnessstudio

Massagen und Behandlungen, mit einem ruhigen Buchungserlebnis.

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.

Passe deinen Prompt an und kopiere ihn

Dein Teil.

Öffne Customize Prompt beim Prompt oben Gib den Namen und die Stadt deines Geschäfts ein — die Zeitzone ist zunächst deine, ändere sie also nur, wenn das Geschäft woanders liegt Wähle eine Stilrichtung — jede gibt deiner Website einen anderen Look Kopiere den Prompt — du sendest ihn in Schritt 2 an Claude

Warm editorial — Espresso, Kupfer und Creme, eine elegante Serifenschrift und Layouts wie in einem Magazin

Modern minimal — gebrochenes Weiß und Anthrazit mit einem selbstbewussten Akzent und einem strengen Raster

Bold urban — tiefes Schwarz, Betongrau und ein elektrisierender Akzent, mit starkem Kontrast

Soft natural — Salbei, Sand und Zartrosa, abgerundete Schrift, ruhig und luftig

Heritage modern — Flaschengrün, Ochsenblut und Messing auf warmem Papier, klassisch, aber nie theatralisch

Industrial clean — Schwarz, Stahl- und Betongrau mit einer Signalfarbe und großen Ziffern

Neighbourhood warm — Creme, Terrakotta und Tinte, freundliche Schrift und lockere Abstände

Quiet Nordic — Hafer, Stein und zartes Salbei auf warmem Weiß, breite Ränder und sanfte Bewegungen

Warm earth — Ton, Terrakotta und tiefes Oliv, abgerundete Überschriften und organische Formen

Night calm — tiefes Tintenblau und warme Kerzentöne, gedämpft und intim

Der Prompt installiert die Booking Engine in genau der Version 2.0.0-beta.1, mit der diese Anleitung getestet wurde. Ändere sie nicht auf latest.

Öffne einen leeren Ordner

Dein Teil.

Claude Desktop Code Local

Erstelle einen neuen, leeren Ordner für deine Website, zum Beispiel in Dokumente Starte eine Local-Sitzung und wähle diesen Ordner Wenn Claude Desktop fragt, vertraue dem Ordner

Sende deinen Prompt

Der Teil von Claude Code — du bestätigst seine Aktionen und wartest.

Füge den Prompt ein, den du in Schritt 1 kopiert hast, und sende ihn Klicke auf Allow, wenn Claude einen Befehl ausführen möchte Lass es arbeiten — ein vollständiger Build ist eine lange Sitzung, also lass sie offen

Erstellt das Website-Projekt und installiert die Booking Engine

Gestaltet die Website: Schriften, Farben, Layout und Texte für dein Geschäft

Findet kostenlose, lizenzierte Fotos und bereitet sie fürs Web vor

Baut den Buchungsablauf und die Seite des Inhaber-Dashboards

Prüft alles mit npm run build und npx booking-engine doctor

Wenn Claude anhält, weil du ein Nutzungslimit erreicht hast, warte, bis es zurückgesetzt wird, und tippe dann continue in derselben Sitzung.

Sieh dir deine Website an

Der Teil von Claude Code, dann deiner — es startet die Vorschau, du schaust sie an.

Zeig mir meine Website

Startet deine Website auf deinem Computer und gibt dir ihre Adresse.

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.

Sieh dir die Vorschau im Browser pane von Claude Desktop an oder öffne die Adresse, die Claude dir gibt, in deinem Browser Prüfe das Design in einem breiten und in einem schmalen Fenster Klicke auf einen Book-Button: Der Buchungsablauf öffnet sich und erreicht den Schritt, der nach einem E-Mail-Code fragt Öffne /admin/ — hänge es an die Adresse an oder bitte Claude, es zu öffnen: Dort steht Connect your backend

Das Banner oben zeigt Preview: Das sind Beispieldaten, und es wird noch keine Buchung gespeichert. Du willst Änderungen? Bitte Claude in derselben Sitzung darum, bevor du weitermachst.

Erstelle dein Supabase-Projekt

Dein Teil — in deinem Supabase-Konto.

Dieser Schritt hat drei Teile: Supabase, dann E-Mail, dann ein Prompt, der alles verbindet. Die Werte, die du eingibst, werden in dieser Anleitung gespeichert und in Schritt 5 wiederverwendet, sodass du jeden nur einmal eingibst.

Supabase-Dashboard öffnen

https://supabase.com/dashboard

Klicke auf New project, wähle eine Region nahe deinem Geschäft und den Free-Tarif Speichere das Datenbank-Passwort in deinem Passwort-Manager — sende es niemals an Claude Wenn das Projekt bereit ist, klicke auf Connect und füge die Project URL und den Publishable key unten ein

Erstelle deinen Dashboard-Login

Dein Teil — in deinem Supabase-Konto.

Supabase Authentication Users

Klicke auf Add user und dann auf Create new user Gib deine E-Mail und ein starkes Passwort ein Lass Auto Confirm User angehakt und erstelle den Benutzer

Supabase Authentication Sign In / Providers

Schalte Allow new users to sign up aus und speichere — nur du meldest dich im Dashboard an

Bei der Supabase CLI anmelden

Dein Teil — einmalig, bevor du verbindest.

Klicke in der Titelleiste deiner Sitzung auf Terminal Führe den Befehl unten aus Bestätige die Anmeldung im Browserfenster, das sich öffnet

npx supabase@2 login

Wenn Claude dich bittet, das Projekt selbst zu verknüpfen, führe hier den Befehl aus, den Claude dir gibt, und tippe dein Datenbank-Passwort ins Terminal — niemals in den Chat.

Verifiziere deine Versand-Domain

Dein Teil — in Resend und im DNS deiner Domain.

Buchungs-E-Mails werden von deiner eigenen Domain gesendet — derselben, die deine Website in Schritt 5 verwendet. Noch keine Domain? Kauf eine bei Hostinger und komm dann zurück:

Hostinger Domains

Resend Domains öffnen

https://resend.com/domains

Klicke auf Add domain und gib die oben angezeigte Versand-Domain ein Wähle die Region, die deinen Kunden am nächsten ist Lass die Seite mit den DNS-Einträgen geöffnet

Hostinger Domains DNS / Nameservers

Wähle deine Domain und füge jeden Eintrag hinzu, den Resend anzeigt, mit demselben Typ und Wert Klicke zurück in Resend auf Verify DNS records

Die Verifizierung dauert meist weniger als 15 Minuten und kann bis zu 72 Stunden dauern. Mach in der Zwischenzeit mit den nächsten Schritten weiter. Wird deine Domain woanders verwaltet? Füge dort dieselben Einträge hinzu und behalte deine bestehenden E-Mail-Einträge.

Füge deine E-Mail-Secrets zu Supabase hinzu

Dein Teil — der Key kommt nur in Supabase, niemals in den Chat.

Öffne in Resend API Keys und klicke auf Create API key Wähle Sending access und deine verifizierte Domain und kopiere dann den Key — Resend zeigt ihn nur einmal an Öffne in Supabase Edge Functions, dann Secrets, und füge diese beiden hinzu

RESEND_API_KEY

Halte den Resend-Key geheim

Füge ihn nur in die Edge-Function-Secrets von Supabase ein. Sende ihn niemals an Claude, schreibe ihn niemals in eine Website-Datei oder einen Prompt und füge ihn niemals zu Hostinger hinzu.

Lass Claude alles verbinden

Der Teil von Claude Code — Claude hält an, sobald du etwas tun musst.

Kopiere in derselben Claude-Sitzung diesen Prompt und sende ihn:

Claude fragt vor jeder Aktion — klicke auf Allow. Wenn du dran bist, hält Claude an.

Du bist fertig, wenn Claude Connected meldet. Buchungs-E-Mails starten, sobald Resend deine Domain als Verified anzeigt — die Test-E-Mail in Schritt 4 bestätigt das.

Öffne dein Dashboard

Der Teil von Claude Code, dann deiner — es startet die Website, du meldest dich an.

Meine verbundene Website starten

Startet deine Website, jetzt mit Supabase verbunden, und gibt dir die Adressen der Website und des Dashboards.

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.

Öffne das Dashboard und melde dich mit dem Login an, den du in Schritt 3 erstellt hast. Deine Website läuft noch auf deinem Computer, aber hier ist schon alles echt: Das Dashboard, die Buchungen und die E-Mails nutzen dein Supabase-Projekt, und deine Live-Website in Schritt 5 nutzt dieselben Daten.

Einrichtung abschließen

Dein Teil — im Dashboard.

Lege zuerst fest, wohin Benachrichtigungen über neue Anfragen gehen

Ohne Benachrichtigungsadresse erfährt niemand von neuen Anfragen, und die Online-Buchung lässt sich nicht einschalten.

Folge Finish setting up oben im Dashboard — es führt dich durch deine Geschäftsdaten, Leistungen, Öffnungszeiten und E-Mail Setze unter Email & online booking Send new-request alerts to auf dein eigenes Postfach, klicke dann auf Send test email und prüfe, ob sie angekommen ist

Bevor du Buchungen einschaltest, klicke auf jeden Book-Button deiner Website: Er sollte zum Buchungsbereich springen und deine Kontaktdaten zeigen. Ein Button, der nichts tut, ist ein Bug — bitte Claude, ihn zu beheben.

Schalte die Online-Buchung ein

Buche einen Testtermin

Dein Teil — erst als Kunde, dann als Inhaber.

Buche auf deiner Website eine Leistung mit deiner eigenen E-Mail-Adresse. Hake dann jeden Punkt ab, sobald du ihn passieren siehst:

Der 6-stellige Code ist angekommen, und die Website hat gemeldet, dass deine Anfrage eingegangen ist

Die Benachrichtigung über die neue Anfrage ist an deiner Benachrichtigungsadresse angekommen

Du hast im Dashboard auf Confirm request geklickt, und die Bestätigungs-E-Mail ist angekommen

Dieselbe Uhrzeit wird auf deiner Website nicht mehr angeboten

Keine E-Mail? Sieh zuerst im Spam nach und öffne dann im Dashboard Email & online booking: Dort siehst du den Status jeder E-Mail und was zu beheben ist.

Ändere die Texte und Fotos deiner Website

Dein Teil — im Dashboard, ohne Code.

Öffne im Dashboard Website Ändere die Hauptüberschrift oder das Hauptfoto Klicke auf Preview, um es zu prüfen, dann auf Publish Lade deine Website neu — die Änderung ist da

Claude hat die Website gestaltet; im Dashboard bearbeitest du die Texte, Fotos und Markenfarben, die Claude bearbeitbar gemacht hat. Für einen neuen Abschnitt oder ein anderes Layout frag Claude.

Erstelle ein privates GitHub-Repository

Dein Teil — in deinem GitHub-Konto.

Deine Website funktioniert auf deinem Computer. Jetzt geht sie online: GitHub verwahrt den Code, und Hostinger baut und hostet sie — mit denselben Supabase-Daten, die du gerade getestet hast.

GitHub-Repository erstellen

https://github.com/new

Benenne es nach deinem Geschäft und wähle Private Lass README, .gitignore und license deaktiviert, damit das Repository leer ist Klicke auf Create repository und kopiere seine Adresse

Pushe deine Website zu GitHub

Der Teil von Claude Code — du bestätigst den Push.

Meine Website zu GitHub pushen

Prüft, dass kein Secret enthalten ist, committet deine Website und pusht sie in dein neues 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.

Die Adresse deines Repositorys

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

Deine Web App erstellen

Dein Teil — in Hostinger. Noch kein Hosting? Hol dir einen Tarif unter Voraussetzungen.

Hostinger Websites Create site Web App

Wenn Hostinger dir eine Domain-Auswahl anbietet, wähle deine eigene Domain — sonst startet deine App auf einer temporären Domain Wähle Import Git Repository Autorisiere GitHub und wähle das Repository, das Claude gerade gepusht hat

Konfigurieren und bereitstellen

Dein Teil — in Hostinger.

Behalte die Vite-Einstellungen, die Hostinger erkennt Wähle Node.js 22 oder neuer Stelle sicher, dass der Build-Befehl npm run build und das Ausgabeverzeichnis dist ist

Suche vor dem Deployment unter Review build settings nach Environment variables, klicke auf Edit und füge diese beiden hinzu — deine Werte aus Schritt 3, bereit zum Kopieren. Sie werden in die Website eingebaut, deshalb braucht eine spätere Änderung ein erneutes Deployment.

Nur öffentliche Werte

Füge hier niemals den Supabase Secret key oder den Resend-Key hinzu. Alles, was mit VITE_ beginnt, ist im Browser sichtbar, und deine E-Mail-Secrets bleiben in Supabase.

Klicke auf Finish, dann auf Deploy, und warte, bis der Build fertig ist

Wenn der Build abbricht und eine Variable nennt, korrigiere deren Wert in Hostinger und stelle erneut bereit.

Füge deine Live-Adresse zu den Inhaber-Benachrichtigungen hinzu

Der Teil von Claude Code.

Prüfe deine Live-Website

Dein Teil.

Öffne deine Domain — das Schloss-Symbol erscheint und es gibt kein Preview-Banner Prüfe deine Leistungen, Preise und Öffnungszeiten Buche auf deinem Handy einen Testtermin und gib den Code ein Öffne /admin/ auf deiner Live-Website, melde dich an und bestätige die Anfrage Prüfe, ob sowohl die Benachrichtigung als auch die Bestätigungs-E-Mail angekommen sind

Ab jetzt änderst du Leistungen, Preise, Öffnungszeiten sowie die Texte und Fotos deiner Website im Dashboard — sie sind sofort live. Für Design- oder Code-Änderungen frag Claude und bestätige den Push: Hostinger baut deine Website bei jedem Push auf main neu. Suchmaschinen sehen einen neuen Seitentitel oder eine neue Beschreibung nach dem nächsten Build.