怎麼開始 AI Vibe Coding

這篇教你用 AI coding 工具，從一個小問題一路做出可用的微型應用。

這篇給非工程背景的產品人、剛接觸程式的人，以及想帶同事入門的開發者。照著做完，你會拿到一套可重複的流程：選題、下提示、跑起來、修錯、驗證，最後把一個小工具交付出去。

本文的做法參考 Anthropic Docs 與 Claude Code GitHub repo 的實作方式，也能套用到 Gemini 或其他 AI coding 工具。

開始之前

• Anthropic 帳號，或其他支援程式生成的 AI coding 帳號
• API key，若你的工具需要串接
• Node 20+
• Git 2.40+
• VS Code 1.90+ 或同等級編輯器
• 一個能用一句話說完的小問題

Step 1: 選定單一問題

先把題目縮到最小，讓 AI 能一次做出第一版。目標不是做完整產品，而是做一個只解一件事的微型應用。

Problem: Compare two grocery stores' weekly deals so I can pick the cheaper route.

你應該看到一行清楚的問題敘述，裡面有使用者、任務和結果。如果不需要額外背景就能看懂，這個範圍就夠小，可以開始做。

Step 2: 建立專案資料夾

先準備乾淨的工作區，讓 AI 有地方寫程式，你也有地方檢查修改。新建資料夾、初始化 Git，再建立工具偏好的專案骨架。

mkdir vibe-app
cd vibe-app
git init
npm init -y

你應該看到一個新的 Git repository 和一個 package.json。執行 git status 時，只會看到你剛建立的檔案，這代表環境乾淨。

Step 3: 讓 AI 產生第一版

現在要請模型先做可跑的初版，不要追求完美。把功能、輸入和輸出講清楚，並要求它保持簡單，必要時說明假設。

Create a small web app that lets me enter two store names and two weekly deal URLs, then compares the items and highlights the cheaper basket. Use plain JavaScript and a simple HTML UI.

你應該看到生成的檔案、基本介面，以及可以直接執行的程式碼。如果 AI 先給你計畫而不是程式，改成只要它先完成第一個畫面和一個核心函式。

Step 4: 執行並修正第一個錯誤

這一步的目標是把程式跑起來，找到第一個失敗點，再讓 AI 幫你修。這就是 vibe coding 的核心循環：執行、觀察、調整、重跑。回饋越具體，修得越快。

npm install
npm run dev

你應該看到應用在瀏覽器或本機預覽中載入。如果它當掉，把錯誤訊息貼回工具裡，要求只修這一個問題。成功的標準是頁面能開啟，並對測試輸入有反應。

Step 5: 用真實資料驗證

接著要確認它能處理你真的會遇到的輸入。用真實的傳單、真實的排班規則，或真實的清單來測。這一步會把「看起來厲害」變成「真的有用」。

Test case:
- Store A: apples, milk, rice
- Store B: apples, milk, rice
- Expected: show which basket costs less

你應該看到輸出符合預期，或至少暴露出明確缺口。如果結果不穩定，就重寫提示、加上驗證，或把輸入格式簡化到模型能穩定處理為止。

Step 6: 保存、分享、再迭代

最後要把可用版本保存下來，讓後續修改有起點。提交 Git、補一份簡短 README，並記下下一個要加的功能。這樣你就有一條從點子到工具的固定路徑。

git add .
git commit -m "Build first version of micro-app"

你應該看到一個乾淨的 commit，外加一段簡短說明。如果別人能 clone、安裝依賴並成功執行，這個結果就已經可以分享。

常見錯誤

• 第一天就想做完整產品。修法：把範圍縮成一個使用者、一個任務。
• 提示詞太空泛，例如「幫我做得更好」。修法：明確寫出輸入、輸出和邊界情況。
• 跳過真實測試。修法：直接拿你之後要依賴的表單、PDF 或試算表資料來跑。

接下來可以看什麼

當第一個微型應用跑通後，可以再加一個進階能力，例如檔案上傳、資料解析或簡單資料庫，觀察 AI 在每一層的表現差異。那時候，vibe coding 就會從有趣實驗變成可用流程。