工程師與貓
ESC
Content
    ↑↓ navigate open esc close
    Published on

    用 AI 做了一個 Monorepo 分析工具,然後決定不做了

    Authors
    • avatar
      Name
      Alex Yu

    起因

    之前在把公司專案從 polyrepo 轉成 monorepo 時,花了不少時間處理 circular dependency 的問題。

    當時沒有好用的視覺化工具可以看 package 之間的相依關係,只能靠 Nx 的 nx graph 和官方文件慢慢理。整理完是整理完了,但過程很土法煉鋼。

    那次經驗之後就一直想:如果有一個工具可以直接把相依性畫成圖,還能高亮哪裡有 circular dependency,應該會方便很多。

    於是就開始做了。

    開發

    Tech stack 是 React 19 + TanStack Router + Vite,視覺化用 D3.js,狀態管理用 Zustand,UI 用 Tailwind CSS + Radix UI。

    這次的開發方式跟以前很不一樣。我用 Claude Code 搭配 BMad 來開發。BMad 是一套 AI agent 協作框架,裡面有不同角色的 agent(analyst、architect、dev 等等)。我的工作基本上就是:

    1. 跟各個 agent 確認需求:例如讓 analyst 釐清功能範圍、讓 architect 決定技術方案
    2. 遇到問題時做決策:當 AI 提出多種方案時,選擇哪一種來推進

    整個過程我幾乎沒開過 local dev server。就是一直跟 AI 對話、看它改 code、commit、再繼續。偶爾跑一下 build 確認沒壞掉。

    本以為 D3.js 的力導向圖會很難搞,結果 AI 生成的效果意外的好。節點可以拖曳、可以縮放、有 minimap,circular dependency 的地方會用紅色高亮。

    MonoGuard Demo

    UI 的部分大概花了幾週的零碎時間就做完了。

    轉折

    做到一半去 Google 了一下 “monorepo dependency visualization”,發現市面上已經有不少類似的工具:

    • Nx Console 內建的 graph view
    • Madge 可以生成 dependency graph
    • 還有一些付費的 SaaS 產品

    但真正讓我決定停下來的原因是:Nx 推出了 Self-Healing CI 功能

    這個功能可以讓 AI 在 CI pipeline 中自動偵測 monorepo 裡的問題,然後自動開 PR 修復。這代表 Nx 已經不只是做視覺化了,而是直接往 AI 協作的方向走。我本來想解決的「看到問題、手動修」這條路,他們正在用更根本的方式解決——讓 AI 自動修。

    面對一個有完整生態系、有團隊在全職開發的工具,再做一個視覺化分析器的意義就不大了。

    現狀

    這個專案就先擱著了。

    UI prototype 還是可以玩,跑的是 mock data(首次載入可能要等一下,Render 免費方案會 spin down):

    學到的事

    這次最大的收穫不是技術,而是一個很簡單的道理:

    AI 讓 build 變快了,但 validate 的重要性反而更高。

    以前做一個 side project 要花幾個月,所以在動手之前會比較謹慎地評估。現在用 AI 幾週就能做出 MVP,反而容易跳過市場驗證就開始寫 code。

    如果重來一次,我會先花一兩天做這些事:

    • 把現有的競品都試一遍,確認它們真的沒解決我的問題
    • 想清楚「誰會用」和「為什麼他們要用我的而不是現有的」
    • 確認這個痛點是不是只有我有

    歸根究底,不管開發速度多快,核心問題還是:有沒有解決用戶的痛點,以及解決的方式是否比現有方案更好。 AI 讓打造產品變容易了,但找到值得打造的東西,還是得靠自己。

    參考資料