How to build a conference website with Claude

The Vibe Coder skill turns an event brief into a deployed site: a landing page in under an hour, or a full multi-page event site. It pulls content from your Knowledge Base instead of inventing copy, and ships a preview URL early so the committee reviews a live link.

Get the Head of Web skill →What the skill does

What you'll need

Event name, date, location and theme
The one thing you want visitors to do (register, sign up for updates, download the deck)
Brand assets: logo, primary color, fonts, tone
For deploys: the GitHub CLI and Vercel CLI (Claude Code)

Step by step

Load the Vibe Coder skill. Install all eight skills for Claude Code (the deploy steps use the GitHub and Vercel CLIs), or paste the conference-vibe-coder SKILL.md into Claude.ai to draft the site. Install steps →
Give the brief. Share event name, date, location, theme and the one action you want visitors to take. Brand assets are read from 02-brand-and-voice/.
Pick the stack. The default is Next.js App Router + Tailwind + Vercel for anything with forms or dynamic content, or a single plain HTML + CSS file when a one-pager needs to ship in 20 minutes.
Ship the landing page. Default sections: hero with headline and CTA, why-attend, agenda preview, speaker grid, sponsor logo wall, FAQ and a final CTA. With the GitHub CLI connected, Claude creates a private repo and pushes the scaffold.
Preview, then promote. With the Vercel CLI connected, Claude links the repo, deploys a preview and promotes to production when you approve.
Grow it into the full site. The standard event route structure: /agenda, /speakers, /sponsors, /venue, /register, /press and /faq — all content pulled from the Knowledge Base.
Connect the domain. Custom domains are configured as apex + www with TLS auto-provisioned; secrets go in Vercel environment variables.

Example promptSpin up the event landing page using our brand and ship it to a Vercel preview today.

What you get back: A live preview URL, GitHub repo, and a polished Next.js site pulling from your KB.

Good to know

Every pull request gets a preview URL — that's how the rest of the committee reviews without pulling the repo.
The skill pulls brand, content, sponsors, agenda and tickets from the Knowledge Base — it never invents copy.

From the skill's SKILL.md

The exact instructions the Head of Web skill gives Claude for this workflow.

Landing Page Sprinter

Spin up a polished event landing page in under an hour.

What it covers

Ask for: event name, date, location, theme, the one thing you want visitors to do (register / sign up for updates / download deck)
Read brand assets from 02-brand-and-voice/ (logo, primary color, fonts, tone)
Default stack: Next.js 15 App Router + Tailwind + Vercel for anything that has forms, dynamic content, or needs API routes; plain HTML + CSS in a single file when it's a one-pager that needs to ship in 20 minutes
Sections to include by default: hero with headline + CTA, why-attend, agenda preview, speaker grid, sponsor logo wall, FAQ, final CTA
Output: a working repo + a live preview URL
When the GitHub CLI is connected, create a new private repo (gh repo create) and push the initial scaffold
When the Vercel CLI is connected, link the repo (vercel link), deploy a preview (vercel), and promote to production when approved (vercel --prod)
Save the deployed URL and repo to 11-web/landing/

Next.js App Builder

Scaffold and ship a full event website with multiple pages and dynamic content.

What it covers

Default scaffold: npx create-next-app@latest --typescript --tailwind --app --eslint --src-dir
Standard route structure for an event: · / — landing page · /agenda — full schedule, filterable by track · /speakers — grid + speaker detail pages (/speakers/[slug]) · /sponsors — tiered sponsor wall + sponsor detail pages · /venue — directions, hotels, parking, accessibility · /register — ticket tiers + checkout link (or embedded provider) · /press — press kit, logos, fact sheet · /faq — pre-event Q&A
Pull all content from the Knowledge Base — sponsors from 04-sponsors/, speakers from 05-speakers/, agenda from the program slice, tickets from 07-finance-registration/.
Use Next.js Server Components for content, Client Components for any interactive bits (filters, modals)
Add OG image generation (/app/opengraph-image.tsx) for shareable links
Add a sitemap and robots.txt
Wire up a typed events.ts content layer that reads from the KB JSON

Vercel Deploy & Domain Operator

Ship to production cleanly.

What it covers

Use the Vercel CLI for everything: vercel link, vercel, vercel --prod, vercel domains add, vercel env add
Set up environment variables in Vercel for all secrets (Stripe keys, form endpoints, API tokens)
Configure custom domains: apex + www, with TLS auto-provisioned
Add preview deployments per Pull Request (Vercel does this by default with the GitHub integration)
Configure analytics: Vercel Analytics + Vercel Speed Insights at minimum; add Plausible if the organizer wants privacy-friendly visitor stats
Save the production URL, preview URL pattern, and Vercel project ID to 11-web/{project}/deploy.md

More guides

How to build a conference sponsorship prospectus with ClaudeRead the guide →How to write a conference Call for Speakers with ClaudeRead the guide →How to review and rank conference speaker submissions with ClaudeRead the guide →How to build a conference planning timeline with ClaudeRead the guide →

Try it with the Head of Web skill

Free and MIT licensed. Paste it into Claude.ai in five minutes, or install all eight for Claude Code with one command.

Install the skill →See all 8 skills