Vibe Coding 分析系統架構 - daniel-qa/Vue GitHub Wiki

正確 Vibe Coding 切入流程

整理成 4 步：

🧭 Step 1：選一個「動作」

例如：

新增題目

🧭 Step 2：畫 flow（不是架構）

User → UI → API → DB

🧭 Step 3：再拆 module

ExerciseModule
PaperModule
ItemService

🧭 Step 4：最後才看 code

先理解「系統在做什麼」，最後才落到「哪一行 code 在做這件事」。

Vue component / Controller / Service

一個最實用的方法（強烈建議）

你可以固定用這個 prompt：

🔥 Vibe Coding 切入 Prompt

請不要從 code 開始分析

請從「使用者行為」切入：
1. 這個功能的 user action 是什麼？
2. 資料如何流動？
3. 涉及哪些 module？
4. 最後才對應到 code 層級

請用 high-level diagram 表示

• 如果用一句話記住

系統架構不是「一張圖」，而是「一連串可追蹤的 flow」

---

系統架構太大時，不是「看全貌」，而是「先選一個切片（slice）進去」。

一、核心原則（很重要）

🎯 不要試圖理解整個系統

改成：

System = 多個可理解的小切片組合

• 系統切入方式

切入方式	核心思維	問題起點	系統觀察焦點	適用情境	優點
使用者行為切入（Event-Driven 事件驅動）	從「人做了什麼」出發	使用者操作（點擊 / 輸入 / 儲存）	Vue Component → API → Service → DB → UI 更新	功能理解、debug、Vibe Coding 入門	最直覺、最好追 flow、不容易迷路
資料流切入（Data Flow）	從「資料怎麼走」出發	資料來源 / 去向	Input → Transform → Store → Retrieve → UI	API 設計、資料問題排查、後端分析	結構最清晰、跨前後端都適用
模組邊界切入（Boundary-first）	從「系統分層」出發	功能屬於哪個層	Frontend / Backend / DB / External Services	架構設計、重構、系統拆分	架構感最強、適合大型系統治理

一句話總結

行為切入 👉「發生了什麼事？」
資料切入 👉「資料怎麼流？」
邊界切入 👉「這屬於哪一層？」

• 不要做的事（很重要）

很多人會卡住是因為這樣：

❌ 一開始畫整個系統 diagram
❌ 一次理解所有 Vue + API + DB
❌ 從 code 開始反推架構

結果：

👉 大腦 overload