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

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

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

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

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

【Cursor 教學】Vibe Coding 實戰！從釐清需求到部署上線，一次搞懂完整開發流程 #spec #git #nodejs #deploy #ai #sdd

第一次接觸 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 工具、自我成長、職涯發展感興趣，歡迎追蹤我！我會我會持續分享新的觀點 💡

在課程中還會透過實際範例，分享哪些工具安裝後，可以提升 Vibe Coding 的效率。

因為其實有很多的需求，根本不需要寫程式，直接使用別人完成的套件就好。

你也不用煩惱該使用哪個套件，以及套件該如何使用；因為安裝好這些工具後，AI Agent 會根據你提出的需求，自行判斷這些工具使用的時機點。

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

【Cursor 教學】安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練 #python #nodejs #nvm #git #ai #vibecoding

文章大綱

① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲
② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁
③ 加入 Git 版控，Vibe Coding 放心爆改

在這篇文章中，我會帶你一步步操作，讓你看完後也能打造出屬於自己的個人形象網站！

如果你是第一次接觸 Cursor，可以先看這隻影片。

文章開始前，先提醒一下大家：

AI Agent 的功能非常強大，給他權限後，不僅能自動安裝所需套件、執行指令，還能新增、修改甚至刪除檔案，因此使用時務必小心。

① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲

第一個建議大家安裝的工具是 Python。

我們安裝 Python 不是為了寫程式，而是為了讓 AI Agent 在面對問題時，有更多的解決方案。

安裝 Python

安裝 Python 這塊，大家可以直接到官網，根據自己的作業系統下載安裝檔即可。

安裝步驟我就不再贅述，安裝完成後，我們可以在 Cursor 打開一個新的終端機，然後輸入

python --version

如果有出現版號，就代表有順利安裝，接下來讓我們進入到實戰階段。

若輸入 python –version 沒有反應，請改用 python3 –version

提取文件資訊

像有些人會把 Cursor 當成 RAG 的工具使用，透過他快速檢索、分析、統整資訊。

但他有一個痛點，就是 Cursor 只能檢索「文字檔」，比如 Markdown/txt 這類型的文件，或是 JavaScript/Python 這類的程式。

假如你的檔案類型是 Word/PPT/PDF，Cursor 預設是沒辦法幫你檢索的。

但如果有安裝 Python，這一切就變成了有可能，像這邊我在資料夾放了自己的講師履歷。

如果今天想把裡面的文件、圖片提取出來，執行下面的指令，AI Agent 就會安裝對應的套件來解析文件，並根據需求將文件儲存成對應的 Markdown 檔案。

資料夾有 pdf/ppt/doc 等多種格式的文件，我想請你把所有文件內的「文字」取出來，並確定可以用繁體中文顯示。
並建立一個「doc」的資料夾，用 Markdown 的格式儲存，並整理文字結構，設計合適的大標、中標、小標，方便閱讀。
如果 ppt/doc 裡面有圖片，請建立一個「img」的資料夾，圖片檔的命名，前綴請使用文件檔名。

在執行這段指令後，AI Agent 就會設計執行步驟，一開始會先安裝需要的 Python 套件，設計程式來提取文件裡面的文字、圖片。

稍等一下，我們就可以在「doc」與「img」資料夾中，看到文字與圖片有順利的提取出來；節省過去需要手動複製貼上的步驟。

把文字提取出來後，就可以把 Cursor 當成 RAG 工具來協助統整資料了；首先把「doc」資料夾拖到 AI 的對話框，這樣 AI 才知道他要處理的內容範圍

接著貼上下面的 Prompt:

我是個講師，正在準備個人形象網站的素材，內容要呈現如下資訊：
- 擅長領域: 搭配可以佐證的資訊
- 個人成就: 找出可數據化的成就，展現實力的強大
- 課程資訊: 課程主題、說明、價格、受眾、預期成果
請先建立「integrate」資料夾，並將上面提到的面向用 Markdown 格式建立，並像個善於推銷自己的 KOL 般，用自信的語氣撰寫文案

這段 Prompt 我先表明自己的身份是「講師」，要求他幫我整理出「擅長領域、個人成就、課程資訊」的資訊，以此做為「個人形象網站」的素材。

