網站設計

Vibe coding 是什麼?不會寫程式也能用 AI 做網站嗎

2026-10-11·約 10 分鐘閱讀
Vibe coding 是什麼?不會寫程式也能用 AI 做網站嗎
▸本文目錄(12)
Vibe coding:用一般說話的方式告訴 AI 你要什麼,讓 AI 寫出程式碼,自己幾乎不看程式碼,只看結果對不對、哪裡要再改。中文有時譯作「氛圍編程」。

「我不會寫程式,但我上週用 AI 做了一個網站。」這句話在 2025 年以前聽起來很誇張,現在卻越來越常見。背後的做法有一個名字:vibe coding。

這個詞從一則社群貼文開始,一年內變成科技圈最常聽到的詞之一。這篇用白話說明 vibe coding 是什麼、跟傳統寫程式差在哪,以及如果你想用它做品牌網站,做得到什麼、要小心什麼。

Vibe coding 是什麼?

Vibe coding 這個詞,來自 OpenAI 共同創辦人之一的 AI 研究者 Andrej Karpathy。他在 2025 年 2 月的一則貼文裡,描述一種新的寫程式方式:完全跟著感覺走,甚至忘了程式碼的存在。他跟 AI 說要做什麼,接受 AI 給的修改,出錯就把錯誤訊息丟回去,讓 AI 自己修。

這個說法很快傳開。柯林斯英語辭典(Collins English Dictionary)把「vibe coding」選為 2025 年的年度詞彙,定義是:用自然語言下指令,讓人工智慧協助撰寫程式碼。

簡單說,vibe coding 有三個特徵:

  • 用說的:不寫程式碼,用一般的句子描述需求
  • 看結果:不逐行讀程式碼,只看畫面和功能對不對
  • 一直對話修改:哪裡不對就再說一次,讓 AI 改到滿意

跟傳統寫程式差在哪?

傳統寫程式 Vibe coding
誰寫程式碼 工程師 AI
人做什麼 設計架構、寫程式、除錯 描述需求、看結果、提出修改
需要的能力 程式語言、開發工具 說清楚需求、判斷結果好不好
速度 依規模,幾天到幾個月 簡單的頁面可能幾小時
誰看得懂程式碼 寫的人 有時候沒有人

最後一列是 vibe coding 最大的特點,也是最大的風險。程式能跑起來,但如果沒有人看懂它是怎麼寫的,出問題時就只能再問 AI,而 AI 不一定修得好。

常見的 vibe coding 工具

會拿來 vibe coding 的工具,大致分成三種:

  • 對話產生網站的工具:Lovable、Bolt,描述需求後直接產生網站並即時預覽,也提供主機。
  • AI 助理:ChatGPT、Claude,在對話中產生網頁程式碼,Claude 還能直接在對話旁預覽。
  • 程式編輯器裡的 AI:Cursor 這類工具,讓 AI 直接改你電腦裡的專案檔案,比較適合有一點技術基礎的人。

這幾種工具的差別和計費方式,在〈AI 架站工具比較〉有整理。

不會寫程式,可以用 vibe coding 做網站嗎?

可以,而且門檻比你想的低。只要說得清楚,大部分人一個下午就能做出一個能看的網頁:首頁主視覺、服務介紹、作品、聯絡方式,排版和配色都有一定水準。

不過「做出網頁」和「讓網站正式營運」是兩件事。用 vibe coding 做網站,通常會在這幾個地方卡住:

  • 上線:網域、主機、SSL 怎麼設定,工具不一定幫你處理完整。
  • 表單和資料:客人送出的資料存在哪裡、誰收得到通知。
  • 修改:網站變大後,改一個地方可能讓別的地方壞掉,又看不懂程式碼,只能一直重問。
  • 維護:沒有後台,同事要改一個電話號碼,也得透過 AI 改程式碼。

第一次嘗試的話,可以用這幾個方法讓過程順一點:

  • 先寫一段完整的需求:品牌做什麼、客人是誰、網站要讓客人做什麼、正確的電話和價格,一次交代清楚。
  • 一次只改一件事:「把按鈕改成深綠色」比「整個感覺再高級一點」容易改對。
  • 每個滿意的版本都留下來:改壞了可以回到上一版,不用從頭再來。
  • 用手機看一次:大部分客人是用手機打開網站,電腦上好看不代表手機上也好看。

如果你的目標是品牌官網,與其從程式碼開始,不如先想清楚網站要放什麼、要讓客人做什麼。這部分可以參考〈品牌官網怎麼做?〉。

拿來做品牌網站前,要注意的 3 個風險

1. 安全問題

AI 寫的程式碼能跑,不代表安全。資安公司 Veracode 在 2025 年 7 月發表的研究報告中,測試了一百多個大型語言模型,發現在 45% 的測試任務裡,AI 產生的程式碼帶有安全漏洞。這是單一廠商的測試結果,但足以提醒:牽涉會員資料、付款、後台登入的功能,不能只看「能用」就上線。

最常見的狀況是把金鑰或密碼直接寫在網頁程式碼裡,任何人打開網頁原始碼都看得到。如果網站有用到任何外部服務的金鑰,請找懂的人確認放的位置對不對。

2. 內容正確性

AI 會幫你補上看起來很合理的文字:成立年份、服務範圍、客戶評價。這些如果不是真的,對品牌的傷害比沒寫還大。Google 搜尋中心對生成式 AI 內容的說明也提到,發佈前要人工查核所有 AI 產生的內容,包括標題、描述和圖片替代文字。

3. 長期維護

Vibe coding 做出第一版很快,但網站不是做完就結束。價格會變、服務會調整、活動要換圖。沒有後台、程式碼又沒人看得懂的網站,每次更新的成本都比你想的高。上線後每個月要做哪些事,可以參考〈網站上線後每個月要做什麼?〉。

適合和不適合 vibe coding 的情況

適合 vibe coding 與要謹慎的情況:適合先試再說的有活動小頁、內部工具、想法驗證、個人作品;要謹慎的牽涉營運,包括收款與訂單、會員資料、正式官網、長期維護

適合先試再說的:一次性的活動頁、公司內部用的小工具、想驗證新服務有沒有人要的測試頁、個人作品集。這些就算出問題,影響也有限,速度比細節重要。

要謹慎的:需要收款和處理訂單、存放會員資料、作為主要接單管道的正式官網,或需要很多人長期維護的網站。這些情況可以用 vibe coding 做雛型,但正式上線前,要有人檢查安全、內容和後續維護的方式。

Vibe coding 之後:從「跟著感覺」到「有人把關」

有趣的是,提出這個詞的 Karpathy 本人,在 2026 年回顧時表示(據 The New Stack 報導),vibe coding 適合描述一年前的狀態,現在更好的說法是讓 AI 代理寫程式、人負責監督和把關。這種做法常被稱為 agentic coding,兩者的差別整理在〈Agentic coding 是什麼?〉。

basedot 也用 AI 協助做網站,但不是 vibe coding 那種「看起來能用就好」:從釐清商業目標開始,AI 用來加速版面、文案初稿和圖片處理,內容和上線設定由人逐項檢查。時程上,一頁式網站約 1~2 週、形象官網約 2~4 週、電商網站約 1~2 個月,有 AI 協作可以再縮短。

Vibe coding 常見問題

Vibe coding 的中文是什麼?

目前沒有統一的譯名,常見的有「氛圍編程」「氛圍寫程式」,很多人直接用英文 vibe coding。

Vibe coding 需要付費嗎?

很多工具有免費方案,可以先試做。要綁定自己的網域、增加 AI 用量,通常需要付費方案,而且用點數或 tokens 計費的工具,修改越多次花費越高。

Vibe coding 會取代網頁設計師嗎?

它取代了一部分「把畫面做出來」的工作,但網站要帶來生意,還是需要有人判斷要說什麼、放什麼、先放什麼。這部分可以參考〈AI 做網站可以取代網頁設計師嗎?〉。

用 vibe coding 做的網站,可以之後再請人接手嗎?

可以,但接手的人需要先花時間讀懂 AI 寫的程式碼,有時重做還比較快。如果一開始就打算之後找人接手,選擇可以匯出程式碼、或有後台的工具會比較好。

結論:Vibe coding 降低了門檻,沒有降低責任

Vibe coding 讓不會寫程式的人,也能用說的做出網頁。拿來做雛型、活動頁、內部工具,是很好的起點。

但網站一旦要收資料、接訂單、代表品牌,就需要有人確認內容正確、程式安全、之後改得動。把 vibe coding 當作快速做出第一版的方法,而不是省略檢查的理由。

有架設網站的需求,歡迎跟 basedot 網頁設計聯繫。