От 3D-бургеров до кастомного мерча: создайте магазин с помощью AI

Булочка поднимается. Взор появляются корнишоны. Добавьте ещё ломтик сыра — и бургер меняется прямо на глазах, так же как и чек.В другом месте покупатель перетаскивает иллюстрацию на толстовку, немного сдвигает её вверх, затем поворачивает товар, чтобы понять, как это будет смотреться. За этим простым действием продавец уже заранее определил, где можно размещать изображение и какого оно может быть размера.Это два очень разных покупательских опыта. Их объединяет полезная мысль: витрина магазина может быть выстроена вокруг того, что вы продаёте — вплоть до того, как клиент выбирает товар.Мы собрали обе отправные точки в коллекции Modern Shop на GitHub: , 3D-витрина для фастфуда, и , конструктор товаров для кастомного мерча. Исходники публикуются под лицензией MIT — вы можете изучать их, адаптировать и развивать дальше.Возьмите идею, свой бренд и инструмент для кодирования с AI, например Codex или Claude Code. Уже есть интересный материал, с которого можно начинать.

Jelly Bites: пусть клиенты собирают свой обед

Начните с живой демонстрации Jelly Bites. Выберите бургер, потяните, чтобы повернуть, и попробуйте изменить ингредиент. Еда откликается мягким колебанием. Выделите слой — и стопка раскрывается, чтобы показать, что внутри.Это кажется игривым, но взаимодействие решает практическую задачу. Клиенты видят свои выборы: корнишоны, соус, сыр и топпинги перестают быть набором опций, которые нужно вообразить, и становятся видимыми частями заказа.Пицца-конструктор идёт тем же путём в другом направлении: выберите размер, корочку, соус и топпинги и наблюдайте, как формируется пицца. Живой чек делает последствия этих решений наглядными. Демонстрация также показывает варианты доставки и самовывоза, промокоды, оформление заказа и экран отслеживания статуса.Есть одна небольшая, но важная деталь, когда люди меняют своё решение. То, что находится на этапе сборки, — это черновик, пока клиент не выберет . Позиция в корзине затем может быть возвращена в 3D-конструктор для редактирования. Именно такое взаимодействие ресторан может адаптировать под свои процессы.Исходный код 3D-витрины для фастфуда написан с использованием Vue, TypeScript и Three.js. Вам не обязательно знать эти названия, чтобы попробовать демо. Для разработчика или кодирующего агента они обозначают знакомый браузерный проект для изучения и расширения. Формы еды сгенерированы в коде, что даёт конкретную отправную точку для изменения внешнего вида и поведения.Московская бургерная может адаптировать меню под свои рецепты и упаковку. Пиццерия — выставить фирменные сочетания в приоритет. Вы можете поменять цвета, язык, тексты, набор ингредиентов и поток оформления заказа в соответствии с бизнесом. В примере уже представлены английская и персидская раскладки.Одна важная граница, которую стоит понимать перед использованием в реальных заказах: текущее демо использует примерные данные каталога, заказы хранятся в браузере, а оформление и отслеживание — имитируются. Связь с Selldone ещё нужно реализовать. Визуальную часть можно исследовать; для финальной работы требуются серверные проверки каталога и цен, оплат и выполнение заказов через реальную торговую интеграцию. 3D-опыт требует браузера с поддержкой WebGL 2, поэтому тестируйте адаптацию на телефонах и браузерах, которыми пользуются ваши клиенты.

Mockup Studio: один опыт для продавца, другой — для покупателя

Магазин кастомных футболок решает другую задачу. Покупатель хочет свободы для экспериментов. Печатник же нуждается в дизайне, который помещается в реальную область печати.Mockup Studio учитывает обе стороны этой задачи. Откройте живой демо-редактор, и вы увидите два явно обозначенных режима: для администраторов магазина и для покупателей.

Продавец задаёт правила один раз

