Most escape‑room websites look like they were built in 2014: a stock photo of a padlock, a wall of text, three blurry room thumbnails, and a "Book Now" button that takes you to a bare third‑party calendar. They work, sort of. But they leave money on the table at every step, because an escape room is an experiential purchase — people are buying a feeling, and a flat website doesn't sell a feeling.
This series is about building the opposite of that, using a real site as the worked example: escaperoomswellington.com. It's a dark, cinematic, fast, mobile‑first site that ranks #1 in its city, shows its prices openly, proves its reputation with real reviews, and guides a nervous first‑timer all the way to a completed booking. And the whole thing was built by one person directing four AI tools — no agency, no big dev team.
The finished homepage — dark, cinematic and built to convert. This is where we’re headed.
This first module sets up the two things every other module builds on: why this site converts, and which tool does what.
Why this site is a good template
Before the how, the what. Strip the site down and it does six things most escape‑room sites fail at:
- It sells the experience emotionally — dark, atmospheric, video and imagery first, not a text dump.
- It shows the price. "Group activity, price unknown" is the single biggest reason people bounce to a competitor. This site shows per‑person pricing openly.
- It proves trust with a real Google rating and review count, not anonymous made‑up testimonials.
- It removes choice paralysis with a "which room should I choose?" helper instead of making people guess.
- It reassures the nervous first‑timer ("you're never locked in", "not claustrophobic") right where the doubt lives.
- It makes booking feel safe — a warm, branded booking page instead of a cold embedded calendar.
Every page module in this series is built around those jobs. The visual polish matters, but it's the conversion logic underneath that makes the site earn its keep.
The four tools, and what each is for
The build splits cleanly across four AI tools, each playing to a strength. Keeping these roles distinct is most of the trick — you don't ask the strategist to write code or the designer to plan SEO.
Claude‑Chat — the strategist. This is where the thinking happens before any pixels. You hand it the existing site (or, for a new build, the competitors and the goals) and it produces the plan: what converts, what to fix, the design direction, the page structure, the SEO priorities. It writes nothing into the site; it writes the brief everything else follows.
Claude‑Design — the visual builder. A design specialist that works in HTML. You give it the plan and it builds the actual look of each page as a self‑contained mockup — the dark theme, the typography, the room cards, the layout, the spacing. It's where the site stops being a description and starts being a thing you can look at.
Claude‑Code — the engineer. This turns the designs into the real, live website: a Next.js application. It takes the HTML mockups and rebuilds them as proper, reusable components, wires up the interactivity, connects the booking system, and makes everything fast and mobile‑safe.
Claude‑Cowork + connectors — the operator. This is the hands‑on layer that reaches out to other services through connectors:
- Higgsfield — generates the imagery and video (hero shots, room‑card images, atmospheric textures).
- GitHub — stores the code and its full history, so every change is tracked and reversible.
- Vercel — hosts the site and deploys it; every change can go live in seconds with a single push.
How they hand off to each other
The flow is a relay, and the baton is a written brief at each stage:
- Chat studies the goal and writes the plan + the design direction.
- Cowork + Higgsfield generates a full set of imagery from that direction, early, so the designer has real pictures to work with.
- Design builds the look of each page in HTML, following the plan.
- Code rebuilds those pages as a real Next.js site and wires up the clever bits.
- Cowork + GitHub + Vercel version it and ship it live, with preview links and instant rollback.
The reason this works is that each tool gets a clear, written input and produces a clear, written output. Nothing lives only in someone's head. (If you want the deeper story of how this particular project ran — including the mistakes and what they taught — that's covered in the companion analysis; this series is the clean, repeatable version.)
Why this stack instead of Wix, Squarespace or WordPress
A fair question: why not a website builder? Because the things that make this site convert are exactly the things drag‑and‑drop builders make hard:
- A custom "which room should I choose?" quiz that responds instantly with no page reload.
- One room‑card component that themes itself three different ways from a single piece of code.
- A third‑party booking calendar wrapped in your own branding, with the booking actually tracked as a conversion.
- #1‑ranking pages that load almost instantly because they're pre‑built and served from a global network.
On a builder, each of those is a fight against the platform. On Next.js + Vercel, they're the natural way to do it — and the later modules show each one being built. That's the throughline of this series: a great escape‑room website is a set of specific, deliberate conversion moves, and this stack makes those moves easy.