2026 年 Lovable 與 Claude Code 比較：第一個專案該選哪一個？

如需了解如何使用 Ailoot，請參閱文件。

Lovable 和 Claude Code 是什麼？#

Lovable 是一款瀏覽器建置工具。從技術上來說，Lovable 是建構在 Anthropic Claude Opus 之上的一層：公司公開表示，評估商用與開源模型後，選擇 Claude 作為主要模型（Anthropic 客戶案例：Lovable）。因此，把問題說成「Lovable 還是 Claude」過度簡化了全貌。實際上，它們是不同層次：Lovable 是 Claude 的便利介面，而你也能透過 Claude Code 直接使用同一個 Claude。

前往 lovable.dev 後，流程如下：

1. 透過 Google 或 GitHub 註冊。
2. 撰寫提示：「幫我為房地產仲介公司建立一套 CRM，具備驗證功能和客戶資料庫。」
3. 30–60 秒內，你就能看到架設在免費 *.lovable.app 網域上的上線網站，包含資料庫、登入表單和可運作的頁面。
4. 接著用提示繼續修改：「新增交易狀態篩選器」、「新增深色主題」、「新增 Stripe 訂閱付款功能」。

在幕後，Lovable 會建置 React 應用程式，使用 Vite、Tailwind CSS 樣式，以及 shadcn/ui 元件。後端採用 Supabase：以 PostgreSQL 儲存資料、以 Supabase Auth 處理登入，並以 Edge Functions 執行伺服器端邏輯。自 2026 年 5 月 13 日起，新專案使用具備伺服器端渲染功能的 TanStack Start。

Claude Code 是 Anthropic 推出的程式，可安裝在 Mac、Windows 或 Linux 電腦上。在專案資料夾內的終端機執行 claude 指令，就能以文字與它互動；它會讀取檔案、撰寫程式碼、執行指令並修正錯誤。自 2026 年 4 月 16 日起，主要模型為 Opus 4.7；自 2026 年 5 月 28 日起，也提供 Opus 4.8，並附有 Dynamic Workflows 功能，最多可使用 1,000 個平行子代理（Anthropic - Claude Opus 4.7）。

用一句話概括主要差異：Lovable 是替你建置網站的網站；Claude Code 則是坐在你終端機裡、依照指示工作的開發同事。

這兩種觀點其實描述了同一條道路上的兩個階段。Lovable 是讓你在尚未學會這門技藝時「從零到一」的工具。Claude Code 則適合成長階段：你已了解應用程式如何建置，並希望掌握控制權。

誰適合使用 Lovable，誰適合使用 Claude Code？#

我認為這就像在餐廳用餐和在家下廚之間做選擇。Lovable 就像餐廳：你坐下來點餐，20 分鐘後菜就送到面前。Claude Code 則像廚房：有一套工具和食材，還有一位熟知各種食譜的助理，但由你親自下廚，決定要做什麼、怎麼做。

適合使用 Lovable 的情況：

• 你從沒開過終端機，也不想開始使用。
• 你需要在一個晚上完成想法的原型，展示給合作夥伴或客戶。
• 你要打造標準產品，例如登陸頁面、CRM、市集、儀表板或詢問表單——這些都是 Lovable 已建置過數百次的類型。
• 你願意使用 React + Supabase 技術堆疊，而且不需要 Python、Go 或行動應用程式。
• 每月 $25–100 的付費方案不會讓你困擾，也不介意程式碼放在供應商的平台上。

適合使用 Claude Code 的情況：

• 你已使用過專案資料夾，也知道 git 和 .env 是什麼。
• 你需要掌控每個檔案，並希望自行選擇技術堆疊。
• 你的專案比一般專案複雜，例如 Telegram 機器人、資料處理指令碼、行動應用程式，或串接非標準 API。
• 你希望程式碼放在自己的儲存庫，而不是供應商的平台上。
• 你願意學習 CLAUDE.md 和上下文工程，以取得穩定一致的成果。

