Vibe Coding 教學：2025 從入門到實戰完整指南（附範例）

本文為 2025 Vibe Coding 完整指南系列文章之一。

想學 Vibe Coding 但不知道從哪開始？這篇教學會帶你從零開始，一步一步學會用 AI 寫出你的第一個專案。

不需要程式基礎，只需要跟著做。每個步驟都有解釋，每個範例都能實際執行。

課前準備

開始之前，確認你有這些東西準備好了。

需要具備什麼知識？

完全不會程式：可以。這份教學假設你沒有任何程式基礎。

會一點程式：更好。你會學得更快，也能做更多驗證。

需要會的：
- 基本電腦操作
- 打字（中英文都可以）
- 願意嘗試和修正

需要準備什麼工具？

工具	用途	取得方式
Cursor	AI 程式編輯器	cursor.com 下載
Claude 或 GPT 帳號	AI 對話	免費註冊即可
瀏覽器	看成果	Chrome、Edge 都可以
終端機	執行指令	電腦內建

這份教學以 Cursor 為主要工具。如果你還沒決定用什麼工具，可以先看 Vibe Coding 工具推薦。

第一章：Vibe Coding 基礎概念

在開始寫程式之前，先理解 Vibe Coding 的核心觀念。

vibe-coding-conversation-concept-diagram

什麼是有效的 Prompt？

Prompt 就是你給 AI 的指令。好的 Prompt 讓 AI 產出你要的東西，壞的 Prompt 讓你來回修改很多次。

好 Prompt 的特徵：

要素	說明	範例
明確	說清楚要什麼	✅ 「用 React 建立一個待辦事項列表」 ❌ 「幫我寫個網頁」
具體	給細節	✅ 「可以新增、刪除、標記完成」 ❌ 「功能要齊全」
有脈絡	說明背景	✅ 「這是給個人使用的，不需要登入功能」
有限制	設定邊界	✅ 「不要用任何外部套件」

Prompt 公式：

我想要 [功能描述]
使用 [技術/工具]
需要包含 [具體功能 1、2、3]
不需要 [排除項目]
[其他限制或偏好]

如何與 AI 有效溝通？

Vibe Coding 本質是對話。對話技巧很重要。

迭代式對話：

不要期待一次就完美。正常的對話流程是：

給初始需求 → AI 產出 v1
看結果，指出問題 → AI 修正
測試，發現新問題 → 繼續調整
滿意 → 完成

常用對話模式：

修正：「這個功能不太對，應該是...而不是...」
擴展：「在這基礎上，再加上...功能」
簡化：「這太複雜了，把...部分拿掉」
解釋：「這段程式碼在做什麼？為什麼這樣寫？」

迭代式開發思維

Vibe Coding 不是「一次寫完」，是「慢慢堆疊」。

正確心態：

先有東西再優化
小步快跑，每步都確認
出問題很正常，不用緊張
多嘗試不同問法

錯誤心態：

期待 AI 一次給完美答案
複製貼上不檢查
一次寫太多功能
不願意來回調整

第二章：環境設定

現在來設定你的開發環境。

選擇適合的工具

如果你是新手，推薦從 Cursor 開始：

Cursor：AI-first 設計，對 Vibe Coding 最友善
備選：Windsurf（類似 Cursor）、Replit（線上使用，不用安裝）

Cursor 安裝與設定

Step 1：下載 Cursor

前往 cursor.com
點擊 Download 按鈕
選擇你的作業系統（Mac / Windows / Linux）
下載完成後安裝

Step 2：初次設定

開啟 Cursor
登入或建立帳號（可用 Google/GitHub 登入）
選擇主題（Dark/Light）
完成導覽

Step 3：熟悉介面

Cursor 主要區域：

區域	功能
左側面板	檔案管理
中央區域	程式碼編輯
右側 Chat	和 AI 對話
下方終端機	執行指令

快捷鍵：

Cmd/Ctrl + K：開啟 AI 內嵌編輯
Cmd/Ctrl + L：開啟 AI Chat
Cmd/Ctrl + I：開啟 Composer（多檔案編輯）

API Key 設定

Cursor 內建有 AI 額度，但額度用完或想用特定模型需要設定 API Key。

取得 Claude API Key：
1. 前往 console.anthropic.com
2. 註冊帳號
3. 建立 API Key
4. 複製 Key

