Cursor 教學：安裝 3 款讓 Vibe Coding 效率翻倍的工具！用「個人形象網站」實戰演練
在這篇文章中，我會示範安裝 3 款工具，讓 Cursor AI Agent 效率直接翻倍，並以「個人形象網站」為例，完整實戰給你看！
本文目錄
最近幫企業上 Vibe Coding 的課程時，除了請他們安裝 Cursor 外。
在課程中還會透過實際範例，分享哪些工具安裝後，可以提升 Vibe Coding 的效率。
因為其實有很多的需求，根本不需要寫程式，直接使用別人完成的套件就好。
你也不用煩惱該使用哪個套件，以及套件該如何使用；因為安裝好這些工具後，AI Agent 會根據你提出的需求，自行判斷這些工具使用的時機點。
建議搭配影片觀看實際的操作步驟。
文章大綱
① 突破 AI Agent 限制，用 Python 自動萃取文件、網路爬蟲
② 安裝 Node.js，讓 AI 生成漂亮、專業的形象網頁
③ 加入 Git 版控，Vibe Coding 放心爆改
在這篇文章中，我會帶你一步步操作，讓你看完後也能打造出屬於自己的個人形象網站！
文章開始前，先提醒一下大家：
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 來安裝
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash
因為 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 塊指引：
- 首先我跟他說明頁面要呈現的資訊
- 接著提醒設計要注意的重點
- 最後則是放上一些額外的需求
然後稍等一段時間，個人形象網頁的初版就完成了：
但還是要提醒大家，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 個工具：
- 我們可以透過 Python 幫我們讀取不同格式的文件內容，甚至用網路爬蟲取得詳細資訊。
- 安裝 Node.js 後，我們可以使用最流行前端框架，打造更專業、漂亮的網站。
- 有了 Git 協助版本控管後，我們就可以用 Vibe Coding 大膽嘗試創意的想法
安裝這些工具不是為了讓你變成程式設計師，而是讓 AI 有更多武器來幫你解決問題。
看到這裡，大家應該可以感受到 Vibe Coding 的可能性與便利。
但還是要提醒大家，Vibe Coding 並不是完全零門檻的事情。
在實務上，當問題變得更複雜，或需要跨領域整合時，專業知識仍然是必要的。
像今天分享的這些工具，對沒有資訊背景的人來說，可能都是知識盲區。
AI 能做到哪些事情，其實是取決於你對這個世界的認知。
希望今天的分享，能讓你使用 Cursor 做 Vibe Coding 時，獲得更好的體驗。
如果你對 AI 工具、自我成長、職涯發展感興趣，歡迎追蹤我！我會我會持續分享新的觀點 💡
留言載入中…