Server Configurator Skill
用 AI Agent
爬取伺服器報價頁面
呼叫這個 Skill，AI 會自動開啟品牌的伺服器配置頁面，萃取所有組件選項與定價邏輯，並產出互動式報價工具和結構化文件。
browser_subagent
JSON 萃取
DOM 解析
截圖 + 互動
EnGenius S21 / S11
Dell R770
互動式配置器
Markdown 文件
PHASE 1
資料萃取
browser_subagent 開啟頁面，識別頁面類型，選擇爬取策略
›
PHASE 2
結構化
整理 MODELS object，記錄定價模式與依賴邏輯
›
PHASE 3
建置配置器
產出互動式 HTML/JS/CSS，即時計價
›
PHASE 4
MD 文件
Spec + Pricing Reference，供 AI 跨品牌比較
›
PHASE 5
驗證
總價驗算、Constraint 邊界測試
核心挑戰
每個品牌的頁面結構都不一樣
伺服器配置頁面沒有統一標準。有的把資料全部埋在 HTML 裡，有的需要點擊才會載入，有的是純圖片。必須先判斷頁面類型，再決定用哪種方式爬。
🔍 開始爬取前，需要判斷的四件事
-
❶
頁面是靜態還是動態？
靜態頁面的資料在 HTML 裡，動態頁面（SPA）的資料在點擊後才會出現，需要互動觸發。 -
❷
有沒有嵌入 JSON？
Shopify / WooCommerce 等平台通常會把完整產品資料包成 JSON 嵌入頁面，這種情況最好處理，一次拿完。 -
❸
定價模式是哪種？
Delta 定價（基準價 ± 差價）或絕對定價（每個組件獨立報價）？直接影響 MODELS 結構的設計。 -
❹
有沒有隱藏選項？
Dell 等企業站會有「More options」折疊按鈕，不點開就看不到完整列表；部分選項只有 lazy load 後才存在於 DOM。
Phase 1 — 爬取技術
三層策略，按優先順序
依頁面類型選擇對應技術。多數情況下組合使用：A 取主資料，B 補細節，C 驗證動態依賴。
技術 A — 首選
Product JSON 萃取
Shopify / WooCommerce 電商平台
- →搜尋 <script id="product-json">
- →搜尋 <script type="application/ld+json">
- →搜尋 window.__PRODUCT__ 全域變數
- →解析後一次拿到所有 variant、選項、價格
✅ 不需要任何點擊互動，資料在 HTML 裡直接可讀。
EnGenius 官網（Shopify）即採用此方式。
EnGenius 官網（Shopify）即採用此方式。
技術 B — 次選
DOM 解析
無 JSON、有表單元素的頁面
- →掃描所有 <select><option>
- →掃描 <input type="radio"> / checkbox
- →Dell 識別 class：cfConfigInput
- →用正則從文字抽取價格：/[\+\-]?\$?[\d,]+/
例：option 文字「Xeon 6526Y (+$40,000)」
→ 解析出 CPU 型號 + Delta 加價
→ 解析出 CPU 型號 + Delta 加價
技術 C — 動態頁面
截圖 + 互動模擬
SPA / lazy load / 折疊選項
- →截全頁圖，理解整體 layout
- →程式化點擊所有「More」展開按鈕
- →逐一切換 select/radio，觀察 DOM 變化
- →截圖比對切換前後，推斷依賴規則
⚠️ Dell R770 頁面需此技術：
7 個頂層分類 + 14 子分類需逐一展開，
部分 CPU 因 lazy load 限制未完全抓取。
7 個頂層分類 + 14 子分類需逐一展開，
部分 CPU 因 lazy load 限制未完全抓取。
組合策略
A
取得主資料
＋
B
補漏細節
＋
C
驗證動態依賴邏輯
實際案例對比
EnGenius vs Dell — 完全不同的挑戰
同樣是 Delta 定價的伺服器配置頁，但爬取難度、頁面結構、依賴複雜度截然不同。
🟢 EnGenius S21 / S11
爬取難度：低
1
技術 A
直接讀 Shopify 嵌入的 Product JSON
Shopify 頁面 HTML 裡有一個 <script id="product-json">，裡面包含所有 variant、選項、價格。不需要點擊任何東西。
// Shopify JSON 結構示意
{
"variants": [
{
"id": 12345,
"option1": "配置 1",
"option2": "6505P",
"price": 153570 // 台幣，含稅
}
]
}
2
技術 B 補漏
DOM 確認 Option 文字 + 規格細節
JSON 有價格但缺少詳細規格（如 CPU 核心數、TDP）。再掃描 <option> 文字補齊這些資訊。
3
技術 C 驗證
切換 CPU 選項，確認 Bracket 自動連動
CPU 6737P 以上需要 E2A Bracket（+$960×2）。切換 CPU 截圖比對，確認依賴邏輯正確。
4
特殊處理
多型號合併：S21 vs S11 的差異處理
S21（2U）和 S11（1U）共用同一套配置器。相同組件（CPU、Memory 定價）合併，差異（SmartNIC 只有 S11、storageMax 不同、Package 基礎價不同）用條件邏輯處理。
// app.js 中 S11 比 S21 多了 smartnic
S21: { smartnic: null, ... }
S11: { smartnic: { label: "NVIDIA BlueField-3", price: xxxxxx }, ... }
結果：EnGenius 約 30 分鐘完成萃取，共 16 款 CPU × 2 型號、記憶體 2 種規格、3 種 NVMe SSD，資料完整無缺漏。
🟠 Dell PowerEdge R770
爬取難度：高
1
技術 C — 先截圖
截全頁圖，理解頁面的 7 個大分類
Dell 企業站是自建平台，無標準 JSON。先截圖掌握 layout：Chassis / Processor / Memory / Storage / RAID / PSU / NIC 等 15 個分類，多數預設折疊。
2
技術 C — 展開互動
程式化點擊，展開所有分類和「More」按鈕
7 個頂層分類 + 14 個子分類，每個都需要點擊展開。部分選項後面有「Show more options」，不點就看不到完整列表。
3
技術 B — DOM 解析
掃描 cfConfigInput 識別所有選項
展開後，所有 radio input 都有 class="cfConfigInput"，讀取 label 文字提取規格與差價。checked 屬性標記預設選項。
// Dell DOM 結構示意
<input type="radio" class="cfConfigInput"
data-price="+676.98"
checked />
<label>Xeon 6 Efficient 6740E (+$676.98)</label>
4
特殊挑戰
機箱選擇會改變後續所有選項
Dell R770 有 8 種機箱可選，不同機箱決定 Storage slots 數量、RAID Controller 型號，甚至能否選 SAS/SATA。切換機箱後需要重新讀 DOM。
// 機箱 = EDSFF E3.S 時的依賴鏈
Chassis → 停用 SAS/SATA Storage
Chassis → 強制 NVMe E3.S 格式
Chassis → 決定 RAID Controller 型號（H365i / H965i）
5
限制說明
Lazy load 限制：部分 CPU 無法完全抓取
R770 有 19 款 CPU 選項，但因 Dell 頁面的 lazy load 機制，中間規格的 ~14 款 CPU 需要更多滾動和互動才能全部展開，部分情況下無法完整抓取。這是技術 C 的固有限制，建議在 Markdown 文件中標記「待確認」。
結果：Dell R770 需要更多互動操作，共萃取 15 個組件類別、~300 個選項，基準總價 $25,658.99 USD。部分 CPU 中間規格因 lazy load 標記為「待確認」。
| 對比項目 | EnGenius S21 / S11 | Dell R770 |
|---|---|---|
| 爬取難度 | 低 ⭐ JSON 直接嵌入 | 高 ⭐⭐⭐ lazy load + 折疊按鈕 |
| 主要爬取技術 | 技術 A（Product JSON）為主 | 技術 B + C（DOM + 互動截圖） |
| 電商平台 | Shopify 台灣官網 | 自建企業站（dell.com） |
| DOM 識別方式 | Shopify variant JSON 結構 | class="cfConfigInput" radio |
| 隱藏選項 | 無，所有選項直接可見 | 有，需點「More」展開 |
| 幣值 / 稅 | TWD 含稅（台灣 5%） | USD 含稅（美國） |
| 基準總價 | ~$262,350 TWD（Config 1） | $25,658.99 USD |
| 機箱選項 | 固定（2U / 1U 依型號） | 8 種可選，影響下游所有組件 |
| CPU 選項 | 16 款（固定雙路） | 19 款（含 lazy load 限制） |
| 組件類別數 | ~8 個（精簡） | ~15 個（含 OS / iDRAC / 服務合約） |
| 依賴鏈複雜度 | 中（CPU → Bracket、Package → StorageMax） | 高（Chassis → Storage / RAID / Form Factor） |
| 多型號 | S21 + S11 合併在同一 app.js | R770 獨立（可延伸 R760 等） |
| 抓取完整度 | ✅ 完整 | ⚠️ 部分 CPU 因 lazy load 待確認 |
關鍵環節
依賴邏輯 — 最難抓的部分
組件之間的「選 A 影響 B」規則，通常不會直接寫在 JSON 裡，需要透過技術 C（實際點擊互動）或閱讀頁面 JS 邏輯來發現。
⚡ CPU 型號 → CPU Bracket
6505P – 6740P → E2B（免費）
6737P 以上 → E2A（+$960 × 2）
Bracket 自動連動，不需手動選
6737P 以上 → E2A（+$960 × 2）
Bracket 自動連動，不需手動選
EnGenius S21
⚡ 配置套件 → 最大儲存數量
Config 1 → 最多 16 顆 NVMe
Config 2 → 最多 32 顆 NVMe
UI 上的 qty select max 會隨之改變
Config 2 → 最多 32 顆 NVMe
UI 上的 qty select max 會隨之改變
EnGenius S21
⚡ 機箱型號 → Storage 格式
普通機箱 → SAS / SATA / NVMe 都可選
EDSFF E3.S 機箱 → 強制僅 NVMe E3.S
SAS / SATA 選項全部停用
EDSFF E3.S 機箱 → 強制僅 NVMe E3.S
SAS / SATA 選項全部停用
Dell R770
⚡ CPU TDP → PSU 強制升級
CPU TDP < 250W → 維持預設 1100W PSU
CPU TDP > 250W → PSU 可能被強制升級
並觸發散熱風扇從 Silver → Platinum
CPU TDP > 250W → PSU 可能被強制升級
並觸發散熱風扇從 Silver → Platinum
Dell R770
⚡ 機箱 → RAID Controller
機箱預裝 PERC 型號不同（H365i / H965i）
決定前端 RAID 控制器，
影響後端能掛載的 RAID Controller 型號
決定前端 RAID 控制器，
影響後端能掛載的 RAID Controller 型號
Dell R770
⚡ 型號 → 是否顯示組件
S21 → SmartNIC 區段不顯示
S11 → SmartNIC 區段顯示
JS 用 model id 控制 section visibility
S11 → SmartNIC 區段顯示
JS 用 model id 控制 section visibility
EnGenius S11 vs S21
驗算方式：萃取完成後，勾選頁面預設選項手動計算總價，與頁面顯示比對。不一致就說明有遺漏的依賴邏輯或隱藏費用，需要繼續用技術 C 互動排查。
Phase 3–4 — 產出結果
自動產出 7 個檔案
每次建置產出一套完整工具。結構化 MD 讓 AI 可以直接做跨品牌比較，不需要人工整理。
app.js
MODELS 資料結構 + 所有計價邏輯，data-driven
index.html
互動式配置器，含 model switcher，即時計算總價
style.css
完整設計系統，通常不需修改
rules.html
配置規則頁，顯示所有依賴邏輯說明
pricing.html
定價速查頁，可一鍵複製全部貼入 AI
{MODEL}_Configurator_Spec.md
每個組件的選項、規格、依賴規則完整說明
{MODEL}_Pricing_Reference.md
定價速查，含 component id，AI 可解析
跨品牌比較用法：開各品牌 pricing.html → 點「複製全部」→ 貼入 Claude / ChatGPT，請它做同規格橫向比價分析。結構化 MD 確保 AI 能精準解析每個組件的 id 和價格，不會誤判。