Дизайнеры интерфейсов всё чаще используют ChatGPT не только для генерации идей, но и для рутинных задач: аудита доступности, написания микротекстов, создания компонентов дизайн-системы. Однако без чётких промтов модель выдаёт общие ответы, которые приходится переписывать. Эта подборка — результат практического опыта: 12 промтов, которые закрывают полный цикл работы над интерфейсом — от брифа до передачи макета в разработку. Каждый промт содержит задачу, готовую формулировку и пример результата. Вы сможете адаптировать их под свои инструменты и процессы.
Базовые промты: старт и исследование
1. Генерация вопросов для брифа
Задача: Собрать требования к интерфейсу до начала дизайна.
Промт:
Ты — UX-исследователь. Составь список из 10 уточняющих вопросов для заказчика, чтобы понять цели, аудиторию и ограничения проекта. Контекст: [опишите проект]. Вопросы должны быть открытыми и сгруппированы по темам: бизнес-цели, пользователи, функциональность, технические ограничения.
Пример результата: ChatGPT выдаёт вопросы вроде «Какую ключевую проблему пользователей решает продукт?», «Какие устройства и браузеры должны поддерживаться?» и т.д. Это экономит время на встречах и помогает не упустить важные детали.
2. Создание user flow на основе сценария
Задача: Быстро визуализировать путь пользователя.
Промт:
Опиши пошаговый user flow для сценария: [например, регистрация через email]. Учти возможные ошибки и способы их обработки. Представь в виде нумерованного списка с указанием экранов и действий пользователя.
Пример результата: Модель возвращает последовательность: «1. Экран входа → 2. Ввод email → 3. Валидация → 4. Отправка кода → 5. Ввод кода → 6. Успех». Можно сразу переносить в Figma в виде флоу.
3. Генерация микротекстов (UI copy)
Задача: Написать понятные и дружелюбные тексты для интерфейса.
Промт:
Напиши 5 вариантов текста для кнопки [действие] в стиле [тон: дружелюбный, формальный, нейтральный]. Учти, что кнопка находится на экране [контекст].
Пример результата: Для кнопки «Отправить» в форме обратной связи: «Отправить», «Отослать запрос», «Связаться с нами», «Написать нам», «Отправить сообщение». Выбираете подходящий вариант.
Продвинутые промты: дизайн-система и прототипы
4. Описание компонента для дизайн-системы
Задача: Стандартизировать компоненты и их состояния.
Промт:
Опиши компонент [название] для дизайн-системы: анатомию, состояния (default, hover, active, disabled, focus), размеры, отступы и правила использования. Формат — Markdown-таблица.
Пример результата: Таблица с колонками «Свойство», «Значение», «Примечание». Например, для кнопки: высота 40px, радиус 8px, цвет фона #007AFF, отступы 16px. Такой документ можно приложить к Figma-библиотеке.
5. Аудит доступности (a11y) по скриншоту
Задача: Быстро выявить проблемы доступности.
Промт:
Проанализируй описание интерфейса (или приложи скриншот) на соответствие WCAG 2.1 AA. Укажи проблемы с контрастом, размером шрифта, альтернативным текстом и навигацией с клавиатуры. Дай рекомендации.
Пример результата: ChatGPT перечисляет: «Контраст текста #777 на фоне #FFF — 4.5:1, соответствует. Кнопка без alt-текста — добавьте описание». Ссылайтесь на официальные рекомендации W3C (WCAG).
6. Генерация прототипа на основе описания
Задача: Создать основу для интерактивного прототипа.
Промт:
Сгенерируй HTML/CSS для экрана [описание]. Используй flexbox, адаптивную вёрстку и семантические теги. Добавь комментарии с указанием, какие элементы можно заменить на компоненты из дизайн-системы.
Пример результата: Код готового экрана с карточками товаров, который можно открыть в браузере и показать заказчику. Это ускоряет проверку гипотез.
Экспертные промты: сложные сценарии и передача в разработку
7. Создание дизайн-токенов из описания
Задача: Автоматизировать генерацию токенов для темизации.
Промт:
На основе следующих цветов: primary #007AFF, secondary #5856D6, background #FFFFFF, text #000000 — создай JSON-файл с дизайн-токенами в формате Design Tokens Community Group. Добавь оттенки для hover и disabled.
Пример результата: JSON с токенами, который можно импортировать в Figma через плагины (например, Tokens Studio). Это упрощает поддержку тёмной темы.
8. Написание спецификации для разработчика
Задача: Передать макет в разработку без потерь.
Промт:
Составь спецификацию для разработчика по экрану [название]. Опиши структуру, отступы, размеры шрифтов, цвета, поведение при изменении размера окна. Укажи, какие компоненты из дизайн-системы использовать.
Пример результата: Документ в Markdown с таблицами и списками, который можно приложить к задаче в Jira. Разработчик сразу видит все параметры.
9. Генерация иконок в SVG
Задача: Быстро создать недостающие иконки.
Промт:
Сгенерируй SVG-иконку для [действие] в стиле line, размер 24x24, цвет currentColor. Опиши код.
Пример результата: Чистый SVG-код, который можно скопировать в Figma или использовать в коде. Например, иконка «поиск» с лупой.
10. Тестирование текста на понятность
Задача: Упростить сложные формулировки.
Промт:
Перепиши следующий текст для интерфейса так, чтобы его понял пользователь с любым уровнем подготовки: [текст]. Сохрани смысл, но сделай его короче и проще.
Пример результата: Исходный текст «Осуществите аутентификацию» → «Войдите в систему». Это снижает когнитивную нагрузку.
11. Анализ конкурентов по скриншотам
Задача: Выявить паттерны и улучшить свой интерфейс.
Промт:
Проанализируй скриншоты интерфейсов конкурентов (приложите изображения) и выдели общие паттерны в навигации, формах и обратной связи. Предложи, что можно улучшить в нашем продукте.
Пример результата: Список наблюдений: «У конкурентов A и B используется хлебные крошки, у нас нет — добавьте». ChatGPT не заменяет аналитика, но даёт быстрый обзор.
12. Создание чек-листа для юзабилити-тестирования
Задача: Подготовить сценарии для тестирования прототипа.
Промт:
Составь чек-лист из 10 пунктов для юзабилити-тестирования прототипа [описание]. Включи задачи для пользователя и метрики успеха.
Пример результата: Пункты вроде «Пользователь может найти кнопку оформления заказа менее чем за 30 секунд». Это помогает структурировать исследование.
Как внедрить промты в рабочий процесс
Чтобы промты приносили пользу, интегрируйте их в ежедневные задачи. Например, на этапе брифа используйте промт №1, для аудита доступности — №5, для передачи в разработку — №8. Сохраняйте удачные формулировки в командной wiki. Помните, что ChatGPT — ассистент, а не замена дизайнеру: проверяйте факты и адаптируйте результаты под контекст.
Начните с 2–3 промтов, которые закрывают ваши самые частые задачи. Постепенно расширяйте набор. Экспериментируйте с тоном и деталями — модель чувствительна к контексту. Удачи в дизайне!
Комментарии