Как создать интернет-магазин с ИИ: пошаговый план

Ты продаёшь вручную в соцсетях или мессенджере: клиент пишет в директ, ты отправляешь фото, счёт, реквизиты, потом сверяешь оплату и адрес. На каком-то этапе становится очевидно — так можно работать, пока заказов десять в неделю, но не сто. Хочется настоящий интернет-магазин, где человек сам выбирает товар, кладёт в корзину, оплачивает и получает подтверждение. Но программиста нет, бюджет ограничен, а время — ночи после основной работы.

Хорошая новость: сегодня можно собрать работающий магазин с помощью ИИ-ассистента вроде Claude Code. Не «волшебной кнопки», а инструмента, который пишет код по твоим текстовым задачам. В этой статье — честный пошаговый план: что реально получится на старте, какой стек выбрать, как собирать проект промптами и сколько это займёт денег и времени. Без воды и без обещаний, что за вечер получится Ozon.

Что реально собрать с ИИ без программиста

Когда говорят «интернет-магазин», в голове сразу рисуется гигантская площадка: поиск по сотням товаров, личный кабинет, избранное, программа лояльности, сложная логистика. Это не про старт. В начале важно сделать минимально жизнеспособный продукт — MVP, который решает одну задачу: человек заходит, видит товар, может купить и получить понятное подтверждение.

MVP интернет-магазина: три столпа

Три функции превращают сайт в магазин:

1. Каталог. Страница или несколько страниц с товарами: фото, название, описание, цена. Без сложных фильтров на старте — достаточно группировки по категориям.
2. Корзина. Пользователь может добавить товар, изменить количество, удалить лишнее и видеть итоговую сумму.
3. Оформление заказа. Форма с контактами, адресом, способом доставки и переходом к оплате.

Всё остальное — дополнительно. Личный кабинет, история заказов, отзывы, скидки, интеграция со складом — это здорово, но позже. На старте главное, чтобы посетитель мог совершить покупку от начала до конца без твоего участия.

Что ИИ делает, а что нет

ИИ-ассистент помогает написать код, разобраться с ошибками, объяснить термины и предложить структуру проекта. Он не заменяет твоё понимание бизнеса: ты должен сам решить, что продаёшь, по какой цене, как доставляешь и как общаешься с клиентами. Claude Code не придумает уникальное торговое предложение и не настроит юридические документы. Но он делает техническую часть доступной человеку без опыта программирования.

Аналогия из курса: в первых модулях мы собираем игру «Змейку». Ты не пишешь код сам — ты описываешь правила, а ИИ генерирует код. Магазин — та же история, только правила другие: товар, цена, корзина, заказ.

Выбор стека простыми словами

Стек — это набор технологий, из которых собирается проект. Для простого магазина нужно три вещи: фронтенд (то, что видит пользователь), бэкенд (обработка заказов и данных) и база данных (где всё хранится). Плюс платёжная система.

Next.js — один фреймворк на всё

Next.js — это фреймворк на основе React, готовый каркас для сайта, в котором уже продумана маршрутизация страниц, сборка проекта и публикация. Он позволяет делать и красивые страницы, и серверную логику внутри одного приложения.

Почему Next.js удобен для магазина на ИИ:

• Один язык — JavaScript/TypeScript — и для внешнего вида, и для серверных функций. Проще ставить задачи Claude Code.
• Большое сообщество и много примеров. Если возникает вопрос, ИИ быстрее найдёт решение.
• Хорошо деплоится на Vercel — сервисе, который берёт код из GitHub и публикует сайт.
• Подходит как для лендингов, так и для каталогов с динамическими страницами.

Подробнее о создании страниц на этом фреймворке читай в статье «Лендинг на Next.js с Claude».

База данных: где хранить товары и заказы

База данных — это таблица или набор таблиц, где хранится информация о товарах, заказах и клиентах. Для магазина подойдёт PostgreSQL — надёжная реляционная база, с которой легко работать через ORM. ORM — это прослойка, которая позволяет общаться с базой обычными объектами и функциями, а не писать сложные SQL-запросы вручную.