想不靠猜測，為你的任務選出正確組合嗎？有效的組合包含三個要素：AI 分身 + 第二大腦 + 上下文工程。這套組合能讓任何工具——Lovable、Claude Code，或兩者並用——成為可靠的工作流程。

使用各種工具完成第一個專案要花多少錢？#

Lovable：方案與點數

截至 2026 年 5 月的Lovable 官方定價：

1 個點數約等於 1 次提示。輕微調整樣式需要 0.5 個點數；新增含驗證功能的功能需要 1.5+ 個點數。主要陷阱在於，修正錯誤的循環（AI 修好一處又弄壞另一處）可能在初始建置之外，再額外耗掉 60–150 個點數。這是根據 2026 年使用者論壇上的實際抱怨整理而來。Pro 方案加購點數的價格是 50 點 $15。

⚠️ 另一項獨立費用是 Lovable Cloud（平台代管服務）。它不包含在訂閱方案中：每個工作區每月享有 $25 的免費代管額度，以及 $1 的免費 AI 使用額度。超過後按用量付費（資料庫讀寫、邊緣函式、儲存空間）。

Claude Code：方案與 Token

2026 年的Claude 官方定價：

自行建置整合功能的使用者也可以購買 API Token：Opus 4.8 每百萬個輸入 Token 收費 $5，每百萬個輸出 Token 收費 $25。詳情請參閱Claude Code 的 Opus 4.8 指南。

第一個專案與大型專案的實際成本

以常見任務為例：「建置一個包含資料庫、預約表單和管理後台的客戶預約網站。」

Lovable：使用 Pro 方案（$25），建置與調整大約需要 30–40 個點數，可在一個月的訂閱額度內完成。之後，每新增一項產品或進行一次重大改版，就要再付一個月的訂閱費，還可能產生 Lovable Cloud 費用。

Claude Code：使用 Pro 方案（$20），同樣的任務需要 3–4 小時工作時間，以及大約十個 AI 對話時段。每月使用上限足以同時處理 2–3 個這類專案，還能完成日常工作，例如編輯網站文案、小幅修正和自動化指令碼。

長期下來，差距更大。有位開發者在 8 個月內透過 Claude Code 使用了 10 billion 個 Token：若透過 API 使用，費用會超過 $15,000；但使用 Max 方案約花 $800。如果只打造一項產品，完成後就不再修改，Lovable 和 Claude Code 的費用差不多。如果你有 5–10 個專案並持續維護，Claude Code 會便宜 5–6 倍。

你會得到什麼程式碼？了解運作原理#

使用 Lovable 時，「這是用什麼寫的？」這個問題已經有答案。每個應用程式都會使用：

• 前端：React、Vite、Tailwind CSS，以及提供現成元件的 shadcn/ui 函式庫。
• 後端：Supabase——以 PostgreSQL 作為資料庫、Supabase Auth 處理登入、Supabase Storage 儲存檔案，以及在 Deno 上透過 Edge Functions 執行伺服器端邏輯。
• 即時功能：透過 WebSocket 使用 Supabase Realtime，支援聊天與更新。
• 付款：內建 Stripe 整合。
• 主機：免費方案使用 *.lovable.app；付費方案可使用自己的網域。

這是一項優勢：一套經過驗證的技術堆疊，可涵蓋非程式設計者 80% 的任務。同時也是一項限制：如果你的專案是 Telegram 機器人、PDF 文件處理、資料擷取指令碼或行動應用程式，Lovable 就不適用。

使用 Claude Code 時，由你選擇技術堆疊。範例專案曾使用：

• 為創作者平台採用 Next.js + TypeScript + PostgreSQL。
• 為客戶產品的其中一個後端採用 Python + FastAPI。
• 使用 grammY 函式庫的 TypeScript Telegram 機器人。
• Node.js 資料處理指令碼。

