# Lovable vai Claude Code vuonna 2026: kumman valitset ensimmäiseen projektiisi?

> Lovable ja Claude Code: hinnat, kenelle kumpikin sopii ja mitä sudenkuoppia on syytä varoa. Vertailutaulukko ja työnkulku, jossa Lovable rakentaa rungon ja Claude Code viimeistelee logiikan.

Source: https://ailoot.ai/blog/fi/lovable-vs-claude-code-2026/
Canonical: https://ailoot.ai/blog/fi/lovable-vs-claude-code-2026/
Language: fi
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-169
Revision: sha256-a68161fad51873710a0b9eabeb6ff7499e56bbe59a30f76e71deba6694ddc948


<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Lovable on selaimessa toimiva rakentaja: kirjoita ”Haluan tehtävienhallinnan, jossa on tunnistautuminen”, niin saat minuutissa toimivan sivuston, joka on rakennettu React + Supabase -tekniikoilla. Claude Code on paikallinen avustaja päätteessä. Se toimii millä tahansa teknologiapinolla ja kaikenlaisen koodin kanssa, mutta vaatii asennuksen ja perustiedot tiedostoista. Lovable sopii paremmin ensimmäiseen prototyyppiin, jonka voit rakentaa yhden illan aikana; Claude Code on tarkoitettu vakavaan kehitystyöhön. Käytännössä kokeneet vibe-koodaajat käyttävät molempia: Lovable rakentaa rungon, ja Claude Code viimeistelee logiikan.

</div>

Tietoa Ailootin kanssa työskentelystä on [dokumentaatiossa](https://ailoot.ai/docs/).

## Mitä Lovable ja Claude Code ovat?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Lovable on selaimessa toimiva verkkosovellus: kuvaile tuotetta tekstillä, niin tekoäly rakentaa toimivan verkkosivuston, jossa on tietokanta ja tunnistautuminen. Claude Code on pääteohjelma, joka käsittelee projektikansiotasi, lukee ja kirjoittaa tiedostoja sekä suorittaa komentoja. Ensimmäinen on valmis ”kaikki yhdessä” -työkalu; toinen on yleiskäyttöinen työkalu.

</div>

[Lovable](https://lovable.dev) on selaimessa toimiva rakentaja. Anthropic kertoo, että arvioituaan kaupallisia ja avoimen lähdekoodin malleja Lovable valitsi Clauden ensisijaiseksi mallikseen ([Anthropicin asiakastarina: Lovable](https://claude.com/customers/lovable)). Siksi asetelma ”Lovable vai Claude” yksinkertaistaa asiaa liikaa. Käytännössä ne ovat **kerroksia**: Lovable on kätevä käyttöliittymä saman Clauden ympärillä, jota käytät suoraan Claude Coden kautta.

Näin tapahtuu, kun siirryt osoitteeseen lovable.dev:

1.  Rekisteröidy Googlella tai GitHubilla.
2.  Kirjoita kehote: ”Rakenna minulle kiinteistönvälitystoimistolle CRM, jossa on tunnistautuminen ja asiakastietokanta.”
3.  Näet 30–60 sekunnissa toimivan sivuston ilmaisella `*.lovable.app`-verkkotunnuksella. Siinä on tietokanta, kirjautumislomake ja toimivat sivut.
4.  Viimeistele sitä kehotteilla: ”Lisää suodatin kaupan tilan mukaan”, ”Lisää tumma teema”, ”Lisää Stripe tilausmaksuja varten”.

Taustalla Lovable rakentaa React-sovelluksen, jossa käytetään Viteä, Tailwind CSS -tyylejä ja shadcn/ui-komponentteja. Backendinä toimii Supabase: PostgreSQL tietojen tallennukseen, Supabase Auth kirjautumiseen ja Edge Functions palvelinpuolen logiikkaan. Uudet projektit käyttävät 13. toukokuuta 2026 lähtien TanStack Startia ja palvelinpuolen renderöintiä.

[Claude Code](https://claude.com/claude-code) on Anthropicin ohjelma, jonka asennat Mac-, Windows- tai Linux-tietokoneellesi. Käynnistä se komennolla `claude` päätteessä projektikansiosi sisällä. Sen jälkeen keskustelet sen kanssa tekstillä, ja se lukee tiedostoja, kirjoittaa koodia, suorittaa komentoja ja korjaa virheitä. Opus 4.7 on ollut ensisijainen malli 16. huhtikuuta 2026 lähtien; Opus 4.8 on ollut saatavilla 28. toukokuuta 2026 lähtien Dynamic Workflows -ominaisuudella (jopa 1 000 rinnakkaista aliagenttia) ([Anthropic – Claude Opus 4.7](https://www.anthropic.com/news/claude-opus-4-7)).

Tärkein ero yhdessä lauseessa: **Lovable on verkkosivusto, joka rakentaa verkkosivustoja puolestasi. Claude Code on päätteessäsi toimiva kehittäjäkollega, joka noudattaa ohjeitasi.**









Nämä kaksi näkemystä kuvaavat itse asiassa saman polun kahta vaihetta. Lovable on työkalu ”nollasta yhteen” etenemiseen silloin, kun et vielä tunne alaa. Claude Code on työkalu kasvamiseen: se sopii vaiheeseen, jossa jo ymmärrät, miten sovelluksia rakennetaan, ja haluat hallita tekemistäsi.

## Kenen kannattaa käyttää Lovablea ja kenen Claude Codea?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Lovable sopii sinulle, jos haluat nähdä toimivan prototyypin yhden illan aikana etkä ole valmis selvittämään, miten työkalut asennetaan. Claude Code sopii sinulle, jos ymmärrät jo, mikä projektikansio ja git ovat, ja haluat hallita koodia täysin. Kumpikaan ei ole ”parempi” – kyse on siitä, ”milloin kannattaa käyttää kumpaakin”.

</div>

Näen valinnan kuin valitsisi ravintola-aterian ja kotikeittiön välillä. Lovable on ravintola: istut alas, teet tilauksen, ja 20 minuuttia myöhemmin ruoka on edessäsi. Claude Code on keittiö: käytössäsi on työkalut ja ainekset sekä avustaja, joka tuntee kaikki reseptit, mutta sinä valmistat ruoan ja päätät, mitä teet ja miten.

**Lovable sopii hyvin, jos:**

- Et ole koskaan avannut päätettä etkä halua aloittaa sitä nyt.
- Tarvitset ideastasi prototyypin yhden illan aikana, jotta voit näyttää sen kumppanille tai asiakkaalle.
- Rakennat tavanomaista tuotetta: laskeutumissivua, CRM:ää, markkinapaikkaa, hallintapaneelia tai yhteydenottolomaketta – jotakin, jota Lovable rakentaa satoja kertoja.
- Olet valmis käyttämään React + Supabase -teknologiapinoa etkä tarvitse Pythonia, Goa tai mobiilisovellusta.
- \$25–100 kuukaudessa maksava tilaus ei haittaa sinua etkä ole huolissasi siitä, että koodi on palveluntarjoajan hallussa.

**Claude Code sopii hyvin, jos:**

- Olet jo työskennellyt projektikansioiden kanssa ja tiedät, mitä git ja `.env` ovat.
- Haluat hallita jokaista tiedostoa ja valita teknologiapinon itse.
- Projektisi on tavallista monimutkaisempi: esimerkiksi Telegram-botti, tietojenkäsittelyskripti, mobiilisovellus tai integraatio epätyypilliseen APIin.
- Haluat koodin olevan omassa repositoriossasi, ei palveluntarjoajalla.
- Olet valmis perehtymään CLAUDE.md-tiedostoon ja kontekstisuunnitteluun, jotta saat johdonmukaisia tuloksia.



Haluatko valita tehtävääsi sopivan yhdistelmän arvailematta? Toimivassa yhdistelmässä on kolme osaa: **AI-klooni + Second Brain + Context Engineering**. Niiden avulla mistä tahansa työkalusta – Lovablesta, Claude Codesta tai molemmista – tulee luotettava työnkulku.

## Paljonko ensimmäinen projekti maksaa kummallakin työkalulla?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Voit kokeilla molempia ilmaiseksi. Lovable antaa 5 krediittiä päivässä ja julkiset projektit; Claude Code tarjoaa ilmaisen chatin ilman CLI:tä. Varsinainen ensimmäinen projekti maksaa Lovablella vähintään \$25 kuukaudessa ja Claude Codella vähintään \$20. Projektin kasvaessa Lovable tulee kuitenkin 4–5 kertaa Claude Codea kalliimmaksi viestirajojen vuoksi.

</div>

### Lovable: tilaukset ja krediitit

[Lovablen virallinen hinnoittelu](https://lovable.dev/pricing) toukokuussa 2026:

| Tilaus | Hinta | Krediittejä kuukaudessa | Mitä sisältyy |
|----|----|----|----|
| Free | \$0 | 5 päivässä, enintään 30 kuukaudessa | Vain julkiset projektit `*.lovable.app`-osoitteessa |
| Pro | \$25 (\$21 vuosilaskutuksella) | 100 + 5/päivä (enintään 150) | Yksityiset projektit, oma verkkotunnus, GitHub-synkronointi |
| Business | \$50 (\$42 vuosilaskutuksella) | 100 + 5/päivä | Tiimit, SSO, edistyneet käyttöoikeudet |
| Enterprise | Sopimuksen mukaan | Mukautettu | Yritystason ominaisuudet |

Yksi krediitti vastaa suunnilleen yhtä kehotetta. Kevyt tyylimuutos maksaa 0,5 krediittiä; uusi ominaisuus, jossa on tunnistautuminen, maksaa vähintään 1,5 krediittiä. Suurin sudenkuoppa: virheenkorjauskierros (jossa tekoäly korjaa yhden asian ja rikkoo toisen) voi kuluttaa **60–150 lisäkrediittiä** alkuperäisen rakentamisen lisäksi – vuonna 2026 käyttäjät ovat raportoineet tästä. Pro-tilauksella 50 lisäkrediittiä maksaa \$15.

⚠️ Erillinen kulu on **Lovable Cloud** (alustan hallinnoima hosting). Se ei sisälly tilaukseen: työtila saa \$25 kuukaudessa ilmaista hostingia + \$1 kuukaudessa ilmaista tekoälyn käyttöä. Sen jälkeen maksat käytön mukaan (tietokannan luku- ja kirjoitusoperaatiot, edge functions, tallennustila).

### Claude Code: tilaukset ja tokenit

[Claude-palvelun virallinen hinnoittelu](https://claude.com/pricing) vuodelle 2026:

| Tilaus | Hinta | Kenelle se sopii |
|----|----|----|
| Free | 0 | Vain chat claude.ai-sivustolla; Claude Code ei sisälly tilaukseen |
| Pro | \$20 / kuukausi | Useita istuntoja päivässä, tyypilliselle vibe-koodaajalle |
| Max 5x | \$100 / kuukausi | Koko päivän työskentelyyn Claude Codessa |
| Max 20x | \$200 / kuukausi | Itsenäisten agenttien ajamiseen pitkissä tehtävissä |
| Team Standard | \$25 / käyttäjä / kuukausi | Tiimille |
| Team Premium | \$125 / käyttäjä / kuukausi | Tiimille, joka tarvitsee suuremmat rajat |

Tarjolla on myös API-tokeneita omia integraatioita rakentaville: Opus 4.8 maksaa \$5 miljoonalta syötetokenilta ja \$25 miljoonalta tulostetokenilta. Lisätietoja on [Claude Coden Opus 4.8 -oppaassa](https://ailoot.ai/blog/fi/opus-4-8-claude-code-features/).

### Ensimmäisen ja vaativamman projektin todelliset kustannukset

Otetaan tyypillinen tehtävä: ”Rakenna asiakasvarauksille verkkosivusto, jossa on tietokanta, varauslomake ja hallintapaneeli.”

**Lovable:** Pro-tilauksella (\$25) rakentamiseen ja viimeistelyyn menee noin 30–40 krediittiä. Se mahtuu yhden kuukauden tilaukseen. Jokainen uusi tuote tai suuri uudistus sen jälkeen tarkoittaa uutta tilauskuukautta ja mahdollisia Lovable Cloud -kuluja.

**Claude Code:** Pro-tilauksella (\$20) samaan tehtävään kuluu 3–4 tuntia ja noin kymmenen tekoälyistuntoa. Kuukausirajat riittävät 2–3 samanlaiseen projektiin rinnakkain sekä tavallisiin töihin: verkkosivuston tekstien muokkaamiseen, pieniin korjauksiin ja automaatioskripteihin.

Pitkällä aikavälillä ero on vielä suurempi. Yksi kehittäjä ajoi 10 miljardia tokenia Claude Coden läpi 8 kuukaudessa: API:n kautta se olisi maksanut yli \$15 000, mutta Max-tilauksella noin **\$800**. Jos teet yhden tuotteen kerralla valmiiksi, Lovable ja Claude Code maksavat suunnilleen saman verran. Jos sinulla on 5–10 projektia, joiden parissa työskentelet säännöllisesti, Claude Code on **5–6 kertaa halvempi**.

## Millaista koodia saat? Pintaa syvemmältä

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Lovable rakentaa aina saman teknologiapinon: React + Vite + Tailwind + Supabase. Se on kätevää, mutta ei sovi, jos projektisi ei taivu siihen. Claude Code kirjoittaa pyytämälläsi kielellä: Python, Go, Rust, TypeScript, Swift. Voit valita teknologiapinon vapaasti, mutta vastaat myös täysin valinnastasi.

</div>

Lovablen kanssa kysymykseen ”millä tämä on kirjoitettu?” on jo vastattu puolestasi. Kaikissa sovelluksissa käytetään seuraavia:

- Frontend: React, Vite, Tailwind CSS ja shadcn/ui-kirjaston valmiit komponentit.
- Backend: Supabase – PostgreSQL tietokantaan, Supabase Auth kirjautumiseen, Supabase Storage tiedostoihin ja Deno-pohjaiset Edge Functions palvelinpuolen logiikkaan.
- Realtime: Supabase Realtime WebSocketin kautta keskusteluja ja päivityksiä varten.
- Maksut: sisäänrakennettu Stripe-integraatio.
- Hosting: `*.lovable.app` ilmaisella tilauksella, oma verkkotunnus maksullisella tilauksella.

Tämä on vahvuus: yksi hyväksi havaittu teknologiapino kattaa 80 % ohjelmoimattoman käyttäjän tehtävistä. Se on myös rajoite: jos projektisi on Telegram-botti, PDF-asiakirjojen käsittelyä, tiedonkeruuta varten tehtävä skripti tai mobiilisovellus, Lovable ei sovi siihen.

Claude Coden kanssa valitset teknologiapinon itse. Esimerkkiprojekteissa käytettiin seuraavia:

- Next.js + TypeScript + PostgreSQL sisällöntuottajien alustaan.
- Python + FastAPI asiakastuotteen yhden backendin toteutukseen.
- Telegram-botit TypeScriptillä käyttäen grammY-kirjastoa.
- Tietojenkäsittelyskriptit Node.js:llä.

Sama Claude Code toimii minkä tahansa kansion ja teknologiapinon kanssa: se lukee projektin sisällön, ymmärtää sen rakenteen ja käyttää sopivaa ohjelmointikieltä. Se antaa sinulle vapautta, mutta edellyttää, että päätät käytettävän teknologiapinon.

## Mitä tapahtuu, kun tuote menestyy: projektin kehittäminen

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Ensimmäisen version jälkeen voit joko lisätä Lovableen uusia kehotteita (ja törmätä sen rajoihin ja arkkitehtuuriin) tai ”viedä” koodin omiin tiedostoihisi ja siirtyä koodieditoriin – jolloin rakentajan koko etu katoaa. Claude Coden kanssa lisäät vain uusia tehtäviä samaan päätteeseen. Koodi on aina sinun, ja säilytät hallinnan.

</div>

Tätä skenaariota harva tarkastelee alussa, vaikka siinä piilee työkalujen ratkaiseva ero.

Oletetaan, että rakensit Lovablella tehtävienhallinnan. Se menestyi. Asiakkaat kirjoittavat: ”Lisää integraatio meidän CRM:äämme”, ”Tarvitsemme Excel-viennin tietyssä muodossa”, ”Rakenna mobiilisovellus”. Mitä sitten tapahtuu?

- Teet yksinkertaisia muutoksia kehotteilla ja käytät krediittejä.
- Monimutkaiset muutokset törmäävät usein arkkitehtuurin rajoihin: Lovable ei tunne CRM-järjestelmääsi, vientimuoto on epätyypillinen ja mobiilisovellus vaatii erilaisen teknologiapinon.
- Lovable tarjoaa koodin viennin ja muokkaamisen editorissa, mutta silloin kyse ei enää ole ”vibe-koodauksesta”. Se on tavallista kehitystyötä, jossa sinun täytyy ymmärtää Reactia, TypeScriptiä ja Supabasea.

Claude Codessa vastaavaa katkosta ei tule. Lisäät CRM-integraation – Claude Code lukee CRM-dokumentaation, kirjoittaa asiakasohjelman, testaa sen ja tekee commitin. Jos tarvitset mobiilisovelluksen, avaat uuden kansion, annat tehtäväksi ”Rakenna iOS-sovellus Swiftillä käyttäen samaa APIa” ja saat tuloksen. Konteksti ei katoa, koska omistat repositorion.

Tämä ei tarkoita, että Lovable olisi huono – se ratkaisee ensimmäisen tehtävän erinomaisesti. Se tarkoittaa, että Lovable on tuotteen aloituspiste, ei sen pitkäaikainen koti.

## Kun Claude Code ja Lovable tekevät virheitä: kumpaa on helpompi korjata?

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Molemmat tekevät virheitä. Lovablen virheet ovat ”syvemmällä” – usein arkkitehtuurissa tai Supabasen asetuksissa – ja ne voi korjata vain uudella kehotteella tai muokkaamalla koodia käsin. Claude Coden virheet ovat lähempänä pintaa, tiedostoissa, ja ne voi korjata tarkasti komennolla `/rewind` tai gitillä. Kokenut vibe-koodaaja pärjää todennäköisemmin Claude Codella, aloittelija Lovablella.

</div>

Tekoäly tekee aina virheitä. Tärkeintä on, kuinka paljon vaivaa niiden korjaaminen vaatii.

Kun Lovablessa jokin menee rikki, sinulla on 3 vaihtoehtoa:

1.  Jatka kehottamista: ”Korjaa tämä, painike ei toimi.” Se usein onnistuu, mutta joskus ei.
2.  Palauta tilanne Lovablen historian avulla. Palautus hyppää kerralla N askelta taaksepäin, joten se ei ole tarkka.
3.  Siirry Dev Modeen (vain maksullisilla tilauksilla) ja muokkaa koodia käsin.

Kun Claude Codessa on virhe:

1.  Näet virheen päätteessä tai selaimessa ja sanot Claudelle: ”Tässä on virhe, selvitä mistä se johtuu.”
2.  Jos päädyt umpikujaan, komento `/rewind` palauttaa viimeiseen toimivaan vaiheeseen ([muutosten palautusopas](https://ailoot.ai/blog/fi/claude-code-undo-changes/)).
3.  Voit avata tiedoston itse ja korjata rivin – koodi on sinun.

Claude Coden etuna tässä on, että näet **mitä** muutettiin ja **missä** virhe on. Lovable toimii ”mustana laatikkona”: saat tuloksen, mutta et näe syytä. Aloittelijasta se tuntuu helpottavalta (”minun ei tarvitse selvittää tätä”), mutta kun tuote on tavallista laskeutumissivua monimutkaisempi, siitä tulee ongelma.

## 4 tilannetta, joissa Lovable päihittää Claude Coden

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Mainoskampanjan laskeutumissivu, tietokantaan yhdistetty kyselylomake, toimiva prototyyppi sijoittajatapaamista varten, tavallinen CRM tai hallintapaneeli – Lovable rakentaa nämä kaikki 5–10 kertaa nopeammin. Jos projektisi sopii johonkin näistä tilanteista, sinun ei kannata kamppailla päätteessä.

</div>

**Tilanne 1: Laskeutumissivu, jossa on lomake ja tietokanta.** ”Haluan sivun, jolla ihmiset jättävät sähköpostiosoitteensa, ja josta näen hallintapaneelissa, kuka osoitteen jätti.” Lovablella tähän menee 10 minuuttia, kun mukaan lasketaan suunnittelu, verkkotunnus ja SSL. Claude Codella rungon rakentamiseen menee 1–2 tuntia ja julkaisemiseen vielä tunti. Kertaluonteisessa tehtävässä Lovable voittaa selvästi.

**Tilanne 2: Demoprototyyppi sijoittajalle tai kumppanille.** Sinun pitää näyttää tapaamisessa 3 päivän kuluttua, ”miten tuote toimii”. Lovable rakentaa visuaalisesti houkuttelevan ja toimivan prototyypin yhdessä illassa. Voit näyttää sen ja sanoa: ”Tämä logiikka tulee tähän, ja tuo logiikka tuohon.” Kumppanisi napsauttaa painikkeita ja näkee jotain todellista PowerPointin sijaan.

**Tilanne 3: Tavallinen tuote tutun mallin pohjalta.** Yksinkertainen CRM toimistolle, tunnistautumista käyttävä asiakasportaali tai kaavioita sisältävä hallintapaneeli. Lovable on rakentanut tällaisia sovelluksia satoja kertoja, joten malli tuntee toimintamallit jo valmiiksi. Sinulla on paremmat mahdollisuudet saada toimiva tulos ensimmäisellä yrityksellä.

**Tilanne 4: Asennus estää aloittamisen.** Jos joku ei todellakaan ole koskaan avannut päätettä eikä ole valmis selvittämään Node.js:n, gitin ja VS Coden käyttöä, Lovable voi tuottaa tuloksen, johon Claude Code ei pysty. Toimiva prototyyppi on parempi kuin projekti, jota et koskaan aloittanut.

## 4 tilannetta, joissa Claude Code päihittää Lovablen

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Telegram-botti, automaatioskripti, mobiilisovellus tai vakava pitkän aikavälin tuote omassa repositoriossaan – nämä ovat Lovablessa joko mahdottomia tai saavuttavat rajansa 1–2 viikossa. Claude Code toimii ilman teknologiapinon tai arkkitehtuurin asettamia rajoituksia.

</div>

**Tilanne 1: Mikä tahansa muu kuin verkkoprojekti.** Telegram-botti, joka vastaa asiakkaille ja seuraa kyselyitä. Skripti, joka kerää kilpailijoiden verkkosivuilta tietoja tunnin välein ja lähettää yhteenvedon Slackiin. PDF-jäsennin, joka poimii tietoja kirjanpitoa varten. Näitä ei voi rakentaa Lovablella – se on tarkoitettu vain verkkoon. Claude Codessa ne ovat tyypillisiä iltaprojekteja.

**Tilanne 2: Vakava pitkän aikavälin tuote.** Jos rakennat yritystä tuotteen ympärille, tarvitset koodin omaan GitHub-repositorioosi, oman infrastruktuurisi ja hallinnan kaikkeen. Lovable sitoo sinut aina alustaan: voit viedä koodin, mutta sen kehittäminen ilman Lovablea on vaikeampaa (teknologiapino on jäykkä ja arkkitehtuuriratkaisut tehdään puolestasi). Claude Codessa koodi on sinun alusta alkaen.

**Tilanne 3: Epätyypillinen arkkitehtuuri tai teknologiapino.** Haluat Bunin Node.js:n sijaan. Haluat Postgresin + Redisin + ClickHousen. Haluat käyttää Pythonia tekoälykomponenttiin ja Goa mikropalveluun. Haluat workereita, jonoja ja WebSocketeja Supabasen ulkopuolelle. Lovablessa kaikki tämä on joko mahdotonta tai vaatii ”katkoksen” eli koodin muokkaamisen käsin, mikä poistaa rakentajan edun.

**Tilanne 4: Tarvitset projektille second brainin.** Vakava tuote sisältää muutakin kuin koodia: sillä on myös konteksti, kuten liiketoimintamalli, yleisö, juridiset rajoitteet ja tavoitteet. Tämä konteksti on koodin vieressä `business/`-kansiossa, ja Claude Code lukee sen jokaisen pyynnön yhteydessä ([Claude Coden second brain -opas](https://ailoot.ai/blog/fi/claude-code-second-brain/)). Lovable toimii ilman tätä kerrosta – saat teknisesti toimivan tuotteen ymmärtämättä ”miksi”.

## Hybridimalli: Lovable → Claude Code samassa projektissa

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Kokeneiden vibe-koodaajien yleinen yhdistelmä: Lovable rakentaa ensin tuotteen rungon yhden illan aikana, minkä jälkeen viet koodin, avaat sen VS Codessa ja jatkat kehitystä Claude Codella. Näin saat Lovablen nopean aloituksen ja Claude Coden hallinnan kehitykseen.

</div>

Toimintatapa on yksinkertainen: kumpikin työkalu on hyvä omassa tehtävässään, joten sinun ei tarvitse valita ”joko tai”.

**Näin se toimii:**

1.  **Ideavaihe.** Yksi ilta Lovablella. Kuvaile, mitä haluat, ja saat toimivan prototyypin, jossa on tietokanta, tunnistautuminen ja pari sivua. Se riittää kumppanille näyttämiseen tai 5 haastatteluun potentiaalisten asiakkaiden kanssa.

2.  **Validointivaihe.** Jatka Lovablen käyttöä niin kauan kuin tuote on yksinkertainen. Käytä 1–2 viikkoa kehotteiden kirjoittamiseen, pienten muutosten tekemiseen ja uusien kenttien lisäämiseen tietokantaan.

3.  **Siirtovaihe.** Kun saavutat Lovablen rajat (tarvitset sen rinnalle Telegram-botin, monimutkaista logiikkaa tai toisen ohjelmointikielen), vie koodi Dev Moden kautta (vaatii Pro-tilauksen) ja kloonaa repository paikallisesti.

4.  **Kehitysvaihe.** Avaa se VS Codessa ja käynnistä Claude Code samasta kansiosta. Nyt Claude näkee Lovablen rakentaman koodin ja voi jatkaa sen kehittämistä. Arkkitehtuuri pysyy samana (React + Supabase), mutta hallinta siirtyy sinulle.

Huono puoli: maksat Lovablesta ensimmäisen kuukauden (tai pidempään) ja siirryt silti sen jälkeen Claude Codeen. Se maksaa ylimääräiset \$25–50. Vastineeksi säästät ensimmäisen kehitysviikon. Useimpien niiden ideoiden kohdalla, jotka eivät menesty, \$25 on hyvin käytetty raha: saat nopeasti selville, mikä ei toiminut, sijoittamatta kahta viikkoa runkoon, jonka myöhemmin heittäisit pois.





Hän rakensi Lovablella pääsivustonsa uudelleen ja lisäsi siihen 12 integraatiota (Stripe, Customer.io, Meta Pixel) yhdessä päivässä. Sen jälkeen hän vei `challenge prompts` -ominaisuuden tuotantoon Claude Codella 2 päivässä odotetun 2 viikon sijaan.

## 5 Lovablen sudenkuoppaa, joista kukaan ei kirjoita

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Ilmaistilauksen rajat tulevat vastaan yhdessä illassa. Koodi siirtyy omistukseesi vasta Pro+-tilauksella. Arkkitehtuuri on tiukasti sidoksissa Supabaseen. Käyttöliittymä ei ehkä ole valmiiksi saatavilla haluamallasi kielellä. Olet vahvasti sidoksissa alustaan: projektin kasvaessa koodisi on aina palveluntarjoajan hallussa.

</div>

**Sudenkuoppa 1: Ilmaistilaus riittää 1–2 illaksi.** 5 krediittiä päivässä riittää sovelluksen runkoon ja pariin muokkaukseen. Sen jälkeen sinun on joko odotettava päivä tai maksettava \$25.

**Sudenkuoppa 2: Koodiin pääsee käsiksi vain Pro+-tilauksella.** Ilmaistilauksella et voi ladata koodia, avata sitä editorissa tai luovuttaa sitä kehittäjälle. Jos päätät lähteä, sinun on päivitettävä maksulliseen tilaukseen tai aloitettava alusta.

**Sudenkuoppa 3: Tiukka kytkös Supabaseen.** Jos haluat myöhemmin käyttää PostgreSQL:ää omalla palvelimellasi, korvata Supabase Authin omalla tunnistautumisratkaisullasi tai yhdistää muun kuin verkkopohjaisen backendin, se on hankalaa. Teknologiapino on rakennettu perustuksiin.

**Sudenkuoppa 4: Käyttöliittymän kieli.** Oletusarvoisesti Lovable luo sovellusten käyttöliittymät englanniksi. Ilmoita haluamasi kieli kehotteessa selvästi, esimerkiksi ”tee siitä haluamallani kielellä”. Osa tekstistä voi silti jäädä englanniksi, erityisesti järjestelmävirheet ja syötteiden vahvistuslomakkeet. Voit korjata ne erillisillä kehotteilla.

**Sudenkuoppa 5: Supabasen tietoturva on oletusarvoisesti puutteellinen.** Tämä on tärkein asia, jota alussa ei usein huomata. Tutkijat tarkistivat 1 645 sovellusta Lovablen virallisessa esittelyvalikoimassa – **170:ssä niistä (10,3 %)** oli vakava Row Level Security -ongelma Supabasessa. Kuka tahansa kirjautunut käyttäjä saattoi lukea, muuttaa ja poistaa muiden tietoja. Oikeissa sovelluksissa tutkijat pääsivät käsiksi asiakkaiden osoitteisiin, velkasummiin ja voimassa oleviin Stripe-avaimiin (CVE-2025-48757). Syynä on se, että Lovable luo taulut Supabaseen, mutta **ei ota RLS-käytäntöjä oletusarvoisesti käyttöön**. Ratkaisu: ota RLS käyttöön manuaalisesti jokaisessa taulussa ensimmäisen julkaisun jälkeen ja tarkista asetukset Supabasen dokumentaatiosta. Jos rakennat tuotetta, jossa on oikeita käyttäjätietoja, tätä ei voi siirtää myöhemmäksi – tee se ”heti ensimmäisen rakentamisen jälkeen”.

## 5 Claude Coden sudenkuoppaa, jotka karkottavat aloittelijoita

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Asennukseen tarvitaan pääte, Node.js ja git – ja se on ensimmäinen este. Voit kuluttaa käyttörajat loppuun, jos et ymmärrä, miten tokenit lasketaan. Ilman CLAUDE.md-tiedostoa ja kontekstisuunnittelua tekoäly hallusinoi. Visuaalista editoria ei ole – kaikki tehdään tekstillä.

</div>

**Sudenkuoppa 1: Asennus on ensimmäinen este.** Aloittamiseen tarvitaan Node.js, npm, git, VS Code ja itse Claude Code. Windowsissa pitää selvittää WSL:n käyttö. Macilla se on helpompaa, mutta sinun täytyy silti avata pääte. Jos et ole tehnyt tätä aiemmin, ensimmäiset 30 minuuttia kuluvat sen selvittämiseen, ”miten se käynnistetään”.

**Sudenkuoppa 2: Käyttörajat voivat loppua päivässä, jos konteksti puuttuu.** \$20:n Pro-tilauksessa rajat määräytyvät viestien ja tokenien mukaan. Jos lähetät Claudelle joka kerta 50 projektitiedostoa, käyttöraja tulee vastaan 2–3 tunnissa. Ratkaisu on kontekstisuunnittelu: anna sille vain tarvittavat tiedot, käytä komentoja `/clear` ja `/compact` sekä ylläpidä `CLAUDE.md`-tiedostoa ([rajojen opas](https://ailoot.ai/blog/fi/claude-code-token-limits-saving/)).

**Sudenkuoppa 3: Hallusinaatiot ilman kontekstia.** Claude Code on älykäs, mutta ilman projektin ymmärtämistä se voi keksiä API-metodeja, tietokantakenttiä tai kirjastoja. Ilman sääntöjä sisältävää `CLAUDE.md`-tiedostoa ja second brainina toimivaa `business/`-kansiota lopputulos on arpapeliä. Niiden avulla saat luotettavan työnkulun ([CLAUDE.md-opas](https://ailoot.ai/blog/fi/claude-md-template/)).

**Sudenkuoppa 4: Käyttöoikeus- ja yrityksen omistajuusrajoitukset.** Syyskuussa 2025 Anthropic esti yritykset, joiden omistuksesta yli 50 % oli Kiinasta, Iranista tai Pohjois-Koreasta tulevien tahojen hallinnassa. Käyttöehdot riippuvat palveluntarjoajasta ja omistusrakenteesta; tarkista ne ennen työkalun valintaa.

**Sudenkuoppa 5: Visuaalista editoria ei ole.** Kaikki käyttö tapahtuu tekstillä. Jos sinun täytyy siirtää painiketta 10 pikseliä oikealle, et voi vetää sitä – sinun täytyy kuvailla muutos sanoin. Suunnittelutehtävissä se on vähemmän kätevää kuin visuaaliset rakentajat, myös Lovable.

## Näin valitset 5 minuutissa: vertailutaulukko

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

Keskeinen huomio

Jos tehtäväsi on ideaa varten tehtävä tavallinen verkkotuote etkä halua selvittää asennusta: valitse Lovable. Jos tarvitset jotain epätyypillistä tai pitkäaikaista tai olet valmis käyttämään illan asennukseen: valitse Claude Code. Jos olet epävarma: käytä Lovablea 1 kuukauden ajan ja vaihda sitten Claude Codeen, kun sen rajat tulevat vastaan.

</div>

Vastaa 5 kysymykseen ja saat suosituksen:

| Kysymys | Lovable | Claude Code |
|----|----|----|
| Et ole koskaan avannut päätettä etkä halua avata sitä? | ✅ | ❌ |
| Onko kyseessä yksinkertainen verkkosivusto (sivu, lomake, CRM, hallintapaneeli)? | ✅ | ⚪ toimii, mutta kestää kauemmin |
| Tarvitsetko Telegram-botin, skriptin tai mobiilisovelluksen? | ❌ | ✅ |
| Haluatko hallita koodia ja teknologiapinoa täysin? | ❌ | ✅ |
| Rakennatko pitkäaikaista tuotetta omassa repositoriossasi? | ⚪ viennin kautta | ✅ |

Jos valitset Lovablen kahdella ensimmäisellä rivillä ja ⚪/❌ lopuilla riveillä, valitse Lovable. Jos valitset Claude Coden riveillä 3–5, valitse Claude Code. Jos valitset ✅ molemmissa sarakkeissa, käytä Lovablea ensimmäiset 1–2 viikkoa ja siirry sitten Claude Codeen (katso yllä oleva hybridiosio).

Vielä yksi asia: valitsemastasi työkalusta riippumatta pullonkaula ei ole tekoäly itse. Ratkaisevaa on **se, miten työskentelet sen kanssa**. Kolmen peruspilarin yhdistelmä (AI-klooni + Second Brain + Context Engineering) tuottaa johdonmukaisia tuloksia millä tahansa työkalulla. Ilman sitä tekoäly hallusinoi; niiden avulla se toimii kuin luotettava kone. 

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

### Lähteet

- [Lovable – virallinen verkkosivusto ja hinnoittelu](https://lovable.dev/pricing)
- [Lovablen dokumentaatio – tilaukset ja krediitit](https://docs.lovable.dev/introduction/plans-and-credits)
- [Anthropicin asiakastarina – Lovable](https://claude.com/customers/lovable)
- [Claude – virallinen hinnoittelu 2026](https://claude.com/pricing)
- [Anthropic – Claude Opus 4.7:n julkistus](https://www.anthropic.com/news/claude-opus-4-7)

</div>

Kattava opas yhden illan vibe-koodaukseen: **AI-klooni + Second Brain + Context Engineering**. 



Tutustu [Ailootiin](https://ailoot.ai/).

## Kysymyksiä tästä oppaasta: Lovable vai Claude Code vuonna 2026: kumman valitset ensimmäiseen projektiisi?

### Mitä kustannuksia vertaan työkalutilauksen lisäksi?

Laske Lovablessa mukaan krediitit ja Lovable Cloudin käyttö sisältyvän määrän yli. Sisällytä kummassakin työnkulussa projektin todella tarvitsemat ylläpito-, tietokanta- ja verkkotunnuskulut. Vertaa valmiin projektin laskua pelkkien tilaushintojen sijaan.

### Mitä tarkistan ennen oikeiden käyttäjätietojen lisäämistä generoituun sovellukseen?

Katselmoi tietokannan pääsynhallinta, myös Supabase Row Level Security jokaisessa olennaisessa taulukossa, ja varmista, ettei yksi käyttäjä voi lukea tai muuttaa toisen dataa. Toimiva kirjautumisnäkymä ei yksin todista datan eristystä.


## Ailoot · Yritys ja sen projektisalkku

Ailoot perustuu kertyneeseen toimintakokemukseen, laajaan asiakaskuntaan, vakaaseen palveluun ja jatkuvaan KPI-seurantaan.

Yritys ja sen projektisalkku: miljoonia asiakkaita; kuukausittainen myynti miljardiluokassa.

Ailoot hyödyntää tätä toimintakokemusta tarjotessaan API-yhteyden tekoälytoimintoihin asiakkaiden tuotteissa, agenteissa, sovelluksissa ja automaatioissa.
