Watch on YouTube: https://www.youtube.com/watch?v=1P5xtV-Kf0o
Channel: Liam Ottley
Introduction
In this video Liam Ottley demonstrates how he built a high‑impact website for his AI Makeover business by combining several AI‑driven tools. The stack includes Claude Code for site orchestration, Higgsfield for turning still images into video clips, Fable 5 and 3.js for premium 3D visuals, UI component libraries 21st.dev and Mobbin, and Osprey (via Firecrawl) for visitor identification and lead enrichment. The result is a site deployed at ai-makeover.io that captures leads from existing traffic without additional ad spend.
What the video covers
- How Claude Code was used to generate the site concept and orchestrate the build.
- The process of converting still photos into 16:9 video clips with Higgsfield’s MCP connector.
- Creation of 3D orb visuals using Fable 5 and 3.js for a scroll‑based premium experience.
- Querying UI libraries 21st.dev ($9/mo) and Mobbin ($20/mo) through MCP to pull proven component code.
- Integrating Osprey via Firecrawl to scrape visitor data, resolve roughly 40% of US traffic with 80‑85% accuracy, and enrich leads at $0.18 per lead.
- Deploying the site, optimizing for mobile, and monitoring the Osprey dashboard (194 resolved companies in 24 h after mobile tweaks).
- Setting up Osprey webhooks to tools like Expandi for automated outreach when an ICP score reaches 70 or higher.
- Potential trade‑offs: heavy 3D effects may impact mobile performance and require separate optimization.
- Encouragement to try the 30‑day Osprey trial and experiment with lead capture on personal sites.
Step‑by‑step walkthrough
- Project kickoff with Claude Code – Liam prompted Claude Code to generate a website concept for his AI Makeover service and to outline the required files and structure.
- Media preparation with Higgsfield – Still product photos were uploaded to Higgsfield via its MCP connector; the tool widened the images and generated 16:9 video clips ready for web use.
- 3D visual layer with Fable 5 and 3.js – Using Fable 5, Liam built interactive orb animations powered by 3.js, which were integrated into the page to create a premium, scroll‑driven feel.
- UI component sourcing – Through MCP, Claude Code queried the 21st.dev and Mobbin libraries, pulling ready‑made component snippets (buttons, cards, modals) that matched the site’s design language.
- Site assembly – Claude Code stitched together the HTML, CSS, and JavaScript files, inserting the Higgsfield video clips, Fable 5/3.js orbs, and the UI components into a cohesive layout.
- Visitor identification with Osprey & Firecrawl – Liam used Firecrawl to scrape Osprey’s documentation, then added the Osprey tracking script to the site. Osprey attempts to resolve visitor IP addresses to company profiles, claiming ~40% of US traffic can be identified with 80‑85% accuracy.
- Lead enrichment and cost – Each resolved visitor is enriched at approximately $0.18 per lead. Enriched data can be sent via webhook to CRMs or outreach tools (e.g., Expandi) when the ICP score meets a threshold (≥70).
- Deployment and mobile optimization – The final bundle was pushed to a live domain (
ai-makeover.io). After noticing performance issues on mobile, Liam applied mobile‑specific optimizations (reducing 3D frame rates, compressing textures) before re‑launching. - Results monitoring – Within 24 hours of the mobile‑optimized launch, the Osprey dashboard showed 194 resolved companies, illustrating the potential to convert existing traffic into leads.
- Automation setup – Osprey webhooks were configured to trigger Expandi sequences for leads scoring 70 or higher, enabling automated outreach without manual list building.
Tools and numbers mentioned
- Claude Code – AI‑driven site orchestrator.
- Higgsfield.ai – converts stills to video via MCP connector.
- Fable 5 – used for 3D orb visuals.
- 3.js – powers the 3D animations.
- 21st.dev – UI component library, $9/mo.
- Mobbin – UI component library, $20/mo.
- Osprey (osprey.ai) – visitor identification and lead enrichment.
- Firecrawl – scraping tool used to pull Osprey docs and install the tracking script.
- Expandi – outreach platform that can receive Osprey webhooks.
- Albacross – referenced in the video as a comparable service.
- Traffic resolution claim: ~40% of US traffic.
- Accuracy claim: 80‑85% correct resolution.
- Lead enrichment cost: $0.18 per lead.
- Live site:
ai-makeover.io. - Osprey trial: 30‑day free trial offered.
Caveats / hype check
The video presents Osprey’s claim of resolving ~40% of US traffic with 80‑85% accuracy as a near‑guaranteed source of “free leads,” which may overstate real‑world performance and depends heavily on visitor data quality and compliance considerations. The “$10K AI websites” framing is more aspirational than a proven revenue figure.
Additional points to consider:
- Heavy 3D effects (Fable 5/3.js) can degrade mobile performance; separate optimization is necessary.
- Osprey’s data accuracy varies by region and IP type; results may differ outside the US.
- Lead enrichment at $0.18 per lead adds up quickly at scale; monitor cost‑per‑acquisition.
- Using visitor identification tools must align with privacy regulations (GDPR, CCPA, etc.).
Concrete next actions
- Sign up for Higgsfield.ai and add its MCP connector to Claude Code.
- Subscribe to 21st.dev ($9/mo) and Mobbin ($20/mo) and enable MCP access for Claude Code.
- Use Claude Code with Firecrawl to scrape Osprey documentation and integrate the tracking script.
- Deploy the site to a live domain (e.g., a subdomain or ai‑makeover.io) and apply mobile‑specific optimizations.
- Drive existing traffic to the site and monitor the Osprey dashboard for resolved visitors and leads.
- Set up Osprey webhooks to Expandi or your CRM for automated outreach when ICP score ≥70.
- Experiment with the 30‑day Osprey trial to evaluate lead quality and cost per lead.
- Iterate on the website concept by asking Claude Code for multiple variations and refining based on feedback.
Leave a Reply