同一個 Claude Code 能處理任何資料夾和任何技術堆疊：它會讀取專案內容、了解專案結構，並使用適當的語言。這給你自由，但也代表你必須決定採用哪一套技術堆疊。

產品開始起飛時：持續開發專案#

一開始很少有人會檢視這種情境，但這正是兩種工具之間的決定性差異。

假設你在 Lovable 建了一個任務追蹤器，而且大受歡迎。客戶開始提出要求：「新增與我們 CRM 的整合」、「我們需要特定格式的 Excel 匯出」、「建置行動應用程式。」接下來會怎樣？

• 簡單的變更可以透過提示完成，但會消耗點數。
• 複雜的變更常會碰上架構限制：Lovable 不認識你的 CRM，匯出格式並不標準，而行動應用程式需要不同的技術堆疊。
• Lovable 提供程式碼匯出和編輯器功能，但這就不再是「vibe coding」了，而是一般的軟體開發；你需要了解 React、TypeScript 和 Supabase。

Claude Code 沒有這樣的斷層。要新增 CRM 整合時，Claude Code 會讀取 CRM 文件、撰寫用戶端、測試並提交變更。要做行動應用程式時，開啟新資料夾，交代任務：「使用相同的 API，以 Swift 建置 iOS 應用程式」，就能取得結果。因為你擁有儲存庫，所以不會失去上下文。

這不代表 Lovable 不好——它很擅長解決第一個任務。它是產品的起點，而不是長期存放產品的地方。

Claude Code 和 Lovable 出錯時：哪一個比較容易修正？#

AI 一定會出錯。關鍵在於修正錯誤需要付出多少心力。

Lovable 出現問題時，有 3 種選擇：

1. 繼續輸入提示：「修好這個，按鈕不能用。」通常有效，但有時不會成功。
2. 使用 Lovable 的歷史紀錄還原。還原會一次退回 N 個步驟，無法精確選擇。
3. 切換到 Dev Mode（僅限付費方案），手動編輯程式碼。

Claude Code 出現錯誤時：

1. 查看終端機或瀏覽器中的錯誤，然後告訴 Claude：「這是錯誤訊息，找出原因。」
2. 如果卡住，/rewind 指令可以回到最後一個正常運作的狀態（還原變更指南）。
3. 你可以自行開啟檔案並修正某一行，因為程式碼是你的。

Claude Code 的優勢在於，你能看到改了什麼，以及錯誤發生在哪裡。Lovable 就像「黑箱」：你會得到結果，卻看不到原因。對初學者來說，這讓人放心（「我不用自己研究」）；但當產品比一般登陸頁面複雜時，就會變成問題。

Lovable 勝過 Claude Code 的 4 種情境#

情境 1：具備表單和資料庫的登陸頁面。「我想要一個讓訪客留下電子郵件地址，並能在管理後台查看名單的頁面。」在 Lovable 中，包含設計、網域和 SSL，只需 10 分鐘。在 Claude Code 中，搭建雛形需要 1–2 小時，發布還得再花 1 小時。若是一次性任務，Lovable 勝出，而且差距很大。

情境 2：向投資人或合作夥伴展示的示範原型。你需要在 3 天後的會議中展示產品「將如何運作」。Lovable 能在一個晚上建出視覺效果吸引人、可實際操作的原型。你可以展示並說：「這裡會放這段邏輯，那裡會放另一段邏輯。」合作夥伴點擊按鈕就能看到真實的操作畫面，而不只是 PowerPoint。

情境 3：以熟悉範本為基礎的標準產品。例如仲介公司的簡易 CRM、具有驗證功能的客戶入口網站，或有圖表的儀表板。Lovable 已建置過數百個這類應用程式，模型早已熟悉常見模式，因此第一次就做出可運作成果的機率更高。

情境 4：安裝流程成為障礙時。如果有人真的從沒開過終端機，也不想研究 Node.js、git 和 VS Code，Lovable 能提供 Claude Code 無法帶來的成果。有可運作的原型，總比從未開始的專案好。

