Используем ИИ, когда нет PO, аналитика и документации

Есть только устный запрос в духе «Нам бы какой-нибудь дешборд для менеджеров». И как с этим жить?

В таких условиях UXUI-дизайнер становится и аналитиком, и постановщиком задач. Ниже — инструкция, как использовать ИИ для превращения сырого запроса в рабочий интерфейс.

1. Получение запроса от бизнеса

Пример запроса:

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

На этом всё. Больше никто не даст ТЗ, и некому задать уточняющие вопросы.

2. Расшифровка задачи с ИИ

ИИ помогает дизайнеру сыграть роль аналитика. Можно задать такой запрос:

Ты — системный аналитик. У нас нет документации. Есть только запрос:
«Сделайте дешборд, чтобы менеджеры могли видеть какие-то показатели по клиентам. Что-то про активность. Может графики, может фильтры».

Помоги мне сформулировать:
1. Возможные пользовательские роли
2. Сценарии использования
3. Какие метрики могут быть важны
4. Какие действия ожидаются от интерфейса

ИИ вернёт варианты сценариев, ролей и KPI. Это уже можно превратить в концепт.

3. Черновик интерфейса: быстро и в коде

Вместо Figma и wireframe можно сразу попросить ИИ сгенерировать HTML+CSS+JS прототип:

Сгенерируй HTML+CSS+JS интерфейс дешборда.

Секции:
- KPI-блок (4 карточки)
- График (activity over time)
- Таблица клиентов с фильтрами по статусу и email

Mobile-first, тёмная тема. Без библиотек. Вёрстка flex/grid. Всё в одном файле.

Результат:

• Живой интерфейс
• Адаптив
• Работа фильтров и сортировки
• Видимые данные (можно подставить мок)

4. Проверка сценариев

Получив прототип, можно снова обратиться к ИИ:

Проверь, все ли сценарии из пункта 2 покрыты этим интерфейсом? Что можно улучшить? Чего не хватает?

ИИ даст рекомендации — добавить детализацию карточек, сегментацию клиентов, например.

5. Доработка и пояснение логики

Далее — оформление:

• Комментарии в коде: что за метрики, какие статусы.
• Названия классов осмысленные (.client-table, .kpi-card и т.д.)
• CSS-переменные для темы
• Краткое описание логики фильтров (в блоке комментария или отдельным markdown-файлом)

6. Передача в разработку

Дизайнер отдаёт:

• .html файл с живым интерфейсом
• readme.md с объяснением логики и структуры
• Скриншот финального вида (если нужно для задачи)

Разработчик получает не картинку, а рабочий код и описание.

7. Почему это работает