Vibe coding webshopra: egyedi dizájn AI ügynökkel és Nitrogennel

Röviden: a vibe coding olyan programozás, amelyben Ön szavakkal írja le egy AI ügynöknek, mit szeretne, a kódot pedig az ügynök írja meg. A CloudCartban így készül egyedi webshop dizájn a Nitrogennel: létrehoz egy vásárlói felületet az admin felületen, a kapott utasítást bemásolja a Claude Code, a ChatGPT Codex, a Cursor vagy a Gemini CLI ügynökbe, majd magyarul elmondja, milyen legyen. A termékkatalógus, a rendelések és a fizetés a CloudCartban maradnak.

Az útmutatót a CloudCart csapata írta, és a Nitrogen admin képernyőit és szabályait követi. Megmutatja az utat az üres vásárlói felülettől a saját domainen futó webshopig: mit csinál az ügynök, mit kell Önnek elvégeznie, és hol vannak a határok.

Mi az a vibe coding?

A vibe coding olyan munkamódszer, amelyben az ember elmondja egy AI modellnek, milyen eredményt vár, megnézi, amit kapott, és módosításokat kér, a kódot pedig nem soronként írja. A kifejezést Andrej Karpathy, az OpenAI egyik alapítója vezette be 2025 februárjában (Wikipédia: Vibe coding). A Collins szótár 2025-ben az év szavának választotta (BBC News, angolul). Magyar megfelelője nem terjedt el, a szakmai szövegek is angolul használják.

Webáruházban ez azt jelenti, hogy a dizájnt úgy írja le, mintha egy grafikusnak adna briefet: „kevesebb szöveg, nagy termékfotók, a kosár mobilon mindig látszódjon”. Az ügynök a mondatokat kóddá alakítja, elindítja a vásárlói felületet az Ön számítógépén, és megmutatja, mit készített. Ön jóváhagyja, vagy mást kér.

A vibe coding kockázata az a kód, amelyet senki sem nézett át: hibák, lassú oldalak, biztonsági rések. Ezért a CloudCart két dolgot ad az ügynöknek, amelyek keretet szabnak a munkájának: egy kész kezdőprojektet a webshop összes oldalával, és egy képességet (skill) a szabályokkal, hogy hogyan építsen rá.

Mi a headless webshop, és mi a Nitrogen?

A headless webshop olyan webáruház, amelyben a vásárlók által látott felület külön alkalmazás, és külön rendszer tárolja a termékeket, a rendeléseket és a fizetéseket. A két rész API-n keresztül beszél egymással. Így a vásárlói felület bármilyen lehet, a kereskedelem pedig a platformon marad.

A Nitrogen a CloudCart headless technológiája. Egy Nitrogen vásárlói felület a webshop saját alkalmazása, amely a CloudCart kezdőprojektjéből készül (cloudcart/nitro-starter), és a Storefront API-n keresztül olvassa a webshopot. A felület a Nován, a CloudCart Nitrogen-tárhelyén fut, amely a Cloudflare Workers szolgáltatásra épül. Szervert nem kell üzemeltetnie, és saját Cloudflare fiók sem kell.

	Kész sablon	Nitrogen vásárlói felület
Honnan indul	Sablon a CloudCart katalógusából	A kezdőprojekt kész oldalakkal
Szabadság a dizájnban	Színek, betűtípusok, modulok, blokkok és egyedi CSS/JS	Teljes: minden oldal és komponens a webshop saját kódja
Technológia	A platform szerverén összeállított oldalak	React, React Router, TypeScript és Tailwind CSS
Ki módosítja	Ön, az admin felületen	AI ügynök vagy fejlesztő; a módosítás kód és új élesítés
Saját mezők (metafields, metaobjects)	Nem jelennek meg a vásárlói felületen	Ott jelennek meg, ahol a dizájn akarja
Élesítés	A sablon azonnal lecseréli a webshop kinézetét	Saját cloudcart.dev címen fut, amíg a domaint rá nem irányítja

Mindkét esetben a termékeket, kategóriákat, vásárlókat, rendeléseket, kedvezményeket, fizetést és szállítást ugyanabban az admin felületben kezeli. A kész sablon kiválasztását és beállítását a webshop sablonokról szóló cikk írja le.

