名称： lead-gen-website
描述： 构建完整的本地潜在客户生成网站，包含SEO优化、转化跟踪和RGPD合规性。适用于创建针对本地市场（水管工、电工、家政服务等）的基于服务的网站，包含10-20个页面、结构化数据、分析和法律合规性。

潜在客户生成网站构建器

构建转化优化的本地服务网站，具备完整的SEO、跟踪和RGPD合规性——包含反垃圾邮件防护措施（遵循Google垃圾邮件政策及2024年3月更新）、本地SEO（Google商家档案）以及微预算广告策略。

使用场景

当用户需要为以下目的构建网站时，请使用此技能：
- 本地服务企业（家政服务、维修、专业服务）
- 专注于特定地理区域的潜在客户生成
- 需要10-20+个页面的网站，包含服务页面、博客和法律页面
- 针对本地关键词进行SEO优化的内容
- 转化跟踪（电话、WhatsApp、带有UTM参数的表格）
- RGPD/GDPR合规性（Cookie横幅、隐私政策、法律页面）

工作流程概览

请按顺序遵循以下阶段。除非有明确理由，否则不要跳过或合并阶段。

0) 政策/风险检查（强制）
- 阅读 references/google-spam-guardrails-2024.md
- 明确验证：无门页、无规模化通用内容、无虚假地址/评价、无误导性声明。
- 如果项目属于撮合平台：要求在所有关键页面上进行明确披露。

然后继续第1→7阶段。

阶段 1：分析与规划

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

所需信息：
- 业务领域和提供的服务
- 地理目标区域（城市+半径）
- SEO目标关键词
- 联系信息（电话、WhatsApp、电子邮件）
- 所需页面的数量和类型
- 竞争对手网站（用于差异化）

输出： 对项目范围、目标受众和转化目标的清晰理解。

阶段 2：设计构思

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

使用 templates/design-ideas-template.md 作为结构。每种方案必须定义：
- 设计风格和美学理念
- 带有十六进制代码和情感意图的配色方案
- 排版系统（标题+正文字体）
- 布局范式（避免通用的居中布局）
- 标志性视觉元素
- 动画指南
- 交互理念

参考 references/design-philosophies.md 获取灵感，但需创造原创组合。

选择： 选择一种方案并记录理由。此设计理念将指导所有后续的设计决策。

阶段 3：视觉资产生成

使用 generate 工具生成 3-5 张高质量图像。这些图像必须：
- 符合所选的设计理念（颜色、氛围、风格）
- 存储在 /home/ubuntu/webdev-static-assets/ 中
- 覆盖关键视觉需求：主视觉背景、服务插图、本地地标、团队/工匠照片

规划战略用途：
- 主视觉区域：最具冲击力的图像
- 服务页面：相关插图
- 关于/信任部分：团队或本地地标照片

请勿在开发过程中临时生成图像。为提高效率，请一次性生成所有图像。

阶段 4：内容结构

为所有页面创建详细的内容结构。

选项 A（手动）： 直接编写 content-structure.md，为每个页面包含标题、元描述、H1和主要内容大纲。

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

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

内容要求：
- 主要页面（首页、主要服务）每页至少 500 字
- 每篇博客文章至少 1000 字
- 自然地包含目标关键词（避免堆砌）
- 回答用户意图（是什么、为什么、怎么做、成本、服务区域）
- 本地化重点（频繁提及城市/地区）

阶段 5：开发

初始化项目并构建所有页面。

5.1 初始化项目

webdev_init_project <项目名称>

5.2 配置设计令牌

根据所选设计理念编辑 client/src/index.css：
- 更新颜色CSS变量（主色、辅色、强调色、背景色、前景色）
- 配置排版（无衬线和衬线字体族）
- 调整阴影、圆角、动画

在 client/index.html 中添加 Google Fonts：

<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=你的字体:wght@400;600;700&display=swap" rel="stylesheet" />

5.3 创建可复用组件

使用 templates/ 目录中的模板。将占位符替换为项目特定值：

页头 (templates/component-Header.tsx)：
- {{SITE_NAME}}、{{SITE_TAGLINE}}、{{SITE_INITIALS}}
- {{PHONE_NUMBER}}、{{WHATSAPP_NUMBER}}
- {{NAV_ITEMS}}（{label, href} 的JSON数组）

页脚 (templates/component-Footer.tsx)：
- {{SITE_NAME}}、{{SITE_DESCRIPTION}}
- {{SERVICE_LINKS}}、{{UTILITY_LINKS}}
- {{PHONE_NUMBER}}、{{EMAIL}}、{{LOCATION}}

SEOHead (templates/component-SEOHead.tsx)：
- 将 {{DOMAIN}} 替换为实际域名

其他组件： 面包屑导航、联系表单、Cookie横幅（几乎无需修改，直接复制使用）

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/

对于独特页面（首页、价格、FAQ、联系）：
使用丰富、定制的内容手动构建。利用组件保持一致性。

对于法律页面：
使用 templates/page-legal-template.tsx 和标准法律内容。

5.5 更新 App.tsx

将所有路由添加到 client/src/App.tsx：

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

将页头、页脚和Cookie横幅集成到App布局中。

阶段 6：SEO、跟踪、Google商家档案、广告

6.1 生成SEO文件

创建包含所有URL和优先级的 pages.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"}
]

运行脚本：

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 添加结构化数据

使用SEOHead组件的 jsonLd 属性，为关键页面添加JSON-LD结构化数据：

