AIAI DIY Забрать доступ
Все приложения/Магазины и витрины/Мерч-магазин

Витрина · мерч-магазин

Витрина мерч-магазина, которую вы соберёте сами

Размер, остаток и номер экземпляра видны в карточке — без вопросов в личку. Витрина, корзина и заказы живут в одном файле.

  • Размерная линейка S–XXL прямо в карточке, остаток по каждому размеру.
  • Лимитированные серии с прогрессом «продано 31 из 50».
  • Заказы идут по цепочке: новый → подтверждён → собран → отправлен → получен.
5 000 000 токенов бесплатно Без программиста Один HTML-файл

Сборку ведёт бот: вы отвечаете про ассортимент и доставку.

Сколько это стоит

Три пути к витрине и цена каждого

Результат один: магазин с размерами, сериями и заказами. Разница — в деньгах, сроке, правках и владельце продукта.

Без точных цен и названий сервисов: расценки у всех разные.
Критерий Нанять разработчика Купить подписку Собрать самому
Деньги Десятки тысяч рублей и предоплата Платёж каждый месяц, пока торгуете 5 000 000 токенов бесплатно
Срок Недели переписки, макетов и правок Вечер на шаблон и ещё вечер на подгонку Один вечер с ботом
Правки Через техзадание и новый счёт Только то, что разрешает конструктор Фразой в чате: «добавь размер XXL»
Кому принадлежит результат Подрядчику: код и доступы у него Сервису: отключили платёж — витрины нет Вам: файл лежит на вашем компьютере

Подписка — аренда чужого продукта, разработчик — покупка работы. Свой файл открывается даже без интернета.

Пять причин собрать самому

Почему мерч-магазин лучше сделать своими руками

Дело не в экономии на качестве, а в контроле: витрина меняется вместе с дропом.

  1. 01

    Экономия

    Одна сборка на бесплатных токенах вместо счёта за разработку и аренды конструктора.

  2. 02

    Приложение принадлежит вам

    HTML-файл хранится у вас: открывайте на ноутбуке или отдавайте помощнику.

  3. 03

    Правки словами

    «Сделай серию на 70 штук и добавь размер XXL» — витрина уже другая. Ни техзадания, ни ожидания.

  4. 04

    Не нужно ждать разработчика

    Дроп стартует в пятницу вечером — вы сами ставите цены и остатки, а не ищете подрядчика в выходной.

  5. 05

    Нет лимитов тарифа на функции

    Фильтры, лимитированные серии, статусы и список заказов не разложены по платным планам.

Что будет в магазине

Семь экранов, которые закрывают бытовые дыры

Три вечера, знакомые каждому, кто торгует мерчем, — и модули, которые их разгружают.

Ситуация 01 · размер

«А M ещё есть?»

Пятница, дроп, тридцать одинаковых сообщений. В блокноте «худи — 4», но каких размеров — непонятно, и половина уже у курьера.

Ситуация 02 · серия

«Мне нужен номер 13»

Лимит на пятьдесят штук, номера разошлись по перепискам. Кто получил тринадцатый и закрыта ли серия — вспоминать по стикерам.

Ситуация 03 · заказ

«Я просил L и чёрный»

Размер в одном сообщении, цвет в другом, адрес в третьем. Собираете — упаковываете не то, потом извиняетесь и платите за повторную доставку.

01

Витрина с фильтрами

Категории, размеры, наличие, лимитированные серии и цена. Покупатель сужает выбор сам.

02

Карточка товара

Линейка размеров с остатком по каждому, тираж, номер экземпляра и кнопка «В корзину».

03

Корзина

Товар, размер и количество. Сумма пересчитывается сразу.

04

Оформление заказа

Имя, телефон, город и доставка. Три поля вместо десяти сообщений в мессенджере.

05

Статусы заказа

Новый → подтверждён → собран → отправлен → получен. Видно, что ждёт вашего действия.

06

Список заказов

Поиск по номеру и телефону, фильтр по статусу, повтор заказа.

07

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

Новая позиция — через форму: тираж, размеры, цена, остатки. Код открывать не нужно.

  • Серия закрывается автоматически, когда тираж распродан.
  • Размер можно убрать из продажи, не удаляя товар.
  • Остаток уменьшается после каждого заказа.
  • Скрытая позиция остаётся в истории.

Инструкция

Семь шагов от установки до готовой витрины

Внизу — экраны с жёлтыми подсказками. Названия кнопок совпадают с интерфейсом.

1

Приложение установлено

Напишите боту «старт» — он пришлёт ссылку на установку. Установите приложение и откройте его.

Ссылку присылает @get_ai_access_bot после слова «старт».

Рабочий стол с ярлыком приложения AI DIY и жёлтой подсказкой «Приложение установлено — открывайте»
2

Нажмите «Открыть веб-интерфейс»

В окне приложения нажмите кнопку «Открыть веб-интерфейс» — рабочая область откроется в браузере.

Баланс токенов виден в интерфейсе — потраченное всегда перед глазами.

Окно приложения AI DIY с выделенной кнопкой «Открыть веб-интерфейс» и подсказкой о токенах
3

Нажмите «Создать проект»

На экране «Ваши проекты» нажмите кнопку «Создать проект» в правом верхнем углу. Каждый проект — отдельная папка со своим магазином.

Старые проекты остаются на месте: можно вести второй дроп рядом.

Экран «Ваши проекты» с проектом «Магазин: мерч-магазин» и кнопкой «Создать проект»
4

Впишите название проекта

Например, «Магазин мерча». Впишите название и нажмите «Создать проект».

Форма нового проекта с полем названия и кнопкой «Создать проект»
5

