什麼是 Vibe Coding？不會寫程式的人，如何用 AI 做出第一個工具

Vibe Coding 實戰
什麼是 Vibe Coding？不會寫程式的人，如何用 AI 做出第一個工具

「我不會寫程式」——這句話擋住了多少人的工具夢？

2025 年之後，這個門檻正在快速消失。Vibe Coding 指的是：你用自然語言描述想要的東西，AI 負責把程式寫出來。你不需要懂語法，你需要的是把需求講清楚的能力。

這篇文章整理了 Vibe Coding 的心智模型、第一個專案怎麼選、新手最常踩的三個坑，並帶你完整走一輪二十分鐘做出會議成本計算機。適合不會寫程式、想用 AI 做出第一個工具的人閱讀。

Vibe Coding 的心智模型：你是 PM，AI 是工程師

把和 AI 協作開發想成一個兩人團隊：

這個分工解釋了為什麼有些人用 AI 寫程式很順、有些人卡到放棄——差別不在程式能力，而在需求描述能力。「幫我做一個記帳網頁」會得到一個平庸的結果；「幫我做一個記帳網頁：手機優先、只有金額和分類兩個欄位、按下儲存後顯示本月累計」會得到一個接近可用的成品。

不知道怎麼把需求講清楚？背一個萬用句型：「幫我做一個［什麼東西］，給［誰］在［什麼情境］用，要有［二到四個具體功能］，怎樣算完成：［一到三條驗收條件］。」每一格都填得出來，需求就及格了；填不出來的那一格，就是你還沒想清楚的地方——先想，再下指令。這也是 Vibe Coding 最被低估的副作用：它逼你把模糊的願望變成明確的規格，這個能力離開 AI 也值錢。

適合用 Vibe Coding 做什麼？

新手的第一個專案，建議從這三類選：

  1. 單頁小工具——計算機、抽籤器、倒數計時器、報價單產生器
  2. 自動化腳本——批次改檔名、整理資料夾、定時抓資料
  3. 表單與小型網頁——活動報名頁、個人作品集、問卷

共同點：範圍小、一個下午能完成、做完馬上能用。不要第一個專案就挑「會員系統」或「電商平台」——不是 AI 做不到，而是範圍大到你無法驗收。

選題還有一個私心建議：選一個你自己每週都會用到的東西。工具做完有人用（哪怕只有你），你才會想改它、加功能，技能就在這個迭代裡長出來；做一個用不到的範例，練完就忘。

我的經驗：我看過最好的第一個專案，常常是「把你現在用 Excel 硬撐的那件事」做成小工具。

新手最常踩的三個坑

坑一：一次要求太多。
把「做一個完整的 App」拆成「先做出畫面 → 再加上按鈕功能 → 最後存資料」。每一步都看到結果再走下一步，出錯時你才知道是哪一步壞的。

坑二：報錯就放棄。
程式報錯是日常，不是失敗。把錯誤訊息原封不動貼回給 AI，加一句「請修正這個錯誤」，八成的問題就解決了。剩下兩成？請 AI「加上除錯訊息，找出問題在哪」。

坑三：不存版本。
改到一半壞掉、又回不去能動的版本，是新手最大的挫折來源。每次「目前能動」的時候，把整份程式碼另存一份。之後可以再學 Git，但第一天先用最笨的方法保護自己。

完整走一輪：會議成本計算機

光講原則沒感覺，我帶你從零做一個真的工具。題目選「會議成本計算機」——輸入人數、時薪、分鐘數，告訴你這場會議燒掉多少錢。選它的理由：一個畫面、一個計算、做完馬上可以在下次冗長會議裡使用（或表演）。

第一輪：最簡需求。 打開 Claude 或 ChatGPT，輸入：

幫我做一個單檔 HTML 的「會議成本計算機」：輸入人數、平均時薪、會議分鐘數，即時顯示這場會議燒掉多少錢。手機上要好按。

AI 會回給你一整段 HTML 程式碼，通常還附使用說明。你不用看懂內容，只要做一件事：全部複製、存成 meeting.html、用瀏覽器打開。你會看到三個輸入框和一個金額——恭喜，這就是你的第一次 Vibe Coding。

第二輪：驗收，然後挑毛病。 實際在手機上按一遍，我第一版遇到的問題是：點輸入框跳出的是注音鍵盤不是數字鍵盤、金額沒有千分位（48000 跟 4800 一眼分不出來）。把毛病直接講回去：

兩個修改：1) 所有輸入框在手機上要叫出數字鍵盤 2) 金額加千分位，例如 $48,000。

貼回新程式碼、重新存檔、重開網頁，三十秒驗收完。這就是迭代的節奏：一次一兩件事，每輪都看得到變化。

第三輪：加一個「哇」的功能。

加一個「開始會議」按鈕：按下後變成即時計費表，每秒更新「這場會議已燒掉 $X」，數字要大到全會議室都看得見。

存檔重開，現在它是一個會跳動的燒錢計時器了。三輪對話，總共大概二十分鐘。

對照一下進階寫法。如果你一開始就把需求寫成這樣：

幫我做一個單檔 HTML 的「會議成本計算機」：
1) 三個輸入：人數（預設 6）、平均月薪（預設 60000，自動換算成時薪）、會議分鐘數
2) 一個超大的即時金額，千分位顯示
3)「開始會議」按鈕：按下後每秒更新已燒掉的金額
4) 手機優先：數字鍵盤、按鈕至少 48px 高
5) 完成標準：輸入非數字不會壞掉、欄位留空時用預設值

第一版產出就會接近第三輪的成品，連你沒明說的細節（清空輸入的提示、停止按鈕）AI 都常會主動補上。兩種路線都對：新手建議走三輪迭代，因為你會在過程中學會「驗收」這個核心動作；熟了之後，需求寫得越完整，來回越少。

流程總覽

flowchart TD A["第一輪：一句話最簡需求"] --> B["AI 產出整段 HTML"] B --> C["全部複製，存成 meeting.html，瀏覽器打開"] C --> D["第二輪：手機實際按一遍，挑毛病"] D --> E["一次只講一兩個修改"] E --> F["貼回新程式碼，重新存檔驗收"] F --> G{"還有毛病?"} G -->|有| E G -->|沒有| H["第三輪：加一個「哇」的功能"] H --> I["存檔重開，二十分鐘完成第一個工具"]

工具怎麼選：對話型就夠，先別碰編輯器

新手最常問的第二個問題是「我該用哪個工具」。分兩類：

對話型（Claude、ChatGPT 網頁版）：零安裝、貼上需求就能開工，Claude 還能直接在對話裡預覽網頁效果，連存檔都省了。限制是專案一大（多個檔案、要接資料庫）就難管理。

AI 編輯器（Cursor、Claude Code 這類）：AI 直接讀寫你電腦裡的檔案、自己執行測試，適合持續開發的專案。代價是要安裝環境、要理解資料夾結構，對第一週的新手是不必要的門檻。

我的建議很簡單：前三個工具用對話型做，什麼都不用裝；當你開始覺得「每次都要整份複製貼上好麻煩」，那一天再換編輯器——這個煩躁感出現時，你已經不是新手了。

重點：工具永遠可以換，需求描述的能力才是跟著你走的那一個。

新手 FAQ

問：AI 回覆裡的術語我看不懂，需要先去學程式嗎？
答：不用。看不懂的部分直接問它：「用白話解釋你剛剛做了什麼」。你需要看懂的是「工具的行為」（按下去發生什麼），不是程式碼本身——驗收行為，不驗收語法。

問：做出來的東西可以給同事用、甚至商用嗎？
答：單機小工具（像上面的計算機）儘管用。但只要牽涉「別人的資料」——帳號、付款、個資——就超出第一天的範圍了，需要部署和資安的基本功。先用「資料只留在自己電腦」當安全線。

問：免費版額度夠嗎？
答：夠完成這篇的所有練習。會卡的是長對話和大量來回，所以養成好習慣：一個工具一個新對話，做完就結束，不要在同一個對話裡聊三個專案。

問：我照著做，但 AI 給我的程式跟文章說的不一樣？
答：正常，AI 每次產出本來就不同，這不是錯。你要對照的不是程式碼長相，而是驗收結果：功能有沒有動、手機好不好按。長得不一樣但能用，就是成功。

問：程式壞了我也看不懂錯在哪，怎麼辦？
答：瀏覽器按 F12 打開主控台，把紅色的錯誤訊息原封不動貼回給 AI，加一句「請修正」。沒有錯誤訊息就描述行為：「按下按鈕後沒有任何反應」。讓 AI 自己除錯，是 Vibe Coding 最重要的肌肉。

第一天檢核表

小結

下一篇我們會講進階的工作流：怎麼讓 AI 寫出的程式穩定到可以給別人用。

#Vibe Coding#AI 開發#新手入門