Vibe coding pentru magazin online: design cu agent AI și Nitrogen

Vibe coding înseamnă să descrii în cuvinte ce vrei, iar un agent AI scrie codul. În CloudCart, așa se face un design propriu de magazin online cu Nitrogen: creezi o vitrină în admin, copiezi instrucțiunea în Claude Code, ChatGPT Codex, Cursor sau Gemini CLI și descrii designul în română. Catalogul, comenzile, plata și livrarea rămân în CloudCart.

Ghidul vine de la echipa CloudCart, platforma eCommerce fondată în Bulgaria, și urmează ecranele și regulile Nitrogen. Arată drumul de la o vitrină goală la magazinul de pe domeniul tău, ce poate face agentul și unde se oprește.

Ce este vibe coding

Vibe coding este un mod de lucru în care îi spui unui model AI ce rezultat vrei, te uiți la ce a făcut și ceri modificări, fără să scrii codul linie cu linie. Termenul a fost lansat în 2025 de Andrej Karpathy, unul dintre fondatorii OpenAI (după articolul despre vibe coding de pe Wikipedia). Dicționarul Collins l-a ales apoi cuvântul anului, după cum a relatat BBC News.

Pentru un comerciant, asta înseamnă că designul magazinului se descrie ca un brief către un designer: „mai puțin text, poze mari, coșul mereu vizibil pe telefon“. Agentul transformă frazele în cod, pornește vitrina pe calculatorul tău și îți arată ce a făcut. Tu aprobi sau ceri altceva.

Riscul la vibe coding este codul pe care nu l-a verificat nimeni: erori, pagini lente sau probleme de securitate. De aceea CloudCart îi dă agentului două lucruri care îi pun munca într-un cadru: un proiect de pornire cu toate paginile magazinului și un skill cu regulile după care îl dezvoltă.

Ce este un magazin online headless și ce este Nitrogen

Un magazin online headless are vitrina pe care o văd clienții separată de sistemul care ține produsele, comenzile și plățile. Cele două părți comunică printr-un API. Astfel vitrina poate arăta exact cum vrei, iar partea comercială rămâne pe platformă.

Nitrogen este tehnologia headless a CloudCart. O vitrină Nitrogen este o aplicație proprie a magazinului, construită din proiectul de pornire CloudCart (cloudcart/nitro-starter), care citește magazinul prin Storefront API. Vitrina rulează pe Nova, hostingul CloudCart pentru vitrinele Nitrogen, construit pe Cloudflare Workers. Nu administrezi niciun server și nu ai nevoie de cont propriu în Cloudflare.

	Temă gata făcută	Vitrină Nitrogen
De unde pornești	O temă din catalog, în Design → Teme	Proiectul de pornire, cu paginile deja făcute
Libertate de design	Culori, fonturi, module, blocuri și CSS/JS propriu	Totală: fiecare pagină și componentă e codul magazinului
Tehnologie	Pagini generate pe serverul platformei	React, React Router, TypeScript și Tailwind CSS
Cine face modificările	Tu, din admin	Un agent AI sau un programator; modificarea e cod și o nouă publicare
Câmpuri proprii (metafields, metaobjects)	Nu apar pe vitrină	Apar unde decide designul
Publicare	Tema schimbă magazinul imediat	Rulează pe adresa ei în cloudcart.dev până direcționezi domeniul

În ambele variante, produsele, categoriile, clienții, comenzile, reducerile, plățile și livrarea se administrează din același admin. Cum alegi și configurezi o temă gata făcută găsești în articolul despre designul magazinului online cu teme.

Pentru cine e designul de magazin online făcut cu AI

Nitrogen e pentru magazinul care are nevoie de ceva ce tema nu oferă. Șabloanele temelor gata făcute nu se pot edita și nu poți încărca o temă proprie, așa că un design complet personalizat se face pe Nitrogen. Iată când merită:

• Un brand care vrea o vitrină diferită de orice temă. Tipografie proprie, animații la scroll, pagini ca într-o revistă.
• Un produs care se explică printr-un instrument. Configurator de mobilă, calculator de cantitate, comparație între modele, cutie cadou pe care clientul o compune singur.
• Conținut din câmpuri proprii. Tabel de mărimi, ingrediente, date despre designer sau pagini întregi din secțiuni pe care le completezi în admin ca metafields și metaobjects.
• Un magazin cu mai multe vitrine. O vitrină separată pentru o campanie sau pentru un brand nou, pe adresa ei în cloudcart.dev, cu același catalog.

Când îți ajunge o temă gata făcută

Tema gata făcută e suficientă când vrei să vinzi chiar de azi, fără cod, fără agent și fără programator. O temă cu logo-ul, culorile și pozele tale ajunge pentru majoritatea magazinelor noi, iar detaliile care nu sunt setări se adaugă cu CSS/JS propriu. Trecerea la Nitrogen mai târziu nu pierde nimic din admin, iar proiectul de pornire păstrează adresele magazinului, așa că linkurile și pozițiile din Google continuă să funcționeze.

Situația	Recomandarea
Magazin nou, scopul sunt primele vânzări	Temă gata făcută
Vrei altă culoare, alt font sau altă pagină principală	Tema și editorul ei
Ai nevoie de configurator sau de comparație între produse	Nitrogen
Vrei pagini din câmpuri proprii, pe care le completezi în admin	Nitrogen
Vitrina trebuie să arate ca a unui brand mare, fără compromisuri	Nitrogen

De ce ai nevoie înainte să începi

Pentru o vitrină Nitrogen îți trebuie un magazin în CloudCart, un agent AI care rulează comenzi pe calculator și câteva minute de configurare. Agentul verifică și instalează singur aproape tot.

• Un agent AI. Claude Code, ChatGPT Codex, Cursor, Gemini CLI sau VS Code. Agentul trebuie să poată rula comenzi, așa că un chat în browser nu ajunge.
• Node.js și git. Proiectul de pornire rulează pe Node.js 22 sau 24. Agentul le verifică și le instalează dacă poate; când e nevoie de drept de administrator, îți spune ce lipsește.
• Un token PAT. Cheie personală de acces din admin (meniul din stânga jos → „PAT tokens“). Doar proprietarul magazinului o poate crea. Cum funcționează tokenul afli din ghidul despre administrarea magazinului cu un asistent AI.
• Dreptul „Nitrogen Storefronts“. Proprietarul îl are mereu. Un angajat vede vitrinele doar dacă i s-a dat dreptul în setările echipei.
• Cont GitHub (opțional). Dacă vrei ca fiecare modificare să se publice singură la push. Fără el, vitrina se publică printr-o comandă.

Agentul lucrează cu două instrumente CloudCart: skillul cloudcart-nitrogen, cu regulile de construcție, și Storefront MCP, cu schema Storefront API. Claude Code, Cursor, Gemini CLI și VS Code primesc skillul prin pluginul CloudCart. ChatGPT Codex și ceilalți clienți MCP îl citesc din repository-ul public CloudCart.

Cum faci designul magazinului online cu un agent AI: pas cu pas

Vitrina se creează în admin, codul îl scrie agentul pe calculatorul tău, iar publicarea se face cu un push în GitHub sau cu o singură comandă. Tot drumul arată așa:

1. Deschide Nitrogen în admin. Zona e la adresa /admin/nitrogen. Deocamdată meniul adminului nu are un link către ea, așa că deschide adresa direct. Aici sunt vitrinele tale și câte ai folosit din maximum 10.
2. Creează o vitrină. Apasă „Create storefront“, dă-i un nume și alege cum se publică: GitHub sau linie de comandă (CI/CD). Alegerea nu se mai schimbă ulterior. Adresa se formează din nume: {nume}-{cod}.cloudcart.dev.
3. La GitHub, conectează contul. Adminul te ghidează prin conectarea aplicației CloudCart Nitrogen în GitHub. Apoi creezi un repository nou din proiectul de pornire (privat sau public) sau alegi unul existent. Adminul îți arată configurarea pas cu pas.
4. La linia de comandă, salvează tokenul. Primești un token de publicare, afișat o singură dată, și comenzile pentru pașii următori.
5. Copiază instrucțiunea pentru agent. Pe pagina vitrinei e o instrucțiune gata făcută pentru agentul AI. Conține comenzile exacte pentru acea vitrină și, la linia de comandă, tokenul de publicare. Același text este publicat în GitHub, ca agentul să poată verifica faptul că indicațiile sunt cele oficiale CloudCart.
6. Lipește-o în agent. Claude Code, ChatGPT Codex, Cursor sau Gemini CLI. Agentul te întreabă în ce limbă lucrați, verifică instrumentele și le instalează dacă lipsesc, conectează magazinul cu tokenul PAT și descarcă proiectul din șablonul de pornire.
7. Agentul pornește vitrina local. Rulează comenzile din instrucțiune: la GitHub clonează repository-ul cu git clone, la linia de comandă creează proiectul cu cloudcart nitrogen init, apoi rulează cloudcart nitrogen link, cloudcart nitrogen env pull și npm run dev. Vitrina pornește pe calculatorul tău cu produsele reale ale magazinului.
8. Descrie designul. Agentul te întreabă mai întâi despre nișă, pagini și funcții și scrie un plan al proiectului. Apoi lucrează în cinci etape: magazinul și designul pentru telefon, construcția, SEO și securitatea, analizele și pixelii, verificarea întregului site.
9. Publică vitrina. La GitHub, fiecare push în branchul principal publică vitrina. La linia de comandă, agentul rulează cloudcart nitrogen deploy, dar numai când îi spui tu, pentru că publicarea schimbă vitrina live. Prima publicare durează câteva minute, până când adresa răspunde.
10. Direcționează domeniul. În secțiunea Domains a vitrinei alegi domeniul și „Route to this storefront“. Domeniul trebuie să fie deja adăugat în magazin, iar DNS-ul administrat de CloudCart. Apoi publici vitrina încă o dată, ca să preia domeniul nou. „Back to the store theme“ întoarce oricând domeniul la temă.

