# Cursor 教學：Vibe Coding 實戰！從釐清需求到部署上線，一次搞懂完整開發流程

- 作者：林鼎淵（Dean Lin）
- 網址：https://deanlin.net/blog/202510/cursor-vibe-coding-end-to-end/
- 發布：2025-10-18
- 主題：AI 實戰
- 系列：Cursor 教學
- 標籤：Vibe Coding、Cursor、AI、Node.js、GitHub Pages
- 摘要：如果你想嘗試 Vibe Coding，這是一隻讓「開始」變容易，「想法」有成果的影片。

如果你想嘗試 Vibe Coding，這是一隻讓「開始」變容易，「想法」有成果的影片。

一開始會分享與 **AI 釐清需求，討論出產品規格的技巧；**並說明請 AI 撰寫程式前，我會如何**設計專案的規則**，讓 AI Agent 撰寫程式時，有參考的依據。

在準備好專案的規格與規則後，我才會讓 **AI Agent 開始動手寫程式、完成專案**。

但程式完成，不代表結果符合預期；你可能會遇到**錯誤訊息、外觀破版，或是想要新增更多功能。**這邊也會跟大家示範，可以如何引導 AI，讓專案更加完整。

在最後會分析整個專案架構，帶大家了解 **AI Agent 到底幫我們做了哪些事；**並透過 **GitHub Pages 發布專案**，讓你完成的網頁可以直接分享給朋友。

> 建議搭配影片觀看實際的操作步驟。

