How to Build a 20%-Converting Lead Gen Site with Claude Code: The Full Workflow from Design to Automated Follow-Up

From Blank Folder to Automated Lead Machine in One Session

Seven years of landing page iteration produced a 20% conversion rate — ten times the industry average of 2–4% — and $1.2M in revenue from a single service business. The workflow that got there is now reproducible in an afternoon: Dribbble design reference → Claude Code build → PostHog split testing → Lighthouse optimization → webhook lead callback in 10 seconds. This post walks through every step.

The conversion numbers are worth sitting with before you start. A page that loads in 4 seconds converts at roughly 0.6%. A page that loads in 1 second converts at 3.05%. That’s not a marginal difference — it’s an 80% reduction in the value of every dollar you spend on traffic, silently, before a visitor reads a single word of copy.

---

Why a 20% Conversion Rate Changes the Economics of Paid Traffic

If you and a competitor are both running Google Ads and your page converts at 20% while theirs converts at 2%, you’re acquiring customers at one-tenth the cost. Same auction, same keywords, same budget — you win every time.

The math extends to speed-to-lead. Calling a form submission in the same minute it arrives generates 4x more closed deals than calling 30 minutes later. You don’t need more leads. You need to call the ones you have faster.

Both of these are engineering problems, not marketing problems. That’s why Claude Code is the right tool for this.

---

What You Need Before You Start

Accounts (all free unless noted):

• Anti-Gravity — Google’s desktop coding workspace; Claude Code runs as a plugin inside it
• Claude Code plugin (requires a paid Claude plan; Anti-Gravity gives free credits if you want to test first)
• Dribbble — for sourcing design references
• PostHog — split testing, session recording, heat maps
• GitHub — repository hosting
• Vercel — deployment (free tier is sufficient)

Files:

• A claude.md file configured for web projects. This is the instruction set that tells Claude how to behave as a web developer. The creator of this workflow makes it available in his free School community — it’s worth grabbing rather than writing from scratch.

Knowledge:

• No coding experience required. You will paste things into terminals and Claude will handle the rest.
• Basic familiarity with what a webhook is helps for the lead callback section, but isn’t strictly necessary.

---

The Build: Step by Step

Step 1 — Set up your project folder

Open Anti-Gravity. Create a new folder — call it something like landing-page-cro. Drop your claude.md file into it. Open the folder in Anti-Gravity.

The claude.md file is doing the same job as an onboarding document for a new hire. Without it, Claude will make reasonable but generic decisions. With it, Claude knows your conventions, your stack preferences, and how you want components structured.

Now you have: a configured Claude Code environment ready to build.

Step 2 — Find a design reference on Dribbble

Go to dribbble.com and search for your industry — “landscaping website,” “plumber landing page,” whatever fits. Pick something that looks trustworthy, not necessarily beautiful. The goal is a clean layout with clear hierarchy, not a portfolio piece.

Screenshot or save the image. You’ll upload it directly to Claude.

One note on design philosophy: beautiful websites make you zero dollars on their own. The creator of this workflow showed his 20%-converting page during the walkthrough — it’s clean but not impressive. Design is a binary trust signal. Either it looks legitimate enough to proceed, or it looks like a scam. Once you clear that bar, copy and social proof do the heavy lifting.

Now you have: a design reference ready to hand to Claude.

Step 3 — Build the first version

Open Claude Code in Anti-Gravity. Send this prompt (roughly):

“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. Claude builds the site. When it’s done, click the localhost link to preview it — or ask Claude for the local URL if it doesn’t appear automatically.

The default output will be a Next.js app running on localhost:3000.

Now you have: a working local site that matches your design reference.

Step 4 — Apply the conversion layer

This is where most landing page tutorials stop at “looks good.” The conversion layer is what actually moves the needle.

Paste a single prompt that adds all of the following in one pass:

• Kill the navbar and footer — for ad traffic pages, every link that isn’t “call us” or “fill out the form” is a leak. Remove them.
• Form on the page — not a link to a contact page. The form lives on the landing page, visible without scrolling if possible.
• Sticky mobile CTA — on mobile (which is 64% of your traffic), pin a single CTA button to the bottom of the screen. It follows the user as they scroll.
• Founder video placeholder — a video of yourself talking increased one builder’s conversions from 10% to 15%, a 33% lift. Keep it under 45 seconds. The script: quick intro, social proof, three reasons to choose you, call to action, risk reversal.
• Video testimonial section — nine video testimonials dropped Google Ads cost per conversion from $200 to $30 on one campaign. They don’t need to be studio-quality. A 30-second phone video from a real client outperforms a polished fake.
• Offer formula — structure your headline as: “We’ll [verb] your [metric] by [number] in [timeframe] or [risk reversal].” Example: “We’ll generate you 20 qualified leads per month or you don’t pay a dime.”
• Trust stats, external review badges, FAQ as objection handlers — these fill in the gaps that testimonials don’t cover.

Claude handles all of this from one prompt. The before/after difference is significant — the after version is mostly social proof with minimal text, which is exactly right. People read about 10% of a landing page. You want to control which 10%.

Now you have: a conversion-optimized page with all S-tier elements in place.

Step 5 — Optimize for mobile and run Lighthouse

Switch Chrome DevTools to responsive mode (three dots → More Tools → Developer Tools → the device toggle icon). Check your page at iPhone dimensions. Fix anything that’s broken or cramped by describing it to Claude.

Then run a Lighthouse audit: in DevTools, click the >> arrows and select Lighthouse. Analyze the page. Copy the entire report output.

Paste it into Claude 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?”

The main culprits are usually uncompressed images and render-blocking JavaScript. Claude will handle minification, lazy loading, and image format conversion. Run Lighthouse again after. If you’re at 95%, paste the new report back and ask Claude to get it to 100%. Iterate until you’re there.

The target is 1-second load time. The conversion difference between 1 second and 4 seconds is not incremental — it’s the difference between 3.05% and 0.6%.

Now you have: a fast, mobile-optimized page ready for real traffic.

Step 6 — Install PostHog for split testing and session recording

Go to posthog.com, create a free account, and copy the installation snippet they give you. In Anti-Gravity, open the terminal (the terminal button in the sidebar) and paste the snippet. Hit enter. This launches the PostHog wizard, which handles the full installation — takes about 8 minutes.

PostHog needs authorized URLs to connect to your site. Go to Settings → Web Analytics and add http://localhost:3000 (or whatever port you’re on).

Add a thank you page — this is the page users land on after submitting the form. PostHog tracks a conversion when someone reaches this URL. Ask Claude to build it, and optionally embed a Calendly link so leads can book a call immediately.

Create an experiment in PostHog: Experiments → New Experiment → split traffic 50/50 between your original page and a variant. Set the primary metric to quote_submitted (you’ll need to submit the form once for this event to appear). Copy the experiment code snippets and paste them into Claude with the page names — Claude will add the tracking to the right files.

Now you have: a live split test that will tell you definitively which page converts better.

Step 7 — Deploy to Vercel via GitHub

Create a new private GitHub repository. Copy the repository setup commands and paste them into Claude: “Can you please upload the entire project to GitHub for me?” Claude pushes everything.

In Vercel, create a new project, connect GitHub, and import your repository. Two things matter here:

1. Set the framework preset to Next.js
2. Add your PostHog API keys as environment variables. Your .env.local file wasn’t pushed to GitHub (it’s in .gitignore for security). In Vercel’s environment variables section, paste the key name (everything before the =) and the value (everything after the =) from your local .env.local.

Deploy. Vercel gives you a live URL in about 60 seconds. Add your custom domain if you have one.

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

Step 8 — Wire up the 10-second lead callback

When someone submits your form, you want to be on the phone with them within 60 seconds. The data on this is stark: same-minute callback = 4x more sales versus 30 minutes later.

Ask Claude to send form submissions to a webhook URL. The webhook triggers an automation (Zapier, Make.com, or n8n all work) that:

1. Creates a contact in your CRM
2. Initiates an outbound VoIP call via Twilio (or your CRM’s built-in calling)
3. Connects you to the lead when you answer

