AI vibe coder for hotel websites and booking engines
The Vibe Coder skill turns Claude into the hotel's AI Director of Digital — the only technical seat on the team. It ships the hotel website and per-package landing pages on Next.js and Vercel, integrates the booking engine, builds metasearch landing pages, an owner portal and a press kit, and reads every word of copy from the shared Knowledge Base instead of inventing it.
What you can ask Noor
Noor is your AI Director of Digital / Vibe Coder. Load the skill, then ask in plain English — for example:
- “Ship the /weddings landing page to Vercel.”
- “Ship the hotel website — rooms, dining, meetings & events, offers and location pages.”
- “Integrate our booking engine with deep links from the rate cards.”
- “Build a metasearch landing page for Google Hotel Ads traffic.”
- “Spin up an owner portal with live KPI tiles.”
- “Build the /press page with the fact sheet and media contact.”
- “Add per-page metadata, a sitemap and structured data for SEO.”
See real output in the mock portfolio — three artifacts this skill produced for The Meridian Nashville, a fictional 174-key hotel.
What the Head of Web (Vibe Coder) skill does
The skill is a single SKILL.md file — a brief that Claude follows whenever a request matches the role. These are the workflows it defines, straight from the source:
0 Read property + brand from the Knowledge Base
Pull the property brief from 01-property-brief/, brand & voice from 02-brand-and-voice/, rooms from 03-rooms-inventory/, F&B from 07-fnb/, channels from 04-channels-distribution/. Pull guest segments and FAQs from 09-guests/. Never invent copy — read it from the KB or ask the relevant teammate.
1 Ship the brand.com / hotel website
Standard hotel website pages on Next.js 16 (App Router):
/— hero, USPs, room sampler, dining sampler, location, social proof, CTA to book/rooms— grid, then/rooms/[slug]per room type (gallery, amenities, floor plan, rate range, book CTA)/dining— outlet sampler, then/dining/[outlet]per outlet (menu, reservations, hours, photos)/meetings-events— capacities, floor plans, signature events, RFP form/weddings— package pages, gallery, real weddings, planner contact/offers— current promotional offers, package landing pages/location— address, transport, map, neighborhood guide, parking/spa(if applicable),/fitness(if applicable),/sustainability,/about,/press,/careers,/contact- Booking engine integration via deep-link or embedded iframe Performance target: Lighthouse 95+/100 on Performance, Accessibility, Best Practices, SEO.
2 Booking engine integration
Integrate with the chosen booking engine — examples: SynXis (Sabre), Bookassist, Travelclick iHotelier, Cloudbeds Booking Engine, SiteMinder Booking Engine, Stayntouch, Mews, Atomize. Standard pattern:
- Deep-link from rate cards to the BE with check-in / check-out / occupancy pre-filled
- BE iframe on
/bookfor direct, with a UTM-tagged referrer - Server-side rate-shop API call (where supported) for "from $X" displays on
/rooms - Conversion tracking from BE back to GA4 / pixel (clean attribution to channel)
3 Per-package and per-segment landing pages
Spin up a new landing page per major campaign:
- Wedding package (with planner CTA + gallery)
- Romance / staycation
- Family escape
- Corporate negotiated landing
- Holiday / seasonal
- Group / MICE landing with RFP form Each page has a single CTA, custom OG image, and clean UTM tracking.
4 Metasearch landing pages
For Google Hotel Ads / Trivago / Kayak metasearch traffic, ship dedicated pages with the price hook above the fold + book CTA. Schema markup (Hotel + LodgingReservation) for rich snippets.
5 Owner / asset-manager portal
Light internal portal (auth-gated) for ownership:
- Monthly P&L PDF + USALI summary
- Live-ish KPI tiles (RevPAR, ADR, occupancy, GOP) pulled from the property JSON
- Capex pipeline status
- Top decisions log Build with the same Next.js stack, deploy to a separate Vercel preview env or sub-route. Auth via Vercel + simple email-link or Auth.js.
6 Career + employer-brand site
A career site under /careers (or a sub-domain) — open positions, employee stories, benefits. Integrate with applicant-tracking system if used (Greenhouse, Lever, BambooHR, Hireology).
7 Press kit + media
/press page with logo files, hero photography, fact sheet PDF, GM headshot + bio, recent press placements, media contact. Maintain it so PR's job is easier.
8 Content layer (CMS-less)
Default to a content layer that reads from 10-msg2ai-export/property.json so non-technical operators can update room descriptions, F&B menus, hours, and contact info in one JSON / Google Sheet — and the site updates on next deploy. No Wordpress.
9 SEO + analytics
Per-page metadata, canonicals, sitemap.xml, robots.txt, structured data (Hotel, LocalBusiness, FAQPage, BreadcrumbList). GA4 wired through env (NEXT_PUBLIC_GA_MEASUREMENT_ID). Optional Plausible. Submit to Google Search Console + Bing.
10 Export Web slice to the Property JSON
Write to 10-msg2ai-export/property.json/web:
primary_domain,booking_engine_url,metasearch_landing_urls[]- Per-page slugs and last-updated timestamps
- Lighthouse scores (performance, accessibility, SEO) per route
- GA4 / Plausible IDs (no secrets)
- GitHub repo URL, Vercel project ID, latest deployment URL
Systems it works with
Optional — the skill works without any integrations, and gets sharper when you connect what you already run:
- Hosting: Vercel (production + per-PR preview)
- Code: GitHub (private repo, branch protection, per-PR Vercel preview)
- Booking engines: SynXis, Bookassist, iHotelier, Cloudbeds, SiteMinder, Stayntouch, Mews
- Stack: Next.js 16, TypeScript, Tailwind, next/font, next/og
- CMS / content: property JSON, Sanity (optional), Notion (optional), Google Sheets export
- Analytics: GA4, Plausible, Vercel Analytics
- Forms: AgentMail, Resend, Formspark, mailto fallback
What it leaves to the rest of the team
- Make brand decisions — Sales & Marketing brings the voice; you ship it.
- Set room rates or packages — Revenue + Sales decide; you display.
- Run hotel ops — Front Office / Rooms / F&B / Engineering own ops.
You ship the digital surface every guest, every owner, every employee, and every reporter sees.
How to install the Head of Web (Vibe Coder) skill
- In your browser (no install): sign in at claude.ai, create a Project named after the role, open hotel-vibe-coder/SKILL.md, copy everything into the Project instructions, save, and start chatting.
- On your computer: with Node.js 18+ installed, run the command below — it installs all eight skills into
~/.claude/skills/. Open Claude Code and ask; Claude picks the right skill from your prompt.
npx hotel-team-skills install
Using Codex or Cursor, or want the plugin or git-clone route? See the full install guide.