Як AI закриває половину задач дизайнера: практичний досвід

💡 Усі статті, обговорення, новини про AI — в одному місці. Приєднуйтесь до AI спільноти!

Усім привіт! Мене звати Єлизавета Ярмоленко, я Product Designer в одному з бізнесів групи продуктових IT-компаній Universe Group — Guru Apps. Ми створюємо застосунки, які є лідерами в двох основних напрямках: утиліти та AI. Нашими продуктами користуються 100+ млн людей зі 186 країн світу.

Сьогодні штучний інтелект активно інтегрується в роботу дизайнерів, але на практиці рівень його використання сильно варіюється. У команді Guru Apps AI уже давно не опція, а частина робочого процесу. Ми інтегрували штучний інтелект до того рівня, що він закриває близько 50% мого робочого дня: від досліджень і гіпотез до написання плагінів та автоматизації дизайн-систем. Решту часу я малюю конкретні екрани, вношу правки та вирішую продуктові задачі. Тому в цій статті я поділюся, як ми побудували таку культуру використання AI та розберу 5 конкретних кейсів оптимізації задач.

AI-культура: як почати впроваджувати АІ?

Ефективне впровадження нових технологій починається з культури. У нашій дизайн-команді панує відкритість до експериментів. Ми розуміємо, що чим більше вивчати можливості штучного інтелекту, тим більше інструментів для пришвидшення роботи можна отримати.

Тому ми побудували процес навчання зсередини. Team Lead команди, започаткував серію AI-воркшопів, де ми розбирали можливості ChatGPT і Claude: як правильно створювати «скіли» (персоніфіковані налаштування моделі), як працювати з контекстом та додавати документи, що стосуються всього проєкту.

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

Міграція на Claude: чому та як я змінила ChatGPT на Claude за один день

Довгий час моїм основним інструментом був ChatGPT. Він був повністю адаптований під мої задачі, мав структуровані проєкти та накопичену пам’ять. Порада для дизайнерів: якщо ви хочете працювати ефективно, використовуйте функцію «Проєкти». Пам’ять AI не повинна бути захламленою. Коли вона структурована — модель краще розуміє специфіку задачі та видає очікуваний результат.

Перехід на Claude стався через декілька його переваг: ширші можливості скілів та роботу з артефактами (візуальними таблицями та інтерфейсами прямо в чаті). В той же час, найбільшим викликом було перенести весь накопичений контекст.

Тому коли я переходила з одного AI на інший, то попросила ChatGPT написати детальні контекстні промти про мій проєкт і те, як саме я з ним працюю. Він передав усю накопичену інформацію в один текст, який я надала Claude як базовий контекст. Це дозволило мені «переїхати» за один день, зберігши всі напрацювання. Claude виявився більш розширеним інструментом для моїх задач. Наприклад, він генерує візуальні сторінки, які наочно демонструють варіанти дизайну.

5 кейсів використання AI, в щоденній роботі дизайнера

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

1. UX-дослідження та робота з масивами даних

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

Зараз мій флоу автоматизований наступним чином:

1. Транскрибація: за допомогою АІ-транскрибатора я перетворюю аудіо в текст.
2. Аналіз: надсилаю транскрипцію в Claude, який виписує ключові інсайти.
3. Візуалізація: обираю фреймворк (наприклад, Jobs to Be Done або Value Proposition Canvas) і готую матриці у Figma.
4. Звітність: надсилаю матриці та таблицю гіпотез у Claude. Він збирає це в єдину таблицю і формує звіт, який легко презентувати команді.

Я створила особисту скілу в Claude спеціально для досліджень, і зараз цей підхід використовує багато хто з наших дизайнерів.

2. Як написати плагін за 10 хвилин

Ми зіткнулися з проблемою в дизайн-системі: накопичився технічний борг у вигляді дублікатів стилів та кольорів, що використовувалися «на око» hex-кодами. Потрібно було витягнути всі реальні кольори з макетів, щоб очистити систему.

Пошук готового плагіна у Figma Community зайняв 20 хвилин і не дав результату. Виписувати коди вручну — це робота на цілий день. Тоді я звернулася до Claude з ідеєю написати власний скрипт.

У мене немає спеціальних програм для розробки (IDE), тому я просто відкрила звичайний «Блокнот» на macOS і скористалася інтерфейсом Figma для розробників. Claude згенерував код для простого плагіна без інтерфейсу. Після двох ітерацій і виправлення кількох помилок ми отримали ідеальний інструмент, який стягує всі кольори з фреймів. У результаті — робота, яка могла зайняти весь мій робочий день, була виконана за 10 хвилин.

