Claude Code Websites: How I Earned $1.2M (20% Conversions)
By Jono Catliff
Input: A detailed summary of video content.Constraint 1: No broad terms (e.g.no "FinanceTechnology").
Share:
Key Concepts
- Conversion Rate Optimization (CRO): The systematic process of increasing the percentage of website visitors who take a desired action (leads/sales).
- Claude Code: An AI-powered coding assistant used within the "Anti-Gravity" workspace to build and iterate on websites.
- Lead Generation Funnel: The path from traffic acquisition (SEO/Ads) to landing page conversion, followed by immediate sales follow-up.
- PostHog: An analytics platform used for heat mapping, session recording, and A/B split testing.
- Speed-to-Lead: The strategy of contacting a lead within seconds of their inquiry to maximize conversion probability.
- Environmental Variables: Secure keys used to connect applications (like PostHog) to live websites without exposing sensitive credentials.
1. The Philosophy of High-Converting Websites
The author argues that "beautiful" websites are secondary to functional, high-converting ones. A website’s primary goal is to generate leads or sales.
- The 20% Conversion Benchmark: The author achieved a 20% conversion rate (10x the industry average of 2–4%) by focusing on data-driven design rather than aesthetics.
- Trust vs. Beauty: A website must establish trust within 50 milliseconds. If it looks like a scam, users bounce immediately.
- The "Less is More" Rule: Users read only 10% of page text. Keep copy concise, focusing on benefits (outcomes) rather than features (tech stack). Use accordions for SEO-heavy content to keep the page clean.
2. Essential Landing Page Elements (S-Tier Non-Negotiables)
- Founder Video: A 45-second video introducing yourself builds personal trust. This single addition increased the author's conversions by 33%.
- Video Testimonials: These are the "holy grail" of social proof. They reduce the cost-per-conversion significantly (e.g., from $200 to $30) because they are perceived as authentic.
- Form & Phone Accessibility: Forms must be visible without searching. Phone numbers should be clickable for mobile users to enable "get it done" mode.
- Offer & Risk Reversal: Use the formula: We will [verb] your [metric] by [number] in [timeframe] or [risk reversal].
- Eliminate Distractions: Remove navigation bars and footers on ad-driven landing pages to force the user to focus on the primary call-to-action (CTA).
3. Technical Implementation & Methodology
- Environment Setup: Use "Anti-Gravity" (a free desktop coding workspace) with the Claude Code plugin.
- Claude.md: A configuration file that acts as a "training manual" for the AI, defining how it should behave and build.
- Responsive Design: Use browser developer tools (responsive mode) to ensure the site is optimized for mobile, which accounts for ~64% of traffic.
- Page Load Speed: Conversion rates drop significantly for every second of load time. Use Google Lighthouse to audit performance and have Claude optimize the code to achieve a 95–100% score.
4. Scaling and Automation
- The "Zipper" Approach: Create specific landing pages for every combination of service and location (e.g., "Tree Trimming in Toronto" vs. "Tree Trimming in Vancouver"). This ensures the landing page matches the user's search intent perfectly.
- Skill Creation: Use Claude Code to create a "skill" (an automated workflow) that generates new landing pages based on specific parameters (City, Service, Source).
- Speed-to-Lead Automation: Use webhooks (via Zapier, Make.com, or similar) to send form data to a CRM, which then triggers an automated phone call to the business owner, allowing them to connect with the lead within 10 seconds.
5. Data-Driven Optimization (Testing)
- A/B Split Testing: Use PostHog to route 50% of traffic to "Page A" and 50% to "Page B."
- Tracking Conversions: Define a conversion as a user landing on a "Thank You" page after form submission.
- Heat Maps & Session Recording: Use PostHog to watch real-time recordings of users. This reveals "maze-like" navigation issues that aren't obvious to the creator.
- Deployment: Push code from the local environment to GitHub, then deploy via Vercel. Use Environmental Variables to securely manage API keys for third-party integrations like PostHog.
Synthesis/Conclusion
The core takeaway is that high-converting websites are not built on intuition but on systematic iteration. By combining AI-assisted development (Claude Code) with rigorous data analysis (PostHog), businesses can move from guesswork to a predictable, scalable lead-generation machine. The most critical success factors are speed of follow-up, authentic social proof (video testimonials), and hyper-specific alignment between the user's search query and the landing page content.
Chat with this Video
AI-PoweredLoad the transcript when you're ready to chat so the initial page stays lighter.