# Vibe coding an online store: AI storefront design with Nitrogen Vibe coding an online store with Nitrogen: how Claude Code, Cursor or Codex builds a custom storefront step by step, with sample prompts and limits. Source: https://cloudcart.com/en/blog/nitrogen-ai-storefront-design · CloudCart · 2026-11-06 Vibe coding means you describe to an AI agent in plain words what you want and the agent writes the code. In CloudCart this is how a fully custom online store design is built with Nitrogen: you create a storefront in the admin, paste its instruction into Claude Code, ChatGPT Codex, Cursor or Gemini CLI, and describe the design in English. The catalog, orders and payments stay in CloudCart. This guide comes from the team behind CloudCart, the Bulgarian ecommerce platform, and follows the Nitrogen screens and rules in the admin. It is for founders selling in Bulgaria, from Bulgaria or across the EU who want a storefront unlike any template. ## What vibe coding is Vibe coding is a way of building software where a person tells an AI model what result they want, looks at what comes back and asks for changes, without writing the code line by line. The term was coined by Andrej Karpathy, an OpenAI co-founder, in a post from February 2025 (see the [Wikipedia article on vibe coding](https://en.wikipedia.org/wiki/Vibe_coding)). Collins Dictionary later named "vibe coding" its word of the year for 2025 ([BBC News](https://www.bbc.com/news/articles/cpd2y053nleo)). For a merchant, vibe coding turns store design into a brief, like one for a designer: "less text, big photos, the cart always visible on the phone". The agent writes the code, runs the storefront on your computer and you approve or ask for changes. The weak spot of vibe coding is code nobody has reviewed: bugs, slow pages or security gaps. That is why CloudCart gives the agent two things that put a frame around its work: a starter project that already has every store page, and a skill with the rules for extending it. ## What a headless store is and what Nitrogen is A headless store is an online store where the storefront customers see is a separate application from the system that holds products, orders and payments. The two parts talk through an API. Nitrogen is CloudCart's headless technology. A Nitrogen storefront is the store's own application, built from the CloudCart starter project ([cloudcart/nitro-starter](https://github.com/cloudcart/nitro-starter)), that reads the store through the Storefront API. It runs on Nova, CloudCart's hosting for Nitrogen storefronts, built on [Cloudflare Workers](https://developers.cloudflare.com/workers/). You do not manage a server and you do not need a Cloudflare account of your own. | | Ready-made theme | Nitrogen storefront | | Where you start | A theme from the catalog in Design → Themes | The starter project with all store pages | | Design freedom | Colors, fonts, widgets, blocks and custom CSS/JS | Complete: every page and component is the store's own code | | Technology | Pages rendered on the platform's servers | React, React Router, TypeScript and Tailwind CSS | | Who makes changes | You, in the admin | An AI agent or a developer; a change is code plus a new deploy | | Custom fields (metafields, metaobjects) | Not shown on the storefront | Shown wherever the design puts them | | Going live | The theme changes the store at once | Runs on its own cloudcart.dev address until you route the domain | With either option, products, orders, payments and shipping are managed in the same admin. Choosing and setting up a ready-made theme is covered in the guide to [ecommerce website design with themes](https://cloudcart.com/en/blog/store-design-themes). ## Who AI storefront design is for Nitrogen is for a store that needs something a theme cannot give. Ready-made theme templates are not open for editing and you cannot upload a theme of your own, so a fully custom design is built on Nitrogen. It pays off in these cases: - A brand that wants a storefront unlike any theme. Its own typography, scroll animations, pages laid out like a magazine. - A product that is explained with a tool. A furniture configurator, a quantity calculator, a model comparison. - Content from custom fields. A size chart, ingredients or whole pages you fill in the admin as metafields and metaobjects. - A store with more than one storefront. A separate storefront for a campaign or a new brand, on its own cloudcart.dev address, with the same catalog. ## When a ready-made theme is enough A ready-made theme is enough when you want to sell today, without code, an agent or a developer. A theme with your logo, colors and photos covers most new stores, and details that are not a setting can be added with custom CSS/JS. | Situation | Recommendation | | New store, first sales are the goal | Ready-made theme | | You want a different color, font or homepage | Ready-made theme and its editor | | You need a configurator or a product comparison | Nitrogen | | You want pages built from custom fields you fill in the admin | Nitrogen | | The storefront has to look like a big brand's, with no compromise | Nitrogen | > New store €1/month for the first 3 months Start selling with a ready-made theme while the agent builds your custom storefront. The catalog and orders are the same for both, so nothing has to be moved twice. Create a store for €1 → ## What you need before you start A Nitrogen storefront needs a CloudCart store, an AI agent that can run commands on your computer and a few minutes of setup. - An AI agent. Claude Code, ChatGPT Codex, Cursor, Gemini CLI or VS Code. The agent has to run commands, so a chat window in the browser is not enough. - Node.js and git. The starter project runs on Node.js 22 or 24. The agent installs them where it can and tells you if administrator rights are needed. - A PAT token. A Personal Access Token from the admin (the user menu in the bottom-left corner → PAT Tokens). Only the store owner can create one. - The Nitrogen Storefronts permission. The owner always has it. A team member sees storefronts only if the permission is granted in the staff settings. - A GitHub account (optional). If you want every change to deploy on push. The agent works with two CloudCart tools: the cloudcart-nitrogen skill with the build rules, and the Storefront MCP with the Storefront API schema. Claude Code, Cursor, Gemini CLI and VS Code get the skill with the CloudCart plugin. ChatGPT Codex reads it from CloudCart's public repository. ## How to design an online store with an AI agent: step by step The storefront is created in the admin, the agent writes the code on your computer, and it goes live with a push to GitHub or a single command. - Open Nitrogen in the admin. The area is at /admin/nitrogen . The admin menu has no link to it yet, so open the address directly. - Create a storefront. Click "Create storefront", give it a name and choose how it deploys: GitHub or command line (CI/CD). The choice cannot be changed later. The address is built from the name: {name}-{code}.cloudcart.dev . - With GitHub, connect the account. The admin guides you through connecting the CloudCart Nitrogen app on GitHub. Then you create a new repository from the starter project (private or public) or pick an existing one. - With command line, save the token. You get a deploy token, shown only once, and the commands for the next steps. - Copy the agent instruction. The storefront page has a ready instruction for the AI agent. It contains the commands for exactly this storefront and, with command line, the deploy token. The same text is published on GitHub , so the agent can check that the instructions are CloudCart's official ones. - Paste it into the agent. Claude Code, ChatGPT Codex, Cursor or Gemini CLI. The agent asks which language to work in, checks the tools and installs any that are missing, connects the store with the PAT token and downloads the project from the starter template. - The agent runs the storefront locally. It runs the commands from the instruction: with GitHub it clones the repository with git clone , with command line it creates the project with cloudcart nitrogen init , then runs cloudcart nitrogen link , cloudcart nitrogen env pull and npm run dev . The storefront starts with the store's real products. - Describe the design. The agent first asks about your niche, pages and features and writes a project plan. Then it works in five stages: the store and its mobile design, the build, SEO and security, analytics and pixels, and a check of the whole site. - Deploy the storefront. With GitHub, every push to the main branch deploys it. With command line, the agent runs cloudcart nitrogen deploy , but only when you say so, because a deploy replaces the live storefront. - Route the domain. In the storefront's Domains tab, choose the domain and "Route to this storefront". The domain must already be added to the store, with its DNS managed by CloudCart. Then deploy the storefront once more so it picks up the new domain. "Back to the store theme" returns the domain to the theme at any time. Important: before you route the domain, check that the storefront covers the URLs of products, categories and pages. The admin warns you about this in the confirmation. > Store run by an AI agent One copied sentence connects the agent The same agent that writes the storefront can also run the store: prices, stock, descriptions and reports, with a PAT token you can revoke at any time. How a store run by an AI agent works → ## Sample vibe coding prompts for an online store A good design prompt says who the store is for, what the customer should feel and what matters most on a phone. Paste one of these after the setup and adapt it. ### Cosmetics store "The store sells natural cosmetics to women aged 25 to 45. I want a light, calm design with plenty of white space, one accent color (dark green) and large product photos. On the product page, show the ingredients in a table from a metafield, and under the add to cart button add a block called 'Suits skin type'. Homepage: one large photo, three categories, bestsellers and reviews. Mobile comes first." ### Furniture store "We sell made-to-order furniture. On the product page I want a configurator: the customer picks the size, fabric and leg color, sees the price at once and adds it to the cart. The design is strict, with a dark background at the top, thin fonts and full-screen photos. Categories need filters by size and material. Show me the plan before you write any code." ### Coffee and food store "We sell freshly roasted coffee. I want a warm design in browns and creams, a large photo of the beans and a short story for every batch, which I fill in the admin as a metaobject. On the product page: origin, roast level and taste as three icons. Add a 'Frequently bought together' block in the cart. Pages must be fast on a phone, with a score of 90 or higher." Good habits when you write prompts: - Once the design is in place, ask for one change per message. - Ask for the plan before the code when the task is big. - Give references: a screenshot of a storefront you like. - Say what you do not want: pop-ups, autoplay video, too many colors. - Go live only after you have looked at the storefront locally on a phone and a computer. ## Which AI agent to choose for a Nitrogen storefront All four agents build a Nitrogen storefront from the same instruction; they differ in where they run and how they get the CloudCart skill. | Agent | Where it runs | The cloudcart-nitrogen skill | Good for | | Claude Code | Terminal and desktop app | With the CloudCart plugin | The whole storefront from start to finish | | Cursor | Code editor with an AI agent | With the CloudCart plugin | When you want to see the files and every change | | Gemini CLI | Terminal | With the CloudCart extension | If you already work with Google | | ChatGPT Codex | OpenAI's app and terminal | Reads it from the CloudCart repository | If you already pay for ChatGPT | The pages on each connection are [Claude Code and CloudCart](https://cloudcart.com/en/offer/ai-claude-code) (see also the [Claude Code documentation](https://code.claude.com/docs/en/overview)) and [Cursor and CloudCart](https://cloudcart.com/en/offer/ai-cursor). What else an AI assistant can do in a store is in the guide to [running an online store with AI](https://cloudcart.com/en/blog/ai-online-store). ## What stays in CloudCart With a Nitrogen storefront, all data and commerce stay in CloudCart; the agent changes only what the customer sees. - The catalog. Products, variants, categories, brands, stock and prices are managed in the admin. The storefront reads them through the Storefront API. - Orders, customers and discounts. They land in the same list, whichever storefront the order came from. - Checkout and payment. The storefront cart hands the order over to the platform's checkout. On a routed domain, the payment URLs, images, the admin, the sitemap, feeds, robots.txt and llms.txt keep running from CloudCart. - Content. CMS pages, the blog, menus, metafields and metaobjects are filled in the admin. Metaobjects are defined in Settings → Metaobjects. The starter project already contains the store pages: product pages with variants and reviews, categories with filters, search as you type, the cart, a customer account, the blog, returns, /robots.txt and /llms.txt. The agent redesigns them instead of building them from scratch. > CloudCart Pay 0% transaction fee through Dec 31, 2026 Card payments stay on the platform with a custom storefront too, and the storefront can show Apple Pay and Google Pay buttons according to your CloudCart Pay settings. How CloudCart Pay works → ## Limits: what the AI agent cannot do Nitrogen has clear limits worth knowing before the project starts. | Limit | What it means in practice | | Up to 10 storefronts per store | The same on every plan with Nitrogen. For a new storefront above the cap, you delete an old one. | | One storefront serves the domain | The others run only on their own cloudcart.dev address. | | Production only | There is no preview address for a branch or pull request. Testing happens locally, before the deploy. | | Up to 50 custom variables and 10 deploy tokens per storefront | A changed variable applies from the next deploy. | | One language per store | Each language is a separate store with its own storefront and domain. Selling in English and Bulgarian, or into another EU market, means one store per language. | | Automatic deploys only from GitHub | Other Git services work through the command line or CI/CD. | What the agent does not do on its own and asks you to do in the admin: - Creating and deleting a storefront. - Deploy tokens. - Routing a domain to the storefront and switching back to the theme. - Creating a PAT token. On a routed domain, 301 redirects are applied by the storefront, and links in the store's emails to platform pages (for example unsubscribe or the order page) do not work there for now. > 0% commission A custom storefront with no cut of your sales CloudCart takes no percentage of the orders the storefront brings in, on any plan. How 0% commission works → ## How to check the storefront before it goes live A vibe-coded storefront is checked like any other website: on a phone, for speed, for SEO and with a test order. - Phone first. Open the local storefront on your phone and walk the path from the homepage to the cart. - Speed. The skill aims for a Lighthouse score of 90 or more on mobile. - SEO. Check titles, descriptions and product URLs. The starter project keeps the store's URLs, so old links keep working. - Pixels and analytics. Ask the agent to confirm that CloudCart Analytics events and your pixels fire after cookie consent. - Test order. Place an order yourself from the cloudcart.dev address, pay, and check that the order is in the admin. - The domain. Route it and deploy the storefront once more. If something is wrong, "Back to the store theme" brings the theme back at once. ## Frequently asked questions **What is vibe coding?** Vibe coding is programming where you describe to an AI agent in words what you want and the agent writes the code. The term comes from Andrej Karpathy in February 2025. In an online store, it is how a custom design gets built: you say how the storefront should look, the agent builds it and shows you the result. **Can you vibe code an ecommerce website?** Yes. In CloudCart, an AI agent such as Claude Code, ChatGPT Codex, Cursor or Gemini CLI builds the whole storefront with Nitrogen from your description. Products, orders and payments stay in the admin, so the agent never has to write checkout. **Do I need to know how to code to use Nitrogen?** Not necessarily. The instruction from the admin guides the agent through the setup, and you describe the design in English. You need an agent that runs commands, a PAT token and time to review the result. **How many Nitrogen storefronts can I have?** Up to 10 storefronts per store, the same on every plan with Nitrogen. Each has its own cloudcart.dev address. Only one storefront serves the store's domain at a time. **Do I lose anything if I move from a theme to Nitrogen?** You lose no data: the catalog, orders, customers and content stay in the same admin. The starter project keeps the store's URLs, so links and Google rankings keep working. The theme comes back with "Back to the store theme" at any time. **How do I put a Nitrogen storefront on my own domain?** In the storefront's Domains tab, choose the domain and "Route to this storefront". The domain must be added to the store, with its DNS managed by CloudCart. Then deploy the storefront again so it picks up the new domain. **Which AI agent is best for building an online store?** All four work from the same instruction. Pick the agent you already use and pay for. More about custom storefronts, with live examples, is on the [Nitrogen design page](https://cloudcart.com/en/design). Questions about the storefront or the agent? Write to us at [support@cloudcart.com](https://cloudcart.commailto:support@cloudcart.com).