取得 OpenAI API Key：
1. 前往 platform.openai.com
2. 註冊帳號
3. 建立 API Key
4. 複製 Key

在 Cursor 設定 API Key：
1. 開啟 Cursor Settings
2. 找到 Models 設定
3. 貼上你的 API Key

環境設定卡關？可以聯繫我們協助處理。

第三章：第一個 Vibe Coding 專案

設定好了，來寫你的第一個專案：待辦事項 App。

專案：建立待辦事項 App

我們要做一個能：
- 新增待辦事項
- 標記完成
- 刪除項目
- 保存資料（重新整理不會消失）

Step 1：建立專案

在 Cursor 開啟終端機（Cmd/Ctrl + ~），輸入：

mkdir todo-app
cd todo-app

這會建立一個叫 todo-app 的資料夾並進入。

Step 2：和 AI 對話，產出程式碼

開啟 Cursor 的 AI Chat（Cmd/Ctrl + L），輸入這段 Prompt：

我想建立一個簡單的待辦事項網頁 App。

需求：
- 純 HTML + CSS + JavaScript，不要用任何框架
- 可以新增待辦事項（輸入框 + 新增按鈕）
- 每個待辦事項可以標記完成（點擊會劃掉）
- 每個待辦事項可以刪除
- 使用 localStorage 保存，重新整理不會消失
- 介面要簡潔好看

請給我完整的程式碼，包含 HTML、CSS、JavaScript。

AI 會產出完整的程式碼。你會得到類似這樣的檔案：

index.html：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待辦事項 App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>待辦事項</h1>
        <div class="input-section">
            <input type="text" id="todoInput" placeholder="輸入新的待辦事項...">
            <button id="addBtn">新增</button>
        </div>
        <ul id="todoList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 3：建立檔案

在 Cursor 左側面板，新增三個檔案：
- index.html
- style.css
- script.js

把 AI 產出的程式碼分別貼進對應的檔案。

Step 4：測試和調整

在終端機輸入，啟動本地伺服器：

npx serve

或直接在 Finder/檔案總管雙擊 index.html 開啟。

測試項目：

[ ] 可以輸入待辦事項
[ ] 按新增按鈕有新增
[ ] 按 Enter 鍵也有新增
[ ] 點擊項目可以標記完成
[ ] 點擊刪除可以刪除
[ ] 重新整理資料還在

如果有問題，回到 AI Chat 描述問題：

測試發現一個問題：按 Enter 鍵沒有反應，只有按按鈕才能新增。
請幫我加上 Enter 鍵的支援。

完整程式碼範例

如果你想要完整可執行的程式碼，這是最終版本：

style.css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f5f5f5;
    min-height: 100vh;
    padding: 40px 20px;
}

.container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}

.input-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#todoInput {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

#addBtn {
    padding: 12px 24px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

#addBtn:hover {
    background: #45a049;
}

#todoList {
    list-style: none;
}

.todo-item {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.todo-item.completed span {
    text-decoration: line-through;
    color: #999;
}

.todo-item span {
    flex: 1;
    cursor: pointer;
}

.delete-btn {
    background: #ff4444;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
}

script.js：

// 取得 DOM 元素
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoList = document.getElementById('todoList');

// 從 localStorage 載入資料
let todos = JSON.parse(localStorage.getItem('todos')) || [];

// 渲染待辦事項
function renderTodos() {
    todoList.innerHTML = '';
    todos.forEach((todo, index) => {
        const li = document.createElement('li');
        li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
        li.innerHTML = `
            <span onclick="toggleTodo(${index})">${todo.text}</span>
            <button class="delete-btn" onclick="deleteTodo(${index})">刪除</button>
        `;
        todoList.appendChild(li);
    });
}

// 儲存到 localStorage
function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

// 新增待辦事項
function addTodo() {
    const text = todoInput.value.trim();
    if (text) {
        todos.push({ text, completed: false });
        saveTodos();
        renderTodos();
        todoInput.value = '';
    }
}

// 切換完成狀態
function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
    saveTodos();
    renderTodos();
}

// 刪除待辦事項
function deleteTodo(index) {
    todos.splice(index, 1);
    saveTodos();
    renderTodos();
}

// 事件監聽
addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') addTodo();
});

// 初始渲染
renderTodos();

恭喜！你完成了第一個 Vibe Coding 專案。

第四章：進階技巧

基本功學會了，來看進階技巧。

多輪對話策略