Kinek való az AI-jal készített webshop dizájn?

A Nitrogen annak a webáruháznak való, amelynek olyasmi kell, amit a sablon nem ad. A kész sablonok fájljai nem szerkeszthetők, saját sablont pedig nem lehet feltölteni, ezért a teljesen egyedi dizájn a Nitrogenen készül. Ezekben az esetekben éri meg:

• Márka, amely minden sablontól eltérő felületet akar. Saját tipográfia, görgetésre induló animációk, magazinszerű oldalak.
• Termék, amelyet egy eszköz magyaráz el. Bútorkonfigurátor, mennyiségkalkulátor, modellek összehasonlítása, ajándékdoboz összeállítása.
• Tartalom saját mezőkből. Mérettáblázat, összetevők, a tervező adatai, vagy teljes oldalak olyan szekciókból, amelyeket az admin felületen tölt ki metafieldként és metaobjectként.
• Webshop több vásárlói felülettel. Külön felület egy kampánynak vagy egy új márkának, saját cloudcart.dev címen, ugyanazzal a termékkatalógussal.

Mikor elég a kész sablon?

A kész sablon akkor elég, ha még ma árulni szeretne, kód, ügynök és fejlesztő nélkül. A legtöbb új webshopnak elég egy sablon a saját logójával, színeivel és fotóival, a beállításként nem elérhető részleteket pedig egyedi CSS/JS kóddal adja hozzá. Később a Nitrogenre váltással semmi sem vész el az admin felületen, a kezdőprojekt pedig megtartja a webshop címeit, így a linkek és a Google-helyezések tovább működnek.

Helyzet	Javaslat
Új webshop, az első eladások a cél	Kész sablon
Más szín, betűtípus vagy főoldal kell	Kész sablon és a sablonszerkesztő
Konfigurátor vagy termék-összehasonlítás kell	Nitrogen
Oldalak saját mezőkből, amelyeket az admin felületen tölt ki	Nitrogen
A felületnek egy nagy márka szintjén kell kinéznie, kompromisszum nélkül	Nitrogen

Mire van szüksége, mielőtt elkezdi?

Egy Nitrogen vásárlói felülethez CloudCart webshop, parancsokat futtatni tudó AI ügynök és néhány perc beállítás kell. A legtöbb eszközt az ügynök maga ellenőrzi és telepíti.

• AI ügynök. Claude Code, ChatGPT Codex, Cursor, Gemini CLI vagy VS Code. Az ügynöknek parancsokat kell futtatnia, ezért a böngészős csevegő nem elég.
• Node.js és git. A kezdőprojekt Node.js 22 vagy 24 verzión fut. Az ügynök ellenőrzi és ha tudja, telepíti őket; ha rendszergazdai engedély kell, megmondja, mi hiányzik.
• PAT token. Személyes hozzáférési kulcs az admin felületről (bal alsó menü → „PAT tokenek”). Csak a webshop tulajdonosa hozhatja létre.
• A „Nitrogen Storefronts” jogosultság. A tulajdonosnak mindig megvan. Egy munkatárs csak akkor látja a vásárlói felületeket, ha a csapatbeállításokban megkapta ezt a jogot.
• GitHub fiók (opcionális). Ha azt szeretné, hogy minden módosítás push után magától élesedjen. Nélküle a felület egy paranccsal élesíthető.

Az ügynök a CloudCart két eszközével dolgozik: a cloudcart-nitrogen képességgel, amely az építés szabályait tartalmazza, és a Storefront MCP-vel, amely a Storefront API sémáját adja. A Claude Code, a Cursor, a Gemini CLI és a VS Code a CloudCart bővítményével kapja meg a képességet. A ChatGPT Codex és a többi MCP kliens a CloudCart nyilvános tárhelyéről olvassa be.

Hogyan készül a webshop dizájn AI ügynökkel, lépésről lépésre?

A vásárlói felületet az admin felületen hozza létre, a kódot az ügynök írja az Ön gépén, az élesítés pedig GitHub pushsal vagy egyetlen paranccsal történik. A teljes út:

1. Nyissa meg a Nitrogent az admin felületen. A címe /admin/nitrogen. Az admin menüjében egyelőre nincs rá link, ezért a címet közvetlenül nyissa meg. Itt látja a vásárlói felületeit, és hogy a legfeljebb 10-ből hányat használ.
2. Hozzon létre egy vásárlói felületet. Kattintson a „Create storefront” gombra, adjon nevet, és válassza ki az élesítés módját: GitHub vagy parancssor (CI/CD). A választás később nem módosítható. A cím a névből készül: {név}-{kód}.cloudcart.dev.
3. GitHub esetén kösse össze a fiókot. Az admin végigvezeti a CloudCart Nitrogen GitHub alkalmazás csatlakoztatásán. Utána új tárhelyet hoz létre a kezdőprojektből (privátat vagy nyilvánosat), vagy kiválaszt egy meglévőt. A beállítást az admin lépésenként mutatja.
4. Parancssor esetén mentse el a tokent. Kap egy élesítési tokent, amely csak egyszer jelenik meg, és a következő lépések parancsait.
5. Másolja ki az ügynöknek szánt utasítást. A vásárlói felület oldalán kész utasítás van az AI ügynöknek. Ez pontosan ennek a felületnek a parancsait tartalmazza, parancssor esetén az élesítési tokent is. Ugyanez a szöveg a GitHubon is megjelent, hogy az ügynök ellenőrizhesse: a CloudCart hivatalos utasításáról van szó.
6. Illessze be az ügynökbe. Claude Code, ChatGPT Codex, Cursor vagy Gemini CLI. Az ügynök megkérdezi, milyen nyelven dolgozzanak (válassza a magyart), ellenőrzi az eszközöket és telepíti a hiányzókat, a PAT tokennel összeköti a webshopot, és letölti a projektet a kezdősablonból.
7. Az ügynök helyben elindítja a felületet. Lefuttatja az utasítás parancsait: GitHub esetén git clone paranccsal klónozza a tárhelyet, parancssor esetén cloudcart nitrogen init paranccsal hozza létre a projektet, utána jön a cloudcart nitrogen link, a cloudcart nitrogen env pull és az npm run dev. A vásárlói felület az Ön gépén indul el, a webshop valódi termékeivel.
8. Írja le a dizájnt. Az ügynök először a szakterületről, az oldalakról és a funkciókról kérdez, és projekttervet ír. Utána öt szakaszban dolgozik: a webshop és a mobil dizájn, az építés, SEO és biztonság, analitika és pixelek, végül a teljes oldal ellenőrzése.
9. Élesítse a felületet. GitHub esetén minden push a fő ágra élesíti a felületet. Parancssor esetén az ügynök a cloudcart nitrogen deploy parancsot futtatja, de csak ha Ön kéri, mert az élesítés lecseréli az élő felületet. Az első élesítés néhány percig tart, amíg a cím válaszolni kezd.
10. Irányítsa rá a domaint. A felület Domains fülén válassza ki a domaint és a „Route to this storefront” lehetőséget. A domainnek már a webshopban kell lennie, a DNS-t pedig a CloudCartnak kell kezelnie. Utána élesítse még egyszer a felületet, hogy átvegye az új domaint. A „Back to the store theme” bármikor visszaadja a domaint a sablonnak.

Fontos: mielőtt ráirányítja a domaint, ellenőrizze, hogy a felület lefedi-e a termékek, a kategóriák és az oldalak címeit. Az admin a megerősítésnél erre figyelmeztet.

Minta promptok webshop dizájnhoz AI-jal

A jó dizájn prompt megmondja, kinek szól a webshop, mit érezzen a vásárló, és mi a legfontosabb mobilon. Íme három példa, amelyet a kezdeti beállítás után beilleszthet, és a saját webshopjához igazíthat.

Kozmetikai webshop

„A webshop natúr kozmetikumokat árul 25 és 45 év közötti nőknek. Világos, nyugodt dizájnt kérek sok levegővel, egyetlen kiemelő színnel (sötétzöld) és nagy termékfotókkal. A termékoldalon az összetevők metafieldből táblázatban jelenjenek meg, a kosár gomb alatt pedig legyen egy »Ehhez a bőrtípushoz ajánljuk« blokk. Főoldal: nagy fotó, három kategória, a legnépszerűbb termékek és vásárlói vélemények. A mobil az elsődleges.”