[YouTube 影片：【Cursor 教學】Vibe Coding 實戰！從釐清需求到部署上線，一次搞懂完整開發流程 #spec #git #nodejs #deploy #ai #sdd](https://www.youtube.com/watch?v=wOnjdSDt-8A)

  [https://youtu.be/wOnjdSDt-8A](https://youtu.be/wOnjdSDt-8A)

> 第一次接觸 Cursor 與 Vibe Coding 的朋友，可以先參考下面的文章：
> ➤ [Cursor 教學：入門到實戰，用 AI Agent 自動化你的工作流！](https://deanlin.net/blog/202509/cursor-getting-started/)
> ➤ [Cursor 教學：安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練](https://deanlin.net/blog/202509/cursor-productivity-extensions/)

## ① 釐清需求，生成專案規格

我覺得 Vibe Coding 的目的，是要在短時間實踐你腦中的靈感，或解決現實生活遇到的痛點。

### 最小可行性方案

儘管每個人想完成的專案大小不同，但建議大家先釐清目標的「最小可行性方案」

把想要一口氣搞定大型專案的想法，從腦中拿掉；否則最終產生的結果，要馬不會動，要馬問題一堆。

後續反而要花更多的時間，一一排除這些問題。

### 製作純前端網頁

同時建議沒有程式背景的朋友，可以把「純前端網頁」，也就是這篇文章的範例，當成第一個 Vibe Coding 專案。

因為不涉及後端、資料庫，所以比較沒有資訊安全、隱私外洩的問題。

而且完成後可以直接把網頁分享給朋友，非常有成就感。

### 真的會用到的工具

另外專案的目標，最好設定為自己「真的會用到」的工具。

像大家現在看我上面的 YT 影片，可能覺得我侃侃而談，講得流暢不卡詞。

這不是因為我有多厲害，而是因為面前有一個提詞器；準備好逐字稿後，我只要錄影時照著念就好了。

一開始我是使用網路上，其他人分享的線上提詞器；但免費的廣告一堆，付費的又塞了一堆用不到的功能。

既然如此，我乾脆直接用 Vibe Coding 寫一款完全符合自己使用需求的提詞器，同時也讓大家免費使用。

### 新增空資料夾，來開始專案

我們要先透過討論釐清這個網站需要有的功能；因此這邊不使用 AI Agent，而是先切換到 Ask 的模式來討論。

```
我想要設計一個「純前端」的「提詞器」網頁
想要以「最小可行性方案 MVP」來進行設計
請從實際使用者的角度，將功能依據「必要、次要」的方式來分類
並告訴我使用者體驗最佳的操作流程

```

此時你會得到 AI 初步的規劃建議，如果你對結果不滿意，可以繼續討論。

假使覺得這個規劃可以接受，就可以把它轉換成方便網頁工程師理解的需求規格。

```
請扮演專業的 UI/UX 設計師，根據上面的討論
用下面的格式，回傳「具體、可執行」的網頁設計規格。
目標是幫助前端工程師能依據描述直接開始開發，內容需具備視覺與互動細節。

輸出格式：
# [頁面名稱]
- 功能簡述：（一句話概述頁面目的）
- 色系搭配：（主色、輔色、背景色、按鈕色）

## [由上而下列出使用元素]
請依畫面垂直順序列出元件，格式如下：
- 元件名稱（如：頂部導覽列 / 按鈕 / Banner 區塊）
  - 顏色：
  - 寬度：
  - 高度：
  - 字型大小與樣式（如有文字）：
  - 功能說明（該元件的目的）：
  - 若為[按鈕] → 說明觸發任務（例：「送出表單」「切換主題」）
  - 若為[功能按鍵] → 說明使用方式（例：「滑過顯示選單」「長按複製」）

⚠️ 請只輸出上述格式內容，不要附加分析、理由或額外說明。

```

透過這個提示詞，你就會得到一份非常詳盡的規格：

接下來切換成 Agent 模式，請他將前面對話的內容彙整成一個 Markdown 格式的 Prompt，儲存到專案「idea」的資料夾中。

```
將上面對話的結論彙整成 Markdown 格式的 Spec
請儲存到專案根目錄的「idea」資料夾中（若無自動建立），以好辨識的英文命名檔案
還不需要實作

```

之所以這麼做，就是產生一個**可以讓我們手動編輯細節的規格文件**，而且後續開發時可以回顧專案的設計。

儘管相關訊息可以從過去的對話找到，但相信我，你幾乎不會翻過去的對話內容。

> 儘管我們可以使用 AI Agent 模式，讓 AI 直接寫程式；但我更建議大家先討論出具體、明確的專案框架後，再請 AI 做事。

近幾年流行一個名詞，叫做 SDD（Specification-Driven Development），也就是規格驅動開發

比如今天的範例，就是用規格驅動 AI 開發，當目標足夠明確、解決的問題足夠具體時，你對生成的結果才有較高的掌握度，Vibe Coding 的成功率才會上升。

如果你在想這些步驟會不會花太多時間。

> 我可以用十多年的開發經驗跟你保證，如果初期沒寫好文件，日後要花好幾倍的時間去反覆修改。

## ② 設計規則，讓 AI 知道做事邏輯

今天的範例為「前端網頁」，可以只用簡單的 HTML、CSS、JavaScript 來完成。

但為了讓大家對「專案」有更具體的概念，所以我以三大前端框架 Vue、React、Angular 做示範。

在每個框架下，其實都還有各自的元件庫可以使用

- **Vue**：Element Plus、Vuetify、Naive UI
- **React**：Ant Design、Material UI、Chakra UI
- **Angular**：Angular Material、NG-ZORRO、PrimeNG

如果你對這些框架不熟悉，建議你可以先挑一個（ex: **React + Material UI**），未來 Vibe Coding 就直接指定他。

之所以這麼做，是因為**每個框架與元件庫會遇到的坑都不一樣**，假使每次都用不同的框架來製作專案。

**那可能每個坑都得走一遍，這是一件非常沒有效率的事情。**

### 建立專案的 Rules

接下我們要去建立專案的 Rules，讓他製作網站時知道要依循什麼規則。

點擊右上角的設定，選擇「Rules & Memories」，在 Project Rules 點擊新增。

檔名我就直接打「spec」，然後選擇 Always Apply 讓他每次對話都會觸發。

然後貼上設計的規則，在規則的部分，使用 Markdown 的語法撰寫就好，大家有興趣可以自行客製化，我只是提供一個基礎的範本。

```
## 使用的框架與元件庫
- 框架: React + Vite
- Node 版本: 加 .nvmrc
- 元件庫: Material UI

## 注意事項
- 請先搜尋網路上類似工具使用的套件
- 需考量 RWD 響應頁面
- 建立 .gitignore 來排除指定檔案上傳（ex: node_modules）

## README
- 專案介紹、功能列表、需求（Node 版本）、安裝與啟動、部署步驟、授權

## GitHub Pages 部署
- 使用 GitHub Actions
- 僅 master branch 觸發

```

## ③ 讓 AI Agent 參考規格、規則開發專案

在專案的需求規格以及規則都設計好後，接下來就可以用 AI Agent 設計初版網頁了。

建議開一個新對話，選擇 Agent 模式，你直接跟他說：

```
請參考「idea」的 SPEC，在專案根目錄新增「teleprompter-app」來實作專案

```

稍等一段時間，AI Agent 就會根據 SPEC 把這個網站製作出來。

如果他有自動幫你運行專案，你可以先請他關閉：

```
幫我關閉專案

```

這是因為在專案完成後，建議大家用新的 Cursor 視窗來來開啟這個專案，因為前面專案的規格與規則是為了產生這個專案而寫的，專案產生完畢後，繼續使用原有的規格、規則，可能會導致 AI 混亂。

另外在安裝專案套件與啟動專案這塊，你可以直接跟 AI 說：

```
幫我安裝套件並啟動專案

```

不過我是更建議大家打開 package.json 這個檔案，裡面有專案的各種資訊，像 scripts 這塊就是你可以透過 npm 執行的各種指令。

像是基礎的開發啟動是 `npm run dev`、想要建立靜態檔用 `npm run build` 。

如果想安裝套件，就用 `npm install`，他會安裝 `dependencies` 與 `devDependencies` 所列出的套件。

這邊我們打開終端機，在下面貼上指令「npm run dev」來啟動專案（具體指令請參考 scripts）

但提醒大家，不管我們前期的規格對功能、外型描述得多仔細；他完成的結果還是有可能會不如預期（比如影片範例就是一片空白）。

  可以按下 F12 查看主控台是否有錯誤訊息

> **別忘記，生成式 AI 的結果本來就是充滿隨機性的。**

這些是我為何建議先完成最小可行性產品，因為範圍小，所以釐清錯誤、調整內容相對方便。

> **一但範圍大了，你連怎麼調整都會沒有頭緒。**

所以千萬別想著靠一個指令就生成一套系統，因為光生成一個簡單的網頁都會遇到很多問題了。

## ④ 解決問題、優化專案、新增功能

以前端網頁來說，問題通常分成兩大塊：

- **外型**：你可能覺得頁面的版型、顏色、按鈕大小不符合你的預期
- **功能**：有些操作起來不符合你的預期

### 解決問題

比如我想要讓提詞器播放順利，可以這麼說：

```
提詞器進入全螢幕後遇到以下問題：
1. 第二次點擊播放時，進度條會直接到底
2. 觸控板滑動時，頁面滑動與滑鼠感受不同
3. 滑到中間位置時按播放，感覺是更從前面的位置開始

```

### 優化專案

另外這個網頁有一些快捷鍵，我希望具體的使用方式可以放在首頁輸入框下方，這邊我就貼上一個比較模糊的指令，跟他說：

```
在首頁「輸入框」下方，新增「快捷鍵」提示的區塊，說明快捷鍵功能，請使用明顯的色系搭配

```

這個 Prompt 我就沒有指定具體色系、寬度、高度，由 AI 自動判斷。

等 AI 完成實作後，如果你不滿意，可以透過後續引導來微調細節。

### 新增功能

這邊我再新增一個功能來做示範，比如我希望貼上文字後，能有中文、英文、符號的字數統計，以及總共行數：

```
在首頁「輸入框」下方，增加「即時字數統計」的功能，在 1 列分 3 塊顯示
- 中文字數、中文標點符號數
- 英文單詞數、英文標點符號數
- 總共行數
希望文字有對應顏色搭配方便辨識

```

等 AI 搞定後，我們回到網頁，然後貼上文字，初步確認計算是否符合需求。

其實這個提詞器還有很多細節可以優化，這邊給大家看我最後調整了哪些細節：

- 在首頁的地方，我增加了自己社群的資訊
- 把「字數統計、快捷鍵說明」這兩個區塊都改成一行顯示，減少空間上的浪費
- 進入全螢幕畫面後，我把原本置中的內容改成靠左以符合我的習慣
- 因為錄製影片時前面會有腳架，所以我設計了間隔，讓文字不要被腳架擋住
- 設計了分段的功能，讓我可以調整講話節奏
- 右上角多了一個「倒數計時器」，讓我知道現在的稿子會講多久

  [https://deanlin.net/teleprompter-app](https://deanlin.net/teleprompter-app)

> 我覺得 Vibe Coding 的魅力不是一鍵搞定，而是你可以根據實際需求快速迭代產品，但前提是你知道自己要的是什麼。

## ⑤ 了解 AI 生成的專案架構

接下來讓我們來瀏覽一下專案資料夾，了解 AI 幫我們做了哪些事情：

### package.json

- scripts 這裡，有專案啟動、建立靜態資源的指令
- dependencies、devDependencies 則是專案使用套件的版本資訊

未來隨著專案規模擴大，你可能會遇到框架與套件、套件與套件之間相容性的問題，到時可能就會有鎖定版本、升降版本的需求，原則上就是在這邊調整的。

### node_modules

「dependencies、devDependencies」列出的套件，都會被安裝到 node_moodules 的資料夾當中。

以 Node.js 的專案來說，通常體積最大的就是 node_moodules 這個資料夾。

因為套件版本已經有 package.json 控管，所以我們並不會把 node_moodules 上傳到 Git。

至於如何把他從 Git 版控中移除，就要談到 .gitignore 這個檔案了

### .gitignore

這個檔案是用來告訴 Git 哪些檔案或資料夾不該被版本控制追蹤：

- MacOS 與 Windows 的系統暫存檔（.DS_Store/Thumbs.db）
- 儲存專案套件的 node_modules 資料夾
- 自動生成的結果，如 build 這類資料夾
- 像 .env 這種會儲存個人設定與密鑰的設定檔

### README

這份文件會包含專案簡介、功能列表、安裝環境需求等資訊，可以幫助你快速掌握這個專案的重點資訊。

## ⑥ 用 GitHub Pages 免費發布網頁

確認專案都符合需求後，我們可以透過 GitHub Pages 發布專案，具體的執行流程可以參考專案中 「.github/workflow」 底下的 「deploy.yml」 設定檔。

在 GitHub 建立 Repository 後，會根據這邊設計的流程來發布專案。

### 建立 Repository

Repository 名稱輸入「teleprompter-app」，因為我們這個專案預計要發佈到 GitHub Pages，所以選擇 Public。

### 把電腦專案與 GitHub Repository 連接

在終端機輸入 `git init` 來初始化專案 git。

然後回到網頁，複製第一行 `git add…` 貼到專案的終端機，這樣我們就可以把電腦的專案與 GitHub 上面的專案連結。

### 確認有更新到 GitHub Repository

點擊提交，就會在自己的電腦記錄這個變更，但如果想更新到雲端，你需要點擊 Push 才會成功喔！

Push 後我們回到 GitHub 網頁，刷新一下頁面，如果能看到專案的內容，就代表你成功上傳專案了！

### 到 Actions 分頁查看部署的狀況

成功的話會有綠色勾勾，失敗則是紅色叉叉，會需要點進去釐清具體的錯誤原因。

錯誤通常都是因為：

- 靜態資源沒找到（static resource）
- 語法格式錯誤（line error）
- 套件相依問題（npm dependency）

把它複製起來貼到 AI 對話框，通常都能快速釐清問題並解決。

如果一切順利，點擊進去就會看到這個專案的網址嚕：

之後這個專案都是使用這個網址，把它點開來，順利的話，就可以看到成品嚕～

  [https://deanlin.net/teleprompter-app/](https://deanlin.net/teleprompter-app/)

如果影片看到了這裡，可以幫我點個讚鼓勵一下，我會持續分享更多實用教學。

## 結語：Vibe Coding 的底層邏輯

過去學程式、寫程式，是一個痛苦，且漫長的週期。

沒學到一定的程度，你連小程式都開發不了。

但現在有了 AI，即使你不會寫程式，也能透過對話的方式，一步步完成專案的建立。

像今天這隻影片就分享了用 Vibe Coding 從 0 到 1 的完整過程，雖然專案的規模較小，不過日後面對更大型的專案時，底層邏輯與流程也是一樣的。

建議大家先從小專案開始練習、熟悉開發的流程；這樣日後想設計大專案時，會更有完整的概念。

另外隨著專案規模擴大，功能增加，你還需要搭配一些自動化測試的工具來輔助。

單靠人工的方式手動測試，不但沒效率，還很容易有遺漏的測試項目。

而且新功能的增加，有可能會導致舊功能壞掉，**如果這隻 YT 影片的按讚破 200，我會再出一隻影片。**

跟大家分享用 AI 撰寫測試程式的概念與技巧～

> 之所以製作一系列 Vibe Coding 影片，是為了避免大家踩到我遇過的「坑」。

如果你對 AI 工具、自我成長、職涯發展感興趣，[歡迎追蹤我](https://dean-lin.medium.com/subscribe)！我會我會持續分享新的觀點 💡

  [https://www.tenlong.com.tw/products/9786264142083](https://www.tenlong.com.tw/products/9786264142083)

延伸閱讀：[AI 實戰](https://deanlin.net/categories/ai/)

---

關於作者：林鼎淵（Dean Lin），台灣的生成式 AI 企業內訓講師、外商資安公司軟體專家，也是生成式 AI 創新學院發起人。出版 7 本書（包含全台第一本 ChatGPT 應用專書），兩度獲得 iThome 鐵人賽佳作，累積上百場授課與顧問經驗。（https://deanlin.net/about/）
引用時請附上原文網址：https://deanlin.net/blog/202510/cursor-vibe-coding-end-to-end/