如何用AI輔助編程，效率提升x倍

最近 AI 編程非常火，社交媒體上充斥著各種神奇的帖子：

「8歲女孩玩轉 AI 編程，45分鐘打造聊天機器人」

「用 Cursor 1小時做的 App，登上了 AppStore 排行榜 Top20」

「Cursor / Windsurf + Android Studio 高效 AI 編程：零基礎也能開發安卓應用」

一個比一個 Amazing，看的人心癢癢，恨不得馬上上手創作。

也不禁讓人感概：我們真的已經進入了「人人皆可做產品，程序員即將被淘汰」的時代了嗎？

作為一個專業的程序員，我想給 AI 編程這個話題祛祛魅，通過實際的應用場景，分享 AI 輔助編程如何提升日常工作效率 / AI 編程的能力邊界在哪裡 / 我們應該如何用好 AI 輔助編程工具。

這篇文章主要分享以下幾部分內容：

1. 作為一個專業程序員，如何使用 Cursor 提高編碼效率

2. 零代碼基礎，如何使用 AI 輔助編程工具實現自己的想法

3. 盤點常用的 AI 輔助編程工具和使用場景

4. 如何選擇適合自己的 AI 輔助編程工具

一、我如何使用 Cursor 提升編碼效率

Cursor 是我目前使用頻率最高的 AI 輔助編程工具，跟我每天的編碼工作無縫融合，使用 Cursor 寫代碼，體驗非常流暢，編程效率大大提升。

以下是我使用 Cursor 的幾個高頻場景：

自動補全代碼

Cursor 最亮點的功能就是其基於 Tab 鍵的代碼自動補全功能，據說是有訓練自己的智能補全模型，能夠在項目工程感知上下文，給出智能的代碼補全建議。

以前寫代碼的常用快捷鍵是 Ctrl + C 和 Ctrl + V，現在寫代碼的常用快捷鍵是 Tab。

比如在輸入一個字符的時候，Cursor 會給出接下來你想寫或者應該寫的代碼，按下 Tab 鍵，自動補全多行代碼，一直 Tab 一直補，補到沒有相關的代碼為止。如果補全的代碼引入了其他文件裡面的函數，也可以 Tab 鍵快速生成 import 代碼。

實測下來，Cursor 的 Tab 鍵，是提升編碼效率最明顯的功能。

20241119151833

Debug & Fix Error

Cursor 作為一個有經驗的編程大師，可以幫你 Debug 和 Fix 代碼錯誤。

以前遇到代碼報錯，或者執行命令報錯，一般都需要複製錯誤信息，再打開瀏覽器搜索相關的內容，找到解決方案，再來修改代碼。

現在用 Cursor 調試和修復錯誤特別方便，只需要在提示錯誤的位置，點擊 Debug 或者 Fix 按鈕，Cursor 就會結合項目上下文，給出錯誤的原因和可行的解決方案。甚至給你寫出修復 Bug 後的代碼，按照 Cursor 的建議修改，或者在給出的修復代碼上點擊 Apply，就可以快速找到和修復問題。

有了 Cursor，相當於請了一個 24 小時的技術顧問，隨時幫你查問題，改 Bug，寫代碼。讓你可以專注於編碼創作，而不用擔心後院起火。

「在我電腦上是好的啊」，這種情況發生的概率會大大降低。

20241119152132

實時對話 & 聯網搜索

Cursor 不僅僅可以作為編程輔助工具，也可以作為一個通用的 ChatBot / AI 搜索產品進行日常使用。

你可以隨時通過 Ctrl + L 在 Cursor 編輯器右側打開一個對話框，跟 Cursor 聊任何話題。

在輸入框輸入 @web 可以聯網檢索，具備 AI 搜索產品標準的 RAG 能力。

如果你每天寫代碼，就可以在 Cursor 裡面隨時使用 AI 搜索和對話。而不用打開 ChatGPT / Perplexity / ThinkAny 之類的產品了。

20241119173223