Bútor webshop

„Egyedi méretű bútorokat árulunk. A termékoldalra konfigurátort kérek: a vásárló kiválasztja a méretet, a kárpitot és a láb színét, azonnal látja az árat, és kosárba teszi. A dizájn legyen szigorú, a felső részen sötét háttérrel, vékony betűkkel és teljes képernyős fotókkal. A kategóriákban legyen szűrés méret és anyag szerint. Mielőtt kódot írsz, mutasd meg a tervet.”

Kávé és élelmiszer webshop

„Frissen pörkölt kávét árulunk. Meleg dizájnt kérek barna és krémszínű tónusokkal, nagy fotóval a szemekről és egy rövid történettel minden tételről, amelyet az admin felületen metaobjectként töltök ki. A termékoldalon a származás, a pörkölési fok és az ízjegyek három ikonnal jelenjenek meg. A kosárba tegyél egy »Gyakran vásárolják együtt« blokkot. Az oldalak mobilon legyenek gyorsak, legalább 90-es pontszámmal.”

Jó szokások a promptok írásához:

• Ha a dizájn már kész, üzenetenként egy módosítást kérjen. Így látja, mi mit változtatott.
• Nagy feladatnál előbb a tervet kérje, utána a kódot.
• Adjon példát: egy webshop képét, amely tetszik, vagy egy leírást, például „úgy nézzen ki, mint egy magazin”.
• Mondja meg, mit nem szeretne: felugró ablakokat, automatikusan induló videót, túl sok színt.
• Csak akkor élesítsen, ha a felületet helyben már megnézte telefonon és számítógépen is.

Melyik AI ügynököt válassza a Nitrogen vásárlói felülethez?

Mind a négy ügynök ugyanazzal az utasítással készít Nitrogen vásárlói felületet. A különbség az, hogy hol futnak, és hogyan kapják meg a CloudCart képességét.

Ügynök	Hol fut	A cloudcart-nitrogen képesség	Kinek ajánljuk
Claude Code	Terminál és asztali alkalmazás	A CloudCart bővítményével	A teljes felülethez az elejétől a végéig
Cursor	Kódszerkesztő AI ügynökkel	A CloudCart bővítményével	Ha látni szeretné a fájlokat és a módosításokat
Gemini CLI	Terminál	A CloudCart kiterjesztésével	Ha a Google eszközeivel dolgozik
ChatGPT Codex	Az OpenAI alkalmazása és terminálja	A CloudCart tárhelyéről olvassa be	Ha már fizet a ChatGPT-ért

Részletes útmutató mindegyik ügynökhöz: Claude Code webshophoz (és a Claude Code dokumentációja, angolul), Cursor AI webshophoz, webshop ChatGPT-vel és Codexszel, valamint Gemini CLI webshophoz. A Claude Code összekötéséről a Claude Code és CloudCart, a Cursorról a Cursor és CloudCart oldal szól.

Mi marad a CloudCartban?

Nitrogen vásárlói felület mellett az összes adat és a teljes kereskedelem a CloudCartban marad. Az ügynök csak azt cseréli le, amit a vásárló lát.

• A termékkatalógus. A termékeket, termékváltozatokat, kategóriákat, márkákat, készletet és árakat az admin felületen kezeli. A felület ezeket a Storefront API-n keresztül olvassa.
• A rendelések, a vásárlók és a kedvezmények. Ugyanabba a listába kerülnek, akármelyik felületről érkezett a rendelés.
• A pénztár és a fizetés. A felület kosara a platform pénztárának adja át a rendelést. Ráirányított domainen a fizetési címek, a képek, az admin felület, a sitemap, a feedek, a robots.txt és az llms.txt továbbra is a CloudCartból működnek.
• A tartalom. A CMS oldalakat, a blogot, a menüket, a metafieldeket és a metaobjecteket az admin felületen tölti ki. A metaobjecteket a Beállítások → Metaobjects menüben hozza létre.

