How to Build and A/B Test a High-Converting Landing Page with Claude Code for Free (PostHog + Vercel Stack)

The Entire CRO Stack Costs $0: Claude Code + PostHog + Vercel in Under an Hour

You can build, deploy, and A/B test a landing page without spending a dollar on infrastructure. PostHog for A/B testing and session recording, Vercel for hosting, Claude Code to generate and optimize the page — the whole stack is free. The only recurring cost is your Claude subscription, and if you route through Open Router’s free tier, you can cut even that to near zero.

This post is a setup guide for that stack. Not theory — actual steps, in order, with the failure modes documented.

The context: a builder who ran $171,000 in Google Ads across a service business documented his entire landing page methodology, including the specific toolchain he used to reach a 20% conversion rate (10x the 2–4% industry average). The technical stack he describes is reproducible by anyone with a few hours and no prior coding experience. Here’s how to build it.

---

What you’re actually building

A landing page that:

1. Gets built by Claude Code from a design reference (no hand-coding)
2. Deploys to a live URL via Vercel in under 60 seconds
3. Runs A/B tests through PostHog, tracking conversions when visitors hit a thank-you page
4. Fires an automated outbound call to you within ~10 seconds of a form submission

The last point is the one most people skip. Speed-to-lead data is stark: calling a lead within one minute produces 4x more sales than calling later. The auto-call setup closes the loop between a form submission and an actual conversation.

---

What you need before starting

Accounts (all free):

• Antigravity IDE — Google’s free desktop coding workspace; Claude Code runs as a plugin inside it
• Anthropic account with a paid Claude plan (or configure Open Router as the backend)
• GitHub account — for storing your project code
• Vercel account — for deploying the site
• PostHog account — for A/B testing, session recording, and heatmaps
• A CRM with webhook support (for the auto-call; Twilio is the common backbone)

Files:

• A claude.md file configured for web projects. The creator of this stack makes his downloadable from his free School community. This file trains Claude on how to behave — think of it as the onboarding document for a new employee. Without it, Claude’s output is generic. With it, you get consistent, structured web output.

Design reference:

• A screenshot from Dribbble. Search for your industry (e.g., “landscaping website”), pick something clean, save the image. Claude will replicate the visual structure.

---

Building the stack, step by step

Step 1: Set up Antigravity and Claude Code

Download Antigravity. Open it. In the left sidebar, find the plugins section, search for “Claude Code,” and install it. Create a project folder — something like my-landing-page inside a parent claude-code-projects directory.

Drop your claude.md file into that folder. This is non-negotiable. Open the folder in Antigravity and you should see it listed in the file tree.

Now you have: A Claude Code environment pointed at your project folder, with behavioral instructions loaded.

Step 2: Generate the first version of the page

Open Claude Code (the button in the sidebar). Prompt it:

Can you please build me a one-page website for my [business type]? I want to upload an image of an example design and I want you to replicate it for me.

Upload your Dribbble screenshot using the + button. Send the prompt. Claude will scaffold a Next.js project with the visual structure from your reference image.

