Összefoglalás
A ChatGPT-5 képes arra, hogy akár 60 perc alatt több működő weboldalt is létrehozzon – dizájnnal, kóddal és elrendezéssel együtt. A kísérletben öt különböző stílusú honlap készült el (kertészet, játszóház, kávézó, üdítőital-márka), amelyek bemutatták az AI erősségeit és korlátait. A gyors weboldalkészítés mellett kiderült, hogy a képek és a speciális funkciók terén még szükség lehet utómunkára és finomhangolásra.
4 perc olvasási idő
Miről szól a kísérlet?
A szerző azt vizsgálta, hogy a ChatGPT-5 képes-e néhány részletes utasítás alapján komplett weboldalakat generálni – dizájnnal, színekkel, elrendezéssel, kóddal együtt. Először egy általános, „építs nekem egy weboldalt” jellegű kérésre kapott működő, de sablonos oldalt, majd négy különböző fiktív vállalkozás weboldalát kérte le részletesebb igényekkel.
Mit tud a ChatGPT-5 kódkészítésben?
Gyors indulás, sablonos alap
- Általános kérésekre is teljes, de generikus honlapot készít.
- Részletezett megadásokkal (célcsoport, hangulat, színpaletta, navigáció) jobb eredményt ad, de hosszabb ideig generál.
Szerkeszthetőség
A generált kód módosítható: kiegészíthető címmel, tanúsítványokkal, betűtípussal, színkódokkal stb.
1) „Always Sunny Garden Center” – Vidám, tavasz-hangulatú kertészet
A megadott elvárások lényege
- Derűs, színes, barátságos hangulat; családi vállalkozás érzet.
- Letisztult elrendezés, jól látható gombok, intuitív navigáció.
- Koherens, világos színpaletta.
Tapasztalat
- A prompt viszonylag hosszú volt; kevesebb részlettel is működött.
- ~5 perc alatt elkészült az oldal.
2) „Tumbles & Giggles” – Beltéri játszóház kisgyerekeknek
A megadott elvárások lényege
- Tiszta, világos, játékos vizuál; sok fehér tér és puha pasztell akcentusok.
- A szülők biztonsági és tisztasági kérdéseire adjon gyors választ.
- Árak, nyitvatartás, szabályok könnyen megtalálhatók.
Tapasztalat
Gyerekfotók hiányoztak, ezért újrakérés javasolt; a felelősségvállalási nyilatkozat kiemelten szerepelt.
3) „The Daily Grind Café” – Közösségi hangulatú kávézó
A megadott elvárások lényege
- Meghitt, modern környékbeli kávézó; fotó-központú megjelenés.
- Helyiek, táv-munkások, diákok a célcsoport; menü, cím/nyitvatartás gyorsan elérhető.
- Hiteles fotók emberekkel, akik élvezik a helyet.
Tapasztalat
- Az első verzió emberes fotók nélkül érkezett, és sablonos lett.
- Képbeillesztésre újrapromptolt – de túl sok képet adott, ami lefagyaszthatja a gépet.
4) „Tangerine Twist” – Üdítőital landing oldal
A megadott elvárások lényege
- Egyoldalas, konverzió-központú marketingoldal.
- Fiatal felnőttek képei narancssárga dobozos itallal (3–5 kép).
- Energiával teli, hiteles hangvétel; organikus, környezettudatos márkaérték.
Tapasztalat
- Az első verzió emberes fotók nélkül érkezett, és sablonos lett.
- Képbeillesztésre újrapromptolt – de túl sok képet adott, ami lefagyaszthatja a gépet.
4) „Tangerine Twist” – Üdítőital landing oldal
A megadott elvárások lényege
- Egyoldalas, konverzió-központú marketingoldal.
- Fiatal felnőttek képei narancssárga dobozos itallal (3–5 kép).
- Energiával teli, hiteles hangvétel; organikus, környezettudatos márkaérték.
Tapasztalat
- Valósághű fotók ismét hiányoztak elsőre.
- A termékrender és a szövegezés (pl. „100 napos elégedettségi garancia”) erős; a merész színek segítik a megkülönböztetést.
Hogyan tedd közzé a generált oldalt?
Gyors ellenőrzés és fájlok
- Böngészőben futtatás, apró javítások.
- A kód szétmentése:
index.html,style.css,script.js.
Tárhely és domain
- GitHub Pages: ingyenes, kezdőbarát.
- Megosztott tárhely (pl. Bluehost) vagy felhő (AWS, Google Cloud, DigitalOcean) haladóbb igényekhez.
- Domain vásárlása és összekötése a tárhellyel.
Tanulságok
Mire jó az AI-honlapépítés?
- Villámgyors rajt: infóközlő oldalak, kapcsolat, kínálat, rendelés-indítás.
- Képek: gyakran második kör kell; első kérésre nem mindig illeszti be jól.
- Haladó funkciók: több idő és finomhangolás szükséges.
Alternatív promptok
Általános „alap” honlap (kiinduló sablonhoz)
„Készíts komplett, reszponzív egyoldalas weboldalt HTML/CSS/JS-sel. Legyen hős szekció cím + alcím + CTA, szolgáltatások (3 kártya), rólunk, referenciák (3 logó), GYIK (4 tétel), kapcsolat űrlap. Adj modern tipográfiát (Google Fonts), hozzáférhető színkontrasztot, fix felső navigációt horgonylinkekkel. A kód legyen kommentelt, külön style.css és script.js fájllal, mobilesorrend-optimalizálással (flex/grid).”
Kertészet – „Always Sunny Garden Center”
„Tervezd meg egy családi kertészet vidám, tavaszi hangulatú egyoldalas oldalát. Célok: könnyű eligazodás, jól látható CTA (’Időpontkérés’ / ’Kínálat megtekintése’), színes, mégis letisztult paletta (zöld, sárga, fehér), ikonos szolgáltatás-kártyák (palánták, cserjék, eszközök), vevői idézetek, nyitvatartás és cím. A navigáció legyen ragadós; a gombok nagy, kontrasztos, fókusz-barát stílussal. Adj microcopyt (pl. ’Barátságos szakértőink segítenek’).”
Beltéri játszóház – „Tumbles & Giggles”
„Készíts szülőbarát, világos dizájnt sok fehér térrel és pasztell akcentusokkal. Fent hero blokk rövid értékígérettel (biztonság, higiénia, öröm). Szekciók: Árak & nyitvatartás, Szabályok & biztonság, Foglalás gomb, Galéria (helykitöltő képekkel), GYIK (belépés, korhatár, cipő). Minden fontos infó 3 kattintáson belül legyen elérhető. Adj egy letölthető felelősségvállalási nyilatkozat helyét (dummy link).”
Kávézó – „The Daily Grind Café”
„Tervezd meg egy környékbeli kávézó meghitt, közösségi weboldalát, fotó-központú elrendezéssel. Szekciók: Hero (’Kézműves kávé, közösségi tér’), Napi ajánlat (3 kártya), Menü (kategóriák, árak), Helyszín & nyitvatartás (beágyazott térkép helye), Események (open mic, könyvklub), Hírlevél. Képeknél használj helyettesítő képeket/alt-szövegeket, és biztosíts lazy-loadot. A stílus legyen meleg (barnás, krém), modern tipó.”
Üdítőital landing – „Tangerine Twist”
„Készíts konverzió-orientált egyoldalas landinget élénk narancs fókuszszínnel, célcsoport: Gen Z. Hero: termékfotó helye + ’Vásárlás’ gomb. Értékajánlat (természetes összetevők), Társadalmi bizonyíték (3 rövid vélemény), Íz-szekció (3 ikon), Fenntarthatóság blokk, 100 napos elégedettségi garancia, GYIK, lábléc jogi elemekkel. Kérlek, készíts tiszta HTML/CSS/JS struktúrát, jól elnevezett osztályokkal, és adj hozzá alap SEO meta-tageket (title, description, og:title, og:image helyőrző).”
Zárás – mikor éri meg?
Ha gyors, működő prototípust vagy egyszerű bemutatkozó oldalt szeretnél, a ChatGPT-5 remek rajt. Valósághű képek és speciális funkciók esetén számíts plusz körökre, újrapromptolásra és manuális finomhangolásra.
Források:
• I Built 5 Websites in Under an Hour with ChatGPT-5 — Here’s How it’s Possible | Tom’s Guide
