Vibe coding за онлайн магазин: дизайн с AI агент и Nitrogen

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 в Уикипедия). През ноември 2025 г. речникът Collins обяви „vibe coding“ за дума на годината (BBC News, 06.11.2025).

За търговеца това означава, че дизайнът на магазина се описва като бриф към дизайнер: „по-малко текст, големи снимки, количката винаги видима на телефона“. Агентът превежда изреченията в код, пуска витрината на вашия компютър и показва какво е направил. Вие одобрявате или искате друго.

Рискът при vibe coding е код, който никой не е прегледал: грешки, бавни страници или пропуски в сигурността. Затова CloudCart дава на агента две неща, с които работата му има рамка: готов стартов проект с всички страници на магазина и умение (skill) с правилата как да го надгражда.

Какво е headless магазин и какво е Nitrogen

Headless магазин е онлайн магазин, при който витрината, която виждат клиентите, е отделно приложение от системата, която държи продуктите, поръчките и плащанията. Двете части говорят през API. Така витрината може да изглежда както пожелаете, а търговията остава на платформата.

Nitrogen е headless технологията на CloudCart. Една Nitrogen витрина е собствено приложение на магазина, направено от стартовия проект на CloudCart (cloudcart/nitro-starter), което чете магазина през Storefront API. Витрината работи на Nova, хостинга на CloudCart за Nitrogen витрини, изграден върху Cloudflare Workers. Не управлявате сървър и нямате собствен акаунт в Cloudflare.

	Готова тема	Nitrogen витрина
Откъде започвате	Тема от каталога в Дизайн → Теми	Стартовият проект с готови страници
Свобода в дизайна	Цветове, шрифтове, модули, блокове и собствен CSS/JS	Пълна: всяка страница и компонент са код на магазина
Технология	Страници, изградени на сървъра на платформата	React, React Router, TypeScript и Tailwind CSS
Кой прави промените	Вие, от админа	AI агент или разработчик; промяната е код и ново пускане
Собствени полета (metafields, metaobjects)	Не се показват на витрината	Показват се където дизайнът реши
Пускане	Темата сменя магазина веднага	Работи на свой адрес в cloudcart.dev, докато не насочите домейна

И при двата варианта продуктите, категориите, клиентите, поръчките, отстъпките, плащанията и доставката се управляват в един и същ админ. Как се избира и настройва готова тема, е описано в статията за дизайна на онлайн магазин с теми.

За кого е дизайнът на онлайн магазин с AI

Nitrogen е за магазин, на който му трябва нещо, което темата не дава. Шаблоните на готовите теми не са отворени за редакция и собствена тема не се качва, затова изцяло собственият дизайн се прави върху Nitrogen. Ето кога си струва:

• Марка, която иска витрина, различна от всяка тема. Собствена типография, анимации при скролване, страници като в списание.
• Продукт, който се обяснява с инструмент. Конфигуратор на мебел, калкулатор за количество, сравнение на модели, сглобяване на подаръчна кутия.
• Съдържание от собствени полета. Таблица с размери, съставки, данни за дизайнера или цели страници от секции, които попълвате в админа като metafields и metaobjects.
• Магазин с повече от една витрина. Отделна витрина за кампания или за нова марка, на свой адрес в cloudcart.dev, със същия каталог.

Кога готовата тема стига

Готовата тема стига, когато искате да продавате още днес, без код, без агент и без разработчик. Темата с вашето лого, цветове и снимки е достатъчна за повечето нови магазини, а детайлите, които не са настройка, се добавят със собствен CSS/JS. Преминаването към Nitrogen по-късно не губи нищо в админа, а стартовият проект пази адресите на магазина, така че връзките и резултатите в Google продължават да работят.

Ситуация	Препоръка
Нов магазин, първите продажби са целта	Готова тема
Искате друг цвят, шрифт или начална страница	Готова тема и редакторът ѝ
Трябва конфигуратор или сравнение на продукти	Nitrogen
Искате страници от собствени полета, които попълвате в админа	Nitrogen
Витрината трябва да изглежда като на голяма марка, без компромис	Nitrogen

Какво ви трябва, преди да започнете

За 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 или с една команда. Целият път е такъв:

1. Отворете Nitrogen в админа. Зоната е на адрес /admin/nitrogen. В менюто на админа засега няма връзка към нея, затова отворете адреса направо. Тук са витрините ви с броя им от максимум 10.
2. Създайте витрина. Натиснете „Create storefront“, дайте ѝ име и изберете как се пуска: GitHub или команден ред (CI/CD). Изборът не се сменя после. Адресът се прави от името: {име}-{код}.cloudcart.dev.
3. При GitHub свържете акаунта. Админът ви води през връзката с приложението CloudCart Nitrogen в GitHub. После създавате ново хранилище от стартовия проект (частно или публично) или избирате съществуващо. Админът показва настройката стъпка по стъпка.
4. При команден ред запазете токена. Получавате токен за пускане, който се показва само веднъж, и командите за следващите стъпки.
5. Копирайте инструкцията за агента. На страницата на витрината има готова инструкция за AI агента. Тя съдържа командите точно за тази витрина и, при команден ред, токена за пускане. Същият текст е публикуван в GitHub, за да може агентът да провери, че указанията са официалните на CloudCart.
6. Поставете я в агента. Claude Code, ChatGPT Codex, Cursor или Gemini CLI. Агентът пита на какъв език да работите, проверява инструментите и ги слага, ако липсват, свързва магазина с PAT токена и сваля проекта от стартовия шаблон.
7. Агентът пуска витрината локално. Той изпълнява командите от инструкцията: при GitHub клонира хранилището с git clone, при команден ред създава проекта с cloudcart nitrogen init, а после пуска cloudcart nitrogen link, cloudcart nitrogen env pull и npm run dev. Витрината тръгва на вашия компютър с реалните продукти на магазина.
8. Опишете дизайна. Агентът първо пита за нишата, страниците и функциите и записва план на проекта. После работи на пет етапа: магазинът и дизайнът за телефон, изграждането, SEO и сигурност, анализи и пиксели, и проверка на целия сайт.
9. Пуснете витрината. При GitHub всеки push в основния клон пуска витрината. При команден ред агентът изпълнява cloudcart nitrogen deploy, но само когато кажете, защото пускането сменя живата витрина. Първото пускане отнема няколко минути, докато адресът отговори.
10. Насочете домейна. В раздела Domains на витрината изберете домейна и „Route to this storefront“. Домейнът трябва вече да е добавен в магазина и DNS да се управлява от CloudCart. След това пуснете витрината още веднъж, за да вземе новия домейн. „Back to the store theme“ връща домейна на темата по всяко време.