Important: înainte să direcționezi domeniul, verifică dacă vitrina acoperă adresele produselor, categoriilor și paginilor. Adminul te avertizează despre asta în confirmare.

Prompturi gata de folosit pentru designul magazinului online

Un prompt bun de design spune pentru cine e magazinul, ce trebuie să simtă clientul și ce contează cel mai mult pe telefon. Iată trei exemple pe care le poți lipi după configurarea inițială și le adaptezi la magazinul tău.

Magazin de cosmetice

„Magazinul vinde cosmetice naturale pentru femei între 25 și 45 de ani. Vreau un design luminos și liniștit, cu mult spațiu alb, o singură culoare de accent (verde închis) și poze mari ale produselor. Pe pagina de produs, ingredientele să fie într-un tabel dintr-un metafield, iar sub butonul de adăugare în coș să apară blocul «Potrivit pentru tipul de ten». Pagina principală: o poză mare, trei categorii, cele mai vândute produse și recenzii. Prioritatea e telefonul.“

Magazin de mobilă

„Vindem mobilă la comandă. Pe pagina de produs vreau un configurator: clientul alege dimensiunea, materialul și culoarea picioarelor, vede prețul imediat și adaugă în coș. Designul e sobru, cu fundal închis în partea de sus, fonturi subțiri și poze pe tot ecranul. Categoriile să aibă filtre după dimensiune și material. Arată-mi planul înainte să scrii cod.“

Magazin de cafea și băcănie

„Vindem cafea proaspăt prăjită. Vreau un design cald, în tonuri de maro și crem, cu o poză mare a boabelor și o scurtă poveste pentru fiecare lot, pe care o completez în admin ca metaobject. Pe pagina de produs: originea, gradul de prăjire și gustul în trei pictograme. Adaugă în coș un bloc «Cumpărate adesea împreună». Paginile să se încarce repede pe telefon, cu scor de 90 sau mai mult.“

Obiceiuri bune când scrii prompturi:

• O singură modificare pe mesaj, după ce designul e gata. Așa vezi ce a schimbat fiecare cerere.
• Cere planul înaintea codului când sarcina e mare.
• Dă exemple: o captură a unei vitrine care îți place sau o descriere de tipul „ca o revistă, nu ca un catalog“.
• Publică live doar după ce ai verificat vitrina local, pe telefon și pe calculator.

Ce agent AI alegi pentru vitrina Nitrogen

Toți cei patru agenți construiesc vitrina Nitrogen după aceeași instrucțiune. Diferența ține de locul în care lucrează și de felul în care primesc skillul CloudCart.

Agentul	Unde lucrează	Skillul cloudcart-nitrogen	Potrivit pentru
Claude Code	Terminal și aplicație desktop	Prin pluginul CloudCart	Toată vitrina, de la început la sfârșit
Cursor	Editor de cod cu agent AI	Prin pluginul CloudCart	Când vrei să vezi fișierele și modificările
Gemini CLI	Terminal	Prin extensia CloudCart	Dacă lucrezi deja cu Google
ChatGPT Codex	Aplicația și terminalul OpenAI	Îl citește din repository-ul CloudCart	Dacă plătești deja ChatGPT

Ghiduri detaliate pentru fiecare agent: magazin online cu Claude Code (și documentația Claude Code), magazin online cu Cursor, magazin online cu ChatGPT și Codex și magazin online cu Gemini CLI. Conectarea cu Claude Code e descrisă pe pagina Claude Code și CloudCart, iar cea cu Cursor pe Cursor și CloudCart.