寫提示詞

AI 時代最重要的一項技能是寫提示詞，Prompt Engineering 甚至發展成了一門獨立的學科。

如果你需要寫提示詞去控制 AI 生成內容，而又不太擅長提示詞工程，或許可以試試讓 Cursor 幫你寫提示詞。

比如在 PodLM 這個項目的開發過程中，我需要在系統內置一些生成 AI 播客腳本的提示詞，通過 @ 之前調試好的訪問節目提示詞文本，就能讓 Cursor 幫我生成風格一致的兒童故事提示詞。

同樣，在 ThinkAny / 知了閱讀之類的項目開發過程中，我只需要描述清楚我的需求，就能讓 Cursor 幫我生成高質量的提示詞。

20241119151215

寫前端頁面

做 Web 項目開發，我們經常需要寫前端頁面。我最近一年習慣用 NextJS 框架做全棧開發，頁面組件用 React 寫，使用 TailwindCSS 寫樣式，UI 組件庫用的是 Shadcn/UI。

使用 Cursor 之前，如果我想要實現一個登錄頁面，一般是在 UI 組件庫找到可以引入的組件，或者自己寫 HTML + TailwindCSS 實現需要的組件。如果是自己寫，樣式要調的美觀，可能會花上一個小時。

而現在用 Cursor 實現一個登錄組件，我只需要一句話描述我的需求，幾秒鍾的時間，就能得到一個滿足需求的登錄組件。

20241119145836

截圖生成組件

除了一句話描述自己的需求，讓 Cursor 生成組件代碼之外，有時候我們可能會看到某個網站的某個組件設計的不錯，想把這個組件的樣式和邏輯複製到自己的項目中。

在 Cursor 中，只需要截圖參考的組件，讓它仿照著寫出來就行了。

這比起以前去 Copy 別人網站的樣式，通過審查元素查看 HTML 結構和 CSS 樣式，效率高的不止一點半點。

20241119152926

寫常用的代碼邏輯 / 函數

作為一個全棧開發，或者後台開發，我們可能更多的時間是在寫各種功能函數。

比起從頭開始實現一個個的功能函數，使用 Cursor 我們只需要一句話描述功能需求 / 函數的入參和響應參數，幾秒內就能快速生成一個函數。

如此高效的代碼生成能力，可以讓我們把更多的時間聚焦在核心業務邏輯的實現上，而不是把時間浪費在寫一些重覆的代碼邏輯上。

20241119145540

代碼重構

在做項目技術架構更新的時候，我們經常需要重構之前的代碼。

比如在《我把網站遷移到 cf，省了幾萬塊》這篇文章中，我把原來部署在 Vercel 的網站，遷移到了 Cloudflare，讀寫 Supabase 數據庫的客戶端也從原來的 pg 改成了 @supabase/supabase-js。

要想使用新的數據庫客戶端操作 Supabase，model 層的代碼都需要重構，使用新的連接客戶端實現數據讀寫邏輯。

如果沒有 Cursor，我自己重構一個項目的所有數據庫操作代碼，可能要花上一兩個小時。

而使用 Cursor，我只需要一句話描述我的需求，讓它用新的數據庫客戶端去重構所有的數據庫操作邏輯即可，等它重構完，我需要檢查一遍是否有重構不當的代碼，讓 Cursor 按照我習慣的風格進一步改寫。

只要人工確認過一次重構，賸餘的數據讀寫代碼，都會參考第一次重構的風格，快速完成。

使用 Cursor 重構代碼，可以把之前兩個小時才能完成的工作，縮短到了十幾分鐘。

20241119144751

多語言翻譯

我們做出海 AI 應用，面向全球用戶，往往需要支持多語言。

使用 NextJS 框架做全棧開發，多語言方案用的是 next-intl，只需要在項目的 messages 目錄下放置語言的 json 文件即可。

