Cursor AI 編輯器完全指南:從安裝到進階應用全攻略

Cursor AI 編輯器完全指南

章節目錄

  1. Cursor 基礎概念
  2. 安裝與環境設定
  3. Cursor 核心功能
  4. AI 溝通與互動技巧
  5. 上下文管理與文檔整合
  6. Context 7 與外部工具整合
  7. 任務管理系統
  8. 實際專案開發流程
  9. 進階應用與最佳實踐
  10. 寫作與非程式開發應用
  11. Cursor 免費使用與付費方案
  12. 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 下載與安裝流程

  1. 下載 Cursor
    • 前往 cursor.com 官網下載適合您作業系統的版本
    • Cursor 支援 Windows、macOS 和 Linux 平台
  2. 安裝程序
    • 執行下載的安裝檔案
    • 跟隨安裝嚮導完成安裝
  3. 初始設定
    • 首次啟動時,選擇編輯器偏好設定
    • 設定回覆語言(可選擇中文或其他語言)
    • 設定終端命令偏好
  4. VS Code 設定導入
    • 如果您之前使用過 VS Code,Cursor 可一鍵導入其配置和擴展
    • 在初始設定畫面選擇「導入 VS Code 設定」選項
  5. 帳號註冊
    • 使用電子郵件註冊或登入 Cursor 帳號
    • 註冊後可獲得 14 天免費 Pro 試用期