Ce rămâne în CloudCart

Cu o vitrină Nitrogen, toate datele și toată partea comercială rămân în CloudCart. Agentul schimbă doar ce vede clientul.

• Catalogul. Produsele, variantele, categoriile, brandurile, stocurile și prețurile se administrează în admin. Vitrina le citește prin Storefront API.
• Comenzile, clienții și reducerile. Intră în aceeași listă, indiferent de vitrina din care vine comanda.
• Checkout-ul și plata. Coșul vitrinei predă comanda checkout-ului platformei, cu metodele de plată și curierii pe care i-ai configurat, de exemplu FAN Courier, Sameday sau DPD Romania. Pe un domeniu direcționat, adresele de plată, pozele, adminul, sitemap-ul, feedurile, robots.txt și llms.txt funcționează în continuare din CloudCart.
• Conținutul. Paginile CMS, blogul, meniurile, metafields și metaobjects se completează în admin. Metaobjects se creează în Setări → Metaobjects.

Proiectul de pornire conține deja paginile magazinului: pagina principală, produsul cu variante, pachete, recenzii, comandă rapidă și anunț la revenirea în stoc, categorii cu filtre, căutare cu rezultate pe măsură ce scrii, coș cu recomandări suplimentare, contul clientului cu autentificare prin cod pe email, blog, pagini, magazine fizice, retururi, /robots.txt și /llms.txt. Agentul le schimbă designul, fără să le construiască de la zero.

Limite: ce nu poate face agentul AI

Nitrogen are limite clare, pe care e bine să le știi înainte de proiect. Unele acțiuni le faci doar tu în admin, altele nu sunt posibile deocamdată.

Limita	Ce înseamnă în practică
Maximum 10 vitrine pe magazin	La fel pe orice plan cu Nitrogen. Pentru o vitrină nouă peste limită, ștergi una veche.
O singură vitrină servește domeniul	Celelalte rulează doar pe adresa lor din cloudcart.dev.
Doar production	Nu există adresă de test pentru un branch sau un pull request. Verificarea se face local, înainte de publicare.
Maximum 50 de variabile proprii și 10 tokenuri de publicare pe vitrină	O variabilă modificată se aplică de la următoarea publicare.
O singură limbă pe magazin	Fiecare limbă e un magazin separat, cu vitrina și domeniul lui.
Doar GitHub pentru publicarea automată	Alte servicii Git merg prin linia de comandă sau CI/CD.

Ce nu face agentul singur și îți cere să faci tu în admin:

• Crearea și ștergerea unei vitrine.
• Tokenurile de publicare.
• Direcționarea domeniului către vitrină și întoarcerea la temă.
• Crearea tokenului PAT.

Agentul nu poate edita șabloanele temelor gata făcute, pentru că acestea nu sunt deschise comercianților. Editorul temei, modulele și CSS/JS-ul propriu nu ajung la o vitrină Nitrogen: aspectul ei este în întregime codul ei. Pe un domeniu direcționat, redirecționările 301 le aplică vitrina, iar linkurile din emailurile magazinului către pagini ale platformei (de exemplu dezabonarea sau pagina comenzii) deocamdată nu funcționează acolo.

Cum verifici vitrina înainte de publicare

O vitrină făcută prin vibe coding se verifică la fel ca orice site: pe telefon, la viteză, la SEO și cu o comandă de probă.

1. Întâi telefonul. Deschide vitrina local pe telefon și parcurge drumul de la pagina principală până la coș.
2. Viteza. Skillul țintește un scor de 90 sau mai mult pe telefon în Lighthouse. Cum se măsoară și ce înseamnă afli din articolul despre viteză și Core Web Vitals.
3. SEO. Verifică titlurile, descrierile și adresele produselor. Proiectul de pornire păstrează adresele magazinului, deci linkurile vechi funcționează în continuare.
4. Pixeli și analize. Cere-i agentului să verifice că evenimentele CloudCart Analytics și pixelii tăi pornesc după acordul pentru cookie-uri.
5. Comanda de probă. Comandă chiar tu de pe adresa din cloudcart.dev, plătește și verifică dacă comanda apare în admin.
6. Domeniul. Direcționează-l și publică vitrina încă o dată. Dacă ceva nu e în regulă, „Back to the store theme“ readuce tema imediat.

Întrebări frecvente

Mai multe despre vitrina proprie și exemple live găsești pe pagina Design cu Nitrogen. Ai o întrebare despre vitrină sau despre agent? Scrie-ne la support@cloudcart.com.