Лендинг кофейни с ИИ
Одна страница для знакомства с кофейней: настроение, предложение, меню и следующий шаг для гостя.
Учебный пример, созданный с помощью ИИ. Названия, проекты и цены вымышлены.
Живой пример сайта
Переключите «Кофе» и «Завтраки»: меняются блюда, описания и учебные цены.
Хорошее утро начинается здесь.
Кофе, неспешные завтраки и ещё пять минут для себя.
Учебное меню и цены. Это вымышленная кофейня.
Демо показывает основную механику страницы. Его можно повторить и развить с помощью инструкции ниже; подключения форм, оплаты и публикации здесь нет.
Как это сделать с ИИ
Что подготовить
Нужны название, настоящие фотографии, меню с ценами, часы работы и адрес. Если чего-то нет, оставьте пометку для заполнения, а не выдумывайте сведения.
Начните с любого удобного ИИ: ChatGPT, Claude, Gemini или DeepSeek. Работайте в одном диалоге и прикладывайте актуальный код при доработке.
- 01
Соберите предложение
Опишите, зачем приходят гости: кофе по пути, неспешный завтрак или работа с ноутбуком. Выберите одну ведущую задачу и основные позиции меню.
Результат: Короткий бриф и одно действие на первом экране.
- 02
Попросите структуру и стиль
Перед кодом согласуйте порядок: предложение → меню → пространство → часы и контакты. Для учебного примера используем молочные и терракотовые оттенки, крупную типографику и минимум декора.
Результат: Структура, которую можно оценить до разработки.
- 03
Добавьте переключение меню
Храните две категории в данных. Кнопки должны менять список без перезагрузки, показывать выбранную категорию и работать с клавиатуры.
Результат: Рабочее меню вместо нарисованных кнопок.
- 04
Подготовьте к публикации
Подставьте действительные цены и контакты. Откройте сайт на телефоне, проверьте читаемость, кнопки и ссылки. Если бронирования нет, не добавляйте фиктивную успешную запись.
Результат: Проверенная страница с реальными материалами.
Создайте, доработайте, проверьте
Отправляйте промпты по порядку. Первый создаёт основу, второй добавляет нужное поведение, третий помогает найти ошибки. Ответы разных моделей могут отличаться; это учебный сценарий, а не сравнение их качества.
01 · Создать основу
Замените поля в [скобках] на свои данные.
02 · Доработать поведение
Замените поля в [скобках] на свои данные.
03 · Проверить результат
Замените поля в [скобках] на свои данные.
Как открыть полученный сайт
- Попросите полный файл
index.htmlи сохраните его с этим расширением. - Откройте файл в браузере. Для видео положите предоставленные материалы по путям из кода.
- Проверьте действия и мобильный экран. Если ИИ выбрал React или другой стек, используйте инструкцию запуска, которую он приложил.
- Перед публикацией замените учебные материалы своими и подключите необходимые сервисы.
Что проверить вручную
- Категории меняют реальные позиции меню
- Выбор виден без наведения мыши
- Цены и часы подтверждены владельцем
- На телефоне текст не сливается с декором
- Контактные ссылки ведут в правильное место
Если что-то пошло не так
ИИ придумывает отзывы
Дайте реальные материалы или удалите блок доказательств.
Кнопка бронирования ничего не делает
Сначала определите реальный способ записи; в демо не обещайте отправку.
Красивый экран скрывает меню
Сделайте меню видимым следующим разделом и добавьте понятный якорь.
Попробуйте идею сайта в VidLix бесплатно
Перенесите свой бриф в выбранный сценарий конструктора и сравните, как он подходит вашей задаче. Начать можно с примеров на сайте VidLix.
Открыть vidlix.ruДоступ к редактору — по заявке. Условия подключения и публикации смотрите в VidLix; перенос произвольного кода и эффектов нужно уточнять отдельно.
Сайт с калькулятором стоимости
Открыть следующий разбор →