Lovable vs Claude Code pada 2026: yang mana patut anda pilih untuk projek pertama?

Maklumat tentang cara menggunakan Ailoot tersedia dalam dokumentasi.

Apakah Lovable dan Claude Code?#

Lovable ialah pembina berasaskan pelayar. Dari segi teknikal, Lovable ialah lapisan di atas Claude Opus Anthropic: syarikat itu mengesahkan secara terbuka bahawa selepas menilai model komersial dan sumber terbuka, mereka memilih Claude sebagai model utama (kisah pelanggan Anthropic: Lovable). Jadi, gambaran “Lovable atau Claude” terlalu memudahkan keadaan. Dalam praktiknya, kedua-duanya ialah lapisan: Lovable ialah pembalut mudah untuk Claude yang sama, yang boleh anda akses secara terus melalui Claude Code.

Perkara yang berlaku apabila anda melayari lovable.dev:

1. Daftar melalui Google atau GitHub.
2. Tulis prompt: “Bina CRM untuk agensi hartanah dengan pengesahan dan pangkalan data pelanggan.”
3. Dalam 30–60 saat, anda akan melihat laman langsung pada domain *.lovable.app percuma, dengan pangkalan data, borang log masuk dan halaman yang berfungsi.
4. Kemudian, perhalusnya dengan prompt: “Tambah penapis mengikut status urus niaga,” “Tambah tema gelap,” “Tambah Stripe untuk pembayaran langganan.”

Claude Code ialah program daripada Anthropic yang anda pasang pada komputer Mac, Windows atau Linux. Jalankannya dengan arahan claude dalam terminal, di dalam folder projek anda. Kemudian, anda berkomunikasi dengannya melalui teks, dan ia membaca fail, menulis kod, menjalankan arahan serta membetulkan ralat. Sejak 16 April 2026, model utamanya ialah Opus 4.7; sejak 28 Mei 2026, Opus 4.8 juga tersedia dengan ciri Dynamic Workflows (sehingga 1,000 subagen serentak) (Anthropic - Claude Opus 4.7).

Perbezaan utama dalam satu ayat: Lovable ialah laman web yang membina laman web untuk anda. Claude Code ialah rakan pembangun dalam terminal anda yang mengikut arahan anda.

Dua pendirian ini sebenarnya menggambarkan dua peringkat dalam laluan yang sama. Lovable ialah alat untuk bergerak “daripada sifar kepada satu” apabila anda belum mempelajari kemahirannya. Claude Code ialah alat untuk berkembang apabila anda sudah memahami cara aplikasi dibina dan mahukan kawalan.

Siapa patut menggunakan Lovable dan siapa patut menggunakan Claude Code?#

Saya melihatnya sebagai pilihan antara hidangan siap di restoran dengan dapur di rumah. Lovable ialah restoran: anda duduk, membuat pesanan dan 20 minit kemudian hidangan sudah terhidang. Claude Code ialah dapur: set alat dan bahan, serta pembantu yang tahu semua resipi, tetapi andalah yang memasak dan menentukan apa yang hendak dibuat serta caranya.

Lovable sesuai jika:

• Anda belum pernah membuka terminal dan tidak mahu mula menggunakannya.
• Anda memerlukan prototaip idea dalam satu malam untuk ditunjukkan kepada rakan kongsi atau pelanggan.
• Anda sedang membina produk biasa: halaman pendaratan, CRM, marketplace, papan pemuka atau borang pertanyaan—sesuatu yang telah dibina oleh Lovable beratus-ratus kali.
• Anda bersedia menggunakan tindanan React + Supabase dan tidak memerlukan Python, Go atau aplikasi mudah alih.
• Anda tidak keberatan membayar $25–100 sebulan dan tidak bimbang kod berada dengan vendor.

Claude Code sesuai jika:

• Anda pernah bekerja dengan folder projek dan tahu maksud git serta .env.
• Anda memerlukan kawalan terhadap setiap fail dan mahu memilih tindanan sendiri.
• Projek anda lebih rumit daripada kebiasaan: bot Telegram, skrip pemprosesan data, aplikasi mudah alih atau integrasi dengan API bukan standard.
• Anda mahu kod berada dalam repositori anda, bukan dengan vendor.
• Anda bersedia mempelajari CLAUDE.md dan kejuruteraan konteks untuk mendapatkan hasil yang konsisten.

Mahu memilih gabungan yang sesuai untuk tugas anda tanpa meneka? Gabungan yang berkesan mempunyai tiga unsur: klon AI + Otak Kedua + Kejuruteraan Konteks. Gabungan ini menjadikan apa-apa alat—Lovable, Claude Code atau kedua-duanya—sebagai saluran kerja yang boleh dipercayai.

Berapakah kos projek pertama dengan setiap alat?#

Lovable: pelan dan kredit

Harga rasmi Lovable setakat Mei 2026:

Satu kredit bersamaan lebih kurang satu prompt. Perubahan gaya yang kecil menggunakan 0.5 kredit; ciri baharu dengan pengesahan menggunakan 1.5+ kredit. Perangkap utama: kitaran pembetulan pepijat (apabila AI membetulkan satu perkara tetapi merosakkan perkara lain) boleh menggunakan 60–150 kredit tambahan selain kredit untuk binaan awal—berdasarkan aduan sebenar di forum pengguna pada 2026. Membeli tambahan 50 kredit pada pelan Pro berharga $15.

⚠️ Kos berasingan yang lain ialah Lovable Cloud (hos terurus daripada platform). Ia tidak termasuk dalam langganan: ruang kerja mendapat hos percuma bernilai $25/bulan + penggunaan AI percuma bernilai $1/bulan. Selepas itu, anda membayar mengikut penggunaan (bacaan/tulisan pangkalan data, edge functions, storan).

Claude Code: pelan dan token

Harga rasmi Claude untuk 2026:

Token API juga tersedia untuk mereka yang membina integrasi sendiri: Opus 4.8 berharga $5 bagi setiap juta token input dan $25 bagi setiap juta token output. Untuk butiran lanjut, lihat panduan Opus 4.8 untuk Claude Code.

Kos sebenar projek pertama dan projek serius

Mari gunakan tugasan biasa: “Bina laman web tempahan pelanggan dengan pangkalan data, borang tempahan dan panel pentadbir.”

Lovable: Dengan pelan Pro ($25), kira-kira 30–40 kredit diperlukan untuk membina dan memperhalusnya. Anda boleh menyiapkannya dalam satu bulan langganan. Setiap produk baharu atau reka bentuk semula besar selepas itu memerlukan satu lagi bulan langganan, selain kemungkinan kos Lovable Cloud.

Claude Code: Dengan pelan Pro ($20), tugasan yang sama mengambil masa 3–4 jam kerja dan kira-kira sepuluh sesi AI. Had bulanan mencukupi untuk 2–3 projek sebegini serentak, serta kerja rutin: menyunting teks laman web, pembaikan kecil dan skrip automasi.

Dalam jangka panjang, perbezaannya lebih ketara. Seorang pembangun menggunakan 10 bilion token melalui Claude Code dalam masa 8 bulan: kosnya lebih daripada $15,000 melalui API, tetapi kira-kira $800 dengan pelan Max. Jika anda membina satu produk sekali sahaja, kos Lovable dan Claude Code lebih kurang sama. Jika anda mempunyai 5–10 projek dan kerap mengusahakannya, Claude Code 5–6 kali lebih murah.

Apakah kod yang anda dapat? Di sebalik tabir#

Dengan Lovable, jawapan kepada soalan “ini ditulis menggunakan apa?” sudah ditentukan. Setiap aplikasi menggunakan:

• Frontend: React, Vite, Tailwind CSS dan pustaka komponen siap guna shadcn/ui.
• Backend: Supabase—PostgreSQL untuk pangkalan data, Supabase Auth untuk log masuk, Supabase Storage untuk fail dan Edge Functions pada Deno untuk logik sebelah pelayan.
• Masa nyata: Supabase Realtime melalui WebSocket untuk sembang dan kemas kini.
• Pembayaran: integrasi Stripe terbina dalam.
• Hos: *.lovable.app pada pelan percuma, domain anda sendiri pada pelan berbayar.

