Cursor 是最近非常紅的一套 AI 開發工具，他主打自動完成、口語化指令與整體專案代理能力，無論是初學者還是進階工程師，都能明顯的提昇開發效率。

同時 Cursor AI 也是一套 Vibe Coding 工具。Vibe Coding 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的全新的程式設計方式，開發者不自行編寫程式碼，而是透過自然語言向 AI 描述需求，由AI自動生成程式碼。其核心理念是 「順著感覺走（embracing the vibes），深度沉浸在創作中」的寫程式體驗。

今天，夏格飛要來介紹 Cursor AI 的使用方式，以及如何用 Cursor 進行完全不需要動手寫程式的 Vibe Coding 教學，同時頁介紹一些 Cursor 的基礎操作方式，讓還沒接觸的人可以快速上手。

本文章目次

• 本次 Vibe Coding 目標
• 下載並安裝 Cursor
• 無痛開始 Coding
• 開始建立基礎程式
• 如果指令錯誤要重來怎麼辦？
• 一些常用操作
  • Accept 變動
  • 要求 Cursor 執行修改
• 進一步修改版面
• 進階版面修改
• 除錯
• 發佈到網路上
• 其他更多操作技巧
  • 自動完成
  • 行內編輯程式碼
• Vibe Coding 的觀念與進行方式
• Vibe Coding 的限制
  • AI 寫程式容易潛藏錯誤
  • AI 沒有資安意識，容易有漏洞
  • 維護性差，難以共用程式碼
• 結論

本次 Vibe Coding 目標

本文章夏格飛只用 Cursor + 口語化指令進行程式開發，不親手調整程式碼。預計製作一個簡單的卡路里計算器，可以藉由輸入身高、年齡與運動頻率等問題，計算出對應的基礎熱量消耗（BMR）與每日總熱量（TDEE）。下圖是最終成果。

下載並安裝 Cursor

首先前往 Cursor 官網下載頁面，下載對應您的作業系統的版本：

Downloads | Cursor - The AI Code Editor

Download Cursor

www.cursor.com

下載後點擊安裝，首次啟動會要求您註冊或登入帳號，點擊後會打開網站，再進行註冊就好。要方便的話就直接用 Google 登入吧。

登入完成後，會從網站導向回到程式這邊，並問您要不要匯入 VS Code 的設定與外掛。如我您原本就是工程師，可以進行匯入。

下一步會給您一些操作提示，可以先把它記下來：

• 打開 Agent => Command or Ctrl + I

• 自動完成或下個動作 => Tab

• 編輯某段程式碼 => Command or Ctrl + K

再下一步，選擇您的慣用語言（不是程式語言），可以選繁體中文，AI 會用繁中與您對話。Terminal 啟動器可以先安裝起來，點擊 Install，這樣之後就能用 cursor 指令打開編輯器了。

中間還會有一些像是條款同意的畫面就不一一贅述，完成後會來到編輯器畫面。右邊是與 AI 對話並請 AI 執行任務的視窗。左邊可以選擇 Open Project，也可以直接開始。

無痛開始 Coding

如果你想直接開始，我們從右邊對話窗立即出發吧。

首先，這次的示範，我打算做一個簡單的卡路里計算機，可以計算每個人一天的基礎熱量(BMR)與總熱量(TDEE)數值。

因此，我請 Cursor 幫我開始一個專案，妳可以直接說：

幫我開始一個專案

Cursor 會問你想要做什麼？用哪種程式語言？什麼工具之類的問題，一旦確定後，就會產生指令問你要不要執行，點擊 Run 就會開始。

如果你想要精確一點，也可以將需求寫清楚，例如：

建立一個新 vue 專案，我想要寫熱量計算機，專案名稱叫 calories-calc

這樣 Cursor 可以精確的幫你產生要做的指令，按下 Run 給他跑就好。

要注意的是，最後如果 Cursor 問你要不要執行，妳選擇了執行，是不會成功的。因為我們其實還沒有把那個專案打開。妳可以問 Cursor 如何打開專案，他會教你：

現在，讓我們打開專案進行後續步驟吧。

開始建立基礎程式

我們用 Cursor 打開剛剛的專案目錄，左邊會是目錄內的檔案，右邊依然是對話視窗。

現在，讓我們下一個清楚的指令，讓 Cursor 開工吧：

這個專案希望要能藉由輸入某些個人資訊，計算一個人的 TDEE 與 BMR，請幫我依照常見的作法，建立 vue 程式架構

如果指令下的正確，妳會看到 Cursor 開始盡心盡責的編碼，下面是 GIF 錄影片段

執行完成後，他可能會請妳執行一些指令來安裝依賴或是開始執行專案，妳可以按下 Run 讓他執行

