Build a Landing Page in a Weekend with Claude Code

What you're building

A single landing page for one product, one service, or one idea. Not a homepage with seven sections that link to twelve other pages. A focused page that loads in under a second, makes one promise above the fold, and gives the visitor exactly one thing to do. Maybe it's a waitlist signup. Maybe it's a Stripe Buy button. Maybe it's a Cal.com booking link. One CTA. The discipline of one CTA is the entire reason landing pages convert better than homepages.

By Sunday night the page is live at your-domain.com, scoring ninety-plus on Lighthouse, with a working form, working analytics, and a sitemap submitted to Google Search Console. Visitors are not who you're optimizing for yet. Speed, clarity, and proof are. Those three together are what convert traffic when you do eventually drive it, and they're cheaper to build in on day one than to retrofit on day thirty.

Think of the page as a one-pager you'd send to a friend who asked what you're working on. That mental frame keeps the copy honest and the design quiet. The version with two clear paragraphs and one button consistently outperforms the version with five sections of feature blocks at the launch stage, because no one knows your features yet.

What you need before you start

A clear one-sentence pitch. Three reasons your offer is better than the obvious alternative. Two or three social proofs, even if they're tweets or screenshots of paying customers. A logo, even if it's just your name in a clean font. A domain. Forty dollars budgeted for the domain, optional Plausible analytics, and a Resend account if you want signups by email. Have the assets ready before you open the editor. Bouncing between writing copy and writing CSS is the slowest way to ship.

• Claude Code installed locally
• Node 20 and pnpm
• Vite, Tailwind, and a tiny component library like shadcn/ui
• A Vercel or Netlify account
• A domain at Cloudflare or Namecheap
• A favicon and one social-share image

Saturday morning: structure

Ask Claude Code to scaffold a Vite TypeScript React project with Tailwind. Skip Next.js. A landing page doesn't need a server, doesn't need routes, and ships faster as a static SPA. Add shadcn/ui only for the button and the input. Don't pull a component library that ships dropdowns and dialogs you won't use. Every kilobyte of unused component code is a slower first paint and a lower Lighthouse score.

Open a COPY.md file at the repo root and write the actual page content before you touch a single layout file. Headline, subheadline, three benefits, social proof, FAQ, CTA. Five hundred words total. Have Claude read COPY.md when generating the page so the content drives the layout instead of the other way around. Pages designed around real copy fit the copy. Pages designed around lorem ipsum and then back-filled with copy never quite do.

Write the headline last. The first version you'll write is usually a description of the product. The right one is usually the promise to the customer. Three or four drafts in, you'll have one that fits in seven to nine words and earns the scroll. Until you do, leave the placeholder in COPY.md as TODO and keep iterating.

Saturday afternoon: layout and design

Tell Claude the visual feel in adjectives. 'Editorial,' 'punchy,' 'soft and warm,' 'brutalist.' Then point to one site you like, paste a screenshot, and tell Claude to riff on the spacing and typography without copying it. Pick a single font pair, one heading face and one body face. Pick a single accent color. Two more decisions than that and the page starts looking like a template. Restraint is the look. Adding ornament dilutes it.

Build top to bottom in the order a visitor reads. Hero, three benefits in a row, a section with a long screenshot or video, social proof, FAQ, CTA. Don't add a footer with sixty links. A small footer with company name, email, and a link to a privacy page is plenty. The club at claudecodeclub.ai has a public layout starter you can adapt for the typography and spacing, and it's worth the nine dollars a month just for the spacing scale.

Use generous vertical space between sections. Eighty to one hundred and twenty pixels of breathing room reads as confidence. Cramped sections read as urgency, which is the wrong tone for an unknown brand asking for an email. Confidence converts better than urgency at the top of the funnel.

Choices to make along the way

Vite SPA versus Next.js versus Astro: Vite is fastest to ship and good enough for a single page. Astro is the right answer if the page will grow into a marketing site with five or six pages and a blog. Next.js is overkill for this job. Don't use it just because you've used it before.

Tailwind versus vanilla CSS versus a styled component library: Tailwind plus Claude is the fastest combo because Claude writes Tailwind classes very fluently. Vanilla CSS works too but takes longer to iterate. Avoid heavy component libraries on a landing page because their default styles fight your brand and add weight.

Saturday night: the form

If your CTA is a waitlist or signup, you need somewhere for the email to go. Three good options: Resend with a tiny serverless function that writes to a Google Sheet, Formspree if you want zero code, or a Supabase table if you might grow this into a product. For a weekend landing page, Formspree is fine. You can swap to Resend plus Supabase the day you start running ads. The submitter should also get a confirmation email within sixty seconds, because silence after a form submit feels like a broken site.

How to test it

Run Lighthouse in Chrome DevTools. Score ninety or higher on Performance, Accessibility, Best Practices, and SEO. If anything is below ninety, fix it. Images are usually the culprit. Convert hero images to WebP, set width and height attributes, and lazy-load anything below the fold. Test on mobile via Chrome's device emulator and on a real phone. Two scrolls of empty space below the fold means the hero is too tall.

Read the page out loud as a stranger would. The first sentence should answer 'what is this.' The second should answer 'is it for me.' The third should answer 'what do I do next.' If any of those answers takes more than ten seconds to figure out from the page, the copy needs another draft. Reading out loud catches the awkward phrasing and the buried message that silent reading skims past.

Test the page on a slow connection. Throttle to Slow 4G in DevTools and load it. If the hero text doesn't appear within two seconds, your font loading strategy is wrong. Use font-display: swap on web fonts and preload the heading font in the document head so the first paint isn't a flash of invisible text.

How to ship it

Push to GitHub, connect to Vercel, set the build command to vite build and the output to dist. Buy your domain and point it via the dashboard. Add Plausible or Fathom analytics if you want tracking that doesn't need a cookie banner. Submit the sitemap to Google Search Console on Sunday night and check back on Monday for indexing status. The whole deploy takes about twenty minutes once the page is built. The club at claudecodeclub.ai is nine dollars a month and includes a launch-day checklist for the small things you'll forget at 11pm.

Set up redirects from the www subdomain to the apex domain, or vice versa, before announcing the link. Half of share platforms automatically use one and half use the other, and a non-redirecting twin domain splits search authority and confuses users who type the URL by hand. Vercel handles redirects in vercel.json with three lines.

Announce the page once it's live, then ask three people to look at it and tell you the one thing they didn't understand. The feedback is always specific and always useful. The fixes take fifteen minutes each and the page improves measurably between the first three viewers and the next thirty.

How to extend it

Add a second page for pricing if the headline needs more space. Add an A/B test on the headline with a tool like PostHog or with a tiny client-side script that randomizes between two strings cookie-stickily. Add a blog if you want SEO traffic, switching the project to Astro at that point. Add a Stripe Buy button if your CTA becomes 'buy now.' Each is a half-day project. Avoid the temptation to add a chatbot widget. They lower conversion on landing pages more often than they raise it.

Common gotchas

Forgetting the og:image and og:title tags, which makes the page look ugly when shared on Twitter or Slack. Hero images that are five megabytes because you uploaded the raw export. Forms that work locally and silently fail on production because the env var wasn't set in Vercel. Layouts that look fine at 1440 pixels and break at 375. Test mobile before you celebrate.

And finally, the temptation to keep building. A landing page is done when one visitor lands on it and understands what to do. Not when every animation feels perfect. Ship Sunday. Iterate Monday.