在使用 Cursor 之前，要支持多語言，我一般會先寫好 en.json 的內容，再把 en.json 的內容複製到 ChatGPT，讓它翻譯成其他語言的 json 文件，比如 zh.json / ja.json 等，然後把翻譯好的 json 文件都放置到 messages 目錄下。

每次新增 / 修改 / 刪除要支持多語言的內容，我需要先更新 en.json 的內容，再按照上面的流程更新其他語言文件的內容。效率非常的低！！！

現在使用 Cursor，我還是會先更新 en.json 的內容，然後去到其他語言文件中，按下 Tab 鍵，快速補全，Cursor 會自動填充翻譯好的內容。

使用 Cursor 做多語言文件的翻譯簡直太友好了，效率有了十倍以上的提升。

20241119145048

二、Cursor 的幾個常用快捷鍵

上面聊了我使用 Cursor 的幾個高頻場景，在這些場景下使用 Cursor 輔助編程，離不開以下幾個快捷鍵：

Tab

Tab 鍵是我使用 Cursor 最頻繁的快捷鍵，得益於 Cursor 強大的智能補全功能，Tab 鍵可以幫助我快速完成一些功能代碼的編寫。

Tab 鍵的智能補全功能，是 Cursor 的殺手鐧功能，有自己的智能補全模型，相比於同類產品有足夠核心的競爭力。免費版本有智能補全次數限制，在使用了一段時間 Cursor 之後，我發現已經離不開 Tab 智能補全功能了，於是升級到了付費版本，解鎖了無限制的 Tab 智能補全。

Ctrl + L

Ctrl + L 是我使用 Cursor 的第二個高頻快捷鍵，通過 Ctrl + L 可以在編輯器右側打開對話框，在對話框可以跟 Cursor 對話，問技術方案，寫 UI 組件，寫代碼邏輯，找代碼 Bug 等。

在右側對話框寫的代碼，你需要點 Apply 才能把代碼應用到編輯器中打開的文件。人工審查一遍生成的代碼直接再應用修改是一種好的習慣，因為 AI 也有可能會出錯，生成有質量缺陷的代碼。

20241119213205

Ctrl + K

Ctrl + K 的主要用法是在文件中喚起 Ctrl + K 的位置原地寫代碼，如果點 Apply 就會覆蓋當前位置的代碼。

一般會在創建一個新的函數，或者重構某段邏輯的時候使用，原地修改代碼，diff 效果更明顯。

Ctrl + I

Ctrl + I 快捷鍵可以喚起 Cursor Composer 窗口，輸入需求，一次性創建 / 修改 / 刪除多個文件夾 / 文件。

Cursor Composer 是一個劃時代的功能，真正開啟了「一句話讓 AI 創建一個項目「的時代。零編碼基礎的人，也可以使用 Cursor Composer 快速創建項目結構，實現基本的代碼邏輯，對於做一些 demo 類應用開發，非常有用。

另一個使用場景，比如在做多語言適配時，我只需要修改 en.json 一個文件的內容，通過 Cursor Composer 一次性修改所有語言的 json 文件，效率高得離譜。

然而實測下來，Cursor Composer 涉及到多個文件代碼生成時，質量有時候會比單文件生成要差一些，需要人工干預，多次提交修改。

20241119214539

以上提到的快捷鍵，在用 Mac 開發時，分別對應的是 Command + L / Command + K / Command + I。

三、零代碼基礎，如何使用 AI 實現自己的想法

上面的內容介紹了我作為一個專業程序員，如何使用 AI 輔助編程工具 Cursor 提升日常的編碼效率。

如果是零代碼基礎的朋友，又該如何搭上 AI 的快車，實現自己的想法呢？

使用 Cursor Composer 構建產品

對於零代碼基礎，想要實現自己想法的朋友，我首要推薦的依然是 Cursor 這個 AI 編輯器。

使用 Cursor Composer 從零到一做產品的步驟很簡單：

打開 Cursor 編輯器，創建一個新文件夾並打開，作為 Cursor 的工程目錄。
通過 Ctrl + I 喚起 Cursor Composer 窗口，描述你的想法或需求，比如：

