Lead Generation Website Builder

Build conversion-optimized local service websites with complete SEO, tracking, and RGPD compliance — avec garde-fous anti-spam (Google Spam Policies + March 2024), local SEO (GBP) et micro-budget ads.

When to Use This Skill

Use this skill when the user requests a website for:

• Local service businesses (home services, repairs, professional services)
• Lead generation focused on specific geographic areas
• Sites requiring 10-20+ pages with service pages, blog, and legal pages
• SEO-optimized content targeting local keywords
• Conversion tracking (phone, WhatsApp, forms with UTM parameters)
• RGPD/GDPR compliance (cookie banner, privacy policy, legal pages)

Workflow Overview

Follow these phases sequentially. Do NOT skip phases or combine them without clear reason.

0. Policy / Risk Check (mandatory)

• Read references/google-spam-guardrails-2024.md
• Explicitly verify: no doorway pages, no scaled generic content, no fake address/avis, no misleading claims.
• If the project is mise en relation (leadgen): require clear disclosure on all key pages.

Then continue with Phases 1→7.

Phase 1: Analysis and Planning

Gather project requirements from the user or specifications document.

Required information:

• Business niche and services offered
• Geographic target area (city + radius)
• Target keywords for SEO
• Contact information (phone, WhatsApp, email)
• Number and types of pages needed
• Competitor websites (for differentiation)

Output: Clear understanding of project scope, target audience, and conversion goals.

Phase 2: Design Brainstorming

Create ideas.md in the project root with THREE distinct design approaches.

Use templates/design-ideas-template.md as structure. Each approach must define:

• Design movement and aesthetic philosophy
• Color palette with hex codes and emotional intent
• Typography system (headings + body fonts)
• Layout paradigm (avoid generic centered layouts)
• Signature visual elements
• Animation guidelines
• Interaction philosophy

Consult references/design-philosophies.md for inspiration, but create original combinations.

Selection: Choose ONE approach and document the rationale. This design philosophy will guide ALL subsequent design decisions.

Phase 3: Visual Assets Generation

Generate 3-5 high-quality images using generate tool. These images MUST:

• Align with the chosen design philosophy (colors, mood, style)
• Be stored in /home/ubuntu/webdev-static-assets/
• Cover key visual needs: hero background, service illustrations, local landmarks, team/artisan photos

Plan strategic usage:

• Hero section: Most impactful image
• Service pages: Relevant illustrations
• About/Trust sections: Team or local landmark photos

Do NOT generate images on-the-fly during development. Generate all at once for efficiency.

Phase 4: Content Structure

Create detailed content structure for all pages.

Option A (Manual): Write content-structure.md directly with sections for each page including title, meta description, H1, and main content outline.

Option B (Script): Create specs.json with page data, then run:

python /home/ubuntu/skills/lead-gen-website/scripts/generate_content_structure.py specs.json content-structure.md

Content requirements:

• Minimum 500 words per main page (homepage, main services)
• Minimum 1000 words per blog article
• Include target keywords naturally (no stuffing)
• Answer user intent (what, why, how, cost, area)
• Local focus (mention city/region frequently)

Phase 5: Development

Initialize project and build all pages.

5.1 Initialize Project

webdev_init_project <project-name>

5.2 Configure Design Tokens

Edit client/src/index.css with chosen design philosophy:

• Update CSS variables for colors (primary, secondary, accent, background, foreground)
• Configure typography (font-family for sans, serif)
• Adjust shadows, radius, animations

Add Google Fonts in client/index.html:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=YourFont:wght@400;600;700&display=swap" rel="stylesheet" />

5.3 Create Reusable Components

Use templates from templates/ directory. Replace placeholders with project-specific values:

Header (templates/component-Header.tsx):

• {{SITE_NAME}}, {{SITE_TAGLINE}}, {{SITE_INITIALS}}
• {{PHONE_NUMBER}}, {{WHATSAPP_NUMBER}}
• {{NAV_ITEMS}} (JSON array of {label, href})