A kezdőprojekt már tartalmazza a webshop oldalait: főoldal, termékoldal termékváltozatokkal, csomagokkal, véleményekkel, gyors rendeléssel és készletértesítővel, kategóriák szűrőkkel, kereső gépelés közbeni találatokkal, kosár ajánlatokkal, vásárlói fiók e-mailben kapott kódos belépéssel, blog, oldalak, fizikai üzletek, termékvisszaküldés, /robots.txt és /llms.txt. Az ügynök ezek dizájnját alakítja át, nem a nulláról építi őket.

Korlátok: mit nem tud az AI ügynök?

A Nitrogennek világos határai vannak, amelyeket érdemes a projekt előtt ismerni. Néhány műveletet csak Ön végezhet el az admin felületen, mások egyelőre nem lehetségesek.

Korlát	Mit jelent a gyakorlatban
Legfeljebb 10 vásárlói felület webshoponként	Minden Nitrogent tartalmazó csomagban ugyanennyi. A korláton felül egy régit kell törölnie.
A domaint egy felület szolgálja ki	A többi csak a saját cloudcart.dev címén fut.
Csak production környezet	Nincs tesztcím egy ághoz vagy pull requesthez. Az ellenőrzés helyben, élesítés előtt történik.
Legfeljebb 50 saját változó és 10 élesítési token felületenként	A változó módosítása a következő élesítéstől érvényes.
Egy nyelv webshoponként	Minden nyelv külön webshop, saját felülettel és domainnel.
Automatikus élesítés csak GitHubról	Más Git szolgáltatások a parancssoron vagy CI/CD-n keresztül működnek.

Amit az ügynök nem végez el, és megkéri Önt, hogy az admin felületen tegye meg:

• Vásárlói felület létrehozása és törlése.
• Élesítési tokenek.
• A domain ráirányítása a felületre és visszaadása a sablonnak.
• PAT token létrehozása.

A kész sablonok fájljait az ügynök nem szerkesztheti, mert ezek a kereskedők számára zártak. A sablonszerkesztő, a modulok és az egyedi CSS/JS nem hatnak a Nitrogen felületre: a kinézete teljes egészében a saját kódja. Ráirányított domainen a 301-es átirányításokat a felület kezeli, a webshop e-mailjeiben lévő, a platform oldalaira mutató linkek (például leiratkozás vagy a rendelés oldala) ott egyelőre nem működnek. Az ügynök csak akkor élesít, ha Ön kéri.

Hogyan ellenőrizze a felületet élesítés előtt?

A vibe codinggal készült vásárlói felületet úgy ellenőrzi, mint bármely weboldalt: mobilon, sebességre, SEO-ra és egy próbarendeléssel. A CloudCart képessége minden feladatot a teljes oldal ellenőrzésével zár, de az utolsó szó az Öné.

1. Először a mobil. Nyissa meg a felületet helyben a telefonján, és járja végig az utat a főoldaltól a kosárig.
2. Sebesség. A képesség legalább 90-es mobil pontszámot céloz a Lighthouse-ban. Hogy mit mér és mit jelent, azt a PageSpeed Insights és Core Web Vitals cikk írja le.
3. SEO. Ellenőrizze a termékek címeit, leírásait és URL-jeit. A kezdőprojekt megtartja a webshop címeit, így a régi linkek tovább működnek.
4. Pixelek és analitika. Kérje meg az ügynököt, ellenőrizze, hogy a CloudCart Analytics eseményei és az Ön pixelei a sütik elfogadása után indulnak.
5. Próbarendelés. Rendeljen saját maga a cloudcart.dev címről, fizessen, és nézze meg, hogy a rendelés megjelent-e az admin felületen.
6. A domain. Irányítsa rá, és élesítse még egyszer a felületet. Ha valami nincs rendben, a „Back to the store theme” azonnal visszahozza a sablont.

Gyakran ismételt kérdések

A saját vásárlói felületről és élő példákról bővebben a Dizájn a Nitrogennel oldalon olvashat, a fejlesztői eszközökről a fejlesztőknek szóló oldalon. Kérdése van a felületről vagy az ügynökről? Írjon nekünk: support@cloudcart.com.