Как един дизайнер изгради enterprise e-commerce система с AI — без Figma и без 12-членен екип

"Как Pancer.BG премина от 15-годишен статичен каталог към жива e-commerce платформа с 800+ продукта, SSR, централизирани операции и AI-assisted development."

Преди няколко години подобен проект почти сигурно щеше да отиде при агенция.

Product manager. UX/UI дизайнер. Frontend и backend разработчици. SEO специалист. DevOps. QA. Content екип. Месеци във Figma, още месеци в backlog и накрая една "Фаза 2", която често остава само в презентацията.

Днес изградих тази система сам.

Не с магически prompt, не защото AI "направи сайта вместо мен", и не защото сложните e-commerce проекти внезапно са лесни. А защото AI промени скоростта, с която един човек с продуктов вкус, техническа дисциплина и пълна отговорност може да мисли, тества и изгражда.

Това е историята на Pancer.BG — реален бизнес за градинска и горска техника, с 15-годишна история на домейна, каталог от 800+ продукта и ежедневни клиенти. Целта не беше нова визия върху стар сайт. Целта беше да се изгради система, която работи за клиента, за екипа и за следващите години растеж.

Клиентите намираха продукти в Google. Поръчките идваха по телефон. Домейнът трупаше авторитет. За времето си моделът беше напълно логичен.

Но с разрастването на каталога той започна да се превръща в ограничение:

• Всяка промяна на цена, наличност или продуктова информация зависеше от ръчна редакция.
• Липсваха централизирана база данни, количка, checkout и потребителски профили.
• Продуктовото съдържание беше трудно за мащабиране и контрол.
• SEO структурата, данните за търсачки и машинната четимост не бяха изградени за съвременния интернет.
• Оперативният екип нямаше единна система, през която да управлява магазина.

Тук "по-красив сайт" не би решил нищо.

Беше нужна e-commerce платформа, в която продуктът се редактира веднъж, а тази промяна стига до магазина, checkout-а, маркетинговите канали, търсачките и вътрешните операции.

Това не е атака срещу Figma. Тя е отличен инструмент, когато трябва да синхронизираш големи екипи, да валидираш посока с клиенти или да документираш сложна дизайн система.

Но при този проект рисуването на десетки статични екрани щеше да създаде излишен слой между идеята и реалния продукт.

Затова дизайнът се случваше директно в системата:

• Идентифицирах реалните проблеми в клиентския път и в ежедневната работа на екипа.
• Изградих информационната архитектура и визуалната йерархия върху реални продуктови данни.
• Тествах решенията директно в браузъра — с реални категории, снимки, цени, филтри и checkout сценарии.
• Итерирах според това, което действително се случва след launch, а не според това как изглежда статичен mockup.

AI беше ускорителят в този процес: за проучване, структуриране, boilerplate код, проверки, рефакториране и бързи технически итерации.

Но решенията оставаха човешки: как клиентът да намери правилната машина, как екипът да обработи поръчка, как се пази SEO историята и как се предотвратява грешна информация за продукт.

Каталог → Кошница → Checkout → Плащане

Хората звънят. Пишат в Messenger. Искат оферта. Не искат да попълват дълги форми. Понякога са готови да купят, но имат нужда от човек отсреща.

Затова Pancer.BG поддържа три пътя към една и съща поръчка:

• Пълен дигитален checkout за клиентите, които искат сами да изберат доставка, плащане, адрес и фактурни данни.
• Бърза поръчка от продуктова страница, при която клиентът оставя телефон, а екипът довършва детайлите в разговор.
• Proxy order през dashboard-а, при който служител може да създаде поръчка от името на клиент след телефонно обаждане, имейл или Messenger разговор.

Това е важен урок за всеки e-commerce проект: добрият UX не принуждава всички да следват един и същ сценарий. Той дава на различните хора най-краткия разумен път до покупката.

Другата е custom admin dashboard — оперативният контролен център, през който екипът управлява продукти, наличности, категории, промоции, поръчки, клиентски заявки, отзиви и съдържание.

Това означава, че за смяна на цена, банер или наличност не се чака developer ticket.

Екипът може да поддържа каталога, да обработва поръчки, да изпраща маркетингови известия и да управлява ключови секции от storefront-а в една обща среда.

Точно тук много redesign проекти се провалят. Изглеждат добре пред клиента, но оставят бизнеса да работи през Excel файлове, inbox-и, хаотични съобщения и ръчни промени.

