Crie um site de agendamento premium com o Claude Code

Claude Desktop

O Claude Code cria seu site no app para desktop. Um build completo é uma sessão longa, então use um plano pago do Claude com folga.

Baixar o Claude Desktop

https://claude.ai/download

Node.js

Baixe a versão LTS. O Claude a usa para criar e verificar o seu site.

Baixar Node.js

https://nodejs.org/en/download

Conta no GitHub

Grátis. O código do seu site fica aqui, e a Hostinger faz o deploy a partir dele.

Criar conta no GitHub

https://github.com/signup

Conta no Supabase

O plano gratuito é suficiente. Ele permite dois projetos ativos — se você já tem dois, pause um que não usa. Ele guarda seus serviços, horários, agendamentos e seu login no dashboard.

Criar conta no Supabase

https://supabase.link/r4gdwhi

Conta no Resend

O plano gratuito envia 100 e-mails por dia e 3.000 por mês. Cada agendamento envia vários: o código, a solicitação recebida, seu alerta e a confirmação.

Criar conta no Resend

https://resend.com/signup

Seu próprio domínio

Seu site fica nele, e os e-mails de agendamento são enviados a partir dele. Um endereço gratuito como o Gmail não consegue enviá-los. Vai comprar o domínio junto com o seu plano da Hostinger? Contrate o plano antes do Passo 3.

Hospedagem Hostinger

Você precisa de hospedagem no Passo 5, quando o seu site entra no ar.

Escolha um plano da Hostinger

Use o plano Business (Unlimited) ou um plano Cloud — só eles rodam Node.js Web Apps: até 5 no Business e 10 no Cloud.

Escolha o seu tipo de negócio

Sua parte. O Booking Engine é o mesmo para os três — o design, os textos e os serviços de exemplo são feitos para o que você escolher.

Que tipo de negócio é?

Salão de beleza

Cortes, coloração e penteados, com os serviços de salão prontos do motor.

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.

Barbearia

Cortes, degradês, barba e barbear, agendados rapidinho pelo celular.

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.

Estúdio de massagem e bem-estar

Massagens e tratamentos, com uma experiência de agendamento tranquila.

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.

Personalize e copie o seu prompt

Sua parte.

Abra Customize Prompt no prompt acima Digite o nome e a cidade do seu negócio — o fuso horário começa como o seu, então mude-o só se o negócio ficar em outro lugar Escolha uma direção de estilo — cada uma dá um visual diferente ao seu site Copie o prompt — você o envia ao Claude no Passo 2

Warm editorial — espresso, cobre e creme, uma serifa elegante e layouts com cara de revista

Modern minimal — quase branco e grafite com um único acento marcante e um grid rigoroso

Bold urban — preto profundo, cinzas de concreto e um acento elétrico, com contraste forte

Soft natural — sálvia, areia e rosa-claro, tipografia arredondada, calmo e arejado

Heritage modern — verde-garrafa, sangue de boi e latão sobre papel quente, clássico, mas nunca teatral

Industrial clean — preto, aço e cinzas de concreto com uma cor de sinalização e numerais grandes

Neighbourhood warm — creme, terracota e tinta, tipografia amigável e espaçamento descontraído

Quiet Nordic — aveia, pedra e sálvia suave sobre branco quente, margens amplas e movimento delicado

Warm earth — argila, terracota e oliva profundo, títulos arredondados e formas orgânicas

Night calm — azul-tinta profundo e tons quentes de vela, à meia-luz e intimista

O prompt instala o Booking Engine exatamente na versão 2.0.0-beta.1, a versão com que este guia foi testado. Não a troque por latest.

Abra uma pasta vazia

Sua parte.

Claude Desktop Code Local

Crie uma pasta nova e vazia para o seu site, por exemplo em Documentos Inicie uma sessão Local e escolha essa pasta Se o Claude Desktop pedir, confie na pasta

Envie o seu prompt

Parte do Claude Code — você aprova as ações dele e espera.

Cole o prompt que você copiou no Passo 1 e envie Clique em Allow quando o Claude pedir para executar um comando Deixe-o trabalhar — um build completo é uma sessão longa, então mantenha-a aberta

Cria o projeto do site e instala o Booking Engine

Projeta o site: fontes, cores, layout e textos para o seu negócio

Encontra fotos gratuitas e licenciadas e as prepara para a web

Cria o fluxo de agendamento e a página do dashboard do dono

Verifica tudo com npm run build e npx booking-engine doctor

Se o Claude parar porque você atingiu um limite de uso, espere até ele ser renovado e digite continue na mesma sessão.

