我怎麼提升 Vibe Coding 效率?三個開發訣竅與 AI 協作心法

Richard Cheng-avatar-img
發佈於討論區 個房間
更新於 發佈於 閱讀時間約 6 分鐘

最近我用 Vibe Coding 的方式做了一個 side project,叫做 Smart Segment

這是一個可以上傳 CSV、快速分析特徵影響力的小工具,幫助你找出「哪些欄位可能對轉換率(conversion)有明顯區別效果」。特別適合用在二元分類任務中做特徵選擇,不需要手動跑統計檢定,也能快速篩出值得關注的變數。

雖然我沒有前端開發的背景,但這次透過 Cursor 搭配 AI 自動生成程式碼的方式,就算不熟 React 和 CSS,也能在短時間內做出一個能實際運作的工具。

以下是我在這個過程中累積的一些實作心得與小技巧,希望對也想透過 Vibe Coding 完成 side project 的你有些幫助:


Vibe Coding 開發過程中的實用技巧

1. 先釐清需求再下去做,能大幅減少來回修正的時間

我一開始只是想「做一個網站」,但做到一半才發現,我其實希望這個網站是可以被 Google 搜尋到的。如果想達到這個目的,網站的架構就必須採用有利於 SEO 的網站實作方式,例如使用適合的渲染方式讓 Googlebot 能讀到內容。

然而,AI 最初幫我產出的網站是使用 React 的 client-side rendering(CSR),這種做法對 SEO 並不友善。後來我才改成使用 Next.js 的 server-side rendering(SSR)架構,Google 才能正確 index 網站內容。

這段經驗讓我意識到,如果能一開始就釐清網站的目標特性(例如是否需要 SEO、是否要支援快速載入),其實可以大幅降低修改成本,第一版也能做得更精準。

同時我也體會到,在 AI 能產出程式碼的情境下,「人類的角色更像是 PM」,負責定義清楚的產品需求。


2. 讓 ChatGPT 幫你整理成一份完整 PRD

Vibe Coding 本質上是「對 AI 下指令」,但要寫出有效的 prompt 並不容易。我一開始的指令常常寫得不夠完整,導致結果不盡人意。

後來我調整方式:先把想要的幾個核心功能列出來,再請 ChatGPT 幫我整理成一份比較完整、結構清楚的 PRD。這份文件我再貼到 Cursor 裡,讓 AI 根據這個 PRD 寫出一整段功能。

我實測下來,Cursor 在接收到結構清楚的 PRD 時,產出的品質跟邏輯完整性都明顯更好。 這種流程也能減少我反覆修 prompt 的時間,讓整體開發體驗更順暢。


3. 用 Git 做版本控制,需要的時候直接打掉重練

Vibe Coding 對從零開始開發來說非常快速,但當你已經完成一個基本版本、準備進入優化階段時,就會發現新的挑戰:改一段 A 功能,可能會不小心弄壞另一段 B 功能。

這時候我發現,與其不斷請 AI 修 patch,不如用 Git 做好版本控制,保留明確的每一步變更紀錄。有需要時可以直接回到上一個穩定版本,會更有效率、也比較不會留下難以追蹤的技術債。


上面講了那麼多流程優化,但實作過程中,我也不斷思考一個問題:既然 AI 可以寫 code,那人類還需要做什麼?

這次的開發經驗給了我一個很明確的答案:能夠判斷程式碼品質,是做出可維護產品的關鍵能力。

像是我就觀察到,AI 在生成程式時常常把所有邏輯塞進同一個檔案,完全沒有模組劃分。對於一次性的 demo 或練習來說沒什麼問題,但若希望這個工具能長期使用並持續迭代,這種寫法很快就會變成地雷。

這種時候就需要人類介入,手動拆分檔案、釐清模組邊界、設計合理的資料與邏輯架構。否則就算 AI 能寫出一堆 code,也很難維護、debug、更別說重複使用。


架構越清楚,AI 回答越精準,效率也越高

除了可讀性與維護性,良好的程式架構還有一個好處:可以幫助 AI 更有效地回應你的問題。

如果整個程式混在一個檔案裡,即便字數沒有超過 AI 可接受的 context window,但因為有很多多餘資訊,導致 AI 更容易誤判或回傳不相關的結果。

相反地,當 codebase 結構清楚、有良好命名與模組區分時,你可以很自然地下 prompt:

「請修改 calculateStats.js 裡的檢定邏輯,改成用 z-test 判斷比例差異。」

