SÚGÓ › AI integráció

AI Site Builder — egyperces weboldal-generálás

Prompt-alapú HTML-landing-page generálás Cloud-projektbe. Mire jó, mire nem, és hogyan írj jó prompt-ot.

Az AI Site Builder egy gyors prototípus-eszköz a PromNET-ben, amellyel szöveges leírásból tudsz egylapos weboldalt generálni, és egy kattintással deploy-olni egy Cloud-projektbe. A háttérben a Managed AI generál HTML+CSS-t a prompt-od alapján. Tipikusan 30-90 másodperc alatt kész egy bemutatkozó landing — innen tudod tovább iterálni.

BÉTA: az AI Site Builder még béta funkció. A generált oldal manuális ellenőrzést igényelhet (szöveg-pontosság, brand-color, mobile-layout). Élesre küldés előtt mindig nézd át a kódot és a megjelenést.

Mire jó?

Gyors landing-page

Egy új termék vagy szolgáltatás bemutatkozó-oldala, amit előbb akarsz élesben látni, mint amennyire egy designerrel egyeztetnél. Pl. egy hét végére kell egy “Coming soon” oldal a domain mögé — egy 30 másodperces prompt és kész.

MVP-validáció

Ha egy ötletet teszteltetnél (Reddit, Indie Hackers, hirdetés a Facebookon), és látnod kell, hogy a claim + CTA működik-e — az AI Site Builder elég jó kiindulás. Nem fogja eladni az embered helyett, de mérhető analytics-et tud adni a kattintásokról.

Prototípus ügyfélnek

Ügyfél-egyeztetésen demo-zod, hogy “kb. ezt képzelem”. Az AI által generált verzió 3 perc alatt megvan, és vita-alapnak tökéletes — “itt az image lehetne nagyobb, a fő színt zöldre”.

Saját ötlet-vázlat

Ha még csak gondolkozol egy projekten, kicsit más mint egy üres VS Code: látsz konkrét layout-ot, amit aztán kézzel finomítasz.

Mire NEM jó?

Reactive web-app (NEM)

Az AI Site Builder statikus HTML-t generál. Nincs benne React, Vue, state-management. Ha login-flow-t, dashboard-ot, valós backend-integrációt akarsz, ez nem fogja megoldani — Cloud-projektbe kézzel tölts fel egy Astro / Next.js / SvelteKit alkalmazást.

Pixelpontos brand-megfelelés (NEM)