Veja o seu site

Parte do Claude Code, depois a sua — ele inicia a prévia, você confere.

Mostre o meu site

Inicia o seu site no seu computador e informa o endereço dele.

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.

Veja a prévia no Browser pane do Claude Desktop ou abra no seu navegador o endereço que o Claude der Confira o design em uma janela larga e em uma estreita Clique em um botão Book: o fluxo de agendamento abre e chega à etapa que pede um código por e-mail Abra /admin/ — adicione ao endereço ou peça ao Claude para abrir: aparece Connect your backend

A faixa no topo diz Preview: são dados de exemplo, e nenhum agendamento é salvo ainda. Quer mudanças? Peça ao Claude na mesma sessão antes de continuar.

Crie seu projeto no Supabase

Sua parte — na sua conta do Supabase.

Este passo tem três partes: o Supabase, depois o e-mail e depois um prompt que conecta tudo. Os valores que você digita ficam salvos neste guia e são reutilizados no Passo 5, então você digita cada um só uma vez.

Abrir o painel do Supabase

https://supabase.com/dashboard

Clique em New project e escolha uma região próxima ao seu negócio e o plano Free Salve a senha do banco de dados no seu gerenciador de senhas — nunca a envie ao Claude Quando o projeto estiver pronto, clique em Connect e cole a Project URL e a Publishable key abaixo

Crie o seu login do dashboard

Sua parte — na sua conta do Supabase.

Supabase Authentication Users

Clique em Add user e depois em Create new user Digite seu e-mail e uma senha forte Deixe Auto Confirm User marcado e crie o usuário

Supabase Authentication Sign In / Providers

Desative Allow new users to sign up e salve — só você entra no dashboard

Faça login na Supabase CLI

Sua parte — uma vez, antes de conectar.

Clique em Terminal na barra de título da sua sessão Execute o comando abaixo Aprove o login na janela do navegador que abrir

npx supabase@2 login

Se o Claude pedir para você mesmo vincular o projeto, execute aqui o comando que ele der e digite a senha do banco de dados no Terminal — nunca no chat.

Verifique o seu domínio de envio

Sua parte — no Resend e no DNS do seu domínio.

Os e-mails de agendamento são enviados do seu próprio domínio — o mesmo que o seu site vai usar no Passo 5. Ainda não tem domínio? Compre um na Hostinger e depois volte:

Hostinger Domains

Abrir os domínios do Resend

https://resend.com/domains

Clique em Add domain e digite o domínio de envio mostrado acima Escolha a região mais próxima dos seus clientes Mantenha aberta a página com os registros DNS

Hostinger Domains DNS / Nameservers

Escolha o seu domínio e adicione cada registro que o Resend mostrar, com o mesmo tipo e valor De volta ao Resend, clique em Verify DNS records

A verificação costuma levar menos de 15 minutos e pode levar até 72 horas. Continue com os próximos passos enquanto espera. O domínio é gerenciado em outro lugar? Adicione os mesmos registros lá e mantenha os seus registros de e-mail existentes.

Adicione os seus segredos de e-mail ao Supabase

Sua parte — a chave vai só para o Supabase, nunca para o chat.

No Resend, abra API Keys e clique em Create API key Escolha Sending access e o seu domínio verificado e copie a chave — o Resend a mostra só uma vez No Supabase, abra Edge Functions, depois Secrets, e adicione estes dois

RESEND_API_KEY

Mantenha a chave do Resend em segredo

Cole-a apenas nos segredos de Edge Functions do Supabase. Nunca a envie ao Claude, nunca a coloque em um arquivo do site ou em um prompt e nunca a adicione na Hostinger.

Peça ao Claude para conectar tudo

Parte do Claude Code — ele para sempre que algo cabe a você.

Na mesma sessão do Claude, copie este prompt e envie:

O Claude pergunta antes de cada ação — clique em Allow. Ele para quando for a sua vez.

Você terminou quando o Claude disser Connected. Os e-mails de agendamento começam quando o Resend mostrar o seu domínio como Verified — o e-mail de teste do Passo 4 confirma isso.

Abra o seu dashboard

Parte do Claude Code, depois a sua — ele inicia o site, você faz login.

Inicie o meu site conectado

Inicia o seu site, agora conectado ao Supabase, e informa os endereços do site e do 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.

Abra o dashboard e faça login com o acesso que você criou no Passo 3. O seu site ainda roda no seu computador, mas tudo aqui já é real: o dashboard, os agendamentos e os e-mails usam o seu projeto do Supabase, e o seu site no ar no Passo 5 usa os mesmos dados.

