介绍
# Lead Generation Website Builder
构建经过转化优化的本地服务网站，具备完整的 SEO、跟踪和 RGPD 合规性 —— **配有反垃圾护栏 (Google Spam Policies + March 2024)**、本地 SEO (GBP) 和微预算广告。
## 何时使用此技能
当用户请求以下类型的网站时，请使用此技能： - 本地服务企业（家政服务、维修、专业服务） - 针对特定地理区域的潜在客户生成 - 需要包含服务页面、博客和法律页面的 10-20+ 页面站点 - 针对本地关键词的 SEO 优化内容 - 转化跟踪（电话、WhatsApp、带有 UTM 参数的表单） - RGPD/GDPR 合规（Cookie 横幅、隐私政策、法律页面）
## 工作流概述
按顺序执行这些阶段。在没有明确理由的情况下，请勿跳过阶段或合并阶段。
0) **政策/风险检查（强制）** - 阅读 `references/google-spam-guardrails-2024.md` - 明确验证：无门页、无规模化通用内容、无虚假地址/评价、无误导性声明。 - 如果项目属于 **mise en relation** (leadgen/潜在客户生成)：在所有关键页面上要求明确的披露。
然后继续执行阶段 1→7。
### 阶段 1：分析与规划
从用户或规范文档中收集项目需求。
**所需信息：** - 业务细分和提供的服务 - 地理目标区域（城市 + 半径） - SEO 目标关键词 - 联系信息（电话、WhatsApp、电子邮件） - 所需页面的数量和类型 - 竞争对手网站（用于差异化）
**输出：** 对项目范围、目标受众和转化目标的清晰理解。
### 阶段 2：设计头脑风暴
在项目根目录创建 `ideas.md`，包含 THREE 种不同的设计方法。
使用 `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`，然后运行： ```bash python /home/ubuntu/skills/lead-gen-website/scripts/generate_content_structure.py specs.json content-structure.md ```
**内容要求：** - 每个主要页面（主页、主要服务）至少 500 字 - 每篇博客文章至少 1000 字 - 自然包含目标关键词（勿堆砌） - 回答用户意图（什么、为什么、如何、费用、区域） - 本地化重点（频繁提及城市/地区）
### 阶段 5：开发
初始化项目并构建所有页面。
#### 5.1 初始化项目 ```bash webdev_init_project <project-name> ```
#### 5.2 配置设计令牌
使用选定的设计理念编辑 `client/src/index.css`： - 更新颜色的 CSS 变量（primary、secondary、accent、background、foreground） - 配置排版（sans、serif 的 font-family） - 调整阴影、圆角、动画
在 `client/index.html` 中添加 Google Fonts： ```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 创建可重用组件
使用 `templates/` 目录中的模板。将占位符替换为项目特定值：
**页头** (`templates/component-Header.tsx`)： - `{{SITE_NAME}}`, `{{SITE_TAGLINE}}`, `{{SITE_INITIALS}}` - `{{PHONE_NUMBER}}`, `{{WHATSAPP_NUMBER}}` - `{{NAV_ITEMS}}`（JSON 数组 `{label, href}`）
**页脚** (`templates/component-Footer.tsx`)： - `{{SITE_NAME}}`, `{{SITE_DESCRIPTION}}` - `{{SERVICE_LINKS}}`, `{{UTILITY_LINKS}}` - `{{PHONE_NUMBER}}`, `{{EMAIL}}`, `{{LOCATION}}`
**SEOHead** (`templates/component-SEOHead.tsx`)： - 将 `{{DOMAIN}}` 替换为实际域名
**其他组件：** 面包屑、ContactForm、CookieBanner（按原样复制，几乎不需要自定义）
#### 5.4 构建页面
**对于类似页面（服务、博客文章）：**
1. 使用 `templates/page-service-template.tsx` 创建模板文件（例如 `service-template.tsx`） 2. 使用页面数据数组创建数据文件（例如 `services-data.json`） 3. 运行批量生成： ```bash 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`： ```tsx <Route path="/service-page" component={ServicePage} /> ```
在 App 布局中集成 Header、Footer 和 CookieBanner。
### 阶段 6：SEO、跟踪、GBP、广告
#### 6.1 生成 SEO 文件
创建包含所有 URL 和优先级的 `pages.json`： ```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"} ] ```
运行脚本： ```bash 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 结构化数据：
**主页：** ```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" }; ```
**服务页面：** ```tsx const jsonLd = { "@context": "https://schema.org", "@type": "Service", "name": "Service Name", "description": "Service description", "provider": { "@type": "LocalBusiness", "name": "Business Name" }, "areaServed": "City" }; ```
查阅 `references/seo-checklist.md` 了解完整的 SEO 要求。
#### 6.3 RGPD 合规性
验证： - CookieBanner 组件已集成到 App.tsx 中 - 存在隐私政策页面，包含完整的 RGPD 信息 - 存在 Cookie 政策页面 - 存在法律声明页面 - ContactForm 包含指向隐私政策的链接
查阅 `references/rgpd-compliance.md` 了解详细要求。
#### 6.4 GBP / 本地 SEO (显著性)
阅读并应用： - `references/gbp-local-seo-playbook.md`
需交付的成果： - GBP 设置检查清单（catégories/services/Q&R） - 30 天照片/帖子/评价计划 - NAP 引用列表（质量优先，杜绝垃圾信息）
#### 6.5 微预算广告 (4€/jour)
阅读并应用： - `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 创建检查点
```bash 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 <template> <data_json> <output_dir>`
**`scripts/create_seo_files.py`** 自动生成 robots.txt 和 sitemap.xml。 用法：`python create_seo_files.py <domain> <pages_json> <output_dir>`
**`scripts/generate_content_structure.py`** 从规范 JSON 创建内容结构 markdown。 用法：`python generate_content_structure.py <specs_json> <output_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`** 五个示例设计理念（Neo-Artisanat Digital、Brutalist Confidence、Soft Modernism、Vibrant Energy、Luxury Minimalism）及选择标准。在阶段 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 阶段）创建一个检查点。多个检查点会在初始交付期间困扰用户。