真實專案不會一次 Prompt 就搞定，要學會多輪對話。

技巧一：先大綱再細節

第一輪：先告訴我這個專案應該有哪些主要功能和檔案結構
第二輪：好，先寫 [功能 A] 的部分
第三輪：這個功能沒問題，接著寫 [功能 B]

技巧二：保持對話連貫

不要開新對話，在同一個對話裡繼續：

✅ 「剛剛那個程式碼有個問題...」
❌ 開新對話重新描述整個專案

技巧三：適時總結

對話很長時，幫 AI 總結：

「目前為止我們做了：
1. 基本的 HTML 結構
2. CSS 樣式
3. 新增功能

接下來請幫我加上刪除功能。」

Context 管理

AI 的記憶有限（Context Window），要學會管理。

給必要資訊：

目前的程式碼長這樣：
[貼上相關程式碼]

請在這個基礎上加上 [新功能]

刪除不相關內容：

如果對話太長，開新對話但給足夠背景：

這是一個 React 待辦事項 App。
目前檔案結構：
- App.js（主元件）
- TodoItem.js（項目元件）
- style.css（樣式）

[貼上關鍵程式碼]

請幫我在 TodoItem.js 加上編輯功能。

分段開發法

大功能拆成小步驟，一步一步做。

範例：要做一個有登入功能的部落格

❌ 錯誤做法：「幫我寫一個有登入功能的部落格」

✅ 正確做法：
Step 1：先做靜態的部落格首頁
Step 2：加上文章列表
Step 3：加上單篇文章頁面
Step 4：加上登入 UI
Step 5：加上登入驗證邏輯
Step 6：整合所有功能

每一步都確認能動再往下。

第五章：實戰範例集

學會基礎後，來看更多實戰範例。

four-project-cards-portfolio-bot-api-dashboard

範例一：個人作品集網站

Prompt：

我想建立一個個人作品集網站。

需求：
- 使用 HTML + CSS + JavaScript
- 響應式設計（手機也能看）
- 包含：首頁、關於我、作品展示、聯絡資訊
- 單頁式設計（SPA 感覺，用 anchor 跳轉）
- 風格：簡潔現代

請一次給我完整程式碼。

適合對象：設計師、求職者、自由工作者

範例二：LINE Bot 聊天機器人

Prompt：

我想建立一個 LINE Bot，功能是每日一句名言。

需求：
- 使用 Node.js + Express
- 用戶傳送「名言」時回覆一句隨機名言
- 名言資料先用陣列存
- 給我完整程式碼和 LINE Developers 設定步驟

請一步一步說明。

注意：這個需要部署到 server，可以用 Netlify 或其他平台。

範例三：API 後端服務

Prompt：

我想建立一個簡單的 RESTful API 服務。

需求：
- 使用 Node.js + Express
- 資源：books（書籍）
- CRUD 操作（Create, Read, Update, Delete）
- 資料先存在記憶體（不用資料庫）
- 回傳 JSON 格式

請給我完整程式碼。

學習重點：了解 API 結構、HTTP 方法、JSON 格式

範例四：資料視覺化 Dashboard

Prompt：

我想建立一個簡單的數據 Dashboard。

需求：
- 使用 HTML + CSS + JavaScript
- 使用 Chart.js 畫圖表
- 包含：折線圖（月營收）、圓餅圖（產品分類）、數字卡片（總營收、訂單數）
- 資料用假資料即可
- 風格：商業簡報風

請給我完整程式碼。

適合對象：需要做數據報告的人

第六章：Debug 技巧

程式寫完不會動？這很正常。學會 Debug。

常見錯誤類型

錯誤類型	症狀	常見原因
語法錯誤	紅色底線、Console 報錯	拼字錯誤、少括號
邏輯錯誤	程式能跑但結果不對	條件判斷錯誤
引用錯誤	Cannot read property...	變數不存在或拼錯
非同步錯誤	資料抓到但顯示不出來	Promise/async 處理問題

如何讓 AI 幫你 Debug

Step 1：複製錯誤訊息

打開瀏覽器 Console（F12），複製完整錯誤訊息。

Step 2：描述問題

告訴 AI 三件事：
1. 你想做什麼
2. 實際發生什麼
3. 錯誤訊息

範例：

我的程式碼有問題。

想做的事：點擊按鈕時新增待辦事項
實際情況：點擊後沒有反應
錯誤訊息：Uncaught TypeError: Cannot read property 'push' of undefined

