Примеры вайб кодинга: 10 типов приложений, запросы и что пошло не так

Самые распространённые примеры вайб кодинга — небольшие полезные веб-приложения: трекеры, страницы записи, внутренние инструменты, клиентские порталы, лендинги, викторины, дашборды и простые ИИ-инструменты. Ниже десять из них. Для каждого вы увидите, кто его создаёт, первый запрос, что обычно идёт не так и запрос-исправление.

Это обобщённые образы проектов, которые люди чаще всего приносят в ИИ-конструкторы, а не истории конкретного человека. Запросы можно копировать. Сбои повторяются снова и снова, поэтому именно они самая полезная часть. Если вайб кодинг для вас в новинку, начните с что такое вайб кодинг.

1. Личный трекер бюджета

Кто создаёт: люди, которые пробовали таблицы и сдались.

Первый запрос:

Создай ежемесячный трекер бюджета. Я добавляю расходы с суммой, категорией (еда, аренда, транспорт, развлечения, другое), датой и заметкой. Показывай итог за этот месяц по каждой категории в виде столбчатой диаграммы и список последних расходов. Я могу задать бюджет на каждую категорию и видеть, сколько осталось.

Что пошло не так: диаграмма учитывала все когда-либо введённые расходы, а не только за этот месяц, поэтому ко второму месяцу все категории выглядели перерасходованными. Кроме того, суммы с запятой («1,200») сохранялись как 1.

Запрос-исправление:

Диаграмма и итоги должны включать только расходы за выбранный месяц. Добавь вверху выбор месяца, по умолчанию текущий. Также принимай суммы, введённые с запятыми или пробелами, и сохраняй их как числа.

Урок: «в этом месяце» — это правило. Проговаривайте правила вслух.

2. Страница записи для небольшого салона

Кто создаёт: владельцы малого бизнеса, уставшие принимать записи по телефону и в личных сообщениях.

Первый запрос:

Создай страницу записи для моего салона. Клиенты выбирают услугу, дату и свободное время, затем вводят имя и телефон. У меня есть закрытая страница администратора за логином, которая показывает записи по дням.

Что пошло не так: два клиента записались на одно и то же время 10:00 с разницей в минуту, потому что страница проверяла доступность только при первой загрузке. Кроме того, запись на окрашивание на 90 минут не блокировала следующие слоты.

Запрос-исправление:

Когда клиент отправляет запись, проверяй на сервере, что все слоты, которые она занимает, всё ещё свободны, а если нет — отклоняй её с сообщением «Это время только что заняли». Услуга блокирует всю свою длительность, поэтому запись на 90 минут в 10:00 блокирует 10:00, 10:30 и 11:00.

Урок: всё, что могут делать двое одновременно, требует проверки на сервере. Полную версию смотрите в как создать приложение для записи.

3. Меню ресторана с QR-кодом

Кто создаёт: владельцы кафе и ресторанов, слишком часто перепечатывающие меню.

Первый запрос:

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

Что пошло не так: ничего не сломалось, но меню медленно открывалось на Wi-Fi кафе, потому что для каждой позиции загружались фото телефона в полном размере.

Запрос-исправление:

Фото в меню слишком тяжёлые. Уменьшай загружаемые изображения до максимальной ширины 800px, сжимай их и загружай отложенно по мере прокрутки.

Урок: тестируйте на медленном соединении, а не только у себя в офисе.

4. Учёт оборудования или запасов для команды

Кто создаёт: операционные сотрудники, заменяющие общую таблицу.

Первый запрос:

Создай инструмент инвентаризации для команды нашего склада. У позиций есть название, артикул (SKU), количество, место хранения и минимальный остаток. Сотрудники входят в систему, могут добавлять товар, списывать товар с указанием причины и видеть список позиций ниже минимума, выделенных красным. Веди историю каждого изменения и кто его сделал.

Что пошло не так: в истории вместо имён было «пользователь 3», а при списании большего количества, чем есть, остаток становился отрицательным.

Запрос-исправление:

Показывай в истории имя человека, а не его ID. Не разрешай списание, которое опустит количество ниже нуля; вместо этого показывай «В наличии только 4».

Урок: описывайте, что должно быть невозможно, а не только что возможно. Остальное разобрано в нашем руководстве по созданию приложения для учёта запасов.

5. Клиентский портал для фрилансера или студии

Кто создаёт: дизайнеры, бухгалтеры, консультанты и агентства.

Первый запрос:

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

Что пошло не так: это самый важный сбой в списке. Страницы показывали каждому клиенту только его проекты, но сервер возвращал любой проект, если изменить число в адресной строке. Щёлкая по страницам под одним клиентом, этого было не заметить.

Запрос-исправление:

