AI DIY Projects
Главная/Магазины/Магазин кофе
магазин кофе · витрина и заказы

Сайт магазина кофе: витрина, корзина и заказы в одном файле

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

5 млн токенов бесплатно · промпт лежит прямо на этой странице · без подписки и программиста

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

Три пути к одному и тому же магазину

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

Без точных цен: важнее сроки и владение результатом.
  Нанять разработчика Купить подписку Собрать самому
Деньги Десятки тысяч рублей ещё до первого заказа, плюс отдельная плата за доработки. Ежемесячный платёж за доступ к чужому сервису. 0 ₽ на старте. Выдают 5 млн токенов — хватает на сборку и первые правки.
Срок Недели на бриф, макеты и согласования. День-два на освоение шаблона. Один вечер: семь шагов, 8–15 ответов боту, файл на руках.
Правки Новое техническое задание и снова ожидание в очереди. Только то, что разрешил тариф; лишний блок просто недоступен. Словами в чат: «добавь фильтр по помолу» — и фильтр появился.
Кому принадлежит результат Подрядчику, пока вы отдельно не выкупите исходники. Сервису: магазин живёт в его облаке и исчезает вместе с оплатой. Вам. Один HTML-файл на вашем диске — откроется даже без интернета.

Пролистайте таблицу вбок →

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

01

Экономия без компромисса

Вместо сметы и ежемесячной подписки — бесплатные токены на сборку. Деньги уходят на зерно и обжарку, а не на сайт.

02

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

Файл лежит у вас на компьютере и открывается двойным кликом. Витрину нельзя отключить за неоплаченный месяц.

03

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

Не нужно формулировать задачи на языке программистов: «сделай вес крупнее» работает как есть.

04

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

Сезонное зерно приходит в пятницу — витрина обновляется в пятницу, без «возьмём в спринт».

05

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

Фильтры, статусы, история заказов и добавление товаров — не платные модули, а части вашего файла.

итог

Магазин под ваш ассортимент

Не «шаблон магазина вообще», а витрина, где вес, обжарка и остаток — первое, что видит покупатель.

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

Три бытовые ситуации, из-за которых каталог и нужен

Проблема не в том, что кофе трудно продавать. Проблема в деталях, которые живут в переписке и на этикетке пачки.

«А какая обжарка?»

Покупатель спрашивает в мессенджере, вы идёте щупать пачку, отвечаете через час. В витрине обжарка стоит меткой в каждой строке.

Два заказа, одна пачка

Просят «Эфиопию 250 г», а на полке остался килограмм. Вес и остаток видны до оформления, поэтому обещать лишнего не приходится.

Заказ потерялся между блокнотом и чатом

Записали на стикер, стикер уехал под клавиатуру. Список заказов держит историю: от «новый» до «получен».

Что вы получите в файле

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

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

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

Регион, обработка, обжарка, вес, вкусовые ноты, цена и остаток — всё, что обычно выспрашивают у продавца.

Корзина

Позиции, количество, сумма и доставка считаются на месте. Лишнее убирается в один клик, с подтверждением.

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

Имя, телефон, способ получения, адрес и комментарий — например, «смолоть под воронку». Без регистрации.

Список заказов и статусы

Цепочка «новый → подтверждён → собран → отправлен → получен» переключается одной кнопкой, без ручных пометок.

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

Новое зерно заводится формой: название, обжарка, вес, цена, остаток. Без правки кода.

инструкция · 7 шагов

От установки до готового файла

Кнопки называются так же, как в приложении, поэтому искать их долго не придётся. Скриншоты сняты на примере магазина кофе.

1 установка

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

Ссылку на установку присылает бот @get_ai_access_bot после слова «старт». Открывайте ярлык AI DIY на рабочем столе — отдельная регистрация не нужна.

Ярлык AI DIY на рабочем столе и подсказка, что ссылку на установку присылает бот после слова старт
2 веб-интерфейс

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

В окне «С чего начнём?» есть кнопка Открыть веб-интерфейс. Именно она ведёт в браузерную версию, где удобнее смотреть каталог и собирать страницы.

Окно AI DIY Projects с кнопкой Открыть веб-интерфейс и балансом 5 000 000 токенов
3 проект

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

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

Пустой список проектов в веб-интерфейсе и кнопка Создать проект
4 название

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

