Vibe Coding(氛圍編程)是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。
這種開發方式的核心理念是「順著感覺走」,讓 AI 處理技術細節,開發者專注於創意和需求描述。
Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段,前期準備、開發過程、和後期維護三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。
將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成「前、中、後」三階段要做的事情,適合你自己做、或帶團隊做
前期:設定 vibe & 準備素材
這個階段的重點是「建立開發語境」,因為 AI 的生成表現高度依賴前期提供的上下文與資料。
- 明確目標:釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」
- 收集靈感:觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。
- 建立語境:準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。
- 確認資源:決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。
確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證
提示詞模板準備
很多人會跳過這步驟,但一份「好的 AI 提示詞模板」將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備:
- 描述具體且無歧義
- 包含技術要求和約束條件
- 提供範例資料和測試案例
- 指定程式碼風格和慣例
例如針對筆記軟體的案例:
「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」
開發工具選擇
開發工具的選擇同樣重要,目前市場上主要的 Vibe Coding 工具包括:
- VSCode:透過 Copilot 或自訂 AI agent 快速補全程式碼
- Cursor:專業級 AI 程式編輯器,適合複雜專案開發
- Replit:雲端編輯器,適合快速原型開發
- v0:專精於生成 UI 組件,適合將介面先做出雛形
- Firebase Studio: 網路介面,可讓您使用多模態提示(包括自然語言、圖像和繪圖工具) 快速製作原型
中期:進行 Vibe Coding 協作開發
當前期語境完成,就能開始真正的 Vibe Coding 工作坊。這階段的任務在於:
- 互動式生成 與 AI 來回對話,快速生成初版 UI、流程、資料結構等。
- 持續微調 依據每次測試回饋,馬上調整提示詞與生成內容。
- 共創記錄 同步記錄決策依據、版本紀錄,利於未來回顧或團隊交流。
- 產出原型 以 AI 產物為基礎,結合 v0、Lovable、Figma、Canva 等工具,快速生成雛形 UI。
案例:建立 Markdown 編輯器
假設你在提示詞 Prompt 中輸入:
我需要一個 React 元件,支援文字即時預覽,使用者輸入的內容可以透過 marked.js 轉換成 HTML 並呈現在旁邊的區塊。
AI 回應後,如果有缺陷(例如樣式混亂、未處理 XSS),你要馬上補充提示:
請將 marked.js 轉譯結果先透過 DOMPurify 淨化,以防止 XSS 攻擊。
接著持續測試、微調,直到功能符合心中 vibe。
請將 marked.js 轉譯結果先透過 DOMPurify 淨化,以防止 XSS 攻擊。
接著持續測試、微調,直到功能符合心中 vibe。
迭代式開發流程
Vibe Coding 的本質是「把需求用自然語言清楚描述」,而不是自己寫到死。描述需求時要做到以下幾點:
- 描述需求:用自然語言說明想要的功能
- AI 生成程式碼:等待並查看 AI 產生/調整程式碼區塊
- 即時測試:立即運行和測試生成的程式碼
- 提供反饋:針對問題用簡單明確的語言反饋
- 迭代優化:重複上述流程直到滿意
關鍵是要小步快跑,避免大幅修改,每次只針對一個小功能進行調整,這樣更容易追蹤問題並保持程式碼品質,其中像是 v0, replit 都具備每個段落提供自動的版本紀錄規劃,讓使用者在接下來的迭代,都可以順利的往下進行,或者回頭進行重新實作的完整體驗。
例如:
「建立一個用於筆記軟體的標籤系統元件,支援新增、刪除標籤,並自動避免重複;點擊標籤後可觸發事件 filterNotes(tag),用以篩選顯示筆記列表。」
開發節奏管理
保持適當的開發節奏和專注度對 Vibe Coding 至關重要。建議:
- 避免長時間連續開發造成疲勞
- 定期休息以保持判斷力
- 記錄開發過程中的關鍵決策
- 適時進行程式碼備份
每次只調整一個小功能,避免一次大修導致混亂。像 Cursor、Replit 具備自動版本紀錄,每一步都能回溯,讓你隨時掌握進度。
後期:驗證 &收斂
在這階段的工作是收斂成果、完成驗證,並進入交付或發佈前準備:
- 內部評估:與團隊或測試對象快速測試成果是否符合 vibe & 需求。(如果你沒有對象,在下也愛莫能助)
- 修正迭代:根據回饋再次用 AI 進行調整,優化內容或介面。
- 成果彙整:整理最終版本的流程、設計、文案,建立可交付文件或 demo。
- 後續計畫:明確下一步(交給工程、準備 pitch、或做用戶測試等)。
部署與監控
完成程式碼功能確認後,建議可以持續的進行部署更新,如果可以的話建議持續性的部署規劃:
- 先在測試環境進行完整驗證功能
- 建立自動化部署流程
- 設置監控和日誌系統
- 準備回退方案
實作心法與安全提醒
在整體的過程中,建議各個(甚至是工程師)可以體會一下,
- 小步快跑,頻繁交付 把大功能拆成小模組,每次只聚焦一塊。
- 強制人工驗證 不要盲目相信 AI 產出的程式碼,所有邏輯都應測試。
- 持續優化提示詞樣板 根據每次開發回饋更新提示詞,讓 AI 與你的各方面需求越來越契合。
常見的安全盲區
而最後,最被忽視,從來都是最嚴重的問題!
這部分,對於大部分的非技術體驗者,甚至到開發者,其實都有可能逐漸忽視這塊!
最經典的議題就是將 openai api key 直接暴露於前端,讓所有使用者都可以直接拿取直接呼叫。(費用大爆炸)
而其中歸納最常見的問題大概會有這幾種(專業名詞不懂建議都可以再深入 ChatGPT or Google)
- SQL 注入、XSS
- 不當的身分驗證
- 密碼未加密
- 將使用者資料隨意記錄到外部服務
如果這些問題沒有特別防範,會讓產品直接暴露風險。當然如果各位有這些顧慮,歡迎找我們討論。
後記:Vibe Coding 是自由還是陷阱?
寫了這麼多,其實想表達的是,Vibe 本身是一種隨性,但隨性並不代表隨便,還是需要具備基礎認知和框架才可以走得穩當,跑得飛快。
Vibe Coding 可以很秋,很隨性,也的確可以解決許多手動問題,個人問題,思考輔助,同時也可以讓自己透過自動化,透過程式工具解決許多系統化的問題。
認真建議,歡迎每個人都開始從 Vibe Coding 投入寫程式的行列,如果說要做什麼題目,我想就先從 Eat your own dog food. 開始!
切記,『保持初心』
後記的後記
市面上絕大部分教學 Vibe Coding 並且說自己有多成功的人,大多常見的成功是來自於學生的你,太多的神話與倖存者偏差,讓各自山頭開宗立派各自成立門戶,這真的沒必要。
這個月的 Awesome Course,下一個季度就變成 Awful Class
試想,既然叫做 Vibe Coding 又何來雜七雜八道理可言呢?既然要 Vibe, 就要有那個範兒,怎麼會有什麼太多的奇怪限制與奇怪格式呢!
說這話,太傷人,但實話就是你沒有女朋友
實際上我認為是『如果要教學,就好好教學,發自內心的傳授所知。』,價格和價值市場自然會進行評價。
沒必要先畫一個成功財富自由的餅,讓一群人盲目跟從。就如同股票教學,真正教的,是心法,是回測,是面對真實的自己,只有真正屬於自己的,學到的,才是真的。
實話總是太傷人,但該說還是要說!
參考資料
- https://x.com/karpathy/status/1886192184808149383
- https://studio.firebase.google.com/
- https://lovable.dev/?via=caesar
- https://replit.com/refer/CaesarChi1
- https://v0.dev/
- https://gamma.app/signup?r=1l8o9qc8p4qvfaw
諮詢聯繫
歡迎與我們聊聊產品策略、流程優化與 AI 工具導入方式,我們團隊很樂意協助! 歡迎直接聯絡我,或者來信,
📩 信箱位置 👉 service@cympotekc.om
社群活動分享
如果你看完這篇文章,也開始對「怎麼用 AI 幫你加速、放大你的想法」感到興趣,那你絕對不能錯過這場活動👇
🎤 🐻 Coding Bear 台北場|來聊什麼是 Vibe Coding 台北場
我們將深入分享如何結合 AI 與程式、創意、內容製作,
讓你用最自然的方式,讓 AI 成為你的工作室助手。
📅 時間:7/16(三)18:30
👉 報名連結:https://codingbear.kktix.cc/events/ai-vibe-coding-2025-07-taipei
天南地北來亂聊,從設計、內容到自動化,無論你是創作者還是開發者,這場講座也許會有實用又有趣的靈感(吧)。來聊聊 AI 怎麼幫你少做一點雜事、多做一點你真的想做的事吧!
留言
張貼留言