最近 Cursor 太火了，到處都是 Cursor 的文章和影片。
它就像一個能實時檢視你程式碼的程式設計高手，可以提供建議，捕捉錯誤，還可以幫你重構程式碼。
你不用寫一行程式碼，只需要動動嘴，它就能一頓操作猛如虎給你寫一個官網、一個 Chrome 外掛、一個卡密系統、一個。。。
按這速度發展下去，Cursor 最終就不是 Copilot 了，而是 Pilot，人類才是 Copilot！
而 GitHub Coplilot 就比較慘了，它的程式碼修改能力和上下文引用能力遠遠不如 Cursor，所以它就只能叫 Copilot 了。
GitHub Coplilot 只能追加程式碼，不能修改程式碼。
Cursor 既能追加程式碼，又能修改程式碼。
GitHub Copilot 使用兩種符號 (@ 和 #) 來引用不同的上下文，太難記了。。。
Cursor 只使用一種符號 (@) 來引用上下文，簡單易記。而且上下文選擇範圍更廣。
怪不得 GitHub Copilot 只能叫 Copilot。
等等，你們好像忽略了一件事情：Cursor 為什麼叫 Cursor？
今天我就來揭曉這個謎底。
Cursor 之所以叫 Cursor，來自於它對游標的極致利用。
前面我們提到，Cursor 最牛逼的是可以直接修改你的程式碼。它會根據游標所在的位置，自動生成程式碼補全建議，使用者直接透過 Tab 鍵就可以完成程式碼補全 (當然 GitHub Copilot 也能補全，我們來說點不一樣的)。
對於已經寫好的程式碼，在進行修改或重構時，Cursor 會根據上下文，給出修改建議。修改建議會透過提示框的形式展現，而不是程式碼補全的灰色提示。
還有一個更牛叉的功能叫游標預測 (Cursor Prediction)，它會根據上下文，直接預測你下一步可能要編輯的程式碼位置。
現在知道它為啥叫 Cursor 了吧？😄
下面我透過一個實際的例子，來演示 Cursor 的強大功能。
咱不整那些虛頭巴腦的，直接來個實用的例子，看到這個網站的流量了沒有？
這個網站是 Cursor 的入門教程合集，走的還是導航站的路線，剛上線不久，流量就蹭蹭蹭的往上漲。
你以為這種網站有多高的技術含量？
還真沒有。我只需要動動嘴就可以復刻一個類似的網站。
宣告一下：我可不會 Next.js，也不會 Tailwind CSS，更不會 Node.js，我只會指揮 AI 幹活。
建立開發環境
為了快速配置開發環境，我們可以選擇使用 Sealos DevBox，它可以一鍵配置開發環境，並且自動配置了公網域名和 HTTPS 證書，非常強大。
首先進入 Sealos 桌面，然後開啟 Debox 應用，建立一個新專案，選擇 Next.js 作為執行環境。
Devbox 為開發者提供了幾個非常實用的功能：
- 靈活的資源配置：可以根據專案需求自由調整 CPU 和記憶體，選擇合適配置既保證效能又能控制成本。
- 一鍵啟用 HTTPS：系統自動分配安全域名，再也不用為配置 SSL 證書發愁。
- 全自動域名管理：從開發到測試環境，域名配置全程由系統處理，開發者可以專注於程式碼本身。
建立完成後，幾秒鐘即可啟動開發環境。
環境準備好後，我們直接用 Cursor 連線開發環境。在操作選項中選擇使用 Cursor 連線：
首次開啟會提示安裝 Devbox 外掛，安裝後即可自動連線開發環境。
開啟 Cursor 的終端，先刪掉專案根目錄下的所有檔案：
下面我要告訴你們一個騷操作了。
初始化專案
最近新出了一個 AI 驅動全棧開發平臺叫 Bolt.new，整合了終端和編輯器，算是 Cursor 的競爭對手吧。
不過 Bolt.new 是基於 Web 的，和本地 IDE 開發體驗有點割裂，不過用來初始化專案是極好的。
雖然使用 Cursor 來從頭構建一個專案也很強，但相對而言 Bolt.new 初始化的前端 UI 更漂亮，比 Cursor 好看多了。
所以我們可以先用 Bolt.new 初始化專案，然後再匯入到 Cursor 中進行開發，天才！
來看實戰步驟。
首先進入 Bolt.new 官網：
在這裡，你既可以輸入提示詞來初始化你的專案，也可以在 “or start a blank app with your favorite stack” 下方選擇你喜歡的技術棧，然後點選它。
我選擇了 Next.js，進去之後，專案就初始化完成了。
還可以實時預覽，你說氣人不氣人。
接下來就是見證奇蹟的時刻，我們以這個網站作為參考：https://cursor101.com，讓 Bolt.new 生成一個類似的網站。提示詞如下：
參考我上傳的截圖給我生成一個 UI 風格一致的導航站，導航站的主題是“整合了 AI 技術的強化型程式碼編輯器 Cursor”的各種入門教程和實用技巧以及影片資源。
上傳參考網站的截圖，輸入提示詞後，點選輸入框下面的 “Enhance prompt” 按鈕，然後回車。
這時候 AI 就在吭哧吭哧幫我們生成程式碼了，真是一頓操作猛如虎啊。
生成完畢後，它甚至還直接幫我啟動了，啟動了就算了，還直接幫我開啟了預覽介面。。。
你這......我這......哎呀，你看你......
行，沒我事了，我就動個嘴，連啟動都不需要我了。
那我就勉為其難把專案程式碼下載下來吧。點選右上角的 “Download” 按鈕即可下載專案程式碼壓縮包。
下載完成後，解壓壓縮包，開啟專案資料夾，可以看到專案程式碼已經下載好了。
匯入專案到 Cursor
直接將專案資料夾下的所有檔案全部選中，然後拖拽到 Cursor 的程式碼編輯器左側檔案列表中，即可匯入整個專案。
然後執行 npm install 安裝依賴，安裝完成後，執行 npm run dev 啟動專案。
現在回到 Devbox 介面，進入 Next.js 開發環境的詳情頁面：
點選外網地址即可使用公網域名訪網站：
完美！下面我們接著用 Cursor 來繼續開發這個網站。
使用 Cursor 繼續開發
現在我們回到 Cursor 介面，開始唸咒施法。
直接按下快捷鍵 CMD + I (Windows/Linux 下是 Ctrl + I)，即可開啟 Cursor Composer 介面。
在 Composer 介面的輸入框中，先輸入 @，然後選擇 Codebase，這樣就可以讓 Cursor 分析整個專案的所有檔案，然後接著輸入以下提示詞：
這個專案是一個導航站，導航站的主題是“整合了 AI 技術的強化型程式碼編輯器 Cursor”的各種入門教程和實用技巧以及影片資源。請將網站中所有的英文都改成中文文案。請使用 CoT 思維鏈一步一步思考以完成我的任務
然後它就開始一步一步思考並完成任務了。
友情提示：在提示詞中使用
CoT思維鏈，可以讓 Cursor 一步一步思考並完成任務，這樣準確率更高。
現在我只需要檢查一下 AI 改的程式碼是否正確，然後點選 “Accept all” 接受所有修改即可。
來看看它的修改成果吧：
我啥也不說了，你們自己感受吧~
我們還可以接著最佳化，看我繼續唸咒，畢竟我不懂 Node.js，也不懂 Next.js，更不懂 Tailwind CSS，我只會念咒。
再來看看效果：
你這......我這......哎呀，你看你......
當然這還沒完，你還可以接著唸咒，讓它幫你最佳化文案，讓它幫你支援國際化，讓它幫你生成單元測試，讓它幫你生成文件。。。
如果你手癢，想自己改改程式碼，也沒問題，你看我在這裡直接換行，然後 Cursor 就開始預測我想寫什麼了，如果你覺得沒問題，就直接按 Tab 鍵補全吧。。。
我覺得 “安裝指南” 可能不太合適，我就把它刪掉了，然後 Cursor 又開始自動預測我接下來要寫什麼了，如果覺得沒問題，又可以按 Tab 鍵補全了。。。
總結
好了，到這裡我就不繼續演示了，相信你已經感受到 Cursor 的強大了。
這個網站還有很多可以最佳化的地方，比如：
- 可以新增搜尋功能，方便使用者快速找到想要的教程
- 可以新增評論系統，讓使用者分享使用心得
- 可以新增使用者系統，收藏喜歡的教程
- 可以新增更多的教程分類，比如進階技巧、實戰案例等
- 可以最佳化 SEO，讓更多人發現這個網站
- ......
這些最佳化就留給你自己發揮了。記住，你不需要太懂程式設計，只需要會念咒就夠了。
讓 Cursor 成為你的得力助手，讓它幫你完成這些最佳化工作。畢竟，人類只是副駕駛，AI 才是主駕駛嘛~ 😄