Weboldal készítés AI-val: három út az első oldalig

Hogyan működik a weboldal készítés AI-val?

Leírod szövegben, milyen oldalt szeretnél, az AI pedig elkészíti a szerkezetet, a szövegek első változatát és a dizájnt, amit utána beszélgetésben vagy kattintással alakítasz tovább. A közzététel, a domain és a jogi kötelezettségek viszont ugyanúgy a te dolgod maradnak, mint eddig.

A mesterséges intelligencia weboldal készítés három, egymástól elég különböző eszközcsaládot takar. Az első a klasszikus weboldalépítő, amibe AI-t építettek: kérdez néhányat a vállalkozásodról, és kész sablont ad. A második az appépítő, ami kódot ír a leírásod alapján, és nemcsak oldalt, hanem működő alkalmazást is tud. A harmadik a legegyszerűbb: egy chatasszisztens megírja egyetlen HTML-fájlban az oldalt, te pedig feltöltöd egy tárhelyre.

A választás nem ízlés kérdése. Azon múlik, mit kell tudnia az oldalnak, és mennyit akarsz utána magad karbantartani. Egy fodrász bemutatkozó oldalának más kell, mint egy edzőnek, aki online foglalást és fizetést is szeretne.

AI weboldal készítő a weboldalépítőkben

Ha bemutatkozó oldal kell néhány aloldallal, kapcsolati űrlappal és képekkel, a weboldalépítő a legkényelmesebb út. A tárhely, a biztonsági frissítések és a mobilnézet a szolgáltató dolga, te csak a tartalommal foglalkozol.

A nagy weboldalépítők szinte mindegyike kínál valamilyen AI-indítást 2026 novemberében: a Wix, a Framer, a Squarespace és a Hostinger is generál oldalvázat egy rövid leírásból, és a szövegek átírásában is segít. A funkciók neve és tudása gyakran változik, ezért ezt a szolgáltató oldalán nézd meg, mielőtt döntesz. Ez az oldal egyik céghez sem kapcsolódik.

Az ár, amit ezért fizetsz, a mozgástér. A sablon kereteit nehéz átlépni, és a kész oldalt jellemzően nem tudod egy az egyben elvinni egy másik szolgáltatóhoz. Ha évekig ugyanott maradsz, ez nem gond. Ha bizonytalan vagy, nézd meg előre, mit tudsz exportálni.

Appépítők: amikor az oldalnak tudnia is kell valamit

Ha az oldalon foglalni, regisztrálni, árajánlatot számolni vagy fizetni is lehet, már inkább alkalmazásról beszélünk. Erre valók a promptból kódot író appépítők, mint a Lovable, a Bolt.new vagy a v0. Leírod, mit akarsz, és felülettel, adatbázissal, belépéssel együtt kapsz egy első változatot.

Ezt a világot két cikk részletezi. A Lovable-ről szóló útmutató a működést, a krediteket és a biztonsági csapdákat mutatja be egy időpontfoglaló példán. A vibe coding cikk azt, milyen munkamenettel marad kezelhető egy AI-jal írt projekt. Ide csak annyi tartozik, hogy egy sima bemutatkozó oldalhoz ez az út általában túl sok: több a mozgó alkatrész, és több dolog romolhat el.

Chatasszisztens és egy egyszerű tárhely

A legkevésbé ismert út sokszor a legjobb egy egyoldalas oldalhoz. A ChatGPT, a Claude vagy a Gemini megírja az egész oldalt egyetlen index.html fájlba, beépített stílussal. Ezt a fájlt feltöltöd egy statikus tárhelyre, például a Netlify, a Cloudflare Pages vagy a GitHub Pages szolgáltatásra, és a saját domainedet rákötöd.

Ennek két előnye van. A fájl a tiéd, bármikor átviheted máshová, és egy szövegszerkesztővel is javítható. A statikus oldal ráadásul gyors, és nincs benne adatbázis, amit feltörhetnének. A hátránya, hogy minden módosításhoz újra fel kell töltened a fájlt, és űrlapot vagy foglalást külön szolgáltatással kell megoldanod.

Hogy melyik chatbot írja a legtisztább kódot, az modellenként és hónaponként változik. A ChatGPT, Claude és Gemini összehasonlítása segít választani.

Első lépés: egyoldalas weboldal egy kis vállalkozásnak

Vegyünk egy valódi helyzetet: Kovács Péter szobafestő Vácon, ügyfelei eddig ajánlásból és Facebookról jöttek, most kellene egy oldal, amit a névjegykártyára is rá lehet írni. Nem kell foglalás, nem kell webshop. Egy oldal kell, ami megmondja, mit csinál, hol dolgozik, és hogyan lehet elérni.

Másold be az alábbi promptot egy chatasszisztensbe, cseréld ki a saját adataidra, és kérd, hogy egyetlen fájlban adja vissza az eredményt. A kész kódot mentsd el index.html néven, és nyisd meg duplakattintással a böngészőben. Telefonon is nézd meg, a böngésző fejlesztői nézetében vagy feltöltés után.

A szövegeket ne hagyd úgy, ahogy a modell megírta. A modell nem ismeri a munkáidat, ezért általános dicséreteket ír (megbízható, precíz, ügyfélközpontú), amiket bármelyik festő elmondhat magáról. Írd át a saját mondataidra: hány éve festesz, milyen munkát vállalsz szívesen, mit nem csinálsz. A prompt alapokról szóló cikk megmutatja, hogyan adj több kontextust, hogy már az első változat közelebb legyen.

