Lovable 的親和力讓它更像是 使用者工作流程的自然延伸，相較於大多數無代碼或低代碼平台。
在這篇 Lovable AI 評測 中，我會帶你完整走過我的實際體驗：從註冊、構建及自訂應用，到測試它如何處理錯誤。最後，你就能知道 Lovable 是否值得成為你工具集中的一員。
什麼是 Lovable.dev？
不像需要學習程式碼或使用笨重的拖放編輯器，你只要用簡單英語描述你想要的功能。例如，「建立一個帶有用戶登入和支付功能的儀表板」，這個 AI 應用建構器就會為你生成一個可運作的應用。
讓 Lovable 與其他許多「無代碼」工具不同的，是它實際生成真正可編輯的程式碼。這表示開發者可以將專案匯出到 GitHub、進行擴充，或與像 Stripe 的支付服務及 Supabase 的資料庫服務整合。
Lovable.ai 適合誰？
Lovable AI 應用建構器針對想快速將構想轉化為可運作應用的各種族群打造。
最適合：
- 非技術使用者：幫助你在不聘請開發者的情況下建立應用程式。
- 新創創辦人和小型團隊：輕鬆建立並測試最低可行性產品 (MVP)，不浪費時間在樣板程式碼上。
- 設計師和產品經理：將線框或設計稿轉換成可運作的應用，讓你跳過與工程師冗長的溝通，瞬間看到設計成果。
- 資深開發者：自動化設定工作，如驗證、資料庫和 CRUD，讓你能專注於自訂功能和商業邏輯，同時保有對程式碼庫的完全控制。
Lovable AI 優缺點
- 簡單的註冊和引導流程
- 使用 React 和 Tailwind 生成真實程式碼
- 支援 TypeScript 以符合現代開發
- 原生整合 Supabase 後端
- 內建 Stripe 支付整合
- 免費方案的程式碼編輯器僅可讀取
- 未升級前錯誤解決能力有限
- 對矛盾指示不會提出異議
- 執行時錯誤可能阻礙進度
Lovable 主要功能
- 使用 AI 生成全端應用
- 真正可編輯的 React 和 TypeScript 程式碼
- 使用 Tailwind CSS 進行樣式和佈局
- 整合 Supabase 資料庫和驗證
- 整合 Stripe 支付與計費
- 與 GitHub 同步版本控制
- 可進行細部 UI 調整的視覺化編輯器
- 基於提示的設計和功能編輯
- 付費方案支援自訂網域
- 社群專案可供 Remix 與預覽
- Figma 匯入設計轉程式碼
- 基於點數的任務使用系統
我與 Lovable AI 的親身體驗：逐步指南
我想親自檢驗註冊流程有多順暢（或笨拙）、第一次登入時的儀表板外觀，以及在開始構建任何東西之前的直覺體驗。
真實體驗勝過行銷宣稱，接下來我將帶你一一了解 我的操作過程和最突出的發現。
開始使用與註冊
我從 Lovable.dev 首頁 開始，它使用從藍色漸變到粉紅和橙色的溫暖漸層背景。
註冊畫面分為左右兩部分：右側保留了熟悉的漸層和一個帶有提示 「請 Lovable 為你的 SaaS 新創構建應用」 的趣味輸入框，左側則專注於帳號建立。
我可以選擇使用 Google、GitHub，或以電子郵件註冊。我選擇了電子郵件。輸入郵件地址並設定密碼後，我同意條款並點擊 建立帳號。
Lovable 沒有立刻讓我登入，而是提示我驗證電子郵件。我切到郵件分頁，立刻找到驗證郵件並點擊連結。系統快速顯示「電子郵件已驗證」 的提示，並引導我進入簡短的引導流程。
在這裡，我輸入了姓名，選擇了 深色模式，並回答了幾個快速問題：
- 我會如何使用 Lovable（我選了 個人專案），
- 如何描述自己（我選了 開發者），以及
- 我在打造什麼（我選了 網站 / 登陸頁面）。
最後一步詢問是否要邀請團隊成員，但因為我是單獨測試，就點了 完成。
第一次進入儀表板時，我注意到設計感清爽，與首頁風格一致。頂部的大輸入框提示我 「請 Lovable 為我的…建立登陸頁面」，下方則是各式社群專案，從儀表板到 SaaS 範本，我都能預覽或 Remix。
整個介面彷彿同時兼具工作室與展示廳的感覺，各種靈感就在眼前。
在 Lovable.dev 上構建我的第一個應用
註冊完成後，我想看看在 Lovable 上實際構建應用到底有多簡單、直觀又順暢。
在主要的 Lovable 儀表板上，第一眼就看到中央的大輸入欄，裡面有佔位提示 「請 Lovable 為我的…建立登陸頁面」。這顯然是一切的起點。
你可以輸入一個簡單的想法，但我決定給出一個詳細提示，描述應用的用途、使用者角色、引導流程、儀表板關鍵指標、客戶及專案管理、時間追蹤、發票預覽 PDF、Stripe 支付，以及客戶門戶。
我甚至加入了 設計需求，例如專業的藍色主色調、卡片式佈局、易讀字體，以及細緻動畫。最後，我明確說明我希望使用 Supabase 驅動的後端功能，包含驗證、多租戶、檔案儲存和事務性電子郵件。
完成詳細提示後，我在點擊提交前暫停，仔細查看 Lovable 提供的額外選項。在輸入欄下方，有一些有趣的按鈕。
- + 附加: 允許你上傳圖片作為 AI 的參考。如果你已有設計樣圖或線框，這功能格外實用。
- 從 Figma 匯入選項: 這功能讓你不必從頭開始，而是直接將專業設計檔匯入 Lovable。
- 公開切換: 控制可見度。若設為 公開，你的專案將向 Lovable 社群所有人開放檢視和 Remix，就像開發者在 GitHub 上協作一樣。
- 專案區域 (Pro): 這表示此應用僅對你在 Lovable 的專案區域成員可見。
- 個人/商業: 保持專案私密，除非你明確分享。
直到檢查完所有這些選項後，我才提交第一個大型提示，看看 Lovable 會構建出什麼。
提交提示後，介面轉為構建環境。左側開啟了聊天面板，顯示我的請求和 Lovable 回應，右側畫布則顯示帶有愛心圖示的載入畫面。
同時，還有各種選項，如 「選擇要修改的特定元素」、「上傳圖片作參考」，以及 「準備好時部署」。大多數選項為灰階不可用，但有一個是可點擊的：連接 Supabase 作為後端。
Lovable 的第一個回應令我印象深刻。它將我的提示拆分為明確的章節，並引用了知名 SaaS 工具如 FreshBooks 和 Harvest，列出了第一版預計功能：專業登陸頁面、多租戶儀表板、客戶與專案管理、時間追蹤、發票生成及支付整合。
它還立刻標示出一項重要需求；要啟用這些後端功能，我必須將專案連接到 Supabase。這並非被忽略或草率帶過；Lovable 事先告訴我必要條件，並直接連結到整合文件。
在介面的右上角有一個 綠色 連接 Supabase 按鈕。點擊後彈出一個說明視窗，解釋 Supabase 是什麼、為何需要它，以及連接後可實現哪些功能：用戶驗證、資料庫管理、儲存和支付。
我依指示操作，連接了我的 Supabase 組織，並看到整合成功的確認訊息。從那刻起，Lovable 即確認連接，並開始在後端支援下構建應用。
Lovable AI 隨即在後台生成程式碼。我看到像 「正在讀取 src/pages/Index.tsx」 和 「已編輯 src/components/LandingPage.tsx」 之類的日誌訊息，確認它正在操作真實的專案結構，而非拼湊範本。
當第一次構建完成後，我在右側面板預覽了結果。應用被命名為 InvoicePro，看起來像是一個精緻的 SaaS 登陸頁面。
它包含一個帶導航連結（功能、定價、聯絡）的頁首，還有 登入 和 開始免費試用 按鈕，以及一個主視覺區塊，標題醒目地寫著「透過專業發票更快速收款」，並附有文字說明自由工作者如何追蹤時間、管理客戶並在線上收款。
往下捲動可看到功能區塊，包含六張設計整潔的卡片，分別是時間追蹤、客戶管理、發票、支付、報表，以及客戶門戶。
定價區塊則分為三種方案：入門（每月 $9）、專業（每月 $29，標示「最受歡迎」），以及 企業（每月 $79），各自附有功能列表和呼叫操作按鈕。
底部則有醒目的呼叫操作區，再次點出 開始免費試用 按鈕。頁尾包含常見連結，如 功能、定價、整合、部落格、隱私政策 和 服務條款。
Lovable 不僅提供炫目的前端，也給了我底層程式碼。切換到 程式碼 檢視，我看到一個結構化的 React + TypeScript 專案，使用 Tailwind CSS、Vite 及現代化工具。
檔案樹包含 components、hooks、pages 資料夾，以及像 tailwind.config.ts 和 vite.config.ts 的設定檔。
- LandingPage.tsx 檔案包含了主視覺、功能與定價區塊的程式碼，並使用資料陣列定義預覽中所見的卡片與方案。
- index.css 顯示了 Tailwind 匯入和自訂的明/暗模式變數。
- App.tsx 處理路由和提供者 (providers)，而
- package.json 列出了 React、shadcn components 和 Tailwind 等依賴。
所有檔案都有條理且易於閱讀，這意味著我（或其他開發者）可以接手並擴充此程式碼，而不必從頭開始。
值得一提的是：程式碼編輯器本身標示為 唯讀。若要在 Lovable 介面內直接編輯檔案，你需要升級到付費方案。就我的用途而言，雖然仍可瀏覽整個結構並驗證程式碼品質，但在瀏覽器中動手編輯需要付費才能解鎖。
不到十分鐘，Lovable.dev 就將詳細提示轉化為一個精緻的 SaaS 風格登陸頁，並附上真實可編輯的程式碼。設計符合我的指示，工作流程直覺，且我能隨時查看幕後運作。最重要的是，它沒有忽視後端設定。
錯誤處理與編輯彈性
對於最初的登陸頁印象深刻後，我想進一步測試 Lovable，看看它對複雜後端功能、邏輯衝突和意外錯誤的處理能力。
這是真正的檢驗：該平台是否只擅長生成漂亮的前端，還是能夠應對應用開發中更混亂的現實。
本質上，這是一個自相矛盾的要求。一方面，我要求明確的使用者角色邊界；另一方面，我卻又要所有人繞過這些邊界。理想情況下，智慧型建構工具應該將此視為衝突並請我進行澄清。
Lovable 沒有這麼做。
它反而立刻接受需求，並概述了需要生成的後端部分：驗證、角色與權限資料表、會話管理，以及受保護的 API 端點。
它甚至重申之前使用 Supabase 進行驗證和資料政策的需求，提醒我如果尚未連接就必須連接。由於我已連接 Supabase，我便指示 Lovable 繼續。接著，它開始構建基於角色的存取系統，建立驗證上下文、引導流程、受保護路由和遷移檔案，並安裝了 Supabase 用戶端函式庫。
但當它嘗試執行應用時，出了狀況。預覽視窗變成空白，螢幕右下角出現錯誤橫幅。日誌明確指出：「未捕捉錯誤：缺少 Supabase 環境變數」，出現在 supabase.ts 檔案中。
本質上，Lovable 生成的程式碼需要我尚未提供的設定金鑰。
點擊 「顯示日誌」 後，我看到了完整的追蹤記錄，確認若缺少變數，應用就無法渲染。預覽依然是一片白屏，與錯誤日誌中所述的 「空白畫面」 相符。
為了解決問題，Lovable 提供了兩個選項：關閉 或 嘗試修正。
我當然點了 嘗試修正。Lovable 立即分析問題，指出應用缺少必要的 Supabase 環境變數，並生成了相應的修正程式。
聊天面板逐步說明了修正內容，預覽也順利重新載入，未再閃退。
這次測試更具啟發性的是 Lovable 對我的矛盾指示的處理方式。它並未拒絕或請我澄清，而是嘗試將兩者結合。
它創建了三個角色（擁有者、成員、客戶）並賦予不同權限，卻同時新增 「所有用戶均可編輯發票和專案」 的設定，且擁有者保有額外管理權限。實際上，這在真實應用中會導致邏輯漏洞——等同於取消了我所要求的基於角色的存取控制。
對評測者或開發者而言，這既令人印象深刻（因為它仍能構建），又令人擔憂（因為在生產環境可能造成安全或邏輯問題）。
- 錯誤檢測能力強：Lovable 能迅速標示缺少的 Supabase 變數，指出確切的檔案與行數，並解釋出錯原因。清晰的日誌與上下文讓你不必猜測問題所在。
- 具彈性卻不善於處理矛盾：當我提出衝突的角色指令時，它只是將兩者合併而非請我澄清。這種彈性雖然有用，但開發者需留意邏輯衝突。
自訂設計和佈局
那如果你想更改應用中的某些元素，或調整設計讓它更符合自己的品牌風格呢？
在 Lovable 中，自訂設計圍繞三種主要方式：自然語言提示、視覺化編輯器，以及直接程式碼層級控制。
這些方法合而為一，涵蓋從大範圍設計調整到像素級細節優化。
使用 AI 提示進行大範圍設計變更
這是最容易上手的方法，也可以說是 Lovable 最鼓勵使用的方式。你不必調整各項設定，只要用簡單英語描述你的設計構想，讓 AI 幫你實作。
例如，你可以這麼問：
- 「將主題切換為深色模式，風格現代且帶未來感。」
- 「採用新野獸派 (Neo-brutalist) 美學，使用大膽且高對比色彩。」
- 「將主色改為深紫色，次色為橙色，並為所有標題使用 Assistant 字體。」
Lovable.dev 還允許透過 提示做小幅 UI 微調，例如圓角按鈕、添加陰影，或讓主視覺區更具動態感。
你甚至可以附上截圖或手繪草圖作為視覺指引，或從 Figma 匯入，將專業設計直接轉為可運行程式碼。
使用視覺化編輯器進行細部調整
並非所有想要做的修改都值得撰寫新提示。有時你只需微調按鈕、替換顏色，或調整區塊內邊距。這時 Lovable 的視覺化編輯器 就派上用場。
該編輯器的操作方式類似設計工具，例如 Figma。你可以切換到 編輯模式，將滑鼠移到頁面中的任何元素上，直接點擊選擇。
一旦選取後，你可以在不接觸程式碼的情況下微調屬性。例如，你可以：
- 更改 文字內容 — 更新標題、重寫按鈕標籤或調整表單提示文字。
- 修改 樣式 — 置換顏色、調整字體大小、圓角按鈕或添加陰影。
- 調整 佈局 — 改變外距、內距、對齊方式或元素間距。
此方式能節省時間與點數。你不必在文字裡描述小改動，只需即時調整視覺效果。當你對大部分輸出滿意，但想微調細節以符合品牌風格時，這非常理想。
實際使用中，該編輯器彌合了 AI 自動生成與人工設計控制之間的差距。AI 能快速產出應用的主要部分，然後你再透過視覺化介面進行修飾與完善。
與 GitHub 整合以全面自訂程式碼
對進階使用者，Lovable 提供 GitHub 整合。一旦連接，你可以同步專案、在本機複製，於你慣用的 IDE 中進行修改，並將更新推送回 GitHub，而 Lovable 會將這些更動同步至專案中。
這讓你可以完全自由地新增複雜功能、整合第三方函式庫，或自訂提示與視覺編輯器無法涵蓋的動畫效果。
當我切換到 程式碼 檢視 時，就能清楚看到 Lovable 如何結構化生成的專案。它產出了一個現代化的 React + TypeScript + Tailwind 設定，並提供一個包含元件、頁面和設定檔的有條理檔案結構。
這是真實的程式碼，而非僅僅無代碼的抽象。
發布應用與新增整合
在自訂完應用後，我想了解 Lovable 如何處理發布和整合。
這意味著我要測試連接後端服務、發布專案到網路，以及管理主機或自訂網域的難易度。
Lovable 原生的 Supabase 整合是其後端核心。 Supabase 提供 PostgreSQL 資料庫、驗證、檔案儲存和無伺服器函式。連接後，Lovable 能自動建立資料庫結構，設定組織與使用者資料表，並產生驗證流程，如電子郵件/密碼登入和 Google OAuth。
在我的測試中，Lovable 堅持在進行多租戶和基於角色的存取控制等功能之前，必須連接 Supabase。將我的專案區域與 Supabase 組織連結後，AI 立即開始編輯遷移檔、驗證上下文和工具程式。
Stripe 也有原生支援。Lovable 安全地儲存 API 金鑰，並能生成後端函式來處理訂閱、一鍵結帳和計費事件。
例如，你可以提示 「使用 Stripe 建立三個訂閱方案」 或 「為數位課程新增一次性結帳 $29」，它會架設支付流程，同時將用戶訂閱資料同步回 Supabase。
除了官方合作夥伴，Lovable 還支援使用 Supabase 邊緣函式 自訂 API 連接。只需描述你想使用的 API，AI 即撰寫無伺服器函式、安全管理金鑰並為你部署。如此一來，你就能將應用擴充到超越內建選項的層面。
說到發布，操作被設計得簡單到只需點擊一個按鈕。發布專案後，平台會立即將其部署到即時子網域 (例如 yourproject.lovable.app)。
之後的任何編輯都能再點擊一次重新發布，讓分享原型變得快速無阻。
更棒的是，Lovable 還內建 版本控制。這意味著你可以回滾到較早的版本、追蹤變更歷程，並避免在嘗試新功能時丟失進度的風險。
對於生產環境應用，Lovable 支援自訂網域，並透過其主機合作夥伴自動處理 DNS 和 SSL 證書。你可以 連接既有網域，甚至直接從 Lovable 介面購買新網域。
偏好更多控制的開發者，也可以將專案同步到 GitHub，再透過 Vercel 或 Netlify 等外部主機進行部署。在此架構中，Lovable 中的變更將提交至倉庫並自動重新部署。
整體印象：Lovable 在表面上讓發布和整合變得清新簡單。Supabase 與 Stripe 緊密整合，一鍵部署如同承諾一般有效，且可用的驗證整合生態系廣泛。生成的架構讓人感覺已可投入生產，而不僅僅是原型。
Lovable 定價與方案
Lovable 的方案以 點數 作為 AI 建構器的使用憑證。你執行的每個動作（從構建登陸頁到新增驗證）都會根據複雜度消耗點數。
免費方案旨在讓你無風險地探索 Lovable。你將獲得：
- 每日少量點數池，並有每月上限
- 僅能建立 公開專案
- 這些專案可邀請無限協作者
這是測試並了解平台運作方式的好方法。然而，一旦達到每月上限，就必須等點數重置才能繼續構建。免費用戶也無法使用私密專案、自訂網域或進階團隊功能。
Lovable Website Builder 方案
付費方案擴充你的使用限制並解鎖真實專案所需的關鍵功能。除了免費方案，你還能獲得：
- 每月更多點數（並提供每日刷新）
- 私密專案，不對社群開放
- 使用者角色和權限管理團隊
- 自訂網域以品牌化你的應用
- 移除 Lovable 徽章，展現更乾淨專業的外觀
- 點數累積，未用完的點數不會浪費
- 進階控制（高階方案）如 SSO、個人專案空間、設計範本，以及選擇不將資料用於訓練的能力
- 企業方案，提供自訂整合、基於群組的存取控制和專屬支援
點數消耗會隨複雜度而定。一次小幅 UI 微調可能只需不到 1 點，而生成一個多區塊的完整登陸頁可能需數點。如此一來，用量相對可預測。簡單改動輕量，功能需求越大消耗越多。
至於退款政策，Lovable 並未宣稱傳統的退款保證。但你可隨時 取消或降級，未來的帳單將隨之調整。這意味著嘗試付費方案風險很低，如果不合適也不會被綁住。
Lovable 接受一般信用卡付款 （Visa、Mastercard 及其他主要品牌）。若使用有效的學術電子郵件註冊，還可享 學生折扣，讓學習者和早期構建者更易負擔。
Lovable.dev 的替代方案
雖然 Lovable 以其對話式、提示驅動的應用構建方式脫穎而出，但在此領域並非唯一選擇。
一個值得關注的替代方案是 Bolt.new。Bolt.new 將 AI 與瀏覽器內 IDE 結合，讓使用者在獲得 AI 生成功能的同時，能實時控制程式碼。
Lovable.dev vs Bolt.new 總覽
| 功能 | Lovable | Bolt.new |
|---|---|---|
| AI 重點 | 以聊天為基礎的全端生成 | 在瀏覽器 IDE 內從提示到程式碼 |
| 使用者定位 | 以快速原型為重點的非技術使用者、新創創辦人、設計師及開發者 | 想獲得完全控制的開發者和技術使用者 |
| 程式碼存取 | 僅支援匯出至 GitHub，無內建編輯器 | 完整的瀏覽器內 IDE，具備直接編輯 |
| 後端 | Supabase 驗證與資料庫整合 | Node.js 執行環境，整合 Supabase 與 Prisma |
| 前端 | React + Tailwind CSS | Next.js、Vue、Svelte、Astro、Expo 等 |
| 部署 | 一鍵部署到 lovable.app 子網域；GitHub 同步可自訂主機 | 即時預覽與一鍵 Netlify 部署 |
| 定價 | 訊息型點數系統 | 以代幣為基礎，視使用量變動 |
| 協作 | 無限協作者；實時協作測試版 | 可分享連結及 GitHub 工作流程，無實時協作 |
Lovable.dev vs Bolt.new：你會選哪個？
Lovable AI 若你是重視簡單與速度的 非技術創辦人、設計師或團隊，則更適合你。其對話式介面讓你輕鬆描述想要的功能，並獲得可運作的 MVP，而不需撰寫程式碼。
另一方面，Bolt.new 則適合想要對程式碼庫具有直接控制的 開發者和技術創辦人。藉由瀏覽器內的 IDE，你可以立即檢視、編輯並擴充 AI 生成的程式碼。它支援廣泛的框架，當專案需要自訂邏輯、特定技術棧或精細控制時表現出色。如果你喜歡 AI 協助卻仍想親自「vibe-code」並微調細節，Bolt.new 是更強大且具彈性的選擇。
對 Lovable.dev 的最終評價
Lovable 非常適合想快速將點子變成可運作原型的非技術創辦人、設計師和小型團隊。對話式介面降低了門檻，且可生成具 Supabase 和 Stripe 等整合的全端程式碼，令人印象深刻。
雖然並不完美——免費方案限制較多，且缺乏進階使用者所需的程式碼直接編輯功能造成了一定門檻——但如果你想在數週內構建，而非數月，Lovable 是個值得一試的工具。
