Vibe Coding 入門：把第一個小工具做出來，也學會檢查它

哈囉大家！最近期中考剛結束，終於有空來更新部落格了。不知道大家有沒有過這種崩潰經驗：為了一份網頁設計作業或學期專題，盯著螢幕三個小時，最後發現程式跑不動只是因為少打了一個英文分號？我大一的時候真的超常因為這樣在圖書館懷疑人生！

但今天要來跟大家分享一個最近在科技圈超酷、而且對我們這種偶爾想偷懶（或是非資工本科系）的學生超級友善的新趨勢——Vibe Coding！

簡單來說，Vibe Coding 就像是你變成了程式設計的「藝術總監」。你不需要親自下去寫每一行密密麻麻的語法，你只需要用人類的語言，告訴 AI 你想要的「感覺（Vibe）」、功能和畫面，AI 就會直接幫你把程式碼生出來！這真的不是科幻電影，我上週就是靠這個方法，配著一杯冰拿鐵，一個下午就做出了我專屬的番茄鐘讀書 App。

廢話不多說，馬上來教大家怎麼開始你的第一次 Vibe Coding！

第一步：挑選你的 AI 專屬助理

要進入 Vibe Coding 的世界，你得先有一個聽得懂你說話的神隊友。現在市面上有很多很厲害的工具，如果剛開始學習，我超級推薦直接開一個新分頁使用 Gemini 或是 ChatGPT。如果你已經有一點點基礎，知道怎麼開編輯器，也可以研究 Cursor 這類整合編輯器的工具。它就像是內建了超強 AI 的魔法筆記本，你只要在裡面打字許願，它能協助產生與修改程式，但仍需你檢查結果。

第二步：精準傳達你的「Vibe」

這一步是 Vibe Coding 的靈魂！既然我們不自己寫程式，那我們「下指令（Prompt）」的功力就要點滿。千萬不要只說「幫我寫一個記帳 App」，這樣 AI 會不知道你到底要什麼風格，做出來的東西可能會超像上個世紀的陽春軟體。

試著把你腦袋裡的畫面具體描繪出來，當作在跟設計師溝通一樣。例如你可以這樣寫：

「我要做一個極簡風格的網頁版待辦事項清單。背景顏色要是柔和的奶油白，字體要圓潤可愛。功能上，我需要可以新增任務，任務完成後可以打勾，打勾的時候要有小星星飛出來的動畫特效。請用 HTML、CSS 和 JavaScript 幫我寫出來。」

看到了嗎？把你想要的顏色、動畫感覺、甚至排版位置都講清楚，AI 抓到你的 Vibe，寫出來的東西就會超級貼近你的想像。

第三步：輕鬆進行 Vibe Check（測試與微調）

AI 把程式碼生出來後，依檔案類型存入編輯器；若是單一 HTML 範例，再用瀏覽器開啟檔案檢查。第一次通常不會百分之百完美，可能按鈕太大了，或是顏色跟你想的奶油白有點落差。可以請 AI 說明程式，自己小幅修改，或描述可重現的問題再請它協助；不要只憑畫面好看就認定程式正確。

你只需要繼續跟 AI 對話，進行 Vibe Check！例如跟它說：「剛剛那個版本很棒，但打勾的動畫太快了，可以調慢一點嗎？還有按鈕的顏色幫我換成莫蘭迪粉色。」AI 就會馬上幫你修改好。這個過程其實超級療癒，看著網頁一步步變成自己理想中的樣子，真的會很有成就感！

從我開始嘗試 Vibe Coding 之後，寫程式對我來說再也不是一件看到就想逃避的痛苦作業，反而變成像是捏黏土或是畫畫一樣的創作過程。不管你是想要做一個可愛的個人作品集網頁，還是想要寫一個幫自己自動整理報告資料的小工具，都可以用這個方法試試看。

把枯燥的語法交給 AI，把最核心的創意和美感留給自己，這才是我們這個世代的魔法呀！

交出作品前，做一次功能檢查

• 新增空白任務時，畫面有沒有清楚回饋？
• 重新整理後，清單應該保留還是清空？先決定需求，再測一次。
• 用手機和鍵盤能不能操作新增、完成與刪除？
• 每次修改前保留版本；不了解的命令先請工具解釋，不直接貼進終端機。
• 範例先用假資料，不在前端放 API 金鑰、密碼或同學個資。

把「感覺像完成」換成一份能逐項確認的清單，下一次修改就有比較可靠的起點。

整理：MOOSSin。內容有錯誤或需要補充時，請附上文章網址與問題段落，寄信聯絡。