如何開始進行 Vibe 編碼

Vibe 編碼能加快程式設計師與非程式設計師的構思速度,前提是您知道正確的操作方法。

學習目標

閱讀本文後,您將能夠:

  • 瞭解 Vibe 編碼的潛在優點
  • 找出 Vibe 編碼可能存在的風險和陷阱
  • 邁出 Vibe 編碼的第一步

複製文章連結

為什麼 Vibe 編碼越來越受歡迎?

為了將抽象的想法轉化為具體成果,當今的業務團隊必須能夠清楚地向軟體開發人員和 IT 團隊傳達他們的願景。Vibe 編碼透過為非技術性的專案經理與團隊成員提供所需的技術名詞,幫助他們將模糊的概念轉化為具體的功能。

這就是 Vibe 編碼變得如此受歡迎的原因:它讓軟體開發更加普及,也提升了效率。即使是非開發人員也能探索已規劃和未來應用中存在的可能性,從而加快創新週期,並提高原型設計的成本效益。

領導技術專案的經理尤其鍾愛 Vibe 編碼。使用大型語言模型 (LLM) 中的提示並直接建立工作原型,可以簡化繁瑣的軟體開發流程。缺乏深厚編碼知識的經理無需向 IT 合作夥伴提出諸如「你能改進一下嗎?」之類的模糊請求,而是可以使用 Vibe 編碼建立粗略的工作原型來展示他們的願景。這樣一來,業務主管與支援他們的 IT 從業人員之間的合作將更為順暢,進而有助於加速產品上市策略。

如何開始 Vibe 編碼:第一步該怎麼做?

如果您想學習如何進行 Vibe 編碼,以下是一些能幫助您入門的小技巧:

1. 找出適合的候選專案

請思考哪些專案最適合採用 Vibe 編碼。通常,那些需要建立原型來探索與溝通想法的程式設計任務,都非常適合使用 Vibe 編碼。

以下是一些特別適合使用 Vibe 編碼的專案範例:

  • 您是一位產品經理,您在心中構想了一個更新、更顧客友善的訂單系統畫面,希望能吸引使用者。透過 Vibe 編碼,您可以將這個畫面的內容描述給 LLM,並請它產生所需的程式碼。
  • 您有一個構想,認為可以加速緩慢的核准流程,並提升企業的關鍵績效指標 (KPI)。透過 Vibe 編碼,您可以將這個工作流程描述給 LLM,接著它就能自動產生一個用於申請、轉送及簽核所需核准的使用者介面。
  • 您是一位客服經理,希望客服人員能更快地對問題進行分類處理。您構想了一款軟體應用程式,讓客服人員能夠辨識五種常見問題類型,並針對每種問題提供解決建議。透過 Vibe 編碼,您可以將這款應用程式的功能描述給 LLM,隨後它就能為您產生這個應用程式。

任何想要學習 Vibe 編碼的人都應該瞭解,不僅要明白何時該使用 Vibe 編碼,也要知道何時不該使用。那麼,什麼情況下不適合使用 Vibe 編碼呢?Vibe 編碼只會產生一條通往原型與工作程式碼的路徑,而這條路徑可能不是最有效率的。事實上,如果您將 Vibe 編碼產出的程式碼作為擴展業務操作的基礎,很可能會遇到困難。就目前而言,即使您對產生的程式碼進行了測試與偵錯,根據 Vibe 編碼的最佳做法,也建議您只在商業風險較低的情境下使用它。然而,在未來,我們很可能會看到更多由 Vibe 編碼開發的應用程式正式投入生產環境。

2. 將業務需求轉換為提示詞

提示詞是您在 LLM 的聊天輸入框中輸入的指令內容,目的是獲得您想要的輸出。提示越具體,得到的輸出結果就會越好。不要使用含糊不清的說法,比如「做一個網頁」,而是要描述您希望這個網頁含有哪些按鈕,以及您偏好的設計風格或色彩。同時,還應包括具體資訊,例如終端使用者的使用場景,以及隱含的實作需求。例如,隱含的實作要求可以是:「請使用 React 架構撰寫這段程式碼;不要只用純 JavaScript。」

另外,也請包含對限制條件的說明。例如:「請確保相同的程式碼無需修改即可在行動裝置與桌面瀏覽器上正常執行。」

如果您在撰寫提示詞時需要協助,您也可以使用 LLM 來完成這項任務。您甚至可以讓 LLM 主動向您提問,以便在產生程式碼的過程中獲得您的引導與意見。這種方式讓沒有程式設計經驗的使用者也能以自然語言進行溝通,最終產出他們想要的應用程式。

以下是來自 Vibe 編碼應用程式「Lovable」的一個範例提示詞:

我需要一個**任務管理**應用程式,具備以下功能:
- **技術堆疊:**Next.js 前端,Tailwind CSS 用於樣式設計,Supabase 用於驗證與資料庫
- **核心功能:**建立專案與任務、將任務指派給使用者、到期日期提醒,以及儀表板總覽功能。

首先建立**主儀表板頁面**,其中包含:
- 一個帶有導覽的標頭,
- 一個專案及其狀態的清單,
- 以及一個用於建立新專案的按鈕。

雖然您可能仍然需要一些基本的程式碼知識才能開始(例如瞭解 CSS 用於版面配置),但只要您實際練習使用 LLM,並將您輸入的提示詞與產生的輸出相互對照,就能很快上手。

3. 快速且頻繁地迭代

一般來說,您應該檢查 LLM 所產生的程式碼,確認其邏輯合理,並先在沙盒環境中執行,以避免將潛在漏洞暴露至更大範圍的重要程式碼中。但在 Vibe 編碼的情境下,您可以破例處理。因為 Vibe 編碼的目的是快速產出一個可運作的示範版本,所以請避免陷入費力尋找錯誤或自行偵錯的泥淖。如果產生的程式碼無法正常運作,只需換個方式重新描述您的需求,再請 LLM 產生新的程式碼即可。

依賴 LLM 與代理工作流程,自動產生並驗證整個應用程式。(初學者通常可以在 Stack Overflow 之類的熱門論壇上找到程式設計相關問題的解答。)一旦您製作出能運作的版本,就將該原型分享給有經驗的開發人員,並將他們的回饋整合到正在開發的文件中。

Vibe 編碼的最大缺陷是什麼?以及有哪些可能的解決方案?

由於 AI 存在限制,您應該瞭解這種方法可能帶來的潛在風險。以下是其中幾個最值得注意的危險點:

1. 安全性挑戰

如果由沒有經過訓練的開發人員檢查或測試這些程式碼,透過 Vibe 編碼產生的軟體可能會包含安全性漏洞。將這類程式碼部署到正式環境中,可能會增加網路安全性漏洞的風險,並導致敏感資料的外洩。容器技術是一個潛在的安全性解決方案,因為它能讓使用者在安全的沙盒環境中執行程式碼。

2. 重複出現的錯誤程式碼

如果您不是專業的程式設計師,您可能會在迭代過程中遇到困難,即使您要求 LLM 修正問題,它仍然會提供錯誤的程式碼。如果您沒有儲存任何曾經可以正常運作的程式碼版本,您可能需要程式設計師的協助。雖然這違背了 Vibe 編碼的初衷,但在這種情況下,一點點的技術支援往往能帶來很大的幫助。

3. 「多莉」症候群

在動畫電影《海底總動員》(Finding Nemo) 中,名叫多莉 (Dory) 的魚患有某種類型的健忘症:她很難記住最近發生的事情或對話,經常需要他人重複提供資訊。

同樣地,大型語言模型 (LLM) 的上下文視窗也有限。在幾次使用新提示反覆生成程式碼後,LLM 會忘記練習的目標,並開始偏離,僅僅滿足最新的提示。這會造成一個問題:最終產出的整體程式碼會脫離 Vibe 編碼專案的整體背景與初衷。避免這種情況的一種方法是重申專案目標,或者提醒 LLM 要根據您在整個對話過程中已經提供的內容來繼續開發。

4. 丟失追蹤

您可能會搞不清楚自己做了哪些變更。為了避免這個問題,請學習使用來源版本控制系統。

Vibe 編碼 101:您還需要知道些什麼?

Vibe 編碼讓更多人能參與軟體開發流程,並促進跨團隊之間的協作。因此,它能縮短從設計到開發的流程,並實現更具成本效益的原型開發。

儘管 Vibe 編碼具有潛在的優勢,團隊在採用時仍應保持謹慎,並從小規模開始嘗試。要特別留意安全性挑戰之類的陷阱,並避免將未經測試的程式碼部署到現有且穩定執行的程式碼庫中。

如果您能隨時備妥這些技巧與工具,並以負責任且保持警覺的態度正確使用它們,時刻留意潛在問題,那麼 Vibe 編碼就能讓軟體開發變得更民主、更具協作性,也更加高效。這樣一來,您就能更快地將新構想付諸實現,從而超越競爭對手,推動業務成長。

Cloudflare 如何提供協助?

如果您想學習如何進行 Vibe 編碼,Cloudflare 提供的解決方案可以幫助您快速入門。舉例來說,您可以在 Workers AI 上載入 Meta 的 Llama LLM,以此作為學習與嘗試 Vibe 編碼的方式之一。

Cloudflare 也透過容器來解決安全性挑戰。如果您打算使用來自 Vibe 編碼的 AI 產生程式碼(本質上不可信任),那麼在 Cloudflare 提供的基於容器的安全環境中執行它會是一個明智的選擇。

Cloudflare 的開放原始碼 VibeSDK 幫您一鍵設定好所有需要的環境,讓您能夠執行屬於自己的 AI 驅動開發平台:

  • 與 LLM 模型整合,以即時產生程式碼、建立應用程式、偵錯,並即時反覆運算
  • 隔離的開發環境,讓使用者能夠在安全的沙箱中安全地建立和預覽其應用程式
  • 無限擴展能力,讓您可以部署數千甚至數百萬個應用程式,所有應用程式都透過 Cloudflare 的全球網路提供
  • 可觀測性與快取功能,支援多個 AI 提供者,讓您能掌握成本與效能狀況,並針對常用回應提供內建快取功能
  • LLM 可以使用專案範本作為建立常見應用程式的起點並加速開發
  • 一鍵匯出專案,可將專案匯出至使用者的 Cloudflare 帳戶或 GitHub 儲存庫,讓使用者能夠取得程式碼並繼續在自己的環境中開發

若想深入瞭解如何透過 Vibe 編碼建立可部署的應用程式,請閱讀 Cloudflare 發佈的《建置 AI 主體指南》,其中包含可幫助您開始使用 Vibe 編碼的 LLM 資源。並探索可用於建立和部署應用程式的 Cloudflare 示範平台

 

常見問題集

什麼是 Vibe 編碼?

Vibe 編碼是一種程式設計人員和非程式設計人員皆可使用的方法,他們使用大型語言模型 (LLM) 來快速生成功能原型。

Vibe 編碼的主要優點有哪些?

Vibe 編碼可以實現軟體建立大眾化,並加速創新週期,這樣即使不是程式設計師,也能夠快速生成原型。這對於領導技術專案的管理人員來說也特別有用。

開始 Vibe 編碼的第一步是什麼?

首先,確定一個合適的專案,將業務需求轉換為 LLM 的具體提示,然後快速反覆運算產生的程式碼。

Vibe 編碼有哪些潛在的缺陷?

潛在的問題包括安全性漏洞、LLM 重複錯誤程式碼、LLM 失去背景資訊,以及失去對程式碼變更的追蹤。

Cloudflare 如何協助 Vibe 編碼過程?

Cloudflare 提供 Workers AI 來執行 LLM,並提供安全的容器化環境來執行 AI 產生的不可信程式碼。Cloudflare 的開放原始碼 VibeSDK 編碼平台也提供程式碼產生、偵錯、隔離環境和可擴展性等工具。

使用者可以如何降低與 Vibe 編碼相關的風險?

為了處理潛在風險,應使用容器來加強安全性,並在需要時尋求程式設計師的協助,向 LLM 重申專案目標,同時利用來源版本控制系統。