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 1：準備好 Cursor
1.1 下載及註冊 Cursor
免費註冊你的帳號，一開始有一定的免費使用額度，用完之後再考慮要使用什麼方案就好
下載 Cursor 軟體，看你是什麼系統就下載 Mac / Window 版本
下載後安裝完畢，這裡就跳過安裝步驟了。
下載後我們都可以先從免費版本開始試用，他有提供一定的免費AI扣打，依照我自己實際體驗的感受，可能是$5-10左右的額度，一但用完之後他就會請你升級任一方案。那時候我就受不了了🙄，卡就刷下去了。
1.2 開始前先在Github也準備一個專案（可選）
這篇的重點不是介紹 GitHub ，但使用 GitHub 和 Cursor 一起開發真的非常方便。
尤其我覺得 Vibe Coding 有時後會不小心開發的太開心，步驟跳得太快，多了一個 GitHub 幫你掌控版本和監控更動是最好的選擇。
所以如果你同意就到 GitHub 建立好一個新的專案 (New Repository)。
可以選 Private，完成新增後會有自己的專案網址。
1.3 準備好工作視窗
整理好工作區，你會開始比較有頭緒，這個工作站台要怎麼使用，開發怎麼開始。
接著開啟我們的 Cursor，因為你已經有 GitHub 了，所以這時候選擇中間的 Clone repo (從雲端複製專案)。
你可以輸入這個網址，或是直接先連結你的 GitHub 帳號到這台電腦，會跳出一個授權步驟的視窗，你點擊同意授權之後，還可以選擇特定的專案或是只有特定幾個專案授權給Cursor。
確認Clone之後，會需要選擇你的專案上層資料夾（注意是上層喔，因為複製下來之後會多一個專案資料夾，例如你的專案叫做 myshop, 下載之後會就會一個 myshop 資料夾，所以不用多新增一個 myshop 這樣就會有兩層 myshop）。
接著 Cursor 就會幫你把專案 Clone 到你的本機，然後問你要不要打開。
開啟專案之後你可能會覺得整個頁面都是空的，不要緊張，因為我們都還沒把視窗開好，檔案夾也都還是空的。
這時我會先把工作視窗都先開好。開關所有工作視窗的按鈕在右上方。
左1 按鈕：先把左邊的 Sidebar 打開
這邊通常是用來放「檔案列表」的：如果你專案裡面有檔案，它就會全部列在這裡
但因為我們現在是空的，所以先不用管它沒關係
右2按鈕：ＡＩ對話視窗列表
右邊這整塊其實就是 AI Agent 跟你對話的區域
你可以把它想像成 ChatGPT：你可以開很多個對話視窗，每個視窗專心處理一個任務
例如：我現在要做「會員功能」，我就開一個新視窗專門聊這件事
但我的習慣是：右邊「對話視窗列表」我比較少開，所以我通常會先把它收起來
寬度就留你喜歡的就好，不用太大
左2按鈕：Terminal（終端機）
這邊主要就是 終端機 (Terminal)
接下來我習慣把下面的 Terminal 視窗打開，之後會滿常使用到的。除了輸入指令，也可以監控一些錯誤資訊。
Terminal 中文叫「終端機」，它就是讓你可以「下指令」叫電腦做事的地方
例如：安裝套件、建立資料夾、修改資料夾
甚至直接編輯檔案也可以
寫程式很多步驟其實用 Terminal 會更快
比起你開一堆網頁、用 UI 一步一步點
有時候你只要打一串文字就搞定
Step 2 用 AI 建立你的第一個檔案（Hello World）
從建立一個檔案開始，跟 Cursor 培養感情。
2-1 確認使用的模式
在輸入框上方，你會看到幾個模式可以選：
Agent / Plan / Debug / Ask
我最常用的就是 Agent：因為你基本上什麼都可以問它，它就會直接幫你做事。
2-2 模型選用，這裡關係到你的荷包
一開始安裝 Cursor，通常會預設是 Auto（它會根據你的任務自動挑模型）。如果你想要很有效率，或很無腦，或你口袋很深，先用 Auto 也可以。
如果不是 (想要很有效率，或很無腦，或你口袋很深)，你就要意識到：
每個模型定價都不一樣
會依照你輸入輸出 token（運算量）計價
你不要以為你有付費就可以無上限使用，其實它是會算的
每個不同模型的計價表如下，其實他光是用看報價表是有點難感受使用量的（我自己覺得這是 AI 收費最可怕的黑洞）。所以用我自己實際使用的體驗來讓大家知道，如果我用 Auto 大概用了三天(每天約使用3-4小時)，依照 Cursor 所給的計費表，使用了大概 $8 美金，其實是有嚇到我的。
但大家也可以依照單價上的倍數來感受一下他燒錢的速度，Claude Sonnet 燒錢的速度大約是 Grok Code 的15倍 ☄️ 如果你不是超精密型等級的程式，我想一般網頁設計 Gemin, GPT, Grok 應該也都表現不錯。
4. 我自己的習慣：先選 CP 值高的模型
我最常用的是 Gemini 3 Flash（CP 值比較高）以網站開發來說，我覺得效果跟設計感也都在平均之上。
但你也還是可以試試看：
Claude（很多人寫程式很推）
GPT / Grok 的 Codex（專門寫程式的模型）
5. 去哪裡選擇其他模型？
訣竅就是..... 把 Auto 關掉 😂
先把 Auto 關掉，你才能手動選模型
如果你要選的模型不在列表：
點最下面 Add Models
再點 View All Models
你把某個模型「開啟」後，它才會出現在可
選清單裡
2-3 送出第一個任務：請它建立 Hello World
這邊我們直接做最經典的第一個練習：
請 AI 幫我建立一個 Hello World 的 HTML 網頁。到 新的對話框中，選好模型後，輸入『請幫我建立一個 Hello World 的 HTML 網頁』
送出之後你會發現：
原本左邊檔案列表是空的
但現在會出現
index.html而且檔案內容、程式碼它都直接幫你生成好
送出任務後，Cursor 會在對話框中很療癒的一直出現新的決策內容、說明和程式碼。
你也不用再跟它說「檔案要放哪裡」，因為它會自己在這個專案裡面找位置、建立檔案。
2-4 看懂 Cursor 的「變更提示」：Keep / Undo
1. 綠色背景代表「這是有被動過的檔案」
當它新增或修改檔案時，那些檔案會被標成綠色背景。
Cursor 會問你：
要 Keep（接受這個改動）
還是 Undo（回到上一步）
如果它一次動到很多檔案，你也可以批次全部 Keep(在對話框的最下方)。
Keep 完之後，那些綠色反白就會消失，代表你已經接受這次修改。
2-5 怎麼開啟你做好的網頁（兩種方式）
方法 1｜初學者最快：直接用瀏覽器打開檔案
在左邊（檔案列表中）
index.html上按右鍵選擇在 Finder（資料夾）裡打開
HTML 檔案通常直接雙擊就會用瀏覽器開啟
你就會看到最簡單的第一個網頁：Hello World
也可以直接開啟你的這個專案資料夾，像開啟一般資料夾一樣開啟這個檔案
方法 2｜專案變複雜後：用本機小型伺服器跑（npx serve）
當你的專案開始有 JavaScript、或一些東西不能用「靜態開檔」方式跑的時候，就建議用這個方式。
打開 Terminal，也可以直接在 Cursor 下方的Terminal，他以經幫你進入這個專案資料夾底下
輸入指令：
npx serve
它會開始安裝並啟動伺服器
你會看到它給你一個網址，例如：
localhost:3000
接著你可以：
在 Cursor 裡面 command + 點那個網址（Cursor 內建開頁面）
或者到外面的 Chrome 輸入：
localhost:3000
停止伺服器怎麼按？
在 Terminal 按
ctrl + c就會停止停止後你重新整理
localhost:3000就會沒東西（因為伺服器沒在跑）
2-6 如果你的電腦沒裝 Node.js，怎麼檢查＆安裝
1. 先檢查 Node 有沒有裝好
在 Terminal 輸入：
node -v
如果你有看到版本號（例如 vXX.XX.XX），就代表你已經安裝好了。
2. 沒裝的話：去官方網站下載安裝
到 Google 搜尋
node.js
下載對應系統（Mac 就下載 Mac 版）
安裝完再回到 Terminal 再打一次
node -v確認
2-7 超好用的小技巧：把程式碼「丟進對話框」讓 AI 只改那幾行
你如果想針對某幾行程式碼做調整（例如：字變大、變紅），你要先把「你想改的那段程式碼」丟進聊天視窗，讓它知道上下文。
你有兩種方式：
方法 A｜手動複製貼上
你直接複製那幾行貼到對話框，它會自動幫你標註是 index.html 第幾行到第幾行。
方法 B｜更快：反白後 Add to chat / 快速鍵
先反白你要改的那幾行
直接按 Add to chat
或是用快捷鍵（Mac）：
Command + L
這樣它就會把你反白的內容自動塞到聊天視窗裡，你就可以直接說：
「幫我把字放大」
「顏色改成紅色」
它就會知道：你只是在改那段（例如第 31～32 行），不會亂動其他地方。
Step3 Commit ＋ 上傳 GitHub
3-1 工作到一個段落記得做版本控制
點左邊工具列那個「像路線圖」的圖示（版本控制）
你會看到有哪些檔案被改過
Commit 前一定要輸入訊息（不寫的話會無法送出）
我自己會習慣用一個格式『feat: 新增/修改功能(feature)』
feat: Hello World 網頁你也可以寫任何看得懂的描述都可以
然後按 Commit。
如果它跳出提醒你「檔案還沒存」：
你可以先按
Command + S或直接按 Yes 也可以
另外它可能會提醒你有些變更還沒 Stage：
通常你要一起 commit，就按 Yes 把它納入。
3-2 Push：這才是真的將版本紀錄同步到雲端
你要記得：Commit 只是存在你本機。
要上傳到 GitHub，還要做第二件事：
點 Publish Branch （專案第一次同步時，因為還沒建立 Branch 所以這裡會顯示 Publish Branch）
之後有可能是顯示 Sync Changes (自動幫你同步目前版本到雲端)
第一次通常就是 main（主要分支），上傳完成後你會看到狀態變化。
3-3 最後可以回 GitHub 網站確認
回到 GitHub 專案頁面重新整理，你就會看到：
index.html出現在 repo 裡點進去可以看到完整程式碼
到這邊，今天練習的這個單元就算完整結束 🎉
課程還沒有結束，如果你想要完成更厲害的專案。
我製作了一門完整教學如何使用 Cursor 開發一個從前端到後端、前台到後台，功能完整，串接金流，可以立即收錢的購物網站的課程。很多過去上過我的 HTML 網站開發的同學，都會許願希望能學到 AI 開發網站，為什麼現在能夠讓初學者也有機會直接學完整套系統，就是因為我們正式進入 Vibe Coding 的時代，真的不用一行行打程式碼，記常用語法，自己思考邏輯和解 Bug了，而是能好好體驗這個聊聊天就能生出系統介面的成就感。而我不是只教會你做出畫面，而是教你如何完成背後的功能、伺服器、資料庫、網域申請、網站部署。
如果喜歡，現在還有一點時間享受預購優惠，希望能在課程中看到你。 →課程資訊
可以輸入 DORIS200 折扣碼，再折兩百喔。