首页（LocalBusiness）：

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "企业名称",
  "telephone": "+33123456789",
  "email": "contact@example.com",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "城市",
    "addressCountry": "FR"
  },
  "areaServed": ["城市1", "城市2"],
  "openingHours": "Mo-Fr 08:00-18:00"
};

服务页面（Service）：

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "服务名称",
  "description": "服务描述",
  "provider": {
    "@type": "LocalBusiness",
    "name": "企业名称"
  },
  "areaServed": "城市"
};

请查阅 references/seo-checklist.md 获取完整的SEO要求。

6.3 RGPD合规性

验证：
- CookieBanner组件已集成到App.tsx中
- 隐私政策页面存在且包含完整的RGPD信息
- Cookie政策页面存在
- 法律声明页面存在
- 联系表单包含指向隐私政策的链接

请查阅 references/rgpd-compliance.md 获取详细要求。

6.4 Google商家档案 / 本地SEO（突出度）

阅读并应用：
- references/gbp-local-seo-playbook.md

需交付的成果：
- Google商家档案设置清单（类别/服务/问答）
- 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进行归因跟踪。

阶段 7：验证与交付

7.1 浏览器测试

打开开发服务器URL并验证：
- 所有页面加载无误
- 导航正常工作（页头菜单、面包屑导航）
- 表单提交正确
- 移动端响应式（测试粘性CTA按钮）
- Cookie横幅在首次访问时出现
- 图像加载正确

7.2 SEO验证

对照 references/seo-checklist.md 验证：
- 每个页面都有唯一的标题和描述
- H1层级正确
- 图像具有alt属性
- robots.txt 和 sitemap.xml 可访问
- 关键页面上存在结构化数据

7.3 创建检查点

webdev_save_checkpoint "完整的潜在客户生成网站 - [X] 个页面，SEO优化，RGPD合规"

7.4 交付给用户

通过 message 工具发送检查点附件，并附上：
- 构建内容的摘要
- 页面数量和关键功能
- 已实施的SEO优化
- 后续步骤（发布、自定义域名、Google Search Console）

附带资源

脚本

scripts/generate_pages_batch.py
根据模板和数据文件批量生成多个相似页面。
用法：python generate_pages_batch.py <模板> <数据_json> <输出目录>

scripts/create_seo_files.py
自动生成 robots.txt 和 sitemap.xml。
用法：python create_seo_files.py <域名> <页面_json> <输出目录>

scripts/generate_content_structure.py
根据规格JSON创建内容结构Markdown文件。
用法：python generate_content_structure.py <规格_json> <输出_md>

模板

组件：
- component-Header.tsx - 带有Logo、导航和CTA的粘性页头
- component-Footer.tsx - 带有链接和联系信息的页脚
- component-SEOHead.tsx - SEO元标签和结构化数据
- component-Breadcrumbs.tsx - 导航面包屑
- component-ContactForm.tsx - 带有UTM跟踪的表单
- component-CookieBanner.tsx - RGPD Cookie同意横幅

页面：
- page-service-template.tsx - 服务页面模板
- page-legal-template.tsx - 法律页面模板
- design-ideas-template.md - 设计构思结构模板

参考资料

references/seo-checklist.md
完整的SEO清单，涵盖元标签、结构化数据、技术SEO、页面SEO、本地SEO和内容质量。在阶段6之前阅读，确保无遗漏。

references/conversion-best-practices.md
最大化转化的最佳实践：CTA策略、联系方式、信任信号、表单优化、移动端优化。在阶段5构建页面时参考。

references/rgpd-compliance.md
完整的RGPD合规指南，涵盖Cookie横幅、隐私政策、Cookie政策、法律声明、表单、同意、数据安全和用户权利。阶段6必不可少。

references/design-philosophies.md
五种示例设计理念（数字新工匠风、粗野主义自信风、柔和现代风、活力能量风、奢华极简风）及选择标准。在阶段2用作灵感来源。

技巧与最佳实践

设计一致性： 在每个CSS/组件文件顶部记录所选设计理念，作为提醒。

图像优化： 所有图像应存储在 /home/ubuntu/webdev-static-assets/ 中，并通过CDN URL引用，以避免部署超时。

质量优于数量： 拥有10个优秀的页面胜过20个平庸的页面。专注于回答用户意图。

移动优先： 首先设计和测试移动端体验。大多数本地服务搜索发生在移动设备上。

转化优先： 每个页面都应有清晰的CTA。电话和WhatsApp按钮在移动端应始终可见。

本地SEO： 在标题、H1和内容中提及城市/地区名称。如果覆盖多个城市，请为每个服务区域创建单独的页面。

快速迭代： 对相似页面使用批量生成脚本以节省时间。将手动精力集中在独特、高价值的页面上。

测试： 在创建检查点之前，务必在浏览器中进行测试。检查移动端响应式、表单提交和导航。

常见陷阱

跳过设计构思： 导致设计平庸、缺乏记忆点。务必创建包含3种不同方案的 ideas.md。

在开发过程中生成图像： 效率低下。在阶段3一次性生成所有图像。

内容薄弱： 内容过少（<300字）无法获得排名。在阶段4投入时间创建实质性的、有帮助的内容。

缺少RGPD元素： Cookie横幅、隐私政策和法律声明在欧盟是必需的。不要跳过阶段6.3。

没有UTM跟踪： 没有UTM参数，就无法衡量广告系列效果。确保ContactForm捕获它们。

忘记移动端CTA： 仅限桌面的CTA会损失移动端转化。务必添加粘性移动端按钮。

在开发过程中创建检查点： 仅在最后（阶段7）创建一个检查点。多个检查点会在初次交付时使用户困惑。