Conclua a configuração

Sua parte — no dashboard.

Escolha primeiro para onde vão os alertas de novas solicitações

Sem um endereço de alertas, ninguém fica sabendo das novas solicitações, e o agendamento online não pode ser ativado.

Siga Finish setting up no topo do dashboard — ele guia você pelos dados do seu negócio, pelos serviços, pelo horário de funcionamento e pelo e-mail Em Email & online booking, defina Send new-request alerts to com a sua própria caixa de entrada, depois clique em Send test email e confira se ele chegou

Antes de ativar os agendamentos, clique em cada botão Book do seu site: ele deve levar à seção de agendamento e mostrar os seus dados de contato. Um botão que não faz nada é um bug — peça ao Claude para corrigi-lo.

Ative o agendamento online

Agende um horário de teste

Sua parte — como cliente e depois como dono.

No seu site, agende um serviço com o seu próprio endereço de e-mail. Depois marque cada item conforme você o vir acontecer:

O código de 6 dígitos chegou, e o site informou que a sua solicitação foi recebida

O alerta de nova solicitação chegou ao seu endereço de alertas

Você clicou em Confirm request no dashboard, e o e-mail de confirmação chegou

O mesmo horário não é mais oferecido no seu site

Nenhum e-mail? Verifique primeiro o spam e depois abra Email & online booking no dashboard: ele mostra o status de cada e-mail e o que corrigir.

Altere os textos e as fotos do seu site

Sua parte — no dashboard, sem código.

Abra Website no dashboard Altere o título principal ou a foto principal Clique em Preview para conferir e depois em Publish Atualize o seu site — a mudança está lá

O Claude projetou o site; o dashboard edita os textos, as fotos e as cores da marca que ele deixou editáveis. Para uma nova seção ou um layout diferente, peça ao Claude.

Crie um repositório privado no GitHub

Sua parte — na sua conta do GitHub.

O seu site funciona no seu computador. Agora ele entra no ar: o GitHub guarda o código, e a Hostinger faz o build e o publica — com os mesmos dados do Supabase que você acabou de testar.

Criar repositório no GitHub

https://github.com/new

Dê a ele o nome do seu negócio e escolha Private Deixe README, .gitignore e license desativados, para que o repositório fique vazio Clique em Create repository e copie o endereço dele

Envie o seu site para o GitHub

Parte do Claude Code — você aprova o push.

Envie o meu site para o GitHub

Verifica se nenhum segredo está incluído, faz o commit do seu site e o envia para o seu novo repositório.

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.

O endereço do seu repositório

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

Crie sua Web App

Sua parte — na Hostinger. Ainda não tem hospedagem? Contrate um plano em Pré-requisitos.

Hostinger Websites Create site Web App

Se a Hostinger oferecer a escolha de domínio, escolha seu próprio domínio — caso contrário, seu app começa em um domínio temporário Selecione Import Git Repository Autorize o GitHub e selecione o repositório que o Claude acabou de enviar

Configure e implante

Sua parte — na Hostinger.

Mantenha as configurações do Vite que a Hostinger detectar Escolha Node.js 22 ou mais recente Confira se o comando de build é npm run build e se o diretório de saída é dist

Antes do deploy, encontre Environment variables em Review build settings, clique em Edit e adicione estas duas — os seus valores do Passo 3, prontos para copiar. Elas ficam embutidas no site, então mudar uma depois exige um novo deploy.

Somente valores públicos

Nunca adicione aqui a Secret key do Supabase nem a chave do Resend. Tudo o que começa com VITE_ fica visível no navegador, e os seus segredos de e-mail ficam no Supabase.

Clique em Finish, depois em Deploy, e espere o build terminar

Se o build parar e citar uma variável, corrija o valor dessa variável na Hostinger e faça o deploy de novo.

Adicione o seu endereço no ar aos alertas do dono

Parte do Claude Code.

Verifique o seu site no ar

Sua parte.

Abra o seu domínio — o cadeado aparece e não há a faixa Preview Confira os seus serviços, preços e horários de funcionamento No celular, agende um horário de teste e digite o código Abra /admin/ no seu site no ar, faça login e confirme a solicitação Confira se o alerta e o e-mail de confirmação chegaram

A partir de agora, altere serviços, preços, horários e os textos e fotos do seu site no dashboard — as mudanças entram no ar na hora. Para mudanças de design ou de código, peça ao Claude e aprove o push: a Hostinger reconstrói o seu site a cada push para main. Os mecanismos de busca veem um novo título ou descrição de página depois do próximo build.