執行後，以 Vue/Vite 來說，會出現 localhost:5173 這樣的網址，把它輸入到瀏覽器打開就可以了，或是 Command or Ctrl + 點擊也可以打開：

我們可以看到一個計算器出現，並且可以輸入數值然後計算熱量消耗率，這樣就算完成很基礎的第一步了。

如果指令錯誤要重來怎麼辦？

有時候，因為指令下錯導致 AI 做了錯誤的方向，用了不對的技術與套件，想要整批重來怎麼辦呢？只要回到開頭的輸入指令的地方改寫指令：

他會問你要不要 Revert 之前的動作然後重來，請選擇 Continue and Revert 即可：

這樣 Cursor 會把整個寫錯的程式碼清除，重寫一遍。

一些常用操作

Accept 變動

前面提到更改指令時可以 Revert，但如果你希望真正的把 Code commit 出去不再變更的話，可以按下對話下方的 Accept

要求 Cursor 執行修改

有時候，Cursor 會以為你在問問題，只有回應解決方案，沒有動手修改，妳可以下明確指令

請開始修改

他就會動手了

進一步修改版面

現在我要深入繼續開發，目前的計算機被嵌入在 Vue 的開始歡迎畫面中，雜訊很多，我想要一個乾淨的計算器，在頁面置中。我們可以按下右上角的 + 號，建立新對話，不受之前干擾。

接下來建議大家要慢慢開始學習把指令下的更清楚，例如像下面這樣，把現況、前因後果說明，再提出想要的修正，下面是我的示範指令：

目前的計算器被嵌入在首頁歡迎畫面中，太多不必要的資訊，請幫我將計算器放置在首頁中間，移除預設歡迎訊息，讓資訊焦點集中

成果如下圖，不太順利，首先是位置篇左，然後因為原本是深色模式，Cursor 移除背景後忘了改文字顏色。

我們繼續下指令：

目前計算器還是偏左，沒有真正置中，請幫我針對全版面左右置中。
另外，背景顏色移除後，文字變成亮色看不到，請幫我保留原本的深色背景

成功改顏色了，但是版面依然還是偏左。妳可以請 Cusor 嘗試自己抓原因，有時候可能會 2-3 次鬼打牆修不好，可以重複請他用不同的角度去檢查，例如是否是版面程式碼造成？是否是不相關的程式碼互相衝突等？或者請他移除預設代碼，自己重寫等等，讓他從不同角度檢視程式碼：

最後經過幾次調整，我請 Cursor 檢查是不是 RWD 的斷點設定錯誤，終於成功置中了

進階版面修改

有時候，我們希望有一點特別的版面，舉例來說，我想讓活動選擇的選項，長得像這樣 (via)，這可以是網路抓的圖，也可以是設計師的畫稿，甚至妳要手繪草圖都可以。

現在的 AI 是有能力看的懂圖片的，我們來用圖片指示 AI 進行版面調整。

Cursor 的對話框，可以上傳圖片，讓他自動根據圖片調整版面，我把上面那張圖片上傳給 Cursor，接著下指令：

將活動水平的選項，改成類似圖片中的單選按鈕，並搭配 FontAwesome icon，然後以區塊排列

這邊同樣鬼打牆多次，還包含需要安裝新的 font-awesome 套件等過程，中間就不詳細說明。經過多次嘗試與追加指令後，終於完成了以下版面：

這個版面有點不平均，可以再請他均分版面，指令如下:

目前的「活動水平」選項，左右不平均，希望每一排兩兩均分 50% 版面

成功！！！

如果妳很清楚要改的檔案或是要參考的檔案是哪幾個的話，也可以手動指定檔案當做 Context，Cursor 會優先在這個範圍內搜尋或改寫。

注意，上面的 Add Context 如果沒有選檔案的話，預設是監控整個專案內的檔案，更改目標也是整個專案。如果你有選擇某幾個檔案的話，Cursor 的專注力會在這幾個檔案上，就可能比較不參考其他檔案或是不改其他檔案 (但不會完全忽略)。Context 主要只是強化專注力，不會完全操控 AI 的行為。

除錯

當進入到越來越深入的環節時，出錯是在所難免，例如下這個個畫面

最簡單就是把錯誤訊息複製到 Cursor 請他除錯

也有時候，Cursor 不管如何都改不到正確的檔案時，可以檢查是不是上面的 context 選了不對的檔案。

發佈到網路上

如果你完成程式以後，想要發佈到網路上，也可以直接問 Cursor:

我想把這個簡單的程式發佈到網路上給人使用，有沒有簡單的作法與建議

由於 Cursor 目前不能操作雲端，所以他會給妳一些選項，以及操作步驟，讓妳自己執行：

