Вайбкодинг — это не «попросить нейросеть написать сайт». Это короткий цикл: описать рабочую ситуацию, получить маленький кусок интерфейса, проверить его руками, назвать ошибку и только потом добавлять следующий кусок.
В качестве примера возьмём график отпусков отдела «Ромашка»: 30 сотрудников, пять отделов, кабинет сотрудника, кабинет руководителя и подсветка пересечений.
1. Начните с результата
Плохой старт: «Сделай современное приложение для отпусков».
Хороший старт описывает действие и проверку:
Мне нужен учебный прототип графика отпусков для вымышленной компании.
Пользователь должен переключить кабинет сотрудника и кабинет руководителя,
увидеть календарь по дням, заметить пересечение отпусков и применить
предложение новых дат. После этого текущий график должен выгружаться в CSV.
Никаких реальных имён, регистрации и сохранения данных.
Сначала предложи структуру экранов и данных, код пока не пиши.
Модель сначала возвращает план. Если она сразу прислала 800 строк кода, остановите её и попросите разбить задачу на шаги.
2. Дайте маленький обезличенный набор
employee_id,department,role,start_date,end_date,status
E-01,Аналитика,аналитик,2026-06-15,2026-06-19,approved
E-02,Аналитика,аналитик,2026-06-15,2026-06-26,pending
E-03,Поддержка,специалист,2026-06-08,2026-06-12,planned
Используйте E-01, а не фамилию. Для прототипа достаточно 6–10 строк; затем попросите модель сгенерировать ещё 20 вымышленных строк по тем же правилам.
3. Зафиксируйте оргструктуру и ограничения
Отделы: продажи, поддержка, аналитика, маркетинг, финансы.
В продажах руководитель и заместитель не уходят одновременно.
В поддержке должны оставаться минимум два специалиста.
В финансах хотя бы один бухгалтер доступен в рабочий день.
В аналитике остаётся хотя бы один аналитик для срочных запросов.
Покрытие компании не ниже 83%.
Покажи каждое нарушенное правило отдельным сообщением.
Без этих строк нейросеть нарисует календарь, но не поймёт, что считать проблемой.
4. Стройте экран слоями
Попросите первый экран:
Сделай один адаптивный HTML-файл без сервера.
Сверху название компании и переключатель двух ролей.
В центре — календарная диаграмма на 31 день и строки сотрудников.
Справа — покрытие, количество конфликтов и одно предложение дат.
Используй только данные из примера. Добавь видимую плашку:
«Учебный режим: данные не сохраняются».
После первого результата проверьте только три вещи: строку сотрудника, цвет блока отпуска и понятность конфликта. Не просите сразу авторизацию, уведомления и интеграцию с 1С.
5. Добавляйте поведение отдельными запросами
Для конфликта:
Добавь кнопку «Применить предложение». Для конфликта E-01 и E-02
предложи E-02 даты 22–26 июня, перерисуй блок на календаре и покажи
уведомление «пересечение снято». После обновления страницы верни исходные данные.
Для кабинета:
В режиме сотрудника покажи только демонстрационный профиль Анны Петровой:
отдел, роль, утверждённые даты и доступный остаток дней. Не добавляй форму
регистрации и не отправляй введённые значения на сервер.
Для экспорта:
Сделай CSV с кодировкой UTF-8 и русскими заголовками: Сотрудник, Отдел,
Должность, Начало, Конец, Статус. Экспортируй текущие значения после
применения предложения.
6. Проверяйте как обычный пользователь
Пройдите сценарий по порядку:
- Открыть страницу и увидеть, что данные вымышлены.
- Переключиться в кабинет сотрудника.
- Вернуться в кабинет руководителя.
- Найти персиковое пересечение Анны и Дениса.
- Нажать «Применить предложение».
- Скачать CSV и открыть его в Excel.
- Обновить страницу и убедиться, что изменения исчезли.
Если шаг не проходит, сообщите модели наблюдаемую ошибку: «после клика цвет не изменился», а не общее «не работает».
7. Какую модель выбрать
ChatGPT и Claude удобны для первого проектирования и длинных итераций. Gemini можно использовать для второго взгляда на интерфейс и формулировки правил. Ollama с Qwen3 или LM Studio подходят, когда вы хотите запускать модель локально и не отправлять даже учебные строки в облако.
Для демо на ноутбуке достаточно HTML-файла. Для настоящего отдела нужен закрытый VDS, корпоративный вход, база с ролями, резервные копии и журнал изменений. Реальные кадровые данные подключайте только после того, как учебная версия прошла все сценарии.
Главное правило вайбкодинга: каждая следующая просьба должна добавлять одно проверяемое поведение. Так из разговора с моделью получается рабочий инструмент, а не длинный красивый макет.