A modell tudja, hogy “sötét téma + zöld kiemelő” mit jelent, de a pontos HEX-kódodat (#1ABC9C-t pl.) nem fogja eltalálni. Manuális finomítás szükséges a CSS-ben. Hosszú távon érdemes egy CSS-style-guide-ot előre megírnod, és azt copy-pastelni az iterációba.

Több-oldalas site (NEM)

Egy generálás = egy HTML-oldal. Több aloldalhoz (pricing, about, blog) külön-külön kell generálnod, vagy kézzel csatolnod a navigációhoz. A modell nem fogja össze őket egységes designba automatikusan.

SEO-optimalizált tartalom (RÉSZBEN)

Alap meta-tag-eket (title, description) és szemantikus HTML-t (h1, h2, p) generál a modell, de a kulcsszó-stratégiát, a hosszú-formátumú content-marketing szövegeket nem tervezi meg. SEO-igényhez használj külön content-kit-et.

Hogyan használd?

1. Cél-projekt kiválasztása

A /app/cloud oldalon válassz egy meglévő Cloud-projektet (vagy hozz létre egy újat egy html template-tel). Az AI Site Builder ide fogja deploy-olni a generált fájlt.

2. Site Builder megnyitása

Lépj a /app/ai/site-builder oldalra. Egy nagy prompt-mező és néhány opció vár:

• Prompt — a leírás szabad szövegben
• Stílus — light / dark / auto
• Cél-projekt — melyik Cloud-projektbe deploy-oljunk
• Aloldal-fájlnév — index.html, landing.html, stb.

3. Prompt megírása

Itt dől el, hogy mennyire használható lesz az output. Ld. a következő szekciót.

4. Generálás indítása

Kattints a “Generálás” gombra. A modell 30-90 másodperc alatt visszaadja a kész HTML-t — a felületen élő preview is látszik. Ha tetszik, kattints “Deploy a kiválasztott projektbe”.

5. Iteráció

Ha NEM tetszik, módosítsd a promptot (“a hős-szekciónál legyen szürke háttér”), és generálj újra. Minden generálás új quota-egységet fogyaszt — szóval érdemes egy kicsit átgondolni, mit írsz.

Prompt-tippek

Adj struktúrát

A modell jobban dolgozik, ha megmondod a szakaszokat, mint ha csak annyit írsz “csinálj egy SaaS landinget”.

Rossz:

Csinálj egy SaaS landinget.

Jó:

4 részből álló SaaS landing, sötét téma:

1. Hős-szekció (cím + alcím + fő-CTA: “Próbáld ki ingyen”)
2. 3 oszlopos feature-blokk ikonokkal
3. Ár-táblázat 2 csomaggal (Free, Pro 9 EUR/hó)
4. Footer kapcsolat + impresszum-link

Adj kontextust

A modell jobb a konkrét szakmából vett példáknál, mint az általános prompt-okra:

Rossz:

CRM-rendszer landingje.

Jó:

CRM-rendszer landingje építőipari kis-cégeknek (5-20 fős vállalkozók). Fókusz: ajánlat-küldés és számlázás egy helyen. Hangulat: megbízható, nem hipster. Konkurencia, akire utalhat: Billingo, Számlázz.hu — de CRM-mel.

Adj technikai követelményeket

Pl. ha pontos brand-szín kell:

Fő szín: #0F766E (zöld). Háttér: #0A0A0A. Betűtípus: Inter (Google Fonts). Mobile-elsős layout, breakpoint 768px-en.

Iteratív promptolás

Ha a 2. generálásnál akarsz módosítani, a teljes promptot **ismételd meg

• a változtatást**. A modell nem emlékszik a korábbi outputjára:

Az előző prompt + DE: a hős-szekcióban a CTA fölé tegyél egy “Itt a v1.0!” badge-t lila háttérrel.

Kvóta-felhasználás

Egy generálás = 1 chatbot-quota egység. Ez azt jelenti:

A kvóta megosztott a chatbot-üzenetekkel és a Site Builder-rel — ha a hónapban már 80 chatbot-üzeneted ment el, csak 20 site-generálásod maradt. A felhasználást a /app/billing oldalon részletesen látod (chatbot vs. site-builder vs. egyéb felosztás).

BYOK (saját Gemini-kulcs)

Ha BYOK módban hívod, a kvóta-elszámolás a Google-nál történik — a PromNET nem fogyaszt belőle havi limit-et. Cserébe Te állítod be a fizetést a Google AI Studio-ban.

Korlátok és figyelmeztetések

• Egy oldal generálás = 1 HTML-fájl (max. ~100 KB)
• Manuális ellenőrzés mindenképp javasolt — a modell néha hallucinál szövegeket (pl. nem létező feature-eket talál ki, ha nem mondod meg pontosan)
• Brand-color és font soha nem 100% pontos — ezt kézzel kell finomítani a <style> blokkban
• Reszponzivitás általában jó, de teszteld mobilon is
• A generált oldalon PromNET-attribúció nincs (a Te oldalad, a Te tartalmad)

Tipikus iteráció-flow

1. 1. generálás — alap prompt, megnézed a vázlatot
2. 2. generálás — finomítás (szín, szöveg, struktúra)
3. Deploy — a 2. verzió Cloud-projektbe kerül
4. Manuális finomítás — VS Code / Cursor megnyitva, a HTML-t kézzel csiszolod
5. Re-deploy — a kézi verzió felmegy ugyanarra a domain-re

A 4. lépés a kulcs — az AI a 70%-ot megcsinálja 5% idő alatt, a maradék 30%-ot Te csiszolod.

Hibaelhárítás

“Generálás sikertelen — kvóta lejárt”: A havi Managed AI üzenet-kvótád elfogyott. Vagy várj a hó-vége resetre, vagy válts BYOK-ra, vagy upgrade Cloud Pro-ra.

“A generált HTML üres / hibás”: Túl rövid vagy ellentmondásos prompt. Egészítsd ki konkrétumokkal, és próbáld újra.

“Deploy nem ment fel”: Cloud-projekt-kvóta tele lehet (méret-limit), vagy a target-fájlnév ütközik. A /app/cloud/ oldalon ellenőrizd a fájl-fát.

A jövőben tervezzük: több-oldalas generálás, brand-token-kit (előre elmentett szín-paletta + font), és image-hozzáadás (Unsplash-integráció). Most a fókusz: gyors, működő, iterálható egylapos kimenet.