When it’s done, click the localhost link it provides (default: http://localhost:3000). You should see a working page.

Now you have: A locally running landing page that visually matches your design reference.

Step 3: Add the conversion elements

This is where most tutorials stop at “looks good” and move on. Don’t. The visual is a binary trust signal — either it looks legitimate or it doesn’t. What actually moves conversion rate is the content structure.

Use the prompts.md file (available in the same School community as the claude.md) to add these elements in a single prompt pass:

• Founder video placeholder (a 45-second video of you talking, not selling the service — selling yourself)
• Video testimonials section (raw phone recordings from clients outperform studio-produced ones)
• FAQ section structured as objection handling, not filler
• Clickable phone number (tap-to-call on mobile)
• Call-to-action buttons distributed throughout the page
• Stats and trust markers (years in business, projects completed, review badges)

One data point worth sitting with: adding a founder video to a landing page lifted conversion rate from 10% to 15% — a 33% increase in leads with no other changes. Video testimonials dropped Google Ads cost-per-conversion from $200 to $30. These aren’t marginal improvements.

For ad traffic specifically: remove the navbar and footer. Every link that isn’t the form or the phone number is a distraction. If you’re paying per click, you want exactly two possible actions on the page.

Now you have: A structurally complete landing page with conversion-oriented content layout.

Step 4: Optimize for mobile and page speed

64% of landing page visitors are on mobile. Open Chrome DevTools (three dots → More Tools → Developer Tools), click the responsive mode icon, and check your page at iPhone dimensions. Fix anything that’s broken before moving on.

Then run a Lighthouse audit. In DevTools, click the >> arrows and find the Lighthouse tab. Run an analysis. You’ll get scores across Performance, SEO, Accessibility, and Best Practices.

Here’s the part that used to require a developer: copy the entire Lighthouse report output, paste it into Claude Code with this prompt:

Here’s the Lighthouse report. Can you optimize for page load speed? Can you also optimize for desktop, tablet, and mobile devices?

In one pass, a page went from a 90% performance score to 95%. Run the audit again. If you’re not at 100%, paste the new report back in and iterate.

Why this matters: at 1 second load time, average conversion rate is 3.05%. At 2 seconds, it drops to roughly 1.5%. At 4 seconds, you’re at about 0.6% — roughly 20% of what you’d get with a fast page. The main culprits are unoptimized images and render-blocking JavaScript. Claude handles both.

Now you have: A mobile-optimized, fast-loading page with a Lighthouse performance score above 90%.

Step 5: Install PostHog and configure A/B testing

Go to posthog.com, create a free account, and start the onboarding flow. You’ll get a code snippet. Don’t paste it manually into your files — instead, open the terminal inside Antigravity (there’s a button for it) and paste the snippet there. This triggers the PostHog wizard, which handles the installation automatically. It takes about 8 minutes.

Once installed, you need to add a thank-you page. This is the page users land on after submitting the form. PostHog tracks conversions by detecting when a visitor loads this page — it’s simpler and more reliable than tracking form submit events directly.

Prompt Claude:

Please add a thank-you page that users are redirected to after form submission. Add a calendar embed placeholder for booking a call. Make sure PostHog is tracking page loads on both the homepage and the thank-you page.

Now set up the experiment in PostHog:

1. In PostHog, click + → search “Experiments” → Create new experiment
2. Name it, set traffic split to 50/50 (control vs. variant)
3. Add a primary metric: set it to track the quote_submitted event (or whatever your thank-you page load event is named)
4. Before you can see that event, you need to submit the form once so PostHog registers it

Critical step people miss: PostHog requires authorized URLs before it will accept data from your domain. Go to Settings → Web Analytics → Add Authorized URL. Paste your localhost:3000 URL (just the root — no subpages). The URL uses http:// not https:// in local development; that’s expected.

To add tracking code to your test and control pages, paste the code snippets from PostHog’s experiment setup screen into Claude with a prompt like:

I need to add PostHog experiment tracking to two pages. The control is the homepage. The test is /v2. Here are the code snippets: [paste control snippet] [paste test snippet].

Test it in an incognito tab — PostHog uses cookies to keep users on the same variant, so regular browser tabs will always show you the same page. Incognito clears cookies and gives you a fresh assignment each time.

Now you have: A running A/B test that will tell you, with statistical confidence, which page variant converts better.

Step 6: Deploy to Vercel

PostHog heatmaps don’t work on localhost — you need a live URL. Two steps: GitHub then Vercel.

In GitHub, create a new private repository. Copy the repository setup commands. Back in Claude Code, paste them with:

Can you please upload the entire project to GitHub for me?

Then go to Vercel, create a new project, connect your GitHub account, and import the repository. Two things to configure on import:

1. Set the framework preset to Next.js
2. Add your PostHog API key as an environment variable. Open your local .env.local file — everything before the = is the key name, everything after is the value. Vercel needs this because .gitignore correctly excludes your .env file from GitHub for security reasons.

Deploy. Vercel builds and serves the site in about 60 seconds. You get a .vercel.app URL immediately; you can attach a custom domain later.

Add this live URL to PostHog’s authorized URLs list (Settings → Web Analytics → Add Authorized URL). Now heatmaps will work.

Now you have: A live, publicly accessible landing page with PostHog tracking active.

Step 7: Wire up the auto-call on form submit

When someone fills out your form, you want to be on the phone with them within 60 seconds. The automation chain is: form submit → webhook → CRM → automated outbound call.

Prompt Claude:

When the form is submitted, send the lead’s first name, last name, email, and phone number to this webhook URL: [your webhook URL].

The webhook connects to whatever automation tool you use — Make.com, Zapier, n8n, or directly to your CRM. Most CRMs use Twilio as the VoIP backbone. The sequence creates a contact, assigns it, and triggers an outbound call. In the demo, the call arrives in about 10 seconds with a prompt to “press any key to connect with your new lead.”

If you’re building more complex lead routing or multi-step qualification flows on top of this, platforms like MindStudio handle that orchestration layer — 200+ models, 1,000+ integrations, and a visual builder for chaining the kind of webhook-triggered workflows that sit between form submission and CRM action.

Now you have: A complete lead capture and response loop — form submission triggers an automated call before the lead has closed the tab.

---

The failure modes worth knowing

PostHog events don’t appear in the experiment setup. You need to submit the form at least once after PostHog is installed. The event only registers after it’s been fired. Submit a test entry, wait 30 seconds, refresh.

The authorized URL doesn’t match. PostHog is strict about this. http://localhost:3000 and http://localhost:3001 are different URLs. Check which port your dev server is actually running on — it defaults to 3000 but can shift if something else is using that port.

Vercel deploy fails with missing environment variables. The .env.local file is gitignored, so Vercel never sees it. You must manually add every key from that file in the Vercel project settings under Environment Variables. If PostHog isn’t tracking on your live site, this is almost certainly why.

A/B test results look identical. You’re probably testing in a regular browser tab where PostHog has already cookied you to one variant. Always use incognito for manual testing.

Lighthouse score won’t budge past 90%. Paste the updated report back into Claude and ask it to continue optimizing. It’s iterative. The main remaining issues after the first pass are usually image format (WebP vs. JPEG) and third-party script load order.

---

Where to take this further

Once you have a winning variant from your A/B test, the next move is scaling the page across city/service combinations. The “zipper” approach: one axis is geography (Toronto, Vancouver, Manhattan, the Bronx), the other is service (tree trimming, tree removal, stump grinding). Each intersection gets its own landing page, tuned to match the exact search query.

Claude Code supports this through skills — reusable workflows you invoke with a slash command. The command /landing-page-generator [city] [service] [traffic-source] generates a new page pre-configured for that combination. For SEO, ramp up slowly — adding thousands of pages in a day will trigger a Google penalty. For ads, you can move faster.

The Claude Code skills system is worth understanding before you build the generator, because the distinction between a skill (a specialist playbook you write once) and a plugin (a packaged bundle) affects how you structure the automation. If you want the generator to also pull in competitor data or auto-research local keywords, pairing it with AutoResearch loops is a natural extension.

For the broader question of how to go from a validated landing page to a full application — with auth, a database, and a backend that handles lead storage and routing — Remy takes a different approach: you write an annotated markdown spec and it compiles a complete TypeScript stack from it, including database migrations and deployment. The spec is the source of truth; the generated code is derived output.

Session recordings in PostHog will show you things the split test won’t — specific moments where users hesitate, scroll back, or abandon the form. Watch the first 20 sessions on any new variant before drawing conclusions from aggregate data. The qualitative and quantitative signals together are more useful than either alone.

If you want to extend the notification side — routing leads to Slack, triggering Telegram messages, or building a more sophisticated qualification sequence before the auto-call fires — the Claude Code + Telegram channels setup covers the webhook-to-messaging-app pattern in detail.

The stack described here took seven years to develop through trial and error. The tooling now makes it reproducible in an afternoon.