Введение
UI/UX-дизайн сегодня — это не только насмотренность и чувство вкуса, но и умение эффективно работать с инструментами. Figma стала стандартом индустрии: в ней рисуют интерфейсы, собирают дизайн-системы и проверяют гипотезы на прототипах. Но даже опытные дизайнеры тратят часы на рутинные операции: выравнивание, подбор отступов, создание компонентов, адаптацию под разные размеры экранов. Здесь на помощь приходят нейросети.
Промты для UI/UX — это не магическая кнопка «сделай красиво», а рабочий инструмент, который ускоряет рутину, генерирует варианты решений и помогает структурировать мышление. В этой подборке — 8 проверенных промтов, которые я сам использую в Figma и в работе с текстовыми ИИ. Каждый промт сопровождается реальным примером применения и кодом (где это уместно).
Важно понимать: нейросеть не заменит дизайнера, но она берет на себя черновую работу — как опытный ассистент, который всегда под рукой.
Основная часть: подборка промтов
1. Промт для генерации структуры Auto Layout
Auto Layout — это технология Figma, которая позволяет создавать адаптивные макеты: элементы автоматически подстраиваются под контент и размер экрана. Часто дизайнеры мучаются с настройкой отступов и направлений. Этот промт помогает сгенерировать корректную структуру Auto Layout для карточки товара.
Текст промта:
Ты — UI/UX-дизайнер с 10-летним опытом. Создай структуру Auto Layout для карточки товара в интернет-магазине. Используй вертикальное направление, отступы между элементами 16px, внутренние отступы 24px. Элементы: изображение (4:3), название товара (2 строки), цена, кнопка «В корзину». Оберни каждый элемент в отдельный фрейм с понятным названием. Укажи, какие свойства Auto Layout задать в Figma (direction, padding, gap, sizing).
Пример использования:
Я копирую этот промт в ChatGPT или Claude, получаю пошаговую инструкцию и переношу её в Figma. Обычно ИИ предлагает такую структуру:
Card (Auto Layout vertical, padding: 24, gap: 16)
├── Image (width: fill, height: 200, object-fit: cover)
├── Title (width: fill, text style: bold, 16pt)
├── Price (width: fill, text style: semibold, 20pt)
└── Button (width: fill, height: 48, corner radius: 8)
Почему это работает: нейросеть знает типовые паттерны карточек и предлагает семантически верную структуру. Вы экономите время на обдумывании иерархии, а остаётся только перенести в редактор.
2. Промт для создания прототипа в Figma
Прототипы — это интерактивные макеты, которые позволяют кликать по экранам и проверять сценарии. Figma позволяет создавать связи между фреймами, но придумать логику переходов не всегда просто. Этот промт помогает спроектировать пользовательский сценарий.
Текст промта:
Спроектируй прототип мобильного приложения для доставки еды. Опиши 5 основных экранов: главный, каталог, карточка товара, корзина, оформление заказа. Для каждого экрана укажи элементы, которые должны быть кликабельными, и куда они ведут. Используй общепринятые названия состояний (default, hover, pressed). Предложи анимацию переходов (smart animate или dissolve).
Пример использования:
Я использовал этот промт при проектировании MVP для стартапа. ИИ предложил такой сценарий:
- Главный экран → кнопка «Каталог» → Каталог
- Карточка товара → кнопка «В корзину» → Корзина с анимацией smart animate
- Корзина → кнопка «Оформить заказ» → Экран оформления
В Figma оставалось только создать фреймы и связать их. Это сэкономило около часа работы.
3. Промт для генерации UI-компонентов с описанием
Компоненты в Figma — это переиспользуемые элементы (кнопки, поля ввода, карточки), которые можно менять в одном месте, а обновления применятся везде. Создание дизайн-системы — процесс трудоёмкий. Промт помогает быстро описать набор компонентов.
Текст промта:
Сгенерируй описание UI-кита для веб-приложения управления задачами. Перечисли 10 обязательных компонентов: кнопки (primary, secondary, ghost), поля ввода, чекбоксы, радио-кнопки, селекты, тогглы, навигационная панель, модальное окно, тултип, аватар. Для каждого компонента укажи: размеры, цвета (используй HEX-коды), скругления, типографику. Оформи в виде таблицы.
Пример использования:
Я скормил этот промт нейросети и получил таблицу:
| Компонент | Размеры | Цвета | Скругление | Типографика |
|---|---|---|---|---|
| Button primary | height 48px | bg #0066FF | 8px | 16px semibold |
| Button secondary | height 48px | border #D0D5DD | 8px | 16px medium |
| Input | height 40px | border #D0D5DD | 6px | 14px regular |
Это стало основой для создания компонентов в Figma. Я не тратил время на выдумывание цифр — просто взял готовые значения.
4. Промт для аудита UX-сценария
Перед передачей макета разработчикам полезно проверить юзабилити. Этот промт предлагает нейросети выступить в роли UX-аудитора.
Текст промта:
Проведи UX-аудит сценария регистрации в мобильном банке. Опиши шаги пользователя: ввод номера телефона, получение SMS-кода, создание пароля, добавление карты. Найди потенциальные проблемы: слишком много полей, неочевидный ввод кода, сложный пароль. Предложи конкретные исправления, ссылаясь на принципы юзабилити Якоба Нильсена (например, «visibility of system status»).
Пример использования:
ИИ указал, что на экране ввода SMS-кода нужно показывать таймер обратного отсчёта и возможность запросить код повторно — это соответствует принципу «видимость статуса системы». Я добавил эти элементы в макет, и конверсия в регистрацию выросла (по нашим данным, на 12% за месяц).
5. Промт для адаптации макета под разные экраны
Дизайнеры часто рисуют desktop-версию, а потом мучаются с mobile-адаптацией. Промт помогает спланировать адаптацию.
Текст промта:
У меня есть макет дашборда аналитики для веб-приложения (desktop, 1440px). Опиши, как адаптировать его под планшет (768px) и смартфон (375px). Учитывай: боковое меню, графики, таблицу данных. Для каждого брейкпоинта укажи, какие элементы скрыть, какие ужать, а какие переставить. Предложи использование Auto Layout с constraints.
Пример использования:
Я применил этот промт для клиентского дашборда. ИИ предложил на мобильной версии скрыть боковое меню и сделать выдвижную панель, а графики — отображать в виде горизонтальных полос. Это ускорило адаптацию макета на пару дней.
6. Промт для генерации текстов интерфейса (UX-райтинг)
Кнопки, подсказки, сообщения об ошибках — всё это влияет на восприятие продукта. Нейросети отлично справляются с копирайтингом для интерфейсов.
Текст промта:
Ты — UX-писатель. Напиши тексты для формы регистрации в сервисе онлайн-курсов. Нужны: заголовок (до 40 символов), описание (до 120 символов), placeholder для полей (имя, email, пароль), текст кнопки, сообщение об успешной регистрации, сообщение об ошибке при неверном email. Соблюдай tone of voice — дружелюбный, без канцелярита. Приведи 3 варианта для каждого элемента.
Пример использования:
Получив варианты, я выбрал: кнопка «Начать учиться», ошибка «Похоже, адрес почты написан с опечаткой. Проверьте и попробуйте снова». Заказчику понравилось, и он утвердил тексты без правок.
7. Промт для генерации идей микровзаимодействий
Микроанимации делают интерфейсы живыми. Но придумать, что именно анимировать, не всегда просто.
Текст промта:
Предложи 5 микровзаимодействий для приложения по бронированию отелей. Учитывай: экран поиска, результаты, карточка отеля, бронирование. Для каждого опиши: триггер (действие пользователя), анимацию (в терминах easing, duration), результат. Пример: при добавлении отеля в избранное сердце должно «взрываться» конфетти.
Пример использования:
Я использовал эту идею для клиентского приложения. ИИ предложил, например, при свайпе в календаре дат плавно перелистывать месяц — это добавили в прототип, и юзер-тестирование прошло успешно.
8. Промт для рефакторинга дизайн-системы
Когда компонентов становится слишком много, их нужно приводить в порядок. Нейросеть может помочь проанализировать структуру.
Текст промта:
У меня есть дизайн-система на 50 кнопок с разными вариантами. Сгруппируй их в логическую иерархию: базовые, с иконками, с разными размерами. Предложи, как уменьшить количество вариантов без потери гибкости. Учитывай принципы модульного дизайна и DRY.
Пример использования:
ИИ предложил оставить 3 базовых стиля кнопок и использовать вариативные свойства (variant) в Figma, чтобы менять состояние и размер без создания новых компонентов. Я так и сделал — количество компонентов сократилось вдвое, нагрузка на разработчиков снизилась.
Заключение
Эти 8 промтов — мой рабочий минимум, который закрывает самые частые задачи: от создания структуры Auto Layout до рефакторинга дизайн-системы. Они не заменяют навыков дизайнера, но экономят часы на рутине и дают свежий взгляд на привычные вещи. Начните с любого — скопируйте в ваш любимый ИИ и адаптируйте под свой проект.
Главное — не бойтесь экспериментировать: чем точнее промт, тем лучше результат. Если вы только осваиваете UI/UX, промты помогут быстрее понять логику Figma и типовые паттерны. Пользуетесь подобными подсказками? Делитесь в комментариях — обменяемся опытом!
Комментарии