Проектування за допомогою штучного інтелекту найкраще працює як цикл: ви описуєте, штучний інтелект створює проекти, ви оцінюєте та вдосконалюєте, і ви повторюєте. ШІ швидко створює варіанти. Ви несете відповідальність за вибір правильного.
Крок 1: напишіть бриф. Опишіть користувача, завдання, вміст і будь-які обмеження. «Екран налаштувань для програми бюджетування, для людей на телефонах, із розділами для облікового запису, сповіщень і конфіденційності, з використанням наших існуючих компонентів» дасть набагато кращий результат, ніж «створити сторінку налаштувань».
Крок 2: створіть чернетки. Інструменти підказки до інтерфейсу користувача, такі як Google Stitch або помічник зі штучним інтелектом UXPin, перетворюють опис або ескіз на екрани. Попросіть кілька варіантів і порівняйте їх, а не приймайте перший.
Крок 3: вдосконалення в інструменті дизайну. Перенесіть найкращу чернетку в Figma, Penpot або інший редактор. Виправте ієрархію, інтервали та копіювання та створіть стани, які штучний інтелект зазвичай пропускає: завантаження, пусто, помилка та вимкнено.
Крок 4: підключіться до коду. Інструменти кодування AI, такі як Claude Code і Cursor, можуть створити інтерфейс. Результати набагато кращі, коли вони можуть читати ваш дизайн через сервер MCP. У Figma і Penpot є один. Для інтерактивних і анімованих частин ExodeUI, який ми робимо, має сервер MCP, який дозволяє штучному інтелекту створювати та редагувати анімації зі станами та фізикою пружини з підказок простою мовою, які зберігаються у відкритому файлі .exode, який відтворює ваша програма.
Крок 5: перевірте перед відправкою. Перевірте використання клавіатури та програми зчитування з екрана, контрастність, зменшення руху, малий і великий екран, а також довгий або перекладений текст. Ставтеся до результатів штучного інтелекту як до роботи швидкого, але нового товариша по команді: корисно, але завжди перевіряється.