你還在一個字一個字敲Code嗎？

想像一下，你坐在咖啡廳，打開筆電，對著螢幕說：「幫我做一個番茄鐘（Pomodoro Timer），要有開始、暫停、重置按鈕，每25分鐘提醒一次。」不到30秒，程式碼自動生成，你只需要按一下「接受」，功能就完成了。

這不是科幻電影。這是2026年正在發生的Vibe Coding革命。

Vibe Coding這個詞，最早由OpenAI的CEO Sam Altman在2025年提出，意思是「用感覺寫程式」——你不必記住每行程式碼的語法，而是透過與AI對話，讓AI幫你完成所有實作。你只需要懂邏輯、會描述需求，剩下的交給AI。

這篇教學，我們會用Cursor（一款AI原生的程式編輯器）搭配Claude（Anthropic的超強AI模型），手把手教你從零開始Vibe Coding。

什麼是Vibe Coding？為什麼矽谷開發者都在瘋？

先講一個真實故事。我認識一位在台北做行銷的朋友，完全不會寫程式。他去年用Vibe Coding的方式，花了三個週末，做出一個幫網紅管理IG排程的小工具，現在每個月被動收入超過台幣6萬。你沒看錯——不會寫Code的人，用AI寫出了一個賺錢的產品。

Vibe Coding的核心精神是：你不需要會寫程式，但你需要會「問問題」。這跟傳統學程式完全不一樣。傳統學程式，你要先學變數、迴圈、函式、資料結構，然後才能寫出一個Hello World。Vibe Coding反過來，你先描述你要什麼，AI幫你生出來，你再邊看邊學。

這對香港和台灣的讀者特別有意義。我們的教育體系從小教我們「按部就班」，但Vibe Coding教的是「先做出來，再優化」。這是一種完全不同的思維模式。

第一步：安裝Cursor + 串接Claude

Cursor是目前最適合Vibe Coding的工具。它本質上是VS Code的強化版，但內建了AI對話視窗，可以直接跟程式碼互動。

下載與安裝：

  1. 到 cursor.com 下載桌面版（支援Windows、Mac、Linux）
  2. 安裝後，用Google或GitHub帳號登入
  3. 免費版每天有500次AI請求，對初學者來說非常夠用

串接Claude模型： Cursor預設支援多種AI模型，包括GPT-4o、Claude Sonnet、Claude Opus等。建議選擇Claude Sonnet，因為它在寫程式任務上的表現極佳，而且速度快。

設定方式：

  • 點擊左下角設定齒輪 → Models
  • 勾選「Claude Sonnet」作為預設模型
  • 如果你有Anthropic API Key，也可以輸入自己的Key，這樣就不受免費版次數限制

第二步：用自然語言「描述」你的第一個專案

現在，我們實際做一個專案。假設你想做一個**「每日任務清單」**（To-Do List）網頁，包含：

  • 可以新增任務
  • 可以標記完成
  • 可以刪除任務
  • 資料會自動儲存在瀏覽器，關掉再開還在

打開Cursor，建立一個新資料夾，然後按 Cmd+I（Mac）或 Ctrl+I（Windows），打開AI對話視窗。

輸入這段提示詞（Prompt）：

「幫我建立一個To-Do List網頁，使用HTML + CSS + JavaScript。功能包括：

  1. 一個輸入框和新增按鈕
  2. 每個任務前面有核取方塊，勾選後任務會畫橫線
  3. 每個任務旁邊有一個刪除按鈕
  4. 使用localStorage儲存資料，重新整理後任務不會消失
  5. 介面要漂亮，使用現代扁平化設計，背景漸層色，字體用系統預設」

AI會開始生成程式碼。你可能會看到它先建立一個 index.html 檔案，裡面包含所有內容。你不需要理解每一行，但可以要求它解釋：

「請用繁體中文解釋每一段程式在做什麼」

這是最棒的學習方式——你一邊用AI寫，一邊學。

第三步：反覆迭代，讓AI幫你優化

寫完第一版後，通常不會完美。這時候Vibe Coding的真正威力才展現出來。你可以繼續跟AI對話，要求修改：

「新增一個功能：如果任務超過7天未完成，任務文字會變成紅色」

「在頁面底部顯示『已完成 X / 總共 Y』的進度條」

「加入深色模式切換按鈕」

每一次要求，AI都會自動修改程式碼。你只需要按「接受」或「拒絕」。這就像你有一個24小時待命的資深工程師助手，而且它不會嫌你煩。

我個人最常用的技巧是：先讓AI寫出「能動」的版本，然後再逐步要求「優化」。不要一開始就要求完美，這樣反而會讓AI生成過於複雜的程式碼，容易出錯。

第四步：處理錯誤 — AI是你的除錯夥伴

寫程式一定會遇到錯誤（Bug）。傳統方式是你一個字一個字檢查，花好幾個小時。Vibe Coding的方式是：把錯誤訊息直接貼給AI。

假設你執行時出現這個錯誤：

Uncaught TypeError: Cannot read properties of undefined (reading 'length')

你只需要在Cursor的對話框輸入：

「我的程式出現這個錯誤：『貼上錯誤訊息』。請幫我找出問題並修正。」

AI會分析錯誤原因，然後直接修改對應的程式碼。這比你自己Google錯誤訊息快10倍。

第五步：部署上線 — 讓全世界看到你的作品

寫完程式後，下一步是讓別人也能使用。Vibe Coding不只是寫程式，還包含部署。

最簡單的方式是使用 Vercel（vercel.com）：

  1. 把Cursor的專案資料夾上傳到GitHub
  2. 登入Vercel，選擇「Import Git Repository」
  3. 點一下Deploy，30秒後你的網頁就有公開網址了

你也可以用 Netlify 或 GitHub Pages，步驟都差不多。AI也能幫你完成部署：

「我要把這個專案部署到Vercel，請教我詳細步驟」

AI會給你一步一步的指引，甚至幫你生成必要的設定檔。

實戰案例：從零到一個完整的記帳App

為了讓你更有感覺，我分享一個我實際做過的案例。我想做一個「家庭記帳App」，可以記錄每天的花費，自動分類（飲食、交通、娛樂等），並顯示每月總支出。

我對AI說：

「幫我做一個記帳App，使用React + Tailwind CSS。功能：

  1. 可以新增一筆記錄，包含日期、金額、類別、備註
  2. 類別有預設選項：飲食、交通、娛樂、住房、其他
  3. 顯示本月總支出
  4. 按類別顯示圓餅圖
  5. 資料存在localStorage
  6. 手機版也要好看（RWD）」

AI花了約10分鐘生成完整的React專案。過程中我要求修改了三次：一次是圓餅圖顏色太醜，一次是新增「月結」功能，一次是加入匯出CSV的功能。

總共花了大約1小時，我得到一個功能完整的記帳App。如果傳統寫法，就算有經驗的開發者也要花一整天。

常見問題

Q: Vibe Coding會不會讓程式碼品質很差？ A: 如果提示詞寫得好，AI生成的程式碼品質通常不錯。但建議你還是要請AI解釋關鍵邏輯，並做基本測試。對於學習者來說，這反而是學到好習慣的機會。

Q: 我完全不會寫程式，能學會Vibe Coding嗎？ A: 可以！Vibe Coding的門檻不是程式能力，而是「描述需求的能力」。你越會把需求說清楚，AI就越能幫你做出好東西。建議先從簡單的靜態網頁開始。

Q: Cursor免費版夠用嗎？ A: 對於學習和個人專案，免費版每天500次請求非常夠用。如果你要做商業專案或大量開發，可以考慮Pro版（每月20美元），有無限請求。

Q: Vibe Coding跟傳統學程式哪個比較好？ A: 兩者不衝突。Vibe Coding是「快速實作」的方法，傳統學程式是「紮實基礎」的方法。建議先用Vibe Coding做出東西，建立成就感，再回頭補基礎知識。這樣學習曲線最平滑。

Q: AI寫的程式碼會不會有安全漏洞？ A: 有可能。對於涉及用戶資料或金流的專案，建議請AI做安全審查，或搭配傳統的程式碼檢查工具。一般個人專案不用太擔心。

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Vibe Coding會不會讓程式碼品質很差？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "如果提示詞寫得好，AI生成的程式碼品質通常不錯。但建議你還是要請AI解釋關鍵邏輯，並做基本測試。對於學習者來說，這反而是學到好習慣的機會。"
      }
    },
    {
      "@type": "Question",
      "name": "我完全不會寫程式，能學會Vibe Coding嗎？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "可以！Vibe Coding的門檻不是程式能力，而是「描述需求的能力」。你越會把需求說清楚，AI就越能幫你做出好東西。建議先從簡單的靜態網頁開始。"
      }
    },
    {
      "@type": "Question",
      "name": "Cursor免費版夠用嗎？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "對於學習和個人專案，免費版每天500次請求非常夠用。如果你要做商業專案或大量開發，可以考慮Pro版（每月20美元），有無限請求。"
      }
    },
    {
      "@type": "Question",
      "name": "Vibe Coding跟傳統學程式哪個比較好？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "兩者不衝突。Vibe Coding是「快速實作」的方法，傳統學程式是「紮實基礎」的方法。建議先用Vibe Coding做出東西，建立成就感，再回頭補基礎知識。這樣學習曲線最平滑。"
      }
    },
    {
      "@type": "Question",
      "name": "AI寫的程式碼會不會有安全漏洞？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "有可能。對於涉及用戶資料或金流的專案，建議請AI做安全審查，或搭配傳統的程式碼檢查工具。一般個人專案不用太擔心。"
      }
    }
  ]
}

延伸閱讀

總結：Vibe Coding不是取代工程師，而是解放工程師

Vibe Coding不會讓工程師失業，它會讓工程師變得更強。那些重複、無聊的程式碼（建立CRUD、寫樣板、設定環境），全部交給AI。工程師可以專注在架構設計、使用者體驗、商業邏輯等真正有價值的事情上。

對於非工程師來說，Vibe Coding打開了一扇門：你不需要花兩年學程式，就能做出第一個產品。這對創業者、產品經理、設計師、甚至學生來說，都是史無前例的機會。

現在就打開Cursor，試試看。不要怕犯錯，AI會幫你修正。記住Vibe Coding的三個原則：

  1. 先做出來，再優化
  2. 把需求說清楚，AI就會做好
  3. 遇到錯誤，直接問AI

你還在等什麼？你的第一個App，可能就在今晚誕生。