В современном мире скорость разработки продукта играет решающую роль. Однако многие команды сталкиваются с проблемой: нет штатного дизайнера, а итерации макетов затягиваются на недели. В результате страдает качество UX, а время выхода на рынок увеличивается. Решение есть — использовать возможности ChatGPT для генерации идей, текстов и даже структуры дизайн-системы, а Figma для визуализации. В этой подборке я собрал 12 проверенных промтов, которые помогут вам создать прототип за день вместо недели.
Все промты разделены на три категории: базовые (для быстрого старта), продвинутые (для оптимизации процессов) и экспертные (для сложных задач). Каждый промт сопровождается задачей, примером и ожидаемым результатом. Вы сможете адаптировать их под свои нужды, просто скопировав текст в ChatGPT.
Базовые промты
1. Генерация пользовательских сценариев (User Flow)
Задача: Быстро определить ключевые шаги пользователя для нового продукта.
Промт:
"Ты — UX-дизайнер. Составь user flow для [описание продукта] с учётом основных функций: [список функций]. Опиши шаги, возможные точки принятия решений и альтернативные пути. Используй формат: шаг → действие → результат."
Пример результата:
- Шаг 1: Пользователь заходит на главную страницу → видит кнопку «Начать» → кликает.
- Шаг 2: Открывается форма регистрации → заполняет поля → подтверждает email.
...
2. Создание UX-текстов для интерфейса
Задача: Написать понятные и дружелюбные тексты для кнопок, подсказок и ошибок.
Промт:
"Ты — копирайтер с опытом в UX. Напиши тексты для [элемент интерфейса] в [контекст продукта]. Требования: краткость, ясность, дружелюбный тон. Предложи 3 варианта для каждого элемента."
Пример результата:
Для кнопки «Отправить»: «Отправить», «Готово», «Подтвердить».
3. Генерация wireframe-описания для Figma
Задача: Получить текстовое описание макета, которое можно сразу перенести в Figma.
Промт:
"Опиши структуру экрана [название экрана] для [тип продукта]. Укажи расположение элементов: заголовок, кнопки, поля ввода, иконки. Используй термины Figma (фрейм, группа, авто-лейаут)."
Пример результата:
Фрейм 375x812. Верхний блок: заголовок H1 по центру, отступ 16px. Ниже — поле email с плейсхолдером «Введите email». Кнопка «Продолжить» — ширина 100%, высота 48px, скругление 8px.
4. Подбор цветовой схемы и типографики
Задача: Быстро получить рекомендации по цветам и шрифтам, соответствующим бренду.
Промт:
"Предложи цветовую палитру (HEX-коды) и пару шрифтов (заголовочный и текстовый) для [описание бренда, например: эко-стартап, технологичный, дружелюбный]. Объясни выбор."
Пример результата:
Основной цвет: #2E7D32 (зелёный, ассоциируется с природой). Акцент: #FFA000 (оранжевый для кнопок). Шрифты: Montserrat для заголовков, Open Sans для текста.
Продвинутые промты
5. Аудит юзабилити по скриншоту
Задача: Выявить проблемы интерфейса на основе описания или скриншота.
Промт:
"Проанализируй юзабилити экрана [описание экрана или загрузи изображение]. Оцени по эвристикам Нильсена (видимость состояния системы, соответствие реальному миру и т.д.). Дай рекомендации по улучшению."
Пример результата:
Проблема: кнопка «Отправить» неактивна без пояснения. Рекомендация: добавить подсказку о необходимых полях.
6. Создание компонентной библиотеки в Figma
Задача: Сгенерировать список компонентов с состояниями для дизайн-системы.
Промт:
"Ты — дизайнер-системщик. Составь список UI-компонентов для [тип продукта] с указанием состояний (default, hover, active, disabled) и вариантов. Опиши анатомию каждого компонента."
Пример результата:
Кнопка: состояния — default (фон #2196F3), hover (фон #1976D2), active (фон #0D47A1), disabled (фон #E0E0E0). Анатомия: контейнер, текст, иконка (опционально).
7. Генерация микро-копирайтинга для онбординга
Задача: Написать тексты для экранов приветствия и подсказок.
Промт:
"Напиши текст для онбординга в [продукт]. Цель — познакомить с ключевыми функциями. Формат: заголовок + 2-3 предложения + CTA. Тон: дружелюбный, но профессиональный."
Пример результата:
«Добро пожаловать в TaskMaster! Управляйте проектами легко: создавайте задачи, назначайте исполнителей и отслеживайте прогресс. Начните с создания первой задачи.»
8. Адаптация макета под мобильные устройства
Задача: Получить рекомендации по адаптивности.
Промт:
"Предложи, как адаптировать экран [описание] для мобильных устройств. Укажи изменения в расположении элементов, размерах шрифтов и отступах. Используй брейкпоинты 375px, 768px, 1024px."
Пример результата:
На мобильных: заголовок уменьшить до 24px, кнопки сделать полноширинными, скрыть второстепенные иконки в бургер-меню.
Экспертные промты
9. Генерация дизайн-системы с токенами
Задача: Создать основу дизайн-системы с переменными.
Промт:
"Разработай дизайн-токены для [продукт]: цвета, типографика, отступы, тени. Представь в формате JSON, совместимом с Figma Tokens Studio."
Пример результата:
{
"color": {
"primary": { "value": "#2196F3" },
"secondary": { "value": "#FFC107" }
},
"spacing": {
"small": { "value": "8px" },
"medium": { "value": "16px" }
}
}
10. Юзабилити-тестирование: сценарии и вопросы
Задача: Подготовить план юзабилити-тестирования.
Промт:
"Составь сценарий юзабилити-теста для [продукт]. Включи 5 задач, вопросы для участников и метрики (время выполнения, количество ошибок)."
Пример результата:
Задача 1: Найдите, как добавить товар в корзину. Вопрос: «Что вы ожидали увидеть?» Метрики: время — до 30 сек, ошибки — не более 1.
11. Генерация A/B тестов для интерфейса
Задача: Предложить гипотезы для A/B тестирования элементов.
Промт:
"Предложи 3 гипотезы для A/B теста кнопки CTA на [экран]. Опиши, что меняем, какую метрику отслеживаем и какой результат ожидаем."
Пример результата:
Гипотеза 1: Изменение цвета кнопки с синего на зелёный увеличит конверсию на 5%. Метрика: CTR.
12. Автоматизация документации дизайн-системы
Задача: Сгенерировать описание компонентов для документации.
Промт:
"Напиши описание для компонента [название] в дизайн-системе. Включи: назначение, анатомию, состояния, правила использования. Формат — Markdown."
Пример результата:
Компонент: Button
Назначение: для действий пользователя.
Анатомия: контейнер, текст, иконка (опционально).
Состояния: default, hover, active, disabled.
Правила: не использовать более двух кнопок рядом.
Заключение
Использование этих промтов позволит вам значительно ускорить процесс прототипирования и улучшить качество UX даже без штатного дизайнера. Помните, что ChatGPT — это инструмент, который дополняет ваши навыки, а не заменяет их полностью. Экспериментируйте, комбинируйте промты и адаптируйте их под свои задачи. Удачи в создании удобных интерфейсов!
Источники:
- Официальная документация Figma: https://www.figma.com/developers
- Эвристики Нильсена: https://www.nngroup.com/articles/ten-usability-heuristics/
- Руководство по дизайн-системам: https://www.designsystems.com/
Комментарии