Як перетворити AI на помічника у розробці інтерфейсів. Чотири практичні приклади
Більшість дизайнерів або взагалі не використовують штучний інтелект у своїй роботі, або ж застосовують його неефективно. У цьому матеріалі ви дізнаєтесь:
🔸 Які АІ-тули справді є корисними для дизайну, і чому ChatGPT — не найкращий варіант.
🔸 Як писати промпти, що дадуть максимально круті результати та змінять ваші упередження про AI.
🔸 Покроковий процес створення всього: від UX-копі до інтерактивних прототипів.
🔸 Як користуватися АІ для брейншторму дизайн-ідей та отримання фідбеку в реальному часі.
Не потрібно мати знання з програмування, лише бажання вивчити щось нове.
Протягом останніх двох років штучний інтелект є темою номер один в айті комʼюніті. Проте серед більшості дизайнерів інтерфейсів існує думка, що досі немає хороших AI-інструментів, які вони могли б використовувати. Спілкуючись з колегами, я лише підтвердив це упередження — люди не користуються AI, бо не знають, як це робити правильно, або ж через невдалий попередній досвід.
Я Володимир Мерленко, продуктовий дизайнер в Cieden Agency, і протягом останнього року я детально досліджував цю тему та на основі практичного використання та знайшов найбільш ефективні АІ-інструменти, які справді покращать ваш дизайн-процес.
Найкращі АІ-інструменти для дизайну
Наразі їх існує дуже багато, і майже для кожної потреби знайдеться АІ-інструмент. Проте лише кілька з них дадуть вам реально якісні результати:
- Claude: генерація тексту, дизайн-ідеація та ваєрфреймінг.
- V0 & Cursor: складне прототипування і розробка пет-проєктів.
- Perplexity: вебдослідження та промпт-інжиніринг.
- Gemini 2.0: допомога у дизайні та розробці в лайв-режимі.
Хоч ChatGPT й набрав найбільшу популярність, але він все ще надає гірші результати на звичайних моделях в порівнянні з Claude. Навіть з новими функціями, такими як Canvas, вебпошук та Sora для створення відео, я не знайшов майже жодної практичної користі для дизайнерської роботи. Єдиним винятком є модель під назвою ‘о1’, яку раджу використовувати, якщо вам потрібно підготувати детальний документ у короткий проміжок часу, та ми поговоримо про це трішки пізніше.
Також в додачу до функції ‘Projects’ в Claude, яку ми оглянемо нижче, туди нещодавно додали так звані ‘MCPs’ — простими словами, інтеграції. З мого досвіду, наразі єдиним корисним MCP для дизайнерів є Brave, який додає вебпошук прямо у ваші чати з Claude. Однак його налаштування більш технічне, ніж те, до якого звикли прості користувачі. Тому такі альтернативи, як Perplexity, все ще є зручнішими у використанні.
Текст, UI та live assistance — це три категорії того, як особисто я використовую АІ у щоденній роботі. Такі інструменти стали невід’ємною частиною мого дизайн-процесу, допомагаючи з текстами, UI та різноманітними завданнями у лайв-режимі.
Input-to-text
- Покращення граматики і пунктуації в повідомленнях, імейлах та презентаціях (наприклад, зробити так, щоб американська команда без проблем зрозуміла ваше повідомлення в Slack).
- Пошук відповідей на будь-які запитання щодо дизайну за лічені секунди (як вставити Calendly на мій лендінг, зроблений у Framer?).
- Перевірка ідей, в яких ви не впевнені (дізнатися, чи ваші дизайни достатньо легкі для розробки).
- Постановка запитань про документи і транскрипції дзвінків (зробити підсумки сесії користувацького тестування).
- Генерація UX-тексту для дизайну замість Lorem Ipsum (створити не заплутаний контент для деструктивного діалогового меню).
- Отримання інсайтів про продукт без потреби звертатися до тіммейтів в іншому часовому поясі (зробити проєкт у Claude з усіма документами, повʼязаними з продуктом, який працюватиме як FAQ для команди).
- Генерація чернеток дизайн-документації (сюжет юзер-тестування, PRD, StoryBrand, CJM, або навіть щось складніше типу бізнес моделі).
- Проведення будь-яких дизайн-досліджень, які потребують доступу до інтернету (аналіз конкурентів).
- Генерація структури функції/сторінки з нуля або ж на основі опису завдання (створити контент для посадкової сторінки з допомогою брифінгу клієнта).
Input-to-UI
- Генерація інтерактивних тестів для користувацьких досліджень, таких як, наприклад, tree testing (та навіть зʼєднання їх з таблицями для збереження результатів).
- Створення ваєрфреймів з використанням природної мови (natural language) замість малювання прямокутничків у Figma.
- Генерація інтерактивного UI високої якості (примітка: наразі є певні обмеження щодо стилізації, більше про це нижче).
- Розробка складних прототипів і навіть повноцінних пет-проєктів за допомогою спілкування з AI та розуміння при цьому лише кількох простих технічних концептів.
Live assistance
Застосування АІ у лайв-режимі має не так багато прикладів для дизайнерів, та я все ж раджу спробувати, адже це просто-напросто магія.
- Брейнштормінг дизайн-ідей разом з Gemini під час демонстрації екрану відкритого проєкту в Figma.
- Підвищення рівня англійської за допомогою ChatGPT у ролі вашого особистого репетитора.
Підхід, який завжди працює
З досвіду людини, що щодня користується АІ, ось підхід, який працюватиме завжди, незважаючи на обраний інструмент.
По-перше, використовуйте англійську. Це банально мова найбільшої кількості контенту, на якому навчають АІ-моделі. Отже, саме англійською ви отримаєте топові відповіді.
Напишіть найкращий і найбільш деталізований промпт, який можете. Погані результати зазвичай зʼявляються не через «дурний ШІ», а через погано описаний запит. Навіть зважаючи на те, що штучний інтелект щодня покращують спеціально для того, щоб генерувати найкращі результати при найменшому контексті, все ж краще переглянути ваш промпт і додати до нього трішки більше деталей.
Надішліть його Claude/Perplexity та попросіть поставити вам уточнювальні запитання. Це крок, який робить усю магію, адже АІ таким чином отримує більше контексту про ваші потреби на основі відповідей. Це також допомагає звернути увагу на важливі дрібниці, про які ви могли б забути.
Дайте відповідь на питання настільки детально, наскільки можете, щоб мати покращену версію оригінального запиту.
Відправте покращений промпт в обраний АІ-інструмент і отримаєте результат, який пришвидшить вашу дизайн-роботу.
Мої топ-4 практичні приклади
Зараз ви, ймовірно, переповнені інформацією і все здається заскладним для розуміння. Якщо закінчите статтю на цьому моменті, ви навряд чи спробуєте більшість порад. Та оскільки найкращий спосіб щось вивчити — спробувати це на практиці, пройдемося чотирма практичними прикладами того, як я використовую АІ у роботі дизайнера інтерфейсів.
Промпт-інжиніринг з Perplexity
Згадайте найпоширенішу проблему: написання слабких промптів. Коли ви відправляєте звичайний запит на кшталт «create a dashboard design» в Claude, ви й отримуєте звичайний результат, який потребує ще багато допрацювань та ітерацій. Такий підхід витрачає вам час та не використовує повний потенціал AI.
Колись давно я створив досить простий, проте дієвий спосіб «промпт-інжинірингу», який ви можете використовувати в усіх АІ-чат-інструментах:
You are an expert in prompt engineering and optimization. Your task is to analyze and improve the following prompt:
«Put your original prompt here»
Please follow these steps:
1. Briefly explain your understanding of the prompt’s goal.
2. Identify any ambiguities, unclear instructions, or potential issues in the prompt.
3. Ask ten crucial clarifying questions to better understand my intent.
4. Wait for my responses before proceeding.
5. Suggest an improved version of the prompt based on the clarifications.
6. Allow me to provide feedback on the suggested prompt for further refinement (optional iterations).
7. Once a satisfactory prompt is achieved, answer the prompt using the large language model.
Remember to consider factors such as clarity, specificity, context-setting, and alignment with the LLM’s capabilities.
Методом спроб та помилок визначив, що Claude та Perplexity дають найкращі результати. Останній особливо корисний, якщо ваш промпт має посилання чи вимагає доступ до інтернету. Таким чином замість того, щоб починати зі слабким запитом, ви покращуєте його якість за допомогою методів промпт-інжинірингу та вебпошуку.
Скажімо, вам треба задизайнити сторінку дашборду вебзастосунку. Для цього завдання потрібно подумати над віджетами, які будуть там показані, а також зважати на різні юзер-персони, щоб зробити таку сторінку максимально інформативною для користувачів.
Цей процес виглядав би ось так:
- Відкрийте Perplexity та увімкніть функцію Pro-пошуку (у безплатному плані є три спроби на день).
- Максимально детально опишіть ваш запит і додайте повʼязані посилання для референсу, якщо потрібно. Використайте мій ‘prompt engineering’ метод, описаний вище, та натисніть enter.
- Дайте відповіді на запитання та за потреби повторіть такий Q&A ще кілька разів.
- Наостанок скажіть AI, щоб відправив покращену версію оригінального промпту. Після цього у вас має бути супер деталізоване повідомлення, яке пізніше можна використати, наприклад, для генерації UIйки.
Порівняємо наш початковий запит:
I need to design a Dashboard page for Figma’s web application. This task requires ideating widgets that would be shown there as well as considering various user personas to make the page as informative for everyone as possible. Here’s the link to their website: www.figma.com, also you can review their forum in order to understand the users and their pains: forum.figma.com
З його покращеною версією:
I need to design a Dashboard page for Figma’s web application. The goal is to create a user-friendly interface that caters to various user personas, including:
1. Regular Solo Designers: They need quick access to design tools, project templates, and resources, focusing on efficiency and intuitive navigation.
2. Team Designers: They require collaboration tools, version control, and visibility into team projects and tasks.
3. Design Managers: They seek an overview of team performance, project timelines, and resource allocation, with analytics to assess productivity.
4. Clients: They want access to project updates and deliverables, ensuring transparency in the design process.
5. Developers: They need integration with design handoff tools and clear project timelines.
Key Tasks:
— Widget Ideation: Brainstorm specific widgets that fulfill the needs of these personas, such as: Project Overview Widget (current projects and deadlines), Collaboration Tools Widget (real-time feedback), Analytics Widget (project timelines and performance metrics)
— Style Consistency: Ensure the dashboard aligns with Figma’s existing UI style (UI3), maintaining similar color schemes, typography, and iconography.
— User Experience Enhancements: Consider features like drag-and-drop customization for widgets and filtering options based on user roles.
— Feedback Mechanisms: Incorporate options for users to provide feedback directly through the dashboard for continuous improvement.
Reference for Inspiration:
Review how Glide structures its dashboards for insights into user-friendly layouts that prioritize data visualization and interactivity.
Objective:
The dashboard should enable users to quickly understand the state of their work while providing a cohesive experience that enhances productivity and collaboration across different roles within the Figma ecosystem.
Чудово, чи не так? І це лише початок.
Ваєрфреймінг з Claude Projects
Оскільки у вас тепер є якісний промпт, що описує дизайн-вимоги в усіх деталях, можете використати його для ідеації дизайн-рішень або навіть генерації ваєрфреймів. Ті, хто не знайомий з функціоналом під назвою ‘Projects’, уявіть таку собі папку з усіма АІ-чатами, які для своїх відповідей використовують однакові знання у вигляді документів та інструкцій.
Ось як покроково цим скористатися:
- Спочатку створіть проєкт у Claude.
Зауважте, що ця функція вимагає Pro підписки, але повірте, воно того варте. Інакше можете спробувати v0, оскільки він має схожу фічу і дозволяє до пʼяти проєктів у безкоштовній версії. Проте там є свої мінуси, які поясню у порівнянні нижче.
- Завантажте усі документи, що маєте, про продукт, над яким працюєте. Вони слугуватимуть знаннями для AI. Можете додати туди будь-що, та в ідеалі треба мати хоча б кілька PDF файлів, які описують продукт, його вимоги щодо стилю і дизайн принципи, яких вам потрібно дотримуватися.
Наразі Claude дозволяє лише текстове форматування у таких документах, тому навіть якщо ви завантажите PDF зі скріншотами компонентів дизайн-системи, він все ще їх ігноруватиме, на жаль. Проте такі фото можна прикріпляти до повідомлень всередині чатів.
Лайфхак: якщо під рукою немає продуктової документації, використовуйте модель OpenAI o1 в ChatGPT, щоб генерувати такі контекстні документи, а не писати їх вручну. Наприклад, можете попросити AI допомогти вам з описом дизайн-гайдлайнів, накинувши йому скріншотів вашого дизайну.
- Додайте інструкції проєкту — напишіть їх власноруч, використайте приклади з інтернету або згенеруйте тією ж o1-моделлю.
Я б радив пояснити Claude:
- над чим саме ви працюєте у цьому проєкті;
- в ролі кого він має відповідати (наприклад, скілового продакт-дизайнера з навичками React-розробки);
- поставити йому чіткі вимоги щодо якості повідомлень (наприклад, завжди посилатися на документи у цьому проєкті та використовувати Figma UI3-гайдлайни);
- перерахувати будь-які кроки, яких він має дотримуватися при відповіді (наприклад, можете попросити використовувати ‘prompt engineering’ метод на початку кожного вашого чату).
Ось гарний приклад інструкції, яка робить Claude трішки розумнішим.
Лише памʼятайте, що AI, на жаль, схильний забувати правила, навіть якщо описати їх дуже детально. В цьому випадку можна додатково попросити його дотримуватися інструкцій вже під час спілкування.
- Створіть новий чат у цьому проєкті, відправивши промпт, покращений через Perplexity.
Також можете надіслати опис таски, якщо маєте. Зверніть увагу, що для того, щоб отримати UI, який виглядав би схожим на ваші очікування, потрібно прикріпити до повідомлення фото наявного дизайну продукту, над яким працюєте, або ж будь-яких референси, що подобаються вам стилем.
Як бачите на скріншотах, Claude дослухався до інструкцій проєкту — почав з ‘thinking protocol’ та поставив мені кілька додаткових уточнювальних запитань перед тим, як приступити до генерації дизайну.
А ось результат, який я отримав після відповідей на його запитання, додавання скрінів теперішнього дизайну Figma і кількох ітерацій. Знаю, це не найкращий у світі інтерфейс, але він створений на основі видуманого завдання і все одно є значно кращим у порівнянні з ваєрфреймом, який би робився власноруч у Figma. В цьому і є сенс.
Іноді навіть перший результат виходить досить непоганим, та зазвичай треба кілька спроб, щоб отримати правильний дизайн. Також, якщо ви попросите AI згенерувати UI на основі вашого запиту, а він відповість звичайним текстом, просто уточніть використати для цього функцію ‘Artifacts’.
Що я дуже люблю в Claude — це те, що він дозволяє публікувати згенеровані дизайни та ділитися ними з іншими. Наприклад, ви можете скинути лінк вашій команді, щоб отримати фідбек перед тим, як переносити цей дизайн у Figma. Та все ж саме Figma повинна бути фінальною точкою, адже AI на сьогодні не є достатньо розумним, щоб генерувати дизайни, що на 100% відповідають потрібному стилю. Та як казав раніше, це все ще дуже пришвидшує процес та полегшує роботу.
В якості альтернативи можете скористатись ‘Проєктами’ у v0, якщо хочете спробувати цей концепт перед тим, як купувати Pro підписку в Claude. Головне майте на увазі, що це продукт від Vercel, тому вони використовують власну бібліотеку компонентів shadcn/ui для генерації усіх дизайнів. Що я тільки не перепробував, але все одно не вдалося згенерувати там UI, який би дотримувався цілковито мого стилю. Єдиний варіант, як це обійти — створити дизайн спочатку в Claude, а потім перенести його код у v0.
Також зауважте, що v0 має ліміт у 5000 знаків для інструкції проєктів. Проте у нього є інше чудове призначення, про яке поговоримо в наступному прикладі.
Складне прототипування з V0 і Cursor
В чому v0 реально потужний, так це в створенні не просто сніпетів коду, як в Claude, а повноцінних, хоч і простих проєктів з правильно побудованою структурою (примітка: в цьому реченні слово «проєкт» має інше значення). І це дуже зручно, тому що ви можете легко експортувати згенерований UI прямо в код едітор по типу VS Code або Cursor та продовжити працювати там. Але давайте розберемося з усім поступово.
Отже, як вже було сказано, v0 має безплатну версію з доступом до функції ‘Проєктів’, що є плюсом. Але водночас він генерує дизайни лише використовуючи бібліотеку shadcn/ui, що в деяких випадках плюс, а у інших — мінус.
З мого досвіду це зручний інструмент, якщо вам або байдуже на стиль і ви хочете отримати більше як ідею для дизайну, або ж створити щось складне і таке, що можна буде використовувати для тестування з користувачами. Саме друге є моїм фаворитом, адже тепер не потрібно робити прототипи у Figma, щоб провалідувати ідеї. Сьогодні це можна зробити, просто спілкуючись з AI та пояснюючи, як би ви хотіли, щоб компоненти взаємодіяли між собою.
Щоб це зробити, потрібні такі кроки:
- Налаштуйте проєкт у v0, використовуючи той самий підхід, що й у прикладі про Claude.
- Напишіть достатньо деталізований запит або ж скористайтеся ‘prompt engineering’ методом, щоб спростити процес. Для прикладу, ми знову спробуємо промпт для генерації дашборду, який використовували раніше, щоб побачити чітку різницю між Claude і v0.
- Проітеруйте результат, відправивши нові запити у чат або ж оберіть окрему частину згенерованого дизайну та залишіть комент саме про неї (Claude так, до речі, не вміє). Наприклад, можете попросити AI додати кнопку «Manage widgets» і згенерувати бокову панель, яка б дозволяла ці віджети вмикати та вимикати.
- Після цього можна переглянути результат у повноекранному режимі або поділитися ним з іншими, щоб зібрати фідбек, так само як в Claude. Можна навіть провести юзер-тестування, використовуючи цей інтерактивний дизайн.
І Claude, і v0 найкраще працюють з вебдизайнами під десктоп, проте можете також генерувати з їхньою допомогою UI для мобайлу. В цьому випадку, коли переглядатимете дизайн, увімкніть адаптивний режим в Safari (або консоль у Chrome) і змініть розмір екрану, щоб зрозуміти, як би він виглядав на телефоні. Інакше просто побачите дивну респонсивну версію дизайну, розтягнутого до боків вашого компʼютера.
Лайфхак: якщо вам подобається результат і хочете використати його у Figma, спробуйте плагін html.to.design. Він дозволяє експортувати UI у вигляді повноцінного дизайну, який можна редагувати. Просто скопіюйте посилання з v0 і вставте його в плагін у вашому Figma-проєкті.
Проте v0 має одну серйозну проблему — він починає сильно виснути, якщо згенерований дизайн стає надто складним. Тому якщо ви хочете створити клікабельний прототип, який покриває багато користувацьких шляхів, або змінити стиль дизайну на щось більш кастомне, потрібно буде перейти з v0 у код-едітор.
На щастя, у наш час більше не потрібно бути розробником, щоб мати змогу це зробити. Адже існує купа код-едіторів AI, з якими ви можете просто спілкуватися, використовуючи природну мову. Так, ви все правильно почули (чи прочитали)! Навіть, якщо маєте нуль знань про Front-end. Крім того, v0 попонує легкий спосіб експортування згенерованого коду прямо в IDE.
Існує стереотип про такі код-едітори. Мовляв, ними можна створити лише shitty-looking продукти, які лагатимуть, якщо ви не знаєте, як писати код. Я теж так вважав, але після того, як провів кілька днів, тестуючи Cursor для створення нового продуктового функціоналу з досить складною логікою, яка залежала від багатьох юзер-фловів, можу впевнено сказати, що це лише стереотип. На жаль, тут без прикладів через NDA. Ви дійсно можете згенерувати складний продукт і навіть зробити його візуально привабливим без знань програмування.
Якщо бути чесним на 100%, звісно ж, було б непогано вивчити кілька основ розробки, щоб легше та швидше генерувати надійний код. Я планую написати другу частину цієї статті, де детально поясню, як це зробити за допомогою Cursor AI, тому слідкуйте за оновленнями.
Проте, якщо ви вже дуже зацікавлені, ось спрощений туторіал:
- Згенеруйте дизайн у v0 і скопіюйте ‘npx shadcn add’ команду з меню ‘Add to Codebase’.
- Створіть нову папку на вашому компʼютері.
- Створіть новий проєкт у Cursor всередині цієї папки.
- Вставте скопійовану команду в термінал у Cursor і пройдіть процес налаштування (зазвичай треба просто всюди обирати Yes).
- Використайте команду ‘npm run dev’ у терміналі, щоб переглянути код через localhost у браузері.
- Внесіть зміни або додайте нові частини коду там, де потрібно, використовуючи бокову панель з АІ-чатом.
- Створіть новий репозиторій на GitHub, запуште туди цей проєкт та задеплойте його через Vercel, щоб отримати стабільне посилання, яким можна ділитися з іншими.
Це останній штрих, проте саме він найскладніший для людей, що не знайомі з програмуванням. Але не панікуйте — я усе детально та простими словами поясню у наступній статті.
Бонус: хочете спробувати більше інструментів для генерації UI? Існує багато опцій, які можна протестувати. Хоч я їх тут і не оглянув (вони не мають такої функції, як ‘Проєкти’ в Claude або v0, яка, на мій погляд, є обов’язковою для складних завдань), ці інструменти все одно чудово підходять для ідеації та створення якісних ваєрфреймів. Ось два, що заслуговують уваги:
- bolt.new — робить круті дизайни, дозволяє експорт коду ZIP-файлом і має режим перегляду для мобільного адаптиву (щоб не потрібно було лізти в консоль браузера). Проте майте на увазі, що він некоректно працює в Safari.
- lovable.dev — схожий на попередній, але генерує трішки слабший UI у порівнянні з Bolt.
UPD: вже після написання цього матеріалу вони випустили оновлення в колаборації з Builder.io, яке дозволяє експортувати дизайн з Figma у код дуже схоже до оригіналу. Це наразі найкращий інструмент для такого завдання, тому раджу також спробувати — лінк на плагін.
Live assistance з Gemini 2.0
Одним з найцікавіших оновлень у світі AI останнім часом виявився вихід Gemini 2.0. Вважаю, що оригінальна LLM від Google завжди була найгіршою серед схожих АІ-інструментів, але її друга версія нещодавно змінила мою думку. На додаток до багатьох інших цікавих функцій, вони випустили ‘multimodal live API’, яке дозволяє взаємодіяти з AI в режимі реального часу за допомогою голосу, камери і, що мене вразило найбільше — презентації екрану вашого компʼютера.
Уявіть, що спілкуєтеся зі своїм особистим АІ-асистентом, поки працюєте у Figma, та водночас отримуєте від нього фідбек щодо дизайну. Брейнштормите альтернативні ідеї і навіть обговорюєте те, наскільки вони легкі для розробки. Усе це наживо і безкоштовно. Принаймні, поки Gemini 2.0 у режимі тестування.
До того ж обмежень насправді немає. AI, наприклад, можна використовувати для вивчення програмування. Якщо ви новачок у Cursor, ви могли б шерити ваш екран і просто балакати зі штучним інтелектом, ставлячи йому запитання про Front-end. Хоч цей функціонал і має у назві слово ‘API’, та ним можна без проблем скористатися, зайшовши на сайт Google AI Studio.
Показую на відео живе демо:
Майбутнє АІ-дизайну
Скоро AI розвинеться до рівня, де нарешті зможе замінити дизайнерів. Але під словом «дизайнери» я маю на увазі тих, хто не користується усіма цими інструментами. Якщо хочете зберегти свою роботу та продовжити створювати чудові продукти, важливо рухатися разом з течією і впроваджувати АІ у власний дизайн-процес. Багато спеціалістів все ще скептично ставляться до цієї теми, проте навіть OpenAI нещодавно заявили, що прогнозують створення AGI вже цього року.
Особисто я сподіваюся, що 2025 стане роком, який дозволить нам, дизайнерам, витрачати ще менше часу на пересування пікселів у Figma і більше на вирішення людських проблем.
Діліться у коментарях, про які приклади використання AI ви хотіли б дізнатися детальніше. А також очікуйте на другу частину про розробку з допомогою Cursor AI.
Я пишу про продуктовий дизайн, АІ та стартапи більше у себе на LinkedIn. Давайте конектитись.
12 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів