Lovable và Claude Code năm 2026: Nên chọn công cụ nào cho dự án đầu tiên của bạn?

Thông tin về cách làm việc với Ailoot có trong tài liệu.

Lovable và Claude Code là gì?#

Lovable là công cụ dựng ứng dụng trên trình duyệt. Về kỹ thuật, Lovable là một lớp chạy trên Claude Opus của Anthropic: Lovable xác nhận rằng sau khi đánh giá các mô hình thương mại và mã nguồn mở, họ đã chọn Claude làm mô hình chính (câu chuyện khách hàng Anthropic: Lovable). Vì vậy, cách đặt vấn đề “Lovable hay Claude” đã đơn giản hóa quá mức. Trên thực tế, chúng là các lớp: Lovable là lớp giao diện tiện lợi bao quanh chính Claude mà bạn truy cập trực tiếp qua Claude Code.

Khi truy cập lovable.dev, quy trình diễn ra như sau:

1. Đăng ký bằng Google hoặc GitHub.
2. Viết prompt: “Tạo cho tôi một CRM dành cho công ty bất động sản, có xác thực và cơ sở dữ liệu khách hàng.”
3. Trong 30–60 giây, bạn sẽ thấy một website hoạt động được trên tên miền miễn phí *.lovable.app, có cơ sở dữ liệu, biểu mẫu đăng nhập và các trang hoạt động.
4. Sau đó, tinh chỉnh bằng các prompt: “Thêm bộ lọc theo trạng thái giao dịch”, “Thêm giao diện tối”, “Thêm Stripe để thanh toán phí đăng ký.”

Bên dưới, Lovable xây dựng ứng dụng React bằng Vite, dùng Tailwind CSS để tạo kiểu và các component shadcn/ui. Backend là Supabase: PostgreSQL lưu dữ liệu, Supabase Auth xử lý đăng nhập và Edge Functions chạy logic phía máy chủ. Từ ngày 13 tháng 5 năm 2026, các dự án mới sử dụng TanStack Start với kết xuất phía máy chủ.

Claude Code là chương trình của Anthropic mà bạn cài đặt trên máy Mac, Windows hoặc Linux. Chạy chương trình bằng lệnh claude trong terminal, ngay trong thư mục dự án. Sau đó, bạn trò chuyện với chương trình bằng văn bản; nó đọc tệp, viết mã, chạy lệnh và sửa lỗi. Từ ngày 16 tháng 4 năm 2026, mô hình chính là Opus 4.7.

Khác biệt chính trong một câu: Lovable là website xây dựng website cho bạn. Claude Code là đồng nghiệp lập trình ngồi trong terminal và làm theo chỉ dẫn của bạn.

Hai quan điểm này thực ra mô tả hai giai đoạn trên cùng một con đường. Lovable là công cụ để đi “từ con số không lên một” khi bạn chưa học nghề. Claude Code là công cụ để phát triển khi bạn đã hiểu cách xây dựng ứng dụng và muốn kiểm soát mọi thứ.

Ai nên dùng Lovable, và ai nên dùng Claude Code?#

Tôi xem lựa chọn này giống như chọn giữa một bữa ăn được chuẩn bị sẵn ở nhà hàng và một căn bếp tại nhà. Lovable là nhà hàng: bạn ngồi xuống, gọi món, và 20 phút sau món ăn được mang ra. Claude Code là căn bếp: có bộ dụng cụ và nguyên liệu cùng một trợ lý biết mọi công thức, nhưng bạn là người nấu và quyết định làm món gì, làm như thế nào.

Lovable phù hợp nếu:

• Bạn chưa từng mở terminal và không muốn bắt đầu.
• Bạn cần một nguyên mẫu cho ý tưởng trong một buổi tối để giới thiệu với đối tác hoặc khách hàng.
• Bạn đang xây dựng một sản phẩm phổ biến: trang đích, CRM, marketplace, dashboard hoặc biểu mẫu yêu cầu — những thứ Lovable đã xây dựng hàng trăm lần.
• Bạn sẵn sàng làm việc với stack React + Supabase và không cần Python, Go hoặc ứng dụng di động.
• Gói trả phí $25–100 mỗi tháng không khiến bạn bận tâm và bạn không lo mã nằm ở nhà cung cấp.

Claude Code phù hợp nếu:

• Bạn đã làm việc với thư mục dự án và biết git cùng .env là gì.
• Bạn cần kiểm soát từng tệp và muốn tự chọn stack.
• Dự án của bạn phức tạp hơn thông thường: bot Telegram, tập lệnh xử lý dữ liệu, ứng dụng di động hoặc tích hợp với API không theo chuẩn phổ biến.
• Bạn muốn mã nằm trong repository của mình, không phải ở nhà cung cấp.
• Bạn sẵn sàng tìm hiểu CLAUDE.md và context engineering để có kết quả nhất quán.

Một dự án đầu tiên với mỗi công cụ tốn bao nhiêu?#

Lovable: Gói dịch vụ và credit

Giá chính thức của Lovable tính đến tháng 5 năm 2026:

Một credit tương đương khoảng một prompt. Chỉnh sửa nhẹ về phong cách tốn 0.5 credit; tính năng mới có xác thực tốn 1.5+ credit. Cạm bẫy chính: một vòng sửa lỗi (khi AI sửa một thứ rồi làm hỏng thứ khác) có thể tiêu tốn thêm 60–150 credit ngoài phần xây dựng ban đầu. Mua thêm credit trong gói Pro tốn $15 cho 50 credit.

⚠️ Một khoản riêng là Lovable Cloud (dịch vụ lưu trữ được nền tảng quản lý). Dịch vụ này không nằm trong phí đăng ký: một workspace được miễn phí $25/tháng tiền lưu trữ + $1/tháng sử dụng AI miễn phí. Sau đó, bạn trả theo mức sử dụng (đọc/ghi cơ sở dữ liệu, edge function, lưu trữ). Có trường hợp một dự án với chưa đến 100 người dùng hoạt động đã dùng hết hạn mức miễn phí trong một tuần.

Claude Code: Gói dịch vụ và token

Giá chính thức của Claude năm 2026:

Ngoài ra còn có token API dành cho những người xây dựng tích hợp riêng: Opus 4.8 có giá $5 cho mỗi triệu token đầu vào và $25 cho mỗi triệu token đầu ra. Xem chi tiết trong hướng dẫn Opus 4.8 cho Claude Code.

Chi phí thực tế của một dự án đầu tiên và một dự án nghiêm túc

Hãy lấy một tác vụ điển hình: “Tạo website đặt lịch cho khách hàng, có cơ sở dữ liệu, biểu mẫu đặt lịch và bảng quản trị.”

Lovable: Với gói Pro ($25), bạn sẽ cần khoảng 30–40 credit để xây dựng và tinh chỉnh. Chi phí nằm trong một tháng đăng ký. Mỗi sản phẩm mới hoặc lần thiết kế lại lớn sau đó cần thêm một tháng đăng ký, chưa kể chi phí Lovable Cloud có thể phát sinh.

Claude Code: Với gói Pro ($20), tác vụ tương tự cần 3–4 giờ làm việc và khoảng mười phiên AI. Hạn mức tháng đủ cho 2–3 dự án như vậy cùng lúc, cộng với công việc thường ngày: chỉnh sửa nội dung website, sửa lỗi nhỏ và tập lệnh tự động hóa.

Về lâu dài, khác biệt còn lớn hơn. Một nhà phát triển đã chạy 10 tỷ token qua Claude Code trong 8 tháng: nếu dùng API sẽ tốn hơn $15,000, nhưng gói Max chỉ tốn khoảng $800. Nếu bạn chỉ làm một sản phẩm một lần, Lovable và Claude Code có chi phí tương đương. Nếu có 5–10 dự án và thường xuyên làm việc với chúng, Claude Code rẻ hơn 5–6 lần.

Bạn nhận được loại mã nào? Bên dưới lớp vỏ#

Với Lovable, câu hỏi “được viết bằng gì?” đã có sẵn câu trả lời. Mọi ứng dụng đều dùng:

• Frontend: React, Vite, Tailwind CSS và thư viện component dựng sẵn shadcn/ui.
• Backend: Supabase — PostgreSQL cho cơ sở dữ liệu, Supabase Auth để đăng nhập, Supabase Storage cho tệp và Edge Functions trên Deno để xử lý logic phía máy chủ.
• Realtime: Supabase Realtime qua WebSocket cho trò chuyện và cập nhật.
• Thanh toán: tích hợp Stripe có sẵn.
• Lưu trữ: *.lovable.app ở gói miễn phí, tên miền riêng ở gói trả phí.

Đây là điểm mạnh: một stack đã được kiểm chứng, đáp ứng 80% tác vụ của người không lập trình. Đây cũng là hạn chế: nếu dự án của bạn là bot Telegram, xử lý tài liệu PDF, tập lệnh thu thập dữ liệu hoặc ứng dụng di động, Lovable không phải lựa chọn phù hợp.

Với Claude Code, bạn chọn stack. Các dự án ví dụ đã sử dụng:

• Next.js + TypeScript + PostgreSQL cho nền tảng dành cho nhà sáng tạo.
• Python + FastAPI cho một trong các backend của sản phẩm khách hàng.
• Bot Telegram bằng TypeScript với thư viện grammY.
• Tập lệnh xử lý dữ liệu bằng Node.js.

Cùng một Claude Code làm việc với mọi thư mục và mọi stack: công cụ đọc nội dung dự án, hiểu cấu trúc và dùng ngôn ngữ phù hợp. Bạn có quyền tự do, nhưng phải quyết định nên dùng stack nào.

Điều gì xảy ra khi sản phẩm thành công: phát triển dự án#

Đây là tình huống ít người kiểm tra lúc bắt đầu, nhưng lại là khác biệt quyết định giữa hai công cụ.

Giả sử bạn tạo trình theo dõi công việc bằng Lovable và sản phẩm được đón nhận. Khách hàng nhắn: “Thêm tích hợp với CRM của chúng tôi”, “Chúng tôi cần xuất Excel theo cấu trúc cụ thể”, “Tạo ứng dụng di động”. Điều gì sẽ xảy ra?

• Bạn thực hiện các thay đổi đơn giản bằng prompt và tiêu tốn credit.
• Các thay đổi phức tạp thường vấp phải giới hạn kiến trúc: Lovable không biết CRM của bạn, định dạng xuất không theo chuẩn và ứng dụng di động cần stack khác.
• Lovable cung cấp chức năng xuất mã và làm việc trong trình soạn thảo, nhưng đó không còn là “vibe coding” nữa. Đó là phát triển phần mềm thông thường, đòi hỏi bạn hiểu React, TypeScript và Supabase.

Claude Code không có bước chuyển gãy như vậy. Bạn thêm tích hợp CRM — Claude Code đọc tài liệu CRM, viết client, kiểm thử và commit. Bạn cần ứng dụng di động — mở thư mục mới, giao tác vụ “Tạo ứng dụng iOS bằng Swift, dùng cùng API”, rồi nhận kết quả. Ngữ cảnh không bị mất vì repository thuộc về bạn.

Điều đó không có nghĩa Lovable kém — công cụ này rất giỏi giải quyết tác vụ đầu tiên. Điều đó có nghĩa Lovable là điểm khởi đầu cho sản phẩm, chứ không phải nơi sản phẩm gắn bó lâu dài.

Khi Claude Code và Lovable mắc lỗi: Công cụ nào dễ sửa hơn?#

AI luôn mắc lỗi. Câu hỏi chính là cần bỏ ra bao nhiêu công sức để sửa chúng.

Khi có sự cố trong Lovable, bạn có 3 lựa chọn:

1. Tiếp tục viết prompt: “Sửa lỗi này, nút không hoạt động.” Cách này thường có tác dụng, nhưng đôi lúc không.
2. Khôi phục bằng lịch sử của Lovable. Lệnh khôi phục lùi lại N bước cùng lúc — không chính xác.
3. Chuyển sang Dev Mode (chỉ có trong các gói trả phí) và tự chỉnh mã.

Khi có lỗi trong Claude Code:

1. Bạn thấy lỗi trong terminal hoặc trình duyệt rồi nói với Claude: “Đây là lỗi, hãy tìm nguyên nhân.”
2. Nếu đi vào ngõ cụt, lệnh /rewind sẽ khôi phục trạng thái gần nhất còn hoạt động (hướng dẫn hoàn tác thay đổi).
3. Bạn có thể tự mở tệp và sửa một dòng — đó là mã của bạn.

Ưu điểm của Claude Code ở đây là bạn có thể thấy điều gì đã thay đổi và lỗi nằm ở đâu. Lovable hoạt động như một “hộp đen” — bạn nhận được kết quả nhưng không thấy nguyên nhân. Điều đó giúp người mới nhẹ nhõm (“tôi không cần tự tìm hiểu”), nhưng khi sản phẩm phức tạp hơn một trang đích thông thường, nó trở thành vấn đề.

4 tình huống Lovable vượt trội hơn Claude Code#

Tình huống 1: Trang đích có biểu mẫu và cơ sở dữ liệu. “Tôi muốn một trang để mọi người để lại email, còn tôi có thể xem trong bảng quản trị ai đã để lại.” Trong Lovable, việc này mất 10 phút, bao gồm thiết kế, tên miền và SSL. Trong Claude Code, cần 1–2 giờ để dựng khung, cộng thêm một giờ để xuất bản. Với tác vụ chỉ làm một lần, Lovable thắng áp đảo.

Tình huống 2: Nguyên mẫu trình diễn cho nhà đầu tư hoặc đối tác. Bạn cần cho thấy sản phẩm “sẽ hoạt động như thế nào” trong cuộc họp sau 3 ngày. Lovable xây dựng một nguyên mẫu bắt mắt và hoạt động được trong một buổi tối. Bạn có thể trình bày và nói: “Logic này sẽ nằm ở đây, còn logic kia sẽ nằm ở đó.” Đối tác nhấn các nút và thấy thứ gì đó thực tế, không phải PowerPoint.

Tình huống 3: Sản phẩm tiêu chuẩn dựa trên mẫu quen thuộc. CRM đơn giản cho một công ty dịch vụ, cổng khách hàng có xác thực, dashboard có biểu đồ. Lovable đã xây những ứng dụng này hàng trăm lần — mô hình đã biết các kiểu mẫu. Khả năng có được kết quả hoạt động ngay lần đầu cao hơn.

Tình huống 4: Khi việc cài đặt là rào cản. Nếu ai đó thật sự chưa từng mở terminal và chưa sẵn sàng tìm hiểu Node.js, git và VS Code, Lovable có thể mang lại kết quả mà Claude Code không thể. Có nguyên mẫu hoạt động được vẫn tốt hơn một dự án chưa bao giờ bắt đầu.

4 tình huống Claude Code vượt trội hơn Lovable#

Tình huống 1: Mọi dự án không phải web. Bot Telegram trả lời khách hàng và theo dõi yêu cầu. Tập lệnh thu thập dữ liệu từ website đối thủ mỗi giờ rồi gửi bản tóm tắt đến Slack. Công cụ phân tích PDF trích xuất dữ liệu kế toán. Bạn không thể xây những thứ này trong Lovable — công cụ chỉ dành cho web. Với Claude Code, đây là các dự án thường làm trong một buổi tối.

Tình huống 2: Sản phẩm dài hạn nghiêm túc. Nếu bạn đang xây dựng công ty xoay quanh một sản phẩm, mã cần nằm trong repository GitHub của bạn, chạy trên hạ tầng của riêng bạn và mọi thứ phải nằm trong quyền kiểm soát của bạn. Lovable luôn ràng buộc bạn với nền tảng: có thể xuất mã, nhưng phát triển tiếp mà không có Lovable khó hơn (stack cứng nhắc và các quyết định kiến trúc đã được đưa ra thay bạn). Với Claude Code, mã thuộc về bạn ngay từ đầu.

Tình huống 3: Kiến trúc hoặc stack khác thường. Bạn muốn dùng Bun thay vì Node.js. Bạn muốn Postgres + Redis + ClickHouse. Bạn muốn Python cho thành phần AI và Go cho một microservice. Bạn muốn workers, queues và WebSockets nằm ngoài Supabase. Trong Lovable, những thứ này hoặc không thể làm được, hoặc đòi hỏi phải “phá rào” bằng cách chỉnh mã thủ công — khiến lợi thế của công cụ dựng ứng dụng biến mất.

Tình huống 4: Khi bạn cần một bộ não thứ hai cho dự án. Sản phẩm nghiêm túc không chỉ có mã mà còn có ngữ cảnh: mô hình kinh doanh, đối tượng mục tiêu, giới hạn pháp lý và mục tiêu. Ngữ cảnh này nằm trong thư mục business/ bên cạnh mã, và Claude Code đọc nó trong mọi yêu cầu (hướng dẫn về bộ não thứ hai trong Claude Code). Lovable hoạt động không có lớp này — bạn nhận được sản phẩm chạy được về kỹ thuật nhưng không hiểu “tại sao”.

Kết hợp: Lovable → Claude Code trong cùng một dự án#

Mô hình này đơn giản: mỗi công cụ đều giỏi phần việc riêng, nên bạn không cần chọn “cái này hay cái kia”.

Cách hoạt động:

1. Giai đoạn ý tưởng. Dành một buổi tối với Lovable. Mô tả điều bạn muốn và nhận nguyên mẫu hoạt động được, có cơ sở dữ liệu, xác thực và một vài trang. Vậy là đủ để giới thiệu với đối tác hoặc phỏng vấn 5 khách hàng tiềm năng.

2. Giai đoạn xác thực. Tiếp tục làm việc trong Lovable khi sản phẩm vẫn còn đơn giản. Dành 1–2 tuần viết prompt, chỉnh sửa nhỏ và thêm trường mới vào cơ sở dữ liệu.

3. Giai đoạn bàn giao. Khi chạm đến giới hạn của Lovable (cần thêm bot Telegram, logic phức tạp hoặc ngôn ngữ khác), xuất mã qua Dev Mode (yêu cầu gói Pro) và clone repository về máy.

4. Giai đoạn phát triển. Mở dự án trong VS Code và chạy Claude Code từ chính thư mục đó. Lúc này Claude có thể xem mã mà Lovable đã tạo và tiếp tục phát triển. Kiến trúc vẫn giữ nguyên (React + Supabase), nhưng quyền kiểm soát chuyển sang bạn.

Nhược điểm là bạn trả tiền cho Lovable trong tháng đầu (hoặc lâu hơn), rồi vẫn chuyển sang Claude Code. Tốn thêm $25–50. Đổi lại, bạn tiết kiệm tuần phát triển đầu tiên. Với phần lớn ý tưởng không thành công, $25 đó rất đáng tiền: bạn nhanh chóng biết điều gì không hiệu quả mà không mất hai tuần xây một bộ khung cuối cùng sẽ phải vứt đi.

Cô đã xây lại website chính với 12 tích hợp (Stripe, Customer.io, Meta Pixel) trong một ngày bằng Lovable, sau đó đưa tính năng challenge prompts vào môi trường sản xuất bằng Claude Code trong 2 ngày thay vì 2 tuần như dự kiến.

5 cạm bẫy của Lovable mà ít ai đề cập#

Cạm bẫy 1: Gói miễn phí chỉ đủ cho 1–2 buổi tối. 5 credit mỗi ngày đủ để dựng khung ứng dụng và chỉnh sửa một vài lần. Sau đó, bạn phải chờ một ngày hoặc trả $25.

Cạm bẫy 2: Chỉ có thể truy cập mã từ gói Pro trở lên. Gói miễn phí không cho phép tải mã xuống, mở trong trình soạn thảo hay bàn giao cho nhà phát triển. Nếu quyết định rời đi, bạn phải nâng cấp lên gói trả phí hoặc bắt đầu lại.

Cạm bẫy 3: Phụ thuộc chặt vào Supabase. Nếu sau này bạn muốn chạy PostgreSQL trên máy chủ riêng, thay Supabase Auth bằng hệ thống xác thực của mình hoặc kết nối bất kỳ backend không dành cho web nào, việc đó sẽ rất vất vả. Stack đã được tích hợp vào nền tảng.

Cạm bẫy 4: Ngôn ngữ giao diện. Theo mặc định, Lovable tạo giao diện ứng dụng bằng tiếng Anh. Hãy ghi rõ ngôn ngữ bạn muốn trong prompt, chẳng hạn “tạo giao diện bằng ngôn ngữ tôi muốn”. Một số văn bản vẫn có thể là tiếng Anh, nhất là lỗi hệ thống và biểu mẫu xác thực đầu vào. Bạn có thể sửa bằng các prompt riêng.

Cạm bẫy 5: Bảo mật Supabase mặc định có lỗ hổng. Đây là điểm quan trọng nhất mà không ai nhắc đến lúc đầu. Các nhà nghiên cứu kiểm tra 1.645 ứng dụng trong showcase chính thức của Lovable — 170 ứng dụng (10,3%) có vấn đề nghiêm trọng về Row Level Security trong Supabase. Bất kỳ người dùng nào đã đăng nhập cũng có thể đọc, thay đổi và xóa dữ liệu của người khác. Trong các ứng dụng thực tế, nhà nghiên cứu đã truy cập được địa chỉ khách hàng, số tiền nợ và khóa Stripe đang hoạt động. Nguyên nhân: Lovable tạo bảng trong Supabase nhưng không bật chính sách RLS theo mặc định. Cách giải quyết: sau lần triển khai đầu tiên, hãy bật RLS thủ công trên mọi bảng và kiểm tra theo tài liệu Supabase. Nếu xây dựng sản phẩm có dữ liệu người dùng thật, đây không phải việc để “sau này” — hãy làm “ngay sau lần tạo đầu tiên”.

5 cạm bẫy của Claude Code khiến người mới nản lòng#

Cạm bẫy 1: Cài đặt là trở ngại đầu tiên. Để bắt đầu, bạn cần cài Node.js, npm, git, VS Code và chính Claude Code. Trên Windows, bạn phải tìm hiểu cách dùng WSL. Trên Mac dễ hơn nhưng vẫn phải mở terminal. Nếu chưa từng làm việc này, 30 phút đầu tiên sẽ dành cho việc tìm hiểu “chạy nó như thế nào”.

Cạm bẫy 2: Có thể dùng hết hạn mức trong một ngày nếu không có ngữ cảnh. Trong gói Pro giá $20, hạn mức được tính theo tin nhắn và token. Nếu lần nào cũng gửi cho Claude 50 tệp dự án, bạn sẽ chạm giới hạn trong 2–3 giờ. Cách giải quyết là context engineering: chỉ cung cấp những gì cần thiết, dùng /clear và /compact, đồng thời duy trì CLAUDE.md (hướng dẫn về giới hạn).

Cạm bẫy 3: Ảo giác khi thiếu ngữ cảnh. Claude Code thông minh, nhưng nếu không hiểu dự án, nó có thể bịa ra phương thức API, trường cơ sở dữ liệu hoặc thư viện. Không có CLAUDE.md chứa quy tắc và thư mục business/ làm bộ não thứ hai, kết quả sẽ như xổ số. Có chúng, bạn sẽ có quy trình đáng tin cậy (hướng dẫn về CLAUDE.md).

Cạm bẫy 4: Hạn chế về quyền truy cập và quyền sở hữu doanh nghiệp. Điều khoản truy cập phụ thuộc vào nhà cung cấp và cơ cấu sở hữu; hãy kiểm tra trước khi chọn công cụ.

Cạm bẫy 5: Không có trình soạn thảo trực quan. Mọi tương tác đều qua văn bản. Nếu cần dịch nút sang phải 10 pixel, bạn không thể kéo thả — phải mô tả bằng lời. Với công việc thiết kế, công cụ này kém tiện hơn các trình dựng trực quan, trong đó có Lovable.

Chọn công cụ trong 5 phút: Bảng quyết định#

Trả lời 5 câu hỏi để nhận đề xuất:

Nếu đánh dấu ✅ cho Lovable ở hai hàng đầu tiên và ⚪/❌ ở những hàng còn lại, hãy chọn Lovable. Nếu đánh dấu ✅ cho Claude Code ở các hàng 3–5, hãy chọn Claude Code. Nếu đánh dấu ✅ ở cả hai cột, hãy dùng Lovable trong 1–2 tuần đầu, rồi chuyển sang Claude Code (xem phần kết hợp ở trên).

Còn một điều nữa: dù chọn công cụ nào, nút thắt không nằm ở bản thân AI. Điều quan trọng là cách bạn làm việc với nó. Không có tất cả các yếu tố cần thiết, quá trình lặp có thể thành chu trình vô hạn và làm tăng hóa đơn.

Tìm hiểu Ailoot.