Írj egy egyoldalas, magyar nyelvű bemutatkozó weboldalt egyetlen
index.html fájlba, beépített CSS-sel, külső könyvtár nélkül.

Vállalkozás: Kovács Péter, szobafestő és mázoló, Vác és 20 km-es környéke.
Szakasz 1: fejléc a névvel, egy mondatos bemutatkozás, "Árajánlatot kérek" gomb,
  ami a kapcsolat részre ugrik.
Szakasz 2: szolgáltatások listája: festés, glettelés, tapétázás, homlokzat.
Szakasz 3: munkaterület: Vác, Sződ, Göd, Verőce.
Szakasz 4: kapcsolat: telefonszám kattintható linkként, e-mail cím,
  nyitvatartás hétköznap 7 és 17 óra között. Űrlap ne legyen.
Lábléc: a vállalkozó neve, székhelye és adószáma (helyőrzővel).

Technikai kérések:
- mobilon is jól olvasható legyen, nagy betűkkel
- legyen benne title, meta description és egy h1 címsor
- ne használj sütit, analitikát és külső betűtípust
- semleges, világos színek, egy kiemelő szín
A szövegeket helyőrzőként írd, én cserélem ki a sajátjaimra.

Domain, tárhely, süti és adatkezelés

Egy oldal attól lesz élő, hogy van címe. A .hu domaint egy regisztrátornál veszed meg, és a tárhelyszolgáltató leírása alapján kötöd rá az oldalra. A weboldalépítők és az appépítők ezt a felületükön végigvezetik, a statikus tárhelyeknél néhány DNS-beállítás kell, amit a chatasszisztens is elmagyaráz lépésenként.

Az adatvédelem az a rész, amit az AI szívesen elhallgat. Ha az oldalon van kapcsolati űrlap, hírlevél-feliratkozás vagy foglalás, személyes adatot kezelsz, és ehhez adatkezelési tájékoztató kell, ami leírja, mit gyűjtesz, miért, meddig tárolod, és kinek adod tovább. Ha analitikát, hirdetési pixelt vagy beágyazott videót használsz, az sütiket tesz a látogató gépére, és ezekhez a GDPR szerint előzetes hozzájárulás kell, vagyis sütisáv, ami tényleg blokkol, amíg a látogató nem dönt.

Ezért írja a fenti prompt, hogy ne legyen süti és űrlap. Egy ilyen oldal nem kezel személyes adatot a látogatóról, és sokkal kevesebb papírmunkával jár. Üzleti oldalon a vállalkozás azonosító adatait (név, székhely, elérhetőség, adószám) akkor is érdemes feltüntetni. Az adatkezelési tájékoztató megírásában segíthet egy chatbot, de a kész szöveget nézesse át szakember, főleg ha egészségügyi vagy gyerekekkel kapcsolatos adatot is kezelsz.

SEO-barátak az AI által készített weboldalak?

Lehetnek, de nem automatikusan. A keresőnek mindegy, ki írta a kódot: az számít, hogy van-e az oldalon érdemi, saját szöveg, értelmes cím és leírás, gyorsan betölt-e, és hivatkoznak-e rá máshonnan.

Két dolgot érdemes tudni. Az AI-jal írt általános szöveg, amit bármelyik vállalkozó elmondhatna, nem fogja kiemelni az oldaladat a többi közül. A konkrétumok viszont igen: a települések, ahol dolgozol, a munkák fotói, a valódi árak vagy legalább az, hogyan számolsz. A másik: az appépítők egy része olyan oldalt készít, ami csak a böngészőben, JavaScripttel rakja össze a tartalmat. A Google ezzel általában megbirkózik, más keresők és AI-asszisztensek viszont nem mindig látják a szöveget. Bemutatkozó oldalnál ezért a statikus HTML vagy egy weboldalépítő a biztosabb.

Közzététel után add hozzá az oldalt a Google Search Console-hoz, és hozd létre vagy frissítsd a Google Cégprofilodat ugyanazzal a névvel, címmel és telefonszámmal. Helyi vállalkozásnál ez sokszor többet hoz, mint bármilyen finomhangolás az oldalon.

Ami innen hiányzik, és hol találod meg

Ha a fenti prompttal végigmentél, van egy működő, saját oldalad, és ez sokaknak elég. Ahol a legtöbben elakadnak, az a következő lépcső: űrlap, ami tényleg megérkezik, belépés, fizetés, adatbázis, saját domain, analitika úgy, hogy közben ne nyiss biztonsági rést. Ezt egy blogcikkben nem lehet rendesen végigvinni, és nem is próbálom.

A The Daniel's AI Courses appban ez a 04. modul, a Web appok építése: stackválasztás, adatbázis SQL nélkül, belépés, fizetés, publikálás, saját domain és analitika, napi öt perces leckékben. Ha előbb azt akarod megérteni, hogyan dolgozz együtt egy kódot író AI-jal és hogyan keress hibát vele, a 03. modul, a Vibe coding az alap hozzá. Ez a két modul Próval nyílik. Az első kettő, az AI-alapok és a Prompt mesterkurzus ingyenes, és a jó leírás, amin minden AI-jal épített oldal múlik, ott kezdődik. Ha érdekel, töltsd le az appot, és nézd meg az első leckéket.

Gyakori kérdések