Пізніше за таким же принципом, ми з Claude створили другий плагін для автоматичного формування палітр. У підсумку робота, на яку спочатку закладали два тижні, зайняла в мене три години.

3. MCP для Figma та автоматизація дизайн-системи

Оскільки я навчаюся на розробника, мені легше розбиратися в коді та спілкуватися з AI його мовою. Одним із найбільш просунутих інструментів зараз є MCP (Model Context Protocol). Це протокол, який дозволяє підключити AI-агента (наприклад, Claude) безпосередньо до Figma з правом не лише читати, а й редагувати файли. Раніше Claude бачив лише скріншоти, а тепер він бачить структуру макета.

Як я використовую MCP для переходу на Variables:

Замість плагінів для міграції я прошу Claude підключитися до файлу і:

1. Скопіювати всі актуальні стилі в примітиви, базуючись на кращих підходах до дизайн-систем.
2. Створити семантичні та компонентні токени.

AI бачить, що заголовки мають певний колір, і автоматично створює семантику на кшталт text-primary. Це дозволяє створити ідеально підв’язану систему Variables майже без ручного втручання. Підключення MCP може здатися складним, але Claude інструктує мене покроково та підказує, що виконати в терміналі, де отримати API-ключі та як завершити налаштування.

4. Щоденний флоу: від гіпотези до дизайну за 10 хвилин

Коли приходить нова таска, я більше не починаю з «чистого листа». Описую задачу Claude, показую baseline (дефолтну версію продукту) та приклади конкурентів. Мій алгоритм виглядає так:

• Прошу Claude описати кроки, зміни, варіації тексту — все, що можна текстово прописати в цих змінах
• На основі цього він створює промт для FigmaMake.
• Копіюю промт, скидаю у FigmaMake, який генерує екрани і варіації рішення гіпотези.
• Поки FigmaMake генерує — прошу самого Claude створити артефакти з варіантами дизайну
• Паралельно шукаю референси на Mobbin.

У результаті за 5 хвилин AI генерує мені 4 варіанти дизайну у FigmaMake, які потім можна перевикористати. У Claude роблю скріншоти елементів, які подобаються, або прошу FigmaMake їх відтворити і комбіную фінальне рішення: FigmaMake + артефакти Claude + дослідження на Mobbin.

Таким чином пів дня ресерчу скорочуються до лічених хвилин, що дозволяє нам тестувати більше гіпотез.

5. Контекстна локалізація

Якщо говорити про продукт над яким я працюю, то він локалізований на 17 мов і знайти нативного спеціаліста під кожну локаль нереально. Тому для перевірки перекладів я використовую Claude:

1. Скидаю скріншот екрана з логікою застосунку
2. Прошу адаптувати текст під реальний UI-контекст із обмеженнями по символах. В англійській локалізації це 10 символів, для інших ±5.

Це вирішує класичну проблему: переклад може бути граматично правильним, але незрозумілим або задовгим для інтерфейсу. Контекстне рев’ю робить рядки природнішими і рятує від тексту, який «налазить» один на одного в UI.

Практичний кейс: A/B Recently Deleted

Нещодавно мала задачу для покращення UX одного з наших продуктів Cleaner Guru, який очищує памʼять на телефоні та видаляє непотрібні файли. Треба було пояснити користувачу, що для звільнення місця на телефоні треба очистити ще й корзину самого пристрою.

Аналогів у ніші було нуль. Замість того, щоб малювати все з нуля та витрачати дні на штурм, я використала AI та згенерувала одразу 18+ варіантів концептів — від акордеонів і таймерів терміновості до покрокових інструкцій і прогрес-барів.

Це дало можливість швидко відфільтрувати нежиттєздатні ідеї і прийти до продакт-менеджера вже з конкретними варіантами. Виграшним варіантом став step-by-step з відео-поясненням. У результаті те, що мало зайняти 4 робочі дні, ми реалізували за 2.

Підсумки: AI не замінює, а змінює

Найважливіший висновок: AI не забирає творчу роботу — він прибирає її рутину. Тому не бійтеся експериментувати, пишіть власні плагіни та будуйте свою AI-культуру. Це дозволяє розвивати продукт швидше та якісніше.