Vibe Coding 實戰教學：不會寫 Code 也能做產品？從零打造你的第一個 AI Side Project
☰ 目錄 table-of-contents.md
不會寫 Code，到底能不能用 AI 做出產品？
能，而且比你想像的快。Vibe Coding 是特斯拉前 AI 總監 Andrej Karpathy 提出的概念：你不再逐行拼語法、背函式庫，而是用自然語言描述「想要的感覺與行為」，把實作的髒活交給 AI。本文會用一個具體的小工具（技術文章靈感產生器），帶你從零跑完「定義需求 → 用自然語言生成 → 修 Bug → 迭代功能 → 上線」的完整流程，並告訴你哪些地方仍然需要你的判斷力。
跟我資歷差不多的人，大概都記得以前寫程式的日子：打開空白的 IDE，盯著閃爍的游標，旁邊疊著兩本歐萊禮（O'Reilly）的磚頭書，然後為了漏掉一個分號（;）Debug 到半夜三點。
但現在時代變了。寫程式不再是拼語法、背函式庫，而是你只要負責「感覺（Vibe）」對不對，剩下的交給 AI。這篇文章我不談深奧的演算法，而是手把手帶你做一場 Vibe Coding 實戰：從零到一用 AI 寫出第一個可以上線的 Side Project。不管你是想做個小工具給客戶用，還是想驗證一個創業點子，看完這篇，你的鍵盤可能會開始積灰塵，因為你大多時候只需要按 Tab 鍵就好。
什麼是 Vibe Coding？為什麼現在是 Side Project 的黃金年代？
以前我們說「全端工程師」，是指你會寫後端 PHP、資料庫 MySQL，還得懂前端 Vue.js 或 React。現在的「全端」，是你懂自然語言（Natural Language），並且知道如何「指揮」AI 把這些技術串起來。
Vibe Coding 的核心精神在於：你是指揮家，AI 是樂團。你不需要知道每個音符怎麼吹，你只需要確保整體的節奏（Flow）和感覺（Vibe）是對的。如果 AI 寫出來的按鈕太醜？你不用去查 CSS 的 padding 語法，你只要跟它說：「嘿，這按鈕看起來太小家子氣了，給我一點現代感、圓角大一點、陰影深一點。」然後，BAM！程式碼就好了。
Vibe Coding 和「不寫程式」有什麼不同？
很多人誤會 Vibe Coding 等於「完全不碰程式」。比較精準的說法是：你的工作從「撰寫實作」轉移到「描述意圖、審查結果、決定方向」。程式碼還是存在的，只是產出者換成了 AI；而你的價值，在於判斷它產出的東西對不對、好不好、安不安全。這一點在後面的章節會反覆出現，因為它是整個方法成敗的關鍵。
準備你的 Vibe Coding 軍火庫
要開始這場實戰，我們需要幾樣現代化的武器。別擔心，這裡不需要你安裝龐大的環境配置。
- 核心大腦： Claude 3.5 Sonnet 或 ChatGPT-4o。目前在寫 Code 的邏輯與美感上，Claude 3.5 Sonnet 稍微略勝一籌，它的「Vibe」比較對味。
- 開發工具（IDE）： Cursor。這是目前 Vibe Coding 的神級工具，它是 VS Code 的分叉版本，但內建了強大的 AI。你基本上是在跟編輯器聊天，而不是在寫字。
- 部署平台： Vercel 或 Netlify（如果你做靜態網頁），或者是我們最愛的 WordPress（如果你要做成外掛）。
該選哪一個？一句話判斷
如果你的目標是「快速生出一個能用的單頁工具」，靜態 HTML 搭配 Netlify 或 Vercel 是阻力最低的路；如果你已經有 WordPress 網站、想把工具放進去服務既有用戶，那就走 WordPress 外掛的方向。工具不是越多越好，先選一條最短路徑跑完一次，比起一開始就把架構想得很完整來得重要。
Step 1：定義你的 Vibe（需求發想）
很多工程師（包括以前的我）都會犯一個錯：一上來就開始想資料庫架構。錯！在 Vibe Coding 的世界裡，我們先想「體驗」。
假設我們要解決一個痛點：「我每天早上都要想很久今天要寫什麼技術文章，我想要一個簡單的『靈感產生器』，點一下按鈕，它就結合現在的熱門關鍵字給我三個標題。」
這就是我們的 Side Project。不需要複雜的登入系統，不需要付費牆，就是一個簡單、好用的工具。
為什麼先想「體驗」而不是「架構」？
因為對一個 Side Project 而言，最大的風險不是技術做不出來，而是做出來沒人要用。先把「使用者按下按鈕會看到什麼、得到什麼」講清楚，你就已經定義了最小可行的範圍（MVP）。技術細節（要不要資料庫、要不要登入）反而可以等驗證了需求再補。一個好的需求描述，本身就是給 AI 最好的提示。
Step 2：開始 Vibe Coding（從自然語言到程式碼）
打開你的 Cursor，建立一個新的資料夾。按下 Cmd + K（或 Ctrl + K），這是 Cursor 的魔法鍵。我們直接用中文輸入指令：
幫我寫一個單頁面的 Web App。這是一個「技術文章靈感產生器」。
功能需求：
1. 畫面中間有一個大標題。
2. 下方有一個醒目的按鈕寫著「給我靈感」。
3. 點擊按鈕後，隨機從預設的陣列中（包含 WordPress, AI, Laravel 等主題）組合出三個聳動的標題。
4. 設計風格要極簡、現代，背景使用深色模式，文字要有霓虹感。
5. 請給我完整的 HTML/CSS/JS 代碼，寫在一個 index.html 檔案裡。你沒看錯，我連檔案結構都沒建，直接叫它給我有內容的 index.html。幾秒鐘後，AI 就會生成一串程式碼。如果是以前，我得先去 Google「CSS Neon Effect code snippet」，現在 AI 直接幫我處理好了。
讓提示更好用的四個原則
上面那段指令之所以好用，不是因為運氣，而是因為它符合幾個通用的提示原則。下次你卡住、AI 給的東西總是不對勁時，回頭檢查這四點：
- 講清楚「角色與產物」：「幫我寫一個單頁面的 Web App」「寫在一個 index.html 檔案裡」——直接指定最終交付的形式，AI 就不會把程式碼拆成一堆檔案讓你不知如何拼起來。
- 用編號列出功能：把需求拆成可逐項檢查的清單，比寫成一長段散文更不容易遺漏，你驗收時也能一條一條對。
- 明確描述風格：「極簡、深色模式、霓虹感」這種形容詞，正是 Vibe Coding 的本體——你給的是感覺，AI 翻譯成具體的 CSS。
- 限制範圍：沒有要登入、沒有要付費牆，就不要寫進去。範圍越窄，AI 越不容易自作主張加上你不需要的東西。
Eric 的小囉嗦：不要全信 AI，要有「品味」
生成的結果可能第一次只有 80 分。這時候就是 Vibe Coding 的精髓了。你不是去改程式碼，你是去「調整 Vibe」。
比如說，按鈕的回饋感不夠。你再次按下 Cmd + K，選取那段按鈕的程式碼，輸入：
這個按鈕點擊的時候沒有「回饋感」。
幫我加上一個點擊時縮小的動畫，還有點擊後的音效（如果有免費音效連結的話），
另外，生成的標題請用打字機效果逐字顯示，比較有科技感。這就是 Vibe Coding。你在調整的是「感覺」，而不是 transform: scale(0.95) 這種語法。
關鍵心法：一次只調一件事。如果你同時要求「改顏色、加動畫、換版面、修 Bug」，AI 很容易顧此失彼，你也分不清是哪個改動讓畫面壞掉。小步快跑、每次只調整一個 Vibe，是迭代最穩的節奏。
Step 3：遇到 Bug？用 Vibe 解決 Bug
不管是誰寫的 Code，一定會有 Bug。在 Vibe Coding 中，我們不叫它 Debug，我們叫它「甩鍋」。
如果瀏覽器主控台（Console）噴了一堆紅字錯誤，千萬不要自己去讀那些錯誤訊息（好吧，資深工程師還是會瞄一眼）。你只需要把錯誤訊息複製下來，貼回 Cursor 的對話框（Chat 模式，通常是 Cmd + L）：
我點了按鈕沒反應，Console 顯示這個錯誤：
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
幫我修好它，並告訴我為什麼會這樣（簡單解釋就好，不要太囉唆）。AI 會告訴你，喔，可能是 JS 載入的時間點早於 DOM 渲染的時間點。它會自動幫你把 <script> 移到 <body> 最後面，或是加上 DOMContentLoaded 事件。
修 Bug 時，多做這一步
把錯誤訊息丟給 AI 之前，順手附上「你剛剛改了什麼」會大幅提高一次修好的機率。AI 看不到你瀏覽器當下的完整狀態，它只看得到你給它的文字。所以一個好的修 Bug 提示通常包含三件事：我做了什麼操作、預期會發生什麼、實際發生了什麼（含錯誤訊息）。這其實就是工程師之間回報 Bug 的標準格式，只是現在你的對象是 AI。
Step 4：功能迭代與上線
基本的靈感產生器完成了，但這只是一個玩具。要把它變成一個「Side Project」，我們需要一點「商業價值」或「實用性」。
我們繼續 Vibe：
現在功能很棒。我想加入一個「複製」按鈕在每個產生的標題旁邊，方便使用者複製。
另外，幫我把這些預設的靈感關鍵字，改成可以讓使用者自己輸入的 Input 欄位，
這樣他們可以自訂要產生的主題。大約經過 10 分鐘的來回對話，你已經從一個靜態頁面，變成了一個互動式的工具。最後，我們要上線。
如果你是用靜態 HTML，直接把檔案拖進 Netlify Drop，三秒鐘後，你就獲得了一個 https://your-project.netlify.app 的網址。恭喜你，你的第一個 Vibe Coding 專案上線了！
上線前，這幾件事 AI 不會主動提醒你
AI 很擅長把功能做出來，但它通常只回答你「問的問題」，不會替你想「沒問到的風險」。上線前，請自己把這份清單跑一遍：
- 金鑰不要寫在前端：如果你的工具會串接任何需要 API 金鑰的服務，純前端的靜態頁面會把金鑰直接暴露給所有訪客。這類情境就不適合純前端，需要一層後端來代理請求。
- 使用者輸入要當成不可信：只要有 Input 欄位，就要假設使用者可能輸入惡意內容。把使用者輸入直接塞進畫面前，要確認有做適當的處理。
- 手機上打得開嗎：AI 預設常以桌機畫面為主，記得在手機尺寸下實際看一次。
- 它真的照你要的做了嗎：回頭對照 Step 1 的需求清單，逐條確認。AI 偶爾會「自以為」幫你改得更好，結果偏離了你的本意。
結語：從 Coder 變成 Creator
Vibe Coding 並不是說工程師不需要學基礎了。相反地，如果你懂基礎，你的 Vibe 會更準確，你知道 AI 什麼時候在胡說八道。但對於新手或非技術背景的人來說，這道牆被打破了。
我們不再是被語法困住的碼農（Coder），我們是創造產品的創作者（Creator）。這次的 Vibe Coding 實戰：從零到一用 AI 寫出第一個可以上線的 Side Project 只是個開始。下次，試著用同樣的邏輯，去寫一個 WordPress 外掛，或是串接 LINE Bot API，你會發現，限制你想像力的，不再是技術，而是你的膽量。
好啦，我要去喝杯咖啡了，剛才這段程式碼讓 Claude 幫我重構了一下，現在看起來順眼多了。
你也想用 AI 加速企業的開發流程嗎？
浪花科技專注於將最前沿的 AI 技術導入企業系統。無論是 Vibe Coding 工作流導入，還是客製化系統開發，我們都能提供協助。立即聯繫浪花科技 Eric。
延伸閱讀
常見問題
什麼是 Vibe Coding？不會寫程式也能做出產品嗎？
Vibe Coding 需要準備哪些工具？
怎麼寫出讓 AI 一次到位的提示（Prompt）？
遇到 Bug 時，怎麼把錯誤丟給 AI 才容易修好？
用 AI 迭代功能時有什麼節奏建議？
訂閱免費電子報
把 AI 自動化、企業系統設計與 WordPress / Laravel 開發的真實案例和可直接照做的技巧，整理成電子報寄給你。只寄精選內容、不灌垃圾信，一鍵就能退訂。