Важно: преди да насочите домейна, проверете, че витрината покрива адресите на продуктите, категориите и страниците. Админът ви предупреждава за това в потвърждението.

Примерни промптове за дизайн на онлайн магазин с 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 (и документацията на Claude Code), онлайн магазин с Cursor, онлайн магазин с ChatGPT и Codex и онлайн магазин с Gemini CLI. Страницата за връзката с Claude Code е Claude Code и CloudCart, а за Cursor Cursor и CloudCart.

Какво остава в CloudCart

При Nitrogen витрина в CloudCart остават всички данни и цялата търговия. Агентът сменя само това, което вижда клиентът.

• Каталогът. Продукти, варианти, категории, марки, наличности и цени се управляват в админа. Витрината ги чете през Storefront API.
• Поръчките, клиентите и отстъпките. Влизат в същия списък, независимо от коя витрина е поръчката.
• Checkout и плащането. Количката на витрината предава поръчката на checkout-а на платформата. На насочен домейн адресите за плащане, снимките, админът, sitemap, фийдовете, robots.txt и llms.txt продължават да работят от CloudCart.
• Съдържанието. CMS страниците, блогът, менютата, metafields и metaobjects се попълват в админа. Metaobjects се създават в Настройки → Metaobjects.

Стартовият проект вече съдържа страниците на магазина: начална, продукт с варианти, пакети, отзиви, бърза поръчка и известие при наличност, категории с филтри, търсене с резултати докато пишете, количка с допълнителни предложения, профил на клиента с вход с код по имейл, блог, страници, физически магазини, връщане на стоки, /robots.txt и /llms.txt. Агентът променя дизайна им, без да ги прави от нула.

Лимити: какво не може AI агентът

Nitrogen има ясни граници, които е добре да знаете преди проекта. Някои действия се правят само от вас в админа, други не са възможни засега.

Ограничение	Какво значи на практика
До 10 витрини на магазин	Еднакво за всеки план с Nitrogen. За нова витрина над лимита изтривате стара.
Една витрина обслужва домейна	Останалите работят само на своя адрес в cloudcart.dev.
Само production	Няма тестов адрес за клон или pull request. Проверката става локално, преди пускането.
До 50 собствени променливи и 10 токена за пускане на витрина	Промяна на променлива важи от следващото пускане.
Един език на магазин	Всеки език е отделен магазин със своя витрина и домейн.
Само GitHub за автоматично пускане	Други Git услуги работят през командния ред или CI/CD.

Какво агентът не прави сам и ви моли да направите в админа:

• Създаване и изтриване на витрина.
• Токени за пускане.
• Насочване на домейн към витрината и връщане към темата.
• Създаване на PAT токен.

Агентът не може да редактира шаблоните на готовите теми, защото те не са отворени за търговците. Редакторът на темата, модулите и собственият CSS/JS не стигат до Nitrogen витрина: нейният вид е изцяло нейният код. На насочен домейн 301 пренасочванията се прилагат от витрината, а връзките в имейлите на магазина към страници на платформата (например отписване или страницата на поръчка) засега не работят там. Агентът пуска на живо само когато кажете.

Как да проверите витрината преди пускане

Витрина, направена с vibe coding, се проверява като всеки сайт: на телефон, по скорост, по SEO и с пробна поръчка. Умението на CloudCart завършва всяка задача с проверка на целия сайт, но последната дума е ваша.

1. Телефонът първо. Отворете витрината локално на телефона си и минете пътя от началната страница до количката.
2. Скорост. Умението цели оценка 90 или повече на телефон в Lighthouse. Как се мери и какво значи, е в статията за скоростта и Core Web Vitals.
3. SEO. Проверете заглавията, описанията и адресите на продуктите. Стартовият проект пази адресите на магазина, така че старите връзки продължават да работят.
4. Пиксели и анализи. Поискайте от агента да провери, че събитията на CloudCart Analytics и вашите пиксели тръгват след съгласието за бисквитки.
5. Пробна поръчка. Поръчайте сами от адреса в cloudcart.dev, платете и проверете, че поръчката е в админа.
6. Домейнът. Насочете го и пуснете витрината още веднъж. Ако нещо не е наред, „Back to the store theme“ връща темата веднага.

Често задавани въпроси

Повече за собствената витрина и примери на живо има на страницата Дизайн с Nitrogen. Имате въпрос за витрината или за агента? Пишете ни на support@cloudcart.com.