线索生成网站构建器

构建专为转化优化的本地服务类网站，全面支持 SEO、用户行为追踪及 RGPD 合规性 —— 内置反垃圾邮件防护机制（符合 Google 垃圾内容政策 + 2024 年 3 月更新）、本地 SEO（GBP）、微预算广告投放。

何时使用本技能

当用户提出以下类型网站需求时，请使用本技能：

• 本地服务类企业（家庭服务、维修服务、专业服务等）
• 聚焦特定地理区域的线索获取目标
• 需构建 10–20+ 页面的网站（含服务页、博客、法律合规页等）
• 面向本地关键词优化的 SEO 内容
• 转化追踪能力（电话、WhatsApp、表单，均支持 UTM 参数）
• RGPD/GDPR 合规性（含 Cookie 提示横幅、隐私政策页、法律声明页）

工作流程概览

请严格按顺序执行以下各阶段。除非有明确理由，否则不得跳过任一阶段或合并阶段。

0. 政策与风险核查（强制步骤）

• 通读 references/google-spam-guardrails-2024.md
• 明确验证：不得存在“门页”（doorway pages）、不得批量生成泛化内容、不得伪造地址/评价、不得做出误导性宣称。
• 若项目属于 线索中介（leadgen）性质：须在所有关键页面上清晰披露该性质。

完成上述核查后，继续执行 Phase 1 → Phase 7。

Phase 1：分析与规划

从用户或需求文档中收集项目要求。

必需信息包括：

• 业务细分领域及所提供服务
• 目标地理区域（城市 + 覆盖半径）
• SEO 目标关键词
• 联系方式（电话、WhatsApp、邮箱）
• 所需页面数量及类型
• 竞品网站（用于差异化定位）

交付成果： 明确项目范围、目标用户群体及转化目标。

Phase 2：设计构想

在项目根目录下创建 ideas.md，其中包含三种截然不同的设计方案。

以 templates/design-ideas-template.md 为结构模板。每种方案必须明确定义：

• 设计流派与美学理念
• 配色方案（含十六进制色值及对应情绪意图）
• 字体系统（标题字体 + 正文字体）
• 布局范式（避免通用居中布局）
• 标志性视觉元素
• 动效规范
• 交互理念

可参考 references/design-philosophies.md 获取灵感，但须形成原创组合。

方案选定： 从中择一，并书面说明选择理由。该设计理念将指导后续所有设计决策。

Phase 3：视觉素材生成

使用 generate 工具生成 3–5 张高质量图像。这些图像必须满足：

• 契合所选设计理念（色彩、氛围、风格）
• 统一存入 /home/ubuntu/webdev-static-assets/
• 覆盖核心视觉需求：首页背景图、服务插图、本地地标、团队/工匠实拍图

规划图像的战略性应用：

• 首页 Hero 区域：使用最具冲击力的图像
• 服务页面：匹配具体服务内容的插图
• 关于/信任板块：团队照或本地地标照片

开发过程中禁止临时生成图像。请于本阶段一次性完成全部图像生成，以提升效率。

Phase 4：内容结构设计

为全部页面构建详细的内容结构。

选项 A（手动）： 直接编写 content-structure.md，为每一页列出标题、Meta 描述、H1 及主要内容大纲。

选项 B（脚本）： 创建含页面数据的 specs.json，然后运行：

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

内容要求：

• 每个主页面（首页、主要服务页）至少 500 字
• 每篇博客文章至少 1000 字
• 自然融入目标关键词（严禁堆砌）
• 精准回应用户搜索意图（What / Why / How / Cost / Area）
• 突出本地属性（高频提及城市/地区名称）

Phase 5：开发实现

初始化项目并构建全部页面。

5.1 初始化项目

webdev_init_project 

5.2 配置设计令牌（Design Tokens）

编辑 client/src/index.css，注入所选设计理念：

• 更新 CSS 变量：主色、辅色、强调色、背景色、前景色
• 配置排版：无衬线字体（sans）与衬线字体（serif）的 font-family
• 调整阴影、圆角、动效参数

在 client/index.html 中引入 Google Fonts：

5.3 创建可复用组件

复用 templates/ 目录下的模板，并将占位符替换为项目专属值：