Itu satu kelebihan: satu tindanan terbukti yang memenuhi 80% tugas bagi mereka yang tidak tahu pengaturcaraan. Ia juga satu batasan: jika projek anda ialah bot Telegram, pemprosesan dokumen PDF, skrip pengikisan data atau aplikasi mudah alih, Lovable bukan pilihan.

Dengan Claude Code, anda memilih tindanan. Projek contoh menggunakan:

• Next.js + TypeScript + PostgreSQL untuk platform pencipta.
• Python + FastAPI untuk salah satu backend produk pelanggan.
• Bot Telegram dalam TypeScript dengan pustaka grammY.
• Skrip pemprosesan data dalam Node.js.

Claude Code yang sama berfungsi dengan apa-apa folder dan tindanan: ia membaca kandungan projek, memahami strukturnya dan menggunakan bahasa yang sesuai. Ini memberikan kebebasan, tetapi anda perlu memutuskan tindanan yang hendak digunakan.

Apa yang berlaku jika produk mendapat sambutan: membangunkan projek#

Ini senario yang jarang diperiksa orang pada awalnya, tetapi inilah perbezaan penentu antara kedua-dua alat.

Bayangkan anda membina penjejak tugasan dalam Lovable. Ia mendapat sambutan. Pelanggan menulis: “Tambah integrasi dengan CRM kami,” “Kami perlukan eksport Excel dengan struktur tertentu,” “Bina aplikasi mudah alih.” Apa yang berlaku?

• Anda membuat perubahan mudah dengan prompt dan menggunakan kredit.
• Perubahan kompleks sering menemui had seni bina: Lovable tidak mengenali CRM anda, eksport itu bukan standard dan aplikasi mudah alih memerlukan tindanan yang berbeza.
• Lovable menawarkan eksport kod dan kerja dalam editor—tetapi itu bukan lagi “vibe coding.” Itu pembangunan biasa yang memerlukan pemahaman tentang React, TypeScript dan Supabase.

Tiada gangguan sebegitu dalam Claude Code. Anda menambah integrasi CRM—Claude Code membaca dokumentasi CRM, menulis klien, mengujinya dan membuat commit. Anda memerlukan aplikasi mudah alih—buka folder baharu, berikan tugasan “Bina aplikasi iOS dalam Swift menggunakan API yang sama,” dan dapatkan hasilnya. Konteks tidak hilang kerana repositori itu milik anda.

Ini tidak bermakna Lovable tidak bagus—ia sangat baik untuk menyelesaikan tugasan pertama. Ia ialah titik permulaan untuk produk, bukan tempat produk itu kekal dalam jangka panjang.

Apabila Claude Code dan Lovable membuat kesilapan: yang mana lebih mudah dibetulkan?#

AI sentiasa membuat kesilapan. Persoalan utama ialah berapa banyak usaha yang diperlukan untuk membetulkannya.

Apabila sesuatu rosak dalam Lovable, anda mempunyai 3 pilihan:

1. Terus memberikan prompt: “Betulkan ini, butang tidak berfungsi.” Selalunya berhasil, tetapi kadangkala tidak.
2. Buat undur menggunakan sejarah Lovable. Undur itu bergerak kembali sebanyak N langkah sekali gus—ia tidak tepat.
3. Beralih ke Dev Mode (hanya pada pelan berbayar) dan sunting kod dengan tangan.

Apabila berlaku pepijat dalam Claude Code:

1. Anda melihat ralat dalam terminal atau pelayar lalu memberitahu Claude, “Ini ralatnya, cari puncanya.”
2. Jika anda menemui jalan buntu, arahan /rewind mengembalikan keadaan kepada titik terakhir yang berfungsi (panduan untuk mengembalikan perubahan).
3. Anda boleh membuka fail sendiri dan membetulkan satu baris—kod itu milik anda.