Например, «Магазин: кофе в зёрнах». Двух-трёх слов хватит, чтобы узнать проект в списке, затем — Создать проект.

Поле ввода названия проекта Магазин: магазин кофе и кнопка создания
5 промпт

Скопируйте промпт с этой страницы

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

Поле сообщения с вставленным промптом про витрину магазина кофе и кнопка отправки
6 отправка

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

Кнопка со стрелкой вверх справа от поля или обычный Enter. Длинный текст — это нормально, отправляйте целиком.

Кнопка Отправить со стрелкой вверх рядом с полем сообщения в чате приложения
7 вопросы

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

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

Бот задаёт вопросы о магазине и предлагает варианты ответов про пользователей и стартовый экран
промпт

Текст, который нужно вставить в поле сообщения

Промпт адаптирован под кофейный магазин: сущности, статусы и экраны названы так, как вы ими пользуетесь. Копируйте целиком — править ничего не нужно.

Промпт для магазина кофе · ~1 минута на копирование
Ты — senior product designer и frontend-разработчик. Сначала задай мне 8–15 простых вопросов о моём магазине кофе, потом собери приложение одним HTML-файлом.

Моя задача: витрина магазина кофе, где зерно, обжарка и вес видны в одном каталоге.

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

Статусы заказа: новый → подтверждён → собран → отправлен → получен. Статус меняется одной кнопкой, предыдущий шаг сохраняется в истории.

Экраны:
1) витрина: сетка карточек, панель фильтров по обжарке, весу, помолу и цене, сортировка по цене, поиск по названию и региону, счётчик найденных позиций;
2) карточка товара: крупные обжарка и вес, блок «о зерне», цена за 250 г и за 1 кг, остаток, кнопка «В корзину»;
3) корзина: список позиций, изменение количества, удаление с подтверждением, итог и доставка;
4) оформление заказа: короткая форма без регистрации и выбор способа получения;
5) список заказов: фильтр по статусу, номер, покупатель, состав, сумма, дата;
6) карточка заказа: полная информация, смена статуса, копирование заказа текстом для отправки в Telegram;
7) товары: добавление и редактирование позиции, изменение цены, веса и остатка.

Требования:
- один самодостаточный HTML-файл, CSS и JavaScript внутри, без внешних библиотек, CDN и картинок из интернета;
- данные сохраняются в localStorage, при первом запуске подставь 8 примеров кофе с разными регионами, обжаркой и весом;
- адаптивная вёрстка от 360 px, удобные крупные кнопки для телефона;
- русский интерфейс, цены в рублях, вес в граммах, числа моноширинным шрифтом;
- обжарка и вес — заметные метки в каждой карточке каталога, а не мелкий текст;
- пустые состояния с понятным текстом, если корзина или список заказов пусты;
- аккуратный продуктовый стиль: светлый фон, тонкие линии, карточки с рамкой и лёгкой тенью.

Сначала задай вопросы, дождись моих ответов и только потом выдай готовый файл с короткой инструкцией, как им пользоваться.

Дальше — шаг 6 инструкции: кнопка «Отправить» ↑ и ответы на вопросы бота.

вопросы

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

Без хостинга и домена магазин вообще откроется?

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

Можно ли принимать оплату картой прямо в файле?

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

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

Спокойно работает с сотнями строк: каталог хранится в браузере и фильтруется на месте. Для магазина на 20–150 позиций запаса хватает.

Как поменять цену на зерно или заменить фото?

Откройте экран товаров, выберите позицию и отредактируйте поля — цена, вес и остаток сохранятся сразу. Массовую правку можно попросить словами: «подними цены на 1 кг на 5 процентов».

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

Заказ копируется одной кнопкой готовым текстом — с номером, составом, суммой и адресом — и отправляется в нужный чат. Уведомление приходит туда, где вы и так читаете сообщения.

Подойдёт ли с телефона?

Да. Собирать можно и с ноутбука, и с телефона: интерфейс подстраивается под узкий экран. Готовая витрина адаптивная — карточки в одну колонку.

следующий шаг

Витрина кофе — за один вечер

Семь шагов, один промпт и 8–15 ответов. На выходе — файл, где обжарка, вес и цена стоят в одной строке, а заказы не теряются в переписке.

5 млн токенов бесплатно · ваши данные остаются в вашем браузере