Footer (templates/component-Footer.tsx):

• {{SITE_NAME}}, {{SITE_DESCRIPTION}}
• {{SERVICE_LINKS}}, {{UTILITY_LINKS}}
• {{PHONE_NUMBER}}, {{EMAIL}}, {{LOCATION}}

SEOHead (templates/component-SEOHead.tsx):

• Replace {{DOMAIN}} with actual domain

Other components: Breadcrumbs, ContactForm, CookieBanner (copy as-is, minimal customization needed)

5.4 Build Pages

For similar pages (services, blog articles):

1. Create template file (e.g., service-template.tsx) using templates/page-service-template.tsx
2. Create data file (e.g., services-data.json) with array of page data
3. Run batch generation:

python /home/ubuntu/skills/lead-gen-website/scripts/generate_pages_batch.py service-template.tsx services-data.json client/src/pages/

For unique pages (homepage, tarifs, FAQ, contact): Build manually with rich, custom content. Use components for consistency.

For legal pages: Use templates/page-legal-template.tsx with standard legal content.

5.5 Update App.tsx

Add all routes to client/src/App.tsx:

<Route path="/service-page" component={ServicePage} />

Integrate Header, Footer, and CookieBanner in App layout.

Phase 6: SEO, Tracking, GBP, Ads

6.1 Generate SEO Files

Create pages.json with all URLs and priorities:

[
  {"url": "/", "priority": "1.0"},
  {"url": "/service", "priority": "0.9"},
  {"url": "/contact", "priority": "0.9"},
  {"url": "/blog", "priority": "0.6"},
  {"url": "/mentions-legales", "priority": "0.3"}
]

Run script:

python /home/ubuntu/skills/lead-gen-website/scripts/create_seo_files.py yourdomain.com pages.json client/public/

This creates robots.txt and sitemap.xml in client/public/.

6.2 Add Structured Data

Add JSON-LD structured data to key pages using SEOHead component's jsonLd prop:

Homepage (LocalBusiness):

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Business Name",
  "telephone": "+33123456789",
  "email": "contact@example.com",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "City",
    "addressCountry": "FR"
  },
  "areaServed": ["City1", "City2"],
  "openingHours": "Mo-Fr 08:00-18:00"
};

Service pages (Service):

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Service Name",
  "description": "Service description",
  "provider": {
    "@type": "LocalBusiness",
    "name": "Business Name"
  },
  "areaServed": "City"
};

Consult references/seo-checklist.md for complete SEO requirements.

6.3 RGPD Compliance

Verify:

• CookieBanner component is integrated in App.tsx
• Privacy policy page exists with complete RGPD information
• Cookie policy page exists
• Legal mentions page exists
• ContactForm includes link to privacy policy

Consult references/rgpd-compliance.md for detailed requirements.

6.4 GBP / Local SEO (Prominence)

Read and apply:

• references/gbp-local-seo-playbook.md

Deliverables to produce:

• GBP setup checklist (catégories/services/Q&R)
• 30-day photo/post/avis plan
• NAP citations list (quality-first, no spam)

6.5 Micro-budget Ads (4€/jour)

Read and apply:

• references/ads-micro-budget-4eur-playbook.md

Deliverables to produce:

• 1 campagne ultra-serrée (keywords exact/phrase, zone, horaires, négatifs)
• 1 landing dédiée + tracking

6.6 Conversion Tracking

ContactForm component automatically captures UTM parameters from URL:

• utm_source (e.g., google, facebook)
• utm_campaign (campaign name)
• utm_adset (ad set name)
• utm_ad (specific ad)

These are stored in form state and can be sent to backend/CRM for attribution tracking.

Phase 7: Validation and Delivery

7.1 Test in Browser

Open dev server URL and verify:

• All pages load without errors
• Navigation works (header menu, breadcrumbs)
• Forms submit correctly
• Mobile responsive (test sticky CTA buttons)
• Cookie banner appears on first visit
• Images load correctly

7.2 SEO Validation

Verify against references/seo-checklist.md:

• Unique title and description on each page
• H1 hierarchy correct
• Images have alt attributes
• robots.txt and sitemap.xml accessible
• Structured data present on key pages

7.3 Create Checkpoint

webdev_save_checkpoint "Complete lead-gen website - [X] pages, SEO optimized, RGPD compliant"

7.4 Deliver to User

Send checkpoint attachment via message tool with:

• Summary of what was built
• Page count and key features
• SEO optimizations implemented
• Next steps (publish, custom domain, Google Search Console)

Bundled Resources

Scripts

scripts/generate_pages_batch.py Generate multiple similar pages from template and data file. Usage: python generate_pages_batch.py <template> <data_json> <output_dir>

scripts/create_seo_files.py Generate robots.txt and sitemap.xml automatically. Usage: python create_seo_files.py <domain> <pages_json> <output_dir>

scripts/generate_content_structure.py Create content structure markdown from specifications JSON. Usage: python generate_content_structure.py <specs_json> <output_md>

Templates

Components:

• component-Header.tsx - Sticky header with logo, nav, CTA
• component-Footer.tsx - Footer with links and contact info
• component-SEOHead.tsx - SEO meta tags and structured data
• component-Breadcrumbs.tsx - Navigation breadcrumbs
• component-ContactForm.tsx - Form with UTM tracking
• component-CookieBanner.tsx - RGPD cookie consent banner

Pages:

• page-service-template.tsx - Service page template
• page-legal-template.tsx - Legal page template
• design-ideas-template.md - Design brainstorming structure

References

references/seo-checklist.md Complete SEO checklist covering meta tags, structured data, technical SEO, on-page SEO, local SEO, and content quality. Read this before Phase 6 to ensure nothing is missed.

references/conversion-best-practices.md Best practices for maximizing conversions: CTA strategy, contact options, trust signals, form optimization, mobile optimization. Consult during Phase 5 when building pages.

references/rgpd-compliance.md Complete RGPD compliance guide covering cookie banner, privacy policy, cookie policy, legal mentions, forms, consent, data security, and user rights. Essential for Phase 6.

references/design-philosophies.md Five example design philosophies (Neo-Artisanat Digital, Brutalist Confidence, Soft Modernism, Vibrant Energy, Luxury Minimalism) with selection criteria. Use as inspiration during Phase 2.

Tips and Best Practices

Design consistency: Document chosen design philosophy at the top of each CSS/component file as a reminder.

Image optimization: All images should be stored in /home/ubuntu/webdev-static-assets/ and referenced via CDN URLs to avoid deployment timeouts.

Content quality over quantity: Better to have 10 excellent pages than 20 mediocre ones. Focus on answering user intent.

Mobile-first: Design and test mobile experience first. Most local service searches happen on mobile.

Conversion priority: Every page should have clear CTAs. Phone and WhatsApp buttons should be always visible on mobile.

Local SEO: Mention city/region name in titles, H1, and content. Create separate pages for each service area if covering multiple cities.

Fast iteration: Use batch generation scripts for similar pages to save time. Focus manual effort on unique, high-value pages.

Testing: Always test in browser before creating checkpoint. Check mobile responsive, form submission, and navigation.

Common Pitfalls

Skipping design brainstorming: Leads to generic, forgettable designs. Always create ideas.md with 3 distinct approaches.

Generating images during development: Inefficient. Generate all images upfront in Phase 3.

Weak content: Thin content (<300 words) won't rank. Invest time in Phase 4 to create substantial, helpful content.

Missing RGPD elements: Cookie banner, privacy policy, and legal mentions are REQUIRED in EU. Don't skip Phase 6.3.

No UTM tracking: Without UTM parameters, you can't measure campaign effectiveness. Ensure ContactForm captures them.

Forgetting mobile CTAs: Desktop-only CTAs lose mobile conversions. Always add sticky mobile buttons.

Creating checkpoint during development: Only create ONE checkpoint at the end (Phase 7). Multiple checkpoints confuse users during initial delivery.