AI UI: Як швидко створювати дизайн-макети з ШІ — кейс Serpstat

Дизайн-макети — один із найдорожчих і найдовших етапів у продуктовому циклі. Ми покажемо, як команді Serpstat вдалось зменшити час на створення макетів у 3 рази завдяки напівавтоматичному AI-підходу. Ця стаття для продуктових дизайнерів, маркетологів, PM-ів, всіх, хто хотів би пришвидшити UI/UX процеси.

Чому дизайн-макети забирають стільки часу?

Дизайн-макет — це деталізований візуальний прототип (модель) вашого майбутнього продукту чи сервісу, що чітко відображає його інтерфейс, структуру, розташування елементів керування, візуальний стиль та інтерактивні компоненти. Це фінальний проєкт перед етапом розробки (коду чи імплементації), який дозволяє наочно оцінити взаємодію елементів, перевірити користувацький досвід та оперативно виявити й усунути потенційні недоліки, перш ніж розпочнеться його реалізація.

Класичний підхід включає бриф → вайрфрейм → прототип → макет → фідбек → ітерації.

Джерело: skvot.io

Зазвичай це передбачає нескінченні правки та використання цілого стеку інструментів: Figma, Canva тощо. AI для дизайну значно пришвидшує процес.

Кейс Serpstat: як ми створюємо дизайн-макети з AI

Контекст задачі

Які макети ми робимо: лендінги

Обсяг: 10 макетів за тиждень

Скільки людей задіяно: 1

Нам потрібно було покращити онбординг для ключових звітів у продукті. Користувачі, які заходять у новий для них звіт, часто не розуміють, що він дає і як його використовувати, а значить, просто йдуть. Задача: зробити welcome-сторінку для кожного звіту, яка б одразу показувала реальні кейси використання і давала прев'ю того, що користувач побачить всередині.

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

Команда зібрала приклади для 5 звітів. Мені потрібно було перетворити це на 10 готових макетів з текстами (світла і темна тема для кожного) плюс локалізація на 4 мови і все це — передати команді розробників для реалізації.

Якби я робила це повністю у ручному режимі Figma, від побудови структури до фінального полірування, це зайняло б щонайменше тиждень-два. Натомість я вирішила перевірити: а що якщо AI буде генерувати HTML одразу з дизайном і текстами, а я буду перевіряти і підправляти результат у Figma?

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

Як AI-асистента я використовувала веб-версію Claude. В сервісі є можливість створювати проєкти, де один раз прописуються інструкції, які потім застосовуються для кожного нового діалогу.

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

Крок 1: Підготуйте Brand Style Guide

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

Приклад айдентики Serpstat із сервісу Google Pomelli

Без нього AI генерує «узагальнений» дизайн, який потрібно буде переробляти під ваш бренд. З ним — одразу отримуєте результат у вашому стилі.

Що потрібно включити у документ:

• Color Scheme — primary, secondary, background, кольори текстів з hex-кодами
• Typography — шрифти, розміри, font-weight для заголовків і тексту
• Spacing — базові відступи між елементами
• Компоненти — стилі кнопок (первинні/вторинні, hover states), інпути, картки, таблиці

Крок 2: Брейншторм щодо структури і дизайну з AI

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

AI пропонує кілька варіантів з різною логікою і візуальним підходом. Результати можна швидко порівняти, визначити, що працює, а що ні, і поступово дійти до фінального рішення. Цей етап може зайняти кілька ітерацій, але воно того варте.

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

Крок 3: Зберіть вхідні дані для кожного звіту

Для кожної welcome-сторінки я підготувала три типи вхідних даних:

Скріншот реального звіту — щоб AI (в моєму випадку це був Claude) зрозумів, які саме дані отримує користувач і зміг зробити реалістичне прев'ю таблиці всередині макету.

Загальний опис звіту взятий з Гайду для користувачів — контекст про функціональність, щоб AI правильно розставив акценти в текстах.

Приклади від команди — конкретні сценарії використання, опис яких був розміщений у відповідних блоках на сторінці.

Завдяки такому набору на виході я отримувала не просто дизайн, а готовий лендінг для звіту: з текстами, кейсами та унікальним прев'ю самого звіту.

Крок 4: Відпрацювання процесу з використанням базового шаблон

Я почала роботу над дизайном з одного звіту, замість того щоб робити усе одразу. Перший звіт був «Сторінки-лідери», на ньому я відпрацювала ітераційний процес створення фінального макету.

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

Крок 5: Масштабуйте на решту звітів

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

Звіт Конкуренти

Звіт Дерево сайту

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

Підсумок: 5 звітів × 2 теми = 10 HTML-файлів.

Крок 6: Перенос у Figma за допомогою плагіну

Плагін html.to.design дозволяє імпортувати HTML-код безпосередньо у Figma. Структура, layout, типографіка і кольори переносяться добре.

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

Крок 7: Локалізація текстів

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

«Double down on successful content» не перекладається дослівно — правильне рішення «Робіть більше того, що вже працює». Плануйте час на редактуру: AI закриває 70–80% роботи, решта — ручна адаптація під живу мову.

На виході отримала таблицю з текстами для 4 мов, готову до передачі команді розробки.

Коли цей підхід найефективніший

Підхід добре працює, коли є чіткі референси, структура сторінки зрозуміла наперед, а scope обмежений одним екраном або набором однотипних сторінок. Він не замінює креативний дизайн з нуля — але для виконання стандартних UI-патернів дає суттєвий буст по швидкості.

Ключовий принцип: людина думає про контент і UX, а AI виконує технічну роботу. Правильно розподіліть завдання і отримаєте готовий макет там, де раніше витрачали багато часу.

FAQ