Cursor 是目前最火紅的 AI 程式編輯器。它把 AI(GPT-5、Claude)直接整合到寫程式的工具裡,讓你能用自然語言(中文也行!)描述你想要的功能,AI 就直接幫你寫出程式碼。這份教學帶你從零開始,10 分鐘上手。
下載並安裝 Cursor
前往 cursor.com 下載 Cursor 編輯器。支援 Windows、Mac、Linux。安裝過程跟一般軟體一樣,下一步到底即可。
💡 如果你用過 VS Code
Cursor 就是基於 VS Code 打造的,介面幾乎一模一樣。你原本的 VS Code 擴充功能和設定都可以直接匯入。
註冊帳號 & 選擇方案
安裝後打開 Cursor,會要求你註冊帳號。Cursor 提供:
- 免費方案:每月 2000 次 AI 補完 + 50 次進階請求(建議先用這個!)
- Pro 方案($20/月):無限次 AI 補完 + 500 次進階請求
新手先用免費方案就夠了,體驗一陣子再決定要不要升級。
建立你的第一個專案
打開 Cursor 後:
- 點選 File → Open Folder
- 在電腦上建立一個新資料夾(例如「我的第一個AI專案」)
- 選擇該資料夾並打開
現在你有一個空白的專案了!
用中文跟 AI 對話 — Composer 功能
這是 Cursor 最強大的功能!按下 Ctrl + I(Mac 是 Cmd + I)打開 Composer,然後直接用中文告訴它你想做什麼:
幫我建立一個簡單的網頁,
有一個標題寫「我的第一個網頁」,
背景用深藍色,文字用白色,
頁面中間放一個按鈕,點擊後跳出「Hello!」
按下 Enter 後,AI 會直接幫你生成完整的 HTML 檔案。你只需要點「Accept」接受修改。
💡 描述越具體,結果越好
就像 Level 4 學到的 Prompt Engineering,說清楚你要什麼、風格、功能,AI 才能給你最好的結果。不要只說「幫我做個網頁」,要說「幫我做一個暗色風格的待辦事項清單,可以新增和刪除項目」。
即時預覽你的成果
AI 幫你生成了程式碼後,想看看效果?
- 在左側檔案列表找到剛才生成的
.html檔案 - 對它按右鍵 → Open with Live Server(需要安裝 Live Server 擴充功能)
- 或者直接在檔案總管中雙擊
.html檔案,用瀏覽器打開
恭喜!你剛剛用 AI 做出了你的第一個網頁 🎉
修改和迭代 — Chat 功能
覺得哪裡不滿意?按 Ctrl + L 打開 Chat,選取你想修改的程式碼,然後告訴 AI:
把按鈕改成圓角的,
加上漸層色背景(從藍色到紫色),
滑鼠移上去要有放大效果
AI 會理解你選取的程式碼上下文,直接修改到位。
進階:讓 AI 讀懂你的整個專案
Cursor 最厲害的地方是它能閱讀你的整個專案。在 Composer 中使用 @ 符號:
- @file:指定讓 AI 參考某個檔案
- @folder:讓 AI 讀取整個資料夾
- @web:讓 AI 搜尋網路上的資料
- @docs:讓 AI 參考特定文件
例如:「@index 參考這個首頁的風格,幫我做一個 about 關於我們頁面」
實用小技巧
- Tab 補完:寫程式途中,AI 會自動預測你要寫什麼,按 Tab 接受建議
- Ctrl+K:選取程式碼後按 Ctrl+K,可以直接對選取的部分下指令修改
- 多檔案修改:Composer 可以同時修改多個檔案,適合複雜的功能開發
- 切換模型:在 Chat 右上角可以選擇用 GPT-5.4、Claude Sonnet 4.6 等不同 AI 模型
⚠️ 重要提醒
AI 寫的程式碼不一定 100% 正確。建議你每次讓 AI 改完後,都先測試一下是否如預期運作。養成「小步快跑」的習慣:每次只請 AI 做一小步,測試沒問題再繼續下一步。
Cursor Rules:讓 AI 記住你的開發偏好
當你用 Cursor 一段時間後,會發現自己反覆在 prompt 裡寫同樣的要求:「用 TypeScript」、「不要用 var」、「CSS 用 Tailwind」。這時候你可以設定 Cursor Rules,讓 AI 自動遵守你的偏好。
在專案根目錄建立 .cursor/rules 資料夾,放入 .mdc 格式的規則檔案。例如:
# frontend-rules.mdc
- 所有前端程式碼使用 TypeScript,不要用 JavaScript
- CSS 框架統一使用 Tailwind CSS
- React 元件使用 functional component + hooks
- 變數命名使用 camelCase
- 中文註解優先
設定好之後,Cursor 在每次回答時都會自動參考這些規則,大幅減少你重複溝通的時間。這對團隊協作特別有價值——統一的 Rules 檔案可以確保每個成員拿到的 AI 輸出風格一致。
用 Cursor 搭配 MCP 擴展能力
Cursor 支援 MCP(Model Context Protocol),這讓它能連接外部工具和資料源。例如你可以透過 MCP 讓 Cursor 直接讀取資料庫結構、查詢 API 文件、甚至操作 GitHub Issues。
這意味著你在寫程式時,不需要來回切換視窗查資料——直接在 Cursor 的對話框裡問「這張 users 表的欄位有哪些?」,AI 就能即時從資料庫拉出結構並據此寫出正確的查詢語句。
對於想深入了解 AI 輔助開發的完整流程,可以參考 AI 程式開發指南和 Vibe Coding 方法論。
Cursor vs. 其他 AI 編輯器:怎麼選?
市場上的 AI 編輯器越來越多,以下是快速比較:
| 工具 | 最大優勢 | 適合誰 |
|---|---|---|
| Cursor | 整合度最高,Composer 多檔編輯強大 | 全端開發者、想用 AI 大幅加速的人 |
| GitHub Copilot(VS Code 外掛) | 生態系成熟,和 GitHub 深度整合 | 已經熟悉 VS Code 且不想換編輯器的人 |
| Windsurf | 介面簡潔,Agent 模式自動化程度高 | 喜歡讓 AI 自主完成任務的開發者 |
| Claude Code(CLI) | 終端機操作,適合系統層級的任務 | 熟悉命令列的進階開發者 |
沒有絕對的「最好」,關鍵是選一個你用起來順手的,然後花時間學會它的進階功能。如果你想更全面理解不同 AI 模型在寫程式上的差異,可以參考 AI 模型比較,了解 GPT-5、Claude Sonnet、Gemini 在程式碼生成上的實測表現。
實戰場景:三個真實工作流
工具介紹完了,但到底能解決什麼問題? 以下是我自己使用 Cursor 一年下來,最常跑的三個工作流,每一個都能顯著縮短開發時間。
場景一:30 分鐘做出 Landing Page
客戶下午五點丟一個需求:「明天早上要一份產品 Landing Page,看起來要專業。」傳統做法要找設計師、切版、寫 HTML/CSS,至少兩個工作天。用 Cursor 的做法:
- 開新專案 + 建 index.html 空檔(30 秒)
- 按 Ctrl + I 打開 Composer,給一段完整 prompt:
幫我做一個 SaaS 產品的 Landing Page,產品是 AI 會議紀錄工具。
包含:Hero 區(標題 + CTA 按鈕)、三個核心功能介紹(有 icon)、
客戶 Logo 牆、定價表(三個方案)、FAQ、Footer。
技術:純 HTML + Tailwind CSS(用 CDN),不要用框架。
風格:現代簡約,主色用深藍 + 橘色點綴,RWD 手機可看。
- AI 生成後 Accept 並預覽(2 分鐘)
- 用 Chat(Ctrl + L)迭代修改:「把定價表改成年繳有折扣的切換按鈕」「Hero 區加一張示意圖,用 unsplash 的免費圖片」
- 最後請 AI 加上 meta tags 和 OG image,直接丟上 Vercel 部署
整個流程從接需求到上線,通常 30 分鐘到 1 小時。關鍵是第一個 prompt 要夠具體,後面每次修改只動一個地方。
場景二:Debug 一個詭異的 Bug
這是 Cursor 最被低估的用法。當你遇到一個不知道為什麼壞掉的 bug,不要開始盲目猜測,而是:
- 把錯誤訊息整段複製進 Chat
- 用 @file 指定相關檔案(通常 2-3 個)
- 告訴 AI 你的預期行為和實際行為
@UserService.ts @useAuth.ts
登入成功後應該跳轉到 /dashboard,但實際上跳轉後馬上又彈回登入頁。
Console 顯示 "Unauthorized" 但 localStorage 有 token。
幫我找出可能的原因。
Cursor 會讀取你指定的檔案,通常五秒內就能指出問題——可能是 token 格式不對、middleware 順序錯、或是 cookie 的 SameSite 設定擋住了。對於有 AI 程式開發 基礎的人來說,這種「互動式 debug」比 Stack Overflow 搜尋快 10 倍。
場景三:Refactor 大型專案
這是 Composer 真正發光的場景。假設你要把專案裡所有的 useState 重構成 Zustand store:
- 開啟 Composer,用 @folder 指定 src/ 整個資料夾
- 給清楚的重構目標和約束:
@src
把所有元件裡的 useState 狀態管理遷移到 Zustand。
1. 在 src/stores 底下按功能模組建立 store
2. 保留原本的 TypeScript 型別
3. 元件裡改用 useStore hook 存取狀態
4. 不要修改 UI 和業務邏輯
先列出你計畫修改哪些檔案,等我確認後再開始動手。
關鍵是先讓 AI 列出計畫,再讓它執行。Composer 可以一次修改幾十個檔案,但你一定要在每一輪 Accept 前快速掃過 diff——AI 偶爾會把不該動的東西也動了。建議搭配 Git,每完成一個階段就 commit 一次,出問題可以輕鬆回滾。
Tab / Cmd-K / Composer:什麼時候用哪個?
Cursor 提供三種互動方式,很多人用了半年還搞不清楚差別。以下是一個簡單的判斷表:
| 情境 | 最佳工具 | 為什麼 |
|---|---|---|
| 寫到一半 AI 自動補字 | Tab | 零互動成本,不用切換注意力 |
| 選中一小段程式碼想微調 | Cmd-K(Ctrl+K) | 原地修改,保留上下文 |
| 跨多個檔案的大修改 | Composer(Cmd-I) | 能讀整個專案、修改多檔 |
| 想問一個概念或 debug | Chat(Cmd-L) | 對話式,不會直接改碼 |
簡單原則:改動範圍越小用越輕的工具。寫一行字用 Tab,改一個函式用 Cmd-K,改整個功能用 Composer,問問題用 Chat。混用這四個工具,才能真正發揮 Cursor 的生產力。
團隊協作:怎麼共用 Cursor Rules?
當你的團隊超過三個人都在用 Cursor,最痛的問題不是「AI 不會寫」而是「每個人寫出來的風格都不一樣」。解法是建立一份團隊共用的 .cursor/rules。
實戰做法
- 把
.cursor/rules資料夾納入 Git 版控(預設就會) - 按功能區分多個 .mdc 檔,例如:
frontend.mdc— React / TypeScript / Tailwind 規範backend.mdc— API 命名、錯誤處理、資料庫約束testing.mdc— 測試策略、命名規範commit.mdc— Commit message 格式(Conventional Commits)
- 用 Pull Request 迭代規則。當團隊成員發現 AI 老是做錯某件事,就提一個 PR 把修正寫進 rules,大家 review 後合併。這樣規則會越來越精準。
真實案例
我有個客戶是 10 人前端團隊,導入 Cursor Rules 三個月後,Code Review 的往返次數從平均 4.2 次降到 1.8 次。原因很簡單——過去一半的 review 意見都是「用詞不一致」、「檔名命名不統一」、「import 順序錯亂」這類瑣事,規則寫清楚後 AI 自動就會照做。
想深入了解如何把 AI 整合進團隊開發流程,可以參考 Prompt Engineering 進階 和 GitHub Copilot 對比。
❓ FAQ
Cursor 和 VS Code 有什麼差別?
Cursor 是基於 VS Code 打造的,所以介面和操作方式幾乎一樣。最大的差別是 Cursor 內建了 AI 功能(Composer、Chat、Tab 補完),而 VS Code 需要額外安裝 GitHub Copilot 等擴充功能。
不會寫程式也能用 Cursor 嗎?
可以!Cursor 的 Composer 功能讓你用中文描述需求,AI 就會幫你生成完整的程式碼。非常適合想學習程式或快速做出原型的初學者。搭配 Vibe Coding 方法論效果更好。
Cursor Pro 值得每月 $20 嗎?
如果你每週至少寫 10 小時程式,Pro 絕對回本。免費版的 50 次進階請求通常一個認真的工作天就用完了,而進階請求對應的就是 Claude Sonnet 4.6、GPT-5 這些最強的模型。對於專業開發者,Pro 每月 $20 比一杯咖啡還便宜,省下的時間遠遠超過這個成本。只有偶爾寫程式的學生或業餘玩家,免費版才夠用。
Cursor 可以離線使用嗎?
AI 功能不能。Composer、Chat、Tab 補完都需要連網路把 prompt 送到 OpenAI / Anthropic 的伺服器。但 Cursor 的編輯器核心(VS Code)可以離線用,你還是能正常寫程式、跑程式,只是沒有 AI 協助。如果公司禁止程式碼外流,Cursor 也提供 Privacy Mode,確保程式碼不會被保留或用於訓練。
Cursor 和 [GitHub Copilot](/tools/github-copilot/) 可以一起用嗎?
技術上可以,但沒必要。兩者的 Tab 補完會互相干擾,你會看到兩套建議打架。建議擇一使用——如果你已經習慣 VS Code + Copilot 的生態,可以繼續用;如果想體驗更強的多檔編輯和 Composer,就轉到 Cursor。大多數重度使用者最後都會選 Cursor,因為整合度明顯更高。
用 Cursor 寫出來的程式碼有版權問題嗎?
Cursor 本身聲明產出的程式碼歸你所有。但要注意兩件事:第一,如果你在 Composer 裡貼了包含商業機密的程式碼,這些內容會送到 AI 供應商(OpenAI / Anthropic),建議開啟 Privacy Mode。第二,AI 生成的程式碼偶爾會和開源專案高度相似,商業產品上線前建議跑一次程式碼抄襲檢測工具,避免意外踩到 GPL 等有感染性的授權。
不熟英文可以用 Cursor 嗎?
完全可以。Cursor 的 AI 對中文 prompt 理解能力非常好,你直接用中文描述需求、用中文寫註解都沒問題。唯一建議英文的場景是變數和函式命名——用英文命名是跨國團隊的共識,AI 也能更準確理解你的程式意圖。如果英文單字卡住,可以直接問 Cursor:「一個負責用戶登入驗證的函式,英文名稱建議幾個選項?」