幫我生成一個個人作品展示網站，包含兩個頁面，首頁顯示我所有的作品，about 頁面顯示我的個人介紹。網站主題色使用藍色，要求兼容手機端訪問。

點 Submit 提交需求，Cursor Composer 會根據你的需求生成一個項目結構，並生成基本的代碼邏輯。等代碼生成完，你只需要點 Apply all，就可以把生成的代碼應用到工程目錄中。

20241120102936

在瀏覽器打開項目的入口文件：index.html，預覽生成的網站。

20241120103711

在 Cursor Composer 對話框繼續調整你的需求，比如「一欄顯示五個作品，配圖使用真實的圖片」，點 Submit 提交，Cursor Composer 會根據你的需求修改代碼。

重覆這個過程：Submit 提需求 -> Apply all 應用修改 -> 預覽修改效果。直到你對生成的網站滿意為止。

體驗一遍這個流程，你可能會感慨，之前讓你感覺神秘的編程工作，好像也不過如此。

零編程基礎的人，也可以在短短幾分鐘時間內，把自己的想法落地成一個實際的產品。

Amazing！！！

然而，使用 Cursor Composer 只是在你的電腦本地完成了一個項目，如果想讓全世界看到你的產品，還需要熟悉發佈部署等知識。比如把生成的代碼打包上傳到服務器部署，或者使用 Vercel / Cloudflare 之類的雲部署平台。這一塊網上有很多教程，可以自行研究。

使用 Bolt.new 構建產品

上面使用 Cursor Composer 從零到一做網站，體驗非常絲滑，但是你需要先下載 Cursor 編輯器，代碼生成完你還需要去部署代碼，綁定域名發佈。可能對於零基礎的朋友，還是稍微複雜。

另一個快速實現想法的選擇是使用 Bolt.new。Bolt.new 是一個網頁版的 AI 輔助編程工具，你不需要下載任何軟件，只需要打開網頁就能使用。流程更加簡單：

1. 在 Bolt.new 網頁輸入框描述你的需求，比如：

創建一個課程主頁，介紹課程交付的主頁內容，列出課程資料，課程資料是一個圖文列表，也放一些學員評價，讓課程主頁更加吸引人。

提交你的需求，Bolt.new 開始生成代碼，並在右側把整個項目的代碼結構都展示出來。

20241120110003

在左側對話框繼續調整你的需求，讓 Bolt.new 根據你的需求繼續優化代碼，同時可以在右側的 Preview 面板預覽項目。

2. 等效果優化到你滿意了，點右上角的 Deploy 按鈕，或者 Open in StackBlitz，就可以把生成的代碼快速部署上線，並得到一個可以公開訪問的鏈接，打開訪問鏈接，就能看到生成的項目了。

20241120110958

比起 Cursor Composer，通過 Bolt.new 從零創建項目，門檻更低，並且集成了雲端部署功能，可以讓你的產品，更快讓人看見。

使用 Claude 構建單頁應用

除了 Cursor Composer 和 Bolt.new 之外，Claude 也是一個非常強大的 AI 輔助編程工具。

你可以在 Claude 描述你的需求，快速創建單頁應用的代碼，通過 Claude Artifact 面板實時預覽，也可以發佈上線，獲得一個可公開訪問的鏈接，在線預覽項目。

20241119154300

Claude 的代碼生成能力一直都非常強，非常適合用來實現單頁應用，或者某個功能組件。只是暫不支持項目級別的多層級文件夾/文件規劃能力。如果希望生成完整的項目代碼，還是推薦 Cursor Composer 和 Bolt.new。

使用 v0.dev 生成組件

跟 Claude 類似，如果你只是想生成一個簡單的單頁網站，或者生成某個功能組件。可以使用 v0.dev。這是 Vercel 推出的一個網頁版的 AI 輔助編程工具。

