Введение
В мире UI/UX дизайна 2026 года искусственный интеллект стал незаменимым помощником. Но не все промты одинаково полезны. Эта статья — не просто список, а структурированная подборка из 10 промтов, которые я систематизировал по трём уровням: базовый, продвинутый и экспертный. Каждый промт сопровождается задачей, текстом самого запроса и примером результата. Вы узнаете, как с помощью нейросетей ускорить работу в Figma, создать прототипы и спроектировать компоненты с Auto Layout.
Базовые промты (для новичков)
1. Генерация макета лендинга
Задача: Быстро получить структуру лендинга для интернет-магазина.
Промт: «Создай структуру лендинга для интернет-магазина экотоваров. Включи: хедер с логотипом и меню, блок героя с заголовком и CTA-кнопкой, секцию преимуществ с тремя карточками, каталог товаров с 4 товарами, отзывы (карусель), футер с контактами. Опиши расположение элементов и их размеры в Figma.»
Пример результата:
- Хедер: 1440x80 px, логотип слева, меню справа.
- Герой: 1440x600 px, заголовок слева, изображение справа.
- Преимущества: 3 карточки по 400x200 px с иконками.
- Каталог: сетка 2x2, каждая карточка 300x400 px.
- Отзывы: горизонтальная карусель с 3 слайдами.
- Футер: 1440x200 px, три колонки.
2. Создание UI-кита для Figma
Задача: Сформировать минимальный набор компонентов для мобильного приложения.
Промт: «Сгенерируй UI-кит для мобильного приложения для доставки еды. Включи: кнопки (primary, secondary, disabled), поля ввода, карточки товаров, табы, пагинацию, иконки для корзины и поиска. Для каждого элемента укажи стили: цвет, шрифт, скругления. Формат: таблица с колонками “Компонент”, “Стили”, “Размеры”.»
Пример результата:
| Компонент | Стили | Размеры |
|-----------|-------|---------|
| Primary button | #FF6B35, шрифт Inter 16px, скругление 12px | 320x48 px |
| Secondary button | #FFFFFF, обводка #FF6B35, шрифт Inter 16px | 320x48 px |
| Text input | #F5F5F5, шрифт Inter 14px, скругление 8px | 320x44 px |
3. Прототип онбординга
Задача: Создать последовательность экранов для первого запуска приложения.
Промт: «Разработай прототип онбординга из 4 экранов для приложения по изучению языков. Для каждого экрана: заголовок, описание, иллюстрация (текстовое описание), кнопка “Далее”. Последний экран — кнопка “Начать”. Свяжи экраны через анимацию “слайд влево”.»
Пример результата:
- Экран 1: «Учите слова в игровой форме» → изображение флеш-карточек → кнопка «Далее».
- Экран 2: «Ежедневные задания» → изображение календаря → кнопка «Далее».
- Экран 3: «Общайтесь с носителями» → изображение чата → кнопка «Далее».
- Экран 4: «Начните прямо сейчас» → кнопка «Начать».
Продвинутые промты (для опытных дизайнеров)
4. Auto Layout для адаптивного дизайна
Задача: Спроектировать карточку товара с Auto Layout, которая адаптируется под разные экраны.
Промт: «Создай карточку товара в Figma с использованием Auto Layout. Параметры: ширина карточки — fill, отступы — 16px, направление — вертикальное. Внутри: изображение (фиксированная высота 200px), название (шрифт Inter 18px, weight 600), цена (шрифт Inter 16px, weight 400), кнопка “В корзину” (ширина hug, высота 40px). Опиши, как настроить Auto Layout для резиновой сетки.»
Пример результата:
- Auto Layout: вертикальное выравнивание, padding 16px, spacing 12px.
- Изображение: width fill, height 200px, object-fit cover.
- Название: width fill, text truncate.
- Кнопка: width hug, align right.
- При изменении ширины карточки все элементы перестраиваются автоматически.
5. Создание компонентов с вариантами
Задача: Разработать систему кнопок с разными состояниями.
Промт: «Создай компонент кнопки в Figma с вариантами: default, hover, active, disabled, loading. Для каждого варианта укажи: цвет фона, цвет текста, обводку, скругление. Добавь свойство “size” с вариантами small, medium, large. Используй Auto Layout для внутреннего контента.»
Пример результата:
- Варианты: default (#FF6B35, белый текст), hover (#E55A2B), active (#CC4F26), disabled (#CCCCCC), loading (спиннер вместо текста).
- Размеры: small (padding 8px, шрифт 12px), medium (padding 12px, шрифт 14px), large (padding 16px, шрифт 16px).
- Настройки: компонент имеет свойства variant (enum: default|hover|active|disabled|loading) и size (enum: small|medium|large).
6. Прототип с микроанимациями
Задача: Добавить плавные переходы между экранами.
Промт: «Создай прототип интерфейса корзины в Figma с микроанимациями: при добавлении товара — плавное появление карточки (opacity 0→1, duration 200ms), при удалении — сдвиг вправо и исчезновение (move right 100px + opacity 1→0, duration 300ms). Используй Smart Animate для перехода между состояниями.»
Пример результата:
- Состояние 1: корзина пуста, сообщение «Ваша корзина пуста».
- Состояние 2: добавлен товар, карточка появляется с opacity 0→1.
- Анимация: при клике на «Удалить» карточка сдвигается вправо на 100px и исчезает.
- Время: 200ms для появления, 300ms для удаления.
Экспертные промты (для профессионалов)
7. Дизайн-система с токенами
Задача: Создать структуру дизайн-системы с цветовыми и типографическими токенами.
Промт: «Разработай дизайн-систему для корпоративного веб-приложения. Включи: цветовые токены (primary, secondary, success, warning, error, neutral) с градациями от 50 до 900, типографические токены (h1-h6, body, caption) с размерами, насыщенностью и межстрочным интервалом. Опиши, как связать токены с компонентами в Figma через переменные.»
Пример результата:
- Цвета: primary-500 = #3366FF, primary-100 = #E0E7FF.
- Типографика: h1 = 48px/700/1.2, body = 16px/400/1.5.
- Переменные: в Figma создаются коллекции «Color» и «Text», затем переменные привязываются к стилям слоёв.
- Компоненты: кнопка использует primary-500, заголовок использует h1.
8. Оптимизация Auto Layout для сложных сеток
Задача: Настроить резиновую сетку для дашборда с виджетами.
Промт: «Спроектируй дашборд из 4 виджетов (статистика, график, список задач, календарь) с Auto Layout. Используй вложенные Auto Layout: внешний — горизонтальный с равными отступами, внутренний — вертикальный для каждого виджета. Опиши, как настроить min/max width для виджетов, чтобы они переносились на новую строку при сужении экрана.»
Пример результата:
- Внешний Auto Layout: direction horizontal, wrap, spacing 16px, padding 24px.
- Виджеты: min-width 300px, max-width 600px.
- При ширине экрана < 1200px: два виджета переносятся на вторую строку.
- Внутри виджета: заголовок (hug), контент (fill), кнопка (hug).
9. Генерация SVG-иконок в Figma
Задача: Создать набор иконок с единым стилем.
Промт: «Сгенерируй 5 иконок для интерфейса: дом, поиск, уведомления, настройки, профиль. Стиль: outline, толщина линии 2px, размер 24x24, скругление углов 2px. Для каждой иконки предоставь SVG-код, который можно вставить в Figma через плагин. Опиши, как импортировать SVG и преобразовать в компоненты.»
Пример результата:
- Иконка «Дом»:
- Импорт: перетащить SVG в Figma, затем выделить и нажать «Create Component».
- Совет: использовать плагин «SVG Import» для массовой загрузки.
10. Прототип с логикой состояний
Задача: Создать прототип формы регистрации с валидацией.
Промт: «Разработай прототип формы регистрации в Figma с тремя состояниями: idle, loading, error, success. Для каждого состояния опиши внешний вид полей и кнопки. Добавь взаимодействия: при нажатии «Зарегистрироваться» — покажи спиннер (loading), через 2 секунды — проверка (если поле пустое — error, иначе — success). Используй Smart Animate для перехода.»
Пример результата:
- Idle: все поля пустые, кнопка активна.
- Loading: кнопка меняет текст на спиннер, поля становятся неактивными.
- Error: поле с ошибкой подсвечивается красным, появляется сообщение «Заполните поле».
- Success: зелёная галочка, перенаправление на главную.
- Анимация: duration 200ms, ease-in-out.
Заключение
Эти 10 промтов охватывают ключевые аспекты работы в Figma: от базовых макетов до экспертных дизайн-систем. Используйте их как шаблоны, адаптируя под свои задачи. Помните, что качество результата зависит от точности формулировок — чем конкретнее запрос, тем лучше ответ. Экспериментируйте с параметрами и комбинируйте промты для создания сложных решений. ASI Biont поддерживает подключение к Figma через API — подробнее на asibiont.com/courses. Удачи в проектировании!
Комментарии