Build a Lead Generation Website with Claude! (Claude Tutorial)
2.6K views · 2026-10-08
UI Design
🔗 Get Hostinger: https://hostinger.com/productivedude
🎟️ Use code PRODUCTIVEDUDE at checkout for 10% off
In this video I build a full website for a local roofing company with Claude Code, using my three-step flow: Plan, Prototype, Production. You'll see how to collect inspiration, build a brand folder, make real SVG logos, pick color palettes, build the site, fix it with screenshots and annotations, add an admin portal for leads, deploy it on Hostinger with your own domain, and finally have Claude find local businesses, audit their sites and draft demo sites and outreach emails for you.
Two ways to use this:
1. Sell it: build demo sites for local businesses and charge monthly to keep them running.
2. Use it: launch a better website for your own business.
---
⏱️ CHAPTERS
0:00 The new way to build websites
1:00 The 3 Ps: Plan, Prototype, Production
1:26 Setting up Claude Code
2:04 Collecting inspiration
3:09 Creating a brand folder
3:37 Real SVG logos with Recraft
5:13 Colour palettes
5:42 Prototyping the website
7:42 Fixing it with screenshots and annotations
8:17 Adding an admin portal for leads
9:00 Hosting many sites cheaply
9:48 Signing up for Hostinger
10:43 Coupon code PRODUCTIVEDUDE
11:25 Connecting Claude to Hostinger (CLI)
12:34 Launching the site live
12:56 Testing the lead form and dashboard
13:37 Updating your live site with Claude
13:56 The outreach system that finds clients
15:27 How to land your first clients
---
🧰 TOOLS
Claude: https://claude.ai/
Swipefile (website inspiration): https://swipefile.com
Recraft (SVG logos): https://higgsfield.ai
Hostinger: https://www.hostinger.com/pricing
Hostinger CLI docs: https://docs.hostinger.com/api-reference/cli
---
📋 PROMPTS FROM THE VIDEO
1) Inspiration
"I would like you to continue saving inspiration sources as I add them. Create a folder for them and take all of the lessons they give you into consideration for the final website we're about to create."
2) Brand folder
"Next, I want you to create a brand folder where we store our brand assets: colors, fonts, logos, everything like that, even our own proprietary images that we upload."
3) Logo refinement (attach the logo file)
"Get rid of the text on this logo, simplify it and make it better. Output a final SVG plus candidate SVG logos with wordmarks, icons and favicons, everything we need for a website, and package it up nicely."
Then: "Open this up in a preview so I can see all the variations of the logo."
4) Colour palettes
"I would like to propose some new color palettes." (then lock in your favourite and pick the main logo)
5) Build the site
"Build out the initial website. It's a one-page website for now, focused on GEO and SEO in [YOUR LOCAL AREA]. Think of it as a hybrid landing page: dense links in the footer, the top call-to-action heavy. Every image should be a placeholder whose text is a prompt for an AI image. Remove common AI tells: no eyebrows, no under-brows or tiny text, everything highly legible, no status dots, no em dashes, no staccato sentences. If you need to list something, use a clear, large bullet list. Use the inspirations for copywriting and page structure. Use the best stack possible for this website."
6) Admin portal
"Add an admin portal so I can see all the quote requests coming in. Hide the admin link under /admin and label it 'Admin Login'. Admins see all quote requests in a clean table. Define admin users in the ENV file; make one admin user for now using [YOUR EMAIL]. They set their password on first login."
7) Connect Claude to Hostinger (paste the CLI docs link)
"Get the Hostinger CLI installed and use my browser to authenticate it. Then tell me what my domain is and everything you can do with Hostinger now."
8) Launch
"Launch my website on Hostinger."
9) Updates
"Make the 'Get my free estimate' button red on the live site."
10) Outreach system
"Research local businesses that could use the help, audit their websites and find what we can improve, then draft a demo site and an email I can send to each prospective client. Keep the demo sites quick one-page versions, nothing too in-depth, just a better-looking demo."
This video is sponsored by Hostinger.
#claude #leads #hostinger
🎟️ Use code PRODUCTIVEDUDE at checkout for 10% off
In this video I build a full website for a local roofing company with Claude Code, using my three-step flow: Plan, Prototype, Production. You'll see how to collect inspiration, build a brand folder, make real SVG logos, pick color palettes, build the site, fix it with screenshots and annotations, add an admin portal for leads, deploy it on Hostinger with your own domain, and finally have Claude find local businesses, audit their sites and draft demo sites and outreach emails for you.
Two ways to use this:
1. Sell it: build demo sites for local businesses and charge monthly to keep them running.
2. Use it: launch a better website for your own business.
---
⏱️ CHAPTERS
0:00 The new way to build websites
1:00 The 3 Ps: Plan, Prototype, Production
1:26 Setting up Claude Code
2:04 Collecting inspiration
3:09 Creating a brand folder
3:37 Real SVG logos with Recraft
5:13 Colour palettes
5:42 Prototyping the website
7:42 Fixing it with screenshots and annotations
8:17 Adding an admin portal for leads
9:00 Hosting many sites cheaply
9:48 Signing up for Hostinger
10:43 Coupon code PRODUCTIVEDUDE
11:25 Connecting Claude to Hostinger (CLI)
12:34 Launching the site live
12:56 Testing the lead form and dashboard
13:37 Updating your live site with Claude
13:56 The outreach system that finds clients
15:27 How to land your first clients
---
🧰 TOOLS
Claude: https://claude.ai/
Swipefile (website inspiration): https://swipefile.com
Recraft (SVG logos): https://higgsfield.ai
Hostinger: https://www.hostinger.com/pricing
Hostinger CLI docs: https://docs.hostinger.com/api-reference/cli
---
📋 PROMPTS FROM THE VIDEO
1) Inspiration
"I would like you to continue saving inspiration sources as I add them. Create a folder for them and take all of the lessons they give you into consideration for the final website we're about to create."
2) Brand folder
"Next, I want you to create a brand folder where we store our brand assets: colors, fonts, logos, everything like that, even our own proprietary images that we upload."
3) Logo refinement (attach the logo file)
"Get rid of the text on this logo, simplify it and make it better. Output a final SVG plus candidate SVG logos with wordmarks, icons and favicons, everything we need for a website, and package it up nicely."
Then: "Open this up in a preview so I can see all the variations of the logo."
4) Colour palettes
"I would like to propose some new color palettes." (then lock in your favourite and pick the main logo)
5) Build the site
"Build out the initial website. It's a one-page website for now, focused on GEO and SEO in [YOUR LOCAL AREA]. Think of it as a hybrid landing page: dense links in the footer, the top call-to-action heavy. Every image should be a placeholder whose text is a prompt for an AI image. Remove common AI tells: no eyebrows, no under-brows or tiny text, everything highly legible, no status dots, no em dashes, no staccato sentences. If you need to list something, use a clear, large bullet list. Use the inspirations for copywriting and page structure. Use the best stack possible for this website."
6) Admin portal
"Add an admin portal so I can see all the quote requests coming in. Hide the admin link under /admin and label it 'Admin Login'. Admins see all quote requests in a clean table. Define admin users in the ENV file; make one admin user for now using [YOUR EMAIL]. They set their password on first login."
7) Connect Claude to Hostinger (paste the CLI docs link)
"Get the Hostinger CLI installed and use my browser to authenticate it. Then tell me what my domain is and everything you can do with Hostinger now."
8) Launch
"Launch my website on Hostinger."
9) Updates
"Make the 'Get my free estimate' button red on the live site."
10) Outreach system
"Research local businesses that could use the help, audit their websites and find what we can improve, then draft a demo site and an email I can send to each prospective client. Keep the demo sites quick one-page versions, nothing too in-depth, just a better-looking demo."
This video is sponsored by Hostinger.
#claude #leads #hostinger