5 個步驟，做一張能清楚說明資料依據、回應主管追問的流量稽核儀表板

先問「給誰看、要驅動什麼決策」↑ 回本頁選單

很多人一開始做儀表板，想的是「我要放哪些圖表」——順序錯了。正確順序應該反過來：先問這個東西是做給誰看的、看完之後他要做出什麼決定，圖表選型跟版面才有答案。

潮間物選每週有一場成長稽核會議，行銷主管拿著這份報告要決定兩件事：這週的成長數字能不能直接拿去跟老闆報告，還有有沒有異常需要先查清楚再報告。這兩個決定，決定了下面這張儀表板長什麼樣——不是先有圖表才反推用途。

如果你一開始就跟 Claude Code 說「幫我做一個流量儀表板」，它只能瞎猜——猜你要月報還是週報、猜你在意的是成長還是異常、猜你的讀者看不看得懂「跳出率」這種術語。換一種問法，先把決策講清楚：

套進潮間物選的情境，一句講清楚決策的提示詞長這樣：

我們的每週流量稽核會議，行銷主管要看這份報告決定兩件事：這週的成長數字能不能直接拿去跟老闆報告、有沒有異常需要先查清楚再報告。抓：週別的真實流量與機器人流量、轉換率跟目標的差距、哪個頻道貢獻最多但轉換率卻很低。輸出一個網頁，不要只給一段文字摘要。

這句話先把「誰看」「要做什麼決定」講死，Claude Code 才知道該往哪個方向選圖表、挑哪些數字放最上面——這跟 Prompt Library 裡「講結果不寫步驟」「講清楚你要的答案長什麼樣子」是同一個道理，只是套進行銷情境。

為什麼流量趨勢用折線圖，不用圓餅圖或雙軸圖↑ 回本頁選單

折線圖是「隨時間變化」這種問題的預設答案——人眼對斜率、對趨勢方向最敏感，看一眼就知道是在漲還是在跌。潮間物選這個案例最能說明為什麼圖表類型要對應問題本質：如果你只看本週的數字，機器人流量佔比是 18.7%，聽起來還好；但攤開最近 8 週的趨勢一看，這個數字是從 9.1% 一路吃上來的，等於在 8 週內快要翻倍。圓餅圖只能呈現「某個時間點，各部分佔整體多少」，它天生看不出「持續惡化中」這種過程——如果潮間物選的行銷主管只看到一張本週圓餅圖，很可能會覺得沒什麼大不了，把一個正在擴大的問題誤判成穩定狀態。

雙軸圖同樣是刻意不選：真實流量跟機器人流量兩條線，單位都是「工作階段數 sessions」，本來就同一把尺，不需要也不該套雙軸——雙軸圖最大的風險是「兩條線各自套一組刻度」，只要調整其中一軸的刻度範圍，就能讓某條線看起來比實際更誇張或更溫和，圖表變成可以被操縱視覺印象的工具，而不是誠實呈現數字。

版面怎麼擺：KPI 放頂、色彩做功能、資料墨水比要高↑ 回本頁選單

讀者看頁面的習慣是先掃左上、由上而下、由左到右——這是 F 型／Z 型掃描路徑，不是設計師的偏好，是視覺習慣的事實。把最關鍵的 4 個數字放在第一屏能看到的地方，讀者不用往下滑就先知道這週過得好不好，細節表格才放在最下面，讓想深挖的人自己往下找，不強迫每個讀者都看完整張表才找到結論。

色彩要做功能，不是做裝飾。潮間物選的機器人流量卡標成紅色，不是因為紅色搭配好看，是因為紅色在這裡承載了「需要注意」這個功能性訊號——如果同一份報告裡有一半的顏色只是為了配色好看，讀者反而分不出哪個顏色是真的在提醒他。所有漲跌同時用 ▲/▼ 符號加文字，色彩只是強化，不是唯一訊號，色盲讀者跟印黑白版都看得懂。

動手看：這是一個可以互動的示範儀表板↑ 回本頁選單

下面這張儀表板套用了前三段講的東西：KPI 放頂、圖表選對類型、版面照著掃描習慣走。它是真的可以互動的——點表頭可以換排序方式，滑鼠移到折線上的資料點（或用鍵盤 Tab 過去）會跳出當週的真實流量與機器人流量數字。資料是潮間物選的示範資料，跟前面說的一樣，全部是編出來的。

怎麼跟 Claude Code 一起做出來↑ 回本頁選單

這套「先定義決策、再選圖表、再談版面，最後才動手刻頁面」的順序，呼應了行銷顧問 Niall Walsh 分享案例裡常被提到的兩個心法。第一個是「原型勝過文件」——與其把這個儀表板寫成一份長長的規格文件讓團隊自己想像，不如像上面這樣直接做出一個能點、能滑動、能看到真實數字變化的活頁面，團隊看到的是「長這樣」，不是「大概長這樣」，少掉很多來回猜測的溝通成本。第二個是他強調的分寸：Claude Code 不會取代你原本就在用的分析工具或技術資源——GA4、Search Console、你請的資料工程師都還是要在，Claude Code 做的是把「從原始資料到一張看得懂的圖表」這段本來要排期、要等人有空的距離縮短，讓你花在既有工具跟既有團隊上的投資，能更快轉成看得見的產出。

下面 3 句提示詞，示範怎麼從「一堆原始匯出檔」走到「上面那個可以互動的儀表板」——跟 Prompt Library 的 Operate #7「讀 CSV、找模式、出圖表」是同一套邏輯，只是多拆了一步「先分析、再動手刻」。請先在可還原的網頁專案與匿名示範資料上練習。vanilla JavaScript 是不加框架的原生 JavaScript，inline SVG 是直接放在 HTML 裡的向量圖，hardcode 是把固定值直接寫死；不熟這些詞時，可請工具先解釋，不要直接改既有網站。

提示詞 1（找模式，先不要動手做頁面）

讀取 @ga4-export-8週.csv 和 @bot-traffic-log.csv 這兩份原始匯出檔，交叉比對找出真實流量與機器人流量的週別分佈。用白話告訴我：哪一週開始機器人流量明顯不正常攀升？把你的判斷過程和關鍵數字一起列出來，不要只給結論。

提示詞 2（動手刻出儀表板，講清楚結構跟限制）

根據上面分析出的資料，幫我做一個行銷流量稽核儀表板區塊，放進現有網頁：
1. 頂部 4 張 KPI 卡：工作階段數、轉換率（含 vs 目標）、真實流量佔比、機器人流量佔比（含健康/偏高狀態）
2. 一張雙序列折線圖：真實流量 vs 機器人流量，共用同一 Y 軸，兩條線都用 sessions 計數，不要用圓餅圖也不要雙軸
3. 一張可依欄位排序的頻道明細表，預設依工作階段數由高到低排序
用 vanilla JavaScript 和 inline SVG 手刻，不要引入任何外部圖表函式庫；顏色用現有 CSS 變數，不要 hardcode 色碼。

提示詞 3（自我核對，不是自己嘴上說沒問題）

檢查你剛做的圖表：確認機器人流量那條線在 8 週資料點上真的隨時間上升、確認 KPI 卡上的百分比跟表格加總對得起來、確認手機版寬度縮到 375px 時圖表和表格不會橫向撐破版面。這些都驗過再跟我說做完了。