Cursor AI 編輯器完全指南:從安裝到進階應用全攻略
Cursor AI 編輯器完全指南
章節目錄
- Cursor 基礎概念
- 安裝與環境設定
- Cursor 核心功能
- AI 溝通與互動技巧
- 上下文管理與文檔整合
- Context 7 與外部工具整合
- 任務管理系統
- 實際專案開發流程
- 進階應用與最佳實踐
- 寫作與非程式開發應用
- Cursor 免費使用與付費方案
- Cursor 與其他工具比較
1. Cursor 基礎概念
1.1 什麼是 Cursor
Cursor 是一款基於 Visual Studio Code (VS Code) 的 AI 程式碼編輯器,透過深度整合 AI 功能來增強開發體驗。它不僅是一個程式碼編輯器,更是一個開發助手,能夠理解程式碼、回答問題並協助撰寫和修改程式碼。
Cursor 的核心價值在於:
- 提升程式開發效率,加速編碼過程
- 降低編程門檻,讓初學者更容易上手
- 優化大型程式碼庫的處理體驗
- 整合 AI 與編輯器功能,提供無縫的開發體驗
1.2 Cursor 的發展歷程
Cursor 由 Anthropic 公司開發,歷程如下:
- 成立於 2021 年,初期未受到太多關注
- 2023 年獲得 OpenAI 的 800 萬美元融資
- 2024 年完成了 6000 萬美元融資,公司估值達到 4 億美金以上
- 2023 年底至 2024 年初,用戶快速增長,許多科技領域大佬的推薦讓 Cursor 徹底出圈
1.3 Cursor 與 VS Code 的關係
Cursor 是基於 VS Code 開發的獨立編輯器,而不是 VS Code 的一個插件。這種設計決策有以下考量:
- 深層次定制:Cursor 團隊希望對底層架構進行更靈活的修改
- 用戶體驗控制:自主控制用戶界面和交互方式
- 性能優化:針對 AI 功能進行特定的性能優化
- AI 深度整合:提供超越插件模式所能達到的 AI 功能整合深度
這種基於 VS Code 但獨立開發的方式,讓 Cursor 保留了 VS Code 的強大功能基礎,同時能夠提供更深入的 AI 整合體驗。
1.4 Cursor 的優勢與適用場景
適用人群:
- 專業開發者:加速開發流程,減少重複工作
- 初學者:在學習過程中獲得 AI 指導和協助
- 全棧開發者:管理複雜的多層次專案
- 團隊協作:簡化程式碼溝通和知識分享
適用場景:
- 新專案快速原型開發
- 大型程式碼庫的理解與修改
- Bug 修復與程式碼優化
- 新技術學習與探索
- 跨平台和多語言專案開發
2. 安裝與環境設定
2.1 下載與安裝流程
- 下載 Cursor
- 前往 cursor.com 官網下載適合您作業系統的版本
- Cursor 支援 Windows、macOS 和 Linux 平台
- 安裝程序
- 執行下載的安裝檔案
- 跟隨安裝嚮導完成安裝
- 初始設定
- 首次啟動時,選擇編輯器偏好設定
- 設定回覆語言(可選擇中文或其他語言)
- 設定終端命令偏好
- VS Code 設定導入
- 如果您之前使用過 VS Code,Cursor 可一鍵導入其配置和擴展
- 在初始設定畫面選擇「導入 VS Code 設定」選項
- 帳號註冊
- 使用電子郵件註冊或登入 Cursor 帳號
- 註冊後可獲得 14 天免費 Pro 試用期
2.2 界面漢化設定
- 安裝中文語言包
- 點擊左側邊欄的擴展按鈕(或按
Ctrl+Shift+X
) - 在搜索框中輸入「Chinese」
- 找到並安裝「Chinese (Simplified)」或「Chinese (Traditional)」擴展
- 安裝完成後重啟 Cursor
- 點擊左側邊欄的擴展按鈕(或按
- 切換顯示語言
- 按
Ctrl+Shift+P
(或Cmd+Shift+P
)開啟命令面板 - 輸入「display」並選擇「Configure Display Language」
- 選擇已安裝的中文語言包
- 再次重啟 Cursor 完成語言切換
- 按
2.3 Cursor 界面組成
Cursor 的界面主要由以下幾個部分組成:
- 頂部:各種選單,重要的是「File」>「Preferences」>「Cursor Settings」和「VS Code Settings」
- 左側:檔案瀏覽器,顯示專案資料夾結構
- 中間:程式碼編輯區域,顯示當前開啟檔案的內容
- 底部:終端機視窗,可執行命令並使用
Ctrl+K
透過 AI 生成指令 - 右側:AI 聊天面板,類似 ChatGPT 但整合於編輯器中,能感知專案中的所有檔案
2.4 基本配置與設定
- AI 模型選擇
- 在設定中找到「Models」選項
- 設定默認 AI 模型(推薦 Claude 3.5 Sonnet 進行編碼)
- 可根據需求啟用或停用特定模型
- 編輯器基本設定
- 字體大小與字型
- 主題選擇
- Tab 寬度與縮排設定
- 自動儲存選項
- 基礎快捷鍵
Command + L
(Mac)或Ctrl + L
(Windows/Linux):開啟/關閉 Chat 模式Command + I
(Mac)或Ctrl + I
(Windows/Linux):開啟/關閉 Copilot 模式Command + K
(Mac)或Ctrl + K
(Windows/Linux):在程式碼中開啟嵌入式聊天框Command + Shift + J
(Mac)或Ctrl + Shift + J
(Windows/Linux):開啟 MCP 設定
- Git 整合配置
- 設定 Git 用戶名和電子郵件
- 配置 Git 憑證存儲
- 啟用/停用 Git 變更自動提交功能
3. Cursor 核心功能
3.1 AI 聊天面板詳解
AI 聊天面板是 Cursor 的核心功能之一,它不只是一個聊天工具,而是與編輯器深度整合的 AI 助手:
面板組成:
- 輸入框:輸入提示,讓 AI 回答問題或產生程式碼
- 上方區域:可添加 AI 處理請求時需考慮的其他上下文
- 左下方:模式選擇下拉選單
- Agent 模式:用於修改程式碼,可以運行命令和自動提取上下文
- Ask 模式:用於設計或詢問關於程式碼的問題,不會修改檔案
- 右下方:模型選擇下拉選單
- 推薦使用 Claude 3.5 Sonnet 進行編碼
- Claude 3.7 Sonnet 功能強大但有時會過度設計
功能特點:
- 上下文感知:能夠理解整個專案結構,感知所有檔案內容
- 程式碼生成:可以為專案產生新的程式碼檔案
- 多模型支援:支援多種 AI 大模型,可根據任務選擇最適合的模型
- 圖片支援:可以上傳圖片作為參考,如設計稿或界面截圖
- 聊天歷史:保存對話記錄,方便回顧和繼續之前的討論
3.2 程式碼自動補全與修改
Cursor 提供智能的程式碼自動補全與修改功能,這是開發者提升效率的重要工具:
- 自動完成:
- 當您輸入代碼時,Cursor 會自動提供智能補全建議
- 按 Tab 鍵接受建議
- 補全不僅限於單詞,還可包括完整的函數、類或代碼塊
- 光標預測:
- Cursor 能預測下一個可能的編輯點
- 提供智能的代碼修改建議
- 這一功能在許多同類產品中都無法做到這麼快速和精準
- 內聯代碼編輯:
- 選擇程式碼後按
Ctrl+K
或Command+K
- 可在編輯器中直接請求特定修改,不必切換到聊天面板
- 適合對特定代碼片段進行快速修改或優化
- 選擇程式碼後按
- 代碼重構:
- AI 可以協助進行代碼重構,如提取方法、重命名變數等
- 保持代碼結構和功能不變,同時提高可讀性和維護性
3.3 Copilot 模式詳解
Copilot 模式是 Cursor 的另一個核心功能,與聊天面板不同,它更專注於程式碼生成和修改:
兩種子模式:
- Normal 模式:
- 可檢索代碼庫和文檔
- 正常創建和寫入文件
- 執行速度較快,適合簡單任務
- Agent 模式:
- 除了 Normal 模式的功能外
- 可自動提取相關上下文
- 能夠運行終端命令
- 按語義搜索代碼
- 自動執行文件操作
- 適合複雜功能開發
使用建議:
- 對於複雜功能,使用 Agent 模式以利用其自動上下文提取和命令執行能力
- 對於簡單功能,使用 Normal 模式以獲得更快的回應速度
- 透過聊天面板與 Copilot 互動,可獲得更精確的代碼生成結果
3.4 終端命令生成
Cursor 的終端命令生成功能讓開發者可以用自然語言生成複雜的命令:
- 使用方法:
- 在終端中按
Ctrl+K
或Command+K
- 輸入自然語言描述您想執行的操作
- Cursor 會生成並建議相應的命令
- 在終端中按
- 應用場景:
- 生成複雜的 git 命令
- 建立正確的 npm 或 yarn 指令
- 產生適合專案的建置或部署命令
- 快速找到並執行難以記住的系統命令
- YOLO 模式:
- 可設定 Cursor 自動執行生成的命令
- 適用於可靠且重複性高的操作
- 需謹慎使用,確保生成的命令安全可靠
4. AI 溝通與互動技巧
4.1 提示工程與有效溝通
與 Cursor AI 有效溝通需要良好的提示工程技巧,以下是提高 AI 回應質量的方法:
- 明確需求:
- 清晰說明您想要完成的任務
- 提供具體範例或參考
- 指明預期結果的格式或風格
- 結構化提示:
- 使用條列清單分解複雜需求
- 按優先順序排列要求
- 對重要元素加以強調
- 使用 AI 的思考模式:
- 在 AI 模型下拉選單上方找到「思考」(Thinking)選項
- 啟用此功能讓 AI 進行更深入的推理過程
- 適用於複雜問題和架構決策
- 提供足夠上下文:
- 確保相關文件在編輯器中打開
- 使用 @ 符號標記關鍵文件
- 附加任何相關的外部資料或連結
4.2 解決 AI 混亂修改問題
使用 AI 編輯器時,一個常見問題是 AI 可能會進行過度修改或混亂更改,以下是防止這種情況的技巧:
- 讓 AI 複述需求:
- 提出需求後,請 AI 用自己的話複述任務
- 確認 AI 理解無誤後再進行實際修改
- 糾正任何誤解或缺漏
- 明確修改範圍:
- 具體指出哪些文件可以修改
- 說明哪些部分不應被更動
- 設定明確的修改界限
- 需求拆解:
- 將大型需求分解為小型、獨立的任務
- 逐步完成每個子任務
- 避免一次性要求複雜更改
- 結構化指導:
- 將 AI 視為需要明確指導的助手
- 清晰描述問題或需求
- 必要時提供解決思路和示例參考
4.3 版本控制與檢查點
Cursor 提供了強大的版本控制功能,可防止 AI 變更導致的問題:
- 檢查點功能:
- 在進行重大修改前使用「Create Checkpoint」功能
- 發現問題時可使用「Restore Checkpoint」恢復先前版本
- 檢查點可作為短期的安全網
- Git 整合:
- 定期提交變更以保存重要進度
- 使用有意義的提交信息描述 AI 協助的變更
- 在新功能開發前建立新分支
- 對比與審核:
- 在接受 AI 修改前檢查其建議的變更
- 仔細審核每個修改部分,確保符合預期
- 對於不確定的變更,可以選擇性接受而非完全採納
- 漸進式開發:
- 採用小步迭代的方式
- 每次完成小功能後測試並提交
- 避免長時間無提交的大規模改動
5. 上下文管理與文檔整合
5.1 文檔整合與添加
Cursor 的強大之處在於它可以整合外部文檔作為 AI 的上下文,提升 AI 的回應質量:
- 添加外部文檔步驟:
- 點擊設定圖標
- 選擇「Features」
- 向下滾動到「Docs」部分
- 點擊「Add New Doc」並貼上文檔 URL
- Cursor 會自動抓取並索引該文檔及其子頁面
- 可添加的文檔類型:
- API 參考文檔
- 框架或庫的官方文檔
- 技術指南和教學資源
- 開源專案文檔
- 文檔管理技巧:
- 為文檔設定易識別的前綴名稱
- 定期更新文檔連結以獲取最新資訊
- 移除不再使用的文檔以減少干擾
- 臨時使用外部文檔:
- 在聊天輸入框中輸入 @
- 選擇「Docs」選項
- 選擇已添加的文檔或添加新連結
- 這種方式適合僅在當前對話中參考某文檔
5.2 上下文管理選項詳解
有效的上下文管理是提高 AI 回應質量的關鍵,Cursor 提供多種上下文管理選項:
- @files(引用文件):
- 在提示中直接引用專案內的特定文件
- 語法:
@filename.ext
- 使 AI 在回應時特別關注該文件內容
- @folders(引用資料夾):
- 引用整個資料夾中的所有文件
- 語法:
@folder\_name/
- 適用於需要 AI 理解相關組件或模塊的場景
- @code(選中代碼):
- 將選中的程式碼片段添加到 AI 上下文
- 可在編輯器中選擇代碼後使用「Add to Chat」選項
- 適合讓 AI 解釋或修改特定代碼段
- @doc(官方文檔):
- 選擇官方文檔作為上下文
- 適合需要 AI 參考特定技術文檔的場景
- @web(網絡搜索):
- 讓 AI 自行搜尋相關資訊
- 用於獲取最新資訊或 Cursor 內置文檔未涵蓋的資料
- 使用方法:在提示後添加
@web
- @git(Git 歷史):
- 引用歷史 Git 提交記錄
- 適用於讓 AI 了解代碼變更歷史和原因
- 可用於比較多個提交間的差異
5.3 Codebase 功能應用
Codebase 功能是 Cursor 的強大工具,可幫助 AI 更好地理解複雜專案:
- 功能說明:
- @codebase 會採集代碼中重要的文件或代碼塊
- 將本地代碼庫分割成小塊語言數據
- 根據相關性排序上下文
- 透過 AI 推理給出回應
- 使用流程:
- 收集:掃描整個項目,查找與指令相關的文件或代碼塊
- 排序:根據相關性排序上下文
- 推理:AI 思考如何利用上下文
- 生成:提供回應或解決方案
- 適用場景:
- 大型專案導航與理解
- 尋找相關功能實現
- 系統架構分析
- 代碼重用和模式識別
- 使用技巧:
- 提供明確的查詢關鍵詞
- 描述您正在尋找的功能或模式
- 指定特定文件類型或目錄範圍
- 結合其他上下文管理選項增強效果
5.4 圖片上傳與參考
Cursor 支持圖片作為上下文資料,這對於 UI 開發特別有用:
- 支持的場景:
- UI/UX 設計實現
- 參考視覺風格和佈局
- 錯誤截圖分析
- 數據圖表解讀
- 上傳方法:
- 在聊天面板中點擊上傳圖片按鈕
- 拖放圖片到聊天窗口
- 複製後直接粘貼到聊天窗口
- 使用技巧:
- 提供清晰的圖片
- 標註重要元素或區域
- 結合文字描述具體需求
- 指明參考圖片的目的(如「實現類似的佈局」)
6. Context 7 與外部工具整合
6.1 Context 7 介紹
Context 7 是 Upstash 團隊開發的免費工具,可解決 Cursor 模型對最新函式庫知識不足的問題:
- 核心價值:
- 提供最新函式庫和框架的準確資訊
- 避免過時的文檔或示例
- 減少 AI 生成的幻覺代碼
- 提高代碼生成的準確性
- 工作原理:
- 首先查找目標函式庫(如 Next.js)
- 然後查找特定功能的文檔(如 onNavigate)
- 直接從源代碼獲取並返回完美的代碼示例
- 支援的函式庫:
- 超過 850 個函式庫,數量持續增加
- 包括 Next.js、Clerk、MongoDB、Upstash、Fast API 等熱門選項
- 用戶可請求索引新的文檔
6.2 Context 7 安裝與配置
安裝 Context 7 的步驟非常簡單:
- 獲取 MCP 伺服器命令:
- 前往 Context 7 的 GitHub 儲存庫
- 找到並複製 MCP 伺服器命令(通常是一個簡單的 NPX 命令)
- 在 Cursor 中配置:
- 開啟 Cursor 設定(使用
Ctrl+Shift+J
或Command+Shift+J
) - 前往 MCP 設定區域
- 點擊「添加新的全局 MCP 伺服器」
- 貼上剛才複製的命令
- 保存設定
- 開啟 Cursor 設定(使用
- 驗證安裝:
- 返回編輯器
- 在聊天窗口輸入 “use context 7” 然後按 Enter
- 如果安裝成功,應該會看到關於 Context 7 的確認信息
6.3 MCP 伺服器整合
MCP (Model Context Protocol) 是一個強大的擴展機制,允許 Cursor 與外部服務交互:
- MCP 基本概念:
- MCP 是一個標準協議,用於連接 Cursor 與其他數據來源
- 允許 AI 訪問和使用外部工具和服務
- 擴展 Cursor 的能力範圍
- 設置 MCP 伺服器:
- 找到目標服務的 MCP 文檔(如 Zapier MCP)
- 在 Cursor 設定中找到 MCP 選項
- 添加新的全局 MCP 伺服器
- 配置服務參數和認證信息
- Zapier MCP 設置:
- 前往 Zapier MCP 文檔
- 創建 MCP 伺服器
- 複製伺服器連結
- 在 Cursor MCP 設定中添加
- 添加 API helper 等工具
- N8N MCP 設置:
- 更新 N8N 到支持 MCP 的版本(如 1.88.0)
- 在 N8N 界面創建 MCP 伺服器節點
- 創建所需的工具函數
- 獲取伺服器 URL 並在 Cursor 中配置
6.4 外部服務整合案例
以下是一些整合外部服務的實際案例:
- Zapier API 整合:
- 設置 Zapier MCP 伺服器
- 創建 API helper 工具
- 在 Cursor 中請求 API 相關代碼
- AI 會自動參考 API 文檔生成準確代碼
- 示例:為 React 應用添加電子郵件訂閱功能,整合 Mail Bluster API
- 網絡搜索整合:
- 啟用 Cursor 的網絡搜索工具
- 在提問時添加「參考網絡」或「查找最新版本」等提示詞
- AI 會執行實時搜索並提供最新資訊
- 適用於查找最新版本資訊、實時數據或新聞
- GitHub 整合:
- 通過 MCP 連接 GitHub
- 可直接查詢代碼庫信息
- 分析提交歷史和變更
- 獲取項目統計數據
7. 任務管理系統
7.1 基本任務管理方法
有效的任務管理可以大幅減少 Cursor 出錯的機率:
- 簡單實施方法:
- 創建一個 cursor rule,告訴 Cursor 參考 task.md 文件
- 維護 task.md 文件以追蹤已完成和未完成的任務
- 讓 Cursor 在完成任務後自動標記為已完成
- 任務文件結構:
- 任務標題和描述
- 優先級和依賴關係
- 預計完成時間
- 完成狀態(未開始、進行中、已完成)
- 備註和注意事項
- 使用方法:
- 創建初始任務列表(可請求 AI 協助)
- 讓 Cursor 參考此文件進行開發
- 在每個任務完成後更新狀態
- 根據進度調整任務順序和優先級
7.2 Taskmaster 工具深度剖析
Taskmaster 是一個強大的任務管理工具,能更深入地整合到 Cursor 中:
-
工具定位:
- 本質上是「產品經理的程式化表現」
- 協助開發者維持產品管理思維
- 自動化任務拆分和管理過程
- 安裝流程:
- 使用全局安裝命令:
npm install -g taskmaster-ai
- 在專案根目錄執行:
taskmaster init
- 設置 Anthropic API 金鑰
- 可選擇性添加 Perplexity API 金鑰,用於額外研究
- 完成基本設定問答,系統自動生成所需檔案
- 使用全局安裝命令:
- 自動生成的檔案結構:
- .cursor/rules 目錄:包含多個 MDC 檔案,定義 Cursor 如何解讀命令
- scripts 資料夾:包含運行 Taskmaster 的 JavaScript 文件
- 範例文檔:PRD (產品需求文檔)、RCA (根本原因分析) 範例
- 任務相關檔案:任務複雜度報告、tasks.json,儲存所有任務詳情
- 核心功能:
- PRD 解析:使用
taskmaster parse PRD
將需求分解為小任務 - 任務管理:使用
taskmaster list
查看所有任務及依賴關係 - 複雜度分析:使用
taskmaster analyze complexity
評估任務難度 - 細分複雜任務:自動將複雜任務分解為更小的部分
- 任務執行:使用
taskmaster next
移至下一個任務
- PRD 解析:使用
7.3 使用 Taskmaster 的工作流程
- 創建 PRD (產品需求文檔):
- 可使用 Cursor 與 AI 對話來生成初步 PRD
- 描述專案目標、功能需求和技術規格
- PRD 應包含功能目標、目標受眾、詳細設計規範和技術實現細節
- 解析 PRD 為任務:
- 執行
taskmaster parse PRD
命令 - 系統自動分析 PRD 並創建結構化任務清單
- 每個任務包含 ID、標題、描述、狀態、依賴關係等信息
- 執行
- 分析任務複雜度:
- 執行
taskmaster analyze complexity
命令 - 系統評估每個任務的難度並生成報告
- 對於複雜任務,可使用
taskmaster expand
進一步分解
- 執行
- 任務實施:
- 系統按照依賴關係順序執行任務
- Cursor 會將任務標記為「進行中」再標記為「已完成」
- 使用
taskmaster next
移動到下一個任務
- 問題修復流程:
- 當 Cursor 出錯時,提示它反思錯誤原因
- 創建新規則避免未來出現相同錯誤
- 在新對話中列出發現的問題並尋求解決方案
7.4 Planning.md 與 Task.md 的配合使用
Taskmaster 使用兩個關鍵文件來協調開發:
- Planning.md (計劃文件):
- 包含高階資訊,類似產品規格書
- 內容包括:
- Overview:專案總體概述
- Target User:目標用戶群體
- 核心功能:主要功能列表
- 技術架構:前/後端技術選擇、資料庫等
- Task.md (任務文件):
- 列出開發的具體步驟和功能實現清單
- 包含環境設定、UI 開發、資料庫整合等任務
- 由 Cursor 自動更新完成狀態
- 方便分段開發,使流程更有條理
- 配合使用策略:
- 先創建 Planning.md 定義專案範圍和目標
- 使用 Taskmaster 從 Planning.md 生成 Task.md
- 讓 Cursor 遵循這兩個文件進行開發
- 在開發過程中不斷更新和調整這兩個文件
8. 實際專案開發流程
8.1 設計新專案:React + Tailwind 著陸頁面
以下是使用 Cursor 建立 React + Tailwind 著陸頁面的完整流程:
- 準備工作:
- 開啟 Cursor 並創建新專案資料夾
- 開啟 AI 聊天面板,選擇 Agent 模式
- 選擇 Claude 3.5 Sonnet 模型
- 初始化專案:
- 向 AI 描述項目:“我想創建一個使用 React 和 Tailwind 的現代著陸頁面”
- 提供主要元素需求:導航欄、英雄區域、功能區塊、定價表格和頁尾
- 啟用 YOLO 模式讓 Cursor 自動執行命令
- 框架搭建:
- AI 會運行命令初始化 React 專案
- 安裝 Tailwind CSS 和必要依賴
- 創建基本文件結構
- 設定 Tailwind 配置
- 組件開發:
- 讓 AI 創建各個組件:Header、Hero、Features、Pricing、Footer
- 審核 AI 提供的代碼,注意紅色(刪除)和黃綠色(添加)標記
- 逐一或全部接受 AI 的修改
- 樣式調整:
- 要求 AI 優化響應式設計
- 調整顏色方案和間距
- 添加動畫和交互效果
- 完善與測試:
- 運行專案並在瀏覽器中查看結果
- 記錄問題並在 AI 聊天中描述需要修復的部分
- 讓 AI 進行必要的調整
8.2 功能迭代與錯誤修復
在開發過程中,經常需要迭代功能和修復錯誤,Cursor 提供了強大的支持:
- 問題識別:
- 在瀏覽器中測試應用,發現 UI 或功能問題
- 使用開發者工具獲取錯誤信息
- 截圖記錄問題狀態
- 問題描述:
- 在與 AI 的相同聊天中描述具體問題
- 提供錯誤信息和截圖
- 說明期望的正確行為
- 解決方案:
- AI 會分析問題並提出修復方案
- 生成修復代碼,標記修改部分
- 說明修改原因和解決思路
- 版本恢復:
- 使用「Restore Checkpoint」按鈕恢復到之前的代碼版本
- 如果修復導致新問題,可快速回退
- 保持多個檢查點以確保安全開發
- Fix and Chat:
- 使用 Cursor 的「Fix and Chat」功能快速解決錯誤
- 選中錯誤代碼,使用快捷鍵調用此功能
- AI 會專注於解決特定問題而不影響其他代碼
8.3 添加交互功能:Snake 遊戲案例
以下是在網站中添加 Snake 遊戲功能的流程,展示 Cursor 處理複雜功能的能力:
- 新聊天準備:
- 為新功能開啟新的聊天,避免上下文干擾
- 選擇 Agent 模式以允許檔案修改
- 需求描述:
- 明確描述遊戲功能:“我想添加一個簡單的 Snake 遊戲,使用 Canvas API 實現”
- 提供遊戲規則和控制方式
- 描述視覺風格要求
- 文件創建:
- AI 會創建新的遊戲組件文件:
SnakeGame.jsx
- 自動更新必要的現有文件,如主頁面組件
- 添加相關樣式文件
- AI 會創建新的遊戲組件文件:
- 核心功能實現:
- AI 會實現核心遊戲邏輯:蛇的移動、成長和碰撞檢測
- 設置基本的鍵盤控制
- 創建遊戲循環和狀態管理
- 迭代改進:
- 測試基本功能後提出改進建議
- 要求添加分數系統、速度調整、遊戲結束處理等
- AI 將逐步改進功能,每次提供清晰的代碼修改
- 整合到頁面:
- 將遊戲組件添加到適當的頁面位置
- 確保響應式設計適配不同屏幕尺寸
- 優化性能和用戶體驗
8.4 大型專案開發技巧
處理大型專案需要更系統化的方法,以下是在 Cursor 中開發大型專案的技巧:
- 上下文管理:
- 使用 @ 符號標記關鍵文件,幫助 AI 專注於重要代碼
- 創建專門的上下文文件,描述系統架構和關鍵部分
- 使用 Codebase 功能讓 AI 了解整體代碼庫
- 分層開發:
- 按照前端 UI、API 層、後端服務等層次分別開發
- 針對每一層使用獨立的聊天會話
- 確保層與層之間的接口一致
- 模塊化請求:
- 將大功能分解為小的模塊化請求
- 每次聊天專注於一個明確功能或組件
- 逐步整合這些模塊
- 文檔整理:
- 要求 AI 為每個主要功能生成文檔
- 創建數據模型和 API 接口文檔
- 維護架構圖和組件關係圖
- 持續測試:
- 要求 AI 為關鍵功能生成測試代碼
- 定期審查代碼質量和性能
- 使用 Cursor 的網絡搜索功能查找最佳實踐
9. 進階應用與最佳實踐
9.1 使用規則增強 AI 表現
Cursor 規則是提升 AI 性能的強大工具:
- 規則類型:
- 全局規則:在 Cursor 設定中配置,影響所有專案
- 專案規則:在專案根目錄創建
.cursor.rulesrc
文件,只對特定專案生效
- 創建規則目錄:
- 在專案根目錄創建
.cursor/rules
目錄 - 使用
.mdc
副檔名創建規則文件
- 在專案根目錄創建
- 規則示例:
- 風格規則:“始終使用函數組件而非類組件”
- 功能限制:“修改時只編輯必要文件,不要修改其他文件”
- 命名約定:“使用 camelCase 命名變數,PascalCase 命名組件”
- 代碼限制:“文件行數不應超過 400 行”
- 自動生成規則:
- 當 Cursor 出錯時,要求它反思錯誤並創建新規則
- 這些規則會幫助避免未來出現相同錯誤
- 積累專案特定的最佳實踐
9.2 Mac 應用程式開發
Cursor 可用於開發原生 Mac 應用程式,結合 Xcode 和 Swift:
- 開發環境設置:
- 安裝 Xcode(從 App Store 下載)
- 在 Xcode 創建新專案,選擇 macOS > App
- 選擇 Swift UI 作為界面,Swift 作為語言
- 在 Cursor 中開啟專案
- Mac 應用設計特點:
- 簡潔的界面設計,較少的品牌元素
- 通常包含側邊欄、內容區域和導覽列
- 標準的「交通燈」按鈕(關閉、最小化、最大化)
- 半透明側邊欄是原生 Mac 應用的標誌性特徵
- 自動支援深色模式
- 技術優勢:
- Swift UI 讓界面開發變得簡單
- 深色模式自動支援,不需額外設定
- 離線功能支援(使用 Core Data)
- 直接存取系統功能(麥克風、攝影機等)
- 使用 Cursor 的技巧:
- 保持主要檔案(ContentView)開啟,提供上下文
- 使用 AI 面板的 Agent 模式
- 利用 Xcode 的錯誤提示輔助除錯
- 使用 Cursor 的檢查點功能保存進度
9.3 使用 Aqua Voice 語音輸入
Aqua Voice 是一款強大的 AI 語音輸入工具,可與 Cursor 配合使用:
- 基本功能:
- 按住功能鍵說話,鬆開後自動將語音轉為文字
- 支援 Windows 和 Mac OS 平台
- 與各種軟體和網站相容
- 深度上下文功能:
- 經授權後可讀取螢幕上的所有內容
- 結合螢幕內容和語音,提供更精確的理解
- 有效減少錯誤,提高語音識別準確度
- 與 Cursor 配合使用:
- 用於口述需求和功能描述
- 快速記錄想法和問題
- 為 AI 提供更自然、更詳細的指示
- 提高效率的方法:
- 使用語音輸入描述複雜需求
- 口述細節豐富的 PRD 文檔
- 結合鍵盤操作和語音輸入切換工作模式
9.4 網絡搜索功能應用
Cursor 的網絡搜索功能可大幅增強 AI 的知識範圍:
- 啟用方法:
- 進入 Cursor 設定
- 點擊「功能(Features)」
- 啟用「網絡搜索工具(Web Search Tool)」
- 使用技巧:
- 在提問時加入「參考網絡」或「查找最新版本」等提示詞
- 確認 Cursor 請求執行網絡搜索的權限
- 審核搜索結果以確保準確性
- 適用場景:
- 查找最新版本資訊(如函式庫版本)
- 獲取實時數據、統計或新聞
- 查找文檔未涵蓋的第三方庫資訊
- 研究最新技術趨勢和最佳實踐
10. 寫作與非程式開發應用
10.1 Cursor 作為寫作環境
Cursor 不僅適用於程式開發,也是優秀的寫作工具:
- 基本設置:
- 安裝寫作相關擴展:
- Markdown All-in-One:提供快捷鍵和增強預覽功能
- Mermaid Chart Support:建立視覺圖表
- Markdown Lint:發現文檔問題
- Code Spell Checker:檢查拼寫錯誤
- Local History:儲存檔案版本歷史
- 安裝寫作相關擴展:
- VS Code/Cursor 寫作功能:
- 大綱視圖:顯示文檔標題層級結構
- 時間線視圖:追蹤文檔變更歷史
- 搜索功能:使用
Shift+Command+O
(Mac) 快速導航文檔
- AI 輔助寫作:
- 使用
Command+K
進行快速內聯編輯 - 利用 AI 側邊欄進行內容優化和建議
- 設定專門的寫作規則提高一致性
- 使用
10.2 ADA 框架與專業寫作
ADA 是一個經典的營銷框架,結合 Cursor 可提升專業寫作質量:
- ADA 框架介紹:
- 注意(Attention):獲取讀者注意力
- 興趣(Interest):讓讀者對內容產生興趣
- 渴望(Desire):建立情感連接
- 行動(Action):提供明確的行動呼籲
- 結合 Cursor 應用:
- 在提示中引入 ADA 框架結構
- 使用 XML 標籤結構化提示
- 引入上下文(如個人簡歷)增強內容相關性
- 建立受眾檔案分析
- 寫作工作流程:
- 研究階段:定義受眾、範圍和目標
- 規則創建:建立風格、語調和結構規則
- 內容生成:迭代方式生成內容
- 完善和重寫:編輯 AI 生成的內容,增加人性化
10.3 Cursor 在 Copywriting 中的應用
Cursor 可作為強大的文案寫作工具,特別適合技術背景的寫作者:
- 適用場景:
- 營銷郵件:客戶開發和產品推廣
- 產品描述:技術產品的特性和優勢說明
- 銷售頁面:轉換導向的網頁文案
- 技術博客:解釋複雜概念的文章
- 效果提升技巧:
- 非否問題:使用不能用"否"回答的問題(如"最近一次是什麼時候…?")
- 提示管理:創建模板和內容開發結構
- 工作流自動化:使用腳本和工具提高效率
- 人機協作:保持"人在循環中"的方式
- 案例:顧問服務宣傳郵件:
- 從基本提示開始
- 引入 ADA 框架提升結構
- 添加詳細的框架解釋
- 引入上下文和受眾分析
- 使用 Cursor 規則確保一致性
11. Cursor 免費使用與付費方案
11.1 免費使用方法詳解
雖然 Cursor 提供付費服務,但也有多種方法延長免費使用期:
- 臨時郵箱方式:
- 搜索並進入臨時郵箱平台
- 使用平台分配的隨機郵箱註冊 Cursor
- 在平台接收驗證碼完成註冊
- 賬號到期後重新獲取新臨時郵箱
- 無限郵箱方式:
- 在無限郵箱平台註冊主郵箱(如 example@domain.com)
- 註冊新 Cursor 賬號時使用變體(如 example+1@domain.com)
- 許多郵件系統會將發給變體地址的郵件轉發到主地址
- 可創建無限多個變體地址
- 繞過設備指紋檢測:
- Cursor 可能通過設備指紋限制使用
- 使用腳本修改 Cursor 配置中的用戶指紋
- 可使用專用工具或終端腳本執行此操作
- 這可能違反服務條款,使用時請考慮風險
11.2 付費方案優勢
雖然有免費使用的方法,但 Cursor 的付費方案提供多項獨特優勢:
- 功能完整性:
- 訪問所有高級功能和 AI 模型
- 無限量的 AI 請求和聊天
- 更大的上下文視窗(處理大型專案)
- 穩定的服務體驗:
- 避免反覆註冊和配置的麻煩
- 持續的工作流不會因賬號過期中斷
- 避免可能的服務條款違規風險
- 支持開發團隊:
- 幫助 Cursor 團隊持續改進產品
- 確保服務長期可持續發展
- 促進新功能開發和 AI 模型升級
- 企業支持:
- 付費方案通常包括技術支持
- 團隊協作功能
- 企業級安全和合規選項
11.3 免費替代品與補充工具
除了 Cursor,還有一些類似工具可作為免費替代或補充:
- Rook Code:
- 免費的開源 Cursor 替代品
- 運行在 Visual Studio Code 中
- 需要提供自己的 Anthropic API 密鑰
- 支持創建自定義代理模式
- Windsurf:
- 提供瀏覽器預覽功能
- 一鍵部署功能與 Netlify 整合
- 使用 Select Element 功能直接選擇 UI 元素
- Context 7:
- 免費提供最新函式庫知識
- 支援 Cursor 和其他編輯器
- 由 Upstash 團隊維護
12. Cursor 與其他工具比較
12.1 Cursor vs. VS Code + GitHub Copilot
Cursor 與 VS Code + GitHub Copilot 的主要區別:
- 整合深度:
- Cursor 提供更深層次的 AI 整合
- Copilot 作為 VS Code 插件,與編輯器分離度較高
- Cursor 可進行文件操作和執行命令
- 理解能力:
- Cursor 能理解整個專案結構和上下文
- Copilot 主要關注當前編輯的文件
- Cursor 支持多種上下文管理選項
- 適用場景:
- Copilot 適合單文件的程式碼補全和建議
- Cursor 更適合全面的專案開發和管理
- 對於複雜任務,Cursor 提供更完整的支持
12.2 Cursor vs. Windsurf
Windsurf 是另一個 AI 編碼工具,與 Cursor 相比:
- 瀏覽器預覽功能:
- Windsurf 內建瀏覽器預覽功能
- 自動傳送控制台錯誤
- 提供 Select Element 功能直接選取畫面元素
- 部署整合:
- Windsurf 直接整合雲端部署功能
- 使用 Netlify 作為預設雲端主機
- 提供免費部署計劃(100 GB 頻寬等)
- 規則與工作流:
- 兩者均支持自定義規則
- Windsurf 的 Working Space Rules 類似 Cursor 的專案規則
- 功能上有重疊,但實現方式和界面不同
12.3 何時選擇 Cursor
考慮以下因素選擇 Cursor:
- 開發複雜度:
- 大型專案開發時 Cursor 優勢明顯
- 需要深度 AI 輔助的複雜功能
- 多語言、多框架專案
- 學習曲線:
- 熟悉 VS Code 的開發者能快速上手
- 開發經驗較少者可能更適合 Cursor 的全面輔助
- 開發頻率:
- 經常進行開發的專業人士值得投資 Cursor 付費計劃
- 偶爾開發的用戶可考慮免費替代品
- 特殊需求:
- 需要特定 AI 模型(如 Claude)
- 需要高度自定義的 AI 行為
- 需要處理大型代碼庫
以上內容涵蓋了 Cursor AI 編輯器的主要功能、使用技巧、進階應用和最佳實踐。這個全面指南應該能夠幫助不同層級的開發者充分利用 Cursor 提升開發效率。隨著 AI 工具的不斷發展,這些技能將成為現代開發者的核心競爭力。