這樣 AI 回答的正確率與效率就會大幅提升,也更能發揮「AI 寫 code、人類決策」的優勢。


結語:Vibe Coding 是一個提升生活實作力的好工具

如果你也是一個常常腦中冒出點子、卻不知道怎麼實作的人,我真的很推薦試試這種方式。即使不是工程師,只要願意摸一下 Git 和 VS Code,很多想法都能變成產品雛形。

最後也歡迎你在留言區分享你用 Vibe Coding 做出的酷東西,或是你遇到的挑戰與心得。這是我最近正在探索的實驗方式,也期待能從你們的分享中獲得更多靈感 🙌


如果對於我的其他文章有興趣,歡迎前往 Data Analyst 的學習筆記 觀看更多文章~也歡迎在留言區跟我分享你的心得!

文章推薦:

留言
avatar-img
留言分享你的想法!
avatar-img
Data Analyst 的學習筆記
10會員
22內容數
多年經驗的數據分析師,透過部落格記錄職場心得以及生活所學 主要會分享以下三類型的主題 1. 職場心得:包含數據分析師的工作經驗以及職場所學 2. 觀影心得:會分享我從電影、影集以及動畫中所學習到的內容 3. 生活雜談:其他不在上述兩類的內容
2025/05/28
從一部探討「越有錢越摳門」的影片出發,本文分享我在面對裁員時,因低生活成本而保有更多選擇彈性的反思。影片指出,隨著收入提高而盲目提升生活方式,反而會降低自由與心理韌性。與其追求高收入對等的高支出,不如有意識地壓低生活成本,為自己留下一條隨時轉彎的退路。這不是摳門,而是一種更清醒的選擇方式。
Thumbnail
2025/05/28
從一部探討「越有錢越摳門」的影片出發,本文分享我在面對裁員時,因低生活成本而保有更多選擇彈性的反思。影片指出,隨著收入提高而盲目提升生活方式,反而會降低自由與心理韌性。與其追求高收入對等的高支出,不如有意識地壓低生活成本,為自己留下一條隨時轉彎的退路。這不是摳門,而是一種更清醒的選擇方式。
Thumbnail
2025/03/17
上週末聽完這集 Podcast「胡程維 - Google NotebookLM 工程師,AI 與哲學美麗的交會:重塑思考、學習與自我實現」,收穫滿滿,想透過這篇文章和大家分享我學到的內容與一些心得。
Thumbnail
2025/03/17
上週末聽完這集 Podcast「胡程維 - Google NotebookLM 工程師,AI 與哲學美麗的交會:重塑思考、學習與自我實現」,收穫滿滿,想透過這篇文章和大家分享我學到的內容與一些心得。
Thumbnail
2024/09/28
作為《心態致勝》的成長思維支持者,我一直堅信,人的能力和智慧並非一成不變,而是可以通過不斷學習與努力得以提升。然而,隨著我在工作和生活中的經驗累積,我逐漸意識到,成功並不僅僅來自努力,運氣也在職場表現中發揮著不可忽視的作用。
Thumbnail
2024/09/28
作為《心態致勝》的成長思維支持者,我一直堅信,人的能力和智慧並非一成不變,而是可以通過不斷學習與努力得以提升。然而,隨著我在工作和生活中的經驗累積,我逐漸意識到,成功並不僅僅來自努力,運氣也在職場表現中發揮著不可忽視的作用。
Thumbnail
看更多
你可能也想看
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
TOMICA第一波推出吉伊卡哇聯名小車車的時候馬上就被搶購一空,一直很扼腕當時沒有趕緊入手。前陣子閒來無事逛蝦皮,突然發現幾家商場都又開始重新上架,價格也都回到正常水準,估計是官方又再補了一批貨,想都沒想就立刻下單! 同文也跟大家分享近期蝦皮購物紀錄、好用推薦、蝦皮分潤計畫的聯盟行銷!
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
2023 Vue直播班筆記 - 動態路由Props,接續之前的一般動態路由。分為 "寫死" 及 "彈性" 兩種。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
Creative Coding 作品變化概念,有或沒有的差別,隨機性,色彩模式的調整...等
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
Thumbnail
列出一套完整的程式 程式設計有許多種方法,不過通常會先列出清單的再逐一執行,這樣會加快程式設計的速度。設計通常會採取順推的辦法。所以順推的程式設計方式就是經歷觀念溝通、系統分析、資料統合、權限管理、頻率與時間、後台管理、畫面設計等等階段後,將框架設計完了以後,先列出一套完整的程式,將所有使用者都確
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News