Vibe Coding 做網頁最常見？先搞懂前端、後端、資料庫是什麼
Vibe coding 最常見的入門場景是做網頁。這篇用 AI 新手看得懂的方式，介紹前端、後端、資料庫的分工，以及 React、Vue、Node.js、Python、PostgreSQL、Supabase 等常見技術怎麼放進網頁架構裡。
Vibe Coding 做網頁最常見？先搞懂前端、後端、資料庫是什麼
很多人開始接觸 vibe coding，第一個做的東西通常都是網頁。
原因很簡單。
網頁看得到畫面。
可以快速調整。
可以分享連結。
也比較容易做成一個「好像真的能用」的小工具。
例如：
- 活動報名頁
- 表單收集工具
- 簡單會員系統
- 作品集網站
- 後台 dashboard
- AI 小工具頁面
- MVP 產品原型
這也是為什麼很多 AI coding 工具，第一個主打的場景都是「幫你做網站」。
但問題也在這裡。
很多人會以為：
AI 幫我做出一個網頁 = 我已經會做產品了
其實還差一段。
因為一個真正能用的網頁，通常不是只有畫面。
它至少會拆成三層：
前端
後端
資料庫
你不一定要一開始就變工程師。
但你至少要知道這三個東西在做什麼。
這樣你在用 AI 做網站時，才不會只會說：
幫我做一個網站
而是可以更清楚地說：
這個畫面要讓使用者填資料
資料要送到後端
後端要檢查格式
最後存進資料庫
管理者可以在後台查看
這種描述，AI 才比較有機會做出可以工作的系統。
先用一句話理解三層分工
如果用餐廳來比喻：
| 部分 | 像什麼 | 負責什麼 |
|---|---|---|
| 前端 | 店面與菜單 | 使用者看到與操作的畫面 |
| 後端 | 廚房與櫃台系統 | 處理規則、流程、登入、權限、API |
| 資料庫 | 倉庫與帳本 | 長期保存資料 |
再白話一點：
前端：使用者看得到的地方
後端：系統真正處理事情的地方
資料庫：資料真正被保存的地方
一個只有前端的網站，通常比較像展示頁。
一個有前端、後端、資料庫的網站，才比較像可以運作的系統。
什麼是前端？
前端就是使用者打開網站時，看得到、點得到、滑得到的部分。
例如：
- 首頁
- 按鈕
- 表單
- 選單
- 商品列表
- 儀表板圖表
- 登入畫面
- 手機版排版
你在 vibe coding 時，如果你一直在調整畫面、顏色、排版、按鈕、卡片，那大多是在處理前端。
前端要回答的是：
使用者怎麼看？
使用者怎麼操作？
使用者操作後看到什麼回饋？
常見前端技術
HTML / CSS / JavaScript
這是網頁最基礎的三件事。
| 技術 | 負責什麼 |
|---|---|
| HTML | 網頁結構，例如標題、段落、表單 |
| CSS | 視覺樣式，例如顏色、排版、間距 |
| JavaScript | 互動行為，例如按鈕點擊、資料更新 |
很多 AI 工具就算沒有明講，底層也會產生這些東西。
React
React 是目前非常常見的前端框架。
它適合做：
- 互動式網頁
- 後台系統
- dashboard
- SaaS 產品介面
- 需要很多元件重複使用的網站
現在很多 vibe coding 工具預設也會生成 React 專案。
因為 React 生態系大，範例多，AI 也比較熟。
但缺點是：
一旦專案變大，狀態管理、元件拆分、資料流會變複雜。
所以新手用 React 做原型可以。
但如果要正式維護，還是要整理架構。
Vue
Vue 也是很常見的前端框架。
它的優點是上手相對直覺，語法對很多初學者比較親切。
常見用途：
- 企業內部系統
- 管理後台
- 中小型網站
- 表單型產品
在亞洲與台灣的開發圈，Vue 也很常見。
如果你的團隊本來就熟 Vue，就不一定要硬換 React。
Next.js
Next.js 是建立在 React 上的框架。
它常被拿來做：
- 官網
- 部落格
- SaaS 產品
- SEO 需求比較高的網站
- 前後端整合比較緊的專案
很多 AI coding 工具會用 Next.js，因為它可以同時處理前端頁面與部分後端 API。
但要注意：
Next.js 不是單純畫面工具。
它已經接近完整 Web App 架構。
如果你只是要做一個簡單靜態頁，不一定需要一開始就用到它。
Svelte / SvelteKit
Svelte 是另一種前端框架，寫起來相對簡潔。
SvelteKit 則是它的應用框架，可以做完整網站或 Web App。
它適合喜歡簡潔語法、希望專案不要太重的人。
但跟 React 相比，人才池與範例量通常比較小。
Angular
Angular 是比較完整、企業型的前端框架。
它適合大型團隊、規範明確、長期維護的企業系統。
但對 AI 新手或 vibe coding 入門來說，通常不是第一個建議入口。
因為它比較重，也比較需要工程規範。
什麼是後端？
後端是使用者看不到，但系統真正處理事情的地方。
例如：
- 登入驗證
- 權限判斷
- API
- 表單送出後的處理
- 付款流程
- 寄信通知
- 檔案上傳
- 資料格式檢查
- 連接資料庫
- 呼叫第三方服務
前端像櫃台。
後端像內部作業流程。
使用者按下「送出」之後，真正發生的事情通常在後端。
後端要回答的是：
這件事能不能做？
誰可以做？
資料要怎麼處理？
出錯時怎麼回應？
常見後端技術
Node.js
Node.js 讓 JavaScript 也可以跑在伺服器端。
常見搭配：
- Express
- NestJS
- Fastify
- Next.js API Routes
Node.js 適合：
- API 服務
- 即時互動
- 前後端都想用 JavaScript / TypeScript 的團隊
- 快速做 Web App 原型
很多 vibe coding 工具喜歡用 Node.js，是因為前端本來就常用 JavaScript，前後端可以用同一套語言。
Python
Python 是 AI 時代很常見的後端語言。
常見框架：
- FastAPI
- Django
- Flask
Python 適合：
- AI 應用
- 資料處理
- 自動化流程
- API 服務
- 內部工具
如果你的網站會接 AI 模型、資料分析、文件處理，Python 後端通常很自然。
FastAPI 很適合做 API。
Django 比較像完整後端框架，內建很多網站系統常用功能。
Flask 則比較輕量，適合小型服務或原型。
PHP / Laravel
PHP 是很多網站長期使用的後端語言。
Laravel 是 PHP 生態裡很成熟的框架。
常見用途：
- 企業網站
- 會員系統
- 後台管理
- 電商
- 內容網站
很多人以為 PHP 老了。
但實務上它仍然非常常見，尤其在網站與中小企業系統裡。
Ruby on Rails
Rails 是 Ruby 的 Web 框架。
它的特色是開發速度快，適合快速做產品。
很多早期 SaaS、新創產品都用 Rails 起家。
在台灣不是最主流，但如果團隊熟，它仍然是很有效率的選項。
Java / Spring Boot
Java 搭配 Spring Boot 常見於企業級系統。
適合：
- 大型後端系統
- 金融、電信、企業內部系統
- 長期維護
- 複雜權限與交易流程
它不是 vibe coding 新手最容易入門的選擇。
但如果你的系統最後會進到大型企業環境，就很可能會遇到 Java 生態。
Go
Go 適合做高效能、穩定、部署簡單的後端服務。
常見用途：
- API
- 基礎設施工具
- 高併發服務
- 微服務
對新手來說，Go 不一定是第一個 vibe coding 入口。
但對需要效能與穩定性的後端服務，它是很常見的選項。
什麼是資料庫？
資料庫是保存資料的地方。
很多 vibe coding 做出來的網站，一開始看起來能用。
但你重新整理頁面，資料就不見了。
這通常代表：
它只是存在前端狀態裡，沒有真的存進資料庫。
資料庫要回答的是：
資料要存在哪裡？
資料格式是什麼？
資料之間有什麼關係？
誰可以讀？
誰可以改？
資料壞掉或重複怎麼辦？
常見資料庫
PostgreSQL
PostgreSQL 是目前非常常見、也很穩的關聯式資料庫。
適合：
- 會員系統
- 訂單系統
- SaaS 產品
- 後台管理
- 需要資料關聯與查詢的系統
如果你不知道要選什麼資料庫，很多 Web App 用 PostgreSQL 當起點是合理的。
它穩、功能完整、雲端服務支援也多。
MySQL / MariaDB
MySQL 也是非常常見的關聯式資料庫。
很多網站、CMS、企業系統都用它。
MariaDB 則是 MySQL 生態裡常見的替代選項。
如果你的主機、舊系統、WordPress 或既有團隊熟 MySQL，那繼續用 MySQL 也很正常。
SQLite
SQLite 是一種很輕量的資料庫。
它通常是一個檔案，不需要另外架資料庫伺服器。
適合：
- 小工具
- 桌面 App
- 原型
- 測試環境
- 個人專案
但如果多人同時大量寫入、權限複雜、資料量變大，就要小心。
MongoDB
MongoDB 是常見的文件型資料庫。
它不是用表格列欄的方式思考，而是用類似 JSON 文件的方式存資料。
適合：
- 資料結構常變動
- 原型快速變化
- 文件型資料
- 某些內容管理場景
但如果你的資料關聯很多，例如訂單、會員、付款、權限，仍然要仔細設計。
Redis
Redis 常被拿來做快取、暫存、排隊、session。
它不是一般新手第一個要學的主要資料庫。
比較常出現在：
- 快取熱門資料
- 登入 session
- 背景任務佇列
- 限流
- 即時狀態
你可以先知道它是「輔助型資料儲存」，不是每個網站一開始都需要。
Supabase / Firebase
Supabase 和 Firebase 對 vibe coding 很常見。
因為它們不是單純資料庫，而是把很多後端能力包起來。
例如：
- 資料庫
- 登入驗證
- API
- 即時資料
- 檔案儲存
- 權限規則
Supabase 底層使用 PostgreSQL，常被拿來做快速產品原型。
Firebase 則是 Google 的後端服務，常見於 App 與即時資料場景。
對新手來說，它們的好處是快。
但壞處是你不能只知道「可以存資料」。
你還是要理解：
資料表怎麼設計
權限怎麼設計
誰可以讀寫
正式上線成本怎麼算
Vibe Coding 做網頁，最常見的幾種組合
不同工具會產生不同架構。
但常見組合大概可以這樣理解。
1. React + Node.js + PostgreSQL
這是很常見的 Web App 組合。
適合：
- SaaS 原型
- 會員系統
- 後台管理
- 產品 MVP
優點是生態大、範例多、AI 熟。
缺點是如果沒規劃，很容易變成一堆檔案互相牽動。
2. Next.js + PostgreSQL
這也是現在很多 AI coding 工具常生成的組合。
適合：
- 官網 + 產品功能
- 部落格 + 會員功能
- 小型 SaaS
- 需要 SEO 的產品頁
Next.js 可以把前端頁面與部分後端能力整合在一起。
但這也代表你要更清楚哪些邏輯在前端，哪些邏輯在伺服器端。
3. Vue + Node.js / Laravel + MySQL
這類組合在企業內部系統、管理後台、中小型網站很常見。
適合：
- 表單系統
- 後台管理
- 內容網站
- 內部工具
如果你的團隊或外包工程師熟 Vue / Laravel，這是很務實的選項。
4. Python FastAPI + React / Vue + PostgreSQL
這種組合很適合 AI 應用。
例如：
- 文件分析工具
- AI 報表工具
- 知識庫系統
- 內部自動化平台
Python 負責 AI 與資料處理。
React 或 Vue 負責畫面。
PostgreSQL 負責保存資料。
5. Supabase + 前端框架
這是 vibe coding 很常見的快速原型方式。
例如：
- React + Supabase
- Next.js + Supabase
- Vue + Supabase
好處是不用一開始自己架完整後端。
登入、資料庫、檔案儲存都可以先用現成服務。
但正式上線前要檢查：
- 資料表設計
- Row Level Security 權限
- API key 使用方式
- 使用量與費用
- 備份與維護
6. Firebase + 前端框架
Firebase 適合：
- App 原型
- 即時互動
- 小型產品
- 快速驗證
它可以很快做出登入、資料同步、推播、檔案儲存。
但如果後面要做複雜查詢、報表、關聯資料，設計方式就要更小心。
新手不用一次學完，但要知道自己在問什麼
如果你只是想用 AI 做一個頁面，你可以先從前端開始。
例如：
幫我做一個活動報名頁，有姓名、電話、Email、參加場次，畫面要適合手機瀏覽。
這是前端需求。
但如果你希望資料真的被保存，就要再說：
表單送出後，要把資料存進資料庫，管理者可以登入後台查看報名名單。
這就牽涉後端與資料庫。
如果你希望不同人看到不同資料，還要加上：
一般使用者只能看到自己的報名資料，管理者可以看到全部資料。
這就牽涉權限。
所以你不一定要會寫每一行程式。
但你要能把需求講到「系統分工」的層級。
給 vibe coding 新手的簡單判斷
如果你的需求是：
| 需求 | 主要會碰到 |
|---|---|
| 做一個漂亮頁面 | 前端 |
| 做表單送出 | 前端 + 後端 |
| 保存使用者資料 | 後端 + 資料庫 |
| 登入會員 | 後端 + 資料庫 + 權限 |
| 管理後台 | 前端 + 後端 + 資料庫 |
| 串 AI 模型 | 後端 + API + 成本控制 |
| 做正式產品 | 架構、權限、安全、部署、維護 |
這張表不用背。
你只要記住一件事：
畫面只是開始。
資料流跟權限，才是系統能不能真的用的關鍵。
用 AI 下指令時，可以這樣說
不要只說：
幫我做一個會員網站
可以改成：
我要做一個會員網站原型。
前端需要登入頁、註冊頁、會員中心、管理者後台。
後端需要處理註冊、登入、權限判斷、會員資料更新。
資料庫需要有 users、profiles、roles 三張表。
先用 PostgreSQL 設計資料表。
請先列出架構，不要直接寫程式。
這樣 AI 比較不會亂做。
因為你不是只丟一個模糊願望。
你是在告訴它系統要怎麼分工。
最後提醒：vibe coding 可以快，但不要跳過基本理解
vibe coding 的價值不是讓你不用懂系統。
而是讓你更快把想法做成可以測試的東西。
但如果你完全不知道前端、後端、資料庫的差別，你會很容易遇到幾個問題：
- 畫面做出來了，但資料存不住
- 登入看起來有了，但權限是假的
- 表單可以送出，但沒有驗證
- 資料庫欄位亂設，後面很難改
- AI 一直補程式，但你不知道哪裡壞
- 原型可以 demo，但不能正式上線
所以這篇不是要你立刻學完 React、Vue、Python、Node.js、PostgreSQL。
重點是先建立地圖。
你要知道：
前端負責畫面與互動
後端負責規則與流程
資料庫負責保存與查詢
當你有這張地圖，再去使用 vibe coding 工具，才不會只是跟 AI 說「幫我做網站」。
你會開始知道自己真正要的是什麼。
這也是從「玩 AI 做網頁」走向「用 AI 做產品原型」的第一步。