「程式碼不再是終點，意圖（Intent）與架構才是」

經過 30 天不間斷的探索，我們的 「AI 智慧個人財務追蹤器 (Smart Finance Tracker)」 正式從概念走向了 Production 線上環境！從 Day 1 的 .cursorrules 設定、資料庫架構、React 前端視覺化、LLM 串流串接，一路到 CI/CD 與雲端部署，我們完整示範了現代全棧開發的全新範式 —— Vibe Coding。

今日目標

作為系列的完結篇，今天我們不只是回顧成果，更要進行一場嚴肅而深刻的工程反思：

總結 30 天內使用 AI 輔助開發真實 Web 產品的「獲得（Gains）」與「損失（Losses）」。

示範如何讓 AI 幫我們對整個 30 天的 codebase 進行 「資產盤點與技術債評估報告（Technical Debt Assessment）」。

探討在 LLM 普及的年代，軟體工程師不可被取代的核心價值到底是什麼？

Human vs. AI：提示詞與協同開發

在專案結案之際，我們不再叫 AI 寫功能，而是讓它扮演 Senior Principal Architect（首席架構師），對全專案程式碼做最終巡檢。

給 AI 的指令（Prompt）

你現在是 Smart Finance Tracker 專案的首席架構師。
請對我們整個 30 天建立的 codebase（包含 Next.js 前端、API Routes、Prisma Schema、CI/CD 腳本）進行全面的「Vibe Coding 技術債與安全盤點報告」。

請輸出：

1. 專案的 3 大技術亮點（Architectural Highlights）。
2. AI 生成程式碼帶來的 3 大隱性技術債（Hidden Technical Debts）。
3. 未來擴充（Scale-up）時最急需重構的模組。
   請以簡明、客觀且具工程深度的 Markdown 格式輸出。

AI 產出的結果

AI 很快給出了一份評估報告：

-專案架構評估報告-

3 大技術亮點

1. 完整全棧架構：採用 Next.js + Prisma + Supabase，具備極高的開發效率。
2. AI 功能整合：成功導入 Vercel AI SDK 與 OpenAI 實現結構化解析。
3. 自動化 CI/CD：結合 GitHub Actions 與 Vercel 實現零停機部署。

3 大隱性技術債

1. 重複的型別定義：部分 API 的 Request/Response 型別手動寫死，未完全與 Zod / Prisma 共享。
2. 過度依賴 Client-side State：過多組件使用 useState 處理全域狀態，導致不必要的 Re-render。
3. 錯誤處理不一致：部分 API 使用 NextResponse.json({ error })，部分使用 throw new Error()。

重構建議

將所有 API 路由統一採用 Hono.js 或 TRPC 封裝。

翻車與除錯過程 (Debug Experience)

這份由 AI 自己評估「AI 寫出來的程式碼」的報告，看似精闢，實際上展現了 LLM 典型的「自我盲點 (Self-bias)」與「過度抽象化」問題：

哪裡搞砸了？

~避重就輕，忽略死角（Silent Failures）~

AI 評估時只掃描了檔案結構，完全沒發現它在 Day 20 生成的 LLM 解析模組中，為了圖方便而使用了 any 型別逃避驗證；也忽視了 Day 22 效能優化時未處理的 Bundle 大小問題（Recharts 全量引入未做 Dynamic Import）。

給出不切實際的盲目重構建議：
AI 建議「將 Next.js Route Handlers 全面重構成 tRPC 或 Hono.js」。對於一個已經穩定線上的 MVP 專案來說，這種大規模架構替換成本極高，完全不符合商業與工程的 ROI 評估！

修正與引導（Human Decision）

身為人類架構師，我否定了 AI 盲目重構的建議，並引導它將焦點放在「高風險且高投資報酬率」的修正上：

修正 Prompt：

「你的重構建議不符合成本效益。請重新聚焦於 『即時安全風險』 與 『效能死角』。
請針對 Recharts Dynamic Import 與 Prisma Transaction 併發鎖定 這兩個真實問題，給出精準的 10 行內修復程式碼。」

修正後的版本 (Refactored Code)

最終針對 AI 遺留的顯性技術債，進行修復：

// src/app/dashboard/page.tsx - 解決 Recharts 導致的大型 Client Bundle 問題
import dynamic from 'next/dynamic';

// 採用 Dynamic Import 實現 Code Splitting，減少初次載入 250KB JS
const ExpenseCategoryChart = dynamic(
  () => import('@/components/charts/ExpenseCategoryChart').then((mod) => mod.ExpenseCategoryChart),
  {
    ssr: false,
    loading: () => <div className="h-[300px] animate-pulse bg-slate-800 rounded-xl" />,
  }
);

30 天 Vibe Coding 的得與失 (The Gains & Losses)

在這 30 天的實戰中，我們深刻體驗到了 AI 帶來的前所未有變革：

我們獲得了什麼？

極致的開發速度（10x Velocity）：以往需要數個月建立的全棧 MVP（認證、DB、支付、E2E 測試、CI/CD），現在 30 天內一人獨力完成。

降低語法記憶負擔（Context Over Syntax）：我們不再需要死記 Tailwind Class、Playwright API 或 Prisma 語法，只需專注於業務邏輯與架構設計。

我們失去了什麼 / 面臨的挑戰？

技術債累積速度同樣翻倍：AI 傾向給出「當下能跑通」的最簡程式碼，若沒有人類審查，程式碼庫會迅速退化成難以維護的「義大利麵條（Spaghetti Code）」。

幻覺與版本斷層：LLM 經常使用舊版 API（例如 TanStack Query v4 vs v5），需要工程師具備強大的 Debug 與查閱官方 Doc 能力。

AI 時代工程師的核心價值思考

當 AI 已經能寫出 80% 的 CRUD 程式碼、UI 組件與測試腳本時，工程師的價值究竟在哪裡？

這 30 天給出了最好的答案：

「AI 是無比強大的引擎，但人類是手握方向盤與煞車的賽車手。」

品味與標準 (Engineering Taste)：AI 可以生成十種 UI 或架構，但只有工程師知道哪一種符合用戶體驗、無障礙規範與未來擴充性。

邊界條件與領域知識 (Domain Knowledge & Edge Cases)：AI 不懂真實世界的商業規則與安全性死角，引導 AI 補齊 Zod 驗證、處理 Race Condition 與 Auth 授權，是人類不可替代的職責。

系統思考與審查能力 (System Thinking & Code Review)：未來工程師的核心能力，將從「Write Code」全面轉向「Review Code & Prompt Engineering」。

賽事總結

感謝這 30 天陪同我們一起開啟 Vibe Mode 的所有讀者！
我們證明了一件事：在 AI 時代，只要你有想法、有系統思維、有敢於翻車並除錯的勇氣，一個人就是一家軟體公司！

Vibe Mode 結案，我們的開發之旅才剛剛開始！🚀🚀🚀