服务网站生成器
通过一个自动化工作流，构建包含数百个本地SEO页面的完整服务型网站。
技术栈：NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash
快速开始
第0步：收集用户输入（必需）
开始之前，请收集以下输入：
- 服务领域：什么服务类业务？（例如“水管工”、“高压清洗”、“暖通空调”）
- 服务区域：主要城市/地区（例如“Port Orange, Florida”、“Galway, Ireland”）
- 商家名称（可选）：用于个性化（例如“Murphy's Plumbing Services”）
- Jina API密钥：用于研究和Unsplash图片收集
- HTML/CSS/JS设计（可选）：用户提供或系统生成
在确认以下信息之前不要继续：服务领域、服务区域和Jina API密钥。
第1步：设计生成
重要：生成设计时请遵循 frontend-aesthetics 技能指南！
如果用户未提供设计：
调用：design-generator 代理
输入：
- 服务领域
- 目标受众（本地客户）
- 必须遵循 frontend-aesthetics 技能指南：
- 字体：使用特色字体（Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk）
- 颜色：行业特定调色板，不要紫色渐变
- 动效：使用CSS动画增添趣味
- 背景：分层渐变、微妙图案
- Tailwind v4：使用 gap-* 而非 space-x-*，不要自定义CSS重置
输出：/design/index.html, /design/styles.css, /design/script.js
如果用户提供了设计：
将他们的设计保存到 /design/ 文件夹。
第2步：地点发现
调用：location-generator 代理
输入：服务区域、服务领域、Jina API密钥
输出：/locations.json（包含20-50+个地点及其元数据）
发现服务半径内的所有城镇、郊区和社区（通常为15-50英里，取决于地理情况）。
第3步：服务架构创建
调用：service-schema-creator 代理
输入：服务领域、Jina API密钥、示例地点
输出：/service-schema-template.json（包含5-15个服务及其全面架构）
第4步：数据库设置
调用：database-agent 代理
输入：项目目录、服务领域、服务区域
输出：已配置PostgreSQL + Prisma ORM
创建数据表：ContactForm, QuoteRequest, CallbackRequest, PageView, EmailSubscriber, ServiceAreaLead
第5步：计算页面生成策略
总页面数 = 服务 × 地点
所需代理数 = 总页面数 ÷ 12（每个代理平均页面数）
示例：15个服务 × 48个地点 = 720页 → 60个代理
第6步：派生页面生成器（并行）
关键：所有代理同时派生，不要顺序执行！
调用：service-page-generator 代理（N个代理并行）
每个代理的输入：
- 服务架构模板路径
- 分配的服务+地点组合（10-15页）
- Jina API密钥（用于Unsplash图片抓取）
- 服务领域上下文
输出：/pages/*.json（每个代理10-15个文件）
每个代理：
- 通过Jina搜索Unsplash获取相关图片
- 生成服务描述、优势、流程、常见问题
- 创建包含所有数据+图片的完整JSON文件
第7步：NextJS网站构建
调用：nextjs-builder 代理
输入：设计文件、所有JSON页面、服务架构、地点
输出：/website/ 文件夹，包含完整的NextJS应用
创建：
- 带有服务概览的主页
- 主要服务页面
- 主要地点页面
- 单个服务+地点页面（例如 /emergency-plumber-athenry）
- 服务类别页面
- 地点页面
- 点击呼叫功能
- 信任标识和行动号召
第8步：Playwright测试
# 在后台启动开发服务器
cd [项目]/website && npm run dev &
# 调用 playwright-tester 代理
# 测试所有页面，验证SEO，检查图片
# 测试完成后终止开发服务器
kill [PID]
第9步：GitHub部署
cd [项目目录]
git init
git add -A
git commit -m "初始提交：[服务领域] 在 [服务区域] 的网站"
gh repo create [存储库名称] --public --source=. --push
如果 gh CLI不可用，请提供手动操作说明。
可用代理
| 代理 | 用途 | 调用时机 |
|---|---|---|
business-researcher | 研究特定业务（如果提供了名称） | 一次，第1步 |
design-generator | 生成HTML/CSS/JS设计 | 一次，第1步 |
location-generator | 发现服务区域内的地点 | 一次，第2步 |
service-schema-creator | 创建服务列表和架构 | 一次，第3步 |
database-agent | 设置PostgreSQL + Prisma | 一次，第4步 |
service-page-generator | 生成10-15个带图片的页面 | N个代理，并行 |
nextjs-builder | 构建完整的NextJS网站 | 一次，第7步 |
playwright-tester | 测试所有页面和功能 | 一次，第8步 |
设计与样式指南
关键：遵循 frontend-aesthetics 技能以避免“AI粗糙感”！
字体（来自frontend-aesthetics）
- 切勿使用：Inter, Roboto, Open Sans, Lato, Arial, 系统字体
- 推荐选择：Plus Jakarta Sans, Space Grotesk, Cabinet Grotesk, Outfit, Bricolage Grotesque
- 使用极端值：100/200粗细 vs 800/900，字号跳跃3倍以上
按服务类型的颜色方案
- 高压清洗/清洁：深蓝 (#1e40af) + 橙色 (#ea580c) + 绿色 (#059669)
- 水管工：水蓝 (#0284c7) + 紧急红 (#dc2626) + 环保绿 (#16a34a)
- 暖通空调：冷蓝 (#0369a1) + 暖橙 (#ea580c) + 绿色 (#059669)
- 电工：电黄 (#eab308) + 专业蓝 (#1e40af) + 红色 (#dc2626)
- 园艺/景观：自然绿 (#15803d) + 大地棕 (#92400e) + 蓝色 (#0284c7)
- 营销/B2B：海军蓝 (#0A66C2) + 紫色强调 (#8B5CF6) + 成功绿 (#10B981)
Tailwind v4兼容性（关键）
- 切勿使用：
space-x-*,space-y-*（在v4中已移除） - 始终使用：在flex/grid容器中使用
gap-* - 不要添加：自定义
* { margin: 0 }重置（会破坏mx-auto） - 添加：如果使用配置文件，请在CSS中添加
@config "../tailwind.config.ts"
服务网站要求
- 强有力的行动号召（“立即拨打”按钮、“获取报价”表单）
- 移动端点击呼叫功能
- 信任标识（认证、保证、评价）
- 本地电话号码醒目展示
- 服务覆盖区域清晰显示
- 前后对比图片画廊
- 页面加载和交互的动效/动画
文件结构
项目根目录/
├── design/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── pages/
│ └── [服务]-[地点].json（200+个文件）
├── website/
│ ├── app/
│ │ ├── [slug]/page.tsx
│ │ ├── services/page.tsx
│ │ ├── locations/page.tsx
│ │ └── ...
│ ├── components/
│ └── package.json
├── prisma/
│ └── schema.prisma
├── locations.json
├── service-schema-template.json
└── business-profile.json（如果提供了商家名称）
示例工作流
用户：“帮我做一个佛罗里达州Port Orange的高压清洗服务网站”
- 收集输入（领域：高压清洗，区域：Port Orange FL，Jina密钥）
- 生成带有信任标识、行动号召、蓝/橙配色的设计
- 发现15英里半径内的48个地点
- 创建15个高压清洗服务的架构
- 设置包含6个潜在客户捕获表的PostgreSQL
- 计算：15 × 48 = 720页 → 派生约60个代理
- 生成所有服务+地点JSON文件，附带Unsplash图片
- 构建包含214+页面的NextJS网站
- 运行Playwright测试（目标：通过率80%以上）
- 推送到GitHub
- 报告：存储库URL、运行说明、部署说明
关键规则
必须做：
- 开始前收集所有输入
- 如果未提供设计，先生成设计
- 创建页面之前先发现地点
- 生成页面之前先创建服务架构
- 所有页面生成代理同时派生
- 部署之前使用Playwright测试
- 提供清晰的部署说明
绝对不要：
- 跳过输入收集阶段
- 没有Jina API密钥就继续
- 顺序派生代理（必须并行！）
- 在所有页面准备好之前构建NextJS网站
- 跳过Playwright测试
- 不给用户提供后续步骤
成功标准
- 设计已存在（生成或用户提供）
- 已发现20-50+个地点
- 架构中包含5-15个服务
- 已生成200+个服务+地点页面
- 所有页面都有Unsplash图片
- NextJS网站已构建并可运行
- Playwright测试通过（通过率80%以上）
- 代码已提交到Git
- 用户有部署说明