相關程式碼：
[貼上程式碼]

請幫我找出問題。

Step 3：測試 AI 給的修正

不要盲目複製貼上。問 AI：
- 「這個修正做了什麼改變？」
- 「為什麼之前會錯？」

理解問題才能避免下次再犯。

Debug 解不開？讓工程師直接幫你處理。

Vibe Coding 101 課程推薦

想要更系統性的學習？推薦這個免費課程：

Vibe Coding 101 with Replit

講師：由 Andrew Ng（DeepLearning.AI 創辦人）推薦
平台：Replit
價格：免費
內容：從零開始的 Vibe Coding 入門
特色：線上環境，不用安裝任何東西

更多學習資源可以看 Vibe Coding 學習資源總整理。

FAQ 常見問題

完全不會程式可以學 Vibe Coding 嗎？

可以，這份教學就是假設你沒有程式基礎。但建議順便學一點程式概念，會幫助你理解 AI 在寫什麼，遇到問題更容易解決。

學 Vibe Coding 要多久才能做出東西？

如果跟著這份教學，1-2 小時就能做出第一個待辦事項 App。更複雜的專案（像作品集網站）可能需要 1-2 天。持續練習 1-2 週，大部分簡單專案都能自己做。

Vibe Coding 101 with Replit 課程在哪裡上？

Replit 官網上可以找到，搜尋「Vibe Coding 101」。課程完全線上，使用 Replit 的線上編輯器，不需要在電腦上安裝任何東西。

為什麼我的 Prompt 效果不好？

常見原因：太模糊（「幫我寫個網站」）、沒給限制（沒說用什麼技術）、一次問太多功能。試試用本文的 Prompt 公式重新寫一次。

AI 產生的程式碼跑不動怎麼辦？

先檢查 Console 有沒有錯誤訊息。有的話複製給 AI，描述問題。沒有錯誤訊息但功能不對，描述「預期行為」和「實際行為」的差異，讓 AI 幫你找問題。如果還是解不開，可能是更深層的問題，考慮找人協助。

想避免翻車，可以先看看 Vibe Coding 翻車實錄學習常見的坑。

Vibe Coding 入門行動清單與下一步建議

學 Vibe Coding 最好的方法就是動手做。

今天就做這件事：

下載安裝 Cursor
用這篇教學的 Prompt 做出待辦事項 App
嘗試修改、加功能

不要只是「看」這篇教學，要實際「做」。卡住了沒關係，回來看教學，或問 AI。

做出第一個專案後，你會有信心做更多。

想看完整指南？回到 2025 Vibe Coding 完整指南。

Vibe Coding 卡關了？

AI 幫你寫代碼，我們幫你上線。從 Debug 到部署，一次搞定。

解決我的問題

VibeFix 是專門幫助開發者解決 Vibe Coding 問題的服務。AI 幫你寫代碼，我們幫你上線。

教學跟著做還是卡關？讓 VibeFix 幫你

Vibe Coding 教學：2025 從入門到實戰完整指南（附範例）

課前準備

需要具備什麼知識？

需要準備什麼工具？

第一章：Vibe Coding 基礎概念

什麼是有效的 Prompt？

如何與 AI 有效溝通？

迭代式開發思維

第二章：環境設定

選擇適合的工具

Cursor 安裝與設定

API Key 設定

第三章：第一個 Vibe Coding 專案

專案：建立待辦事項 App

Step 1：建立專案

Step 2：和 AI 對話，產出程式碼

Step 3：建立檔案

Step 4：測試和調整

完整程式碼範例

第四章：進階技巧

多輪對話策略

Context 管理

分段開發法

第五章：實戰範例集

範例一：個人作品集網站

範例二：LINE Bot 聊天機器人

範例三：API 後端服務

範例四：資料視覺化 Dashboard

第六章：Debug 技巧

常見錯誤類型

如何讓 AI 幫你 Debug

Vibe Coding 101 課程推薦

FAQ 常見問題

完全不會程式可以學 Vibe Coding 嗎？

學 Vibe Coding 要多久才能做出東西？

Vibe Coding 101 with Replit 課程在哪裡上？

為什麼我的 Prompt 效果不好？

AI 產生的程式碼跑不動怎麼辦？

Vibe Coding 入門行動清單與下一步建議

Vibe Coding 卡關了？

VibeFix 團隊

這篇文章有幫到你嗎？