Промты для дизайна в Figma и не только: как превратить LLM в UI/UX-напарника от вайрфрейма до дизайн-системы
Дизайнеры часто тратят часы на рутину: составление структуры экранов, аудит юзабилити, написание UX-текстов, подготовку макетов к передаче разработчикам. Большие языковые модели (LLM) уже сегодня могут стать полноценным напарником, если правильно формулировать запросы. В этой подборке — проверенные промты, которые я использую в ежедневной работе с Figma и не только. Каждый промт содержит задачу, готовый текст запроса и пример результата. Вы сможете сразу применить их в своем проекте.
1. Генерация пользовательских сценариев (User Flow)
Задача: Быстро набросать путь пользователя для нового функционала.
Промт:
Ты — UX-дизайнер. Составь user flow для [функция]. Опиши шаги, экраны, возможные точки выхода и альтернативные пути. Учти, что пользователь может быть новичком.
Пример результата: Для функции «сброс пароля» LLM предложит шаги: ввод email → отправка письма → переход по ссылке → ввод нового пароля → подтверждение. Укажет ветку «email не найден» и предложит возврат к вводу.
2. Структура экрана и вайрфрейм
Задача: Получить каркас экрана с иерархией элементов.
Промт:
Опиши структуру экрана [название] для мобильного приложения. Выдели заголовок, основной контент, второстепенные действия. Предложи расположение элементов с точки зрения юзабилити.
Пример результата: Для экрана «Профиль» LLM предложит: аватар и имя вверху, затем блок статистики, ниже — настройки и кнопка выхода. Обоснует, почему важные действия должны быть в зоне большого пальца.
3. Аудит юзабилити по скриншоту
Задача: Получить обратную связь по готовому макету.
Промт:
Проанализируй скриншот [описание или загруженное изображение]. Найди потенциальные проблемы юзабилити: контрастность, размер кликабельных областей, логика навигации. Дай рекомендации по улучшению.
Пример результата: LLM может указать на низкий контраст текста, слишком мелкие кнопки, отсутствие явного фокуса. Рекомендует увеличить размер интерактивных элементов до 44x44 px (согласно рекомендациям Apple HIG).
4. Дизайн-система: токены и компоненты
Задача: Создать основу дизайн-системы.
Промт:
Сгенерируй набор дизайн-токенов для [продукт]. Включи цвета (primary, secondary, background, error), типографику (размеры, веса), отступы (4, 8, 16, 24, 32). Опиши правила использования.
Пример результата: LLM выдаст JSON-подобную структуру с токенами, например: color-primary: #0066FF, spacing-md: 16px. Также предложит именование по методологии BEM или Atomic Design.
5. UX-копирайтинг: тексты для кнопок и подсказок
Задача: Написать понятные микрокопирайты.
Промт:
Напиши текст для кнопки [действие] и подсказки к полю [поле]. Учти, что аудитория — [описание]. Текст должен быть кратким и ясным.
Пример результата: Для кнопки «Отправить» LLM может предложить «Отправить заявку» (более конкретно). Для поля «Телефон» — подсказку «Введите номер в формате +7 XXX XXX-XX-XX».
6. Критика макета: вопросы для защиты дизайна
Задача: Подготовиться к презентации макета заказчику.
Промт:
Ты — критик дизайна. Задай 5 вопросов, которые могут возникнуть у стейкхолдеров по этому макету [описание]. Помоги сформулировать ответы.
Пример результата: LLM предложит вопросы: «Почему выбран этот цвет?», «Как обеспечена доступность?», «Как масштабируется на планшеты?» и даст варианты ответов с аргументацией.
7. Подготовка к хендоффу разработчикам
Задача: Составить спецификацию для разработчика.
Промт:
Опиши компонент [название] для передачи в разработку: состояния (default, hover, active, disabled), размеры, отступы, поведение при наведении. Учти адаптивность.
Пример результата: LLM создаст таблицу с состояниями кнопки, указав цвета, границы, тени и анимации. Например: hover — изменение фона на 10% темнее, transition 0.3s ease.
8. Адаптивность: брейкпоинты и поведение сетки
Задача: Спланировать адаптацию макета под разные экраны.
Промт:
Предложи брейкпоинты для [тип сайта] и опиши, как будет меняться сетка и расположение элементов на каждом из них. Учти мобильные устройства, планшеты и десктоп.
Пример результата: LLM порекомендует брейкпоинты 360px, 768px, 1280px, 1440px. Для мобильных — одна колонка, для планшетов — две, для десктопа — три с боковой панелью.
9. Тестирование гипотез: генерация A/B вариантов
Задача: Придумать альтернативные варианты элемента.
Промт:
Предложи 3 варианта дизайна для [элемент] с разными подходами: минимализм, акцент на действии, информативность. Опиши плюсы и минусы каждого.
Пример результата: Для карточки товара LLM предложит: вариант с крупным фото, вариант с акцентом на цену, вариант с подробным описанием. Для каждого укажет, на какую аудиторию ориентирован.
10. Доступность (a11y): проверка контраста и семантики
Задача: Убедиться, что дизайн соответствует WCAG.
Промт:
Проверь цветовую пару [цвет текста] на [цвет фона] на соответствие WCAG 2.1. Укажи уровень (AA, AAA) и дай рекомендации по улучшению.
Пример результата: LLM рассчитает контрастное отношение (например, 3.5:1) и скажет, что для обычного текста это не соответствует AA (нужно 4.5:1). Предложит затемнить фон или осветлить текст.
11. Исследование конкурентов: анализ паттернов
Задача: Быстро собрать референсы и выявить паттерны.
Промт:
Проанализируй типовые паттерны в [отрасль] на основе открытых источников. Какие элементы интерфейса часто используются? Какие можно считать устаревшими?
Пример результата: Для онлайн-банков LLM отметит частые паттерны: нижняя навигация, карточный дизайн, быстрый перевод. Устаревшими назовет скевоморфизм и избыточные тени.
12. Генерация иконок и иллюстраций (описание для дизайнера)
Задача: Сформулировать ТЗ для иллюстратора или AI-генератора.
Промт:
Опиши концепцию иконки для [функция] в стиле [стиль]. Укажи метафору, цвет, размер, уровень детализации.
Пример результата: Для функции «Корзина» LLM предложит метафору тележки, минималистичный стиль, два цвета (основной и акцент), размер 24x24 px.
13. Автоматизация рутины: шаблоны для Figma
Задача: Создать шаблон компонента с помощью текстового описания.
Промт:
Сгенерируй описание компонента [название] для создания в Figma: слои, автолейауты, стили. Используй подход Atomic Design.
Пример результата: LLM опишет структуру кнопки: фрейм с автолейаутом, текстовый слой, иконка (опционально), стили для состояний. Укажет, какие свойства вынести в компонент.
14. Обратная связь по UX-текстам
Задача: Улучшить тексты в интерфейсе.
Промт:
Проверь тексты на экране [описание] на ясность и краткость. Предложи альтернативы, которые снизят когнитивную нагрузку.
Пример результата: LLM заменит «Осуществить вход в систему» на «Войти», «Произвести оплату» на «Оплатить». Объяснит, что глаголы в инфинитиве понятнее.
15. Подготовка дизайн-ревью: чек-лист
Задача: Провести саморевью перед встречей с командой.
Промт:
Составь чек-лист для проверки макета перед дизайн-ревью. Включи пункты по сетке, типографике, отступам, состояниям, доступности.
Пример результата: LLM предложит чек-лист из 10 пунктов: проверить выравнивание по сетке, консистентность отступов, наличие всех состояний кнопок, контрастность, адаптивность и т.д.
Используйте эти промты как отправную точку — адаптируйте под свои задачи и экспериментируйте. Чем точнее вы описываете контекст и ожидания, тем полезнее ответ. Сохраните подборку в закладки и возвращайтесь к ней при каждом новом проекте.
Источники:
- Руководство по промт-инжинирингу OpenAI: https://platform.openai.com/docs/guides/prompt-engineering
- WCAG 2.1: https://www.w3.org/TR/WCAG21/
- Apple Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/
Комментарии