稍等一段時間，在「integrate」資料夾，就能看到 AI 按照需求，幫我們完成了資料的彙整。

用網頁爬蟲蒐集資訊

另外有些人會使用 AI 來蒐集網路資料，但許多網站是禁止爬蟲的。

這邊我打開 NotebookLM 示範給大家看，如果來源貼上用 ChatGPT 分享的對話，NotebookLM 的解析是錯誤的，甚至像是 Medium 這類部落格文章也無法辨識

但如果你請 AI Agent 幫你用 Selenium 這個網路爬蟲工具，模擬真實使用者就能夠完成這項爬蟲任務了。

大家可以嘗試下面的指令：

先建立「crawler」資料夾，然使用 Selenium 模擬 Chrome 瀏覽器來設計爬蟲程式
取得下面 ChatGPT 分享連結的對話內容，這個網頁有反爬蟲設計，所以網頁開啟後，先等 5 秒鐘渲染元素再去抓取與 ChatGPT 的對話
https://chatgpt.com/s/t_68d21677946081918576092e1c2d37c1
抓到對話後建立「output」，將資料寫入 Markdown 檔案，檔名使用網頁標題，並優化 Markdown 格式為好閱讀的結構

這段提示詞有 2 個重點：

• 要求 AI 使用 Selenium 模擬 Chrome 瀏覽器來設計爬蟲程式
• 提醒他網頁有反爬蟲設計，所以網頁開啟後，要先等 5 秒鐘渲染元素再去抓取與 ChatGPT 的對話

稍等一段時間，在 output 的資料夾中，就能看到 Cursor 突破原有的爬蟲限制，取得與 ChatGPT 的對話內容。

剛好透過這個範例提醒大家，雖然我們用 Vibe Coding 完成了這個爬蟲程式。

但他的成功是建立在指令非常明確之上，如果沒有網路爬蟲的基礎概念，AI 的失敗率是非常高的。

專業知識，是你在 AI 時代的護城河。

② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁

大多數人 Vibe Coding 的第一個作品，通常是網頁。

但如果你只是請 Cursor 幫你設計一個公司或是個人的形象網頁，那 AI 通常是使用簡單的 HTML 與 CSS 做基礎設計。

但如果安裝了 Node.js，你就可以直接使用知名的前端三大框架 Vue/React/Angular 來做設計。

這些框架生成出來的結果會更符合現代審美，未來想擴充功能時，也有豐富的套件可以直接使用。

安裝 Node.js

在安裝 Node.js 這塊，我建議大家透過 NVM 來安裝

• Mac 執行指令就可以安裝了

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

• 但如果你是 Windows，就需要下載 exe 檔來安裝

因為 Node.js 有多個版本，而 NVM 這款工具可以幫你快速在不同版本間切換、更新。

nvm 安裝完成後，開啟終端機輸入 nvm -v，確認有成功安裝：

接下來輸入 nvm install –lts 來安裝最新版本的 Node.js

安裝完畢後，輸入 node -v 便可檢視剛剛安裝與現在使用的對應版本

完成上述步驟後，接下來就可以開始製作網頁了。

生成個人形象網頁

在前面，已經透過 AI 從 Word/PDF/PPT 裡面取出了個人資訊與相關照片，接下來我就直接示範如何用 Cursor 生成個人形象網頁的初版。

提醒大家，照片取出來後，建議給予分類、命名，這樣 AI 生成的結果會更好。

下面我們把生成網頁，要參考的文字、圖片資料夾拖到與 AI 的對話，然後貼上下面指令：

建立一個「personal-website」資料夾，我想要用 React 框架，設計一個個人形象網頁。
網頁一定要呈現的頁面如下：
- 頂部: 有個人形象照與基礎資訊
- 擅長領域: 切換不同領域時更換對應顏色
- 個人成就: 加上互動效果與圖片
- 課程資訊: 以卡片顯示，含說明與價格
- 聯絡洽詢: 頁面最下方
設計重點:
- RWD 響應式設計
- 有一致的色系規範
- 搭配對應圖片（請複製到專案並用相對路徑）
- 互動效果與視覺化呈現（例如 hover、切換）
整體水準:
- 高度專業感
- 資訊重點清晰
- 圖片長寬比例需考量版面配置

這段指令除了一開始有指定使用的前端框架為 React 外，下面有分成 3 塊指引：

1. 首先我跟他說明頁面要呈現的資訊
2. 接著提醒設計要注意的重點
3. 最後則是放上一些額外的需求

然後稍等一段時間，個人形象網頁的初版就完成了：

但還是要提醒大家，AI 只是加速製作網頁的過程，你要自己去確認細節是否符合自己的需求。

像是基本的文字描述、圖片擺放是否恰當，以及 RWD 的設計是否完善等等。

如果不知道在哪新增圖片、或是文字大小不知道怎麼調整，可以直接向 AI 詢問。

如果生成網頁的過程遇到 Bug，出現一堆紅字，那也非常正常。

你可以把錯誤訊息複製下來，貼到 AI 的對話窗，請他協助解決。

這方法能解決大多數的基礎問題，但如果遇到的錯誤太多，或是邏輯上的問題，就需要根據實際情境來處理，這邊會再找時間寫一篇文章分享。

③ 加入 Git 版控，Vibe Coding 放心爆改

Vibe Coding 時，你的每個指令都可能大幅調整專案的程式。

但 AI 修改的結果未必是你要的，甚至有時會把正常的功能給改壞了。

為了把改壞的內容救回來，我會建議大家安裝 Git，這個程式碼版本控制工具，並註冊 GitHub 帳號來管理專案。

安裝 Git

首先，我們可以到 Git 官網下載安裝檔

安裝好 Git 後，開啟 Cursor 終端機輸入指令 `git -v` 確認有正確安裝

接著用下面的指令來完成初始化設定，請自行調整成自己的英文名字與 email

git config --global user.name "baobao"
git config --global user.email "baobao@gmail.com"

然後產生 SSH Key，這是為了確保這台電腦有更新專案的權限，這邊也請自行調整成自己的 mail

ssh-keygen -t ed25519 -C "baobao@gmail.com"

SSH Key 生成出來後，可以透過下面的指令顯示公鑰，這會在下一個步驟用到

cat ~/.ssh/id_ed25519.pub

註冊 GitHub

這邊我們來到 GitHub 的官網，你可以直接使用 Gmail 來註冊。

註冊完成後，我們到帳號右上角的 Settings

選擇側邊欄的「SSH and GPG Keys」，點擊「New SSH Key」來新增剛剛生成的公鑰

接著建立一個新的 repository，用來儲存剛剛 AI 生成的網頁專案。

Repository name 可以自由輸入，這邊我打「personal-website」，Description 可保留空

如果你不想把這個 Repository 公開，可以在「Configuration」把 visibility 改成「Private」

把專案更新到 GitHub

接著回到剛剛 Cursor 幫我們生成的專案，在終端機輸入 git init 來初始化專案 git。

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

然後點擊左上方的 Source Control，你可以手動在框框內輸入這次的更新內容，又或是點擊旁邊的星星按鈕，讓 AI 自動產生：

確認文字描述符合自己的預期後，點擊 commit，就會在自己的電腦記錄這個變更；但如果想更新到雲端，你需要點擊 Push 才會成功喔！

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

接著回到專案，嘗試與 AI 提出一個修改的需求

我希望可以有 Dark Mode 與 Light Mode 的設計

等 AI 執行完畢後，你可以在 Source Control 這個地方看到 Vibe Coding 更新的內容。

如果發現他改壞了，後續對話也無法解決，你可以全部放棄變更！

這邊我再給他一個要調整的內容

1. 形象照的圖片顯示上半部就好
2. 最上方個人簡介區塊下面要有留白
3. 我的成就裡面的圖片，可以根據不同比例完整顯示，要上下左右置中，多個地方用透明顯示
4. 職涯發展顧問、職涯發展的顏色太淡，不好辨識

如果對這次的調整滿意，就提交並發布一版保存；提交我們的 commit，點擊同步變更後他就會提交到 GitHub 雲端上面，以上是最基礎的 Git 操作。

他是一個很棒的版本控制工具，功能非常多，這邊放上常用指令，有興趣深入研究的朋友可以保存一下。

git init：在目前資料夾初始化 git
git clone <repo-url>：將遠端的專案下載到電腦
git checkout <branch>：切換到指定分支
git checkout -b <branch>：建立並切換到新分支
git merge <branch>：將指定分支合併到當前分支
git stash：暫存目前變更
git stash pop：取回並套用暫存變更
git push origin <branch>：將本地分支推送到遠端
git pull origin <branch>：拉取遠端分支並合併
git fetch：抓取遠端最新狀態

如果不知道指令怎麼下，別忘記有 AI 這個好夥伴可以詢問～

Vibe Coding 的工具很重要，但電腦品質也不能太差

在舉辦幾場 Vibe Coding 的工作坊後；我發現一件特別的事，明明指令相同，有些學員可以很快取得期待的結果，而有些學員則是很容易卡住。

一開始我以為是運氣問題，但深入討論後，發現瓶頸其實是出在電腦的硬體規格上面。

因為 Vibe Coding 會需要索引專案、執行指令、編譯程式，假如電腦的記憶體、CPU，以及硬碟的配置較差。

那你執行的每一步都要會花更多的時間，有時不是 AI 做不出來，只是速度慢到你以為他卡住了。

其實電腦也不需要買多好的，我前陣子買了一台一萬八的 Windows 電腦，CPU 是 Intel i7、記憶體 16 GB、硬碟用 SSD，跑起來就很夠用了。

結語：掌握讓 Vibe Coding 效率翻倍的工具

最後來回顧一下今天分享的 3 個工具：

1. 我們可以透過 Python 幫我們讀取不同格式的文件內容，甚至用網路爬蟲取得詳細資訊。
2. 安裝 Node.js 後，我們可以使用最流行前端框架，打造更專業、漂亮的網站。
3. 有了 Git 協助版本控管後，我們就可以用 Vibe Coding 大膽嘗試創意的想法

安裝這些工具不是為了讓你變成程式設計師，而是讓 AI 有更多武器來幫你解決問題。

看到這裡，大家應該可以感受到 Vibe Coding 的可能性與便利。

但還是要提醒大家，Vibe Coding 並不是完全零門檻的事情。

在實務上，當問題變得更複雜，或需要跨領域整合時，專業知識仍然是必要的。

像今天分享的這些工具，對沒有資訊背景的人來說，可能都是知識盲區。

AI 能做到哪些事情，其實是取決於你對這個世界的認知。

希望今天的分享，能讓你使用 Cursor 做 Vibe Coding 時，獲得更好的體驗。

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

斜槓講師、作家、影片創作者的我，就把它應用到課程規劃、文章撰寫、資料彙整、字幕生成、腳本設計、字卡規劃、音效建議…等多個領域。

這篇文章會從 Cursor 的基礎操作開始，帶大家學會範圍限制，與設定 Rules 提升答案品質。

最後透過實際案例，分享 AI Agent 可以給我們帶來的幫助。

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

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

動機：我厭倦在 AI 工具間複製貼上

我的本職是工程師，一開始只把 Cursor 當做程式編輯器；而創作文章、資料彙整還是在 ChatGPT 或 NotebookLM 上操作。

但時間一久，我覺得要根據需求使用不同工具很浪費時間。

像是我在企業內訓備課的時候，有些主辦方會給我課程的參考資料，但這些資料的格式不一，可能是 Word/PDF/PPT。

而且有些資料還有重複的問題，儘管可以靠 NotebookLM 彙整資訊，但上傳、複製、貼上的動作不但無趣又很浪費時間，而且無法跨筆記本操作。

另外我開始拍 YouTube 後，也需要花很多時間處理「腳本設計、字卡規劃、音效建議、宣傳導流」這一系列的事情。

錄幾隻影片後，我覺得自己拍片的熱情，快被這些瑣碎的事情給消耗殆盡。

於是我開始思考：

有哪些任務可以交給 AI 處理？有沒有可能，把任務集中到一個工具搞定。

最後我把寫程式的思維，整合進 Cursor；才發現它根本就是創作者的神器！

① 下載 Cursor，掌握基礎操作

下載安裝

首先我們要進入 Cursor 官網，點擊「下載」按鈕，便可獲得安裝檔。

這篇文章以 Mac 操作為主，但 Windows 與 Linux 系統也是可以操作的。

隱私設定

在安裝並註冊完 Cursor 後，我們先打開設定；確認目前是否已經選擇 Privacy Mode。

啟用後，通過 Cursor 伺服器的資料不會被用於模型訓練，提升我們使用上的資訊安全。

基礎操作

操作方面，你可以在右側的對話窗，透過對話向 AI 提出需求，提示詞的技巧與 ChatGPT 相同。

下面是範例 Prompt：

幫我設計一個 Cursor Vibe Coding 的教學大綱，並建立一個 Markdown 檔案，檔名需為好理解且具描述性的英文檔名。
大綱內容要有清楚的結構（如章節或步驟），用詞要容易理解，方便教學使用。
Cursor 是一款 IDE 工具，課程要注重如何善用 AI 取得更流暢的開發體驗。授課對象為沒寫過程式的學員。

他遵循的結構如下：

• 目標：在目標方面，我跟他說要設計一個 Cursor Vibe Coding 的教學大綱
• 格式：在輸出格式上，我要求他要用 Markdown 檔案呈現，並且使用英文檔名
• 注意：並要求他注意設計大綱時結構要清楚，用詞要容易理解
• 脈絡：並補充工具簡介與學員的背景

從下圖可以看到，只要提示詞足夠明確，就能在初始對話獲得品質較高的回覆。

同時也跟大家說明 Cursor 與 ChatGPT 最大不同的點，就在於 ChatGPT 要來回複製貼上，而 Cursor 可以直接新增、修改檔案，讓你免於複製貼上的繁瑣步驟。

Clear all chat

但也提醒大家要定期清空對話，避免 AI 因為錯誤的上下文，導致回覆的品質下降。

Cursor 價格說明

完成註冊後，一開始會有兩週的 Pro 版試用，但試用是有額度限制的；像我大概一天就把免費額度用完。

如果大家看完文章，並在實際操作中，覺得 Cursor 對你的工作、創作有幫助，可以考慮付費升級到 Pro 版。

以我個人來說，Cursor 幫我節省下來的時間、精力，遠遠超過這個價值。

② 了解不同模型的使用時機

現在是生成式 AI 大爆發的年代。

每隔幾天，就會有新聞報導，說某個模型又取得了更優秀的成績。

但如果你使用的是 Cursor，那現在最夯的 ChatGPT、Gemini、Claude 的最新模型都能使用。

模型選擇

下面的列表，就是Cursor 有提供的模型：

你會看到有些模型有大腦的符號 🧠，這代表他是「推理模型」，可以處理更複雜的任務，但執行時間較長。

而其他的則是「非推理模型」，面對簡單問題可以更快的得到答案。

你可以在這個頁面勾選想使用的模型，建議勾選最新的模型，會得到更好的表現。

不過在對話的時候，我建議選擇「Auto」就好，讓 AI 來幫你決定；不然每次對話都要選對應的模型也太累人。

③ 學會範圍限制，提升答案品質

儘管 Cursor 具備檢索「整個專案」的能力；但執行比較久，錯誤率也會隨之上升。

所以我會建議限制參考資源的範圍，比如特定的資料夾、檔案；這樣 Cursor 就能更快、更精準地完成需求。

使用上非常簡單，用拖拉的方式即可，可以一次選擇多個檔案、資料夾。

如果想要更精確的指定，你也可以選擇文件內特定範圍的文字（點擊 Add to Chat），請 AI 針對性的閱讀、修改。

④ 設定 Rules，讓 AI 更懂你

除了限制範圍可以提升 AI 回應的品質外，設定好 Rules 可以讓 AI 更懂你

Rules 就是告訴 AI，你的工作習慣、偏好和要求的設定

這邊分享一個 Cursor 內部員工的 Rules 範例：

DO NOT GIVE ME HIGH LEVEL SHIT, IF I ASK FOR FIX OR EXPLANATION, I WANT ACTUAL CODE OR EXPLANATION!!! I DON'T WANT "Here's how you can blablabla"

- Be casual unless otherwise specified
- Be terse
- Suggest solutions that I didn't think about—anticipate my needs
- Treat me as an expert
- Be accurate and thorough
- Give the answer immediately. Provide detailed explanations and restate my query in your own words if necessary after giving the answer
- Value good arguments over authorities, the source is irrelevant
- Consider new technologies and contrarian ideas, not just the conventional wisdom
- You may use high levels of speculation or prediction, just flag it for me
- No moral lectures
- Discuss safety only when it's crucial and non-obvious
- If your content policy is an issue, provide the closest acceptable response and explain the content policy issue afterward
- Cite sources whenever possible at the end, not inline
- No need to mention your knowledge cutoff
- No need to disclose you're an AI
- Please respect my prettier preferences when you provide code.
- Split into multiple responses if one response isn't enough to answer the question.

If I ask for adjustments to code I have provided you, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make. Multiple code blocks are ok.

大家可以把它複製起來，然後貼到 Rules 設定中，這會在所有專案中生效！

另外大家可以再加上一個 Rules，告訴 AI 你習慣使用的語言

Always respond in 繁體中文

每個人都有不同的職業、偏好、需求，大家可以針對性地來設計專屬自己的 Rules，讓他更符合工作流。

⑤ 撰寫 Spec，讓 AI 知道怎麼做事

剛剛示範的 Rules，是跟著你的帳號走，在每個專案都會生效；但現實生活中的每個專案，往往都有不同目的。

像我就是一個斜槓的工程師，除了寫程式外，還要寫部落格、寫書、備課，甚至還有拍 YouTube。

如果把每個身份都寫進 Rules，不但不好管理，甚至還會讓 AI 混亂，導致效能下降。

所以這個時候，你應該要針對專案的不同目標，來設計 Rules，不過因為規則複雜，所以我習慣把它稱為 Spec，也就是需求規格。

讓 AI 知道在不同專案下，該如何完成任務。

建立給專案的 Rules

在剛剛建議 Rules 的地方往下滑一點，就可以建立針對 Project 的 Rules。

比如我們想請 AI 做的是把文章轉成腳本，名字我就打「article-to-script」。

接著你會看到這個檔案出現在「.cursor」的「rules」資料夾中，副檔名為 .mdc。

你可以自由設定這個規格要觸發的時機，像是永遠觸發、AI 自動判斷、針對特定檔案、或是人為呼叫都可以。

至於內容要怎麼寫，我們一樣可以請 AI 幫忙。

你是一位擅長打造 KOL 的專家團隊，我想請你請從業界實戰的角度，規劃出當用戶輸入「文章轉腳本」時， AI 要執行的步驟、輸出的限制、以及結果品質的檢查，完成後將結果更新到這個檔案中。

得到初步的版本後，你可以根據實際需求調整細節；比如我在結尾加入這個腳本要儲存的位置，避免修改原本的檔案。

## 檔案儲存位置
在同層資料下以 `{原檔名}_script.md` 命名來建立檔案

驗證 Rules 是否生效

這邊我拿自己過去寫的一篇文章，實際 Demo 給大家看；我先把這篇文章拖到右側 AI 對話窗，然後跟他說「文章轉腳本」。

接著稍等一段時間，一份腳本的草稿就生成了，這可以大幅增加創作者的效率！

⑥ 體驗 AI Agent 一鍵搞定的快感

讓 Project Rules 互相參考

在剛剛的範例中，我只有提供 AI 一個客製化規則。

但其實你可以設計多個可以串聯的規則，這邊我也拿自己的案例來分享。

我有為了製作 Youtube 專門開一個專案，並在下方設計完整的 Spec，涵蓋了了「文章轉腳本，腳本轉逐字稿，以及把腳本轉成短影音」的規則。

我除了可以透過這些關鍵字來執行外，也可以輸入「一次搞定」，這邊我就有告訴他完整的執行順序。

發揮 AI Agent 的潛力

在影片的開頭，我有說到 Cursor 可以幫我彙整 Word/PPT/PDF 等多種格式的文字與圖片。

不過更準確的說法，是 Cursor 辨識完文件的格式後，安裝了許多 Python 的套件，然後下指令提取出檔案的文字、圖片。

而這一系列從「辨識文件、安裝套件、執行指令、彙整文件」的操作，都是 AI 幫我完成的，我只有要求他幫我彙整資料夾內的文件，整合資訊到新檔案而已。

