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:
bash
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:
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):
- Create template file (e.g.,
service-template.tsx) usingtemplates/page-service-template.tsx - Create data file (e.g.,
services-data.json) with array of page data - Run batch generation:
bash 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:
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:
json
[
{"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:
bash
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):
tsx
const jsonLd = {
"@context": "https://schema.org",
"@type": "LocalBusiness",
"name": "Business Name",
"telephone": "+33123456789",
"email": "[email protected]",
"address": {
"@type": "PostalAddress",
"addressLocality": "City",
"addressCountry": "FR"
},
"areaServed": ["City1", "City2"],
"openingHours": "Mo-Fr 08:00-18:00"
};
Service pages (Service):
tsx
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.