服務網站生成器
建構完整的服務型網站，在一個自動化流程中產生數百個本地 SEO 頁面。
技術棧：NextJS 14 + TypeScript + Tailwind CSS + PostgreSQL + Prisma ORM + Jina AI + Unsplash
快速入門
步驟 0：收集使用者輸入（必要）
在繼續之前，請先收集以下資訊：
- 服務類別：提供什麼服務？（例如「水電工」、「高壓清洗」、「暖通空調」）
- 服務區域：主要城市/地區（例如「佛羅里達州奧蒙德海灘」、「愛爾蘭戈爾韋」）
- 商家名稱（選填）：用於個人化（例如「小張水電服務」）
- 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 reset
輸出：/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 應用程式
建立內容：
- 含服務概覽的首頁
- 主要服務頁面
- 主要地點頁面
- 個別服務+地點頁面（例如 /athenry-emergency-plumber）
- 服務分類頁面
- 地點頁面
- 點擊通話功能
- 信任信號與行動呼籲
步驟 8：Playwright 測試
# 在背景啟動開發伺服器
cd [專案]/website && npm run dev &
# 啟動 playwright-tester 代理程式
# 測試所有頁面、驗證 SEO、檢查圖片
# 測試完成後終止開發伺服器
kill [PID]
步驟 9：GitHub 部署
cd [專案目錄]
git init
git add -A
git commit -m "Initial commit: [服務類別] 在 [服務區域] 的網站"
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 粗細對比 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"
服務網站需求
- 強烈的行動呼籲（立即來電按鈕、取得報價表單）
- 行動裝置上的點擊通話功能
- 信任信號（認證、保證、評價）
- 顯眼地顯示本地電話號碼
- 清楚展示服務區域涵蓋範圍
- 前後對比圖片庫
- 頁面載入與互動時的動態效果
檔案結構
project-root/
├── design/
│ ├── index.html
│ ├── styles.css
│ └── script.js
├── pages/
│ └── [service]-[location].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（若提供商家名稱）
範例工作流程
使用者：「幫我建立一個在佛羅里達州奧蒙德海灘提供高壓清洗服務的網站」
- 收集輸入（類別：高壓清洗、區域：佛羅里達州奧蒙德海灘、Jina 金鑰）
- 生成帶有信任信號、行動呼籲、藍/橘色系的設計
- 在半徑 15 英里內探索出 48 個地點
- 建立 15 個高壓清洗服務的結構
- 設定 PostgreSQL 並建立 6 個潛在客戶擷取表格
- 計算：15 × 48 = 720 頁 → 啟動約 60 個代理程式
- 使用 Unsplash 圖片生成所有服務+地點的 JSON 檔案
- 建置包含 214 個以上頁面的 NextJS 網站
- 執行 Playwright 測試（目標：通過率 80% 以上）
- 推送至 GitHub
- 報告：儲存庫 URL、執行說明、部署說明
關鍵規則
務必：
- 開始前收集所有輸入
- 若未提供設計，必須先產生設計
- 建立頁面前先探索地點
- 生成頁面前先建立服務結構
- 同時啟動所有頁面生成器代理程式
- 部署前先用 Playwright 測試
- 提供清楚的部署說明
切勿：
- 跳過輸入收集階段
- 沒有 Jina API 金鑰就繼續
- 依序啟動代理程式（必須並行！）
- 在所有頁面準備好之前就建置 NextJS 網站
- 跳過 Playwright 測試
- 留給使用者後續步驟
成功標準
- 設計已存在（生成或由使用者提供）
- 已探索出 20-50 個以上地點
- 結構中包含 5-15 項服務
- 已生成 200 個以上服務+地點頁面
- 所有頁面都有 Unsplash 圖片
- NextJS 網站已建置並可執行
- Playwright 測試通過（通過率 80% 以上）
- 程式碼已提交至 git
- 使用者擁有部署說明