Меню веганского кафе, которое само расскажет о составе

Состав и аллергены — причина, по которой гость остаётся или уходит.

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

Сравнивать стоит не прайсы, а владение. Суммы у студий и сервисов разные, поэтому в таблице — структура расходов.

Цифры не названы намеренно: они меняются от города и пакета.

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

1. Экономия. Ни разработки, ни подписки: токенов хватает на сборку и несколько переделок.
2. Приложение принадлежит вам. На выходе — один HTML-файл. Его можно положить на хостинг или флешку, доступ не отключат вместе с оплатой.
3. Правки словами. «Добавь категорию "Супы"», «убери мёд», «подними цены» — бот вносит изменения без программиста.
4. Не нужно ждать разработчика. Сезонное меню или новая позиция — к следующей смене, а не через две недели.
5. Нет лимитов тарифа на функции. Категории, поиск, фильтры и стоп-лист не продаются отдельно. Всё из промпта остаётся у вас.

Шесть вещей, которые закрывают вопросы зала.

1. Категории и позицииЗавтраки, супы, горячее, десерты, напитки. Названия и порядок задаёте вы, гости переключаются табами.
2. Состав и весИнгредиенты и граммы в карточке. Пишите как для гостя: «кокосовое молоко, тахини, кунжут».
3. Аллергены и меткиГлютен, соя, орехи, кунжут, мёд; метки «без глютена», «без сахара», «острое». Гость фильтрует меню под себя.
4. ЦеныМеняются за минуту. Можно поднять стоимость всех напитков сразу, не пересобирая страницу.
5. Стоп-листПозиция остаётся в меню со статусом «сегодня нет». Гость видит честную картину, официант не извиняется.
6. QR-ссылка и быстрые правкиОдин адрес для всех столов; изменения видны после обновления. Файл лёгкий, открывается на телефоне.

Режим редактирования открывается кнопкой и паролем. Гость видит только меню, вы — карточки с полями цены, состава и статуса.

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

1

Установите приложение

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

2

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

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

3

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

На стартовом экране нажмите «Создать проект». Один проект — одно приложение.

4

Впишите название и нажмите «Создать проект»

Введите название, например «Меню: веганское кафе», и нажмите «Создать проект».

5

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

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

6

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

Нажмите «Отправить» ↑ или Enter. Промпт длинный — отправляйте его целиком.

7

Ответьте на вопросы бота

Бот задаст 8–15 простых вопросов о категориях, блюдах и аллергенах. Отвечайте своими словами — в конце получите HTML-файл.

Если захотите поменять блюдо или цену, напишите изменение словами — файл пересоберётся.

Скопируйте текст целиком — кнопка ниже. Промпт вставляется в поле сообщения на шаге 5.

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

Моя задача: электронное меню веганского кафе, которое гость открывает по QR со стола и сам читает состав, вес, аллергены и цену. Официанту не нужно бегать на кухню за уточнениями.

Данные:
— категории: завтраки, супы, горячее, десерты, напитки (замени на мои);
— позиция: название, короткое описание, состав, вес в граммах, цена, аллергены (глютен, соя, орехи, кунжут, мёд), метки «без глютена», «без сахара», «острое», место под фото;
— статус: в наличии → стоп-лист; стоп-позиция видна, но её нельзя добавить в заказ;
— настройки: название кафе, валюта, телефон, ссылка на Telegram, пароль редактирования.

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

Поведение:
— один HTML-файл, CSS и JavaScript внутри, без внешних библиотек, CDN и картинок из интернета;
— данные хранятся в localStorage, при первом запуске загружается демо-набор из 12–16 блюд;
— гость не может редактировать; режим редактирования открывается кнопкой «Редактировать» и паролем из настроек;
— интерфейс на русском, крупные кнопки, читается на телефоне одной рукой;
— сумма заказа считается внизу, заказ формируется как текст для отправки в Telegram;
— QR-код не рисуй картинкой: оставь блок с подписью «QR на стол» и местом под него.

Стиль: бумажное редакционное меню — фон #f4efe6, текст #1f1b16, акцент #8a5a2b, тонкие линии 1 px, скругления 0–2 px, без теней и эмодзи, заголовки serif. В конце объясни, как открыть файл и как поменять блюдо.

Если бот переспросит про оформление, скажите: «спокойное бумажное меню, крупные названия блюд, аккуратные линии».