Header（templates/component-Header.tsx）：

• {{SITE_NAME}}、{{SITE_TAGLINE}}、{{SITE_INITIALS}}
• {{PHONE_NUMBER}}、{{WHATSAPP_NUMBER}}
• {{NAV_ITEMS}}（JSON 格式数组，元素为 {label, href}）

Footer（templates/component-Footer.tsx）：

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

SEOHead（templates/component-SEOHead.tsx）：

• 将 {{DOMAIN}} 替换为实际域名

其他组件： Breadcrumbs、ContactForm、CookieBanner（直接复制使用，仅需极小程度定制）

5.4 构建页面

对于相似页面（如服务页、博客文章）：

1. 基于 templates/page-service-template.tsx 创建模板文件（例如 service-template.tsx）
2. 创建数据文件（例如 services-data.json），内含页面数据数组
3. 执行批量生成命令：

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

对于独立页面（如首页、tarifs、FAQ、contact）： 手动构建，填充丰富且高度定制化的内容；同时复用已定义组件以保障一致性。

对于法律合规页面： 使用 templates/page-legal-template.tsx，并填入标准法律文本。

5.5 更新 App.tsx

在 client/src/App.tsx 中添加全部路由：

在 App 布局中集成 Header、Footer 和 CookieBanner。

Phase 6：SEO、追踪、GBP、广告

6.1 生成 SEO 文件

创建 pages.json，列出全部 URL 及其优先级：

[
  {"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"}
]

运行脚本：

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

该脚本将在 client/public/ 下生成 robots.txt 和 sitemap.xml。

6.2 添加结构化数据（Structured Data）

通过 SEOHead 组件的 jsonLd 属性，在关键页面中注入 JSON-LD 结构化数据：

首页（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）：

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

完整 SEO 要求请参阅 references/seo-checklist.md。

6.3 RGPD 合规性

核查以下各项：

• CookieBanner 组件是否已集成至 App.tsx
• 是否存在完整涵盖 RGPD 要求的隐私政策页
• 是否存在 Cookie 政策页
• 是否存在法律声明页（Mentions Légales）
• 联系表单是否链接至隐私政策

详细 RGPD 合规要求请参阅 references/rgpd-compliance.md。

6.4 GBP / 本地 SEO（曝光度提升）

阅读并落实：

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

交付成果包括：

• GBP 设置检查清单（含分类/服务/问答设置）
• 为期 30 天的图片/帖子/评价发布计划
• NAP 引用清单（注重质量，杜绝垃圾外链）

6.5 微预算广告（4€/日）

阅读并落实：

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

交付成果包括：

• 1 套高度聚焦的广告系列（精确/短语匹配关键词、限定地域与时段、设置否定词）
• 1 个专属落地页 + 追踪配置

6.6 转化追踪

ContactForm 组件自动捕获 URL 中的 UTM 参数：

• utm_source（例如 google、facebook）
• utm_campaign（广告活动名称）
• utm_adset（广告组名称）
• utm_ad（具体广告）

这些参数将被保存在表单状态中，并可发送至后端/CRM 系统，用于归因分析。

Phase 7：验证与交付

7.1 浏览器测试

打开开发服务器 URL，逐一验证：

• 所有页面加载无报错
• 导航功能正常（页眉菜单、面包屑导航）
• 表单可成功提交
• 响应式适配良好（重点测试固定式 CTA 按钮在移动端表现）
• 首次访问即显示 Cookie 提示横幅
• 所有图像正确加载

7.2 SEO 验证

依据 references/seo-checklist.md 进行核验：

• 每页均有唯一 title 和 description
• H1 层级结构正确
• 所有图像均配备 alt 属性
• robots.txt 与 sitemap.xml 可公开访问
• 关键页面已嵌入结构化数据

7.3 创建检查点（Checkpoint）

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

7.4 向用户交付

使用 message 工具发送检查点附件，并附带以下说明：

• 已构建内容概述
• 页面总数及核心功能亮点
• 已实施的 SEO 优化项
• 后续步骤建议（上线部署、绑定自定义域名、接入 Google Search Console）

配套资源

脚本

scripts/generate_pages_batch.py 基于模板与数据文件批量生成多个相似页面。 用法：python generate_pages_batch.py