Скопируйте промпт и вставьте в поле сообщения

Нажмите «Скопировать промпт» в блоке ниже, вернитесь в проект и вставьте текст в поле сообщения через Ctrl+V.

Промпт длинный — вставляйте целиком, это нормально.

Поле сообщения проекта с вставленным промптом мерч-магазина и жёлтой подсказкой про Ctrl+V
6

Нажмите «Отправить» ↑

Отправьте сообщение кнопкой «Отправить» со стрелкой вверх или клавишей Enter.

Текст промпта в поле ввода и кнопка «Отправить» со стрелкой вверх
7

Ответьте на 8–15 вопросов бота

Бот спросит про категории, размеры, тиражи и доставку — отвечайте словами или выбирайте варианты. В конце отдаст готовый HTML-файл магазина.

Файл открывается двойным кликом, интернет для работы витрины не нужен.

Бот задаёт вопросы о приложении и обещает отдать готовый HTML-файл после ответов

Промпт

Текст, с которого начинается ваш мерч-магазин

Скопируйте кнопкой и вставьте в поле сообщения нового проекта.

prompt · мерч-магазин
Ты — продуктовый дизайнер и frontend-разработчик. Собери мне мерч-магазин одним HTML-файлом. Я продаю мерч небольшими партиями: веду дела в таблице и мессенджере, код не знаю.

Сначала не пиши код. Задай мне 8–15 вопросов простыми словами, с вариантами ответов: какие товары в ходу (худи, футболки, кепки, шопперы, стикеры); какие размеры я использую и как их подписываю; как устроены лимитированные серии и нумерация экземпляров; сколько штук в серии и что показывать, когда серия закрыта; как считается доставка; нужен ли предзаказ; как покупатель узнаёт о новом дропе; что показать на первом экране. Не спрашивай про фреймворки, базы данных и архитектуру.

Потом спроектируй сущности: товар (название, категория, цена, силуэт-заглушка вместо фото, размеры, тираж, номер экземпляра, остаток по каждому размеру, состояние «в наличии», «предзаказ» или «серия закрыта»), категория, корзина (товар, размер, количество), покупатель (имя, телефон, мессенджер, город, адрес или пункт выдачи), заказ (номер, дата, позиции, сумма, доставка, статус, комментарий). Статусы заказа: новый → подтверждён → собран → отправлен → получен. Размер выбирается в карточке товара, а не в переписке. Связи — по стабильным ID.

Экраны: витрина с фильтрами по категории, размеру, наличию и лимитированности; карточка товара с линейкой размеров, остатком по каждому размеру, номером экземпляра и кнопкой «В корзину»; корзина с пересчётом суммы; оформление заказа с доставкой и способом оплаты; список заказов с поиском по номеру и телефону и фильтром по статусу; добавление и редактирование товара с тиражом, размерами и остатками; экран «Серии» с прогрессом «продано 31 из 50». Продумай пустые состояния, запрет добавить размер, которого нет, и поведение после смены статуса.

Дизайн выбери сам, но он должен быть чистым и продуктовым: карточки с тонкой рамкой, спокойные бейджи размеров и статусов, таблицы с тонкими линиями, один акцентный цвет на действиях, адаптив от 360 px, без визуального шума.

Технически: один HTML-файл, CSS и чистый JavaScript внутри, localStorage как хранилище, без сервера, сборщиков и npm. Раздели слои: storage → данные → функции → компоненты → экраны → навигация. После любого действия данные сохраняются, интерфейс перерисовывается без перезагрузки страницы. Добавь демо-данные: 10 товаров, 3 категории, 4 заказа и две серии с разным прогрессом, а также кнопку «Убрать демо-данные» с подтверждением. Обработай пустые поля, битые данные в localStorage, удаление товара, из которого уже собран заказ, и закрытие окон по Escape.

Перед выдачей сам пройди сценарии: выбор размера, отсутствующий размер, добавление в корзину, оформление заказа, смена статуса, закрытие серии, перезагрузка страницы, работа с телефона. Исправь найденное. Ответ — полный готовый HTML-файл, без фрагментов «вставьте сюда».

Дальнейшие правки — так же словами: «добавь размер XXL», «сделай серию на 70 штук».

Вопросы

Что обычно спрашивают перед сборкой

Витрину можно открыть без хостинга и домена?

Да. Магазин собирается в один HTML-файл и запускается двойным кликом. Домен и хостинг нужны, только если захотите отправить покупателям ссылку.

Как показать, что лимитированная серия закончилась?

У товара есть тираж и счётчик проданных. Когда остаток доходит до нуля, карточка получает состояние «серия закрыта»: кнопка гаснет, позиция остаётся в архиве.

Сколько позиций выдержит такой магазин?

Несколько сотен товаров и тысячи заказов — спокойный объём. Если ассортимент подойдёт к тысяче, попросите бота добавить поиск.

Можно ли поменять цену и остатки после старта дропа?

Можно и нужно. Открываете товар, правите цену, тираж или остаток, сохраняете — витрина обновляется сразу. Код не нужен.

Заказы будут приходить мне в Telegram?

Сам файл работает без сервера и ничего не отправляет. Кнопка «Сообщить о заказе» собирает номер, состав и адрес в текст — его остаётся переслать в чат.

Получится вести магазин с телефона?

Да, интерфейс собирается с адаптивом от 360 px. С телефона удобно добавить товар и перевести заказ в статус «собран».

Соберите витрину до следующего дропа

Один вечер, один файл и 5 000 000 токенов бесплатно. Размеры, тиражи и статусы заказов будут на месте.

5 000 000 токенов на сборку и правки. Дальше — только ваш файл.