Vibe Coding 做網頁最常見？先搞懂前端、後端、資料庫是什麼

很多人開始接觸 vibe coding，第一個做的東西通常都是網頁。

原因很簡單。

網頁看得到畫面。
可以快速調整。
可以分享連結。
也比較容易做成一個「好像真的能用」的小工具。

例如：

• 活動報名頁
• 表單收集工具
• 簡單會員系統
• 作品集網站
• 後台 dashboard
• AI 小工具頁面
• MVP 產品原型

這也是為什麼很多 AI coding 工具，第一個主打的場景都是「幫你做網站」。

但問題也在這裡。

很多人會以為：

AI 幫我做出一個網頁 = 我已經會做產品了

其實還差一段。

因為一個真正能用的網頁，通常不是只有畫面。

它至少會拆成三層：

前端
後端
資料庫

你不一定要一開始就變工程師。
但你至少要知道這三個東西在做什麼。

這樣你在用 AI 做網站時，才不會只會說：

幫我做一個網站

而是可以更清楚地說：

這個畫面要讓使用者填資料
資料要送到後端
後端要檢查格式
最後存進資料庫
管理者可以在後台查看

這種描述，AI 才比較有機會做出可以工作的系統。

先用一句話理解三層分工

如果用餐廳來比喻：

再白話一點：

前端：使用者看得到的地方
後端：系統真正處理事情的地方
資料庫：資料真正被保存的地方

一個只有前端的網站，通常比較像展示頁。
一個有前端、後端、資料庫的網站，才比較像可以運作的系統。

什麼是前端？

前端就是使用者打開網站時，看得到、點得到、滑得到的部分。

例如：

• 首頁
• 按鈕
• 表單
• 選單
• 商品列表
• 儀表板圖表
• 登入畫面
• 手機版排版

你在 vibe coding 時，如果你一直在調整畫面、顏色、排版、按鈕、卡片，那大多是在處理前端。

前端要回答的是：

使用者怎麼看？
使用者怎麼操作？
使用者操作後看到什麼回饋？

常見前端技術

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 下指令時，可以這樣說

不要只說：

幫我做一個會員網站

可以改成：

我要做一個會員網站原型。
前端需要登入頁、註冊頁、會員中心、管理者後台。
後端需要處理註冊、登入、權限判斷、會員資料更新。
資料庫需要有 users、profiles、roles 三張表。
先用 PostgreSQL 設計資料表。
請先列出架構，不要直接寫程式。

這樣 AI 比較不會亂做。

因為你不是只丟一個模糊願望。
你是在告訴它系統要怎麼分工。

最後提醒：vibe coding 可以快，但不要跳過基本理解

vibe coding 的價值不是讓你不用懂系統。
而是讓你更快把想法做成可以測試的東西。

但如果你完全不知道前端、後端、資料庫的差別，你會很容易遇到幾個問題：

• 畫面做出來了，但資料存不住
• 登入看起來有了，但權限是假的
• 表單可以送出，但沒有驗證
• 資料庫欄位亂設，後面很難改
• AI 一直補程式，但你不知道哪裡壞
• 原型可以 demo，但不能正式上線

所以這篇不是要你立刻學完 React、Vue、Python、Node.js、PostgreSQL。

重點是先建立地圖。

你要知道：

前端負責畫面與互動
後端負責規則與流程
資料庫負責保存與查詢

當你有這張地圖，再去使用 vibe coding 工具，才不會只是跟 AI 說「幫我做網站」。

你會開始知道自己真正要的是什麼。

這也是從「玩 AI 做網頁」走向「用 AI 做產品原型」的第一步。