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

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

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

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

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

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

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

第一次接觸 Cursor 與 Vibe Coding 的朋友，可以先參考下面的文章：

➤ Cursor 教學：入門到實戰，用 AI Agent 自動化你的工作流！

➤ Cursor 教學：安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練

---

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

我覺得 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）

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

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

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

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

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

---

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

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

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

解決問題

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

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

優化專案

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

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

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

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

新增功能

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

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

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

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

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

我覺得 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 對話框，通常都能快速釐清問題並解決。

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

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

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

---

結語：Vibe Coding 的底層邏輯

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

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

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

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

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

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

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

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

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

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

如果你對 AI 工具、自我成長、職涯發展感興趣，歡迎追蹤我！我會我會持續分享新的觀點 💡

AI 實戰 實測生成式 AI 工具、Vibe Coding 與自動化流程的第一手心得，把 AI 變成每天都用得上的即戰力。 林鼎淵 Dean Lin