Витрината продава. Dashboard-ът позволява на бизнеса да работи утре сутринта.

Затова каталогът е изграден като един източник на истина.

Когато екипът промени цена, наличност или продуктова информация, данните могат да захранят:

• storefront-а на Pancer.BG;
• Google Merchant Center и други shopping канали;
• Meta каталог за Facebook и Instagram кампании;
• Pinterest продуктови потоци;
• структурирани данни за търсачки;
• вътрешни административни и аналитични процеси.

Това не е "добавена интеграция". Това е архитектурен принцип: редактираш веднъж, системата разпространява правилните данни навсякъде.

• React и TypeScript за storefront-а.
• Vite SSR, така че продуктовите страници да връщат готово съдържание още от сървъра.
• Firebase Auth и Firestore за потребители, продуктови и оперативни данни.
• Redis и edge caching за бърз достъп до често използвана информация.
• Stripe, TBI Bank, Cloudinary, Resend и Speedy API за плащания, финансиране, медия, имейли и доставки.
• Vercel за deployment, preview среди и production инфраструктура.

Това не е списък с технологии за впечатление. Всяка част е избрана, защото решава конкретен бизнес проблем: видимост, производителност, контрол, надеждност или по-малко ръчна работа.

То е част от архитектурата.

Затова платформата включва SSR-видими страници, последователна URL структура, 301 пренасочвания, Schema.org Product и Offer данни, video structured data и автоматизирани продуктови feed-ове.

Създадени са и файлове като llms.txt и AI sitemap, които улесняват машинното разбиране на съдържанието от новото поколение AI системи.

Не става дума за трик, който кара LLM да "препоръча магазина". Става дума за чиста, последователна и структурирана информация, която машини и хора могат да разберат.

В реалната работа това доведе до по-добра индексация: броят на индексираните страници в Google Search Console се повиши от 67 до 169 в периода на структурните подобрения.

Открити бяха продукти с неточни технически характеристики. Това не е просто content проблем — при техника грешната информация може да доведе до грешно решение за покупка. Решението беше едновременно: корекция на данните и по-строги валидации при бъдещо въвеждане.

При ежедневна обработка на поръчки dashboard-ът започна да натоварва системата. Това наложи оптимизация на заявките и кеширащите слоеве.

След някои deploy-и част от посетителите виждаха по-стара версия заради кеширане. Решението не беше "да се надяваме, че ще се оправи", а да се добавят post-deploy проверки за реално сервираното live съдържание.

Това е ownership.

Дизайнът не приключва, когато интерфейсът изглежда добре. Приключва, когато системата остава надеждна и когато бизнесът може да работи през нея без техническа паника.

AI ускори човека, който може да свърже тези роли в една посока.

Той помогна да се пише и проверява код по-бързо, да се структурират сложни задачи, да се анализират варианти и да се итерира без традиционното забавяне между "дизайн", "предаване" и "разработка".

Но AI не носи отговорност за грешен checkout, счупена миграция, объркващ интерфейс, невалидна продуктова информация или лошо бизнес решение.

Тази отговорност остава при човека зад продукта.

Pancer.BG не доказва, че всеки може да изгради enterprise e-commerce система с няколко prompt-а. Доказва нещо по-интересно: че един дизайнер с продуктов мандат, системно мислене и правилно управляван AI може да поеме много по-голям обхват работа от преди.

И че бъдещето не е в повече екрани, повече handoff-и и повече слоеве между идеята и клиента.

Бъдещето е в хора, които могат да изграждат цялостни системи — от клиентския път и визуалния език до данните, операциите и откриваемостта.

Живата система: Pancer.BG
Пълният интерактивен case study: vladonacev.com/work/case-studies/pancer-bg-ecommerce-ssr
Portfolio: vladonacev.com

Можете да се свържете или да си сътрудничим чрез:

• LinkedIn
• Dribbble
• Behance
• X
• Contra

Или просто пишете през моята страница за контакт.

Pancer.BG е жива система — не презентация, а продукт, който работи всеки ден за клиенти и екип. Тук дизайнът среща операциите, а AI ускорява човека с пълна отговорност.

"Не е само това, което AI ускорява. Това е начинът, по който мислите, тествате и изграждате цялостни системи."

Ако сте дизайнер — нека поговорим за ownership. Ако сте бизнес — нека изградим система, която работи утре сутринта.