AI vibe coder for vacation rental direct-booking websites

Direct-Booking Site Scaffolder

The 15–18% margin you don't pay to OTAs lives here.

• Default scaffold: npx create-next-app@latest --typescript --tailwind --app --src-dir
• Standard route structure for a property management company:
  • / — brand hero, search box (calendar + market + party size), featured properties, why-book-direct
  • /properties — search results / map view / filters (beds, bath, market, amenity tag)
  • /properties/[slug] — per-property page (photo gallery, amenities, house rules, reviews, calendar, book CTA)
  • /owners — list-with-us page (lead form, why-list-with-us, fee transparency, contact)
  • /about — team, story, properties under management, markets
  • /markets/[market] — per-market landing page (Outer Banks, Charleston, etc.)
  • /blog/[slug] — local-area content (where to eat, what to do)
  • /owner-portal — gated, owner-only (statements, calendar, work orders, messages)
• Pull all content from the KB — properties from 03-properties/, brand from 02-brand-and-voice/, voice from Marketing & Distribution. If 10-msg2ai-export/portfolio.json exists, prefer that.
• Wire the search box to the channel-manager search API (Hostaway / Guesty / OwnerRez / Hostfully / Lodgify) — or to the direct-booking engine they expose

Per-Property Landing Page

Every direct-booking link in an email or social post should land on a polished page.

• Generate /properties/[slug] per property: 12-image hero gallery, headline, 3-sentence pitch, key facts (beds/bath/sleeps/market), full description, amenity grid, map (lazy-loaded), reviews, calendar embed, book-now CTA
• Pull listing copy from 03-properties/{slug}/listing.md (the Marketing & Distribution skill keeps this in shape)
• Add OG image generation (/app/properties/[slug]/opengraph-image.tsx) — a hero shot + property name + market for shareable links
• Add structured data (JSON-LD LodgingBusiness / Product schema) for SEO

Owner Lead-Capture Page

The single most important page on the site if you want to grow.

• Build /owners with: clear hero ("List your home with us — earn $X more"), 3-card value-prop, fee transparency table, lead form (name, email, phone, # units, market, current management situation), social proof (owner testimonials, properties under management count), FAQ
• Wire the lead form to a Vercel serverless function that creates a Twenty / Zoho CRM record + sends a confirmation email + notifies Owner Relations via Slack/AgentMail
• Add a calendly / cal.com tour-booking embed under "Talk to us"

Owner Portal (gated)

Owners want to log in and see their property's numbers.

• Build /owner-portal with magic-link auth (Vercel + Resend or Auth.js)
• Per-owner dashboard: this-month payout, occupancy pacing, calendar (read-only), open work orders, latest statement download, messages from the office
• Pull data from the channel manager API + the KB
• Read-only by design — any change requests open a ticket, they don't write directly

Per-Market Landing Pages (SEO)

Local SEO is a free booking channel.

• Generate /markets/[market] per market: hero photo of the market, 3-paragraph "why this market" copy (pull from local guides in 08-guests/local-guides/{market}.md), grid of all your properties in that market, local-area highlights, things-to-do, where-to-eat
• Add structured data + meta tags optimized for "vacation rentals in [market]" and "[market] vacation home rental" intent
• Linkable from the local-area blog content for natural inbound links

Blog & Local Content

Content that ranks for "things to do in [market]" pulls long-tail traffic.

• Build /blog and /blog/[slug] with MDX, pulling drafts from Marketing & Distribution
• Add a featured-image system, author byline (your office), table of contents for long pieces
• Cross-link from blog posts to relevant property pages (CTA at end: "Stay in one of our [market] homes")

Vercel Deploy & Domain Operator

Ship to production cleanly.

• Use the Vercel CLI: vercel link, vercel, vercel --prod, vercel domains add, vercel env add
• Set up environment variables for all secrets (channel manager API keys, Stripe, Twenty CRM, Resend / Postmark)
• Configure custom domains: apex + www, with TLS auto-provisioned
• Add preview deployments per Pull Request (Vercel does this by default)
• Configure analytics: Vercel Analytics + Vercel Speed Insights; add Plausible / GA4 if requested
• Save the production URL, preview URL pattern, and Vercel project ID to 11-web/{project}/deploy.md

GitHub Repo & CI Operator

Keep every site in version control with sane defaults.

• gh repo create, gh repo edit, gh pr create, gh release create
• Default repo settings: main is protected, require PR review, branch dev for staging
• Add a minimal GitHub Actions workflow: type-check + lint on PRs + Lighthouse CI on the Vercel preview URL
• Save repo URL, default branch, and access list to 11-web/{project}/repo.md

Channel Manager Embed & Booking-Engine

The hardest piece — make the search-and-book flow on the direct site as good as Airbnb.

• Embed or proxy the channel-manager booking engine (most expose a JS widget or REST API)
• For listings without a clean widget, build a custom search component: filter by market, beds, dates → shows real availability → opens a booking modal with Stripe Checkout + the channel-manager hold
• Confirmation flows: trigger confirmation email + AI Ambassador welcome message via Guest Experience handoff

Polish & Performance

• Lighthouse target: 95+ on Performance, Accessibility, Best Practices, SEO
• next/image for every property photo (WebP/AVIF, proper widths)
• Self-host fonts via next/font
• Add <meta> OG tags, JSON-LD structured data, favicon set, sitemap, robots.txt
• 404, 500, /healthz routes
• Test on real iOS Safari before declaring done