iT邦幫忙

2026 iThome 鐵人賽

DAY 10
0
Vibe Coding

與Claude一起從零打造產值評估工具系列 第 10

Day 10 | 用Claude輕鬆建立完成流程卡關、跨頁限制

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20260812/20183196NMlDJjIIbY.png
過去在進行系統流程卡關時,
必須針對每一個節點進行詳細的規劃與判斷
這可能不僅影響整個系統產出效率而已
更大可以涉及到整個公司的產能
而且整體來說 這是費時費力的~~

因此根據我過去在產線的流程卡關專案經驗來說
我認為在設計上,通常是要非常完善確認後才能有效提升效率與效能
當然,依照目前工具設置階段來說
我並不會做到非常完善
畢竟很多功能與卡關,都是需要在最後成品出來後,
才能真正地去實測

因此現在這階段
我主要是期望透過Calude來直接進行
我希望透過這種方式
在這個專案的最後幾天實測與驗證時
實際了解Claude是不是真的可以應用到實務上「工業管理」的領域中
那這樣亦代表著,像美國在整個工廠系統流程中,經常性描述到AI工具的附加價值
我想透過實測,這是更具有代表性的。

一、今日目標

  • 設計跨頁狀態的存放與傳遞
  • 實作路由卡關邏輯與模型灰階設計
  • 第一次端到端測試

二、串接設計

https://ithelp.ithome.com.tw/upload/images/20260812/20183196nZSXhX7IEs.png

跨頁狀態:選 sessionStorage,key 為 assessment:draft,存整段評估的草稿(industry、node、target、models[]、inputs)。
每頁載入時讀取、變更即寫回,重新整理不丟失,但關閉分頁即清除。

為什麼不用的 localStorage?
因為「進行中的草稿」和「完成的紀錄」生命週期不同,
草稿隨分頁而生滅,完成的評估才寫進 records:v1 長存

守門邏輯:直接輸入 /dashboard 但沒有狀態 → 導回 /assess;進 /setup 但還沒選產業 → 同樣導回。網址是可以被直接輸入的,每一頁都要假設使用者「不按牌理出牌」。

模型灰階:/setup 的模型清單載入時,逐一檢查所需的 data/*.json 是否備妥(讀 meta 欄位)

三、我下的 Prompt

依使用者旅程進行各功能的串接設計

  1. 寫 lib/draft.ts:sessionStorage 的 assessment:draft 讀寫封裝,含型別
  2. 在三個頁面接上草稿的讀取與寫回
  3. 實作守門:無前置狀態的頁面導回 /assess,並顯示一句說明
  4. /setup 的模型清單依 target 載入五個模型,逐一檢查data依賴之內容,缺料的部分,以灰階顯示並同時呈現原因
    全部對齊 types/data.ts

四、端到端測試與修正

Claude 幫我產出的資料包含以下內容
https://ithelp.ithome.com.tw/upload/images/20260812/20183196XF5qLwrMqI.png

不需要安裝任何新套件,直接開啟local host來實際觀察即可
測試內容如下

第一種測試
正常的全流程
正常流程 A:/assess 填範例 → 選候選 → 下一步 → 選模型 → 產生儀表板(儀表板顯示你實際選的產業與模型)📸

照目前的資料而言
前半段都沒問題
https://ithelp.ithome.com.tw/upload/images/20260812/20183196mcQcFoVJDy.png
但到選模型關卡前就會全部看到 灰階模型
因為我目前並未放任何資料進去

https://ithelp.ithome.com.tw/upload/images/20260812/20183196WgQZXRS6QL.png

對此,為了有效驗證
所以我又下了另一個prompt

幫我抓取符合目前範例檔進行有效的模型評估的模型資料,並幫我下載,同時寫成範例檔用的資料,並幫我建置進入目前的工具中,讓我能夠實際進行測試

Claude回覆如下:

https://ithelp.ithome.com.tw/upload/images/20260812/20183196xMoDqVV0mk.png

因此我直接拿來測試
https://ithelp.ithome.com.tw/upload/images/20260812/20183196TedOmbOs25.png
確實成功點亮了模型~
當然部分原因是因為我自己沒有補資料進去
所以才有灰階情況產生

五、今日小結

五天下來,這個工具已然看起來架構是完整的:
四個頁面
五個資料檔
一顆判斷引擎

  • 一張產業地圖
    以及把它們串起來的狀態與守門
    而且執行期零 API 呼叫、零資料庫。

我認為目前來說,串接透過Claude來實現,
確實比起以往在建立相關規則時
來的更簡單容易
但今天測試完全流程後,
我發現返回鍵的 bug
** 按瀏覽器返回鍵回到 /assess,候選產業的選取狀態消失了
**

因此這部分來說
後面我在進行製作時,我應該要更加關注於一些小細節
避免最終又要全部重新修bug

此外實測部分讓我發現了一個很重要的問題
還灰著的七個模型全卡在兩份官方系統沒有 API、必須手動下載的資料(經濟部工業產銷存、主計總處關聯程度表)
當然這有部分問題是,我還沒有時間一一處理
因此後面我需要找一段時間來用

此外我發現有個最大問題是
證交所這資料點
只提供最新一期、沒有歷史查詢
雖然一開始我就已經知道,所以才在這工具應用上,是採用即時更新的方式

當然也建議如若有想要追完整資訊者
仍舊建議以資料庫來建立
這樣才能有效累積資料內容


上一篇
Day 9 |可視化工具落伍了? 用Claude打造「互動式」產業地圖效率升級~
下一篇
Day 11 | 用Claude建立一個(Top-down)市場評估模型~
系列文
與Claude一起從零打造產值評估工具12
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言