⭐ 精選文章

什麼是 Vibe Coding?2025 年 Vibe Coding 技術,實作心得與部署完整介紹

2025年程式開發領域相當熱門的名詞無非是 「Vibe Coding」 ,這也是目前最熱門的程式設計趨勢。「順著感覺走」的程式設計方式,讓完全不懂程式語法的人也能透過自然語言與AI對話,快速打造出功能完整的應用程式。本文將分享 Vibe Coding 工具選擇到部署上線的全流程指南。

Howshin Wang
2025年7月22日
29 分鐘閱讀
179 次瀏覽
什麼是 Vibe Coding?2025 年 Vibe Coding 技術,實作心得與部署完整介紹

2025年程式開發領域相當熱門的名詞無非是 Vibe Coding(氛圍編程) ,這也是目前最熱門的程式設計趨勢。「順著感覺走」的編程方式,讓完全不懂程式語法的人也能透過自然語言與AI對話,快速打造出功能完整的應用程式。本文將分享我使用 Vibe Coding開發小專案的完整經驗,從工具選擇到部署上線的全流程指南。

什麼是 Vibe Coding?革命性的程式開發新模式

Vibe Coding是由 OpenAI 共同創辦人 Andrej Karpathy 在2025年2月提出的程式編寫概念。簡單地說就是用自然語言描述需求,讓AI自動生成程式碼。開發者不再需要親手撰寫每一行程式碼,而是專注於「說出你想要做什麼」,剩下的交給AI幫你完成。

Vibe Coding的基本概念

以自然語言驅動開發:開發者只需用日常語言描述功能需求,如「幫我做一個能發送電子郵件的網站」,AI就能理解並生成相應的程式碼。

強調「感覺」與直覺:整個開發過程更像是與AI進行創意對話,開發者可以隨時根據「感覺」調整方向,不被技術細節束縛。

即時互動與快速迭代:當AI生成的程式碼不符合預期時,開發者可以立即用自然語言反饋,如「請加上錯誤處理」或「換成深色主題」。

傳統程式設計 vs AI輔助程式設計 vs Vibe Coding 比較

傳統程式設計 vs AI輔助程式設計 vs Vibe Coding 比較

熱門的 Vibe Coding 工具與平台

專業AI程式編輯器

Cursor:目前最受歡迎的 AI 程式設計編輯器,以 VS Code為基礎開發,基本上就是 VS Code 的 AI 版,提供強大的 AI 對話功能。你可以直接在編輯器中與 AI 對談,詢問程式問題或請協助除錯或者編寫程式。Cursor支援多種程式語言,能夠理解整個專案的上下文,提供更精確的程式碼生成。

