ШІ дає змогу братися за складніші задачі, швидше розбиратися в незнайомих доменах і працювати на пер

ШІ дає змогу братися за складніші задачі, швидше розбиратися в незнайомих доменах і працювати на перетині дизайну та розробки.

Банкінг - сильно зарегульоване середовище з високим рівнем відповідальності, тому у використанні ШІ є жорсткі обмеження. Персональні дані, банківська таємниця та конфіденційні матеріали не мають потрапляти в зовнішні сервіси. Це стосується і макетів, і текстів, і всього іншого.

Хочу показати два приклади, де ШІ допомагає вийти за межі звичних дизайн-інструментів.

Рефакторинг макетів

На обкладинці - приклад зміни структури навігації. Адаптувати один екран досить просто. Але як оновити сотні таких екранів без купи ручної роботи?

Компонент у дизайн-системі концептуально змінився. Просто підтягнути нову версію в усі макети - не завжди рішення. У цьому випадку властивості одного компонента переїхали в інший, і під час звичайного оновлення інстансів виділений таб скрізь злетить на перший у списку. Щоб це виправити, потрібно було пройтися сотнями макетів і замінити налаштування нових інстансів на відповідні контексту конкретного екрана чи флоу.

Саме тому я й вирішив створити кастомні ШІ-скіли - набори інструкцій і правил, за якими агент знаходить потрібні інстанси, аналізує їхні властивості та візуальний контекст і адаптує компоненти під конкретні екрани.

Тепер оновлення макетів цілого розділу займає не години, а десятки хвилин. І поки агент працює, я можу спокійно піти попити кави, а коли він маякне про готовність - перевірити результат.

Прототипування

Інша задача, де можливості звичних інструментів починають обмежувати дизайнера, - підготовка прототипів для користувацьких досліджень.

Особливо коли йдеться про складні B2B-продукти, де важливо перевірити не лише навігацію між екранами, а й реальну поведінку інтерфейсу з реалістичними даними.

Складний Figma-прототип із таблицями, формами, залежними станами та десятками переходів перетворюється на монстра. Його важко підтримувати, він глючить і створює проблеми під час роботи в Maze. Починаються танці з оптимізацією, детачем інстансів, спрощенням сценаріїв та растеризацією візуалу.

Тому для таких сценаріїв я використовую Claude Code, щоб генерувати реалістичні прототипи за макетами та компонентами дизайн-системи. Такий прототип значно легший за Figma-прототип і ближчий до реальної поведінки продукту: введення даних, валідація, умовна логіка, зміни станів. А ще його набагато швидше зібрати: у Figma я робив би такий прототип щонайменше тиждень, а з ШІ - години.

Але давайте не забувати, що токени коштують грошиків)

Спершу я визначаю межі роботи ШІ: яку гіпотезу тестуємо, які сценарії, екрани, стани та інтеракції потрібні, що слід виключити і за якими критеріями перевіримо результат.

Тестуємо лише десктоп? Отже, не генеруємо мобільну версію. Компонент суто інформаційний? Не реалізуємо зайві стани.

Окрім скоупу генерації, важливо визначити, які рішення агент може ухвалювати самостійно. Наприклад, він може оптимізувати код, але не змінювати логіку дослідницького сценарію без погодження.

Потім перевикористовую вже згенероване. Спільний код, правила, сценарії та відмінності між версіями зберігаю в md-файлах. Навіть те, що прибрали з поточного тесту, можна зберегти для наступного. Так поступово формується база готових елементів.

Готовий прототип можна розгорнути на хостингу на кшталт Netlify чи Vercel, захистити паролем від чужих очей і дати респондентам посилання. Усі дані в прототипі деперсоналізовані, а розміщення відповідає правилам безпеки організації.

Можна ще й аналітику прикрутити та збирати метрики.

А що з рештою задач?

Їх теж вистачає: ШІ допомагає нам підганяти чорнові тексти під ToV, шукати edge-кейси та критикувати дизайн-рішення.

У дослідженнях він допомагає з підбором методів і метрик, тематичним аналізом тощо.

Раніше для частини цих задач мені знадобилася б допомога розробника або значно більше часу.

Власне, у цьому я й бачу головну цінність ШІ: не просто робити звичні речі швидше, а розширювати те, що я взагалі можу зробити як дизайнер.

А які сценарії використання ШІ прижилися у вас?