Google AI Studio mesterkurzus 1. rész: Építs saját weboldalt

Sokan azt hiszik, hogy a saját weboldalhoz vagy drága fejlesztő, vagy havi előfizetéses honlapépítő kell. Pedig a Google egyik legkevésbé ismert, de legerősebb eszköze, az AI Studio képes arra, hogy percek alatt, ingyen generáljon neked működő weboldalt, képekkel és modern dizájnnal. Nem kell értened a HTML-hez, elég, ha tudsz magyarul utasítást adni.

A Google AI Studio nem egy egyszerű csevegőrobot, mint a ChatGPT. Ez egy fejlesztői környezet, ahol a mesterséges intelligencia nemcsak válaszol, hanem dolgozik helyetted. Ebben a háromrészes cikksorozatban bemutatjuk, hogyan hozhatsz létre profi eszközöket a semmiből.

Az első részben egy modern, értékesítési célú weboldalt készítünk egy e-könyv számára. Kövesd a lépéseket, és a cikk végére neked is lesz egy saját oldalad.

Mire lesz szükséged?

Nem sok mindenre.

1. Egy Google-fiókra.
2. Öt percre.
3. A Google AI Studio megnyitására a böngésződben: aistudio.google.com

1. lépés: A felület megnyitása

Amikor először belépsz az oldalra, egy letisztult, sötét felület fogad. Ne ijedj meg a sok gombtól, nekünk most csak egyetlen dologra lesz szükségünk.

A bal felső sarokban kattints a Create New gombra. A rendszer megkérdezi, mit szeretnél. Válaszd a Chat Prompt lehetőséget. Ez pont úgy néz ki, mint egy Messenger ablak, ide fogjuk beírni az utasításainkat.

2. lépés: A tökéletes utasítás megírása

A weboldal lelke a prompt, vagyis az utasítás. Mivel a Google modelljei már kiválóan tudnak kódolni, nem kell technikai nyelven beszélned. Viszont minél pontosabban fogalmazol, annál szebb lesz az eredmény.

Másold be az alábbi szöveget a chat ablakba.

„Készíts egy modern, reszponzív, mobilbarát weboldalt egy digitális e-könyv számára. A könyv címe: A nagy magyar prompt kézikönyv 2026.

A weboldalnak tartalmaznia kell az alábbi részeket.

1. Fejléc a címmel és egy letisztult menüvel.
2. Egy látványos fő szekciót (Hero section), ahol van egy borítókép, egy rövid, figyelemfelkeltő leírás és egy Vásárlás gomb.
3. Termékleírás részt, ahol pontokba szedve szerepel, mit tanulhat az olvasó.
4. Láblécet a szerzői jogokkal.

Kérlek, a borítókép helyére generálj egy valós képet a Nano Banana képgeneráló eszközzel (vagy használj helykitöltő képet, ha az nem elérhető). A dizájn legyen a következő:
Betűtípus: Host Grotesk
Arculati színek:
INDIGÓ: elsődleges arculati szín, háttérszín, betűk, nagyobb formák, #0850C9
VILÁGOSSZÜRKE: elsődleges arculati szín, háttérszín, betűk, nagyobb formák, #EEEEEE
PORTLAND NARANCS: másodlagos arculati szín, kiegészítő tónus, kisebb formákhoz.
A weboldal háttérszíne sötét legyen. Logónak használd a feltöltött png fájlt. Egyetlen HTML fájlt készíts, amiben benne van a CSS stílus is.”

Ezután nyomd meg a Run (Futtatás) gombot, vagy nyomj Entert.

3. lépés: A kód futtatása és ellenőrzése

A rendszer most elkezd gondolkodni. Látni fogod, ahogy sorról sorra írja a kódot. Ne ijedj meg a színes szövegtől, neked ezzel nem kell foglalkoznod.

Amint végzett (általában 30-60 másodperc), a jobb felső sarokban vagy a kódablak tetején megjelenik egy Preview (Előnézet) gomb, ami gyakran egy kis szem ikon vagy egy „Run” feliratú gomb, attól függően, épp melyik verziót használod. Ha nem látod, akkor másold ki a kódot, a jobb felső sarkában lévő másolás ikonnal.

Hogyan nézd meg, mit alkottál, ha nincs Előnézet gomb?

1. Nyiss egy Jegyzettömböt a számítógépeden.
2. Másold be a generált kódot.
3. Mentsd el a fájlt index.html néven az Asztalodra.
4. Kattints rá duplán. A fájl megnyílik a böngésződben, és máris látod a kész weboldalt.

4. lépés: Finomhangolás beszélgetéssel

Valószínűleg az első verzió nem lesz tökéletes. Lehet, hogy a gomb túl kicsi, vagy a szöveg színe nem olvasható. Itt jön képbe az AI Studio ereje. Nem kell átírnod a kódot. Csak írd be a chatbe a kérésedet, mintha egy grafikussal beszélnél.

Például írd be ezt.

„A logó legyen az, amit feltöltöttem. A betűtípust használd minden megjelenő szövegnél. A megveszem a könyvet gomb legyen nagyobb.”

Nyomj Entert. A rendszer újraírja a kódot a kéréseid alapján. Frissítsd a index.html fájlodat az új kóddal, és nézd meg az eredményt.

5. lépés: A képek cseréje

A Google AI Studio néha csak színes dobozokat tesz a képek helyére. Ha saját borítóképet szeretnél, keresd meg a kódban az img src="..." részt. (A Jegyzettömbben a Ctrl+F gombbal tudsz keresni).

A két idézőjel közé másold be a saját képed internetes linkjét, vagy csak írd be a fájl nevét, ha a kép ugyanabban a mappában van, mint a weboldalad.

Hogyan tedd élessé?

Most van egy működő weboldalad a saját gépeden. Ahhoz, hogy a világ is lássa, fel kell töltened egy tárhelyre. Erre tökéletes megoldás a Netlify Drop vagy a GitHub Pages, amelyek ingyenesek.

A Netlify Drop használata a legegyszerűbb.

1. Keresd fel a Netlify Drop oldalt.
2. Fogd meg az index.html fájlodat (és a képeket, ha vannak).
3. Húzd be őket a böngésző ablakába.
4. Pár másodperc múlva kapsz egy internetes linket, amit bárkinek elküldhetsz.

Ez csak a kezdet

Gratulálunk! Épp most spóroltál meg több tízezer forintot, és létrehoztad az első saját fejlesztésű oldaladat. Fontos megjegyeznünk, hogy ez csak a váz. A fizetési bekötések és egyéb automatizmusok még nincsenek az oldalad mögött, arról még gondoskodnod kell, ha valóban élesben ki szeretnéd lőni a weboldalad. A következő részben emeljük a tétet. Megmutatjuk, hogyan kösd be a Google élő adatait, hogy egy valós idejű tőzsdefigyelő alkalmazást készíts. Készítsd a Gmail fiókodat, szükség lesz rá!