Az AI alapból az egész kontextust veszi figyelembe. Ha csak egy szekciót szeretnél módosítani, mondd meg pontosan: „Csak a Hero szekciót írd át — a többi maradjon változatlan.” Ha sok változtatást kérsz egyszerre, az AI hajlamos mindent újragenerálni. Az arany szabály: egy kérésnél egy változtatás.

Túl rövid vagy kétértelmű volt a kérés. Az AI a legvalószínűbb értelmezést választja — ami nem mindig a tiéd. Adj kontextust: „A Hero szekció CTA-gombjának a szövege legyen »Kezdem az ingyenes hetet«, a gomb háttérszíne maradjon a jelenlegi narancs, és a gomb a képernyő közepén legyen.” Minél pontosabb, annál kevesebb iteráció kell.

A hosszú munkamenetek során az AI „elfelejthet” korábbi részleteket, ha a kontextusablak megtelik. Ha fontos elem tűnik el, szólj rá: „A lábléc tartalma az előző verzióban [X] volt — állítsd vissza.” Szokj rá arra, hogy minden nagyobb változtatás után az aktuális fájlt nyitva tartod.

Használd a H4 univerzális promptot — ez bármilyen oldalhoz jó kiindulás, és a Claude rákérdez a hiányzó részekre. Ha tudod az oldaltípust, válaszd a hozzá passzoló kategóriát a Prompttárban.

A legtöbb esetben hiányzik a reszponzív tesztelés lépése. Kérd meg az AI-t: „Ellenőrizd, hogy mobilon (320px és 768px szélességen) is rendesen néz-e ki, és javítsd a törési pontokat.” Ha Tailwind-et használsz, a sm: és md: breakpoint-ok kézi ellenőrzése is gyors segítség.

Az AI nem tudja, mi volt az eredeti szándék, ha nem mondod el. Mielőtt módosítást kérsz, add meg a kontextust: „A meglévő dizájn irányt (betűtípus, színpaletta, elrendezés) tartsd meg — csak [X részt] változtasd.” Érdemes a fontos CSS-változókat, betűtípusokat külön kiemelni az AI-nak.

Ez általában két dolog hiányára vezethető vissza: konkrét referenciák és a Frontend Design skill. 1. Adj 2–3 Dribbble vagy Awwwards linket azzal, hogy „hasonló vizuális irányt szeretnék”. 2. Ellenőrizd, hogy a Frontend Design skill aktív-e — ez kifejezetten a generikus AI-megoldásokat tiltja.

A promptok mindegyike tartalmaz egy szabályt, ami ezt tiltja. Ha mégis előfordul, írj rá: „Cseréld le az összes angol és latin placeholder szöveget valós, üzletileg használható magyar szövegre.” Ha rendszeresen előfordul, add hozzá a prompthoz: „TILOS: Lorem ipsum, placeholder latin szöveg, angol szöveg.”

Zárd be teljesen a terminált, nyiss újat, mert a PATH gyakran csak új ablakban frissül. Ha npm-mel telepítettél, ellenőrizd a Node.js verziót: node --version (minimum v18). Telepítési útmutató →

A HTML fájlnak UTF-8 kódolással kell elmentve lennie. Kérd az AI-t: „Győződj meg arról, hogy a fájl UTF-8 kódolású, és a <head>-ben szerepel a <meta charset="UTF-8"> tag.” Szerkesztőben (VS Code) a jobb alsó sarokban ellenőrizheted az aktív kódolást.

A legerősebb modellek általában több keretet és költséget igényelnek. A nagy tervezést és nehéz hibakeresést végezd erősebb modellel, az apró módosításokat költséghatékonyabb modellel. Mindig az aktuálisan elérhető kínálatból válassz. Lásd: Modell kiválasztása →