Проверь каждый серверный маршрут, который возвращает проекты, файлы, комментарии или счета. Каждый из них должен подтверждать, что вошедший клиент владеет записью, и иначе возвращать «не найдено». Затем протестируй: войди как клиент A и попробуй открыть проект клиента B по его ID.

Урок: скрыть что-то на экране — не значит защитить. Подробнее в безопасен ли вайб кодинг?.

6. Страница запуска со списком ожидания

Кто создаёт: основатели, проверяющие идею до её создания.

Первый запрос:

Создай лендинг для приложения, которое помогает репетиторам планировать уроки и принимать оплату. Заголовок, подзаголовок, регистрация по электронной почте, три преимущества, раздел «как это работает» и FAQ. Сохраняй регистрации в базу данных с датой и дай скачать их в CSV с закрытой страницы.

Что пошло не так: за несколько дней список заполнился мусорными регистрациями от ботов, а у страницы не было ни заголовка, ни описания, поэтому у ссылок при публикации был пустой предпросмотр.

Запрос-исправление:

Добавь простую защиту от ботов в форму регистрации (скрытое поле-ловушку и лимит 5 регистраций с одного IP в час). Добавь заголовок страницы, meta description и изображение для соцсетей.

Урок: публичную форму найдут. Смотрите как создать страницу списка ожидания.

7. Приложение-викторина для учителя

Кто создаёт: учителя и тренеры, которым нужно что-то легче, чем LMS.

Первый запрос:

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

Что пошло не так: правильные ответы отправлялись в браузер вместе с вопросами, поэтому любопытный ученик мог прочитать их в исходном коде страницы. Ученики также могли отправлять ответы повторно, пока не набирали 100%.

Запрос-исправление:

Не отправляй правильные ответы в браузер. Проверяй ответы на сервере после отправки. Разреши одну отправку на имя ученика в каждой викторине и показывай учителю, если кто-то пытается снова.

Урок: браузер принадлежит пользователю. Всё, что там есть, можно прочитать.

8. Небольшой ИИ-инструмент

Кто создаёт: маркетологи, авторы и основатели, которым нужен узкоспециализированный ИИ-помощник.

Первый запрос:

Создай инструмент, который превращает описание продукта в пять постов для соцсетей в разных тонах (дружелюбный, экспертный, игривый, короткий, длинный). Используй ИИ API. Я вставляю описание, выбираю платформу и получаю посты с кнопками копирования.

Что пошло не так: первая версия обращалась к ИИ-сервису прямо из браузера с API-ключом внутри страницы, откуда его мог скопировать любой и раскрутить счёт.

Запрос-исправление:

Перенеси вызов ИИ на сервер. Храни API-ключ как секрет, а не в коде фронтенда. Ограничь каждого посетителя 20 генерациями в день.

Урок: ключи должны храниться в секретах на сервере. Смотрите как хранить API-ключи безопасно и как добавить ИИ-функции в приложение.

9. Бизнес-сайт на арабском и английском

Кто создаёт: компании Персидского залива и арабского мира, работающие на двух языках.

Первый запрос:

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

Что пошло не так: арабский текст был выровнен вправо, но макет не отразился зеркально: стрелки по-прежнему смотрели не туда, а меню было не с той стороны. Телефонные номера местами отображались задом наперёд.

Запрос-исправление:

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

Урок: письмо справа налево — это макет, а не выравнивание. Mythex работает с арабским и другими раскладками справа налево, и запросы можно писать прямо на арабском.

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

Кто создаёт: тренеры, спортзалы и сообщества, пользователи которых живут в телефонах.

Первый запрос:

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

Что пошло не так: веб-приложение работало, но на телефонах кнопки были слишком маленькими, чтобы нажимать их посреди тренировки, а график невозможно было прочитать.

Запрос-исправление:

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

Урок: если людям пользоваться на телефоне, проектируйте сначала для телефона. На Mythex Pro опубликованное приложение может стать приложением для Android в Google Play и приложением для iPhone, отправляемым в TestFlight; мобильное приложение открывает ваше опубликованное приложение, поэтому каждая публикация его обновляет. Смотрите страницу конструктор мобильных приложений.

Закономерности за этими примерами

Во всех десяти сбои делятся на несколько групп:

Ни для чего из этого не нужно читать код. Нужно тестировать как любопытный, чуть недоброжелательный пользователь и точно описывать увиденное.

Попробуйте сами

Выберите пример, ближайший к вашей идее, скопируйте его первый запрос и поменяйте детали. Затем используйте запрос-исправление как чек-лист, прежде чем делиться результатом. В нашей шпаргалке с запросами для вайб кодинга есть ещё 30, а как создать приложение с помощью вайб кодинга проводит один проект от идеи до опубликованного приложения. Когда будете готовы, запустите его в ИИ-конструкторе приложений или загляните в шаблоны для быстрого старта.

Вопросы