首款支援 Claude Code 的 AI 熱點圖「HeatMapX」正式發布

XTV LLC（總部位於東京，以下簡稱 XTV）於 2026 年 6 月 4 日發布了一款名為「HeatMapX」(https://heatmapx.com/) 的新類型熱點圖工具，該工具可直接透過命令列介面 (CLI) 進行操作。

只要在終端機執行「heatmapx analyze」，系統便會測量目標頁面的點擊與捲動行為，並利用 AI 診斷轉化率上的問題，自動生成 HTML 改善補丁並作為合併請求 (Pull Request) 提出。據本公司研究，這是截至 2026 年 6 月市面上首款支援 Claude Code 的熱點圖工具。使用者可透過免費方案開始使用，僅需輸入「npm i -g heatmapx」即可立即體驗。

## 背景：熱點圖往往只停留在「看看就好」

傳統的熱點圖與行為分析工具雖然在視覺化點擊與捲動數據方面表現優異，但往往遺留了一個課題：即「數據看完了，卻難以轉化為實際改進」。洞察力往往滯留在儀表板內，在轉化為實際程式碼修改前就被遺忘了——這是網站優化 (CRO: Conversion Rate Optimization) 現場不斷重演的場景。

另一方面，到了 2026 年，「行銷工程師 (Marketing Engineer)」與「增長工程師 (Growth Engineer)」這類具備開發技能的行銷職位，正在以美國 SaaS 企業為中心迅速普及。對於能閱讀與編寫代碼，並能親手將優化假設付諸實現的他們來說，那種只能在儀表板「眺望」數據的熱點圖，並不符合他們的日常工作流程。

HeatMapX 正是為了這些偏向開發的行銷與增長負責人而設計，作為 GUI 儀表板型熱點圖的替代方案，它定位為「CLI 型熱點圖」，旨在將分析與優化代碼直接置入他們慣用的工作流程（終端機、Git、PR）中。

## HeatMapX 提供的三大體驗

1. **從 CLI 執行的全新熱點圖**
例如輸入「heatmapx analyze /pricing」即可指定頁面執行。透過輕量級標籤測量點擊與捲動，將結果直接回傳給 CLI，無需開啟 GUI 即可進行分析。

2. **AI 診斷問題並透過「PR」提案改進代碼**
測量數據由 AI (Anthropic Claude) 讀取並指出影響轉化率的最關鍵問題。此外，系統會自動生成 HTML 改善補丁並作為合併請求 (PR) 提出，人類僅需進行審核並合併（不會自動反映到生產環境）。

3. **以代碼管理假設的「CRO as Code」**
由於「基於何種假設、改變了什麼」可以作為 Git 歷史紀錄保存，優化知識將持續在團隊與代碼庫中累積。透過 CLI × Git × AI 的三件套，將 CRO 融入開發流程中。

## 快速上手（30秒體驗）

# 1. 安裝
npm i -g heatmapx

# 2. 測量目標頁面並由 AI 診斷
heatmapx analyze https ://example.com/pricing

# 3. 生成改善 HTML 補丁作為合併請求
heatmapx patch --pr

在已導入 Claude Code 的環境中，使用者可直接從 Claude Code 呼叫「heatmapx」指令來執行上述流程。

## 適用場景

* **SaaS 定價頁面優化**：透過「heatmapx analyze /pricing」測量 CTA 點擊分布。AI 診斷指出「從免費版升級到專業版的轉換導流較弱」，並透過 PR 建議修改按鈕配置與文案。
* **媒體文章跳出對策**：測量部落格文章的捲動深度。AI 偵測到「70% 的讀者在開頭前三段落就跳出」，並透過 PR 建議修改標題配置與文章內 CTA 插入位置。
* **電商購物車轉化優化**：測量從商品詳細頁到購物車的遷移。AI 定位「跳出率集中在尺寸選擇 UI」，並透過 PR 建議選擇器優化代碼。

## 支援環境

* Node.js 18 或以上版本
* 主要瀏覽器 (Chrome / Safari / Edge / Firefox 最新版)
* 測量對象：Next.js / Nuxt / React / Vue / 靜態 HTML 網站（僅需添加一行標籤即可導入）
* 整合：Claude Code、GitHub（自動生成合併請求）