1 установка
Приложение установлено
Ссылку на установку бот присылает после слова «старт». На рабочем столе появляется ярлык — значит, всё на месте.
Магазин и витрина · зоотовары
Сайт зоомагазина: корма с наличием, а не «уточните в личке»
Витрина, карточка товара, корзина и заказы — в одном HTML-файле. Без конструктора, подписки и программиста: промпт со страницы, семь шагов, ответы боту.
5 млн токенов бесплатно · файл остаётся у вас на диске
Витрина · корма и товары
214 позиций
Все товары
Кошки
Собаки
Птицы
Грызуны
В наличии
Корм для кошек, индейка
1 240 ₽
Наполнитель комкующийся
690 ₽
Лакомство для собак, рубец
350 ₽
В корзине 3 позиции
2 280 ₽
заказ №1147 · собран
самовывоз сегодня до 20:00
Знакомо?
Пока наличие живёт в переписке, покупатель уходит к соседям
Зоотовары покупают быстро и по факту: закончился корм — человеку нужно забрать пачку сегодня. Три сцены, которые в маленьком магазине повторяются каждую неделю.
«А индейка 2 кг есть?»
Телефон в сторону, к стеллажу, считать пачки, возвращаться и отвечать. Через час — тот же вопрос от четверых.
Поставщик поднял цену
В прайсе новая цифра, а в сторис и старом посте — прежняя. Покупатель приходит за ценой из переписки, и вы объясняетесь на кассе.
Заказ из трёх сообщений
«Две пачки», «и наполнитель», «а можно завтра». К вечеру в чате двадцать обрывков, и надо сверять, кто что просил.
Настоящий остаток снимает все три сцены сразу: покупатель видит полку, собирает корзину и оставляет заказ в одном месте.
Стоимость
Сколько это стоит
Три пути к витрине, которая показывает наличие. Разница в деньгах, сроке, правках и в том, кому принадлежит магазин.
| Нанять разработчика | Купить подписку | Собрать самому | |
|---|---|---|---|
| Деньги | Десятки тысяч рублей: макет, вёрстка, админка, доработки по счёту | Ежемесячный платёж за доступ к чужому сервису, пока магазин нужен | Свой файл и 5 млн токенов бесплатно |
| Срок | Несколько недель, иногда пара месяцев — и всё это без продаж | Вечер на шаблон, но под ваш ассортимент его придётся подгонять | Один вечер: семь шагов и 8–15 ответов боту |
| Правки | Заявка, очередь, счёт. Новая категория корма — новый этап работы | Только то, что разрешает тариф; лишний блок — доплата | Словами: «добавь фильтр по весу» — и фильтр появился |
| Кому принадлежит результат | Код и доступы у подрядчика, вам остаётся готовая сборка | Данные на чужом сервере: закроете подписку — потеряете витрину | Вам: один HTML-файл на вашем диске |
Пять причин собрать самому
01
Экономия
Ни счёта от студии, ни подписки за доступ. Один вечер работы и бесплатные токены на сборку.
02
Приложение принадлежит вам
Файл лежит в вашей папке и открывается в браузере. Никто не закроет доступ и не поднимет тариф.
03
Правки словами
«Сделай фильтр по виду животного» — и он в витрине. Без тикетов, брифов и созвонов.
04
Не нужно ждать разработчика
Пришла новая партия в обед — к вечеру остатки на витрине уже совпадают с полкой.
05
Нет лимитов тарифа на функции
Корзина, статусы и список заказов не спрятаны за «тариф PRO». Всё, что собрали, работает целиком.
итог
Магазин как рабочий инструмент
Витрина отвечает на вопрос «есть ли» вместо вас, а заказы лежат списком, а не в переписке.
Состав
Что будет в магазине
Семь экранов — столько нужно зоомагазину, чтобы продавать без переписки. Ничего лишнего вроде блога и галерей.
Витрина с фильтрами
Категории, вид животного, вес упаковки и переключатель «только в наличии». Карточки с ценой и остатком.
Карточка товара
Состав, вес, фасовка, остаток, похожие позиции и кнопка «В корзину» — без переходов в мессенджер.
Корзина
Позиции, количество, сумма товаров и доставки. Лишнее убирается одним нажатием.
Оформление заказа
Имя, телефон, город, самовывоз или доставка, комментарий. Одна форма — один заказ.
Статусы заказа
Понятная цепочка, по которой видно, где сейчас покупка.
новый→подтверждён→собран→отправлен→получен
Список заказов
Все покупки по датам и статусам: видно, что отложено, что ждёт оплаты, а что уже забрали.
Добавление товаров
Новая позиция заводится формой: название, категория, вес, цена, остаток. Без правки кода.
Инструкция
Семь шагов до готовой витрины
На скриншотах ниша и промпт уже подставлены — повторяйте по порядку и нажимайте те же кнопки.
2 запуск
Нажмите «Открыть веб-интерфейс»
В окне «С чего начнём?» есть кнопка Открыть веб-интерфейс. Дальше вся работа идёт в браузере.
3 проект
Нажмите «Создать проект»
Кнопка Создать проект заводит отдельную папку — витрина не смешается с другими задачами.
4 название
Впишите название проекта
Например, «Магазин: зоомагазин» — так папку будет легко найти. Затем снова нажмите Создать проект.
5 промпт
Скопируйте промпт и вставьте в поле
Возьмите текст из блока ниже кнопкой «Скопировать промпт» и вставьте в поле сообщения — Ctrl + V.
6 отправка
Нажмите «Отправить» ↑
Кнопка Отправить стоит справа от поля ввода. Можно просто нажать Enter — результат тот же.
7 вопросы
Ответьте на 8–15 вопросов
Бот спросит про категории, остатки, доставку и статусы. После ответов вы получите готовый HTML-файл приложения.
Промпт
Промпт для зоомагазина
Он собран под зоотовары: сущности, статусы и экраны названы так, как вы ими пользуетесь. Копируйте целиком, правьте только свои данные.
Ты — senior product designer и frontend-разработчик. Сначала задай мне 8–15 простых вопросов о моём зоомагазине, потом собери приложение одним HTML-файлом.
Моя задача: витрина зоомагазина, где корма и товары показывают реальное наличие — покупатель видит цену и остаток сам, без переписки «уточните в личке».
Сущности:
- товар: название, категория, вид животного (кошки / собаки / птицы / грызуны / рыбы), бренд, вес или объём, цена в рублях, остаток, короткое описание, заглушка вместо фото;
- категория: корма, наполнители, лакомства, аксессуары, средства ухода, витамины;
- корзина: позиции, количество, сумма товаров, стоимость доставки, итог;
- покупатель: имя, телефон, город, способ получения (самовывоз или доставка), комментарий;
- заказ: номер, дата, состав, сумма, доставка, статус, комментарий.
Статусы заказа: новый → подтверждён → собран → отправлен → получен.
Экраны:
1. Витрина: фильтры по категории, виду животного, весу упаковки и переключатель «только в наличии», карточки с ценой и остатком.
2. Карточка товара: состав и вес, остаток, похожие позиции, кнопка «В корзину».
3. Корзина: список позиций, изменение количества, сумма товаров и доставки.
4. Оформление заказа: имя, телефон, город, самовывоз или доставка, комментарий, кнопка «Подтвердить заказ».
5. Список заказов: все заказы по датам и статусам, смена статуса, повтор заказа.
Требования:
- один самодостаточный HTML-файл, весь CSS внутри, без внешних библиотек, шрифтов-иконок и картинок из интернета;
- вместо фото товаров — аккуратные заглушки на CSS;
- все данные хранятся в браузере и не теряются после перезагрузки страницы;
- витрина адаптивная: на телефоне карточки в одну колонку, кнопки крупные, фильтры не уезжают за экран;
- остаток меньше пяти штук помечай бейджем «осталось мало», ноль — «нет в наличии» с неактивной кнопкой;
- на витрине и в карточке товара видно, что есть на полке сейчас, без звонков и уточнений;
- русский язык, спокойный продуктовый интерфейс, тонкие линии, читаемые таблицы;
- в конце добавь короткую подсказку, как добавить товар и сменить статус заказа.
Сначала задай вопросы, дождись моих ответов и только потом отдай готовый файл.Кнопка «Скопировать промпт» кладёт текст в буфер обмена. Вставлять его нужно в поле сообщения на шаге 5 — файл никуда скачивать не требуется.
Вопросы
Частые вопросы
Без хостинга и домена витрина вообще откроется?
Да. Файл открывается двойным кликом в браузере — этого хватает, чтобы проверить фильтры, корзину и оформление. Хостинг и домен нужны только для публичной ссылки.
Можно ли принимать оплату прямо в витрине?
Платёжного шлюза в файле нет. Заказ падает в список, а деньги вы принимаете привычно — переводом, картой на кассе или при получении.
Сколько кормов и наполнителей выдержит каталог?
Каталог хранится в браузере и фильтруется на месте, поэтому сотни позиций открываются без задержек. Для магазина с ассортиментом в 20–200 наименований запаса хватает с головой.
Как поменять цену на корм или заменить фото?
На экране товаров выберите позицию и отредактируйте поля: цена, вес и остаток сохранятся сразу. Массовые изменения — например, поднять все цены на 5% — просите у бота словами, он перепишет файл.
Заказы придут мне в Telegram?
Заказ копируется одной кнопкой готовым текстом — номер, состав, сумма, способ получения — и отправляется в нужный чат. Сервер и бот для этого не нужны: витрина работает как обычная страница.
Соберу с телефона или нужен ноутбук?
Можно с телефона: веб-интерфейс и промпт открываются в мобильном браузере. Готовая витрина адаптивная — карточки в одну колонку, фильтры под большим пальцем.
Начните с одной позиции на витрине
Первый корм, первая цена, первый остаток — дальше магазин дополняется словами. Промпт готов, инструкция выше, файл останется вашим.
5 млн токенов бесплатно · без подписки и конструктора