В конструкторе шаблонов продавец выбирает товар, добавляет ракурсы продукта и задаёт печатаемую область. Размеры хранятся в миллиметрах, с настройками разрешения и облёта (bleed) — дополнительной области изображения за линией обреза.Продавец затем решает, что покупатель сможет менять: переносить, менять размер или поворачивать изображение, например. Печать на груди может иметь одни границы, а на рукаве — другие. Шаблон можно протестировать с точки зрения покупателя до того, как передать его в хост-приложение.Это разделение делает идею полезной не только для одной футболки. В примере галереи есть футболка, худи, свитер, кепка, кружка, подушка и бирка. Подготовленные 3D-ассеты также можно использовать в поддерживаемом формате модели. Для продукта другой формы потребуется подготовить модель и соответствие печатаемых областей.Студия также может создать начальные фото товара из настроенной 3D-модели. Это даёт продавцу ещё один способ подготовить виды для редактора при разработке продукта.

Клиент получает пространство для экспериментов

Редактор для покупателя более сфокусирован. Загрузите изображение, разместите его, отрегулируйте размер и просмотрите превью на товаре. Правила продавца остаются в силе, пока клиент экспериментирует.Доступны 2D-фото-вью и опциональный 3D-режим с возможностью поворота. Изменения в артворке отображаются на модели. Для поддерживаемых мягких изделий есть инструмент «потянуть», который позволяет приподнять ткань и посмотреть, как она возвращается в исходное положение. Это эффект предпросмотра; он не растягивает изображение, которое будет отправлено на печать.Проект чётко разделяет две стороны: одна показывает покупателю, как может выглядеть вещь. Другая — прозрачный PNG для поверхности печати, с использованием заданных физических размеров и разрешения. Индикатор качества печати помогает понять, как пиксели исходного изображения соотносятся с выбранным размером.Для реального производственного процесса печатник всё равно должен утвердить размеры, цвета и требования к файлам. Текущий экспорт — это сгенерированный в браузере RGB PNG, без CMYK и конверсии цветовых профилей, специфичных для типографии. Сгенерированные формы продуктов — это иллюстрации, а не точные мерки каждой вещи, которую вы можете продавать.Демо также хранит шаблоны и дизайны локально. Сохранение их в бизнесе, привязка точного дизайна к заказу, приём оплаты и отправка задания в производство — это шаги интеграции для готового магазина. Инструменты для работы с текстом/шрифтами, товарные варианты и прямое перетаскивание арта по 3D-поверхности — в числе функций, которые ещё в планах проекта.

Отправная точка меняет разговор с AI

Запрос «Постройте мне магазин» оставляет слишком много на усмотрение AI-помощника. «Возьмите этот редактор продуктов, используйте наш бренд и сделайте удобный поток для нашей печатни» даёт помощнику конкретику.Именно поэтому мы делимся исходниками. Вы можете увидеть взаимодействие, попробовать его и указать части, которые хотите изменить. Скриншот становится темой обсуждения. Демо — рабочей ссылкой. Код даёт вашему разработчику или AI-агенту отправную точку.Используйте ChatGPT, чтобы проработать бизнес-идею: кто покупает? Какие опции важны? Где клиенты сомневаются? Какая информация должна доходить до кухни или печатного цеха? Затем передайте это ТЗ в Codex, Claude Code или другую среду AI-разработки, которая может просматривать и редактировать проект.AI-инструменты помогают адаптировать компоненты, переработать дизайн, связать сервисы, написать тесты и объяснить незнакомый код. Качественный результат по-прежнему зависит от чёткого ТЗ и проверки реального опыта. Давайте помощнику по одной полезной вехе за раз и просите показать, что работает.

Где пригодится Selldone MCP

