Як прототипувати зі штучним інтелектом
Мене звати Микита Мельник, я займаюсь бізнес-аналізом і продакт оунершипом. Фокусуюся на впровадженні генеративного штучного інтелекту в робочі процеси, розвитком ШІ у бізнес-аналітиків і РО, розробці продуктів на основі ГШІ. А також консультую проєкти щодо впровадження технології.
У цьому матеріалі розкажу про прототипування за допомогою штучного інтелекту.
Зараз, коли штучний інтелект став особливо популярним і спеціалісти всіх напрямків намагаються використовувати його, щоб стати ефективнішими і швидшими, кейс прототипування з ШІ відійшов на другий план, хоча і не для всіх.
Але прототипування — важлива техніка, яка використовується бізнес-аналітиками, продакт-менеджерами, дизайнерами, і потребує чимало часу. Я опишу її з точки зору недизайнера.
Переваги — значні. Можна швидко усвідомити, як буде виглядати рішення, обговорити його, визначити скоуп робіт, протестувати, виділити MVP тощо. Перед тим, як перейти до AI прототипування, пару речень дуже загальної теорії.
В залежності від рівня деталізації і інтерактивності розрізняють декілька видів прототипів. Найпростіший, як курка лапою, — скетч. Досить розповсюджена техніка, яка робиться від руки олівцем чи ручкою (та хоч паличкою на піску). Класних скетчів з ШІ я ще не бачив.
Далі wireframe — більш структуровані прототипи, які будуються вже за допомогою інструментів прототипування. Вони зонують інтерфейс і можуть бути дуже детальними. 2Мокап — це готовий або майже готовий інтерфейс вашого застосунку: пропрацьовані компоненти, шрифти, іконки. Виглядає так, що його можна сміливо відправляти на прод.
Хоча дехто виділяє і прототип як окремий вид прототипу, але зараз не про це.
Ці всі прототипи можуть бути інтерактивними, тобто реагувати на кліки і ховери. Якщо у вас є клікабельний прототип, це щастя для ваших стейкхолдерів. Бо можна поклікати, погратися з майбутньою функціональністю, сформувати враження, поділитись фідбеком тощо.
Найефективніший підхід до протипування з ШІ
Розглянемо декілька підходів до прототипування з ШІ і зрозуміємо, чому воно не дуже популярне та який з підходів найефективніший. І чи варто виділяти час на виконання цього кейсу з ШІ?
Підхід перший: крізь біль і сльози (застарілий, незручний і неефективний підхід)
ШІ генерує або текст або зображення. Останній варіант зовсім не підходить для прототипування, бо це ілюстрації. Виправляти щось у них немає сенсу, а сама растрова графіка не юзабельна. Тоді залишається єдиний варіант — текст. Тобто, генерувати прототипи в форматі тексту? Ну, не зовсім. Генерувати код для прототипів. Як це робити?
Використовувати мови розмітки — HTML, XML, SVG. Цей підхід міг бути актуальним рік назад, коли ще не існувало спеціалізованих ШІ-інструментів для генерації прототипів. Тобто просити ШІ-інструменти візуалізувати контексти у вигляді коду. Такий код можна відкрити за допомогою браузера або інструментів типу draw.io, Lucidchart, Visio та інших подібних.
Наприклад, візьмемо еталонний скріншот гугл-документів, і згенеруємо на основі нього прототип в HTML.
І результат:
Цей кейс ми декілька разів пробували на практиці під час впровадження ШІ в SDLC-процеси, але позитивного фідбеку команди не отримали.
Які переваги та недоліки?
Перший, другий і третій недоліки — це незручно. Ви не бачите результат одразу, тож треба робити з ним певні мінорні маніпуляції: зберегти, скопіювати кудись, а потім ще й дебажити. Це призводить до того, що потенційне пришвидшення роботи з ШІ мінімізується якраз за рахунок всіх додаткових маніпуляцій. Інтерактивність присутня, хоча і недостатня, UI примітивний. Ну і відверто — такий підхід мертвий.
Отже, основна проблема в тому, що не спеціалізовані на прототипуванні ШІ інструменти не візуалізують те, що вони генерують. В цьому випадку маються на увазі продукти, а не моделі ШІ.
Підхід другий — використання спеціальних агентів для генерації прототипів
Що це за агенти і де їх знайти?
Це різноманітні застосунки, які створені для генерації прототипів. Або інструменти дизайнерів, які мають вбудовані AI-функції. Варто пошукати на наступних ресурсах (це стосується не тільки агентів для прототипів, а інструментів для майже будь-яких AI-кейсів):
Подібних сервісів вже не мало і буде ставати тільки більше, всіх не перепробуєш і не перелічиш. Тому одразу попрошу, якщо маєте цікаві знахідки з подібними інструментами і лайфхаки з їх використання — додавайте в коментарі.
Недоліком таких агентів є крайнощі. Такі інструменти або занадто прості або, навпаки, занадто складні. В першому випадку результати будуть такими, що ви швиденько закриєте вкладку браузера і спробуєте забути те, що побачили. В другому — це ще +1 не найпростіший інструмент, з яким вам доведеться бавитись. І це може бути важливим агрументом. Але результат в більшості випадків чудовий.
Хоча варто зауважити, що такі інструменти повноцінно себе розкриють в руках дизайнерів. Ті, хто створюють примітивніші прототипи, будуть ніби в хрестики-нолики на плейстейшн 5 грати.
До речі, один з таких інстурментів UIZARD вміє генерувати мокапи.
З переваг — значна кількість опцій для генерації прототипів, генерація компонентів, які можна редагувати, публікування прототипів (Референс на згенерований прототип. Ну і AI можна спробувати в безкоштовній версії. З недоліків — не найлегший інтерфейс, відсутність інтерактивізації (може, я не знайшов).
Ось один з прикладів прототипів з uizard.io. Не найкраще, що може бути, але я багато часу не витрачав.
У подібних застосунків є багато опцій для генерації прототипів. Для прикладу, перелік опцій в uivizard (все на один скрін не помістилось).
Окрім незалежних продуктів варто також шукати плагіни на маркетплейсах типу Miro, Lucidchart, Figma. На них розміщується багато плагінів для цих продуктів, серед яких можуть бути і такі, що підходять для прототипування. В Miro і Lucidchart я таких ще не знайшов (думаю, скоро будуть), але в Figma такі агенти вже є, а маркетплейс, де можна шукати — тут.
Деякі інструменти в Figma я спробував, нічого цікавого не вийшло. Тому посилатись на конкретного агента не буду.
Підхід третій — Anthropic Claude, а саме його фіча Artefacts, яка візуалізує код
Claude — це AI-чат, аналогічний до ChatGPT. Має як свої переваги, так і недоліки. Він вміє візуалізувати код в боковому меню поряд з діалогом.
Чому це рішення працює і досить ефективне в порівнянні з першим підходом?
- Миттєвий перегляд результату.
- Використання React-бібліотек з покращеним UI.
- Клікабельні прототипи.
Звичайно, перші прототипи буде соромно навіть мамі показати (це стосується і першого підходу), але після опанування кейсу його ефективність стає очевидною.
Ось той самий кейс з гугл-таблицями. Скріншот прототипу, згенерованого з Claude.
В цьому випадку UI набагато гарніший, ніж з простим HTML.
Ще приклад з будильником в iOS:
Artefacts генерує не одну сторінку або фічу, а може побудувати флоу користувача з функціональними модулями і сторінками. Іноді підтуплює, але не критично. І так, зі звичайним HTML-кодом це теж можливо. Але скільки у вас є терпіння займатись цими костилями?
Які переваги у Claude?
Простота. Інструмент набагато легше опанувати не дизайнерам в порівнянні з тими інструментами, які наведені в другому. Опрацювання значної кількості контексту — в Claude розмір сессії 200 тисяч токенів. Можете поему написати в чат :).
Інтерактивність прототипів в поєднанні з можливістью опублікувати артефакт. Посилання можна відправити клієнту, менеджеру, команді чи тестувальникам. І нехай бавляться, ніби продукт вже готовий.
З недоліків — це все ж не інструмент дизайнера чи прототипування, функціональності для створення виточненого UI, як у продуктів з другого пункту, тут не знайдеш. До того ж згенерувати всі сторінки і фічі для продукту в рамках одного клікабельного прототипу не вийде (ну хіба що у вас дуже маленький застосунок).
Ось приклади опублікованих прототипів з доступом за URL:
Спробувати артефакти від Claude можна і в безплатній версії. Але щоб робити багато прототипів все ж доведеться купити платну підписку.
Такий підхід я використовую на проєкті. Він заощаджує час мені і дизайнеру (хоча іноді вона про це і не здогадується, бо навіть не знає про певний функціонал). Команда може поклікати інтерфейс, задати запитання, оцінити складність. Ну і це відкриває двері до кейсу реверс-інжинірінгу, про який напишу в окремій статті.
Варто розуміти, що з побудовою комплексних флоу можуть виникати складнощі. Але все буде ставати тільки краще.
Як прототипувати ефективніше
Для ефективного виконання кейсу варто розглянути прототипування з точки зору не лише генерації коду прототипу чи UI-компонентів, але й підготовки самої активності. Тобто потрібен контекст — що генерувати.
Ми можемо задати цей контекст у промпті як довільний текст, транскрипцію дзвінка або просто скопіювавши опис для функціональності з якогось документу. Але один з методів вартий додаткової уваги, тому що може економити багато часу — контекст у вигляді картинки (наприклад, у visily.ai і uivizard.io є окрема фіча генерації прототипів за картинками, а в Claude це робиться простим підвантаженням файлу).
Зробіть скріншот системи, ШІ-інструмент використає його як референс — це значна економія часу, не треба писати багато тексту. Computer vision чудесно справляється. У такий спосіб ви можете ефективно домальовувати функціональність до існуючого інтерфейсу замість того, щоб створювати його з нуля.
Приклад запиту зі скріншотами в Claude:
За аналогією зі скріншотом вище, в visily.ai я відправив скріншот будильника, і отримав:
А тут uivizard.io відтворює будильник:
Використання скріншотів може потребувати ітеративного доопрацювання в один-два промпти, якщо використовуєте не спеціалізовані AI-інструменти, щоб результат був належної якості.
А що, якщо у вас вже існує бібліотека компонентів, або не виходить створити з ШІ щось таке, щоб було гарно? Тут є два підходи:
- Можна скопіювати код компонентів, наприклад, з Figma, і відправити їх в ШІ-інструмент (в промпті чи у файлі).
- Попросити згенерувати набір компонентів.
В обох випадках ШІ зможе використовувати ці компоненти в прототипах як лего. Це вже більш складний, але й більш системний підхід. Зате ви будете отримувати результати максимальної якості, наскільки це можливо.
Приклад генерації теми і компонентів в uizard (хоча набір компонентів цей інструмент так і не надав):
Висновок
Отже, прототипування з ШІ — це кейс, який набуває своєї популярності і має дуже великий потенціал. Раніше розвиток був сповільнений відсутністю спеціалізованих інструментів ШІ, примітивними рішеннями, незручністю кейсу. Зараз ситуація кардинально інша, зʼявились інструменти, які можуть створювати якісні прототипи швідко і без страждань для виконавця. А наявність опцій задавання контексту та трюки промптінгу розкриють прототипування по-новому.
P.S. OpenAI натякає, що в ChatGPT теж скоро буде інтерактивність.
Підписуйтеся на Telegram-канал «DOU #tech», щоб не пропустити нові технічні статті
1 коментар
Додати коментар Підписатись на коментаріВідписатись від коментарів