# Cursor 教學：安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練 - 作者：林鼎淵（Dean Lin） - 網址：https://deanlin.net/blog/202509/cursor-productivity-extensions/ - 發布：2025-09-28（更新：2025-12-21） - 主題：AI 實戰 - 系列：Cursor 教學 - 標籤：Cursor、AI Agent、Git、Node.js、Python - 摘要：在這篇文章中，我會示範安裝 3 款工具，讓 Cursor AI Agent 效率直接翻倍，並以「個人形象網站」為例，完整實戰給你看！ 最近幫企業上 Vibe Coding 的課程時，除了請他們安裝 Cursor 外。 在課程中還會透過實際範例，分享哪些工具安裝後，可以提升 Vibe Coding 的效率。 因為其實有很多的需求，根本不需要寫程式，直接使用別人完成的套件就好。 你也不用煩惱該使用哪個套件，以及套件該如何使用；因為安裝好這些工具後，AI Agent 會根據你提出的需求，自行判斷這些工具使用的時機點。 > 建議搭配影片觀看實際的操作步驟。 [YouTube 影片：【Cursor 教學】安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練 #python #nodejs #nvm #git #ai #vibecoding](https://www.youtube.com/watch?v=5DEV_K0JauQ) ``` 文章大綱 ① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲 ② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁 ③ 加入 Git 版控，Vibe Coding 放心爆改 ``` 在這篇文章中，我會帶你一步步操作，讓你看完後也能打造出屬於自己的個人形象網站！ > [如果你是第一次接觸 Cursor，可以先看這隻影片。](https://youtu.be/kVniOF36GEk) ### 文章開始前，先提醒一下大家： ### AI Agent 的功能非常強大，給他權限後，不僅能自動安裝所需套件、執行指令，還能新增、修改甚至刪除檔案，因此使用時務必小心。 ## ① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲 第一個建議大家安裝的工具是 Python。 我們安裝 Python 不是為了寫程式，而是為了讓 AI Agent 在面對問題時，有更多的解決方案。 ### 安裝 Python 安裝 Python 這塊，大家可以直接到[官網](http://python.org/downloads/)，根據自己的作業系統下載安裝檔即可。 安裝步驟我就不再贅述，安裝完成後，我們可以在 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](https://notebooklm.google.com/) 示範給大家看，如果來源貼上用 [ChatGPT 分享的對話](https://chatgpt.com/s/t_68d21677946081918576092e1c2d37c1)，NotebookLM 的解析是錯誤的，甚至像是 [Medium 這類部落格文章](https://deanlin.net/blog/202507/afteroffice1-15-years-one-book/)也無法辨識 但如果你請 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 執行指令就可以安裝了](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) ``` curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash ``` - [但如果你是 Windows，就需要下載 exe 檔來安裝](https://github.com/coreybutler/nvm-windows/releases) 因為 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 官網下載](https://git-scm.com/downloads)安裝檔 安裝好 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 的官網](https://github.com/)，你可以直接使用 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 ：將遠端的專案下載到電腦 git checkout ：切換到指定分支 git checkout -b ：建立並切換到新分支 git merge ：將指定分支合併到當前分支 git stash：暫存目前變更 git stash pop：取回並套用暫存變更 git push origin ：將本地分支推送到遠端 git pull origin ：拉取遠端分支並合併 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 工具、自我成長、職涯發展感興趣，[歡迎追蹤我](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/202509/cursor-productivity-extensions/