Сравнение с вайб-кодинг рабочих мест и ручная вёрстка шаблонов

Вайб-кодинг рабочих мест для Интеграма: как сгенерировать шаблон ИИ и вставить его в main.html

вайб-кодинг рабочих мест и ручная вёрстка шаблонов

Никто не мешает использовать ИИ для генерации HTML-шаблонов рабочих мест Интеграма — на этой странице собран промпт, последовательность шагов и реальные примеры закрытых задач из ideav/crm, где шаблон вайб-кодился и нативно встраивался в main.html.

Шаблоны Интеграма — это обычные HTML-файлы в папке templates/, поэтому для них работает тот же подход, что и для любой современной фронтенд-разметки: описать задачу ИИ и получить готовый файл. На практике в репозитории ideav/crm уже накоплены десятки закрытых задач, где новые рабочие места — funnel.html, struct.html, table.html, dash.html, gssync.html — собирались по такой схеме и вставлялись в общее главное рабочее место main.html. Эта статья — о том, как повторить это самостоятельно: какие шаги нужны, какие правила встраивания учитывает Интеграм и как сформулировать промпт, чтобы ИИ выдал шаблон, готовый для вставки в main.html без ручной доработки.

Контекст

Типичные ситуации, когда вайб-кодинг рабочего места ускоряет работу и при этом нативно укладывается в Интеграм:

нужно собрать воронку продаж — фильтры, этапы, агрегаты — поверх готового отчёта (пример: задача добавить funnel.html в templates/ для встраивания в main.html);
нужно отобразить структуру компании по данным отчёта в виде дерева — без блоков конструктора и iframe (пример: struct.html по report/8027?JSON_KV);
нужен табличный компонент с липкой шапкой, который встраивается вместо  в main.html (пример: table.html);
нужен дашборд диспетчера с картой Leaflet/Яндекс.Карт и счётчиками статусов рядом со списком заявок;
нужна печатная карточка клиента в фирменном формате с логотипом и страничной разбивкой A4;
нужно встроить отдельную страницу настроек (gssync.html — конфигуратор загрузки), у которой такая же навигация, как у других рабочих мест.

Как это решает Интеграм

Пошаговая последовательность, которая работает в реальных задачах ideav/crm (issues #2109, #2091, #2061, #2533 и др.):

Сформулируйте задачу простыми словами: что должно появиться на экране, какие данные показать, что должно происходить по клику. Это и есть «vibe» — описание желаемого результата без заранее придуманной разметки.
Подготовьте источник данных. В Интеграме это, как правило, отчёт, отдающий JSON по URL вида report/{id}?JSON_KV. Сохраните пример ответа — он понадобится ИИ, чтобы знать имена полей.
Передайте ИИ промпт (см. следующий раздел) вместе с примером JSON и, при необходимости, эталонным макетом или скриншотом. Попросите выдать единый файл вида templates/{имя}.html без зависимостей за пределами явно подключённых через <script src="…">.
Сохраните полученный файл в папку templates/ базы данных. Шаблоны хранятся как обычные файлы в файловой системе сервера и подключаются как рабочее место для роли — отдельной сборки не требуется.
Откройте рабочее место в браузере: Интеграм подставит {ИмяПоля}, развернёт повторяющиеся блоки  ...  и вставит шаблон в main.html по описанным ниже правилам. Проверьте, что все плейсхолдеры заполнены и список повторяющихся строк отображается.
Доработайте шаблон правкой текста: добавить колонку, поменять заголовок, подключить ещё одну JS-библиотеку — это редактирование HTML-файла и перезагрузка страницы, без релиза.