The demo in the source walkthrough shows the whole loop: form submitted → 10 seconds → phone rings → press any key → connected to the lead. The VoIP number also gives you per-page call tracking — buy a separate Twilio number for each landing page and you know exactly which page drove each call.

If you’re building more sophisticated lead routing or want to chain this into a multi-step agent workflow, platforms like MindStudio handle this kind of orchestration — 200+ models, 1,000+ integrations including CRMs, and a visual builder for chaining the steps without writing the glue code yourself.

Now you have: a complete lead generation system that calls prospects automatically.

---

The Skill: Generating Pages on Autopilot

Once your base page is working, you can turn it into a skill — a reusable Claude Code workflow. Ask Claude to create a skill called /landing-dash-page-generator that accepts three arguments: [service], [city], and [traffic source].

Running /landing-dash-page-generator "tree trimming" "Toronto" "Google Ads" generates a page customized for that exact keyword. The headline, copy, and metadata all match the search query. This matters because message match — the alignment between what someone searched and what your page says — is one of the highest-leverage conversion variables.

The “zipper approach” to page multiplication: one axis is your service list, the other is your city or region list. Every intersection is a page. Tree trimming Toronto, tree trimming Vancouver, tree trimming Montreal. Each page targets a specific keyword and converts better than a generic catchall.

One hard constraint: don’t generate 1,000 pages at once. Google will flag the sudden spike and penalize the domain. Ramp up gradually — a few pages per week — and let the index absorb them naturally.

For teams thinking about how this kind of spec-driven generation scales to full applications, Remy takes a related approach: you write an annotated markdown spec describing your application, and it compiles a complete TypeScript backend, SQLite database, auth layer, and frontend from it. The spec is the source of truth; the code is derived output. Different use case than a landing page skill, but the same underlying idea — write intent once, generate artifacts from it.

This kind of Claude Code skill system is worth understanding in depth if you’re planning to build more than one page.

---

What Actually Goes Wrong

PostHog events don’t appear in the experiment. Submit the form at least once after installing PostHog. The quote_submitted event only shows up in the dropdown after it’s been fired at least once.

Split test always shows the same page. PostHog uses cookies to keep users on the same variant. Test in an incognito tab — each new incognito session clears cookies and gets a fresh random assignment.

Vercel deployment fails. Almost always missing environment variables. Check that your PostHog NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST are entered correctly in Vercel’s environment variables section. The key is everything before = in your .env.local; the value is everything after.

Lighthouse score doesn’t improve past 90%. Paste the new report back into Claude and ask specifically for the remaining issues. Usually it’s one or two items — legacy JavaScript or an unoptimized image that wasn’t caught in the first pass.

Webhook doesn’t fire. Test the form submission locally first and check the browser’s Network tab for the outgoing request. If the request isn’t leaving the browser, Claude needs to add the fetch call to the form submission handler. If it’s leaving but failing, check the webhook URL and CORS headers.

---

Where to Take This Further

The split test is the engine. Once you have traffic, you’re looking for statistically significant differences between variants — typically you need a few hundred form submissions per variant before the numbers stabilize. When a loser is clear, rotate it out, promote the winner to control, and start a new variant.

The session recordings in PostHog are underrated for finding non-obvious problems. You can watch real users navigate your page and see exactly where they hesitate, scroll back, or abandon. It’s the kind of feedback that no amount of analytics aggregation surfaces.

If you want to extend the workflow into content marketing — using similar Claude Code skills to generate SEO-targeted blog posts or service pages — the Claude Code content marketing skill system covers that pattern in detail.

For teams building out the full agentic layer — where the landing page is one node in a larger system that qualifies leads, routes them, and triggers follow-up sequences — the five Claude Code workflow patterns post covers the orchestration primitives worth knowing.

And if you’re thinking about the memory and context layer — how Claude Code retains knowledge about your project across sessions — the self-evolving Claude Code memory system approach is worth reading before you scale to dozens of pages.

The 20% conversion rate took 40–60 landing page tests over years. The infrastructure to run those tests now takes one afternoon to set up. That’s the actual change here — the iteration cycle compressed, not the need for iteration eliminated.