Claude Code UX 研究員：利用 AI Agent 自動化競品與介面評測

TL;DR: 別再每週浪費 10 小時做重複性的「競品審核 (Competitive Audit)」了。透過結合 Claude Code (終端機 Agent) 與 Playwright，你可以建立一個不眠不休的 UX 研究員，自動抓取競品資料、利用 AI 視覺分析 UI，並產出結構化的評測矩陣——本次我們以 Perp DEX 的交易量領先者作為實戰範例。

適合本方案的讀者

• UX 研究員：厭倦了手動截圖與填表，想轉向策略性分析。
• PM 產品負責人：需要快速掌握競品功能疊代，作為 PRD 決策基礎。
• dApp 競品分析師：專注於 Web3 領域的交互模式（Interaction Patterns）研究。

使用情境 (User Journey)

場景：DeFi 協議的資深設計師 Max 需要每週產出競品報告。

1. 啟動：週一早上執行 claude-code-research 指令。
2. 自動導航：Agent 自動獲取熱門協議清單並截圖。
3. AI 視覺：Claude Vision 比對「一鍵交易」流暢度。
4. 省下時間：Max 只需花 10 分鐘審閱自動生成的 Markdown 報告，重點放在產品差異化設計。

---

問題點：無意義的「審核疲勞」

在快速變動的 DeFi 領域，競爭對手每週都會推出新功能。對於產品設計師與 PM 來說，跟進意味著：

1. 手動訪問 10 個以上的 dApp。
2. 截取數十張截圖。
3. 在 Excel 填寫「有無功能」的差異表。
4. 記錄文案變化。

等你做完，這份報告通常已經過時了。這是典型的「高重複性、高價值」任務——正是 AI Agent 工作流 的最佳發力點。

---

第一階段：AI 驅動的自動化接棒

與其親自動手，我們將「體力活」交給 Claude。

步驟 1：自動化發現 (DeFiLlama 交易量)

我們不需要手動維護競品清單。直接利用 DeFiLlama API 抓取 24 小時交易量前 10 名的 Perp DEX。高交易量通常代表其交易介面經過高度優化。

給 Claude Code 的指令：

「寫一個腳本，利用 DeFiLlama API 抓取 24 小時交易量前 10 名的 Perp DEX 協議，並將其『交易頁面』的 URL 儲存為 JSON 檔案。」

步驟 2：Agent 的「眼睛」(Playwright)

Claude Code 可以生成並執行 Playwright 腳本，以 Headless 模式訪問這些網址。

核心行動：捕捉「Hero Section (首屏)」與「主儀表板」的截圖。

// Claude 生成的 Playwright 範例片段
const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://hyperliquid.xyz');
  await page.screenshot({ path: 'assets/hyperliquid-trade.png' });
  await browser.close();
})();

---

第二階段：AI 視覺深度分析

截圖只是完成了一半，接著我們利用 Anthropic Vision 能力來「閱讀」UX。

我們將截圖餵回給 Claude 並給予結構化指令：

「分析這張 Hyperliquid 交易介面的截圖。請提取：

1. 交易面板 (Order Entry) 的位置 (左側/右側)。
2. 主要呼籲行動 (CTA) 的顏色。
3. 列出所有可見資產。
4. 根據視覺清晰度給予 1-5 分的『層級感 (Hierarchy)』評分。」

---

成果產出：評測矩陣 (Benchmarking Matrix)

最終產出的不是一堆圖片，而是可以直接貼入 PRD 或 Notion 的精美 Markdown 矩陣。

協議	核心資產	主要 CTA	視覺風格	UX 複雜度	24H 交易量
Hyperliquid	USDC	Deposit	專業交易終端	高	$1.2B+
dYdX	USDC	Trade Now	機構型介面	高	$800M+
GMX	GLP/GM	Long/Short	加密原生風格	中	$300M+

---

量化成果：AI vs 手動審核

項目	手動分析 (10 個競品)	AI Agent 自動化
資料收集時間	~4 小時	< 5 分鐘
視覺分析深度	依賴個人主觀	結構化標註 (顏色/佈局)
維護成本	高 (需手動更新截圖)	低 (一行指令重新執行)
資料完整性	常遺漏細節	100% 覆蓋預設規則

---

風險與限制 (Risk Disclosure)

雖然 AI Agent 大幅提升了效率，但讀者需注意：

1. 視覺依賴性：目前方案主要依賴靜態截圖，對複雜的「交互流程」（如滑動觸發的動畫或多步彈窗）無法深度理解。
2. Token 消耗：頻繁捕捉高解析度截圖並交由 Vision 模型處理會產生一定的 API 費用。
3. 反爬蟲機制：部分 dApp 可能會封鎖 Headless Browser，需搭配 Proxy 或更擬人的 Playwright 配置。

---

🚀 為什麼這在 2026 年至關重要

單純的效率已不再足夠。要平衡「人類 + AI」時代，你必須從研究員轉型為架構師。

與其花 8 小時收集數據，你應該只花 15 分鐘審閱 AI 自動化審核報告，剩餘的 7 小時 45 分鐘則用來做真正的設計決策，打造產品的差異化。

---

結語：建立你的自動對手觀察塔

別只是跟隨競爭對手，要自主觀察。透過建立「Claude 觀察塔」，你將原本枯燥的雜事轉化為策略優勢。從「找資料的人」進化為「解讀資料的人」，這才是 UX 研究員在 AI 時代的核心價值。

準備好自動化你的下一次審核了嗎？讓我們開始動手吧。