Меню бара с QR: коктейли, крепость и цена на одном экране

Сколько это стоит на самом деле

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

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

1. Экономия

   Нет счёта за вёрстку и за каждую следующую правку — платите за генерацию, а не за сезон.

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

   Файл лежит у вас на диске. Его не отключат за неуплату и не заберут вместе с сервисом.

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

   «Подними негрони до 720 и убери сауэр в стоп-лист» — так выглядит работа с меню.

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

   Правка перед сменой делается за минуту, а не «к понедельнику».

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

   Категории, аллергены, стоп-лист и вторая карта для веранды — части одного файла, а не платные модули.

Что будет внутри

Бот собирает не картинку, а рабочую карту: её открывают гости, а правите вы. Состав уже включён в промпт.

• Категории и позицииКлассика, авторские, крепкое, безалкогольное — в нужном вам порядке.
• Состав, объём и весИз чего коктейль, сколько миллилитров, что в украшении.
• КрепостьГрадусы рядом с названием или пометка «безалкогольный».
• ЦеныЗа бокал, за 40 мл, за порцию — меняются одной фразой.
• АллергеныОрехи, лактоза, глютен, цитрус — отдельной строкой в карточке.
• Стоп-листПозиция не исчезает, а гаснет с подписью «сегодня нет».
• QR-ссылкаОдна ссылка на всю карту: наклейка на столе, табличка у стойки.
• Быстрые правкиПереименовать, скрыть, вернуть в наличие, поменять порядок.

Инструкция: семь шагов до готового меню

Всё делается в приложении на телефоне или в браузере: нужен промпт с этой страницы и пять минут на ответы.

Шаг 01

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

Ссылку на установку присылает бот @get_ai_access_bot после слова «старт». Дальше — иконка AI DIY.

Шаг 02

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

Кнопка по центру главного экрана. Открывает браузерный интерфейс: там удобнее печатать.

Шаг 03

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

Кнопка справа вверху, рядом с поиском. Каждый проект — отдельная папка со своими файлами.

Шаг 04

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

В поле «Название проекта» напишите «Меню: бар». Это только подпись папки, её можно менять. Затем нажмите зелёную кнопку «Создать проект».

Шаг 05

Скопируйте промпт и вставьте его

Нажмите «Скопировать промпт» на этой странице и вставьте в поле сообщения — Ctrl+V или долгое нажатие на телефоне. Вставляйте весь текст целиком, ничего не вырезая.

Шаг 06

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

Кнопка со стрелкой вверх — справа от поля сообщения. На компьютере работает и Enter.

Шаг 07

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

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

Промпт для бота

Скопируйте текст целиком и вставьте в поле сообщения на шаге 05. Ниша, сущности, статусы и экраны уже внутри.

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

Дальше по делу:
1. Ниша — бар. Гости смотрят карту с телефона по QR, бармен правит её без компьютера.
2. Сущности: категория, позиция, состав, крепость, объём, цена, аллерген.
3. Категория: название, порядок, видимость.
4. Позиция: название, категория, состав одной строкой, крепость в градусах или «безалкогольный», объём в мл, цена в рублях, аллергены, статус.
5. Статусы: «в наличии» → «стоп-лист». В стоп-листе позиция остаётся на месте, гаснет и подписана «сегодня нет»; вернуть можно одним нажатием.
6. Экраны: меню по категориям (категории сворачиваются, есть поиск по названию), карточка позиции (состав, крепость, объём, цена, аллергены, статус), стоп-лист (список и возврат в наличие), редактирование (добавить, изменить, скрыть, поменять порядок).
7. Верх меню: название бара, строка «обновлено 12 сентября, 18:40», переключатель «только в наличии».
8. Правка — в два нажатия: из карточки в редактирование, сохранить, вернуться в меню.
9. Дизайн: тёмный фон под бар, крупные названия, цена справа, состав мелким шрифтом, тонкие линии, без теней и градиентов.
10. Мобильный экран главный: ширина 360 px, крупные зоны нажатия, ничего не вылезает за край.
11. Данные храни в localStorage, приложение работает без сервера. При первом запуске — 12 демо-позиций в трёх категориях.
12. Один HTML-файл, CSS и JS внутри, без внешних библиотек, шрифтов и картинок.
13. В конце покажи блок с QR-ссылкой на карту и короткой инструкцией, как её напечатать.

Скопированный промпт можно вставлять как есть — бот сам разберётся с нумерацией.

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