Vibe coding 是什麼？

Vibe coding 是什麼？

想像一位西營盤咖啡店老闆，星期五前要有一個訂座頁面。她分不清 React 和 Reader，只是在 AI 工具裏打了兩句話，看着頁面出現，再說一句「按鈕大一點，加上星期日營業時間」，午飯前頁面已經上線。整個過程她沒有打開過任何程式檔案——這就是 vibe coding。

準確地說，vibe coding 是用自然語言向 AI 模型描述軟件，運行模型寫出的程式，再按畫面和實際表現來判斷好壞，而不是靠閱讀程式碼。你用結果來指揮——「太慢了」「表格要寄電郵給我」——打字的工作交給 AI。

很多人把任何「用 AI 幫手寫程式」都叫 vibe coding，但真正的分別在於有沒有審查。開發者 Simon Willison 在 2025 年 3 月說得清楚：即使每一行都是 AI 寫的，只要你審查過、測試過、理解它，那只是有 AI 助手的一般軟件開發，並不是 vibe coding。Vibe coding 指的是不細看就直接接受程式碼的做法。

「Vibe coding」這個詞從哪裏來？

這個詞來自 Andrej Karpathy——OpenAI 創始成員之一、Tesla 前 AI 總監。他在 2025 年 2 月 2 日於 X 發文，形容「一種新的寫程式方式，我稱之為 vibe coding：完全順着感覺走，擁抱指數式進步，忘記程式碼的存在」。

他描述自己用語音跟編輯器對話，AI 建議的修改一律接受、不看差異，遇到錯誤訊息就不加說明直接貼回給 AI，通常問題就會解決。重要的是，他自己也說這做法適合「週末用完即棄的小項目」——這個坦白的前提，在這個詞廣泛流傳時常常被忽略。

這個詞迅速流行，因為它為很多人早已在做的事起了名字。幾個月內它已有自己的維基百科條目，而在 2025 年 11 月，Collins 英語詞典更把「vibe coding」選為年度詞彙。

Vibe coding 怎樣運作？

背後是大型語言模型把你的文字轉成程式碼——HTML、CSS、JavaScript、React 元件、資料庫查詢等。好的 vibe coding 工具會把模型包在一個循環裏，讓你不用碰這些細節：

1. 描述：用日常語言說明應用程式給誰用、要做甚麼、想要甚麼感覺。
2. 生成：AI 規劃檔案並寫出程式碼。
3. 運行：工具在即時預覽中運行程式，你看到的是能用的應用程式，而不是一堆程式碼。
4. 回應：你在預覽中試用，再在同一個對話裏提出修改，例如「加深色模式」「加兩件貨品時總數計錯了」。
5. 重複直至符合需要，然後發佈到一個網址。

需要的技能由「打語法」變成「清楚描述結果、誠實測試」。懂得寫清楚問題報告的人，通常也很擅長 vibe coding。

Vibe coding 適合做甚麼？

當出錯的代價低、學習的速度重要時，vibe coding 最能發揮：

• 原型和示範：一個下午就能讓構思真正運作，不必只靠簡報描述。
• 登陸頁和小店網站：餐牌、營業時間、聯絡表格、作品集。
• 內部工具：給幾位同事用的計算機、追蹤表或數據儀表板。
• 個人軟件：只為你自己而做、不會有公司替你開發的應用程式。
• 學習：看到自己構思的程式真正運作，是了解網頁如何運作的好方法。

它也改變了誰可以動手做。設計師、老師、小店老闆都可以先做出能用的第一個版本，不用等開發人員——之後再找開發人員時，手上已經有實物可以討論。

Vibe coding 有甚麼限制和風險？

Vibe coding 的特點——不閱讀程式碼——正正也是它最大的風險。從未看過的程式碼，可以在示範時完美運作，卻以你看不見的方式出錯：

• 保安漏洞：AI 模型會重複常見錯誤，例如沒有驗證輸入、權限檢查有漏洞、把密鑰放進瀏覽器程式碼。OWASP Top 10 列出了典型問題，AI 寫的程式碼同樣可能出現。保安公司 Veracode 在 2025 年測試了逾 100 個模型，發現 AI 生成的程式碼在 45% 的測試中引入了有風險的保安漏洞。
• 資料無法挽回：AI 不經詢問就修改資料庫結構，可能刪除真實資料。
• 越改越亂：每次要求都在上一次的基礎上修補。沒有結構和版本，項目可能去到每修一處就壞另一處的地步。
• 隱藏成本：每次 AI 操作都有成本。不事先顯示每次修改價錢的工具，令預算難以估算。
• 被平台綁住：有些平台把你的應用程式存成只能在它們服務上運行的格式。如果不能匯出真正的程式碼，產品就不完全屬於你。

甚麼時候應該轉用正式的軟件工程？

Vibe coding 是起點，不能取代工程判斷。出現以下任何一種情況，就應該加入審查、測試和開發人員：

• 你要收款，或儲存個人、健康或財務資料。
• 用戶需要登入，而且每人只能看到自己的記錄。
• 應用程式必須為客戶持續運作，或要符合法律或行業標準。
• 有不少人依賴它，或有幾個人需要一起修改它。

怎樣負責任地 vibe code

1. 保留每個版本，壞了的修改一按就能還原。
2. 每次只要求一個修改，檢查好再做下一個。
3. 切勿把密碼或 API 金鑰放進網頁；密鑰應留在伺服器。
4. 資料庫變更在執行前先審查。
5. 用手機、用鍵盤、用錯誤的輸入都測試一次。
6. 把程式碼匯出到你擁有的儲存庫，方便日後由開發人員審查。

Supacode 怎樣做 vibe coding？

Supacode 是 Transcend Technologies 開發的 AI 應用程式建立工具，保留 vibe coding 有趣的部分，同時避開常見陷阱。你在對話中描述應用程式，Supacode 寫出真正的原始碼，在即時預覽中運行，並把每次修改存成一個版本。

• 真正的程式碼，三種技術棧：項目是純 HTML、React 或 Next.js。「自動」會為內容網站選 HTML、為互動的瀏覽器應用程式選 React，只有需要伺服器時才選 Next.js——你也可以自行更改。
• 每次修改都有版本：每次 AI 修改和每次手動儲存都會成為一個版本，可以預覽、整個還原或逐個檔案還原，也可以在對話中復原。詳見版本、復原與還原。
• 程式碼可以帶走：所有計劃都可以把版本下載成 .zip；付費計劃可把每個版本推送到你自己的 GitHub 儲存庫（GitHub 和 Supabase 的運作方式）。你也可以在程式碼分頁親手修改檔案。
• 你的資料庫，由你審批：連接你自己的 Supabase 項目；AI 會寫遷移，但要你批准才會執行。
• 一鍵發佈：發佈後的網站有自己的 supacode.app 網址，除非你把它加入作品廊，否則不會在任何地方列出。
• 不會有意外收費：每個收費操作在執行前都會顯示所需點數，免費計劃的點數每日補充，自動修正失敗時會退回該次點數。最新計劃見價格頁。

今天就開始 vibe coding，該怎樣做？

要明白 vibe coding，最快的方法是親手做一次。揀一樣細小而真實、你自己真的會用的東西，給 AI 一段簡短說明：

為大角咀的街坊花店做一個單頁網站：頂部顯示營業時間、六款植物及價錢、地圖和聯絡表格。色調溫暖柔和，手機上也清楚易用。

1. 把說明貼到 Supacode 輸入框（或按本頁的「試試看」按鈕），然後按「建立」。
2. 分別用電腦闊度和手機闊度點擊預覽。
3. 每次只要求一個修改，例如「地圖移到植物下面」「加上星期日營業時間」。
4. 如果修改出錯，在對話中復原，或還原到較早的版本。
5. 滿意後發佈，把連結分享出去。

想從完成品開始？瀏覽範本：複製到自己的項目不用點數。想看更詳細的教學，可閱讀英文指南〈How to build an app with AI〉和〈How to build a website with AI〉。正在揀工具？可參考我們附有來源的英文比較文章〈Best vibe coding platforms in 2026〉。