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

> Lovable 與 Claude Code：價格、各自適合的使用者，以及常見陷阱。本文提供決策表，並介紹一套由 Lovable 建立雛形、再由 Claude Code 精修邏輯的工作流程。

Source: https://ailoot.ai/blog/zh-hant-tw/lovable-vs-claude-code-2026/
Canonical: https://ailoot.ai/blog/zh-hant-tw/lovable-vs-claude-code-2026/
Language: zh-Hant-TW
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-169
Revision: sha256-e3c747efe1efd6c92b7499d057b21245a2732dba8aa596ec6b24c81e1c59ffae


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

Lovable 是在瀏覽器中使用的建置工具：輸入「我想要一個有驗證功能的任務追蹤器」，不到一分鐘就能得到以 React + Supabase 建置的上線網站。Claude Code 是在終端機中使用的本機助理。它能處理任何技術堆疊和程式碼，但需要安裝，也要具備基本的檔案操作概念。若想在一個晚上完成第一個原型，Lovable 更方便；Claude Code 則適合認真的開發工作。實際上，經驗豐富的 vibe coder 兩者都會用：先用 Lovable 搭出骨架，再用 Claude Code 精修邏輯。

</div>

如需了解如何使用 Ailoot，請參閱[文件](https://ailoot.ai/docs/)。

## Lovable 和 Claude Code 是什麼？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

Lovable 是在瀏覽器中使用的網頁應用程式：以文字描述產品，AI 就會建置一個具備資料庫和驗證功能的上線網站。Claude Code 是在終端機中操作專案資料夾的程式，能讀寫檔案並執行指令。前者是現成的「全方位工具」；後者則是通用工具。

</div>

[Lovable](https://lovable.dev) 是一款瀏覽器建置工具。從技術上來說，Lovable 是建構在 Anthropic Claude Opus 之上的一層：公司公開表示，評估商用與開源模型後，選擇 Claude 作為主要模型（[Anthropic 客戶案例：Lovable](https://claude.com/customers/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](https://claude.com/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](https://www.anthropic.com/news/claude-opus-4-7)）。

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









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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

如果你想在一個晚上看到可運作的原型，又還沒準備好研究如何安裝工具，Lovable 適合你。如果你已了解什麼是專案資料夾和 git，並希望完全掌控程式碼，Claude Code 適合你。兩者沒有誰「比較好」；關鍵在於「何時該用哪一個」。

</div>

我認為這就像在餐廳用餐和在家下廚之間做選擇。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，或兩者並用——成為可靠的工作流程。

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

兩者都可以免費試用。Lovable 每天提供 5 個點數，並使用公開專案；Claude Code 則提供不含 CLI 的免費聊天。要真正完成第一個專案，Lovable 每月 \$25 起，Claude Code 每月 \$20 起。但隨著專案擴大，受訊息數量限制影響，Lovable 的費用會變成 Claude Code 的 4–5 倍。

</div>

### Lovable：方案與點數

截至 2026 年 5 月的[Lovable 官方定價](https://lovable.dev/pricing)：

| 方案 | 價格 | 每月點數 | 方案內容 |
|----|----|----|----|
| Free | \$0 | 每天 5 點，每月最多 30 點 | 僅限 `*.lovable.app` 上的公開專案 |
| Pro | \$25（年繳每月 \$21） | 100 點 + 每天 5 點（最多 150 點） | 私人專案、自訂網域、GitHub 同步 |
| Business | \$50（年繳每月 \$42） | 100 點 + 每天 5 點 | 團隊、SSO、進階權限 |
| Enterprise | 依合約定價 | 自訂 | 企業功能 |

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

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

### Claude Code：方案與 Token

2026 年的[Claude 官方定價](https://claude.com/pricing)：

| 方案 | 價格 | 適用對象 |
|----|----|----|
| Free | 0 | 僅限 claude.ai 聊天；不含 Claude Code |
| Pro | 每月 \$20 | 一般 vibe coder，每天使用數個時段 |
| Max 5x | 每月 \$100 | 整天使用 Claude Code |
| Max 20x | 每月 \$200 | 在長時間任務中執行自主代理 |
| Team Standard | 每席每月 \$25 | 團隊使用 |
| Team Premium | 每席每月 \$125 | 需要更高使用上限的團隊 |

自行建置整合功能的使用者也可以購買 API Token：Opus 4.8 每百萬個輸入 Token 收費 \$5，每百萬個輸出 Token 收費 \$25。詳情請參閱[Claude Code 的 Opus 4.8 指南](https://ailoot.ai/blog/zh-hant-tw/opus-4-8-claude-code-features/)。

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

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

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

<strong>Claude Code：</strong>使用 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 倍**。

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

Lovable 一律使用相同的技術堆疊：React + Vite + Tailwind + Supabase。這很方便，但如果專案不適合這套堆疊，就沒有選擇空間。Claude Code 則會使用你指定的任何語言撰寫程式碼：Python、Go、Rust、TypeScript、Swift。你能自由選擇技術堆疊，也必須為這項選擇負起全部責任。

</div>

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

在 Lovable 建好第一個版本後，你可以繼續在 Lovable 中輸入新提示（並面對它的限制和架構），或把程式碼「匯出」到自己的檔案，再改用程式碼編輯器——這會讓建置工具的優勢蕩然無存。使用 Claude Code 時，只要在同一個終端機中新增任務即可。程式碼始終屬於你，你也能繼續掌握控制權。

</div>

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

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

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

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

兩者都會出錯。Lovable 的錯誤往往「更深層」，常出在架構或 Supabase 設定；只能靠另一個提示或手動編輯程式碼修正。Claude Code 的錯誤比較表層，通常出現在檔案中，可使用 `/rewind` 或 git 精確修正。經驗豐富的 vibe coder 使用 Claude Code 通常比較能應付；初學者則較適合 Lovable。

</div>

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

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

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

Claude Code 出現錯誤時：

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

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

## Lovable 勝過 Claude Code 的 4 種情境

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

廣告活動的登陸頁面、附帶資料庫的問卷表單、供投資人會議展示的可運作原型、標準 CRM，或儀表板——Lovable 建置這些內容的速度快 5–10 倍。如果你的專案符合其中一種情境，就不必在終端機裡苦撐。

</div>

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

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

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

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

## Claude Code 勝過 Lovable 的 4 種情境

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

Telegram 機器人、自動化指令碼、行動應用程式，或擁有自己儲存庫的長期重要產品——這些在 Lovable 中不是做不到，就是會在 1–2 週內碰上瓶頸。Claude Code 不受技術堆疊或架構限制。

</div>

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

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

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

經驗豐富的 vibe coder 常用這種組合：先用 Lovable 在一個晚上搭出產品骨架，再匯出程式碼、用 VS Code 開啟，接著透過 Claude Code 繼續開發。這樣能兼得 Lovable 的快速起步和 Claude Code 的開發控制權。

</div>

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

**做法如下：**

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

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

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

4. <strong>開發階段。</strong>用 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 陷阱

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

免費方案的額度一個晚上就會用完。只有 Pro 以上方案才能取得自己的程式碼。架構與 Supabase 緊密綁定。介面不一定預設提供你偏好的語言。你會高度依賴這個平台：專案擴大後，程式碼仍一直存放在供應商的平台上。

</div>

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

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

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

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

安裝需要終端機、Node.js 和 git——這就是第一道障礙。如果不了解 Token 如何計算，使用額度可能很快耗盡。沒有 CLAUDE.md 和上下文工程，AI 會產生幻覺。它沒有視覺化編輯器，一切都透過文字完成。

</div>

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

<strong>陷阱 2：缺乏上下文時，一天內就可能用完額度。</strong>在 \$20 的 Pro 方案中，額度取決於訊息數和 Token 數。如果每次都把 50 個專案檔案傳給 Claude，2–3 小時就會碰到上限。解決方法是上下文工程：只提供必要內容、使用 `/clear` 和 `/compact`，並維護 `CLAUDE.md`（[使用上限指南](https://ailoot.ai/blog/zh-hant-tw/claude-code-token-limits-saving/)）。

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

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

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

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

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="重點摘要">

重點摘要

如果你的任務是標準網頁產品的構想，而且不想處理安裝：選 Lovable。如果任務屬於非標準專案、長期產品，或你準備花一個晚上安裝工具：選 Claude Code。如果不確定：先用 Lovable 1 個月，碰到上限後再轉用 Claude Code。

</div>

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

| 問題 | Lovable | Claude Code |
|----|----|----|
| 從沒開過終端機，也不想開嗎？ | ✅ | ❌ |
| 專案是簡單的網站（頁面、表單、CRM、儀表板）嗎？ | ✅ | ⚪ 可以，但要花比較久 |
| 需要 Telegram 機器人、指令碼或行動應用程式嗎？ | ❌ | ✅ |
| 想完全掌控程式碼和技術堆疊嗎？ | ❌ | ✅ |
| 正在打造擁有自有儲存庫的長期產品嗎？ | ⚪ 透過匯出 | ✅ |

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

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

<div class="section" role="doc-bibliography" aria-label="來源">

### 來源

- [Lovable - 官方網站與定價](https://lovable.dev/pricing)
- [Lovable Documentation - 方案與點數](https://docs.lovable.dev/introduction/plans-and-credits)
- [Anthropic 客戶案例 - Lovable](https://claude.com/customers/lovable)
- [Claude - 2026 年官方定價](https://claude.com/pricing)
- [Anthropic - Claude Opus 4.7 發表公告](https://www.anthropic.com/news/claude-opus-4-7)

</div>

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



認識 [Ailoot](https://ailoot.ai/)。

## 常見問題：2026 年 Lovable 與 Claude Code 比較：第一個專案該選哪一個？

### 除了工具訂閱，還應比較哪些成本？

Lovable 要計入超出額度的 credits 與 Lovable Cloud 用量。兩種流程都應包含專案實際需要的託管、資料庫與網域，應比較完成專案的帳單，不只是訂閱價。

### 把真實使用者資料放進生成 app 前，要查什麼？

檢查資料庫存取控制，包含每張相關表的 Supabase Row Level Security，驗證一位使用者無法讀取或修改另一人的資料。登入畫面可用，不代表資料已隔離。


## Ailoot · 公司及其專案組合

Ailoot以累積的營運經驗、廣大的客戶群、穩定的服務及持續的KPI管理為基礎。

公司及其專案組合：數百萬客戶，每月銷售額達數十億。

Ailoot將這些營運經驗用於API存取，讓客戶的產品、代理、應用程式及自動化流程使用AI功能。