Простой вариант для старта — Supabase. Это облачная база данных на базе PostgreSQL с удобной панелью управления. Там можно хранить товары, заказы и пользователей, а также настраивать доступ к данным. Бесплатный тариф отлично подходит, чтобы собрать и отладить магазин: на июль 2026 это 500 МБ базы и не больше двух активных проектов. Одна деталь решает всё: бесплатный проект уходит в паузу после недели без запросов и остаётся офлайн, пока ты не запустишь его руками. Для боевого магазина, где заказ может прийти в любой момент, нужен платный план Supabase или другой облачный PostgreSQL. Актуальные лимиты и цены сверяй на официальном сайте сервиса.

Чтобы лучше разобраться в теме баз данных, загляни в статью «Базы данных для новичка».

Платёжный шлюз: как принимать деньги

Платёжный шлюз — это сервис, который обрабатывает оплату картой. Он берёт на себя сложную часть: шифрование данных, проверку карты, списание средств и возвраты. Тебе нужно лишь подключить его к сайту.

Для России удобный вариант — ЮKassa. Она интегрируется с сайтом через API: пользователь нажимает «Оплатить», переходит на защищённую страницу ЮKassa, вводит данные карты, а после успешной оплаты сервис присылает твоему сайту уведомление. Два момента, которые изменились недавно и влияют на планы. С 29 декабря 2025 года ЮKassa прекратила поддержку сервисов для самозанятых, включая чеки и выплаты, так что рассчитывать на неё стоит в статусе ИП или ООО. С 1 января 2026 года к комиссии за платежи добавляется НДС по ставке 22%, это надо закладывать в цену товара. Подробная инструкция по подключению есть в отдельной статье «Как подключить ЮKassa».

Где хостить магазин

Для Next.js-приложения самый простой путь — Vercel. Это хостинг, заточенный под Next.js: ты связываешь проект с репозиторием на GitHub, и каждое изменение автоматически публикуется. У бесплатного тарифа Hobby есть важное ограничение: правила Vercel разрешают его только для личных некоммерческих проектов. Пока ты собираешь и тестируешь магазин — всё в порядке, но как только сайт начинает продавать, нужен план Pro (от $20 в месяц за место). Для базы данных — Supabase или любой другой облачный PostgreSQL. Базу лучше размещать в регионе, близком к покупателям, чтобы сайт работал быстрее.

Пошаговый план сборки с Claude Code

Теперь разберём сам процесс. Его можно разбить на восемь шагов. Каждый шаг — это одна или несколько задач для Claude Code.

Шаг 0. Опиши проект словами

Прежде чем просить ИИ писать код, подготовь небольшое техническое задание. Чем конкретнее описание, тем меньше доработок. Зафиксируй:

• что продаёшь (название магазина, категории товаров);
• какие страницы нужны (главная, каталог, страница товара, корзина, оформление заказа, спасибо за покупку);
• что должно происходить после оплаты (письмо клиенту, уведомление тебе, запись заказа в базу);
• какие данные собирать (имя, телефон, email, адрес, способ доставки);
• примерный дизайн (минималистичный, светлый, с карточками товаров).

Это описание ты будешь давать Claude Code как контекст. Хороший промпт звучит примерно так: «Создай интернет-магазин на Next.js 16 с каталогом товаров, корзиной и оформлением заказа. Используй TypeScript, Tailwind CSS и Prisma как ORM для PostgreSQL. Магазин продаёт …».

Шаг 1. Подготовь окружение

Перед началом понадобятся: редактор кода (Visual Studio Code), Node.js, Git и аккаунт на GitHub, а также доступ к Claude Code. Если ты проходишь курс skillmake, всё это уже настраивается в первых модулях. Главное правило: не пытайся сразу собирать магазин на продакшене. Сначала создай тестовый проект на компьютере, отладь логику, а потом уже публикуй.

Шаг 2. Создай проект Next.js

Попроси Claude Code инициализировать проект командой:

npx create-next-app@latest my-shop

Установщик сначала спросит имя проекта, а затем предложит выбор: «Would you like to use the recommended Next.js defaults?». Рекомендованный набор — это TypeScript, ESLint, Tailwind CSS, App Router и файл AGENTS.md; для магазина он подходит, смело соглашайся. Turbopack, быстрый сборщик, включается по умолчанию.

Если выбрать вариант «customize settings», вопросы пойдут по одному:

• TypeScript — да, помогает ловить ошибки;
• линтер (ESLint / Biome / None) — бери ESLint, если не знаешь, что выбрать: примеров и подсказок по нему больше;
• React Compiler — можно пропустить, на старте он не нужен;
• Tailwind CSS — да, ускоряет вёрстку;
• код внутри папки src/ — по желанию, для новичка удобнее без неё;
• App Router — да, современный подход к маршрутизации в Next.js;
• import alias — оставь значение по умолчанию @/*;
• AGENTS.md — да, это файл-подсказка, из которого ИИ-ассистент берёт актуальные правила Next.js.

После установки Claude Code поможет разобраться со структурой папок и запустить проект локально.

Шаг 3. Сверстай каталог

Начни с главной страницы и страницы каталога. На этом этапе товары можно хранить прямо в коде — в виде массива объектов. Не спеши подключать базу данных: сначала добейся, чтобы страницы выглядели правильно и открывались быстро.

Задачи для ИИ:

• создать компонент карточки товара с изображением, названием, ценой и кнопкой «В корзину»;
• сверстать сетку каталога;
• сделать страницу отдельного товара;
• добавить навигацию и шапку сайта.

После каждого шага проверяй результат в браузере. Если что-то не так — делай скриншот и показывай Claude Code, что именно поправить.

Шаг 4. Сделай корзину

Корзина — это состояние приложения. В простом варианте её можно хранить в памяти браузера с помощью React Context или Zustand. Для старта это нормально: пользователь добавляет товар, переходит в корзину, видит список и итоговую сумму.

Важные моменты:

• возможность менять количество;
• возможность удалить товар;
• пересчёт итоговой суммы;
• кнопка «Перейти к оформлению».

Если корзина должна сохраняться после закрытия браузера, позже можно перейти на localStorage. На старте это не критично.

Шаг 5. Оформление заказа

Страница оформления — форма, которая собирает данные покупателя. Минимальный набор полей: имя и фамилия, телефон, email, адрес доставки, комментарий к заказу.

После отправки формы сайт должен:

1. Сохранить заказ в базе данных (или, на первом этапе, отправить тебе уведомление).
2. Создать платёж в ЮKassa.
3. Перенаправить покупателя на страницу оплаты.

На этом этапе важно, чтобы данные проверялись: телефон выглядел как телефон, email — как email, обязательные поля не оставались пустыми. Claude Code легко добавляет такие проверки.

Шаг 6. Подключи базу данных

Когда каталог и корзина работают, пора перевести товары и заказы в базу данных. Для Next.js удобно использовать Prisma — ORM, которая позволяет описывать таблицы как модели и работать с ними через JavaScript/TypeScript.

Модели данных для старта:

• Product — id, название, описание, цена, изображение, категория, наличие;
• Order — id, статус, сумма, данные покупателя, дата создания;
• OrderItem — связь заказа и товаров, количество, цена на момент покупки.

Такая структура покроет базовые сценарии: показать товары, создать заказ, посмотреть историю. Подробнее о проектировании таблиц рассказано в статье «Базы данных для новичка».

Шаг 7. Подключи оплату

Подключение ЮKassa состоит из нескольких частей:

1. Регистрация в сервисе и получение тестовых ключей API.
2. Создание серверной функции, которая формирует платёжную сессию.
3. Перенаправление пользователя на страницу оплаты.
4. Обработка уведомления от ЮKassa после успешной оплаты.
5. Изменение статуса заказа на «оплачен».

Важно: сначала настрой всё в тестовом режиме. ЮKassa позволяет проводить тестовые платежи без реальных денег. Только когда логика отработана, переключайся на боевые ключи.

Пошаговая инструкция с примерами кода есть в статье «Как подключить ЮKassa».

Шаг 8. Задеплой магазин

Когда проект работает на твоём компьютере, его нужно опубликовать. Для Next.js это обычно Vercel:

1. Загружаешь код в репозиторий на GitHub.
2. Заходишь на Vercel, импортируешь проект.
3. Указываешь переменные окружения: адрес базы данных, ключи ЮKassa, секреты для подписи уведомлений.
4. Нажимаешь Deploy.

После публикации у тебя будет публичная ссылка. Проверь весь путь покупки: открытие каталога, добавление в корзину, оформление, тестовая оплата, уведомление о заказе. Если что-то сломалось — Claude Code поможет разобраться с логами в панели Vercel.

Подключение оплаты: что важно знать

Оплата — самый ответственный блок магазина. Здесь важно не торопиться и не путать тестовый и боевой режимы.

Тестовый режим прежде всего

Любой платёжный шлюз даёт возможность проводить тестовые платежи. Не подключай реальные деньги, пока не убедишься, что:

• заказ создаётся и сохраняется;
• сумма платежа совпадает с суммой заказа;
• после оплаты статус меняется;
• тебе приходит уведомление;
• покупатель видит страницу «Спасибо за заказ».

Безопасность и юридические мелочи

Никогда не храни данные банковских карт у себя. Вся чувствительная информация вводится на странице платёжного шлюза. Твой сайт передаёт только сумму, номер заказа и описание. Ключи API храни в переменных окружения, а не в коде.

В магазине должны быть страницы с офертой, политикой конфиденциальности и условиями возврата. Claude Code может помочь с шаблонами, но финальную редакцию лучше проверить юристом или адаптировать под свою деятельность.

Подробнее о технической стороне подключения читай в статье «Как подключить ЮKassa».

Чего не ждать от ИИ-магазина на старте

Важно быть честным: ИИ ускоряет разработку, но не отменяет её. Магазин не появится сам после одного промпта. Вот чего не стоит ожидать.

Не получится «Ozon за вечер»

Маркетплейсы уровня Ozon, Wildberries или Яндекс Маркета создаются командами разработчиков годами. У них сложная инфраструктура, логистика, служба поддержки, модерация продавцов и аналитика. Твоя задача на старте — не догнать их, а закрыть свою узкую потребность: продавать свой товар без ручной обработки каждого заказа.

ИИ не придумает бизнес-логику

Claude Code не знает, как у тебя устроены доставка, возвраты, скидки и общение с клиентами. Всё это нужно описать самому. ИИ помогает превратить описание в код, но первичное понимание процесса остаётся за тобой.

Дизайн и тестирование — на тебе

ИИ умеет делать аккуратные, но универсальные интерфейсы. Для уникального стиля придётся уточнять промпты и дорабатывать вручную. Кроме того, ИИ не заменяет ручное тестирование: ты сам должен пройти путь покупателя, проверить мобильную версию и убедиться, что письма приходят.

Техническая поддержка не исчезает

После запуска сайт нужно обновлять, следить за работоспособностью и разбираться с ошибками. ИИ помогает решать конкретные проблемы, но не следит за проектом круглосуточно. Зато ты постепенно начинаешь понимать, как устроен магазин изнутри, и сможешь добавлять функции самостоятельно.

Сколько времени и денег займёт

Время

Если ты уже знаком с базовым окружением (Node.js, GitHub, Claude Code) и у тебя есть чёткое описание магазина, MVP можно собрать примерно за одну-две недели вечерней работы. Распределение времени примерно такое:

• подготовка и описание проекта — 2–4 часа;
• настройка Next.js и вёрстка каталога — 6–10 часов;
• корзина и оформление заказа — 6–10 часов;
• подключение базы данных — 4–6 часов;
• интеграция оплаты — 4–8 часов;
• тестирование и деплой — 4–6 часов.

Итого: от 26 до 44 часов чистого времени. Реально это разворачивается на 7–14 дней, если работать по 2–3 часа в день.

Деньги

На старте можно обойтись минимальными затратами:

• домен — несколько сотен рублей в год (точные цены зависят от регистратора и зоны);
• хостинг на Vercel — бесплатно, пока ты собираешь и тестируешь; для магазина с реальными продажами нужен план Pro, от $20 в месяц;
• база данных Supabase — бесплатный тариф годится для отладки, боевому магазину нужен платный план, иначе проект уснёт после недели затишья;
• подписка Claude Code — платная, актуальные тарифы смотри на сайте Anthropic;
• комиссия ЮKassa — процент от оборота плюс НДС на комиссию, точные условия уточняй на сайте сервиса.

Пока идёт сборка, расходы почти нулевые: домен и подписка на ИИ-ассистента. Постоянные платежи начинаются с момента, когда магазин выходит в боевой режим, и это всё равно десятки долларов в месяц, а не сотни. Главные затраты — это твоё время.

Когда стоит обратиться к разработчику

Если у тебя сложная логистика, нужна интеграция с 1С, маркетплейсами или курьерскими службами, ИИ-подход может стать узким местом. В таких случаях лучше нанять разработчика или команду. Но для стандартного малого магазина силами ИИ вполне реально собрать рабочий MVP.

Частые вопросы

Обязательно ли знать программирование, чтобы собрать магазин с ИИ?

Нет, но нужно быть готовым разбираться в терминах и логике. Ты не пишешь код сам, но должно быть понятно, что делает каждый компонент. Если Claude Code предлагает решение, которое ты не понимаешь — попроси объяснить простыми словами. Со временем базовые понятия станут привычными.

Подойдёт ли обычный конструктор сайтов вместо Next.js?

Конструкторы удобны, если нужно быстро запустить простой магазин без кода. Для продаж внутри России это Tilda и другие российские платформы: у Shopify встроенный приём платежей в РФ недоступен, а интеграций с местным эквайрингом нет, так что он подходит разве что для торговли на зарубежную аудиторию. У конструкторов в целом есть ограничения: сложная кастомизация стоит дорого или невозможна, а комиссии и подписки могут вырасти. Next.js + ИИ дают больше контроля. Выбор зависит от целей: быстрый старт — конструктор, гибкость и масштабирование — код.

Можно ли начать без базы данных?

Да, на первом этапе. Товары можно хранить в коде, а заказы — отправлять себе на почту через сервисы форм. Но как только появляется несколько десятков товаров или нужно управлять статусами заказов, без базы данных становится неудобно. Поэтому лучше подключать базу, когда каталог и корзина уже работают.

Что делать, если ИИ написал код, который не работает?

Это нормально. Скопируй текст ошибки из терминала и покажи Claude Code. Обычно помогает последовательный подход: одна ошибка — одно исправление. Не проси сразу переписать всё. Если ошибка повторяется, попроси объяснить причину и предложить альтернативу. Иногда проще откатить изменения и пойти другим путём.

Нужен ли отдельный мобильный приложение?

На старте — нет. Современные сайты на Next.js адаптируются под телефоны и планшеты. Мобильное приложение стоит рассматривать, когда магазин уже приносит стабильные продажи. До этого момента достаточно хорошо свёрстанного сайта.

Как понять, что магазин готов к запуску?

Минимальный чек-лист готовности:

• каталог открывается и выглядит корректно на телефоне и компьютере;
• корзина считает сумму и позволяет изменять количество;
• оформление заказа собирает нужные данные;
• тестовая оплата проходит до конца;
• после оплаты заказ виден в базе или приходит уведомление;
• есть страницы с офертой и политикой конфиденциальности;
• домен подключён и сайт открывается по человекочитаемому адресу.

Когда всё это работает, можно открываться для реальных покупателей.

Заключение + чек-лист

Создать интернет-магазин с помощью ИИ без программиста реально, если правильно расставить ожидания. На старте цель — не конкурировать с маркетплейсами, а автоматизировать свои продажи: каталог, корзина, оформление, оплата, уведомление. Для этого подходит связка Next.js + PostgreSQL (Supabase) + ЮKassa + Vercel. Claude Code берёт на себя рутину написания кода, а ты — роль продакт-менеджера, тестировщика и владельца бизнеса.

Главное — двигаться маленькими шагами, проверять каждый блок перед переходом к следующему и не бояться ошибок. ИИ умеет их исправлять, но только если ты чётко описываешь проблему.

Если хочешь пройти весь путь под руководством — от первой настройки окружения до запуска реального проекта, — загляни на страницу курса skillmake. Там каждый этап разобран так, чтобы не пришлось разбираться в чёрных окнах терминала в одиночку.

Чек-лист «Магазин с ИИ готов к запуску»

• Описан MVP: каталог, корзина, оформление, оплата.
• Создан проект Next.js с TypeScript и Tailwind CSS.
• Сверстаны главная, каталог и страница товара.
• Работает корзина с изменением количества и подсчётом суммы.
• Есть форма оформления заказа с проверкой полей.
• Подключена база данных для товаров и заказов.
• Подключена ЮKassa в тестовом режиме и пройден тестовый платёж.
• После оплаты меняется статус заказа и приходит уведомление.
• Сайт задеплоен на Vercel и открывается по домену.
• Проверены мобильная и десктопная версии.
• Есть страницы оферты и политики конфиденциальности.
• Подготовлен план поддержки: куда смотреть, если что-то сломается.