Ця стаття є частиною курсу «Штучний інтелект у Figma: від дослідження до прототипу». У ній розглянемо як створювати промпти для Figma AI.
Якість результату в First Draft і Figma Make напряму залежить від того, як сформульований запит. Розмитий промпт дає випадковий результат і доводиться переписувати його знову і знову. Конкретний промпт дає передбачуваний результат із першого або другого разу. Щоб навчитися писати влучні промпти, варто спочатку зрозуміти, як узагалі мислить мовна модель.
Як мислить модель
Модель не читає текст так, як людина. Вона розбиває його на токени – найменші одиниці обробки: слова, частини слова або окремі символи. Через це абстрактні поняття вона «бачить» розмито і не може зʼєднати їх у чітке значення.
Крім того, модель не має довгострокової памʼяті. Вона працює тільки з тим, що написано зараз. Якщо відкрили новий чат – для неї це чистий аркуш, попередніх промптів вона не памʼятає. Тому критичні інструкції краще ставити на початок або кінець запиту, а кожен промпт обмежувати одним завданням.
Ще один важливий механізм – те, як модель розуміє слова. Вона не сприймає їх буквально, а перетворює їх у вектори і шукає зв'язки між поняттями. «Кава» ближча до «еспресо», ніж до «літака» – і це логічно. Але «сучасний» або «крутий» потрапляє у розмиту зону, де модель не може зробити конкретний вибір. Натомість «мінімалістична SaaS-платформа» або «монохромна палітра з синім акцентом» — це чіткі сигнали, і результат стає передбачуваним.
І якщо промпт перевантажений різнорідними задачами, увага моделі «розмазується», і вона втрачає пріоритети. Результат виходить нестабільним і неповним.
Три типові помилки під час написання промптів
Відсутність контексту. Модель не знає, що у вас в голові. «Зроби дашборд зі статистикою уроків» – запит без відповіді на базові питання: для кого ця сторінка, який стиль, яка мета? Без цього модель здогадується сама – і здогадується неточно.
Абстрактний запит. Слова на кшталт «гарно», «сучасно», «цікаво» — суб'єктивні й інтерпретуються по-різному. «Зроби цікавий дизайн» краще замінити на «мінімалістичний стиль, монохромна палітра, акцентний синій, без тіней» – тут є зона конкретних значень, і модель розуміє запит однозначно.
Забагато задач в одному промпті. Якщо одночасно просити написати текст, вибрати палітру, продумати структуру і визначити логіку кнопок – модель губиться і частину інструкцій ігнорує. Складні запити варто розбивати на етапи: спочатку структура, потім стилізація, потім деталі.
Структура ефективного промту у Figma AI
Figma AI шукає у вашому тексті конкретні сигнали. Чим більше їх є, тим точніший результат. Оптимальна послідовність виглядає так:
- Тип продукту – SaaS, фінтех, маркетплейс, медичний застосунок
- Екран – посадкова сторінка, дашборд, онбординг, каталог
- Ієрархія секцій – які блоки і в якому порядку
- Ключові компоненти – кнопки, картки, списки, навігація
- Логіка верстки – сітка, колонки, поведінка елементів
- Взаємодії – наведення, перемикачі, прокручування (якщо потрібно)
- Стиль і кольори – палітра, типографія, загальний настрій
Як це виглядає на практиці
Порівняємо кілька пар промптів – щоб наочно показати різницю між розмитим запитом і влучним.
Промпт для сторінки з тарифами
❌ «Зроби сучасну сторінку тарифів з трьома планами» – немає структури, немає функціоналу, результат буде рандомним.
✅ «Секція тарифів: три колонки, перемикач між щомісячним і щорічним планом, таблиця порівняння, кнопка під кожним планом» – чітка структура, зрозуміла логіка.
Посадкова сторінка для фінтех продукту
❌ «Зроби сучасну фінтех посадкову сторінку» — занадто розмито, модель здогадуватиметься сама.
✅ «Фінтех посадкова сторінка для настільної версії. Головний екран: заголовок, кнопка і мокап продукту. Секція функцій: три колонки з іконками. Відгуки клієнтів. Тарифи: три плани з перемикачем. Підвал з навігацією і юридичною інформацією» – кожна секція описана, платформа вказана.
Сторінка з аналітичною панеллю
❌ «Сучасна, інноваційна, візуально вражаюча SaaS-панель» – самі прикметники, без конкретики.
✅ «SaaS аналітична панель для настільної версії. Ліва бічна навігація з іконками і підписами. Верхнє меню: пошук і аватар. Основна зона: чотири KPI-картки в ряд, нижче – два великі графіки поруч. Сіткова структура» – є розміщення, компоненти, логіка.
Тож коли пишете промпт – ви не просите намалювати дизайн. Ви задаєте архітектуру. Якщо структура нечітка у вас в голові, вона буде нечіткою і в результаті. Описуйте тип продукту, екран і конкретні елементи – не враження, яке інтерфейс має справляти. Чим чіткіший запит, тим менше ітерацій потрібно для отримання потрібного результату.
