昨天的關鍵字判斷，主要就是判別使用者是屬於什麼產業
那在這之後，在規劃中即提及，需透過產業地圖讓使用者確定其屬於哪一節點?
上游材料、中游製造、還是下游應用？
位置不同，適用的評估邏輯與對標對象完全不同
因此，今天的目標就是用Vide coding的方式，把這張互動式產業地圖做出來

為什麼我會說「效率提升」?

主要在於，過去我主要是透過PB或Tableau來進行類似的設計
但利用可視化工具來製作時，前置作業非常繁雜，
不僅要具備所有的產業鏈內容與鏈結規則等，
這些都得一一建立後，才有辦法實際利用可視化工具實現之
這次透過Claude的協助
我主要目的有兩點

• 是否真的能夠省掉很多時間?
• 是否能製作出足以直接取代可視化工具的功能

一、今日目標

• 定義 industry_map.json 的地圖資料結構。
• 建置第一張產業地圖（以電子產業鏈為首發：19 個節點、22 條連線）。
• 然後用 Cytoscape.js 渲染成可互動的地圖——節點可點選定案、推薦的節點自動高亮、懸停顯示白話說明。

二、地圖資料結構

industry_map.json 的結構很單純，nodes 加 edges：

{
  "meta": { "industry": "電子產業鏈", "version": "2026Q3", "nodes": 19, "edges": 22 },
  "nodes": [
    { "id": "ccl", "name": "銅箔基板 CCL", "tier": "upstream",
      "plain": "把玻纖布與銅箔壓合成 PCB 的基礎板材" },
    { "id": "smt", "name": "SMT 組裝", "tier": "midstream",
      "plain": "把電子元件打件到電路板上的組裝製程" }
  ],
  "edges": [ { "source": "ccl", "target": "pcb" } ]
}

關鍵點在於每個節點的 plain 欄位
一句白話說明，懸停就顯示。

三、我下的 Prompt

誠如今日目標所示
除了定義產業地圖部分
其他建立平台程式碼的部分，主要就是靠vibe coding方式進行
因此在這邊，我下的Prompt主要分為兩部分，不過是同時一起下指令

建立地圖：

以台灣電子產業鏈（PCB 為中心）建立 industry_map.json：上游材料、中游製造、下游應用三層，節點控制在 20 個以內，每個節點附一句台灣業界慣用的白話說明（plain）。連線代表供應關係，方向為上游指向下游。輸出符合 types/data.ts 的 IndustryMap 型別。

渲染實作：

用 Cytoscape.js 在 /assess 頁面渲染這份地圖：三層直欄排列（preset layout）、節點點選後標記為使用者定位、props 傳入的 recommendedId 節點加高亮外框與「引擎推薦」標籤、懸停顯示 plain 說明、支援手機雙指縮放。

四、驗收與修正

第一次驗收的畫面結果如下

可以看到使用者可以直接點選產業地圖進行確認(如紅框所示)
之後進入產業地圖
可以看到使用者可以自由選擇節點

確認後即可進入
產值評估方法環節

鑒於這次的驗收主角不是畫面，
而是資料的部分，
因此我特別又下了另一個prompt來製作驗證腳本

請幫我做一份驗證腳本

Claude給我的回覆如下:

接下來就要進行驗收

node scripts/verify-map.mjs

實測結果如下

整體結果如下

• 驗證腳本：檢查 edges 的 source/target 是否都存在於 nodes（斷鏈）、是否有重複連線，19個節點、22個連線全數通過
• 手機上太擠：鑒於三層直欄在 375px 寬的螢幕上擠成一團，做到後段再來進行調整

五、今日小結

今天整體來說，透過Vibe Coding的方式，可以很快速地達成，「資料結構乾淨
nodes/edges 定好型別後，Cytoscape 的部分幾乎一次過
整體來說，透過Vibe Coding來進行實作，確實得達成事半功倍之效