2.2 界面漢化設定

  1. 安裝中文語言包
    • 點擊左側邊欄的擴展按鈕(或按 Ctrl+Shift+X
    • 在搜索框中輸入「Chinese」
    • 找到並安裝「Chinese (Simplified)」或「Chinese (Traditional)」擴展
    • 安裝完成後重啟 Cursor
  2. 切換顯示語言
    • 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 基本配置與設定

  1. AI 模型選擇
    • 在設定中找到「Models」選項
    • 設定默認 AI 模型(推薦 Claude 3.5 Sonnet 進行編碼)
    • 可根據需求啟用或停用特定模型
  2. 編輯器基本設定
    • 字體大小與字型
    • 主題選擇
    • Tab 寬度與縮排設定
    • 自動儲存選項
  3. 基礎快捷鍵
    • 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 設定
  4. Git 整合配置
    • 設定 Git 用戶名和電子郵件
    • 配置 Git 憑證存儲
    • 啟用/停用 Git 變更自動提交功能

3. Cursor 核心功能

3.1 AI 聊天面板詳解

AI 聊天面板是 Cursor 的核心功能之一,它不只是一個聊天工具,而是與編輯器深度整合的 AI 助手:
面板組成:

  • 輸入框:輸入提示,讓 AI 回答問題或產生程式碼
  • 上方區域:可添加 AI 處理請求時需考慮的其他上下文
  • 左下方:模式選擇下拉選單
    • Agent 模式:用於修改程式碼,可以運行命令和自動提取上下文
    • Ask 模式:用於設計或詢問關於程式碼的問題,不會修改檔案
  • 右下方:模型選擇下拉選單
    • 推薦使用 Claude 3.5 Sonnet 進行編碼
    • Claude 3.7 Sonnet 功能強大但有時會過度設計

功能特點:

  1. 上下文感知:能夠理解整個專案結構,感知所有檔案內容
  2. 程式碼生成:可以為專案產生新的程式碼檔案
  3. 多模型支援:支援多種 AI 大模型,可根據任務選擇最適合的模型
  4. 圖片支援:可以上傳圖片作為參考,如設計稿或界面截圖
  5. 聊天歷史:保存對話記錄,方便回顧和繼續之前的討論

3.2 程式碼自動補全與修改

Cursor 提供智能的程式碼自動補全與修改功能,這是開發者提升效率的重要工具:

  1. 自動完成
    • 當您輸入代碼時,Cursor 會自動提供智能補全建議
    • 按 Tab 鍵接受建議
    • 補全不僅限於單詞,還可包括完整的函數、類或代碼塊
  2. 光標預測
    • Cursor 能預測下一個可能的編輯點
    • 提供智能的代碼修改建議
    • 這一功能在許多同類產品中都無法做到這麼快速和精準
  3. 內聯代碼編輯
    • 選擇程式碼後按 Ctrl+KCommand+K
    • 可在編輯器中直接請求特定修改,不必切換到聊天面板
    • 適合對特定代碼片段進行快速修改或優化
  4. 代碼重構
    • AI 可以協助進行代碼重構,如提取方法、重命名變數等
    • 保持代碼結構和功能不變,同時提高可讀性和維護性

3.3 Copilot 模式詳解

Copilot 模式是 Cursor 的另一個核心功能,與聊天面板不同,它更專注於程式碼生成和修改:
兩種子模式:

  1. Normal 模式
    • 可檢索代碼庫和文檔
    • 正常創建和寫入文件
    • 執行速度較快,適合簡單任務
  2. Agent 模式
    • 除了 Normal 模式的功能外
    • 可自動提取相關上下文
    • 能夠運行終端命令
    • 按語義搜索代碼
    • 自動執行文件操作
    • 適合複雜功能開發

使用建議:

  • 對於複雜功能,使用 Agent 模式以利用其自動上下文提取和命令執行能力
  • 對於簡單功能,使用 Normal 模式以獲得更快的回應速度
  • 透過聊天面板與 Copilot 互動,可獲得更精確的代碼生成結果

3.4 終端命令生成

Cursor 的終端命令生成功能讓開發者可以用自然語言生成複雜的命令:

  1. 使用方法
    • 在終端中按 Ctrl+KCommand+K
    • 輸入自然語言描述您想執行的操作
    • Cursor 會生成並建議相應的命令
  2. 應用場景
    • 生成複雜的 git 命令
    • 建立正確的 npm 或 yarn 指令
    • 產生適合專案的建置或部署命令
    • 快速找到並執行難以記住的系統命令
  3. YOLO 模式
    • 可設定 Cursor 自動執行生成的命令
    • 適用於可靠且重複性高的操作
    • 需謹慎使用,確保生成的命令安全可靠

4. AI 溝通與互動技巧

4.1 提示工程與有效溝通

與 Cursor AI 有效溝通需要良好的提示工程技巧,以下是提高 AI 回應質量的方法:

  1. 明確需求
    • 清晰說明您想要完成的任務
    • 提供具體範例或參考
    • 指明預期結果的格式或風格
  2. 結構化提示
    • 使用條列清單分解複雜需求
    • 按優先順序排列要求
    • 對重要元素加以強調
  3. 使用 AI 的思考模式
    • 在 AI 模型下拉選單上方找到「思考」(Thinking)選項
    • 啟用此功能讓 AI 進行更深入的推理過程
    • 適用於複雜問題和架構決策
  4. 提供足夠上下文
    • 確保相關文件在編輯器中打開
    • 使用 @ 符號標記關鍵文件
    • 附加任何相關的外部資料或連結

4.2 解決 AI 混亂修改問題

使用 AI 編輯器時,一個常見問題是 AI 可能會進行過度修改或混亂更改,以下是防止這種情況的技巧:

  1. 讓 AI 複述需求
    • 提出需求後,請 AI 用自己的話複述任務
    • 確認 AI 理解無誤後再進行實際修改
    • 糾正任何誤解或缺漏
  2. 明確修改範圍
    • 具體指出哪些文件可以修改
    • 說明哪些部分不應被更動
    • 設定明確的修改界限
  3. 需求拆解
    • 將大型需求分解為小型、獨立的任務
    • 逐步完成每個子任務
    • 避免一次性要求複雜更改
  4. 結構化指導
    • 將 AI 視為需要明確指導的助手
    • 清晰描述問題或需求
    • 必要時提供解決思路和示例參考

4.3 版本控制與檢查點

Cursor 提供了強大的版本控制功能,可防止 AI 變更導致的問題:

  1. 檢查點功能
    • 在進行重大修改前使用「Create Checkpoint」功能
    • 發現問題時可使用「Restore Checkpoint」恢復先前版本
    • 檢查點可作為短期的安全網
  2. Git 整合
    • 定期提交變更以保存重要進度
    • 使用有意義的提交信息描述 AI 協助的變更
    • 在新功能開發前建立新分支
  3. 對比與審核
    • 在接受 AI 修改前檢查其建議的變更
    • 仔細審核每個修改部分,確保符合預期
    • 對於不確定的變更,可以選擇性接受而非完全採納
  4. 漸進式開發
    • 採用小步迭代的方式
    • 每次完成小功能後測試並提交
    • 避免長時間無提交的大規模改動

5. 上下文管理與文檔整合

5.1 文檔整合與添加

Cursor 的強大之處在於它可以整合外部文檔作為 AI 的上下文,提升 AI 的回應質量:

  1. 添加外部文檔步驟
    • 點擊設定圖標
    • 選擇「Features」
    • 向下滾動到「Docs」部分
    • 點擊「Add New Doc」並貼上文檔 URL
    • Cursor 會自動抓取並索引該文檔及其子頁面
  2. 可添加的文檔類型
    • API 參考文檔
    • 框架或庫的官方文檔
    • 技術指南和教學資源
    • 開源專案文檔
  3. 文檔管理技巧
    • 為文檔設定易識別的前綴名稱
    • 定期更新文檔連結以獲取最新資訊
    • 移除不再使用的文檔以減少干擾
  4. 臨時使用外部文檔
    • 在聊天輸入框中輸入 @
    • 選擇「Docs」選項
    • 選擇已添加的文檔或添加新連結
    • 這種方式適合僅在當前對話中參考某文檔

5.2 上下文管理選項詳解

有效的上下文管理是提高 AI 回應質量的關鍵,Cursor 提供多種上下文管理選項:

  1. @files(引用文件)
    • 在提示中直接引用專案內的特定文件
    • 語法: @filename.ext
    • 使 AI 在回應時特別關注該文件內容
  2. @folders(引用資料夾)
    • 引用整個資料夾中的所有文件
    • 語法: @folder\_name/
    • 適用於需要 AI 理解相關組件或模塊的場景
  3. @code(選中代碼)
    • 將選中的程式碼片段添加到 AI 上下文
    • 可在編輯器中選擇代碼後使用「Add to Chat」選項
    • 適合讓 AI 解釋或修改特定代碼段
  4. @doc(官方文檔)
    • 選擇官方文檔作為上下文
    • 適合需要 AI 參考特定技術文檔的場景
  5. @web(網絡搜索)
    • 讓 AI 自行搜尋相關資訊
    • 用於獲取最新資訊或 Cursor 內置文檔未涵蓋的資料
    • 使用方法:在提示後添加 @web
  6. @git(Git 歷史)
    • 引用歷史 Git 提交記錄
    • 適用於讓 AI 了解代碼變更歷史和原因
    • 可用於比較多個提交間的差異

5.3 Codebase 功能應用

Codebase 功能是 Cursor 的強大工具,可幫助 AI 更好地理解複雜專案:

  1. 功能說明
    • @codebase 會採集代碼中重要的文件或代碼塊
    • 將本地代碼庫分割成小塊語言數據
    • 根據相關性排序上下文
    • 透過 AI 推理給出回應
  2. 使用流程
    • 收集:掃描整個項目,查找與指令相關的文件或代碼塊
    • 排序:根據相關性排序上下文
    • 推理:AI 思考如何利用上下文
    • 生成:提供回應或解決方案
  3. 適用場景
    • 大型專案導航與理解
    • 尋找相關功能實現
    • 系統架構分析
    • 代碼重用和模式識別
  4. 使用技巧
    • 提供明確的查詢關鍵詞
    • 描述您正在尋找的功能或模式
    • 指定特定文件類型或目錄範圍
    • 結合其他上下文管理選項增強效果

5.4 圖片上傳與參考

Cursor 支持圖片作為上下文資料,這對於 UI 開發特別有用:

  1. 支持的場景
    • UI/UX 設計實現
    • 參考視覺風格和佈局
    • 錯誤截圖分析
    • 數據圖表解讀
  2. 上傳方法
    • 在聊天面板中點擊上傳圖片按鈕
    • 拖放圖片到聊天窗口
    • 複製後直接粘貼到聊天窗口
  3. 使用技巧
    • 提供清晰的圖片
    • 標註重要元素或區域
    • 結合文字描述具體需求
    • 指明參考圖片的目的(如「實現類似的佈局」)

6. Context 7 與外部工具整合

6.1 Context 7 介紹

Context 7 是 Upstash 團隊開發的免費工具,可解決 Cursor 模型對最新函式庫知識不足的問題:

  1. 核心價值
    • 提供最新函式庫和框架的準確資訊
    • 避免過時的文檔或示例
    • 減少 AI 生成的幻覺代碼
    • 提高代碼生成的準確性
  2. 工作原理
    • 首先查找目標函式庫(如 Next.js)
    • 然後查找特定功能的文檔(如 onNavigate)
    • 直接從源代碼獲取並返回完美的代碼示例
  3. 支援的函式庫
    • 超過 850 個函式庫,數量持續增加
    • 包括 Next.js、Clerk、MongoDB、Upstash、Fast API 等熱門選項
    • 用戶可請求索引新的文檔

6.2 Context 7 安裝與配置

安裝 Context 7 的步驟非常簡單:

  1. 獲取 MCP 伺服器命令
    • 前往 Context 7 的 GitHub 儲存庫
    • 找到並複製 MCP 伺服器命令(通常是一個簡單的 NPX 命令)
  2. 在 Cursor 中配置
    • 開啟 Cursor 設定(使用 Ctrl+Shift+JCommand+Shift+J
    • 前往 MCP 設定區域
    • 點擊「添加新的全局 MCP 伺服器」
    • 貼上剛才複製的命令
    • 保存設定
  3. 驗證安裝
    • 返回編輯器
    • 在聊天窗口輸入 “use context 7” 然後按 Enter
    • 如果安裝成功,應該會看到關於 Context 7 的確認信息

6.3 MCP 伺服器整合

MCP (Model Context Protocol) 是一個強大的擴展機制,允許 Cursor 與外部服務交互:

  1. MCP 基本概念
    • MCP 是一個標準協議,用於連接 Cursor 與其他數據來源
    • 允許 AI 訪問和使用外部工具和服務
    • 擴展 Cursor 的能力範圍
  2. 設置 MCP 伺服器
    • 找到目標服務的 MCP 文檔(如 Zapier MCP)
    • 在 Cursor 設定中找到 MCP 選項
    • 添加新的全局 MCP 伺服器
    • 配置服務參數和認證信息
  3. Zapier MCP 設置
    • 前往 Zapier MCP 文檔
    • 創建 MCP 伺服器
    • 複製伺服器連結
    • 在 Cursor MCP 設定中添加
    • 添加 API helper 等工具
  4. N8N MCP 設置
    • 更新 N8N 到支持 MCP 的版本(如 1.88.0)
    • 在 N8N 界面創建 MCP 伺服器節點
    • 創建所需的工具函數
    • 獲取伺服器 URL 並在 Cursor 中配置

6.4 外部服務整合案例

以下是一些整合外部服務的實際案例:

  1. Zapier API 整合
    • 設置 Zapier MCP 伺服器
    • 創建 API helper 工具
    • 在 Cursor 中請求 API 相關代碼
    • AI 會自動參考 API 文檔生成準確代碼
    • 示例:為 React 應用添加電子郵件訂閱功能,整合 Mail Bluster API
  2. 網絡搜索整合
    • 啟用 Cursor 的網絡搜索工具
    • 在提問時添加「參考網絡」或「查找最新版本」等提示詞
    • AI 會執行實時搜索並提供最新資訊
    • 適用於查找最新版本資訊、實時數據或新聞
  3. GitHub 整合
    • 通過 MCP 連接 GitHub
    • 可直接查詢代碼庫信息
    • 分析提交歷史和變更
    • 獲取項目統計數據

7. 任務管理系統

7.1 基本任務管理方法

有效的任務管理可以大幅減少 Cursor 出錯的機率:

  1. 簡單實施方法
    • 創建一個 cursor rule,告訴 Cursor 參考 task.md 文件
    • 維護 task.md 文件以追蹤已完成和未完成的任務
    • 讓 Cursor 在完成任務後自動標記為已完成
  2. 任務文件結構
    • 任務標題和描述
    • 優先級和依賴關係
    • 預計完成時間
    • 完成狀態(未開始、進行中、已完成)
    • 備註和注意事項
  3. 使用方法
    • 創建初始任務列表(可請求 AI 協助)
    • 讓 Cursor 參考此文件進行開發
    • 在每個任務完成後更新狀態
    • 根據進度調整任務順序和優先級

7.2 Taskmaster 工具深度剖析

Taskmaster 是一個強大的任務管理工具,能更深入地整合到 Cursor 中:

  1. 工具定位

    • 本質上是「產品經理的程式化表現」
    • 協助開發者維持產品管理思維
    • 自動化任務拆分和管理過程

    1. 安裝流程
      • 使用全局安裝命令: npm install -g taskmaster-ai
      • 在專案根目錄執行: taskmaster init
      • 設置 Anthropic API 金鑰
      • 可選擇性添加 Perplexity API 金鑰,用於額外研究
      • 完成基本設定問答,系統自動生成所需檔案
    2. 自動生成的檔案結構
      • .cursor/rules 目錄:包含多個 MDC 檔案,定義 Cursor 如何解讀命令
      • scripts 資料夾:包含運行 Taskmaster 的 JavaScript 文件
      • 範例文檔:PRD (產品需求文檔)、RCA (根本原因分析) 範例
      • 任務相關檔案:任務複雜度報告、tasks.json,儲存所有任務詳情
    3. 核心功能
      • PRD 解析:使用 taskmaster parse PRD 將需求分解為小任務
      • 任務管理:使用 taskmaster list 查看所有任務及依賴關係
      • 複雜度分析:使用 taskmaster analyze complexity 評估任務難度
      • 細分複雜任務:自動將複雜任務分解為更小的部分
      • 任務執行:使用 taskmaster next 移至下一個任務

    7.3 使用 Taskmaster 的工作流程

    1. 創建 PRD (產品需求文檔)
      • 可使用 Cursor 與 AI 對話來生成初步 PRD
      • 描述專案目標、功能需求和技術規格
      • PRD 應包含功能目標、目標受眾、詳細設計規範和技術實現細節
    2. 解析 PRD 為任務
      • 執行 taskmaster parse PRD 命令
      • 系統自動分析 PRD 並創建結構化任務清單
      • 每個任務包含 ID、標題、描述、狀態、依賴關係等信息
    3. 分析任務複雜度
      • 執行 taskmaster analyze complexity 命令
      • 系統評估每個任務的難度並生成報告
      • 對於複雜任務,可使用 taskmaster expand 進一步分解
    4. 任務實施
      • 系統按照依賴關係順序執行任務
      • Cursor 會將任務標記為「進行中」再標記為「已完成」
      • 使用 taskmaster next 移動到下一個任務
    5. 問題修復流程
      • 當 Cursor 出錯時,提示它反思錯誤原因
      • 創建新規則避免未來出現相同錯誤
      • 在新對話中列出發現的問題並尋求解決方案

    7.4 Planning.md 與 Task.md 的配合使用

    Taskmaster 使用兩個關鍵文件來協調開發:

    1. Planning.md (計劃文件)
      • 包含高階資訊,類似產品規格書
      • 內容包括:
        • Overview:專案總體概述
        • Target User:目標用戶群體
        • 核心功能:主要功能列表
        • 技術架構:前/後端技術選擇、資料庫等
    2. Task.md (任務文件)
      • 列出開發的具體步驟和功能實現清單
      • 包含環境設定、UI 開發、資料庫整合等任務
      • 由 Cursor 自動更新完成狀態
      • 方便分段開發,使流程更有條理
    3. 配合使用策略
      • 先創建 Planning.md 定義專案範圍和目標
      • 使用 Taskmaster 從 Planning.md 生成 Task.md
      • 讓 Cursor 遵循這兩個文件進行開發
      • 在開發過程中不斷更新和調整這兩個文件

    8. 實際專案開發流程

    8.1 設計新專案:React + Tailwind 著陸頁面

    以下是使用 Cursor 建立 React + Tailwind 著陸頁面的完整流程:

    1. 準備工作
      • 開啟 Cursor 並創建新專案資料夾
      • 開啟 AI 聊天面板,選擇 Agent 模式
      • 選擇 Claude 3.5 Sonnet 模型
    2. 初始化專案
      • 向 AI 描述項目:“我想創建一個使用 React 和 Tailwind 的現代著陸頁面”
      • 提供主要元素需求:導航欄、英雄區域、功能區塊、定價表格和頁尾
      • 啟用 YOLO 模式讓 Cursor 自動執行命令
    3. 框架搭建
      • AI 會運行命令初始化 React 專案
      • 安裝 Tailwind CSS 和必要依賴
      • 創建基本文件結構
      • 設定 Tailwind 配置
    4. 組件開發
      • 讓 AI 創建各個組件:Header、Hero、Features、Pricing、Footer
      • 審核 AI 提供的代碼,注意紅色(刪除)和黃綠色(添加)標記
      • 逐一或全部接受 AI 的修改
    5. 樣式調整
      • 要求 AI 優化響應式設計
      • 調整顏色方案和間距
      • 添加動畫和交互效果
    6. 完善與測試
      • 運行專案並在瀏覽器中查看結果
      • 記錄問題並在 AI 聊天中描述需要修復的部分
      • 讓 AI 進行必要的調整

    8.2 功能迭代與錯誤修復

    在開發過程中,經常需要迭代功能和修復錯誤,Cursor 提供了強大的支持:

    1. 問題識別
      • 在瀏覽器中測試應用,發現 UI 或功能問題
      • 使用開發者工具獲取錯誤信息
      • 截圖記錄問題狀態
    2. 問題描述
      • 在與 AI 的相同聊天中描述具體問題
      • 提供錯誤信息和截圖
      • 說明期望的正確行為
    3. 解決方案
      • AI 會分析問題並提出修復方案
      • 生成修復代碼,標記修改部分
      • 說明修改原因和解決思路
    4. 版本恢復
      • 使用「Restore Checkpoint」按鈕恢復到之前的代碼版本
      • 如果修復導致新問題,可快速回退
      • 保持多個檢查點以確保安全開發
    5. Fix and Chat
      • 使用 Cursor 的「Fix and Chat」功能快速解決錯誤
      • 選中錯誤代碼,使用快捷鍵調用此功能
      • AI 會專注於解決特定問題而不影響其他代碼

    8.3 添加交互功能:Snake 遊戲案例

    以下是在網站中添加 Snake 遊戲功能的流程,展示 Cursor 處理複雜功能的能力:

    1. 新聊天準備
      • 為新功能開啟新的聊天,避免上下文干擾
      • 選擇 Agent 模式以允許檔案修改
    2. 需求描述
      • 明確描述遊戲功能:“我想添加一個簡單的 Snake 遊戲,使用 Canvas API 實現”
      • 提供遊戲規則和控制方式
      • 描述視覺風格要求
    3. 文件創建
      • AI 會創建新的遊戲組件文件: SnakeGame.jsx
      • 自動更新必要的現有文件,如主頁面組件
      • 添加相關樣式文件
    4. 核心功能實現
      • AI 會實現核心遊戲邏輯:蛇的移動、成長和碰撞檢測
      • 設置基本的鍵盤控制
      • 創建遊戲循環和狀態管理
    5. 迭代改進
      • 測試基本功能後提出改進建議
      • 要求添加分數系統、速度調整、遊戲結束處理等
      • AI 將逐步改進功能,每次提供清晰的代碼修改
    6. 整合到頁面
      • 將遊戲組件添加到適當的頁面位置
      • 確保響應式設計適配不同屏幕尺寸
      • 優化性能和用戶體驗

    8.4 大型專案開發技巧

    處理大型專案需要更系統化的方法,以下是在 Cursor 中開發大型專案的技巧:

    1. 上下文管理
      • 使用 @ 符號標記關鍵文件,幫助 AI 專注於重要代碼
      • 創建專門的上下文文件,描述系統架構和關鍵部分
      • 使用 Codebase 功能讓 AI 了解整體代碼庫
    2. 分層開發
      • 按照前端 UI、API 層、後端服務等層次分別開發
      • 針對每一層使用獨立的聊天會話
      • 確保層與層之間的接口一致
    3. 模塊化請求
      • 將大功能分解為小的模塊化請求
      • 每次聊天專注於一個明確功能或組件
      • 逐步整合這些模塊
    4. 文檔整理
      • 要求 AI 為每個主要功能生成文檔
      • 創建數據模型和 API 接口文檔
      • 維護架構圖和組件關係圖
    5. 持續測試
      • 要求 AI 為關鍵功能生成測試代碼
      • 定期審查代碼質量和性能
      • 使用 Cursor 的網絡搜索功能查找最佳實踐

    9. 進階應用與最佳實踐

    9.1 使用規則增強 AI 表現

    Cursor 規則是提升 AI 性能的強大工具:

    1. 規則類型
      • 全局規則:在 Cursor 設定中配置,影響所有專案
      • 專案規則:在專案根目錄創建 .cursor.rulesrc 文件,只對特定專案生效
    2. 創建規則目錄
      • 在專案根目錄創建 .cursor/rules 目錄
      • 使用 .mdc 副檔名創建規則文件
    3. 規則示例
      • 風格規則:“始終使用函數組件而非類組件”
      • 功能限制:“修改時只編輯必要文件,不要修改其他文件”
      • 命名約定:“使用 camelCase 命名變數,PascalCase 命名組件”
      • 代碼限制:“文件行數不應超過 400 行”
    4. 自動生成規則
      • 當 Cursor 出錯時,要求它反思錯誤並創建新規則
      • 這些規則會幫助避免未來出現相同錯誤
      • 積累專案特定的最佳實踐

    9.2 Mac 應用程式開發

    Cursor 可用於開發原生 Mac 應用程式,結合 Xcode 和 Swift:

    1. 開發環境設置
      • 安裝 Xcode(從 App Store 下載)
      • 在 Xcode 創建新專案,選擇 macOS > App
      • 選擇 Swift UI 作為界面,Swift 作為語言
      • 在 Cursor 中開啟專案
    2. Mac 應用設計特點
      • 簡潔的界面設計,較少的品牌元素
      • 通常包含側邊欄、內容區域和導覽列
      • 標準的「交通燈」按鈕(關閉、最小化、最大化)
      • 半透明側邊欄是原生 Mac 應用的標誌性特徵
      • 自動支援深色模式
    3. 技術優勢
      • Swift UI 讓界面開發變得簡單
      • 深色模式自動支援,不需額外設定
      • 離線功能支援(使用 Core Data)
      • 直接存取系統功能(麥克風、攝影機等)
    4. 使用 Cursor 的技巧
      • 保持主要檔案(ContentView)開啟,提供上下文
      • 使用 AI 面板的 Agent 模式
      • 利用 Xcode 的錯誤提示輔助除錯
      • 使用 Cursor 的檢查點功能保存進度

    9.3 使用 Aqua Voice 語音輸入

    Aqua Voice 是一款強大的 AI 語音輸入工具,可與 Cursor 配合使用:

    1. 基本功能
      • 按住功能鍵說話,鬆開後自動將語音轉為文字
      • 支援 Windows 和 Mac OS 平台
      • 與各種軟體和網站相容
    2. 深度上下文功能
      • 經授權後可讀取螢幕上的所有內容
      • 結合螢幕內容和語音,提供更精確的理解
      • 有效減少錯誤,提高語音識別準確度
    3. 與 Cursor 配合使用
      • 用於口述需求和功能描述
      • 快速記錄想法和問題
      • 為 AI 提供更自然、更詳細的指示
    4. 提高效率的方法
      • 使用語音輸入描述複雜需求
      • 口述細節豐富的 PRD 文檔
      • 結合鍵盤操作和語音輸入切換工作模式

    9.4 網絡搜索功能應用

    Cursor 的網絡搜索功能可大幅增強 AI 的知識範圍:

    1. 啟用方法
      • 進入 Cursor 設定
      • 點擊「功能(Features)」
      • 啟用「網絡搜索工具(Web Search Tool)」
    2. 使用技巧
      • 在提問時加入「參考網絡」或「查找最新版本」等提示詞
      • 確認 Cursor 請求執行網絡搜索的權限
      • 審核搜索結果以確保準確性
    3. 適用場景
      • 查找最新版本資訊(如函式庫版本)
      • 獲取實時數據、統計或新聞
      • 查找文檔未涵蓋的第三方庫資訊
      • 研究最新技術趨勢和最佳實踐

    10. 寫作與非程式開發應用

    10.1 Cursor 作為寫作環境

    Cursor 不僅適用於程式開發,也是優秀的寫作工具:

    1. 基本設置
      • 安裝寫作相關擴展:
        • Markdown All-in-One:提供快捷鍵和增強預覽功能
        • Mermaid Chart Support:建立視覺圖表
        • Markdown Lint:發現文檔問題
        • Code Spell Checker:檢查拼寫錯誤
        • Local History:儲存檔案版本歷史
    2. VS Code/Cursor 寫作功能
      • 大綱視圖:顯示文檔標題層級結構
      • 時間線視圖:追蹤文檔變更歷史
      • 搜索功能:使用 Shift+Command+O (Mac) 快速導航文檔
    3. AI 輔助寫作
      • 使用 Command+K 進行快速內聯編輯
      • 利用 AI 側邊欄進行內容優化和建議
      • 設定專門的寫作規則提高一致性

    10.2 ADA 框架與專業寫作

    ADA 是一個經典的營銷框架,結合 Cursor 可提升專業寫作質量:

    1. ADA 框架介紹
      • 注意(Attention):獲取讀者注意力
      • 興趣(Interest):讓讀者對內容產生興趣
      • 渴望(Desire):建立情感連接
      • 行動(Action):提供明確的行動呼籲
    2. 結合 Cursor 應用
      • 在提示中引入 ADA 框架結構
      • 使用 XML 標籤結構化提示
      • 引入上下文(如個人簡歷)增強內容相關性
      • 建立受眾檔案分析
    3. 寫作工作流程
      • 研究階段:定義受眾、範圍和目標
      • 規則創建:建立風格、語調和結構規則
      • 內容生成:迭代方式生成內容
      • 完善和重寫:編輯 AI 生成的內容,增加人性化

    10.3 Cursor 在 Copywriting 中的應用

    Cursor 可作為強大的文案寫作工具,特別適合技術背景的寫作者:

    1. 適用場景
      • 營銷郵件:客戶開發和產品推廣
      • 產品描述:技術產品的特性和優勢說明
      • 銷售頁面:轉換導向的網頁文案
      • 技術博客:解釋複雜概念的文章
    2. 效果提升技巧
      • 非否問題:使用不能用"否"回答的問題(如"最近一次是什麼時候…?")
      • 提示管理:創建模板和內容開發結構
      • 工作流自動化:使用腳本和工具提高效率
      • 人機協作:保持"人在循環中"的方式
    3. 案例:顧問服務宣傳郵件
      • 從基本提示開始
      • 引入 ADA 框架提升結構
      • 添加詳細的框架解釋
      • 引入上下文和受眾分析
      • 使用 Cursor 規則確保一致性

    11. Cursor 免費使用與付費方案

    11.1 免費使用方法詳解

    雖然 Cursor 提供付費服務,但也有多種方法延長免費使用期:

    1. 臨時郵箱方式
      • 搜索並進入臨時郵箱平台
      • 使用平台分配的隨機郵箱註冊 Cursor
      • 在平台接收驗證碼完成註冊
      • 賬號到期後重新獲取新臨時郵箱
    2. 無限郵箱方式
      • 在無限郵箱平台註冊主郵箱(如 example@domain.com
      • 註冊新 Cursor 賬號時使用變體(如 example+1@domain.com
      • 許多郵件系統會將發給變體地址的郵件轉發到主地址
      • 可創建無限多個變體地址
    3. 繞過設備指紋檢測
      • Cursor 可能通過設備指紋限制使用
      • 使用腳本修改 Cursor 配置中的用戶指紋
      • 可使用專用工具或終端腳本執行此操作
      • 這可能違反服務條款,使用時請考慮風險

    11.2 付費方案優勢

    雖然有免費使用的方法,但 Cursor 的付費方案提供多項獨特優勢:

    1. 功能完整性
      • 訪問所有高級功能和 AI 模型
      • 無限量的 AI 請求和聊天
      • 更大的上下文視窗(處理大型專案)
    2. 穩定的服務體驗
      • 避免反覆註冊和配置的麻煩
      • 持續的工作流不會因賬號過期中斷
      • 避免可能的服務條款違規風險
    3. 支持開發團隊
      • 幫助 Cursor 團隊持續改進產品
      • 確保服務長期可持續發展
      • 促進新功能開發和 AI 模型升級
    4. 企業支持
      • 付費方案通常包括技術支持
      • 團隊協作功能
      • 企業級安全和合規選項

    11.3 免費替代品與補充工具

    除了 Cursor,還有一些類似工具可作為免費替代或補充:

    1. Rook Code
      • 免費的開源 Cursor 替代品
      • 運行在 Visual Studio Code 中
      • 需要提供自己的 Anthropic API 密鑰
      • 支持創建自定義代理模式
    2. Windsurf
      • 提供瀏覽器預覽功能
      • 一鍵部署功能與 Netlify 整合
      • 使用 Select Element 功能直接選擇 UI 元素
    3. Context 7
      • 免費提供最新函式庫知識
      • 支援 Cursor 和其他編輯器
      • 由 Upstash 團隊維護

    12. Cursor 與其他工具比較

    12.1 Cursor vs. VS Code + GitHub Copilot

    Cursor 與 VS Code + GitHub Copilot 的主要區別:

    1. 整合深度
      • Cursor 提供更深層次的 AI 整合
      • Copilot 作為 VS Code 插件,與編輯器分離度較高
      • Cursor 可進行文件操作和執行命令
    2. 理解能力
      • Cursor 能理解整個專案結構和上下文
      • Copilot 主要關注當前編輯的文件
      • Cursor 支持多種上下文管理選項
    3. 適用場景
      • Copilot 適合單文件的程式碼補全和建議
      • Cursor 更適合全面的專案開發和管理
      • 對於複雜任務,Cursor 提供更完整的支持

    12.2 Cursor vs. Windsurf

    Windsurf 是另一個 AI 編碼工具,與 Cursor 相比:

    1. 瀏覽器預覽功能
      • Windsurf 內建瀏覽器預覽功能
      • 自動傳送控制台錯誤
      • 提供 Select Element 功能直接選取畫面元素
    2. 部署整合
      • Windsurf 直接整合雲端部署功能
      • 使用 Netlify 作為預設雲端主機
      • 提供免費部署計劃(100 GB 頻寬等)
    3. 規則與工作流
      • 兩者均支持自定義規則
      • Windsurf 的 Working Space Rules 類似 Cursor 的專案規則
      • 功能上有重疊,但實現方式和界面不同

    12.3 何時選擇 Cursor

    考慮以下因素選擇 Cursor:

    1. 開發複雜度
      • 大型專案開發時 Cursor 優勢明顯
      • 需要深度 AI 輔助的複雜功能
      • 多語言、多框架專案
    2. 學習曲線
      • 熟悉 VS Code 的開發者能快速上手
      • 開發經驗較少者可能更適合 Cursor 的全面輔助
    3. 開發頻率
      • 經常進行開發的專業人士值得投資 Cursor 付費計劃
      • 偶爾開發的用戶可考慮免費替代品
    4. 特殊需求
      • 需要特定 AI 模型(如 Claude)
      • 需要高度自定義的 AI 行為
      • 需要處理大型代碼庫

以上內容涵蓋了 Cursor AI 編輯器的主要功能、使用技巧、進階應用和最佳實踐。這個全面指南應該能夠幫助不同層級的開發者充分利用 Cursor 提升開發效率。隨著 AI 工具的不斷發展,這些技能將成為現代開發者的核心競爭力。