Kelebihan Claude Code di sini ialah anda boleh melihat apa yang berubah dan di mana ralat itu berada. Lovable berfungsi seperti “kotak hitam”—anda mendapat hasil, tetapi tidak dapat melihat puncanya. Ini melegakan pemula (“saya tak perlu memikirkannya”), tetapi menjadi masalah apabila produk lebih kompleks daripada halaman pendaratan biasa.

4 senario apabila Lovable mengatasi Claude Code#

Senario 1: Halaman pendaratan dengan borang dan pangkalan data. “Saya mahu halaman yang membolehkan orang memberikan e-mel mereka, kemudian saya boleh melihat dalam panel pentadbir siapa yang telah memberikannya.” Dalam Lovable, ini mengambil masa 10 minit termasuk reka bentuk, domain dan SSL. Dalam Claude Code, pembinaan rangka mengambil masa 1–2 jam, ditambah satu jam lagi untuk menerbitkannya. Untuk tugasan sekali sahaja, Lovable menang dengan margin besar.

Senario 2: Prototaip demo untuk pelabur atau rakan kongsi. Anda perlu menunjukkan cara produk itu “akan berfungsi” dalam mesyuarat dalam masa 3 hari. Lovable membina prototaip berfungsi yang menarik dari segi visual dalam satu malam. Anda boleh menunjukkannya dan berkata, “Logik ini akan diletakkan di sini, dan logik itu di sana.” Rakan kongsi anda boleh mengklik butang dan melihat sesuatu yang nyata, bukan PowerPoint.

Senario 3: Produk biasa berdasarkan templat yang dikenali. CRM ringkas untuk agensi, portal pelanggan dengan pengesahan, papan pemuka dengan carta. Lovable sudah membina aplikasi ini beratus-ratus kali—model itu sudah mengenali coraknya. Anda lebih berpeluang mendapat hasil yang berfungsi pada percubaan pertama.

Senario 4: Apabila pemasangan menjadi penghalang. Jika seseorang benar-benar tidak pernah membuka terminal dan belum bersedia untuk memahami Node.js, git dan VS Code, Lovable boleh memberikan hasil yang tidak dapat diberikan Claude Code kepadanya. Prototaip yang berfungsi lebih baik daripada projek yang tidak pernah dimulakan.

4 senario apabila Claude Code mengatasi Lovable#

Senario 1: Apa-apa projek bukan web. Bot Telegram yang membalas pelanggan dan menjejaki pertanyaan. Skrip yang mengikis laman web pesaing setiap jam dan menghantar ringkasan ke Slack. Penghurai PDF yang mengekstrak data untuk perakaunan. Anda tidak boleh membina semua ini dalam Lovable—alat ini hanya untuk web. Dalam Claude Code, semua ini ialah projek biasa untuk satu malam.

Senario 2: Produk jangka panjang yang serius. Jika anda sedang membina syarikat berasaskan produk, kod perlu berada dalam repositori GitHub anda, dengan infrastruktur sendiri dan kawalan terhadap segala-galanya. Lovable sentiasa mengikat anda kepada platform: anda boleh mengeksport kod, tetapi lebih sukar untuk terus membangunkannya tanpa Lovable (tindakannya tegar dan keputusan seni bina dibuat untuk anda). Dengan Claude Code, kod itu milik anda sejak awal.

Senario 3: Seni bina atau tindanan bukan standard. Anda mahu menggunakan Bun dan bukannya Node.js. Anda mahukan Postgres + Redis + ClickHouse. Anda mahukan Python untuk komponen AI dan Go untuk perkhidmatan mikro. Anda mahukan workers, baris gilir dan WebSocket di luar Supabase. Dalam Lovable, semua ini mustahil atau memerlukan “jalan keluar” melalui suntingan kod secara manual—yang menghapuskan kelebihan pembina itu.

Senario 4: Apabila anda memerlukan otak kedua untuk projek. Produk yang serius melibatkan lebih daripada kod; ia juga mempunyai konteks: model perniagaan, khalayak, kekangan undang-undang dan matlamat. Konteks ini berada dalam folder business/ bersama kod dan Claude Code membacanya dengan setiap permintaan (panduan tentang otak kedua dalam Claude Code). Lovable berfungsi tanpa lapisan ini—anda mendapat produk yang berfungsi dari segi teknikal tanpa memahami “sebabnya.”

