Vibe Coding 實戰：我用 AI 一天蓋完一個全端網站

先說結論

一天之內，我用 AI 完成了一個具備會員系統、部落格（含後台）、留言、收藏、聯絡表單、SEO、Docker 部署的全端網站。這在兩年前大概需要一到兩週。

但這不代表 AI 取代了我。恰好相反，是我十年的前端經驗讓我能正確地「駕駛」AI。

什麼是 Vibe Coding

2025 年初，前 Tesla AI 總監 Andrej Karpathy 丟出了這個詞：

「我把它叫 Vibe Coding。你完全投入到 vibe 裡，擁抱指數級增長，忘記程式碼的存在。」

翻譯成白話：你用自然語言描述需求，AI 生成程式碼，你驗收結果。寫程式的單位從「行」變成「功能」。

BridgeCraft 的技術棧

層級	技術
框架	Next.js 16（App Router）
樣式	Tailwind CSS v4
資料庫	Supabase（PostgreSQL + Auth + RLS）
信件	Resend
部署	Docker + GCP VM
AI 工具	Cursor + Claude

AI 超乎預期的部分

資料庫設計一次到位

我描述了「部落格需要文章、留言、收藏、會員」，AI 直接產出了完整的 SQL migration：四張表、索引、RLS policy、自動建立 profile 的 trigger。

這不是 AI 從零發明的，而是它見過無數類似的 schema。對於這類「有成熟 pattern 的問題」，AI 的產出品質非常高。

Supabase RLS — 不用翻文件

Row Level Security 的語法對新手很不友善。但 AI 直接根據我的需求（「所有人可讀已發布文章，僅管理員可寫」）產出了正確的 policy。這省下了至少半小時翻文件的時間。

重複性工作歸零

CRUD 頁面、表單元件、Server Actions、API routes — 這些結構重複的工作，AI 的效率是人類的 10 倍以上。你描述一次 pattern，它可以套用到所有類似的場景。

差點翻車的部分

RLS 擋住了自己的查詢

留言寫入 Supabase 成功了，但重新整理頁面卻撈不出來。原因是 comments 表的 SELECT policy 設成 auth.role() = 'authenticated'，而 Server Component 在 server 端 render 時，cookie 裡的 session 沒有正確傳遞。

AI 第一次的修法（指定 foreign key hint）也是錯的，因為 comments 和 profiles 之間沒有直接的 FK 關係。最後改成分兩次 query（先撈 comments，再撈 profiles）才解決。

教訓：AI 可以寫出看起來對的 code，但 debug 需要你真正理解系統的運作方式。

Next.js 16 的 Breaking Change

AI 的訓練資料裡 Next.js 15 的 middleware 還是主流，但 Next.js 16 已經把 middleware.ts 改名為 proxy.ts、函數從 middleware() 改為 proxy()。直到 console 噴出 deprecation warning，我才發現。

教訓：AI 的知識有時效性。越新的框架版本，越需要你自己把關。

TypeScript 型別不匹配

Supabase 的 JOIN 查詢回傳的型別是 any[]，AI 直接 as PostWithAuthor 在本地開發沒問題（因為 dev server 不做嚴格型別檢查），但 production build 直接報錯。最後改成 as unknown as PostWithAuthor 才通過。

教訓：永遠在本地跑一次 npm run build 再部署。

前端工程師的不可取代性

你可能會想：「如果 AI 這麼強，前端工程師還有什麼價值？」

我的答案是：AI 把門檻降低了，但把天花板提高了。

• 架構決策：AI 不會主動告訴你「這裡應該用 Server Component 而不是 Client Component」。它需要你問對問題。
• 品質判斷：AI 生成的 code 可能有 XSS 漏洞、效能問題、accessibility 缺失。你需要有能力辨識。
• Debug 能力：當 AI 的解法行不通，你需要能回到第一原理去找根因。
• 產品思維：AI 不知道使用者要什麼。「留言要不要支援巢狀回覆」、「收藏列表要怎麼排序」— 這些都是人的決策。

給前端工程師的 Vibe Coding 建議

1. 先有 mental model，再讓 AI 填空。不要盲目接受 AI 的所有產出。先在腦中建好架構藍圖，讓 AI 負責實作細節。

2. 把 AI 當 Junior 工程師。它很快、很勤勞，但需要你 code review。不要跳過驗證步驟。

3. 投資在 AI 不擅長的能力。系統設計、效能調校、使用者體驗、安全性 — 這些都是 AI 目前的弱項，也是你的護城河。

4. 學會「對話式開發」。Prompt 的品質決定產出的品質。描述需求時要具體、要給 context、要分步驟。

寫在最後

BridgeCraft 這個名字來自《死亡擱淺》裡的橋樑概念 — 在孤島之間建立連結。Vibe Coding 正是這樣一座橋：它連結了「會想但不會寫」和「想到就能做到」之間的鴻溝。

但橋只是工具，過橋的人需要知道自己要去哪裡。

---

這是 BridgeCraft「AI Agent 系列」的第二篇。下一篇會進入實作：用 LangChain 打造一個能自動執行任務的 Agent。