從零開始 Vibe Coding
手把手帶你完成第一個 Cursor/Windsurf Vibe Coding 專案
寫給想接觸 VibeCoding 的人
如果你已經嘗試過 Lovable、BoltNew 這些工具，想要更深入與直接的打造自己的 vibe coding 產品，在這裡我會從頭開始教你怎麼使用 Cursor/Windsurf ，讓你快速上手。除此之外，我也會分享給你我三十天連續創作網頁後，整理的快速上手開發模板。
下面是模板的快速介紹，在模板裡我已經幫你安裝完所有最常用的功能，讓你馬上進入開發模式。
DEMO
開始之前先看看網頁效果吧
環境安裝
下載 Cursor/Windsurf
首先安裝這次的主角 Cursor，當然如果你想使用 Windsurf 也可以。對於初次使用來說其實大同小異，本篇教學會以 Cursor 為主。
安裝 nvm
Node.js 是幫助現代網頁在後台處理邏輯的引擎，而 nvm 是用來管理不同版本 Node.js 的工具。如果你想看更詳細的安裝過程可以參考這篇文章。當然也可以直接問 AI 最快。
使用模板：npx template
使用我的模板只需要在 Terminal 輸入：
npx create-kg-payment-template app_folder_name 看到畫面中印出 Next steps 就代表你成功了摟 🎉🎉
安裝 Vercel
接下來最後一件事情了安裝 Vercel，他可以在最後用來幫助我們把做好的網頁程式碼，放置到網路上讓其他人可以透過網址找到我們所完成的網頁。
npm i -g vercel開始 Vibe Coding !!!
在 cursor/windsurf 裡面，打開你剛剛的資料夾 app_folder_name。可以直接點選畫面上的 Open project。或者可以是昨最上面的狀態列找到 File → Open Folder 都可以。
打開之後會看到這樣的畫面，我們可以先簡單分成三個部分
資料區：在這裡大多是針對文件的選擇以及操作，其他細部功能可以先不理會
工作區：被選中的文件程式碼會顯示在這裡
對話區：與 AI 對話的區域
打開 Cursor 後，首先我們要做的就是把網頁在電腦上跑起來，最簡單的方法當然是到對話區直接請 AI 幫助我們。模型建議可以選擇 Claude 4 或 Claude 3.5，我個人最喜歡的兩個模型。
除了模型選擇外，還有一個下拉選單可以選擇模式，剛開始只需先熟悉這兩個模式
Agent：模型會直接嘗試幫忙修改代碼
Ask：用在寫代碼前的規劃，或者詢問他關於代碼內的相關問題，方便你理解程式邏輯。
一般大多數的情況下，我都會直接使用 Agent Mode 進行修改。這裡也一樣選擇 Agent Mode 後，在輸入匡直接告訴 AI：
請幫我把這個專案跑起來 下完指令後，AI 確實幫我把網站跑起來。並且告訴我只要在瀏覽器輸 http://localhost:5173 就可以查看我的應用啦
他還很貼心的告訴你這個專案有哪些功能（好讚，這是我一開始沒料到的）
另一個小技巧，在執行過程中，AI 可能會中斷並詢問你是否可以繼續往下執行，建議把執行改成 Auto-run 就不需要去點選同意，一切讓 AI 自動一直往下執行。真是太棒惹 🎊
一切順利的話，利用你的瀏覽器打開網址就可以順利看到你目前的網頁摟。
功能介紹
🚀 Vercel 部署 - 可以直接幫你部署到網頁上，讓你分享給親朋好友看
給 AI 指令：請幫我上傳到 Vercel
🌐 國際化支援 - 支援英文和繁體中文的國際化功能
🔥 React Hot Toast - 可自訂位置和樣式的通知系統
🌓 主題提供器 - 內建深色模式支援，可偵測系統偏好設定
💫 Framer Motion - 強大的 React 動畫函式庫
🎯 Shadcn/UI - 高品質、無障礙的 React 元件
🖱️ 自訂游標 - 可自訂的游標效果（很可愛，在深色元件上還會變成白色哦！）
開始與 AI 對話
接下來我們就只需要與 AI 對話，來把網頁改成你想要的樣子。這裡根據你的需求與 AI 展開對話吧。這裡提示一些小技巧
先從小範圍開始：先從核心的小功能小範圍開始實驗，不要一次讓他做太多事情。這樣 AI 會表現得更好。
盡可能完整描述錯誤：如果遇到錯誤，把 AI 當成第一次見面的朋友。給他足夠多的資訊與背景他才能理解你的意思。把你想做到的實際場景講的越清楚越好。
如果你能看懂一些程式碼很棒：如果你可以大概看懂程式碼，或者請他告訴你哪些功能在哪裡實現，是怎麼實現的，這樣也可以讓你們溝通更順暢。
我也曾經整理過與 AI 對話的小技巧可以複習：
為什麼我的 AI 比較笨？
在未來與 AI 溝通的技巧，可能更甚於與人類溝通。在可預見的未來中，AI 佔據你工作的比例會越來越高，所以如何讓你的 Prompt 更有效率，甚至會直接與你的工作表現掛勾，這不是危言聳聽，在 AI 時代這已經是正在發生的事實。
結論
破除 AI 焦慮最快的方式就是自己接觸 AI。在你接觸後自然就知道他能做什麼，做不到什麼。能夠讓自己對新事物有一些掌控度，就能夠消除不確定性帶來的焦慮。AI 作為一個下代的創作工具，早點接觸肯定有好處的！