歡迎來到 Day 4！昨天我們精準裁剪了 VibeFinance 的 MVP 需求~~，鎖定了三大核心 User Stories。有了清晰的產品輪廓，今天我們要來設計系統的「骨架」——系統架構圖與技術選型。

許多初學者在寫專案時，常常「邊寫邊算」，想到要用什麼資料庫就直接 install，遇到 CORS 或認證問題才回頭拆補程式碼。在 Vibe Coding 時代，我們先讓 AI 扮演資深系統架構師（System Architect），在第一行程式碼動工前，就畫出全貌與資料流向。

技術選型評估：Monorepo vs. 多層架構

針對 VibeFinance 的需求，我們需要評估前端、後端與資料庫的組合：

🤖 Human vs. AI 實戰示範：繪製 Mermaid 架構圖與邊界校正

我們試著讓 AI 為專案畫出系統架構與資料流向圖。

1. 我給 AI 的 Prompt

「你現在是資深系統架構師。請根據昨天的 MVP User Stories，規劃 VibeFinance 的系統架構。請用 Mermaid 語法繪製系統架構圖（包含 Client、Next.js Server Actions、OpenAI API 與 Supabase Database），並說明各層傳輸的資料結構。」

2. AI 產出的結果（節錄）

AI 給出了一段 Mermaid 程式碼與說明：

graph TD
    Client[Next.js Client Component] -->|1. REST API Post| Express[Separate Express API Server]
    Express -->|2. HTTP Request| OpenAI[OpenAI API]
    Express -->|3. SQL Raw Query| Postgres[(PostgreSQL Server)]
    Express -->|4. Redis Cache| Redis[(Redis Server)]

3. 工程師的修正與判斷（Debug & Judgment Process）

• 工程師思考：AI 又陷入了「傳統多服務架構」的慣性！它額外開了一台 Express API Server，甚至拉進了 Redis。這違反了我們 Day 1 決定的「 Next.js App Router 全棧架構」原則。獨立部署 Express 會讓前後端部署變複雜，且多出 CORS 設定的坑。

• 給 AI 的反覆引導與修正：

  「架構太複雜了！我們不需要獨立的 Express Server 與 Redis。
  請修正為：

  1. 利用 Next.js App Router 的 Server Actions 直接處理後端邏輯與 OpenAI 呼叫。
  2. 資料庫操作統一透過 Prisma Client 存取 Supabase。
  3. 請重新輸出簡潔的 Mermaid 架構圖。」

• 修正後的 Mermaid 系統架構圖：

graph LR
    SubGraph1[Client Side]
        A[shadcn/ui Form]
    end

    SubGraph2[Next.js App Router - Server Side]
        B[Server Actions]
        C[Prisma ORM]
    end

    SubGraph3[External Services]
        D[OpenAI GPT-4o API]
        E[(Supabase PostgreSQL)]
    end

    A -->|1. 自然語言文字| B
    B -->|2. Prompt 送出| D
    D -->|3. 解析為 JSON| B
    B -->|4. 寫入交易紀錄| C
    C -->|5. SQL| E