How to build a hotel landing page and ship it to Vercel with Claude

Every major campaign deserves its own page: one offer, one call to action, clean tracking. The Vibe Coder skill spins up per-package and per-segment landing pages on Next.js and deploys them to Vercel — reading the copy, rooms and brand from the shared Knowledge Base instead of inventing it.

What you need

• Claude (Claude.ai in your browser — the free tier works for short tests — or Claude Code) with the Head of Web (Vibe Coder) skill loaded
• The package or campaign details (from Sales & Marketing)
• Brand and voice, rooms and F&B content from the Knowledge Base
• Your booking-engine URL, a GitHub repo and a Vercel account

Step by step

1. Install the Vibe Coder skill. This is the one skill that benefits from someone who can use a terminal: run npx hotel-team-skills install and open Claude Code in your website's repo.
2. Point it at the Knowledge Base. The skill pulls the property brief, brand & voice, rooms and F&B from the Knowledge Base and never invents copy — if something's missing, it asks.
3. Ask for the page. Ask: “Ship the /weddings landing page to Vercel.” (Or romance, family escape, corporate, holiday, or a group / MICE page with an RFP form.)
4. Review the preview URL. Check the single CTA, the custom OG image and the UTM tracking on the Vercel preview before promoting it to production.

What a good result covers

This is the workflow the Head of Web (Vibe Coder) skill follows, quoted from its SKILL.md:

See a finished example: the Weddings page the skill produced for The Meridian Nashville in the mock portfolio.

More guides

• How to write a hotel daily flash report with Claude
• How to handle an oversold night at a hotel (walk strategy) with Claude
• How to build a hotel BAR ladder with Claude
• How to do a hotel group displacement analysis with Claude
• All guides →