Windsurf:由 Codeium 推出的 AI 原生編輯器,擁有獨特的「寫入模式」功能。在這個模式下,你可以直接根據提示詞寫入和生成文件,或者使用聊天功能像傳統 AI 助手一樣互動[。

Trae:字節跳動在2025年推出的 AI IDE,支援中文操作介面,內建 GPT-4o、Claude-3.5-Sonnet等模型。適合熟悉中文的開發者,提供 Builder模式,能協助用戶從零開始開發完整專案。

雲端開發平台

Replit:領先的雲端編程平台,支援包括 Python、JavaScript、Java、C++、Ruby 等程式語言。最大優勢是無需安裝任何軟體,只需瀏覽器就能開始編程。內建 AI 程式助手(Ghostwriter/Replit Agent)提供智能程式碼補全、錯誤診斷、函式說明等功能。Replit Agent 甚至能透過自然語言指令,自主解讀需求並產生程式、執行環境設置、協助部署等,大幅降低開發門檻。

Firebase Studio:Google 推出的雲端 IDE,同樣帶有 AI 程式助手功能,整合 Gemini AI,能以自然語言、圖像或繪圖工具快速生成應用程式原型,也能用文字描述讓 AI 直接產生 React、Next.js、Flutter 等框架的應用架構。

Lovable:用戶只需以自然語言描述需求,Lovable 即可一鍵生成前端、後端、資料庫等完整全端應用,無需拖拉元件或繁瑣手動設定,生成的程式碼可直接連結 GitHub,同步、版本控管,自由匯出並自行擴充、維護,打破傳統 no-code 黑箱限制,支援標準 React、Tailwind CSS、Node.js、Supabase、Prisma 等技術。

大型語言模型聊天介面

ChatGPT:最簡單的入門方式,直接在聊天框中描述需求。ChatGPT支援Python、JavaScript、Java、C++等多種編程語言,能夠生成程式碼、除錯、最佳化,甚至進行程式碼翻譯。

Claude:Claude 憑藉強大的語意理解、程式碼處理與工具整合能力,配合 MCP 平台,讓 AI 超越傳統語言模型,成為企業或個人日常開發、自動化、知識管理及協作的生產力核心,多模式 AI 助手(Claude Code)結合了聊天介面與命令列(Terminal)工具,可直接在本地開發環境與專案內的程式碼檔案深度互動。

Gemini:Google 的 Gemini 專為程式開發設計,具備高階程式碼生成、錯誤修正與跨檔案理解能力,支援多語言並整合多種 IDE。其聊天介面可處理超大上下文,結合即時網路搜尋與 GitHub 協作,強化團隊開發與審查流程。每月提供高達 18 萬次免費請求,適合密集使用者,支援程式碼執行、重構與 Workspace 整合,大幅提升開發效率, Gemini 也提供了 Gemini CLI(命令列介面),目前已以開源形式推出預覽版本,專為開發者設計,讓你可以直接在終端機(terminal)中使用。

Grok:Grok 是由 xAI 推出,Elon Musk 團隊開發的 AI 助手,具備強大的程式碼推理與上下文理解能力。其 Grok 4 Code 子模型支援多語言寫作、即時補全、重構與錯誤修正,並整合 IDE 與本地工具,加速開發流程。支援 128K+ token 記憶、自動化 DevOps 任務、CI/CD 流程與即時技術資料查詢,適合大型專案與高複雜度應用。

Vibe Coding實戰開發流程與攻略

Vibe Coding 就是用自然語言跟 AI 討論,但是這個是有一定流程的,你需要有方案與策略,不是想到什麼做什麼,基本上我會依照以下的流程來開始實作:

vibe_coding_workflow

  1. 擬定開發方向與架構:如果只有初步想法,可以跟 AI (使用你習慣的LLM 例如 ChatGpt、Claude、Gemini 或 Grok都可以,也可以使用 PrerplexityFelo)先進行討論,通常這些大型語言模型會協助規劃。
  2. 選擇 AI 開發工具 :選擇適合的 Vibe Coding 編輯器或雲端開發平台。
  3. 與 AI 討論專案架構與技術選擇:告訴你選用的 Vibe coding 編輯器、LLM 或雲端開發平台你想要設定的專案架構與達成目標並與它持續透過自然語言對話,想採用的開發技術為何,請切記確認相關技術後再開始實作,盡量不要一開始就請 AI 實作,因為起始專案,AI 會馬上寫一堆程式碼,這事關未來部署的問題,選擇錯技術,對於日後部署平台的選擇也會有所影響,以網站的產品為例,我會選擇 Next.js作為前端技術,對於 SEO 會比較有利,資料庫部分我會選擇 Postgress SQL,選擇這些技術是因為有對應免費的平台可以做部署,尤其對開發一些Hobby專案很重要,可以節省不少部署成本。
  4. 分段實作功能:盡量不要同時叫 AI 做很多事,第一次它通常會幫你實作出大致功能,但一定不會完整,甚至有很多問題,你可以先做簡單功能驗證,例如你有會員登入系統,則先處理好會員登入這塊即可。
  5. 善用 Github做版本控制:如果你不懂怎麼使用 git 提交程式碼做版本控制,也可以善用 AI 來提問,我建議可以開啟其他LLM來問,如果對技術不熟或不懂,不要在你開發的專案中的AI對話中做太多詢問,程式出現了問題再進行提問即可,這可以有效率的讓你的LLM不要記憶太多內容,以免該處理的問題沒有解決,反而耗掉不少 AI tokens
  6. 本地測試與備份:產品測試後,請記得將正確版本提交或備份,注意先做本地端部署,沒問題再跟 AI 討論之後雲端主機的部署工作,而不要第一次就跟 AI 說你想要部署到哪,不然他一定會朝該方向去做一些專案設定,對不懂的人會搞亂。
  7. 雲端部署:部署平台決定後再跟 AI 討論部署設定,然後進行正式產品部署。

實用小技巧

使用具體的提示詞:不要說「寫一個登入功能」,而是說「使用 bcrypt 和 JWT 認證寫一個安全的Python登入功能」。

善用「Think Harder」魔法咒語:在複雜問題上,加上「你要進一步仔細思考」或「think harder」能顯著提升AI回答品質。

採用鍊式思考:將複雜任務分解成多個步驟,避免AI處理超時。

免費部署平台完全指南

完成開發後,下一步就是將專案部署到網路上。以下是四個最受歡迎的免費前後端部署平台:

free_hosting_comparison
免費部署平台比較:Vibe Coding 項目的最佳選擇

Vercel:前端專案的首選

免費額度:每月100GB流量,支援無限專案部署。

最佳用途:Next.js、React、Vue等前端專案,特別適合靜態網站和無服務器應用。

部署步驟

  1. 將程式碼推送到GitHub
  2. 連接Vercel帳號與GitHub倉庫
  3. 選擇專案並配置構建設定
  4. 一鍵部署,自動獲得https域名
  5. 可以串聯 Supabase 資料庫應用

優勢:部署速度極快,自動CI/CD,內建CDN加速。

Supabase:全端專案的後端神器

免費額度:500MB資料庫,2個專案,包含認證和即時功能。

最佳用途:需要資料庫和後端服務的應用,如用戶管理、內容管理系統。

核心功能

  • PostgreSQL資料庫
  • 用戶認證系統
  • 即時資料同步
  • 自動生成API

部署優勢:2分鐘即可搞定用戶認證功能,完全開源,支援自建部署。

Railway:全端應用的理想選擇

免費額度:新註冊用戶有5美元額度,支援512MB記憶體、1GB硬碟。

** Hobby 方案(入門方案)**:目前最低的付費選項為 Hobby,月費 US$5 ,這 US$5 包含了平台每月指定的使用費(CPU、RAM、資料庫、網路傳輸等)。若當月使用量 ≤ US$5,只需支付這月訂閱費 US$5。如果超過 US$5 的使用量,超出的部分另行計費 ,每月的 US$5 使用額度不會累積。下個月會重新計算。

Railway Hobby 方案提供8 GB 記憶體、8 核心虛擬 CPU,以及 100 GB 共用磁碟空間的效能,對於一些商務網站其實相當夠用。

最佳用途:Node.js、Python、Docker容器等全端應用。

部署特點

  • 支援多種程式語言
  • 內建資料庫支援
  • 簡單的Git整合

Netlify:JAMstack的最佳夥伴

免費額度:每月100GB流量,支援表單處理和無服務器函數。

最佳用途:靜態網站、JAMstack應用、無服務器函數。

獨特功能

  • 內建表單處理,無需後端程式碼
  • A/B測試功能
  • 分支部署預覽

本文內容採用 創用 CC 姓名標示授權 (CC BY 4.0)。
使用者(包含 AI 模型如 ChatGPT)可自由讀取、摘要、翻譯與重寫本文內容,但需註明來源並附上原始網址

分享這篇文章:
← 返回文章列表
最後更新:2025年10月1日