集成了 Shadcn/UI 基礎組件庫，生成的 UI 組件在美觀度方面會更有優勢，也支持把單頁應用 / 組件代碼發佈到雲平台，得到一個可公開訪問的鏈接。

20241119154012

使用 Pagen 生成落地頁

如果你想為你的想法或產品，生成一個落地頁，在某些活動做演示（比如在周周黑客鬆路演），或者給目標用戶介紹你的產品和服務，可以考慮使用 Pagen 一鍵生成落地頁。

無需任何編程基礎，僅需填寫你的產品名稱和簡短的描述，選擇一個好看的模板，Pagen 幾秒內就能幫你生成落地頁，並填充跟你描述的產品相關的內容。同時獲得一個可以公開訪問的子域名。

20241120112618

我使用 Pagen 創建了「1024 全棧開發社群」的介紹網頁，也用 Pagen 為幾個產品做了官網，拿到過一天十萬訪問的Google搜索流量。

20241120112744

四、評測幾款 AI 輔助編程工具

AI 輔助編程領域，產品層出不窮，讓人眼花繚亂。

我想從一個編程老司機的視角，結合實際的使用體驗，對市面上常見的一些 AI 輔助編程工具做一個分類，並聊聊自己的看法。

AI 編輯器

Cursor

第一個出圈的 AI 編輯器產品，擁有強大的代碼智能補全功能，完整項目規劃能力，函數 /組件代碼生成能力，調試 / 重構能力，對話 / 檢索 / 知識庫問答能力等。

我總結了一下其出圈的幾個關鍵因素：

基於 VS Code 開源版本開發，支持 VS Code 全部的插件和配置。VS Code 的用戶可以無縫遷移，使用習慣不變，上手成賓特別低；
自己訓練了代碼補全模型，使用 Tab 鍵完成大部分的代碼編寫，讓用戶感受到了爽感，引發社交傳播；
一站式項目規劃能力，幫助零編程基礎的用戶快速實現想法，再一次引發社交傳播；

由此可見，在開發新項目的時候，如果能選擇好的技術方案，站在巨人的肩膀上，讓用戶保持原有的使用習慣，讓新用戶感受到從未有過的體驗，能引發社交傳播，對產品的成功起到至關重要的作用。

不管是專業程序員，還是零編程基礎的人，Cursor 都是值得你嘗試的 AI 輔助編程工具。

Windsurf

Codeium 推出的 AI 編輯器，跟 Cursor 一樣，也是基於 VS Code 開源版本開發，支持 VS Code 全部的插件和配置。

昨天簡單使用了一下，整體體驗比 Cursor 要差一些，看了網上的一些評價，Windsurf 在上下文感知和記憶方面要比 Cursor 強，對大型複雜項目的開發和重構支持比 Cursor 更好。

20241120120253

Pear AI

YC 投資的一個項目，基於 VS Code 在做開源的 AI 編輯器，我沒試用過，不知道具體效果。

如果是純粹的開源項目，倒是可以研究研究，看看別人基於 VS Code 做了哪些 AI 功能的集成，擴展一下思路，也許後面自己也能實現一個 Cursor。

20241120125111

編輯器 AI 擴展

在 AI 編輯器火起來之前，就有很多項目基於 VS Code 做 AI 擴展，比如：

Github Copilot

應該是做的最早的 AI 輔助編程插件了。出身名門，大名鼎鼎，本來可以有很好的發展前景，只是戰略選型錯了，如果一開始定位做 AI-Native 代碼編輯器，而不是 VS Code 輔助編程擴展，也許會有更大的市場。

20241120125512

Continue

另一個 AI 輔助編程插件，支持 VS Code 和 JetBrains 系列 IDE。代碼開源，可以對接任意大模型，看起來很不錯。

20241120125842

Cline

另一個開源的 VS Code 插件，沒有做官網，可以在 VS Code 插件商店下載安裝。經常看到有人安利，也許做的挺好的，值得一試。

20241120164724

UI 組件生成工具

根據提示詞或者截圖，快速生成前端組件，節省人工寫組件結構和美化樣式的時間。