Gabungan hibrid: Lovable → Claude Code untuk satu projek#

Corak ini mudah sahaja: setiap alat bagus dalam tugasnya sendiri, jadi anda tidak perlu memilih “satu atau yang satu lagi.”

Cara ia berfungsi:

1. Peringkat idea. Satu malam dengan Lovable. Huraikan apa yang anda mahukan dan dapatkan prototaip berfungsi dengan pangkalan data, pengesahan dan beberapa halaman. Itu memadai untuk ditunjukkan kepada rakan kongsi atau menjalankan 5 temu bual dengan bakal pelanggan.

2. Peringkat pengesahan. Terus bekerja dalam Lovable sementara produk masih ringkas. Luangkan 1–2 minggu memberikan prompt, membuat perubahan kecil dan menambah medan baharu pada pangkalan data.

3. Peringkat serah tugas. Apabila anda mencapai had Lovable (anda memerlukan bot Telegram di sampingnya, logik yang rumit atau bahasa lain), eksport kod melalui Dev Mode (memerlukan pelan Pro) dan klon repositori itu secara setempat.

4. Peringkat pembangunan. Buka projek dalam VS Code dan jalankan Claude Code dari folder yang sama. Kini Claude dapat melihat kod yang dibina oleh Lovable dan meneruskan pembangunannya. Seni bina kekal sama (React + Supabase), tetapi kawalan beralih kepada anda.

Kelemahannya: anda membayar Lovable untuk bulan pertama (atau lebih lama), kemudian tetap beralih kepada Claude Code. Itu tambahan $25–50. Sebagai balasan, anda menjimatkan minggu pertama pembangunan. Bagi kebanyakan idea yang tidak berjaya, $25 itu dibelanjakan dengan baik: anda cepat mengetahui perkara yang tidak berhasil tanpa melaburkan dua minggu dalam rangka yang akhirnya akan dibuang.

Dia membina semula laman web utamanya dengan 12 integrasi (Stripe, Customer.io, Meta Pixel) dalam satu hari menggunakan Lovable, kemudian membawa ciri challenge prompts ke persekitaran produksi dalam Claude Code dalam masa 2 hari dan bukannya 2 minggu seperti yang dijangkakan.

5 masalah Lovable yang tidak disebut orang#

Masalah 1: Pelan percuma hanya cukup untuk 1–2 malam. 5 kredit sehari cukup untuk rangka aplikasi dan beberapa suntingan. Selepas itu, anda sama ada menunggu sehari atau membayar $25.

Masalah 2: Akses kod hanya tersedia pada Pro+. Pelan percuma tidak membolehkan anda memuat turun kod, membukanya dalam editor atau menyerahkannya kepada pembangun. Jika anda memutuskan untuk keluar, anda perlu menaik taraf kepada pelan berbayar atau bermula semula.

Masalah 3: Terlalu terikat dengan Supabase. Jika kemudian anda mahu menjalankan PostgreSQL pada pelayan sendiri, menggantikan Supabase Auth dengan pengesahan sendiri atau menyambungkan apa-apa backend bukan web, prosesnya menyusahkan. Tindanan itu sudah terbina dalam asasnya.

Masalah 4: Bahasa antara muka. Secara lalai, Lovable menjana antara muka aplikasi dalam bahasa Inggeris. Nyatakan bahasa pilihan anda dengan jelas dalam prompt, contohnya, “buat dalam bahasa pilihan saya.” Sesetengah teks mungkin kekal dalam bahasa Inggeris, khususnya ralat sistem dan borang pengesahan input. Anda boleh membetulkannya dengan prompt berasingan.