Claude Code 勝過 Lovable 的 4 種情境#

情境 1：任何非網頁專案。能回覆客戶並追蹤詢問內容的 Telegram 機器人。每小時擷取競爭對手網站內容並將摘要傳送到 Slack 的指令碼。能擷取會計資料的 PDF 解析器。這些都無法用 Lovable 建置，因為它只適用於網頁專案。在 Claude Code 中，這些都是常見的一晚專案。

情境 2：長期的重要產品。如果你正以一項產品為核心建立公司，就需要把程式碼放在自己的 GitHub 儲存庫中，使用自己的基礎架構，並掌控一切。Lovable 會讓你一直依賴平台：你可以匯出程式碼，但之後若不再使用 Lovable，持續開發會比較困難（技術堆疊僵化，架構決策也由平台代為決定）。使用 Claude Code，程式碼從一開始就屬於你。

情境 3：非標準架構或技術堆疊。你想用 Bun 而不是 Node.js；想用 Postgres + Redis + ClickHouse；想用 Python 開發 AI 元件、用 Go 開發微服務；或想在 Supabase 之外使用 workers、queues 和 WebSockets。在 Lovable 中，這些做法不是無法實現，就是得透過手動編輯程式碼來「突破」限制——這也就失去了建置工具的優勢。

情境 4：需要專案的第二大腦。重要產品不只有程式碼，還需要上下文：商業模式、受眾、法律限制和目標。這些上下文會放在程式碼旁的 business/ 資料夾，Claude Code 每次收到請求時都會讀取（Claude Code 第二大腦指南）。Lovable 沒有這一層，因此你會得到一個技術上能運作、卻不理解「為什麼」的產品。

混合使用：在同一個專案中從 Lovable 轉到 Claude Code#

這種做法很簡單：每個工具各自擅長不同工作，因此不必「二選一」。

做法如下：

1. 構想階段。花一個晚上使用 Lovable。描述你的需求，就能得到具備資料庫、驗證功能和幾個頁面的可運作原型。這足以展示給合作夥伴，或訪問 5 位潛在客戶。

2. 驗證階段。產品還簡單時，繼續使用 Lovable。花 1–2 週輸入提示、進行小幅修改，並在資料庫中新增欄位。

3. 交接階段。碰上 Lovable 的上限時（例如需要同時搭配 Telegram 機器人、複雜邏輯或其他程式語言），透過 Dev Mode 匯出程式碼（需要 Pro 方案），並在本機複製儲存庫。

4. 開發階段。用 VS Code 開啟專案，並在同一個資料夾中啟動 Claude Code。現在 Claude 就能查看 Lovable 建置的程式碼，並繼續開發。架構仍維持不變（React + Supabase），但控制權轉到你手上。

缺點是，你得先付一個月（或更久）的 Lovable 費用，最後仍然轉用 Claude Code。這會多花 $25–50。作為回報，你能省下第一週的開發時間。大多數想法最後都不會成功，因此這 $25 通常花得值得：你能迅速得知哪裡行不通，不必先花兩週搭出最後仍會丟棄的雛形。

她用 Lovable 花一天重建了整個主要網站，並加入 12 項整合功能（Stripe、Customer.io、Meta Pixel）；之後再用 Claude Code 將 challenge prompts 功能部署到正式環境，只花 2 天，而不是預期的 2 週。

5 個很少有人提到的 Lovable 陷阱#

陷阱 1：免費方案只夠用 1–2 個晚上。每天 5 個點數足以建出應用程式雛形，再做幾次修改。接著你只能等一天，或支付 $25。

陷阱 2：只有 Pro 以上方案才能存取程式碼。免費方案不允許你下載程式碼、在編輯器中開啟，或交接給開發者。如果決定離開，就得升級到付費方案，或從頭開始。

