Cursor 新手入門教學：從 0 開始做出第一個 Hello World 網頁
Cursor 是什麼？
Vibe Coding 絕佳利器
Cursor，你可以把它理解成一個「內建 AI 的程式編輯器」。
最近我每天使用Cursor大概超過 6 個小時，而且現在已經很難回到不用Cursor的寫程式方法了。所以我很想要快點教給大家這個好用的神器。
它長得很像 VS Code（一個程式編輯器 IDE），你如果之前有寫過程式，其實打開 Cursor 會覺得介面非常熟；
但真正不一樣的地方在於——這個編輯器，有強大的 AI 功能，完美整合了你的程式碼和 AI 模型 LLM。
在 Cursor 裡面：
你可以直接用對話叫 AI 幫你建立檔案、寫程式
AI 知道你整個專案的上下文，不是只看你貼的那一小段
你可以指定「只改這幾行程式碼」，它真的只改那幾行
修改後還會清楚標示哪裡被改過，讓你決定要不要接受
你可以把它想成是，你在開發過程中，旁邊一直坐著一個可以對話、可以動手幫你做事的工程師助手，只是他是 AI。
使用 Cursor 的體驗，是讓我覺得能夠最完美詮釋 Vibe Coding 的程式開發感。
什麼是 Vibe Coding？
最近，因為 AI 改變了大部分工程師的工作方式，Vibe Coding 成了許多人討論的新方法。
原本來自2025年 OpenAI 共同創辦人Andrej Karpathy 在 X 上發表了一篇文章首次提出這個名詞。他所說的 Vibe Coding 指的是我們已經可以開始以自然語言來跟AI溝通，並且由 AI 完成程式碼的開發，這個工作流程。而 Vibe 是一種頻率、律動，也就是在說一種流動式，我自己形容讓寫程式行雲流水的體驗。
Vibe Coding 不是一個新語言，它比較像是一種寫程式的工作方式轉變。
簡單講就是：
👉 你不用再自己一行一行程式打起，而是告訴 AI「我要做什麼」。
在 Vibe Coding 的流程裡：
人負責的是：需求、方向、判斷對不對
AI 負責的是：把想法轉成可執行的程式碼、幫你處理重複又瑣碎的事
而 Cursor 正好就是一個非常適合 Vibe Coding 的工具。
因為它讓你：
不用切換視窗（寫程式一邊、ChatGPT 一邊）
他懂的整個專案，哪些地方和這個功能有關，你不用自己先找
對話、改 code、跑結果，全都在同一個地方完成
很適合初學者，也很適合已經在做產品的人
而這篇文章，我就是想要來教大家入門這個工具，從認識介面到建立出第一個網頁，體驗這個工具神奇所在。
那我們就開始來 Vibe Coding 吧！
Step 2｜右邊的 AI 對話區：我通常會先收起來
章節 1：先把 Cursor 介面調整成「好用」的樣子
Step 1｜打開左邊 Sidebar（檔案列表）
先把左邊的 Sidebar 打開
這邊通常是用來放「檔案列表」的：如果你專案裡面有檔案，它就會全部列在這裡
但因為我們現在是空的，所以先不用管它沒關係
你可以先理解：左邊是「管理專案檔案」的地方。
Step 2｜右邊的 AI 對話區：我通常會先收起來
右邊這整塊其實就是 AI Agent 跟你對話的區域
你可以把它想像成 ChatGPT：你可以開很多個對話視窗，每個視窗專心處理一個任務
例如：我現在要做「會員功能」，我就開一個新視窗專門聊這件事
但我的習慣是：右邊「對話視窗列表」我比較少開，所以我通常會先把它收起來
寬度就留你喜歡的就好，不用太大
這邊的核心概念：你可以把 Cursor 的 AI 對話當成「分任務的工作區」。
Step 3｜把 Terminal（終端機）先打開：之後會超常用
接下來把下面的 Terminal 視窗打開
Terminal 中文叫「終端機」，它就是讓你可以「下指令」叫電腦做事的地方
例如：安裝套件、建立資料夾、修改資料夾
甚至直接編輯檔案也可以
寫程式很多步驟其實用 Terminal 會更快
比起你開一堆網頁、用 UI 一步一步點
有時候你只要打一串文字就搞定
所以我通常都會習慣先把 Terminal 打開，等一下馬上用得到。
章節 2：用 AI 建立你的第一個檔案（Hello World）
Step 4｜確認你是在 Agent 模式（最常用）
在輸入框上方，你會看到幾個模式可以選：
Agent / Plan / Debug / Ask
我最常用的就是 Agent：因為你基本上什麼都可以問它，它就會直接幫你做事。
Step 5｜模型先用 Auto 也可以，但你要知道「不是吃到飽」
一開始安裝 Cursor，通常會預設是 Auto（它會根據你的任務自動挑模型）。
但我會提醒你一件事：
每個模型定價都不一樣
會依照你輸入輸出 token（運算量）計價
你不要以為你有付費就可以無上限使用，其實它是會算的
我自己的習慣：先選 CP 值高的模型
我最常用的是 Gemini 3 Flash（CP 值比較高）。
但你也可以試試看：
Claude（很多人寫程式很推）
GPT / Grok 的 Codex（專門寫程式的模型）
Step 6｜想選的模型沒出現？去 Add Models 開起來
先把 Auto 關掉，你才能手動選模型
如果你要選的模型不在列表：
點最下面 Add Models
再點 View All Models
你把某個模型「開啟」後，它才會出現在可選清單裡
Step 7｜送出第一個任務：請它建立 Hello World
這邊我們直接做最經典的第一個練習：
請 AI 幫我建立一個 Hello World 的 HTML 網頁。
送出之後你會發現：
原本左邊檔案列表是空的
但現在會出現
index.html而且檔案內容、程式碼它都直接幫你生成好
你不用再跟它說「要放哪裡」，因為它會自己在這個專案裡面找位置、建立檔案。
章節 3：看懂 Cursor 的「變更提示」：Keep / Undo
Step 8｜綠色背景代表「這是有被動過的檔案」
當它新增或修改檔案時，那些檔案會被標成綠色背景。
Cursor 會問你：
要 Keep（接受這個改動）
還是 Undo（回到上一步）
如果它一次動到很多檔案，你也可以批次全部 Keep。
Keep 完之後，那些綠色反白就會消失，代表你已經接受這次修改。
章節 4：怎麼開啟你做好的網頁（兩種方式）
方法 1｜初學者最快：直接用瀏覽器打開檔案
在左邊
index.html上按右鍵選擇在 Finder（資料夾）裡打開
HTML 檔案通常直接雙擊就會用瀏覽器開啟
你就會看到最簡單的第一個網頁：Hello World
方法 2｜專案變複雜後：用本機小型伺服器跑（npx serve）
當你的專案開始有 JavaScript、或一些東西不能用「靜態開檔」方式跑的時候，就建議用這個方式。
打開 Terminal
輸入指令：
npx serve
它會開始安裝並啟動伺服器
你會看到它給你一個網址，例如：
localhost:3000
接著你可以：
在 Cursor 裡面 command + 點那個網址（Cursor 內建開頁面）
或者到外面的 Chrome 輸入：
localhost:3000
停止伺服器怎麼按？
在 Terminal 按
ctrl + c就會停止停止後你重新整理
localhost:3000就會沒東西（因為伺服器沒在跑）
章節 5：如果你的電腦沒裝 Node.js，怎麼檢查＆安裝
Step 9｜先檢查 Node 有沒有裝好
在 Terminal 輸入：
node -v
如果你有看到版本號（例如 vXX.XX.XX），就代表你已經安裝好了。
Step 10｜沒裝的話：去官方網站下載安裝
到 Google 搜尋
node.js進官方網站
下載對應系統（Mac 就下載 Mac 版）
安裝完再回到 Terminal 再打一次
node -v確認
章節 6：超好用的小技巧：把程式碼「丟進對話框」讓 AI 只改那幾行
你如果想針對某幾行程式碼做調整（例如：字變大、變紅），你要先把「你想改的那段程式碼」丟進聊天視窗，讓它知道上下文。
你有兩種方式：
方法 A｜手動複製貼上
你直接複製那幾行貼到對話框，它會自動幫你標註是 index.html 第幾行到第幾行。
方法 B｜更快：反白後 Add to chat / 快速鍵
先反白你要改的那幾行
直接按 Add to chat
或是用快捷鍵（Mac）：
Command + L
這樣它就會把你反白的內容自動塞到聊天視窗裡，你就可以直接說：
「幫我把字放大」
「顏色改成紅色」
它就會知道：你只是在改那段（例如第 31～32 行），不會亂動其他地方。
章節 7：最後一定要做版本控制：Commit ＋ 上傳 GitHub
Step 11｜先 Commit：把今天的版本存起來
點左邊工具列那個「像路線圖」的圖示（版本控制）
你會看到有哪些檔案被改過
Commit 前一定要輸入訊息（不寫不給送）
你可以像我一樣寫
feat: Hello World 網頁或寫任何你看得懂的描述都可以
然後按 Commit。
如果它跳出提醒你「檔案還沒存」：
你可以先按
Command + S或直接按 Yes 也可以
另外它可能會提醒你有些變更還沒 Stage：
通常你要一起 commit，就按 Yes 把它納入。
Step 12｜再 Publish Branch：這才是真的上傳到雲端
你要記得：Commit 只是存在你本機。
要上傳到 GitHub，還要做第二件事：
點 Publish Branch
第一次通常就是 main（主要分支），上傳完成後你會看到狀態變化。
Step 13｜回 GitHub 網站確認
回到 GitHub 專案頁面重新整理，你就會看到：
index.html出現在 repo 裡點進去可以看到完整程式碼
到這邊，這個單元就算完整結束 🎉
##（你可以加在文末的小結）
如果你是第一次用 Cursor，我會建議你先把「介面、Terminal、AI 對話框」這三個地方搞熟，後面你做任何功能（會員、金流、資料庫）都會快很多。
