2-3 Cursor 快速入門：AI 原生的程式編輯器
Cursor 是一個專為 AI 協作而生的程式編輯器。它不只是幫你寫程式，而是真正理解你的意圖，成為你的程式夥伴。
這是第一個真正能應用在實際工作的 AI 編程助手。過去雖然有許多類似工具，但大多停留在玩具階段，無法用於實戰專案。
為何要用 Cursor，而不是 ChatGPT？
Cursor 是專為程式編輯而設計的工具，能夠更好地理解程式碼的結構和上下文，提供即時的編輯建議和補全功能。我們可以直接來看一下兩者的差異：
| ChatGPT | Cursor |
|---|---|
| 需要複製貼上 | 直接在編輯器中修改 |
| 單檔案處理 | 理解整個專案結構 |
| 對話式互動 | 即時程式碼補全、整合開發工具 |
| 可以免費使用 | 有免費額度（但不多），通常需付費訂閱 |
| 程式碼只能接受 | 可以選擇只接受部分程式碼、更細的回朔到指定版本 |
下載安裝
- 前往 cursor.sh
- 下載對應你系統的版本
- 安裝並開啟 Cursor
開啟專案
打開 Cursor 後，介面大致如下圖所示。由於版本或主題設定不同（我使用了自訂主題），外觀可能略有差異，但整體架構相同。
第一步是點擊左側的「Open Project」按鈕來開啟專案，這會開啟檔案管理員視窗。
接著選擇要開啟的專案。如果還沒有專案，可以建立新資料夾並開啟。
介面導覽
開啟後會看到三個主要區塊：
- 檔案區：顯示專案架構，包含資料夾、檔案、程式碼和配置檔
- 程式碼顯示區：顯示目前選中檔案的內容（剛開始為空）
- AI 對話區：位於右側，是與 AI 互動的主要區域，點擊對話框即可開始
核心功能
讓我們用和上一篇文章相同的範例來測試 Cursor 的效果。 輸入同樣的提示詞： 「幫我做一個番茄鐘網頁」
在右側對話框輸入後，AI 就會開始生成程式碼。
與 ChatGPT 不同的是，Cursor 會：
- 先分析需求
- 列出待辦事項
- 逐步規劃執行
- 直接創建和編輯檔案
從這裡可以清楚看出專門的 AI 開發工具與 ChatGPT 在實際開發上的差異。
執行過程中，你會看到它創建檔案。注意對話中顯示創建了 index.html 和 style.css 兩個檔案，旁邊會標示「(new)」和行數。
此時在左側檔案區，可以看到這些檔案確實被創建出來了，還有一個 script.js。
完成後，Cursor 可能會主動提示執行指令來運行專案。不過這個步驟會根據開發情況而定，不一定每次都會出現。
執行指令後，Cursor 會提供：
- 完成的工作總結
- 使用方法說明
- 預覽連結
點擊連結即可預覽網頁，可以看到成果在各方面都比 ChatGPT 更完善。
如果沒有自動執行或提供連結，可以：
- 進入專案資料夾
- 找到
index.html（或其他 .html 檔案） - 雙擊開啟即可預覽網頁
確認網頁可以運行後，讓我們查看 Cursor 生成的程式碼：
- 點擊左側檔案區的檔案查看內容
- 程式碼會以綠色顯示（表示新增內容）
- 底部會出現「Keep」選項，詢問是否保留這些變更
- 新手建議直接接受 AI 的建議，點擊「Keep」
- 使用「Accept」接受所有更動
- 系統會引導你檢視下一個檔案，重複相同步驟即可
優化與調整
這時候我們來試試看更複雜的提示詞，看看 Cursor 會如何處理。例如： 「幫我改成深色、現代風格，並且每次番茄鐘計時結束會跳出一個小視窗提示『該繼續工作囉！』或『趕快去休息吧！』，然後幾秒後淡化消失，這個提示訊息需要可以在設定裡面修改。」
可以看到 Cursor 把每個工作都拆解得很細緻：
工作執行完成後，用同樣的方式執行網頁，會發現 Cursor 真的把所有功能都成功實作出來了。
而且不會像 ChatGPT 那樣改一改就壞掉，或是做得很醜、很簡陋。
不過這時發現一個問題：設定按鈕的文字是黑色的，在深色模式下很不清楚。我們可以直接請 Cursor 修改：
「幫我把底下開啟設定的按鈕文字顏色改成白色」
稍等片刻後，你會發現 Cursor 完美地完成了這個任務：
同時也可以看到，我們剛才要求在設定中新增可調整提示文字的功能，Cursor 也成功完成了：
開發到這裡，大家可以很明顯地看到 Cursor 比 ChatGPT 聰明很多，速度也快上很多。
而且在處理複雜的需求時，Cursor 能夠更好地理解上下文，並提供更精確的解決方案。
不過目前看到的只是 Cursor 的一部分功能，它還有更多強大的功能，我們會在下一篇文章詳細介紹使用方式、操作細節和技巧。
下一步
掌握了 Cursor 的基本操作後，下一篇我們將深入探索 Cursor 的核心功能，學習如何充分發揮這個強大工具的潛力。
記住：工具是為了提升效率，但創意和邏輯思維才是核心。