|
Professor Seleznov
|
Обо мне
В течение многих лет последовательно прошел путь от бизнес, продуктового и системного аналитика до лидера нескольких продуктовых кросс-функциональных команд. Как устроена продуктовая команда знаю не понаслышке. Некоторые из них я построил с нуля. И, что не менее важно, на мой взгляд, в начале своей карьеры я работал в продажах и понимаю, что и для кого мы делаем. Этот факт позволяет мне быстро находить общий язык с бизнесом и понимать потребности целевой аудитории.
На каждом из карьерных этапов стремился получить соответствующее образование: что-то учил сам, чему-то учился у коллег, а что-то - на курсах и с помощью работодателя. За это отдельное спасибо всем причастным коллегам и руководителям.
Главной моей страстью всегда была банковская розница, ее процессы и продукты. Предметные области, в которых я чувствую себя уверенно и приношу значимую пользу - это платежные карты, платежи / переводы, ипотека и клиентские сервисы. Мне удалось поработать как с цифровыми каналами продаж и обслуживания (сайт, мобильное приложение), так и с оффлайн каналом, где клиентами были сотрудники банка, а целью - создание "Единого Фронтального Решения", которое позволяет управлять жизненным циклом платежных карт в режиме единого окна.
Менялись работодатели и проекты, но подход оставался прежним - рост компетенций за счет новых знаний и опыта.
О чем эта статья и почему я решил ее написать?В дебютной для меня статье на Хабр хочу поделиться реальным опытом применения AI для решения вполне конкретной продуктовой задачи:
" Я, как PO (Заказчик или другая роль), хочу донести до команды, как должен выглядеть интерфейс продукта в результате изменений".
На самом деле за этой user story стоит потребность как можно быстрее донести суть задачи до команды, начать работу и получить желаемый результат. В данном случае прототип - это средство для ее удовлетворения. И первое, что приходит в голову в таких случаях:
"Для этого в командах есть дизайнеры. Обратись к одному из них, поставь задачу и получишь прототип, соответствующий требованиям".
Все так. Было. До поры до времени. Вернее — до появления причины, триггера, который мотивирует выйти за рамки привычного, наработанного годами, сценария.
Но обо всем по порядку.
Почему решил попробовать AI?
В начале 2026 года команда Т‑Образования анонсировала курс по управлению продуктом с применением ML. Обучение бесплатное, но есть отбор. Для меня, как оказалось, это тоже важно. Появляется спортивный азарт, а к спорту я совсем небезразличен. Понимая необходимость и потенциальную перспективу от владения AI, я принимаю решение идти в отбор и бороться за место на курсе.
На первом этапе отбора задача сводилась к описанию опыта и целей, которых участники хотят достичь с помощью курса «ML Product Management». Здесь у меня сложностей не возникло никаких, этап успешно пройден.
На втором этапе участникам предложили решить продуктовые кейсы. В первом из них предложено указать три проблемы в интерфейсе мобильного приложения Т‑Банка, выделить главную, аргументировать свой выбор и предложить решение. Начал с анализа UX, провел интервью и сформулировал описание задач на доработку.
Триггер
В кейсе была формулировка, которая стала для меня своеобразным триггером и запустила процесс освоения AI еще до начала обучения на курсе: "Есть возможность получить бонусный балл, если вы накодите (навайбкодите) прототип решения".
Желание получить дополнительный бал, чтобы пройти отбор и попасть на обучение оказалось сильнее лени.
Решение
Шаг 1. Выбор инструмента генерации прототипа
Путем несложных поисковых запросов вышел на несколько AI-инструментов для решения подобных задач. Среди них Lovable, Bolt и т.д. Мой выбор пал на Cursor. И как оказалось позднее - в сравнении с другими инструментами он менее всего ориентирован на решение подобных задач.
Шаг 2. Генерация промта для Cursor
Теперь мне нужен текст запроса, который я введу в Cursor, чтобы он сгенерировал для меня прототип (макет) страницы приложения. Для этого я выбрал Perplexity. На Хабр есть замечательная статья об этом инструменте: Perplexity AI: что умеет ИИ от пересказа текста до генерации кода и бизнес-идей. Рекомендую с ней ознакомиться.
Следует отметить, что:
2.1 Для меня было важно соответствие будущего прототипа требованиям дизайн-системы (цвета, шрифты и т.д.), поэтому я внес соответствующие параметры в запрос
2.2. Я хорошо представлял, что планирую увидеть на макете. Изучил конкурентов и собрал в голове свою страницу. В промте есть ссылка на некий референс - это скриншот одного из приложений конкурентов 
Промт для Perplexity
Используем дизайн Т-банка. Сделать макет страницы мобильного приложения Т-Банка - раздела "Чаты".
Необходимо:
1. Убрать верхние элементы (Поддержка, Консьерж и т.д)
2. На освободившемся месте добавить элемент поиска по чатам (как на референсе)
3. Вместо “Об оплате”, “Копите вместе” и т.д. сделать как на референсе:
3.1 Чат с поддержкой
3.2 Чат с другом
3.3 Обращения в Банк
3.4 Консьерж
3.5 Юрист
3.6 Сегодня в Городе
3.7 Выгода от Т-банка
4. Снизу исправить “Чат” на "Чаты"
5. В правом верхнем углу убрать иконку с карандашом (Написать)
Сделай мета-промт для курсора чтобы он взял за основу эти скрины и сделал на выходе один рабочий html файл с изменениями в дизайне Т-Банка рабочий и с кнопками
Готово — мета-промт для Cursor создан и доступен для скачивания.
Вот что в нём есть и как им пользоваться:
Полная дизайн-система Т-Банка — все точные hex-цвета ( #1A1A1A фон, #FFDD2D акцент, #8A8A8A вторичный текст), размеры (строка чата 72px, аватар 48px, поиск 40px), типографика с SF Pro.
Все 5 изменений расписаны пошагово с ❌/✅ маркерами:
- Удаление горизонтального блока иконок (Поддержка, Консьерж, Юрист, Архив)
- Удаление карандаша из шапки, сохранение колокольчика
- Новый поиск с live-фильтрацией
- 7 новых чатов с цветами аватаров, превью, бейджами/
- Исправление “Чат” → “Чаты” в нижней навигации
Шаг 3. Генерация прототипа страницы
Используя приложение Cursor и полученный благодаря Perplexity промт получаю результат в виде html страницы
Промт для Cursor
Контекст задачи
Ты опытный мобильный UI-разработчик. Тебе нужно создать один рабочий HTML-файл — интерактивный pixel-perfect макет экрана "Чаты" из приложения Т-Банк с конкретными изменениями дизайна.
Файл должен симулировать мобильный экран (375×812px, как iPhone) в браузере, с интерактивными элементами, тапабельными кнопками и корректным визуальным дизайном.
🎨 Дизайн-система Т-Банка (строго соблюдай)
Цвета
Основной фон: #1A1A1A
Карточки/строки чатов: #242424
Hover/active состояние: #2C2C2C
Главный акцент (активная вкладка): #FFDD2D (жёлтый)
Текст на жёлтом фоне: #1A1A1A
Основной текст: #FFFFFF
Вторичный текст (время, превью): #8A8A8A
Разделители между элементами: #2E2E2E
Фон поисковой строки: #2A2A2A
Рамка поисковой строки: #3A3A3A
Бейдж непрочитанных: #FFDD2D с текстом #1A1A1A
Иконка mute: #555555
Типографика
Шрифт: системный — SF Pro Display / SF Pro Text / BlinkMacSystemFont / Segoe UI, sans-serif.
Заголовок экрана "Чаты": 28px, bold, белый
Имя чата: 16px, semibold, белый
Превью сообщения: 14px, regular, #8A8A8A
Время: 13px, regular, #8A8A8A
Метка вкладки неактивная: 11px, regular, #8A8A8A
Метка вкладки активная: 11px, semibold, #FFDD2D
Placeholder поиска: 15px, #555555
Размеры и отступы
Мобильный экран: 375 × 812px (симуляция iPhone)
Строка чата: высота 72px, горизонтальный padding 16px
Аватар чата: 48×48px, круглый (border-radius 50%)
Поле поиска: высота 40px, border-radius 20px, padding 0 16px, margin 12px 16px
Нижняя панель: высота 83px (включая safe area 34px)
Иконки вкладок: 24×24px
📋 Точные требования к изменениям
❌ УДАЛИТЬ (было в оригинале)
Горизонтальная прокрутка иконок под заголовком — блок с кнопками: Поддержка Premium (жёлтый щит), Консьерж (тёмный значок), Юрист-консультант (молоток), Обращения (синяя папка), Архив (синий ящик). Этот блок полностью убирается, освободившееся место занимает поиск.
Иконка карандаша (Написать) в правом верхнем углу заголовка — убрать. Оставить только иконку колокольчика в правом верхнем углу.
Все текущие чаты в списке (Об оплате покупки, Копите вместе с Т, Поддержка Premium, Сегодня в Городе, Путешествия, Выгода от Т-Банка, Курс добра) — заменить на новые (см. ниже).
Надпись "Чат" в нижней навигации — заменить на "Чаты".
✅ ДОБАВИТЬ / ИЗМЕНИТЬ
1. Строка поиска (на месте удалённых иконок)
Поле ввода с placeholder "Поиск по чатам". Иконка лупы слева, цвет #555555. Фон #2A2A2A, рамка 1px solid #3A3A3A, border-radius 20px, высота 40px, margin 12px 16px. При фокусе — рамка светлеет до #555555.
2. Новый список чатов (7 элементов)
Каждый элемент: аватар (48×48px, круг) с уникальным цветом фона и иконкой, имя чата (жирный, белый), превью (серый, одна строка с truncate), время (правый верхний угол, серый), опциональный жёлтый бейдж с числом, опциональная иконка mute.
# Имя чата Цвет аватара Иконка Превью Время Бейдж
1 Чат с поддержкой #FFDD2D (жёлтый) щит Чем можем помочь? Сегодня —
2 Чат с другом #4A90D9 (голубой) люди Пользователи Т-Банка могут переписываться Понедельник —
3 Обращения в Банк #5B8DEF (синий) папка/документ Здесь можно подать обращение и посмотреть уже созданные — —
4 Консьерж #333333 (тёмный) цилиндр/шляпа Персональный помощник для клиентов Premium 26 марта —
5 Юрист #2C2C2C (очень тёмный) весы Бесплатная юридическая консультация 7 марта —
6 Сегодня в Городе #FFDD2D (жёлтый) ромб ◆ Кэшбэк дня в Шопинге 7 марта 99+ + mute
7 Выгода от Т-Банка градиент #7B4FD9 → #4A90D9 корона Кэшбэк до 60% за покупку еды 28 дек. 99+ + mute
Элементы 6 и 7 имеют жёлтый бейдж "99+" и иконку mute рядом с именем.
3. Нижняя навигация (исправить)
Вкладка 4 переименовывается из "Чат" в "Чаты" — активная, иконка чат-пузырька, цвет #FFDD2D. Остальные вкладки: Главная, Платежи, Город, Витрина — неактивные, серые #8A8A8A.
4. Заголовок
Левый верхний угол: текст "Чаты" (28px, bold, белый). Правый верхний угол: ТОЛЬКО иконка колокольчика (24px, белый) — карандаш удалён полностью.
🏗️ Техническая реализация
Структура файла
Один файл tbank-chats-redesign.html. Весь CSS внутри тега style, весь JS внутри тега script. Никаких внешних зависимостей кроме системных шрифтов.
Симуляция телефона в браузере
Страница с тёмным фоном #0F0F0F, по центру — рамка телефона 375×812px с border-radius 44px, overflow hidden, имитацией рамки устройства через box-shadow. Все элементы интерфейса находятся внутри этой рамки.
Интерактивность
Строки чатов: при клике — подсветка фона на 200ms, появляется toast-уведомление "Открываем: [Имя чата]", бейдж непрочитанных исчезает с анимацией.
Поиск: при вводе текста — фильтрация строк чатов в реальном времени по имени чата (показывать/скрывать строки).
Нижняя навигация: при клике на вкладку — переключение активного состояния (жёлтый цвет + жирный текст) на кликнутую вкладку.
Статус-бар: отображает реальное текущее время, обновляется каждую минуту. SVG иконки сигнала (полоски), WiFi, батареи.
Toast-уведомления: полупрозрачный тёмный блок с blur-эффектом, появляется снизу экрана с плавной анимацией, исчезает через 2 секунды.
Активное состояние строки чата
При нажатии строка слегка темнеет (фон #2C2C2C) и масштабируется до 0.995 с плавным переходом.
🖼️ Иконки и аватары
Аватары чатов
Все аватары — круглые div 48×48px с заданным цветом фона и центрированной SVG-иконкой или Unicode-символом внутри. Иконки белого цвета на тёмных аватарах, тёмного (#1A1A1A) на жёлтом аватаре.
Иконки нижней панели навигации
Все иконки — inline SVG, 24×24px:
Главная: домик
Платежи: стрелки обмена
Город: ромб (фирменный знак Т-Банка)
Чаты: чат-пузырёк с заливкой (активная — жёлтая)
Витрина: сетка 2×2
Иконка колокольчика в шапке
Inline SVG, 24×24px, белый цвет, без фона. Одна иконка в правом верхнем углу шапки.
✅ Чеклист перед финальным выводом
Экран выглядит как настоящее мобильное приложение Т-Банка
Горизонтальный скролл с иконками сервисов полностью удалён
Иконка карандаша в заголовке удалена, колокольчик остался
Поисковая строка отображается там, где раньше были иконки сервисов
Поиск фильтрует список чатов в реальном времени
Все 7 новых чатов присутствуют с правильными данными
Бейджи "99+" и иконки mute на чатах 6 и 7
Нижняя вкладка называется "Чаты" (не "Чат")
Активная вкладка — "Чаты", цвет жёлтый #FFDD2D
Клик по чату → анимация + toast
Статус-бар показывает реальное время
Тёмная тема (#1A1A1A) на всём экране
Нет горизонтального переполнения
Вертикальная прокрутка чатов работает при переполнении контента
💡 Дополнительные детали
Разделители между чатами: тонкая линия 1px solid #2E2E2E, с отступом слева от конца аватара (не от края экрана).
Скролл чатов: область чатов с overflow-y: auto, высота вычитается от общей высоты экрана минус шапка, поиск и нижняя панель.
Градиентный аватар "Выгода от Т-Банка": linear-gradient(135deg, #7B4FD9, #4A90D9).
Логотип Т-Банка в статус-баре не нужен — это экран "Чаты", не главная страница.
Итог: На выходе — ОДИН файл tbank-chats-redesign.html, который открывается в браузере и показывает реалистичную симуляцию перередизайненного экрана "Чаты" приложения Т-Банка. Всё интерактивно, всё кликабельно.
Результат
Использовал для обложки к этой статье.
На экране вы видите прототип, который сгенерировал Cursor.
Вместо выводов
- Однозначно осваивать. Чем раньше, тем лучше
- Производственный процесс в моих командах больше не будет прежним. На текущем месте работы мы уже начали применять AI для прототипирования. T2M значительно снижен, часть ресурсов высвобождена
- Пока для AI еще нужен промт - не страшно. А вот когда он будет не нужен ...
P.S.
Хотели ребята из Т-Образования мотивировать участников к освоению AI инструментов или нет - не знаю. Но со мной сработало. Спасибо!-Источник
|