Фасад магазина — это то, к чему прикасаются покупатели. За ним — товары, остатки, оплаты, доставка и заказы, которые кто-то должен выполнить.Selldone MCP даёт связанного AI-помощника с упорядоченным доступом к авторизованному магазину на Selldone. В процессе разработки это помогает агенту работать с каталогом магазина, контентом и поддерживаемыми настройками вместо того, чтобы гадать по отдельным демонстрационным данным. Доступ остаётся в рамках магазина и тех прав, которые вы выбираете.Развернутая витрина при этом требует собственной реализованной интеграции с API Selldone или сервисом. MCP помогает помощнику с разработкой и работой в рамках утверждённого магазина; он не превращает автоматически кнопку «оплатить» в демо в полноценный платёжный поток.Для Jelly Bites это означает подключение меню и потока заказов к реальным торговым сервисам. Для Mockup Studio — надёжное сохранение шаблона продавца и выбранного покупателем дизайна, чтобы затем привязать этот дизайн к нужному товару и заказу. Внешний клиентский опыт может оставаться уникальным, а Selldone обеспечит торговую основу.Существует несколько способов построить решение на этой основе. Полнофункциональную витрину можно настроить через workflow Selldone Layout, а более специализированное приложение — использовать отдельный frontend. Обзор Selldone Genesis объясняет эти пути. Правильный выбор зависит от того, сколько от существующего магазина вы хотите сохранить и насколько необычен путь клиента.

Дайте вашему AI более точное первое ТЗ

Вы можете начать с такого запроса в среде кодирования. Замените части в скобках на данные вашего бизнеса.

Изучите два проекта на https://github.com/Modern-Shop и порекомендуйте лучший стартовый вариант для [моего бизнеса]. Прочтите документацию, затем клонируйте выбранный проект в новую папку. Покажите, какие функции работают сейчас, а какие требуют интеграции. Адаптируйте путь покупателя под [мой бренд, товары и требования], сохраняя удобство на мобильных устройствах.

Когда направление выбрано, попросите следующий этап:

Подключите предполагаемый магазин Selldone через MCP с правами, необходимыми для этой задачи. Спланируйте и реализуйте реальный каталог, хранение дизайнов там, где это актуально, корзину, оформление заказа и интеграцию заказов, используя поддерживаемые сервисы Selldone. Замените демонстрационные допущения реальными данными магазина. Протестируйте полный поток и покажите превью для проверки перед развёртыванием.

Эти подсказки — начало разговоров по разработке. Хороший агент проверит проект, выявит недостающие части и будет прорабатывать их вместе с вами.Для первого этапа ресторана можно запросить один завершённый заказ: кастомизировать товар, увидеть корректную цену, оплатить в поддерживаемом тестовом потоке и убедиться, что бизнес получил заказ. Для печатного сервиса проследите один дизайн от загрузки до превью и до сохранённого точного файла, прикреплённого к заказу.Именно здесь кастомная витрина может стать экономичнее: готовый код взаимодействия и торговая платформа сокращают объём работ с нуля. Окончательная стоимость всё равно будет зависеть от дизайна, интеграций, ассетов, хостинга и тестирования, необходимых вашему бизнесу. Лицензия MIT делает примерный исходник переиспользуемым; она не включает платные сервисы.

Создайте сами или доверьте идею нашей команде

Мы продолжим совершенствовать образцы Modern Shop и развивать коллекцию. Вы можете начать с доступных версий, адаптировать целый опыт или взять ту часть, которая решает вашу задачу.Если вы предпочитаете, чтобы специалисты оформили результат под ваш бренд, вы можете запросить расчёт индивидуальной витрины у официальной команды настройки и дизайна Selldone. Принесите демо, которое вам понравилось, свои товары и желаемый клиентский опыт. Мы поможем оценить дизайн и реализацию до начала проекта.Может быть, ваш магазин начнётся с бургера, который на экране разбирается на слои. А может — с маленькой иллюстрации на кружке. Откройте демо, измените что-нибудь и посмотрите, какая идея ближе вашему бизнесу.Изучите Modern Shop на GitHub · Попробуйте 3D-конструктор еды · Попробуйте Mockup Studio