Masalah 5: Keselamatan Supabase secara lalai mempunyai kelemahan. Inilah perkara paling penting yang tidak disebut orang pada permulaan. Penyelidik memeriksa 1,645 aplikasi dalam pameran rasmi Lovable—170 daripadanya (10.3%) mempunyai isu Row Level Security yang kritikal dalam Supabase. Mana-mana pengguna yang log masuk boleh membaca, mengubah dan memadam data orang lain. Dalam aplikasi sebenar, penyelidik mengakses alamat pelanggan, jumlah hutang dan kunci Stripe yang masih aktif (CVE-2025-48757). Puncanya: Lovable mencipta jadual dalam Supabase tetapi tidak mengaktifkan dasar RLS secara lalai. Penyelesaiannya: selepas pelancaran pertama, aktifkan RLS secara manual pada setiap jadual dan semak tetapan berdasarkan dokumentasi Supabase. Jika anda membina produk dengan data pengguna sebenar, jangan tangguhkannya—buat “sebaik sahaja binaan pertama selesai.”

5 masalah Claude Code yang membuat pemula berputus asa#

Masalah 1: Pemasangan ialah halangan pertama. Untuk bermula, anda perlu memasang Node.js, npm, git, VS Code dan Claude Code sendiri. Di Windows, anda perlu memahami WSL. Di Mac, prosesnya lebih mudah tetapi anda tetap perlu membuka terminal. Jika anda belum pernah melakukan perkara ini, 30 minit pertama akan digunakan untuk mencari tahu “cara menjalankannya.”

Masalah 2: Anda boleh menghabiskan had penggunaan dalam sehari tanpa konteks. Pada pelan Pro $20, had penggunaan berdasarkan mesej dan token. Jika anda menghantar 50 fail projek kepada Claude setiap kali, anda akan mencapai had dalam 2–3 jam. Penyelesaiannya ialah kejuruteraan konteks: berikan hanya perkara yang diperlukan, gunakan /clear dan /compact, serta selenggara CLAUDE.md (panduan tentang had penggunaan).

Masalah 3: Halusinasi tanpa konteks. Claude Code memang pintar, tetapi jika tidak memahami projek anda, ia mungkin mereka-reka kaedah API, medan pangkalan data atau pustaka. Tanpa CLAUDE.md yang mengandungi peraturan dan folder business/ sebagai otak kedua, hasilnya tidak menentu. Dengan kedua-duanya, anda mendapat saluran kerja yang boleh dipercayai (panduan CLAUDE.md).

Masalah 4: Sekatan akses dan pemilikan korporat. Pada September 2025, Anthropic menyekat syarikat yang lebih daripada 50% dikawal oleh entiti dari China, Iran dan Korea Utara. Syarat akses bergantung pada penyedia dan struktur pemilikan; semak syaratnya sebelum memilih alat.

Masalah 5: Tiada editor visual. Semua interaksi dilakukan melalui teks. Jika anda perlu mengalihkan butang 10 piksel ke kanan, anda tidak boleh menyeretnya—anda perlu menerangkannya dengan kata-kata. Untuk tugas reka bentuk, ini kurang mudah berbanding pembina visual, termasuk Lovable.

Cara memilih dalam 5 minit: jadual keputusan#

Jawab 5 soalan untuk mendapatkan cadangan:

Jika anda menandakan ✅ untuk Lovable pada dua baris pertama dan ⚪/❌ pada baris selebihnya, pilih Lovable. Jika anda menandakan ✅ untuk Claude Code pada baris 3–5, pilih Claude Code. Jika anda menandakan ✅ pada kedua-dua lajur, gunakan Lovable untuk 1–2 minggu pertama, kemudian beralih kepada Claude Code (lihat bahagian gabungan hibrid di atas).

Satu perkara lagi: apa-apa alat yang anda pilih, kesesakan bukanlah AI itu sendiri. Yang penting ialah cara anda bekerja dengannya. Gabungan tiga tonggak (klon AI + Otak Kedua + Kejuruteraan Konteks) menghasilkan keputusan yang konsisten dengan apa-apa alat. Tanpanya, AI berhalusinasi; dengannya, AI berfungsi seperti mesin yang boleh dipercayai.

Panduan lengkap vibe coding dalam satu malam: klon AI + Otak Kedua + Kejuruteraan Konteks.

Kenali Ailoot.