AI15 min čitanja
Lovable vodič 2026: kako koristiti Lovable i što sve možete izraditi
Što je Lovable, što sve možete izraditi, koliko košta i kako stranicu optimizirati za Google i AI tražilice.
Piše Matej Pejaković
Lovable je AI alat koji iz opisa na običnom jeziku izradi cijelu web stranicu ili aplikaciju: dizajn, bazu podataka, prijavu korisnika i objavu na vlastitoj domeni. Ne trebate znati programirati. U ovom vodiču pokazujem kako početi, što sve možete izraditi, koliko košta i kako stranicu optimizirati za Google (SEO) i za AI tražilice poput ChatGPT-a i Perplexityja (GEO).
Ako želite odmah probati, otvorite besplatan Lovable račun preko mog linka. To je moj referral link: vi pri registraciji dobivate 10 bonus kredita, a ja dobivam kredite tek ako kasnije uzmete plaćeni plan.
Što je Lovable?
Lovable je platforma za izradu web stranica i web aplikacija pomoću umjetne inteligencije. Vi napišete što želite, a Lovable napiše kod, prikaže rezultat uživo i objavi ga na internetu. Taj način rada zove se vibe coding: opisujete ideju riječima, a AI programira.
Razlika u odnosu na klasične alate poput Wixa ili WordPressa je u tome što ne slažete gotove blokove. Dobivate pravi kod koji je vaš. Možete ga preuzeti, spojiti s GitHubom i dati programeru da ga nastavi razvijati.
Lovable je koristan za tri skupine ljudi:
- Poduzetnici i obrtnici koji trebaju web stranicu, landing stranicu ili kalkulator bez angažiranja agencije.
- Marketinški stručnjaci koji žele sami izraditi kampanjsku stranicu, dashboard ili interni alat.
- Osnivači i programeri koji žele brzo provjeriti ideju prototipom prije većeg ulaganja.
Ja na Lovableu držim vlastitu stranicu matejpejakovic.com. Zato u ovom vodiču pišem iz prakse, a ne iz teorije.
Što sve možete izraditi s Lovableom?
S Lovableom možete izraditi gotovo sve što radi u web pregledniku, od jednostavne landing stranice do aplikacije s prijavom korisnika i naplatom. Ne možete izraditi nativnu mobilnu aplikaciju za App Store ili Google Play.
| Vrsta projekta | Primjer iz prakse | Što Lovable napravi |
|---|---|---|
| Web stranica tvrtke | Stranica obrta s uslugama, cjenikom i kontaktom | Dizajn, podstranice, kontakt forma, objava |
| Landing stranica | Stranica za Google Ads kampanju | Naslov, ponuda, forma za upit, praćenje konverzija |
| Blog i portfolio | Osobni brend, životopis, reference | Popis članaka, pojedinačne stranice, SEO oznake |
| Kalkulator i alat | Kalkulator cijene, solarni kalkulator, konfigurator ponude | Logika izračuna, prikaz rezultata, slanje upita |
| Web trgovina i rezervacije | Prodaja proizvoda, rezervacija termina | Katalog, košarica, naplata preko Stripea ili Shopifyja |
| SaaS aplikacija | Aplikacija s pretplatom i korisničkim računima | Prijava, baza podataka, uloge korisnika, naplata |
| Interni alat | CRM, evidencija upita, dashboard s brojkama | Tablice, filteri, grafovi, uvoz podataka |
| AI aplikacija | Chatbot za podršku, pretraga dokumenata | Povezivanje s AI modelima bez vlastitog API ključa |
| Prototip | Klikabilna verzija ideje za investitora ili klijenta | Radna verzija s pravim podacima |
| Dokumenti i vizuali | Prezentacija, PDF izvještaj, slike za kampanju | Generirane datoteke koje preuzimate |
Moj savjet: počnite s nečim malim što vam stvarno treba. Landing stranica ili kalkulator dobar su prvi projekt jer rezultat vidite isti dan.
Kako početi: prvi projekt u 8 koraka
Prvu stranicu možete objaviti za desetak minuta. Ovo je redoslijed koji preporučujem.
- Otvorite račun. Registrirajte se preko ovog linka e-mailom, Google, GitHub ili Apple računom. Besplatni plan uključuje osobni radni prostor.
- Opišite što želite. U polje za unos napišite što gradite. U izborniku načina rada ostavite Build. Možete pisati na hrvatskom.
- Pričekajte prvu verziju. Otvara se editor. Lijevo je chat u kojem razgovarate s Lovableom. Desno je pregled u kojem stranica radi uživo.
- Tražite jednu po jednu izmjenu. Nakon svake izmjene pogledajte pregled. Ako izgled nije onakav kakav ste zamislili, opišite dojam običnim riječima.
- Uredite vizualno. Na alatnoj traci pregleda odaberite element i opišite promjenu. Tekst naslova i gumba možete mijenjati izravno na stranici opcijom Edit text inline.
- Priložite sliku ako je imate. Skica, screenshot ili mockup služe Lovableu kao vizualna referenca.
- Testirajte. Kliknite svaki gumb i svaki link. Prebacite pregled na mobilni prikaz, jer većina ljudi linkove otvara na mobitelu.
- Objavite. Kliknite Publish gore desno. Lovable predloži adresu na domeni lovable.app, koju možete promijeniti. Hosting na lovable.app besplatan je na svim planovima.
Dvije stvari koje početnici najčešće propuste:
- Objavljena stranica je snimka stanja. Nakon kasnijih izmjena morate kliknuti Publish pa Publish changes, inače posjetitelji vide staru verziju.
- Svaka izmjena sprema se kao verzija. Ako nešto pokvarite, vratite prethodnu verziju i nastavite dalje.
U prvoj verziji izostavite prijavu korisnika i bazu podataka. Dodajte ih kasnije, kad osnovni izgled i sadržaj budu dobri.
Kako pisati promptove za Lovable
Dobar prompt kaže četiri stvari: što gradite, za koga, kako treba izgledati i što posjetitelj treba napraviti. Što je opis konkretniji, to manje kredita potrošite na ispravke.
Pravila kojih se držim:
- Jedan zadatak po poruci. Pet zahtjeva u jednoj poruci daje lošiji rezultat od pet kratkih poruka.
- Navedite sadržaj, ne samo oblik. Napišite stvarne naslove, cijene i tekstove. Inače dobijete izmišljeni tekst koji kasnije morate mijenjati.
- Opišite stil brojkama i imenima. Boje u HEX zapisu, nazivi fontova, primjer stranice koja vam se sviđa.
- Prvo plan, onda gradnja. Za veće izmjene tražite da Lovable prvo predloži plan. Kod neka piše tek kad se složite s planom.
- Kod greške zalijepite poruku. Opišite što ste kliknuli i što ste očekivali. Lovable sam istraži uzrok.
Primjer prvog prompta za stranicu obrta:
Izradi web stranicu za vodoinstalaterski obrt iz Zagreba.
Ciljana publika: vlasnici stanova i kuća kojima treba hitan popravak.
Stranice: Naslovna, Usluge, Cjenik, Kontakt.
Na naslovnoj: naslov "Vodoinstalater u Zagrebu, dolazak isti dan",
gumb "Nazovite odmah" s brojem telefona, tri najčešće usluge s cijenama.
Stil: bijela pozadina, tamnoplavi naslovi (#12305A), narančasti gumbi.
Jezik stranice: hrvatski. Stranica mora biti brza i čitljiva na mobitelu.Primjer prompta za izmjenu:
Na stranici Cjenik dodaj tablicu s tri paketa: Mini 300 EUR,
Midi 500 EUR, Maxi 1000 EUR. Ispod svakog paketa gumb "Zatražite ponudu"
koji vodi na kontakt formu. Ostatak stranice ne diraj.Rečenica "ostatak stranice ne diraj" štedi živce. Bez nje AI ponekad promijeni i ono što niste tražili.
Glavne funkcije Lovablea
Lovable pokriva cijeli put od ideje do objavljene stranice: gradnju, bazu podataka, AI funkcije, domenu i sigurnost. Ovo su funkcije koje ćete najviše koristiti.
| Funkcija | Čemu služi | Kada je koristiti |
|---|---|---|
| Build način | AI agent sam čita kod, piše izmjene i osvježava pregled | Za svaku gradnju i izmjenu |
| Chats | Razgovor s Lovableom izvan projekta, za razradu ideje | Prije nego što počnete trošiti kredite na gradnju |
| Vizualno uređivanje | Odaberete element u pregledu i opišete promjenu, tekst mijenjate izravno | Za sitne izmjene teksta, boja i razmaka |
| Prilaganje datoteka | Slika ili skica kao referenca za dizajn | Kad imate mockup ili stranicu koja vam se sviđa |
| Povijest verzija | Svaka izmjena je verzija koju možete vratiti | Kad izmjena nešto pokvari |
| Lovable Cloud | Ugrađena PostgreSQL baza, prijava korisnika i spremanje datoteka | Kad stranica treba pamtiti podatke |
| Lovable AI | AI funkcije u vašoj aplikaciji bez vlastitog API ključa | Chatbot, generiranje slika, pametna pretraga |
| Konektori | Veza s vanjskim servisima poput Stripea, Shopifyja i Supabasea | Naplata, trgovina, slanje e-maila |
| Git sync | Sinkronizacija koda s GitHubom, GitLabom ili Bitbucketom | Kad želite kopiju koda ili rad s programerom |
| Vlastita domena | Spajanje postojeće domene ili kupnja nove u postavkama projekta | Kad stranica ide u javnost pod vašim imenom |
| Sigurnosne provjere | Ugrađene provjere i upozorenja o sigurnosnim propustima | Prije svake objave aplikacije s korisničkim podacima |
| SEO i AI pretraga | Pregled vidljivosti i popravci jednim klikom | Prije i nakon objave, više u nastavku |
Lovable radi i izvan preglednika. Postoje desktop i mobilna aplikacija, a s Lovableom možete razgovarati i kroz Slack. Kod je vaš: smijete ga mijenjati, koristiti komercijalno i hostati gdje želite.
Koliko košta Lovable? Planovi i krediti
Lovable je besplatan za početak, a plaćeni planovi kreću od 25 USD mjesečno. Plaćate po kreditima, a ne po broju projekata ili korisnika. Cijene u tablici vrijede na dan 11. listopada 2026. i izražene su u američkim dolarima.
| Plan | Cijena (USD) | Krediti za gradnju | Vlastita domena | Za koga |
|---|---|---|---|---|
| Free | 0 | 5 dnevno, najviše 30 mjesečno | Ne | Isprobavanje i mali projekti |
| Pro | od 25 mjesečno ili 250 godišnje | 100 mjesečno i 5 dnevno, uz prijenos neiskorištenih | Da | Poduzetnici i mali timovi |
| Business | od 50 mjesečno ili 500 godišnje | 100 mjesečno i 5 dnevno, uz prijenos neiskorištenih | Da | Odjeli kojima trebaju SSO i kontrola pristupa |
| Enterprise | Po dogovoru | Po ugovoru | Da | Velike organizacije |
Izvor: službeni pregled planova.
Što trebate znati o kreditima:
- Poruka ne košta uvijek jedan kredit. Cijena ovisi o složenosti. Prema službenom cjeniku, promjena boje gumba košta 0,50 kredita, dodavanje prijave i registracije 1,20, a landing stranica s generiranim slikama 1,70 kredita.
- Isti krediti pokrivaju tri stvari. Gradnju, rad aplikacije na Lovable Cloudu i AI funkcije koje aplikacija koristi. Planovi Free, Pro i Business uz to mjesečno dobivaju 20 Cloud kredita i 4 AI kredita.
- Dnevni krediti ne prenose se. Obnavljaju se u ponoć po UTC vremenu, što je 2 sata ujutro po ljetnom vremenu u Hrvatskoj.
- Besplatni plan ima ograničenja. Nema vlastite domene, nema uklanjanja Lovable oznake i nema preuzimanja koda.
- Godišnje plaćanje daje dva mjeseca besplatno. Studenti i nastavnici imaju 50 % popusta na Pro do 12 mjeseci.
Za jednu web stranicu obrta plan Pro sa 100 kredita u pravilu je dovoljan. Ako gradite aplikaciju s bazom i puno izmjena, računajte na višu razinu kredita ili dokup.
SEO u Lovableu: kako doći na Google
Lovable stranice danas su dobra osnova za SEO, jer novi projekti šalju tražilicama gotov HTML. To do 2026. nije bio slučaj, pa je velik dio starijih savjeta na internetu zastario.
Što se promijenilo
- Novi projekti imaju SSR. Projekti izrađeni od 13. svibnja 2026. koriste TanStack Start i renderiraju stranice na poslužitelju. Google i AI crawleri odmah vide cijeli sadržaj.
- Stariji projekti imaju pre-rendering. Projekti na starom React i Vite stacku šalju gotovu HTML snimku provjerenim crawlerima. Ne morate ništa uključivati.
- Stari projekt možete nadograditi. Postoji put nadogradnje na TanStack Start. Isplati se kad vam organski promet postane važan.
- SSR, pre-rendering i SEO pregled besplatni su na svim planovima.
Alati koje dobivate
- SEO i AI pregled. Nalazi se pod More pa SEO & AI search. Provjerava sitemap, robots.txt, meta oznake, strukturirane podatke, semantički HTML, alt tekst slika, canonical oznake, indeksiranost i spremnost za AI tražilice.
- Popravak jednim klikom. Opcija Try to fix sama ispravi većinu nalaza. Pregled je besplatan, a popravak troši redovne kredite.
- Google Search Console. Lovable iz chata može povezati Search Console, potvrditi stranicu i poslati sitemap. Prije toga objavite zadnje izmjene.
- Semrush podaci u chatu. Možete pitati za koje ključne riječi se rangirate i koje vrijedi ciljati. Ne treba vam Semrush račun. Prema dokumentaciji, korištenje je besplatno do 30. studenog 2026.
SEO kontrolna lista za Lovable stranicu
- Stranica je objavljena javno i na vlastitoj domeni
- Svaka podstranica ima jedinstven title do 60 znakova i meta opis do 155 znakova
- Svaka stranica ima točno jedan H1 s glavnom ključnom riječi
- URL adrese su kratke i čitljive, na primjer /izrada-web-stranica
- Sve slike imaju alt tekst i optimizirane su za brzinu
- Postoje sitemap.xml i robots.txt, a sitemap je poslan u Search Console
- Svaka stranica ima canonical oznaku i vlastite Open Graph oznake za dijeljenje
- Dodani su strukturirani podaci: LocalBusiness za tvrtku, Article za blog, FAQPage za pitanja
- Oznaka jezika u HTML-u postavljena je na hr
- Brzina je provjerena u alatu PageSpeed Insights, jer je Lovableov pregled ne mjeri
Prompt kojim većinu ovoga riješite odjednom:
Provedi SEO pregled cijele stranice. Za svaku podstranicu postavi
jedinstven title i meta opis na hrvatskom, jedan H1, canonical i
Open Graph oznake. Dodaj sitemap.xml i robots.txt. Dodaj LocalBusiness
strukturirane podatke s nazivom, adresom, telefonom i radnim vremenom.
Postavi lang="hr". Na kraju ispiši popis promjena po stranici.Napomena: indeksirati se mogu samo javno objavljene stranice. Indeksiranje traje od nekoliko sati do nekoliko dana.
GEO: kako da vas citiraju ChatGPT, Claude i Perplexity
GEO (Generative Engine Optimization) je optimizacija sadržaja za AI tražilice koje korisniku daju gotov odgovor umjesto popisa linkova. Cilj više nije samo prvo mjesto na Googleu. Cilj je da AI vašu stranicu navede kao izvor. Isti pojam često se naziva i AEO (Answer Engine Optimization).
Što Lovable rješava umjesto vas
- Čitljiv HTML. Zahvaljujući SSR-u i pre-renderingu, AI crawleri vide cijeli tekst stranice.
- Struktura. Lovable koristi semantički HTML, strukturirane podatke i strukturirani markdown koji AI alati lako čitaju.
- Provjera spremnosti. SEO i AI pregled uključuje provjeru spremnosti za AI tražilice.
Datoteka llms.txt prema Lovableovoj dokumentaciji nije obavezna.
Što morate napraviti sami
Tehnika je preduvjet, ali AI citira sadržaj. Ovo je ono što u praksi donosi rezultat:
- Odgovorite u prvoj rečenici. Svaki odlomak počnite izravnim odgovorom, a objašnjenje dodajte nakon toga. AI najčešće preuzima upravo tu prvu rečenicu.
- Pišite naslove kao pitanja. "Koliko košta izrada web stranice?" bolji je naslov od "Cjenik". Tako ljudi i pitaju AI.
- Navodite konkretne podatke. Brojke, cijene, datumi i nazivi. AI radije citira "od 300 EUR" nego "povoljne cijene".
- Dodajte FAQ sekciju sa strukturiranim podacima. Kratka pitanja i odgovori od dvije do tri rečenice, označeni kao FAQPage.
- Koristite tablice i popise. Usporedbe, korake i cijene AI lakše izvlači iz tablice nego iz dugog odlomka.
- Pokažite tko piše. Ime autora, kratka biografija, stranica O meni i datum zadnjeg ažuriranja.
- Ne blokirajte AI crawlere. Provjerite da robots.txt ne zabranjuje pristup botovima poput GPTBot, ClaudeBot i PerplexityBot.
- Budite spomenuti i drugdje. Profili, imenici, gostujući članci i recenzije. AI više vjeruje izvoru koji se pojavljuje na više mjesta.
- Ažurirajte sadržaj. Zastarjele cijene i datumi razlog su da AI odabere drugi izvor.
Prompt za GEO optimizaciju postojeće stranice:
Optimiziraj ovu stranicu za AI tražilice. Na vrh dodaj odlomak od
dvije rečenice koji izravno odgovara na pitanje iz naslova. Podnaslove
preoblikuj u pitanja koja bi korisnik postavio. Na dno dodaj FAQ
sekciju s pet pitanja i odgovora i označi je FAQPage strukturiranim
podacima. Dodaj ime autora i datum zadnjeg ažuriranja. Provjeri da
robots.txt dopušta GPTBot, ClaudeBot i PerplexityBot.SEO i GEO nisu suprotnosti. Stranica koja jasno odgovara na pitanja, brzo se učitava i ima urednu strukturu dobro prolazi i na Googleu i u AI odgovorima.
Ograničenja Lovablea i najčešće greške
Lovable nije rješenje za sve. Ovo su ograničenja koja trebate znati prije nego što počnete.
- Samo web aplikacije. Lovable ne izrađuje nativne mobilne aplikacije. Objavljenu stranicu možete pretvoriti u PWA koji se instalira na mobitel.
- Zadan tehnološki stack. Ne možete birati drugi framework ili bazu. Baza je PostgreSQL.
- Nema uvoza postojećeg koda. Projekt ne možete započeti iz postojećeg GitHub repozitorija.
- Trošak kredita teško je predvidjeti. Cijenu poruke vidite tek nakon slanja, u povijesti poruka.
- Vlastita domena traži plaćeni plan.
- Osjetljivi podaci. Standardni uvjeti ne dopuštaju zdravstvene podatke, podatke o karticama, osobne identifikacijske brojeve ni biometriju.
Najčešće greške koje viđam:
- Prevelik prvi prompt. Početnici u jednu poruku stave cijelu aplikaciju. Rezultat je površan, a ispravci skupi.
- Gradnja bez sadržaja. Bez pravih tekstova i cijena dobijete lijepu, ali praznu stranicu.
- Preskočeno testiranje na mobitelu.
- Zaboravljen Publish changes. Izmjene postoje u editoru, ali ne i na javnoj stranici.
- Objava bez SEO pregleda. Pregled je besplatan i traje kratko, a otkrije stranice bez title oznake ili sitemapa.
- Slijepo povjerenje u AI. Kod aplikacija s korisničkim podacima uvijek provjerite sigurnosna upozorenja i pravila pristupa bazi.
Česta pitanja o Lovableu
Je li Lovable besplatan?
Da, Lovable ima besplatan plan. Uključuje 5 kredita za gradnju dnevno, najviše 30 mjesečno, i besplatnu objavu na domeni lovable.app. Vlastita domena i preuzimanje koda dostupni su od plana Pro, koji kreće od 25 USD mjesečno.
Trebam li znati programirati?
Ne. Lovable gradi iz opisa na običnom jeziku. Znanje programiranja pomaže kod složenijih aplikacija, ali za web stranicu, landing stranicu ili kalkulator nije potrebno.
Mogu li pisati promptove na hrvatskom?
Da. Promptove možete pisati na bilo kojem jeziku, pa tako i na hrvatskom. Sučelje Lovablea zasad nije prevedeno na hrvatski, ali je dostupno na engleskom, talijanskom, njemačkom i još nekoliko jezika.
Je li Lovable dobar za SEO?
Da, za projekte izrađene od 13. svibnja 2026. Oni koriste renderiranje na poslužitelju, pa Google vidi cijeli sadržaj. Stariji projekti imaju pre-rendering za crawlere i mogu se nadograditi. Rangiranje i dalje ovisi o sadržaju, brzini i poveznicama.
Tko je vlasnik koda?
Vi. Kod smijete mijenjati, koristiti komercijalno i hostati gdje želite. Na plaćenim planovima cijeli projekt preuzimate kao .zip, a na svim planovima kod možete sinkronizirati s GitHubom, GitLabom ili Bitbucketom.
Mogu li spojiti vlastitu domenu?
Da, na plaćenim planovima. Domenu spajate u postavkama projekta pod Domains, a možete je ondje i kupiti.
Mogu li s Lovableom izraditi mobilnu aplikaciju?
Ne nativnu. Lovable izrađuje web aplikacije koje rade na mobitelu u pregledniku. Ako trebate ikonu na početnom zaslonu, objavljenu aplikaciju možete pretvoriti u PWA.
Što je bolje za web stranicu, Lovable ili WordPress?
Ovisi o potrebi. Lovable je brži za izradu, daje stranicu po mjeri i ne traži održavanje dodataka. WordPress ima više gotovih dodataka i lakše ga uređuje tim koji svakodnevno objavljuje puno sadržaja.
Što dobivam preko referral linka?
Registracijom preko mog linka dobivate 10 bonus kredita. Ja dobivam bonus kredite tek ako se odlučite za plaćeni plan Pro ili Business. Vama cijena ostaje ista.
Zaključak: isplati li se Lovable?
Lovable se isplati ako trebate web stranicu, landing stranicu, kalkulator ili prototip aplikacije, a ne želite čekati tjednima. Prvu verziju imate isti dan. Od 2026. stranice su i tehnički spremne za Google i AI tražilice, pa glavni posao ostaje na sadržaju.
Najbolji način da procijenite alat je da nešto izradite. Besplatni plan dovoljan je za prvu stranicu.
[Isprobajte Lovable besplatno i uzmite 10 bonus kredita](https://lovable.dev/invite/P6T0BGJ)
Ako ne želite graditi sami, stranicu vam mogu izraditi ja. Javite mi se preko kontakt forme i opišite što trebate.