常用的產品包括：

Cursor
v0.dev
Claude

另外再補充一個：

screenshot-to-code

開源產品，可以自行部署，只要上傳截圖，就能快速複刻一個相似的 UI 組件。

20241119153334

完整項目構建工具

通過一句話構建完整項目，推薦使用：

Cursor
Bolt.new

如果你想快速構建 AI 智能體，可以試試：

Replit Agent

20241120165741

Wordware

20241120165858

如何選擇 AI 輔助編程工具

選擇適合自己的 AI 輔助編程工具，你可以從以下幾個方面考量：

使用場景

如果你每天高頻寫代碼，或者深度依賴 AI 輔助編程工具，可以下載 Cursor / Windsurf 之類的 AI 編輯器。

如果你只是偶爾需要寫個 Demo 驗證想法，或者偶爾需要寫個 UI 組件，可以使用 Bolt.new / v0.dev / Claude 之類的網頁工具。

經濟成本

如果你習慣為優質的工具產品付費，可以升級到 Cursor Pro 會員，解鎖無限制的智能補全功能。

20241120170230

如果你希望找到低價的 Cursor 替代方案，可以使用 Windsurf，會員訂閱費目前是 Cursor 的一半，還有 8 周免費的福利可領。

如果你不想按月支付 AI 編輯器的會員費，你可以選擇自行部署開源版本的 AI 編輯器，對接自己的大模型，享受更高的配置靈活度和更低的使用成本。

使用習慣

如果你跟我一樣，之前一直在用 VS Code 編程，你可以選擇 Cursor 或者 Windsurf，無縫遷移之前的使用習慣。上手成本很低。

如果你不想下載額外的軟件，想一直使用既有的代碼編輯器，你可以選擇安裝 AI 輔助編程插件，比如 Github Copilot，Continue，Cline 等。

如果你平時很少寫代碼，只是偶爾需要寫個 Demo 驗證想法，你可以選擇 Bolt.new 或者 v0.dev 之類的 Web 項目，打開即用，寫完快速部署上線。

功能豐富度

根據你日常使用 AI 輔助編程的場景，選擇功能豐富度更高的產品。

常用的一些功能和場景包括：代碼智能補全 / 實時對話 / 聯網檢索 / 項目規劃 / 多文件項目資料生成 / UI 組件生成 / 部署發佈等。

你可以選擇重點使用 Cursor 和 Bolt.new，搭配使用 v0.dev 和 Claude，相對而言比較合理。

總結

以上內容總結了我使用 AI 輔助編程的具體場景，以及我對常見 AI 輔助編程工具的體驗和看法。希望能對你有所啟發。

最後來回答一下文章開頭提到的問題：」AI 會不會淘汰掉程序員？「

我覺得不會。

我的觀點是：人的想像力，創造力，對項目的架構能力，對作品的審美能力，對代碼的抽像能力，是 AI 沒辦法替代的。AI 可以寫出常見的 / 標準的代碼，但是如何更好地組織代碼結構，寫出更加完善，更有價值的項目，是需要人去完成的。

說的嚴謹一點：一個真正優秀且專業的程序工程師，是不可能被 AI 淘汰的。

我們現在看到的很多，幾分鐘幾小時寫出來的項目，可能都是玩具型 / Demo 級別的項目。

但是不可否認：營銷是關鍵。Demo 級別的項目，也可以跑通 MVP，也可以實現 PMF。這跟 AI 是否能替代程序員，是兩個話題。

不用太擔心 AI 會不會淘汰自己，早日擁抱 AI，合理使用 AI 提升自己的效率，才是正確的事情。

你就當自己是張無忌，AI 輔助編程工具是倚天劍和屠龍刀，倚天劍屠龍刀可以用來打天下，最終練成乾坤大挪移的，還是你自己。

相信自己，你才是那個最棒的築夢師。

本文來自微信公眾號：艾逗筆，作者：idoubi

你可能喜歡