之後只要照著操作步驟執行即可。以我來說，我是放到不需要資料庫的 Codesandbox 測試環境，方便給大家 DEMO 用，網址如下： https://wyjx86-5173.csb.app/

其他更多操作技巧

其他部分我們提供一些額外操作技巧給較有程式底子，可以自己改程式的人，Cursor 除了自動化建立專案以外，也有能力像 Copilot 一樣小範圍的提供建議與改寫。

自動完成

這是與 Copilot 非常像的功能，當你編寫到一半時，他會幫你自動猜測後面的程式碼(半透明部分)，只要按 Tab 就可以套用

你可以用註解做一些特殊控制，Cursor 會自動判斷你前後程式碼，決定怎麼幫你處理

例如下圖我用註解指示 Cursor 幫我轉成 Char Code 再回傳

你也可以反過來，寫完程式碼後，用 Cursor 幫你註解

如果你覺得自動完成只有一部分需要，其他不想接受，可以先去設定打開 Particial Completion 功能

然後就可以用 Command or Ctrl + 方向鍵 來步進完成需要的部份

行內編輯程式碼

按下 Command or Ctrl + K ，會在編輯器的游標位置打開聊天室窗，妳可以在這邊輸入妳想做的事，他會產生建議的程式碼，按下 Accept 即可送出

也可以圈選一段程式碼做修改，他會顯示改變的對比，同樣按下 Accept 就會套用

如下圖我則是貼了一段 PHP 程式碼，請他轉成 JS ，也很方便

Vibe Coding 的觀念與進行方式

上面建立計算器的整個過程，我幾乎沒有看程式碼除錯，都是交給 Cursor 依照指令執行，我也沒有去查看計算的程式寫的對不對，而是藉由操作表單去驗證結果是否計算正確。因此 Vibe coding 不需要您真的有強大的程式技能就可以開始執行。

不過您最好還是要有基本的程式觀念、會操作 Terminal 下指令等等，不然 Cursor 跑完後，妳可能根本不知道要怎麼執行或除錯。

另外假設您是有經驗的工程師，請不要太過專注於底層細節，而是大致上理解 AI 的方向後，放手讓他執行，妳的工作是監督他的產出，不是與 AI 做 pair programming。

時間部分也要注意，雖然不需要自己寫程式碼，但是除錯與重新下指令的過程還是會消耗一點時間，可能一個小錯誤鬼打牆就消耗妳 30 分鐘了。

Vibe Coding 的限制

雖然 Vibe Coding 方便又快速，但也要注意幾個重點。

AI 寫程式容易潛藏錯誤

像這次編寫計算器，就遇到版面對齊的問題一直修不好。AI 只是依照需求快速補全程式碼，實際上他不懂程式碼最終產出的結果，也看不見程式的介面，無法像人類一樣察覺錯誤。所以Vibe Coding 過程，務必盡量測試程式碼，避免出現未預期錯誤。

AI 沒有資安意識，容易有漏洞

AI 只是依照普遍性的原理去生成程式碼，他實際上不具備資安意識，所以程式所接收的參數，很容易因為沒有過濾或驗證資料欄位而出現漏洞。因次在金融、醫療或電商等等企業，不能全然的相信 Vibe Coding 的產出。企業導入 AI 開發時，務必強化內部稽核與人工 Code Review 制度。

維護性差，難以共用程式碼

AI 沒辦法理解程式設計的 SOLID 等原則，他儘是依照當下的任務去有效率的完成工作，但是當遇到專案越來越大時，他無法從商業邏輯去理解哪些流程是可以通用的，因此開發者如果沒有正確的下指令要求 AI 整理功能模組，並建立註解機制，時間長了以後，將會造成專案越來越難維護。

網路上有一句名言：「一個人的 Vibe Coding，創造 100 人的技術債」

結論

整體來說，現在的 AI 能力足夠強大，Vibe Coding 可以讓沒有強大開發技能的人，做出以前做不到的程式開發，並且真的可以動起來。不過，Vibe Coding 依舊有其限制，不是什麼情境都適合使用的，他較適合用在以下情境：

• 快速原型測試開發

• 個人 Side Project 開發

• 小型函式庫或元件開發

• 現有程式碼除錯與維修

• 功能單純的展示型網站或 Landing Page

• 程式改寫、優化或重複性工作

Vibe Coding 正加速改變開發者的工作模式，從過去思考每一段程式如何編寫，進入到只要描述情境與概念，指揮 AI 完成工作時的時代。Vibe Coding 不一定能讓沒有程式技能的人順利開發軟體，但可以將具有足夠技能的工程師產值大幅提昇。無論如何，企業應該要嘗試看看，面對時代的轉型，並逐漸思考如何將 AI Coding 導入到真實的工作場域中。