我有次也好奇 AI Agent 能做到什麼地步，於是把 MP4 影片檔丟給他，請他幫我生成出 SRT 字幕檔，結果沒想到他安裝完辨識語音的 Whisper 套件後，真的把字幕檔生成出來了。

看到結果的時候我超 Shock！

但也提醒一下大家，儘管 AI Agent 可以幫我們做到很多事情，但開放權限給他時，請先搞清楚是否會造成危害。

像套件自動安裝、指令自動執行儘管很方便；但越強大的工具，出事時，問題往往也越大。

AI Agent 有辦法將一個簡單的指令，解析成「多個執行步驟」後，完成「複雜、龐大」的任務（但結果未必正確）。

結語：一起嘗試 AI 工具的潛能吧！

希望這篇文章，能讓沒有開發經驗的朋友，也願意嘗試 Cursor 這款強大的 AI 工具。

在具備正確觀念，並熟悉設定後，相信 AI 可以幫我們搞定許多繁瑣的事務，讓我們專注在真正有價值的工作上！

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

而使用生成式 AI 做 Live coding，更是充滿各種隨機性。

而我挑戰的，是用生成式 AI 在近 80 位觀眾面前，針對 8 個不同的主題做 Live coding（甚至涵蓋多個程式語言）。

這個主題跟大綱，可能沒什麼人會報名喔！

最近受老朋友的邀約，開了一系列生成式 AI 的課程。

因為課程主題的自由度較高，所以我安排了一個想講，但過去從沒講過的主題：「用 AI 輔助開發的技巧」，大綱如下：

• 撰寫 Regex 正則表達式
• 轉換程式語言
• 撰寫邏輯複雜、不熟悉的資料庫語法
• 產生比較真實的假資料
• 重構程式
• 撰寫單元測試
• 程式語言、框架升級小幫手
• 撰寫驗證效能的程式

把大綱發給朋友後，他馬上回：「可以開，但那一場可能會比較少人。」

果不其然，上課的人數少了快 4 成；不過沒被上面的課程大綱嚇跑，已經很值得鼓勵了。

風險高、受眾少，但我就是想講！

如果你用過生成式 AI 輔助開發，那你一定知道他並沒有官方 Demo 的那麼靠譜。

可能有時程式可以跑，但有時會出現各種 Bug，如果不具備對應的專業知識，甚至會需要花更多的時間在 Debug 上。

過去我也講過 6 場生成式 AI Live coding 的課程，很多原本自己試過數十次都沒問題的 Prompt，偏偏在講課的時候出狀況。

有些人會說：「拿過去跟 AI 聊天的成功範例 Demo 就好了啊，幹嘛整自己？」

也許這樣做最沒風險，但我認為只有在現場實際操作，才能證明這個工具真的有用！

要講，就要準備充分

講自己熟悉的主題很輕鬆，但準備全新的主題才會成長。

所以備課時，每個主題都選擇業界實際上會遇到的痛點，並搭配對應的範例做講解與 Live coding。

在技術上，我選擇了 ChatGPT、Cursor、Codeium、Qodo 等輔助開發的 AI 工具，讓觀眾了解使用時機＆功能差異。

並且每個 Prompt 都經過多次驗證，確保觀眾在課後練習時，也能完成課堂上的範例。

機會屬於勇敢嘗試的人

我知道還有很多工程師排斥使用 AI 開發，更不用說 Cursor 這類 AI 的 IDE。

但現在會使用 AI 輔助開發的工程師，產能絕對超過周圍的同事。

隨著 AI 能力的成長，我相信這個差距會越來越明顯。

而這個超越他人的機會，只屬於勇敢嘗試的人！

在此鼓勵看到這篇文章的人，勇敢跨出自己的舒適圈，嘗試過去沒碰過的工具吧！

PS. 不過大家在使用 AI 開發公司的專案前，請遵守公司的資安規範，否則可能會有嚴重的後果。

想將 AI 導入自己的職場與生活嗎？歡迎購買筆者出版的新書，幫助您在 AI 的浪潮中站穩腳步，並在未來的職場競爭中佔據優勢！