回到頂部

💻 Cursor AI 程式編輯器

AI 驅動的程式編輯器 Cursor 完全教學。

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 做一小步,測試沒問題再繼續下一步


❓ FAQ

Cursor 和 VS Code 有什麼差別?

Cursor 是基於 VS Code 打造的,所以介面和操作方式幾乎一樣。最大的差別是 Cursor 內建了 AI 功能(Composer、Chat、Tab 補完),而 VS Code 需要額外安裝 GitHub Copilot 等擴充功能。

不會寫程式也能用 Cursor 嗎?

可以!Cursor 的 Composer 功能讓你用中文描述需求,AI 就會幫你生成完整的程式碼。非常適合想學習程式或快速做出原型的初學者。搭配 Vibe Coding 方法論效果更好。

📚 延伸閱讀