Хороший пример вайбкодинга начинается с понятной офисной боли. Не «сделай красивый сайт», а «руководитель видит пересечения, сотрудник отправляет заявку, итоговый график выгружается в привычный файл». Ниже — именно такой рабочий материал на вымышленных данных.
Откройте готовую программу
Запустить график отпусков отдела «Ромашка»
Это интерактивный прототип. Переключите «Кабинет сотрудника» и «Кабинет руководителя», пролистайте месяц, нажмите «Применить предложение», а затем выгрузите CSV. Все имена, даты и должности придуманы для демонстрации.
Какая структура у отдела
В примере 30 сотрудников из пяти отделов: продажи, поддержка, аналитика, маркетинг и финансы. Внутри есть руководители, координатор, менеджеры, аналитики, бухгалтеры, экономисты, дизайнеры и контент-менеджеры. Для каждого есть имя, отдел, должность и блок дат. В настоящем проекте этот список можно заменить загрузкой из таблицы, но для первого прототипа вымышленные сотрудники полезнее: не нужно рисковать персональными данными.
У каждого сотрудника есть кабинет с тремя понятными действиями: выбрать даты, увидеть статус заявки и отозвать или изменить её. У руководителя другой порядок информации: сначала пересечения и покрытие, затем список заявок и только потом детали.
Какие пересечения бывают в реальной компании
В календаре важно ловить не только одинаковые даты двух людей. В отделе продаж нельзя одновременно отпускать руководителя и его единственного заместителя. В поддержке нужен минимум один человек на первую линию. В финансах опасно отправлять в отпуск двух бухгалтеров перед закрытием месяца. У аналитиков пересечение допустимо, если остаётся человек, который принимает срочные запросы.
Поэтому правила лучше записывать рядом с данными:
| Правило | Проверка |
|---|---|
| Руководитель + заместитель | не уходят одновременно на весь рабочий отрезок |
| Поддержка | минимум 2 человека в смене |
| Финансы | минимум 1 бухгалтер в период закрытия |
| Аналитика | минимум 1 аналитик на срочные задачи |
| Компания | покрытие не ниже 83% в любой рабочий день |
В демо персиковым отмечено учебное столкновение: у Анны и Дениса пересекаются 15–19 июня. Предложение сдвигает Дениса на 22–26 июня и показывает, что покрытие возвращается в допустимый диапазон.
Как работает умный график
Программа не «угадывает» идеальные даты. Она проверяет ограничения, которые мы явно задали:
- в один день не отсутствуют одновременно руководитель и дежурный координатор;
- у двух аналитиков не совпадает весь рабочий отрезок;
- минимум покрытия отдела — 83%;
- утверждённые даты не двигаются без решения руководителя.
В июне Денис запросил 15–26 июня, а у Анны уже стоят 15–19 июня. Прототип подсвечивает пересечение персиковым цветом и предлагает Денису 22–26 июня. После нажатия кнопки график перерисовывается, а конфликт исчезает.
Что попросить у модели при разработке
Собери локальный веб-прототип графика отпусков отдела «Ромашка».
Используй только вымышленные данные: 6 сотрудников, должности, даты июня 2026.
Сделай два режима: кабинет сотрудника и кабинет руководителя.
Покажи календарную диаграмму по дням, цветами выдели утверждено,
на согласовании и пересечение. В кабинете руководителя добавь покрытие
команды, список конфликтов и кнопку «Предложить даты». Предложение должно
снять пересечение аналитиков, сохранив минимум 83% покрытия.
Добавь экспорт текущего графика в CSV с русскими заголовками.
Не подключай реальные базы и не используй настоящие имена.
После реализации проверь сценарий: переключение роли → предложение дат →
перерисовка календаря → экспорт файла.
Такой запрос задаёт поведение и проверяемый сценарий. Слово «умный» само по себе ничего не объясняет, а правило «снять пересечение аналитиков и сохранить 83% покрытия» превращает его в функцию, которую можно проверить.
Как превратить прототип в рабочий внутренний сервис
Первый шаг — импорт сотрудников и подразделений из согласованного файла. Второй — роли доступа: сотрудник видит свои заявки и общий утверждённый календарь, руководитель видит конфликты и может согласовать заявку. Третий — журнал изменений: кто передвинул дату и почему. Четвёртый — экспорт в форму, которую уже принимает кадровая система.
В учебном прототипе личный кабинет намеренно ненастоящий: выбранный сотрудник — демонстрационный профиль, все изменения лежат только в памяти открытой страницы. Нет регистрации, базы и формы, куда можно случайно внести настоящую фамилию. При обновлении страницы всё возвращается к исходному примеру.
Если понадобится рабочая версия, реальные данные нужно хранить в закрытой базе с авторизацией, а нейросети передавать только обезличенные идентификаторы («Сотрудник 07», «Отдел аналитики»). Модель не должна быть базой кадровых сведений.
Какой нейросетью собирать
Для первого прохода подойдут ChatGPT, Claude или облачный Qwen: они хорошо держат структуру экранов, роли и сценарии проверки. Qwen можно использовать через веб-интерфейс, облачный API или локально через Ollama и LM Studio. Локальный вариант оставляет код и вымышленные данные на компьютере. Gemini удобно привлечь для второго взгляда на UX, но не загружать туда настоящий файл отпусков без разрешения компании.
Практичная связка: ChatGPT, Claude или облачный Qwen для интерфейса и кода, локальный Qwen3 для проверки правил на вымышленных строках без передачи в облако, браузер для ручного сценария, CSV/XLSX для финальной выгрузки. Для домашней пробы достаточно ноутбука и статической HTML-страницы. Для отдела на 30–100 человек лучше закрытый VDS с приложением, PostgreSQL, резервными копиями и корпоративной авторизацией.
Инструкция: собрать каждому
Шаг 1. Подготовьте обезличенный CSV. Оставьте employee_id, department, role, start_date, end_date, status. Вместо фамилий используйте Сотрудник 01 и Сотрудник 02.
Шаг 2. Дайте модели правила. Передайте ей не только список дат, но и ограничения по отделам: кто замещает руководителя, сколько человек должно остаться в поддержке, какие дни считаются закрытием месяца.
Шаг 3. Попросите сначала план, потом код. Пусть модель перечислит таблицы, роли и проверки. Если сразу просить «сделай приложение», она часто строит красивый календарь без защиты от пересечений.
Шаг 4. Проверьте четыре сценария. Сотрудник отправляет заявку; руководитель видит её; две заявки пересекаются; экспорт открывается в Excel. Отдельно обновите страницу и убедитесь, что учебный режим ничего не сохранил.
Шаг 5. Только после этого подключайте сервер. Для локального использования оставьте HTML или Ollama. Для команды добавьте VDS, закрытый доступ, авторизацию, журнал изменений и резервную копию. Нейросеть помогает писать код, но решение о датах остаётся у руководителя.
До подключения настоящих данных оставьте демонстрационный режим. Он позволяет проверить логику на встрече с руководителем, не отправляя в нейросеть фамилии, даты отпусков и кадровые сведения.
Мини-проверка перед показом
- Добавьте две заявки на одинаковые даты и убедитесь, что конфликт виден без чтения мелкого текста.
- Переключитесь в кабинет сотрудника: руководительские кнопки не должны быть доступны.
- Примените предложение и проверьте, что диаграмма изменилась, а статус заявки стал понятным.
- Откройте CSV: в нём должны быть сотрудник, роль, даты и статус.
Это уже не картинка интерфейса, а маленькая программа с данными, состояниями и проверяемым результатом.
