# Vibe coding за онлайн магазин: дизайн с AI агент и Nitrogen Vibe coding за онлайн магазин с Nitrogen: как AI агент като Claude Code или Cursor прави собствен дизайн стъпка по стъпка, с примерни промптове и лимити. Източник: https://cloudcart.com/blog/nitrogen-ai-storefront-design · CloudCart · 2026-11-05 Vibe coding е програмиране, при което описвате на AI агент с думи какво искате, а той пише кода. В CloudCart така се прави собствен дизайн на онлайн магазин с Nitrogen: създавате витрина в админа, копирате инструкцията в Claude Code, ChatGPT Codex, Cursor или Gemini CLI и описвате дизайна. Каталогът, поръчките и плащането остават в CloudCart. Текстът е от екипа на CloudCart, българската платформа за онлайн магазини, и следва екраните и правилата на Nitrogen към 05.11.2026. Показва пътя от празна витрина до магазин на вашия домейн, какво може агентът и къде спира. ## Какво е vibe coding (вайб програмиране) Vibe coding, на български понякога „вайб програмиране“, е начин на работа, при който човек казва на AI модел какво иска да получи, разглежда резултата и иска промени, без да пише кода ред по ред. Терминът е въведен от Андрей Карпати, един от основателите на OpenAI, в публикация от февруари 2025 г. (по [статията за vibe coding в Уикипедия](https://en.wikipedia.org/wiki/Vibe_coding)). През ноември 2025 г. речникът Collins обяви „vibe coding“ за дума на годината ([BBC News, 06.11.2025](https://www.bbc.com/news/articles/cpd2y053nleo)). За търговеца това означава, че дизайнът на магазина се описва като бриф към дизайнер: „по-малко текст, големи снимки, количката винаги видима на телефона“. Агентът превежда изреченията в код, пуска витрината на вашия компютър и показва какво е направил. Вие одобрявате или искате друго. Рискът при vibe coding е код, който никой не е прегледал: грешки, бавни страници или пропуски в сигурността. Затова CloudCart дава на агента две неща, с които работата му има рамка: готов стартов проект с всички страници на магазина и умение (skill) с правилата как да го надгражда. ## Какво е headless магазин и какво е Nitrogen Headless магазин е онлайн магазин, при който витрината, която виждат клиентите, е отделно приложение от системата, която държи продуктите, поръчките и плащанията. Двете части говорят през API. Така витрината може да изглежда както пожелаете, а търговията остава на платформата. Nitrogen е headless технологията на CloudCart. Една Nitrogen витрина е собствено приложение на магазина, направено от стартовия проект на CloudCart ([cloudcart/nitro-starter](https://github.com/cloudcart/nitro-starter)), което чете магазина през Storefront API. Витрината работи на Nova, хостинга на CloudCart за Nitrogen витрини, изграден върху [Cloudflare Workers](https://developers.cloudflare.com/workers/). Не управлявате сървър и нямате собствен акаунт в Cloudflare. | | Готова тема | Nitrogen витрина | | Откъде започвате | Тема от каталога в Дизайн → Теми | Стартовият проект с готови страници | | Свобода в дизайна | Цветове, шрифтове, модули, блокове и собствен CSS/JS | Пълна: всяка страница и компонент са код на магазина | | Технология | Страници, изградени на сървъра на платформата | React, React Router, TypeScript и Tailwind CSS | | Кой прави промените | Вие, от админа | AI агент или разработчик; промяната е код и ново пускане | | Собствени полета (metafields, metaobjects) | Не се показват на витрината | Показват се където дизайнът реши | | Пускане | Темата сменя магазина веднага | Работи на свой адрес в cloudcart.dev, докато не насочите домейна | И при двата варианта продуктите, категориите, клиентите, поръчките, отстъпките, плащанията и доставката се управляват в един и същ админ. Как се избира и настройва готова тема, е описано в статията за [дизайна на онлайн магазин с теми](https://cloudcart.com/blog/store-design-themes). ## За кого е дизайнът на онлайн магазин с AI Nitrogen е за магазин, на който му трябва нещо, което темата не дава. Шаблоните на готовите теми не са отворени за редакция и собствена тема не се качва, затова изцяло собственият дизайн се прави върху Nitrogen. Ето кога си струва: - Марка, която иска витрина, различна от всяка тема. Собствена типография, анимации при скролване, страници като в списание. - Продукт, който се обяснява с инструмент. Конфигуратор на мебел, калкулатор за количество, сравнение на модели, сглобяване на подаръчна кутия. - Съдържание от собствени полета. Таблица с размери, съставки, данни за дизайнера или цели страници от секции, които попълвате в админа като metafields и metaobjects. - Магазин с повече от една витрина. Отделна витрина за кампания или за нова марка, на свой адрес в cloudcart.dev, със същия каталог. ## Кога готовата тема стига Готовата тема стига, когато искате да продавате още днес, без код, без агент и без разработчик. Темата с вашето лого, цветове и снимки е достатъчна за повечето нови магазини, а детайлите, които не са настройка, се добавят със собствен CSS/JS. Преминаването към Nitrogen по-късно не губи нищо в админа, а стартовият проект пази адресите на магазина, така че връзките и резултатите в Google продължават да работят. | Ситуация | Препоръка | | Нов магазин, първите продажби са целта | Готова тема | | Искате друг цвят, шрифт или начална страница | Готова тема и редакторът ѝ | | Трябва конфигуратор или сравнение на продукти | Nitrogen | | Искате страници от собствени полета, които попълвате в админа | Nitrogen | | Витрината трябва да изглежда като на голяма марка, без компромис | Nitrogen | > Нов магазин €1 на месец за първите 3 месеца Започнете с готова тема и продавайте, докато агентът прави собствената витрина. Каталогът и поръчките са едни и същи, затова нищо не се пренася втори път. Създайте магазин за €1 → ## Какво ви трябва, преди да започнете За Nitrogen витрина ви трябват магазин в CloudCart, AI агент, който пуска команди на компютъра, и няколко минути за настройка. Агентът сам проверява и инсталира повечето неща. - AI агент. Claude Code, ChatGPT Codex, Cursor, Gemini CLI или VS Code. Агентът трябва да може да пуска команди, затова чат в браузъра не стига. - Node.js и git. Стартовият проект работи на Node.js 22 или 24. Агентът ги проверява и инсталира, ако може; когато е нужно разрешение на администратор, ви казва какво липсва. - PAT токен. Личен ключ за достъп от админа (менюто долу вляво → „PAT токени“). Само собственикът на магазина го създава. - Правото „Nitrogen Storefronts“. Собственикът го има винаги. Служител вижда витрините само ако правото му е дадено в настройките на екипа. - GitHub акаунт (по желание). Ако искате всяка промяна да се пуска сама при push. Без него витрината се пуска с команда. Агентът работи с два инструмента на CloudCart: умението cloudcart-nitrogen с правилата за изграждане и Storefront MCP със схемата на Storefront API. Claude Code, Cursor, Gemini CLI и VS Code получават умението с плъгина на CloudCart. ChatGPT Codex и другите MCP клиенти го четат от публичното хранилище на CloudCart. ## Как се прави дизайн на онлайн магазин с AI агент: стъпка по стъпка Витрината се създава в админа, кодът се пише от агента на вашия компютър, а пускането става с push в GitHub или с една команда. Целият път е такъв: - Отворете Nitrogen в админа. Зоната е на адрес /admin/nitrogen . В менюто на админа засега няма връзка към нея, затова отворете адреса направо. Тук са витрините ви с броя им от максимум 10. - Създайте витрина. Натиснете „Create storefront“, дайте ѝ име и изберете как се пуска: GitHub или команден ред (CI/CD). Изборът не се сменя после. Адресът се прави от името: {име}-{код}.cloudcart.dev . - При GitHub свържете акаунта. Админът ви води през връзката с приложението CloudCart Nitrogen в GitHub. После създавате ново хранилище от стартовия проект (частно или публично) или избирате съществуващо. Админът показва настройката стъпка по стъпка. - При команден ред запазете токена. Получавате токен за пускане, който се показва само веднъж, и командите за следващите стъпки. - Копирайте инструкцията за агента. На страницата на витрината има готова инструкция за AI агента. Тя съдържа командите точно за тази витрина и, при команден ред, токена за пускане. Същият текст е публикуван в GitHub , за да може агентът да провери, че указанията са официалните на CloudCart. - Поставете я в агента. Claude Code, ChatGPT Codex, Cursor или Gemini CLI. Агентът пита на какъв език да работите, проверява инструментите и ги слага, ако липсват, свързва магазина с PAT токена и сваля проекта от стартовия шаблон. - Агентът пуска витрината локално. Той изпълнява командите от инструкцията: при GitHub клонира хранилището с git clone , при команден ред създава проекта с cloudcart nitrogen init , а после пуска cloudcart nitrogen link , cloudcart nitrogen env pull и npm run dev . Витрината тръгва на вашия компютър с реалните продукти на магазина. - Опишете дизайна. Агентът първо пита за нишата, страниците и функциите и записва план на проекта. После работи на пет етапа: магазинът и дизайнът за телефон, изграждането, SEO и сигурност, анализи и пиксели, и проверка на целия сайт. - Пуснете витрината. При GitHub всеки push в основния клон пуска витрината. При команден ред агентът изпълнява cloudcart nitrogen deploy , но само когато кажете, защото пускането сменя живата витрина. Първото пускане отнема няколко минути, докато адресът отговори. - Насочете домейна. В раздела Domains на витрината изберете домейна и „Route to this storefront“. Домейнът трябва вече да е добавен в магазина и DNS да се управлява от CloudCart. След това пуснете витрината още веднъж, за да вземе новия домейн. „Back to the store theme“ връща домейна на темата по всяко време. Важно: преди да насочите домейна, проверете, че витрината покрива адресите на продуктите, категориите и страниците. Админът ви предупреждава за това в потвърждението. > Магазин с AI агент Едно копирано изречение свързва агента Същият агент, който пише витрината, управлява и магазина: цени, наличности, описания и отчети, с PAT токен, който отнемате по всяко време. Как работи магазинът с AI агент → ## Примерни промптове за дизайн на онлайн магазин с AI Добрият промпт за дизайн казва за кого е магазинът, какво трябва да усети клиентът и кое е най-важното на телефона. Ето три примера, които може да поставите след първоначалната настройка и да промените според магазина си. ### Магазин за козметика „Магазинът продава натурална козметика на жени между 25 и 45 години. Искам светъл, спокоен дизайн с много въздух, един акцентен цвят (тъмнозелен) и големи снимки на продуктите. На продуктовата страница съставките да са в таблица от metafield, а под бутона за количката да има блок «Подходящо за тип кожа». Началната страница: голяма снимка, три категории, бестселъри и отзиви. Приоритет е телефонът.“ ### Магазин за мебели „Продаваме мебели по поръчка. На продуктовата страница искам конфигуратор: клиентът избира размер, плат и цвят на краката, вижда цената веднага и добавя в количката. Дизайнът е строг, с тъмен фон в горната част, тънки шрифтове и снимки на цял екран. Категориите да имат филтри по размер и материал. Покажи ми плана, преди да пишеш код.“ ### Магазин за кафе и храни „Продаваме прясно изпечено кафе. Искам топъл дизайн с кафяви и кремави тонове, голяма снимка на зърната и кратка история за всяка партида, която попълвам в админа като metaobject. На продуктовата страница: произход, степен на изпичане и вкус в три иконки. Добави блок «Често купувано заедно» в количката. Страниците да са бързи на телефон, с оценка 90 или повече.“ Добри навици при писането: - Една промяна на съобщение, когато дизайнът вече е готов. Така виждате кое какво е направило. - Поискайте плана преди кода, когато задачата е голяма. - Давайте примери: снимка на витрина, която харесвате, или описание „като списание, не като каталог“. - Кажете кое не искате: изскачащи прозорци, автоматично видео, много цветове. - Пускайте на живо само след като сте разгледали витрината локално на телефон и компютър. ## Кой AI агент да изберете за Nitrogen витрина И четирите агента правят Nitrogen витрина по една и съща инструкция. Разликата е в това къде работят и как получават умението на CloudCart. | Агент | Къде работи | Умението cloudcart-nitrogen | Подходящ за | | Claude Code | Терминал и десктоп приложение | С плъгина на CloudCart | Цялата витрина от начало до край | | Cursor | Редактор за код с AI агент | С плъгина на CloudCart | Когато искате да виждате файловете и промените | | Gemini CLI | Терминал | С разширението на CloudCart | Ако работите с Google | | ChatGPT Codex | Приложение и терминал на OpenAI | Чете го от хранилището на CloudCart | Ако вече плащате ChatGPT | Подробни ръководства за всеки агент: [онлайн магазин с Claude Code](https://cloudcart.com/blog/online-store-with-claude) (и документацията на [Claude Code](https://code.claude.com/docs/en/overview)), [онлайн магазин с Cursor](https://cloudcart.com/blog/online-store-with-cursor), [онлайн магазин с ChatGPT и Codex](https://cloudcart.com/blog/online-store-with-chatgpt) и [онлайн магазин с Gemini CLI](https://cloudcart.com/blog/online-store-with-gemini-cli). Страницата за връзката с Claude Code е [Claude Code и CloudCart](https://cloudcart.com/bg/offer/ai-claude-code), а за Cursor [Cursor и CloudCart](https://cloudcart.com/bg/offer/ai-cursor). ## Какво остава в CloudCart При Nitrogen витрина в CloudCart остават всички данни и цялата търговия. Агентът сменя само това, което вижда клиентът. - Каталогът. Продукти, варианти, категории, марки, наличности и цени се управляват в админа. Витрината ги чете през Storefront API. - Поръчките, клиентите и отстъпките. Влизат в същия списък, независимо от коя витрина е поръчката. - Checkout и плащането. Количката на витрината предава поръчката на checkout-а на платформата. На насочен домейн адресите за плащане, снимките, админът, sitemap, фийдовете, robots.txt и llms.txt продължават да работят от CloudCart. - Съдържанието. CMS страниците, блогът, менютата, metafields и metaobjects се попълват в админа. Metaobjects се създават в Настройки → Metaobjects. Стартовият проект вече съдържа страниците на магазина: начална, продукт с варианти, пакети, отзиви, бърза поръчка и известие при наличност, категории с филтри, търсене с резултати докато пишете, количка с допълнителни предложения, профил на клиента с вход с код по имейл, блог, страници, физически магазини, връщане на стоки, /robots.txt и /llms.txt. Агентът променя дизайна им, без да ги прави от нула. > CloudCart Pay 0% такса за транзакция до 31.12.2026 Плащането с карта остава на платформата и при собствена витрина, а витрината може да показва бутоните Apple Pay и Google Pay по вашите настройки на CloudCart Pay. Как работи CloudCart Pay → ## Лимити: какво не може AI агентът Nitrogen има ясни граници, които е добре да знаете преди проекта. Някои действия се правят само от вас в админа, други не са възможни засега. | Ограничение | Какво значи на практика | | До 10 витрини на магазин | Еднакво за всеки план с Nitrogen. За нова витрина над лимита изтривате стара. | | Една витрина обслужва домейна | Останалите работят само на своя адрес в cloudcart.dev. | | Само production | Няма тестов адрес за клон или pull request. Проверката става локално, преди пускането. | | До 50 собствени променливи и 10 токена за пускане на витрина | Промяна на променлива важи от следващото пускане. | | Един език на магазин | Всеки език е отделен магазин със своя витрина и домейн. | | Само GitHub за автоматично пускане | Други Git услуги работят през командния ред или CI/CD. | Какво агентът не прави сам и ви моли да направите в админа: - Създаване и изтриване на витрина. - Токени за пускане. - Насочване на домейн към витрината и връщане към темата. - Създаване на PAT токен. Агентът не може да редактира шаблоните на готовите теми, защото те не са отворени за търговците. Редакторът на темата, модулите и собственият CSS/JS не стигат до Nitrogen витрина: нейният вид е изцяло нейният код. На насочен домейн 301 пренасочванията се прилагат от витрината, а връзките в имейлите на магазина към страници на платформата (например отписване или страницата на поръчка) засега не работят там. Агентът пуска на живо само когато кажете. > 0% комисионна Собствена витрина без процент от продажбите Колкото и да се развие дизайнът, CloudCart не взима процент от поръчките, които витрината носи, при нито един план. Как работи 0% комисионна → ## Как да проверите витрината преди пускане Витрина, направена с vibe coding, се проверява като всеки сайт: на телефон, по скорост, по SEO и с пробна поръчка. Умението на CloudCart завършва всяка задача с проверка на целия сайт, но последната дума е ваша. - Телефонът първо. Отворете витрината локално на телефона си и минете пътя от началната страница до количката. - Скорост. Умението цели оценка 90 или повече на телефон в Lighthouse. Как се мери и какво значи, е в статията за скоростта и Core Web Vitals . - SEO. Проверете заглавията, описанията и адресите на продуктите. Стартовият проект пази адресите на магазина, така че старите връзки продължават да работят. - Пиксели и анализи. Поискайте от агента да провери, че събитията на CloudCart Analytics и вашите пиксели тръгват след съгласието за бисквитки. - Пробна поръчка. Поръчайте сами от адреса в cloudcart.dev, платете и проверете, че поръчката е в админа. - Домейнът. Насочете го и пуснете витрината още веднъж. Ако нещо не е наред, „Back to the store theme“ връща темата веднага. ## Често задавани въпроси **Какво е vibe coding?** Vibe coding е програмиране, при което описвате на AI агент с думи какво искате, а той пише кода. Терминът е на Андрей Карпати от февруари 2025 г. В онлайн магазин така се прави собствен дизайн: казвате как да изглежда витрината, агентът я изгражда и показва резултата. **Може ли AI да направи дизайна на онлайн магазин?** Да. В CloudCart AI агент като Claude Code, ChatGPT Codex, Cursor или Gemini CLI прави цялата витрина с Nitrogen по ваше описание. Агентът работи върху стартовия проект на CloudCart, а продуктите, поръчките и плащането остават в админа. **Какво е headless магазин?** Headless магазин е магазин, при който витрината е отделно приложение от системата с продуктите и поръчките, а двете части говорят през API. Така дизайнът може да е изцяло собствен. В CloudCart headless витрините се правят с Nitrogen и работят на хостинга Nova. **Трябва ли да знам да програмирам, за да ползвам Nitrogen?** Не е задължително. Инструкцията от админа води агента през настройката, а дизайна описвате на български. Трябва ви агент, който пуска команди на компютъра, PAT токен от админа и време да прегледате витрината преди пускането. **Колко Nitrogen витрини мога да имам?** До 10 витрини на един магазин, еднакво за всеки план с Nitrogen. Всяка има свой адрес в cloudcart.dev, свои токени и променливи. Домейна на магазина обслужва само една витрина наведнъж. **Губя ли нещо, ако мина от тема към Nitrogen?** Не губите данни: каталогът, поръчките, клиентите и съдържанието са в същия админ. Стартовият проект пази адресите на магазина, така че връзките и резултатите в Google продължават да работят. Темата се връща с „Back to the store theme“ по всяко време. **Как се пуска Nitrogen витрина на моя домейн?** В раздела Domains на витрината изберете домейна и „Route to this storefront“. Домейнът трябва да е добавен в магазина и DNS да се управлява от CloudCart. След това пуснете витрината отново, за да вземе новия домейн. **С кой AI агент е най-добре да направя сайт за онлайн магазин?** И четирите работят по една инструкция. Claude Code, Cursor и Gemini CLI получават умението на CloudCart с плъгина или разширението, а ChatGPT Codex го чете от хранилището на CloudCart. Изберете агента, който вече ползвате и плащате. Повече за собствената витрина и примери на живо има на страницата [Дизайн с Nitrogen](https://cloudcart.com/design). Имате въпрос за витрината или за агента? Пишете ни на [support@cloudcart.com](https://cloudcart.commailto:support@cloudcart.com).