最近這一陣子，我開始嘗試很潮的 Vibe Coding。
如果你沒聽過這個詞，我自己會這樣定義：
VibeCoding 就是一種新的 Web Coding 模式，用人類的語言去和 AI 溝通，請它幫你完成一個產品或網站的設計與開發。
你不一定要有程式背景，只要清楚表達你想要什麼樣的功能、畫面、邏輯，AI 就能幫你做出來。包括點擊跳轉頁面、產生圖片、播放錄音、或是頁面互動等功能，現在都可以透過這種方式完成。
我本身是軟體工程師，老實說，一開始看到所謂「Vide Coding」的概念時，真的有點不能接受。
什麼都用 prompt 寫？用對話就能開發一整個網站？對我來說，一開始是有點太抽象，甚至有點「不工程師」的感覺。
但我後來發現，AI 現在的寫程式能力，真的進步到不容忽視。
為什麼我想試試 Vibe Coding？
前陣子刷 LeetCode 有點刷到疲乏，我就想說，想讓大腦休息一下，來做一些比較有趣、好玩的 side project。
所以就決定來嘗試這種 VibeCoding 的方式，看看能不能用 prompt 完成一個真的能運作的 App 或網站。
我用的工具：Cursor + ChatGPT + Loveable
1. Cursor：讓 AI 幫你寫程式的工具
我付費訂閱了 Cursor（每月 $20 美金），它的體驗真的是讓我驚豔。
你只要把主題、功能、分頁寫清楚，它就能幫你生出一個八成完成度的網站。
畫面設計、邏輯都能跑，像是 CSS 的排版、顏色、文字大小、間距等等，只要講清楚需求，它都能幫你處理好。
它甚至支援多模態，也就是你可以丟畫面給它，它會讀懂並協助你改版、優化。
我自己的使用流程是：
先用 ChatGPT 跟我一起釐清產品的整體架構
把整理好的邏輯跟畫面結構，交給 Cursor 實作
這樣下指令會更清楚，也比較不容易出錯
2. Loveable：畫面設計最強的 AI 協作工具
除了 Cursor，我最近也用到一個我非常推薦的工具：Loveable
Loveable 是目前我用過畫面設計感最強、速度最快的工具。
你只要輸入主題＋風格，它會幫你拉出整體畫面，甚至主動規劃你沒想到的細節。
像我說要做一個工程師作品集，它就會自動幫我安排 skillset 條列、個人簡介、作品連結、聯絡方式等等，不只畫得漂亮，思考邏輯也很到位。
最厲害的是：
它自己會 debug 錯誤
基本上用按鈕就能操作
但缺點是：目前中文操作容易出 bug，建議用英文輸入會比較穩定
我對 Vibe Coding 的小建議
其實不管用什麼工具，重點是你在一開始就要先釐清一件事：
你到底想要做一個什麼樣的產品？
我自己的心得是這樣：
如果你只是想做個 作品集或資訊網站：
AI 幾乎可以完全幫你做好，只要你描述清楚結構、風格、想放什麼內容。
如果你要做的是 有互動、有邏輯功能的產品：
那你要更細緻地把行為描述清楚，例如點了按鈕要幹嘛、要串什麼 API、要不要有錄音等等。
建議流程是這樣：
先用 ChatGPT 整理邏輯與分頁結構
再交給 Cursor 或 Loveable 實作與微調
最後回頭由你（工程師或設計者）審核與補強
優點與限制（初步心得）
優點
大幅加快開發速度
畫面與功能邏輯一次到位
對非工程師也很友善
可彈性調整、實驗不同設計風格
限制
prompt 若下得不夠清楚，AI 很容易跑錯方向
中文介面偶爾會有錯誤或重複送出
複雜功能仍需自己補上邏輯（例如帳號系統、資料庫串接）
工程師的角色正在轉變
我現在真的覺得，工程師未來的角色會越來越像「總編輯」。
你不是每一行 code 都自己寫，而是當個 reviewer，看 AI 幫你寫的 code 邏輯對不對，功能合不合理，要不要調整或優化。
你要懂得怎麼下指令，怎麼審稿，怎麼定義清楚的產品需求。
這反而比自己慢慢從零開始寫來得更有效率，也更適合現在的節奏。
如果你完全不會寫程式，還可以玩 VibeCoding 嗎？
其實可以，只是建議從比較簡單、靜態網站開始下手。
像是作品集網站、個人介紹頁，這些不需要太多互動功能，也不太用到資料庫，會是很好的入門範例。
你只要能講清楚你想呈現的內容，像是技能、作品、聯絡方式，AI 工具就能幫你生成出一個完整的網站。
另外，我也看到有些人會用 AI 工具幫自己產出：
整理 Excel 資料的自動化工具
做一個同步資訊到 Line Bot 的小服務
這些應用其實都算是 Web Coding 的延伸，而且比你想像中簡單很多。只要願意嘗試，真的會打開一個完全不同的開發體驗。
後起新秀，2025/06中才剛推出產品的Manus
只要輸入短短幾行字，他會幫你
➀規劃所有流程 （包含商業分析、競品分析）
➁網路研究你說的風格怎麼定義 （不用再多次來回）
➂ 自動幫你分頁設計
➃ 小視窗讓你看他目前的思考進度
➄ 隨時點擊它的思考內容 ➅ 幫你做測試、部署 （不用特別說）
這個真的是實現No-Code了，因為基本上他就在自己的本機功能，會給你一個小視窗偷看，這是我快速記錄的一個過程，大家可以玩玩看！
Manus推薦網址（裡面是邀請連結，直接登入就能使用囉，目前還會送你500點，可以免費做2-3個網站）
https://manus.im/invitation/VKGQSS4BFDOZ
重點會直接幫你放到網路上，有免費網址（很誇張）