Vibe Coding 是什麼:2026 工具地圖與怎麼選

你可能早就想要一個自己的網站:作品集、接案報價頁、個人品牌首頁。然後卡在同一個地方:模板網站改兩下就改不動,外包一頁報價上萬,自學程式查了一下發現要先學 HTML、CSS、JavaScript,保守估計半年。於是這件事就一直躺在待辦清單裡。

2025 到 2026 這兩年,情況真的變了。AI 已經可以把「你用人話描述的需求」直接變成能跑的網站,而且品質好到矽谷一堆新創的第一版產品就是這樣做出來的。這套做法有個名字:vibe coding。這堂課不急著動手做大東西,先把三件事講清楚:vibe coding 到底是什麼、2026 年的工具版圖長怎樣、你該從哪一套工具開始。選錯起點,是新手浪費最多時間的地方。

這堂課適合誰適合:想用 AI 做出自己網站的人。本課程屬進階應用專區,零程式基礎 OK,但要會基本的電腦操作(打字、開瀏覽器、裝軟體)。前置課:無,這是第 1 課。

這堂學什麼

vibe coding 的定義,以及你在裡面扮演什麼角色(比你想的更重要)
2026 工具全景:瀏覽器派 vs 本地代理派,7 個主流工具的定位與價格
一張決策圖:照你的情況選出起點工具
本課程 8 堂課的路線圖:為什麼先瀏覽器、再 Claude Code、最後補資安
實戰:10 分鐘試駕 Lovable + 為第 3 課做環境健檢

Vibe Coding 到底是什麼

這個詞是 OpenAI 共同創辦人、前 Tesla AI 總監 Andrej Karpathy 在 2025 年 2 月丟出來的:寫程式時「完全順著感覺走(give in to the vibes)」,用自然語言跟 AI 對話,讓 AI 寫程式碼,你甚至不用細看程式碼長怎樣——看結果對不對就好,不對就再用人話叫它改。

傳統寫程式 vs vibe coding:流程與角色對照

拆開來看,vibe coding 的核心循環只有四步:描述需求 → AI 生成 → 看結果 → 人話修改,然後不斷重複第三、四步直到滿意。你會發現整個流程裡沒有「寫程式」這一步,但有兩步是 AI 替代不了的:

說清楚要什麼:「幫我做個網站」跟「幫我做一頁攝影作品集,深色背景、瀑布流排版、頂部固定導覽列」,生出來的東西天差地遠。
判斷結果對不對:AI 很會生,但不會替你驗收。畫面跑版、按鈕沒反應、表單送出後資料去哪了,這些要你來看。

所以別被「不用寫程式」騙了,以為可以完全不動腦。你的角色是從「寫程式的人」變成「出需求 + 做驗收的人」——類似業主對設計師。而且有一件事 AI 不會幫你扛:責任。AI 生成的網站一樣會有資安漏洞,出事的是你的網站、你使用者的資料,這是第 6、7 課要專門處理的主題,現在先記得這件事存在。

2026 工具全景:兩大流派

市面上號稱能「AI 建站」的工具至少幾十個,但你只需要認識兩個流派、七個名字。

2026 工具地圖:瀏覽器派 vs 本地代理派

瀏覽器派:開網頁就能做

打開網頁、登入、在聊天框描述需求,AI 直接生成網站、旁邊即時預覽、按一下就發佈到公開網址。全程不用安裝任何東西。

Lovable:對話式全端建站,體驗最不像在寫程式,還能一鍵接資料庫(Supabase)。新手第一站,也是我們第 2 課的主角。
Bolt.new:一樣是 prompt 直出完整 app,但介面保留了程式碼編輯區,適合想順便看懂、動手改幾行的人。
v0(Vercel 出品):專攻前端 UI,生成 React + Tailwind 的畫面與元件,設計質感是四個裡最好的,但後端功能要自己接。
Replit:完整的雲端開發環境加上 AI Agent,彈性最大,但介面資訊量也最大,對零基礎稍嫌複雜。

本地代理派:AI 直接操作你電腦裡的檔案

這一派的工具是 AI agent:你下指令,它直接在你電腦裡建檔案、改程式、跑指令,程式碼從頭到尾都在你手上。

Claude Code:Anthropic 出的終端機 AI agent,你用對話下需求,它自己規劃、動手、回報。長期迭代能力目前公認最強,是本課程第 3 課之後的主力工具。
Cursor:一個長得像正常編輯器的 AI 開發工具,程式碼全貌看得一清二楚,適合「想藉機學一點開發」的人。
Codex:OpenAI 的版本,有 CLI、網頁、IDE 外掛多種形態,直接包含在 ChatGPT 訂閱裡,已經在付 Plus 的人等於免費多一個工具。

瀏覽器派 vs 本地代理派:優缺點與適合對象

一句話總結取捨:瀏覽器派贏在起步快,本地代理派贏在天花板高。瀏覽器派十分鐘見成果,但程式碼在平台手上、按用量計費,專案越大越燒錢也越難精修;本地派要先過安裝環境這一關,但之後程式碼是你的、月費固定、搭配版本控制想怎麼改就怎麼改。

七個工具的價格與定位(2026 年中查證)

工具	型態	免費方案	付費起價(月)	一句話定位
Lovable	瀏覽器	每天 5 credits	US$25(100 credits)	零基礎做完整網站首選
Bolt.new	瀏覽器	每月 100 萬 tokens	US$25	想邊做邊碰程式碼
v0	瀏覽器	少量免費 credits	US$20	只要漂亮前端 UI
Replit	瀏覽器	Starter 免費方案	US$25(Core,年繳約 US$20)	雲端全能開發環境
Claude Code	本地	無(需訂閱)	US$20(Claude Pro)	長期迭代最強 agent
Cursor	本地	Hobby 免費版	US$20(Pro)	AI 編輯器,看得到全貌
Codex	本地+雲	ChatGPT 免費版可少量用	US$20(隨 ChatGPT Plus)	已付 ChatGPT 就順便用

價格會變,計費邏輯不會這張表是 2026 年年中的行情,各家幾乎每季都在調方案,下單前以官網為準。但計費邏輯值得記住:瀏覽器派多是「用量計費」(credit/token,做越多扣越多),本地派多是「訂閱制」(月費固定,有用量上限)。長期經營網站的人,通常最後都會走向訂閱制。

怎麼選:一張決策圖

選工具決策圖:5 個問題找到你的起點

照著圖答,大多數讀這門課的人會停在 Q1,答案是 Lovable——這正是課程設計的預設起點。幾個補充判斷:

不確定自己會不會持續做:先用瀏覽器派的免費額度試水溫,一毛錢都不用花。
公司或接案要用、程式碼必須自己保管:直接認真考慮 Claude Code 或 Cursor,別把商業專案的原始碼綁死在建站平台上。
已訂 ChatGPT Plus 又不想多花錢:Codex 是零額外成本的本地派入場券,雖然本課程主力教 Claude Code,但觀念完全互通。

本課程路線圖:為什麼是這個順序

8 堂課路線圖:起步 → 升級 → 迭代 → 資安 → 實戰

這門課的路線是「先瀏覽器、再本地、最後補資安」,理由有三個:

先有成就感才走得遠。第 2 課用 Lovable 零安裝做出第一個網站,是因為新手最大的敵人不是難度,是「弄了一晚上連環境都沒裝好」的挫折感。先讓成果出現,動力才會出現。
觀念先在低門檻環境練熟。描述需求、驗收、迭代的心法,在 Lovable 練會了,搬到 Claude Code(第 3 課)只是換工具,不用重學。接著第 4 課把網站真正部署上線(GitHub + Vercel + 自訂網域),第 5 課學怎麼持續改版不把網站改炸。
資安放在你有東西可守之後。第 6、7 課處理 AI 生成程式最被低估的問題:資安。等你手上已經有一個上線的網站,那些「API 金鑰外洩」「資料庫裸奔」的案例才會真正有感。第 8 課綜合實戰,從零做一個作品集網站加聯絡表單,把 1 到 7 課完整走一遍。

手把手實戰:10 分鐘試駕 + 環境健檢

觀念課也要動手。今天做兩件小事:親手體驗一次 vibe coding 的循環,以及替第 3 課先做環境健檢。

開一個 Lovable 帳號

瀏覽器打開 lovable.dev,用 Google 帳號登入即可。免費方案每天 5 credits,今天的體驗綽綽有餘,不用付費。

貼上你的第一個 prompt

在首頁的輸入框貼上下面這段(可以直接複製,也可以改成你自己的資訊),送出後等 1–2 分鐘:

幫我做一個單頁的個人介紹網站,繁體中文。
內容:我叫 XXX,是一名行銷企劃,喜歡攝影和登山。
版面:頂部大標題區、中間三張卡片介紹我的三個興趣、底部一個聯絡我的區塊。
風格:米白色背景、簡約、圓角卡片、手機上也要好看。

注意這段 prompt 的結構:內容、版面、風格分開講。這是第 2 課會展開的「結構化描述」,先照抄感受差異。

觀察它在做什麼

左邊是對話與工作紀錄,右邊是即時預覽。你會看到它列出計畫、生成檔案、然後畫面直接出現。這個「描述 → 生成 → 預覽」的體感,就是 vibe coding。

用人話改一個地方

在對話框接著輸入:

把頂部大標題區改成深色背景配白字,其他不動。

看它只動那一塊。「一次改一件事、講清楚範圍」是之後每一課都會用到的鐵律。

環境健檢:找到你的終端機

第 3 課裝 Claude Code 需要用到終端機。今天只要求你找到它、打兩行指令:macOS 開「終端機(Terminal)」,Windows 開「PowerShell」,輸入:

node --version
git --version

有顯示版本號(例如 v22.x.x)代表已安裝;顯示 command not found 或「無法辨識」完全正常,不用現在處理,第 3 課會一步一步帶你裝。今天的目標只是:你知道終端機在哪、敢打字進去。

常見坑

坑一:免費額度一下就燒完。 Lovable 免費版每天只有 5 credits,而且當天沒用完不會累積。很多人第一天興奮亂試,下午就看到 You've run out of credits,以為工具壞了。解法:把需求先在記事本想清楚再送出、一次只改一件事;真的要密集開發再考慮付費。第 2 課會教省 credit 的描述技巧。

坑二:prompt 太攏統,生出來的東西不是你要的。 「幫我做一個很厲害的網站」這種 prompt,AI 只能瞎猜,你會得到一個通用模板,然後陷入無止盡的「不對,再改」,credits 燒光、成品還是四不像。解法:照上面實戰的格式,至少把「內容、版面、風格」三件事講清楚,一句模糊的形容詞不如一個具體的例子。

坑三:以為 AI 生成的網站可以直接拿去商用。 這是最貴的坑。2025 年就有資安研究者掃描 Lovable 生成的網站,發現上百個專案因為資料庫權限(Supabase RLS)沒設定,使用者個資可以被任何人直接讀取。AI 預設「能動就好」,不會主動幫你上鎖。在上第 6、7 課之前,原則很簡單:不要在練習專案裡放真實個資、不要把 API 金鑰貼進 prompt。

坑四:急著自己裝本地工具,環境裝到懷疑人生。 有人這堂課上完就衝去裝 Claude Code,結果終端機噴 zsh: command not found: npm,接著照網路文章亂裝了三種版本的 Node.js,環境整組打結。解法:那個錯誤只代表還沒裝 Node.js,不是你的電腦有問題;第 3 課有完整的安裝順序與除錯,等到那時候一次裝對,比現在亂裝再拆乾淨快得多。

作業

用決策圖選出你的起點工具,寫下一句理由(例如:「我零基礎、想先看到成果,所以從 Lovable 開始」)。
完成實戰步驟 1–4:在 Lovable 免費額度內做出一頁自我介紹,並成功「只改一個地方」一次。
完成環境健檢:截圖你的終端機畫面(不管指令成功還是 command not found 都算完成)。

下一課預告

地圖有了、方向選了,下一課直接開工:第 2 課「零安裝做出第一個網站:Lovable 實戰」。你會學到結構化 prompt 的完整公式、從零把一個網站做到能發佈的公開網址,並且學會在免費額度內把 credit 用在刀口上。做完第 2 課,你就有一個可以傳給朋友的網址了。