陷阱 3：與 Supabase 緊密綁定。日後若想在自己的伺服器上執行 PostgreSQL、以自有驗證取代 Supabase Auth，或連接任何非網頁後端，過程會很棘手。技術堆疊從根本上就已固定。

陷阱 4：介面語言。Lovable 預設會產生英文的應用程式介面。請在提示中明確指定偏好的語言，例如：「請用我偏好的語言製作。」部分文字仍可能留在英文，尤其是系統錯誤訊息和輸入驗證表單。你可以另外輸入提示來修正。

陷阱 5：Supabase 的預設安全設定有漏洞。這是最重要、卻沒人在一開始提醒的事。研究人員檢查了 Lovable 官方展示區的 1,645 個應用程式，其中 170 個（10.3%）有 Supabase 的重大資料列層級安全性（Row Level Security）問題。任何已登入的使用者都能讀取、修改和刪除其他人的資料。在實際應用程式中，研究人員取得了客戶地址、欠款金額，以及有效的 Stripe 金鑰（CVE-2025-48757）。原因是 Lovable 會在 Supabase 建立資料表，但預設不會啟用 RLS 原則。解決方法是：第一次啟動後，手動為每張資料表啟用 RLS，並對照 Supabase 文件進行檢查。如果你要建立處理真實使用者資料的產品，這不是「之後再做」的事，而是「第一次建置完成後立刻做」。

5 個讓初學者打退堂鼓的 Claude Code 陷阱#

陷阱 1：安裝是第一道難關。開始之前，你得安裝 Node.js、npm、git、VS Code 和 Claude Code。在 Windows 上還得研究 WSL；Mac 雖然簡單一點，仍要開啟終端機。如果你從未做過這些事，前 30 分鐘就會花在研究「怎麼執行」。

陷阱 2：缺乏上下文時，一天內就可能用完額度。在 $20 的 Pro 方案中，額度取決於訊息數和 Token 數。如果每次都把 50 個專案檔案傳給 Claude，2–3 小時就會碰到上限。解決方法是上下文工程：只提供必要內容、使用 /clear 和 /compact，並維護 CLAUDE.md（使用上限指南）。

陷阱 3：缺少上下文就會產生幻覺。Claude Code 很聰明，但如果不了解你的專案，可能會捏造 API 方法、資料庫欄位或函式庫。若沒有記載規則的 CLAUDE.md 和作為第二大腦的 business/ 資料夾，結果就像抽籤一樣。有了這兩者，才會有可靠的工作流程（CLAUDE.md 指南）。

陷阱 4：存取和企業所有權限制。2025 年 9 月，Anthropic 封鎖了由中國、伊朗和北韓實體持有超過 50% 控制權的公司。存取條件會因供應商和所有權結構而異；選擇工具前請先確認。

陷阱 5：沒有視覺化編輯器。所有互動都透過文字進行。如果要把按鈕往右移 10 個像素，你不能直接拖曳，只能用文字描述。處理設計工作時，這不如 Lovable 等視覺化建置工具方便。

5 分鐘內做出選擇：決策表#

回答 5 個問題，看看建議選哪一個：

如果前兩列在 Lovable 欄標記 ✅，其餘列標記 ⚪/❌，就選 Lovable。如果第 3–5 列在 Claude Code 欄標記 ✅，就選 Claude Code。如果兩欄都有 ✅，先用 Lovable 1–2 週，之後轉到 Claude Code（參閱上方的混合使用章節）。

還有一點：無論選哪個工具，瓶頸都不是 AI 本身，而是你如何使用它。結合三大要素（AI 分身 + 第二大腦 + 上下文工程），任何工具都能產生一致的成果。沒有這套方法，AI 就會產生幻覺；有了它，AI 就能像可靠的機器一樣運作。

一晚完成 vibe coding 的完整指南：AI 分身 + 第二大腦 + 上下文工程。

認識 Ailoot。