Як прототипувати зі штучним інтелектом

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

Мене звати Микита Мельник, я займаюсь бізнес-аналізом і продакт оунершипом. Фокусуюся на впровадженні генеративного штучного інтелекту в робочі процеси, розвитком ШІ у бізнес-аналітиків і РО, розробці продуктів на основі ГШІ. А також консультую проєкти щодо впровадження технології.

У цьому матеріалі розкажу про прототипування за допомогою штучного інтелекту.

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

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

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

В залежності від рівня деталізації і інтерактивності розрізняють декілька видів прототипів. Найпростіший, як курка лапою, — скетч. Досить розповсюджена техніка, яка робиться від руки олівцем чи ручкою (та хоч паличкою на піску). Класних скетчів з ШІ я ще не бачив.

Далі wireframe — більш структуровані прототипи, які будуються вже за допомогою інструментів прототипування. Вони зонують інтерфейс і можуть бути дуже детальними. 2Мокап — це готовий або майже готовий інтерфейс вашого застосунку: пропрацьовані компоненти, шрифти, іконки. Виглядає так, що його можна сміливо відправляти на прод.

Хоча дехто виділяє і прототип як окремий вид прототипу, але зараз не про це.

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

Найефективніший підхід до протипування з ШІ

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

Підхід перший: крізь біль і сльози (застарілий, незручний і неефективний підхід)

ШІ генерує або текст або зображення. Останній варіант зовсім не підходить для прототипування, бо це ілюстрації. Виправляти щось у них немає сенсу, а сама растрова графіка не юзабельна. Тоді залишається єдиний варіант — текст. Тобто, генерувати прототипи в форматі тексту? Ну, не зовсім. Генерувати код для прототипів. Як це робити?

Використовувати мови розмітки — HTML, XML, SVG. Цей підхід міг бути актуальним рік назад, коли ще не існувало спеціалізованих ШІ-інструментів для генерації прототипів. Тобто просити ШІ-інструменти візуалізувати контексти у вигляді коду. Такий код можна відкрити за допомогою браузера або інструментів типу draw.io, Lucidchart, Visio та інших подібних.

Наприклад, візьмемо еталонний скріншот гугл-документів, і згенеруємо на основі нього прототип в HTML.

І результат:

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

Які переваги та недоліки?

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

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

Підхід другий — використання спеціальних агентів для генерації прототипів

Що це за агенти і де їх знайти?

Це різноманітні застосунки, які створені для генерації прототипів. Або інструменти дизайнерів, які мають вбудовані AI-функції. Варто пошукати на наступних ресурсах (це стосується не тільки агентів для прототипів, а інструментів для майже будь-яких AI-кейсів):

• https://theresanaiforthat.com
• www.producthunt.com/categories/ai-characters

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

Недоліком таких агентів є крайнощі. Такі інструменти або занадто прості або, навпаки, занадто складні. В першому випадку результати будуть такими, що ви швиденько закриєте вкладку браузера і спробуєте забути те, що побачили. В другому — це ще +1 не найпростіший інструмент, з яким вам доведеться бавитись. І це може бути важливим агрументом. Але результат в більшості випадків чудовий.

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

До речі, один з таких інстурментів UIZARD вміє генерувати мокапи.

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

Ось один з прикладів прототипів з uizard.io. Не найкраще, що може бути, але я багато часу не витрачав.

У подібних застосунків є багато опцій для генерації прототипів. Для прикладу, перелік опцій в uivizard (все на один скрін не помістилось).

Окрім незалежних продуктів варто також шукати плагіни на маркетплейсах типу Miro, Lucidchart, Figma. На них розміщується багато плагінів для цих продуктів, серед яких можуть бути і такі, що підходять для прототипування. В Miro і Lucidchart я таких ще не знайшов (думаю, скоро будуть), але в Figma такі агенти вже є, а маркетплейс, де можна шукати — тут.

Деякі інструменти в Figma я спробував, нічого цікавого не вийшло. Тому посилатись на конкретного агента не буду.

Підхід третій — Anthropic Claude, а саме його фіча Artefacts, яка візуалізує код

Claude — це AI-чат, аналогічний до ChatGPT. Має як свої переваги, так і недоліки. Він вміє візуалізувати код в боковому меню поряд з діалогом.

Чому це рішення працює і досить ефективне в порівнянні з першим підходом?

1. Миттєвий перегляд результату.
2. Використання React-бібліотек з покращеним UI.
3. Клікабельні прототипи.

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

Ось той самий кейс з гугл-таблицями. Скріншот прототипу, згенерованого з Claude.

В цьому випадку UI набагато гарніший, ніж з простим HTML.

Ще приклад з будильником в iOS: