Hogyan beszélj a Lovable-lel.
A prompt az új design brief. Nem kód, nem mockup, egy mondat, ami elindít egy oldalt. Itt megnézzük az anatómiát, tíz konkrét tippet, a tipikus hibákat, és egy valódi példát.
Egy jó prompt öt rétege.
Készíts egy landing page-et magyar jógastúdiónak (cél),
kismamáknak és kezdőknek (kontextus),
meleg földszínű paletta, Aesop / Stoa hangulat (stílus),
órarend, foglalás emailen, oktatók bemutatása (funkciók).
Két oktató: Petra (hatha) és Bori (vinyasa) (tartalom).
Amit én megtanultam.
- 01
Mondd el a célt, ne a megoldást
„Egy oldal, ahol fotósok bemutatkozhatnak ügyfeleknek.” jobb, mint „csinálj egy navbart logóval és három menüponttal”.
- 02
Adj kontextust kinek készül
„Magyar piacra, középkorú vendégeknek.” vagy „Indie fejlesztő közönségnek angolul.”, a hangvétel és a vizuál ettől fog változni.
- 03
Egy referencia többet ér ezer szónál
„Linear stílusban, sötét háttér, sok whitespace.” Konkrét márka- vagy oldalnevek jelentősen szűkítik az értelmezést.
- 04
Egyszerre egy dolgot kérj
Ne pakold össze a hero-t, a fizetést és a blogot egy promptba. Lépésről lépésre haladj, így könnyebb visszafordulni.
- 05
Mondd ki ha valami nem tetszik
„A gombok túl rikítóak.” „A serif font nem illik ide.” Lovable szereti az őszinte feedbacket, és gyorsan tanul belőle.
- 06
Adj példa tartalmat
Ha van három valós termék, három valós idézet, három valós szolgáltatás, másold be. Sokkal jobb lesz, mint a Lorem Ipsum.
- 07
Kérd a stílust nevén
„Editorial magazin”, „brutalist”, „glassmorphism”, „neumorphism”, „swiss minimal”, ezek a szavak konkrét designra fordulnak.
- 08
Mondd meg mit NE csináljon
„Ne legyen stock fotó.” „Ne legyen lila-indigó gradient.” A negatív utasítás sokszor hatékonyabb a pozitívnál.
- 09
Iterálj kicsiben
Tíz apró módosítás jobb, mint egy nagy átírás. A Lovable verziókat tart, vissza tudsz térni bármelyikre.
- 10
Bízz a chatben
Nem kell technikailag pontosnak lenned. „Tedd kisebbre”, „légy bátrabb”, „kevesebb szöveg”, ezek érvényes utasítások.
Egy mondat, egy oldal.
Az egyik első Lovable projektem ennyi volt, egyetlen üzenet a chat ablakba:
„I need a website for this plan: We have 140 ways of healing you. Interested?"
Ennyi volt. Egy mondatnyi koncepció. Lett belőle egy meglepően költői, használható oldal, amit élesben is meg tudsz nézni:
Megnézem élőben →Néha egyetlen evokatív mondat elég, ha önmagában már koncepció. A „140" + „ways" + „healing" három olyan szó, ami struktúrát is ad (lista lesz belőle) és érzelmi tónust is (gyengéd, kerek). Próbáld ki: van olyan címed, ami önmagában történet?
Amit ne csinálj.
- ✕Mindent egyszerre: „landing + blog + shop + auth + email”, bontsd szét.
- ✕Túl homályos: „csinálj egy jó oldalt cégnek”, milyen cég? kinek? mit árul?
- ✕Ellentmondó utasítás: „minimalista, de színes és sok elemmel”, döntsd el.
- ✕Nincs visszajelzés: csak újraindítod a beszélgetést, ahelyett hogy elmondanád mit változtasson.
Az első verzió sosem kész.
A Lovable-nél a generálás csak a nulladik lépés. A munka 80%-a a chat-ben történik: konkrét, kicsi módosítások, ahol minden válasz után ránézel a preview-ra. Ha valami nagyon elromlott, visszamehetsz korábbi verzióra. Ne félj kísérletezni, nincs „elrontás”, csak tanulás.
Hogy ne égess el feleslegesen creditet.
Apró fogások, amiket menet közben tanulsz meg. Itt összegyűjtöttem, hogy ne neked kelljen, hanem rögtön a jó szokásokkal indulj.
- 01
Tervezz, mielőtt promptolsz
Írd le előbb egy jegyzetbe, hogy mit akarsz: oldalak, szekciók, fő funkciók. Egy átgondolt egyoldalas brief 10x kevesebb creditet éget, mint a menet közbeni kapkodás.
- 02
Használd a Chat módot felfedezésre
A Chat mód nem ír kódot, csak beszélget. Ideális arra, hogy átgondoljátok együtt a struktúrát vagy egy bugot, mielőtt egyetlen sort is módosítana. Ingyenes a gondolkodás.
- 03
Egy üzenet = egy téma
Ne pakold össze: „javítsd a hero-t, tegyél új footert, írd át a színeket és csinálj kontakt formot”. Külön üzenetekben sokkal pontosabb és olcsóbb.
- 04
Shift+Enter = új sor
Az Enter elküldi az üzenetet. Ha hosszabb, tagolt promptot írsz (lista, több bekezdés), Shift+Enter-rel törj sort. Egy jól tagolt prompt többet ér, mint három kapkodós.
- 05
Állítsd meg, ha rossz irányba megy
Ha látod, hogy félreértett, ne hagyd végigfutni. A generálás alatt megjelenik egy Stop gomb, kattints rá és írd át a promptot. Egy félbeszakított futás töredék credit.
- 06
Mondd ki ha valami nem tetszik
Ne kezdd elölről az egészet egy új projektben. Mondd el chatben mi a baj („a hero túl zsúfolt, vegyél ki két elemet”), így a meglévő munkára épít, nem nulláról.
- 07
Használd a verziókat
Minden generálás után készül egy verzió. Ha elromlott valami, kattints vissza egy korábbira, ne próbáld promptokkal „visszajavítani”. A revert ingyen van, a javítgatás nem.
- 08
Képet is feltölthetsz referenciának
Egy screenshot, mockup vagy kézi vázlat többet mond, mint öt bekezdésnyi leírás. Húzd be a chatbe, és hivatkozz rá: „ilyen elrendezést szeretnék”.
- 09
Kérd hogy magyarázza el
Mielőtt elfogadsz egy nagyobb változtatást, kérdezd meg: „mit fogsz csinálni, és miért?”. Sokszor a saját terve közben jön rá, hogy rosszul érti, és te is megfogod időben.
- 10
Kapcsold be a Cloudot, ha kell
Adatbázis, login, fájlfeltöltés, AI funkciók: ezeket a beépített Lovable Cloud adja, nincs külön regisztráció. Ne építs hetekig saját backendet, ha egy kattintásra ott van.
- 11
Tartsd a komponenseket kicsiben
Ha egy fájl 500+ soros lett, kérd meg hogy bontsa szét. A kisebb komponenseken pontosabban dolgozik, kevesebb a félreértés, kevesebb a visszafelé-javítás.
- 12
Use-old a knowledge / project settings-et
A projekt beállításaiban megadhatsz állandó kontextust (hangvétel, márkaszínek, célközönség). Nem kell minden promptban újra leírnod, automatikusan figyelembe veszi.
- 13
Publish = élesítés egy kattintással
Jobb felül a „Publish” gomb. Első alkalommal kapsz egy ingyenes aldomaint (valami.lovable.app), később saját domain is köthető. A változtatások automatikusan élesedhetnek, ha kéred.
- +1 BÓNUSZ
Ments el minden jó promptot
Nyiss egy jegyzetet (Notion, Apple Notes, akármi), és gyűjtsd a bevált promptokat. Két hét múlva már saját mini-könyvtárad lesz, amit copy-paste-elhetsz az új projektekbe. Ez többet ér, mint bármelyik prompt-eladó tanfolyam.
Tedd élesbe, és oszd meg.
Ha eljutottál odáig, hogy tetszik amit látsz, már csak két dolog van hátra: publikáld az oldalt egy kattintással, majd küldd el a linket annak, akinek mutatnád.
Jobb felül a Publish gomb. Egy kattintás, és az oldalad él egy `yoursite.lovable.app` címen. Saját domaint is köthetsz hozzá utólag.
Másold a linket, és küldd el üzenetben, e-mailben, posztold ki. Az első weboldalad, amit te magad építettél, már a barátaid képernyőjén van.
Lássuk a valódi példákat.
Konkrét promptok, konkrét eredmények, élő linkekkel. Nézd meg, mit lehet kihozni egy-egy jól megfogalmazott mondatból.