Vibe Coding 是什麼意思、怎麼入門：零基礎用 Lovable、Bolt 做出第一個網頁應用的流程

本文根據 Cursor 官方幫助中心《What is vibe coding?》以及 Lovable、Bolt 的官方快速上手文檔整理，資料核對於 2026-10-11。文中提到的免費額度是官方頁面當天的數字。

適用於誰

• 不會寫代碼，但想把一個點子做成能打開的網頁或小工具的人；
• 搜「vibe coding 是什麼」「vibe coding 是什麼意思」「ai 做網站」的人；
• 產品、設計、運營，想自己做原型或內部小工具的人。

結論先說

1. Vibe coding（常譯「氛圍編程」）是 Andrej Karpathy 在 2025 年初提出的說法：用大白話描述你要什麼，讓 AI 智能體寫代碼，跑起來看效果，再憑感覺繼續調整。
2. 它最適合原型、實驗和內部小工具——求快、出錯代價低。
3. 它不等於可以直接上生產。Cursor 官方原話的意思是：不建議把你不理解的軟件發佈到生產環境；別人要依賴的代碼仍然需要審查、測試和工程判斷。
4. 零基礎入門選瀏覽器裏的生成工具（Lovable、Bolt、v0），不用裝環境；想長期維護、要更多控制，再過渡到 Cursor 這類編輯器或 Claude Code、Codex。
5. 一條貫穿始終的方法：第一版盡量簡單，之後一次只改一處，每改一次看一眼預覽。

該用哪類工具

三款瀏覽器工具的介紹見本站 AI 應用目錄裏的 Lovable、Bolt.new、v0 條目。下面的流程以前兩者的官方快速上手為藍本，換成別的工具步驟也大同小異。

八步流程

第一步：註冊並了解額度

• Lovable：可用電郵、Google、GitHub 或 Apple 註冊。官方快速上手頁寫明構建消耗 build credits，免費檔每天 5 個、每月最多 30 個。
• Bolt：需要 Chrome 或 Chromium 內核的瀏覽器；註冊不需要信用卡。官方寫明免費帳號每月 100 萬 token、每天上限 30 萬，並提醒照着它的入門示例做一遍就會用掉接近 30 萬。

額度有限，所以每一條提示詞都值得寫清楚。

第二步：寫第一條提示詞

把「做什麼、有哪些部分、給誰看」寫出來，並且明確說第一版不要什麼。Lovable 官方示例的最後一句是「先不要登入和數據庫」，並解釋：第一版沒有登入和數據庫，出錯的地方就少，之後一條提示詞就能加上。

text
做一個社區咖啡館的網站。包含：帶標題和照片的首屏；一個可以按類別
（咖啡、早餐、午餐、甜點）篩選的選單；營業時間；地址和「怎麼找到我們」的說明。
使用逼真的示例數據。暫時不要登入和數據庫。

Lovable 官方說明提示詞可以用任何語言寫，中文沒問題。也可以從官方模板開始，在別人的成品上改。

第三步：等它生成，看預覽

第一版通常要幾分鐘。帶登入、收藏這類需要數據庫的功能會更慢——Bolt 官方解釋是因為要搭建數據庫。生成後介面一般是左邊對話、右邊實時預覽。在預覽裏把每個地方都點一遍。

第四步：一次只改一處

Lovable 官方的原則：每次只要求一個改動，改完看預覽。

text
在選單和營業時間之間加一個「今日特價」區塊，展示兩款菜品，各帶一句介紹和價格。

風格不對也可以直接用大白話說，官方認可這樣的提示詞：

text
讓整個網站看起來更溫暖一些，不要那麼商務。

小的視覺修改，「指」比「說」好用：Lovable 的預覽工具欄、Bolt 的可視化編輯、Cursor 的 Design Mode 都能直接點選頁面元素再提要求；改一句文字可以直接在頁面上改。

第五步：盯住消耗

Bolt 官方建議一開始就打開「在對話中顯示 token 用量」（Settings → General → Display token usage in chat），這樣能看到每條提示詞花了多少。應用越大越複雜，每次修改消耗越多——這也是「一次只改一處、說清楚改哪裏」的另一個理由。

第六步：測試

Lovable 官方的發佈前檢查：

• 每個按鈕和連結都點一遍；
• 把交互部分全走一遍（比如每個篩選類別）；
• 切到手機視圖——大多數人會在手機上打開你的連結。

發現問題時，說清「哪裏、現在怎樣、應該怎樣」：

text
在選單裏點「甜點」篩選後沒有顯示任何菜品，應該顯示甜點類的菜品。

第七步：改壞了就回退

Lovable 官方說明每次修改都會儲存為一個可恢復的版本；Bolt 有備份、恢復和版本歷史。發現越改越亂時，回到上一個好的版本重新來，比一輪輪追着修更省事——這和 Cursor、Devin Desktop 官方對 Plan 模式給的建議是同一個道理。

第八步：發佈

Lovable 點右上角 Publish，會得到一個 lovable.app 的網址，官方說明所有檔位都免費提供。發佈之前，先看完下一節。

上線前必須做的安全檢查

用對話做出來的應用同樣會被真實的人訪問、被真實地攻擊。Lovable 官方的安全最佳實踐裏，有幾條對新手尤其重要：

1. 密鑰不要放在前端代碼裏。瀏覽器裏運行的代碼任何人都能看到。正確做法是讓平台把密鑰安全地存起來，只在伺服器端代碼裏讀取，並且不要出現在返回內容和日誌裏。
2. 不要靠前端校驗來保證安全。始終把來自用戶的輸入當作不可信的，在伺服器端校驗格式和業務規則後再處理或儲存。
3. 數據庫要有訪問規則。用了數據庫和登入，就要確認每張表設定了行級安全（RLS），用戶只能讀寫自己的數據。發佈前逐表檢查一遍。
4. 用平台自帶的安全掃描。Lovable 和 Bolt 都有項目安全檢查功能，發佈前跑一次，把提示的問題讓 AI 修掉再複查。

可以直接這樣要求：

text
檢查這個項目：有沒有把密鑰寫在前端代碼裏？每張數據庫表是否都限制了
只有本人能讀寫自己的數據？列出發現的問題，並逐個修復。

涉及收款、用戶私隱、公司內部數據的應用，不要只靠自己「看起來能用」就上線，請懂技術的人審一遍。

什麼時候該從 vibe coding 往前走一步

出現下面的信號，說明項目已經超出「憑感覺」能管的範圍：

• 同一個 bug 改了三四輪還在；
• 一處改動總是帶壞另一處；
• 有別人開始依賴它，出錯有了代價。

這時可以把代碼導出或同步到 GitHub（各平台的做法以其文檔為準），用 Cursor 這類編輯器接手：先讓 AI 講清項目結構，再補測試，之後的修改走「先計劃、再實現、看 diff」的流程。相關教學：《Cursor 安裝教學》、《Cursor Agent 模式怎麼用》、《用 AI 寫單元測試》。

常見問題

Q：完全不懂代碼能做出來嗎？

做原型和簡單工具可以，官方的入門示例都是面向零基礎的。但 Cursor 官方的提醒值得記住：不理解的軟件不要直接放到生產環境。

Q：生成的代碼歸誰？

Lovable 官方快速上手頁的說法是「背後的代碼是你的」。具體的使用條款、導出方式以各平台條款為準。

Q：為什麼第一版要強調「不要登入和數據庫」？

因為它們是最容易出錯、也最容易出安全問題的部分。先把介面和核心交互跑通，再一步一步加。

Q：提示詞怎麼寫得更準？

寫清對象、內容、限制，一次一件事。通用寫法見本站《提示詞怎麼寫》，也可以到提示詞庫裏找編程類的模板。

參考資料

• What is vibe coding?（Cursor 官方幫助中心）：https://cursor.com/help/ai-features/vibe-coding
• Quick start（Lovable 官方）：https://docs.lovable.dev/introduction/getting-started
• Security best practices for Lovable apps（Lovable 官方）：https://docs.lovable.dev/tips-tricks/security-best-practices
• Bolt QuickStart guide（Bolt 官方）：https://support.bolt.new/get-started/quickstart