Представьте: вы разработчик или продакт, а дизайнера в команде нет. Нужно быстро собрать интерфейс, который не стыдно показать пользователям. На помощь приходят большие языковые модели (LLM). Но чтобы получить от них толк, нужны правильные промты — чёткие инструкции, которые превращают ChatGPT или Claude в опытного UI/UX-ассистента.
В этой подборке — 12 промтов, проверенных на реальных проектах. Они покрывают весь процесс: от генерации дизайн-токенов до подготовки спецификаций для разработчиков. Каждый промт сопровождается примером запроса и разбором, для какой задачи он подходит. Вы сможете использовать их в паре с Figma или любым другим инструментом.
Важно: LLM не заменяет дизайнера, но снимает рутину и помогает избежать типичных ошибок. Главное — правильно формулировать запрос.
Промты для генерации дизайн-токенов и палитр
1. Генерация цветовой палитры с проверкой контраста
Задача: Создать палитру, соответствующую бренду и стандартам доступности.
Промт:
Ты — UI-дизайнер. Сгенерируй цветовую палитру для [описание бренда] в формате JSON с ключами: primary, secondary, background, surface, error, success, warning, text-primary, text-secondary. Для каждого цвета укажи HEX и проверь контраст с фоном по WCAG 2.1 (минимум AA). Если контраст ниже 4.5:1 для текста, предложи альтернативу.
Пример результата:
{
"primary": "#2563EB",
"background": "#FFFFFF",
"text-primary": "#1F2937",
...
}
2. Создание типографической шкалы
Задача: Определить размеры шрифтов и межстрочные интервалы для адаптивного дизайна.
Промт:
Сгенерируй типографическую шкалу для веб-приложения с базовым размером 16px, шагом 1.25 (major third). Учти мобильные и десктопные размеры. Выведи в виде CSS-переменных с комментариями, где какой размер использовать.
Пример результата:
:root {
--font-size-xs: 0.75rem; /* 12px, подписи */
--font-size-sm: 0.875rem; /* 14px, второстепенный текст */
--font-size-base: 1rem; /* 16px, основной */
...
}
Промты для аудита компонентов и Auto Layout
3. Аудит компонентов на консистентность
Задача: Найти различия в стилях однотипных компонентов.
Промт:
Проанализируй список компонентов (приведён ниже) и найди несоответствия: разные радиусы скругления, отступы, цвета. Выведи таблицу с компонентом, свойством, текущим значением и рекомендуемым.
Пример результата: таблица с рекомендациями по унификации.
4. Генерация Auto Layout для карточек
Задача: Автоматически рассчитать отступы и размеры для адаптивных карточек.
Промт:
Создай спецификацию Auto Layout для карточки товара: укажи направление, отступы между элементами, внутренние отступы, поведение при изменении ширины. Используй токены из нашей дизайн-системы: spacing-xs=4px, spacing-sm=8px, spacing-md=16px.
Пример результата: описание с числовыми значениями, которое можно сразу применить в Figma.
Промты для текстов интерфейса (UX-writing)
5. Генерация микротекстов для кнопок и полей
Задача: Сделать интерфейс понятным без дополнительных пояснений.
Промт:
Напиши текст для кнопок и полей формы регистрации (email, пароль, подтверждение). Тон: дружелюбный, но профессиональный. Избегай технического жаргона. Предложи 2 варианта для каждой кнопки.
Пример результата: «Создать аккаунт» / «Зарегистрироваться», подсказки для полей.
6. Проверка текстов на ясность и краткость
Задача: Улучшить существующие тексты.
Промт:
Проверь тексты интерфейса (список ниже) на ясность, краткость и соответствие тону бренда. Предложи исправления, объясни, почему текущий вариант хуже.
Пример результата: список правок с обоснованием.
Промты для проверки контраста и доступности
7. Проверка контраста цветов
Задача: Убедиться, что интерфейс доступен для людей с нарушениями зрения.
Промт:
Проверь контраст следующих пар цветов (текст/фон) по стандарту WCAG 2.1. Выведи коэффициент контраста и вердикт: проходит ли для обычного текста (AA), для крупного текста (AA), для AAA. Если не проходит — предложи ближайший подходящий цвет.
Пример результата: таблица с коэффициентами и рекомендациями.
8. Генерация alt-текстов для изображений
Задача: Сделать контент доступным для скринридеров.
Промт:
Напиши alt-тексты для изображений на странице (описание изображений ниже). Тексты должны быть краткими (до 120 символов), информативными и не начинаться с «изображение» или «картинка».
Пример результата: готовые alt-тексты.
Промты для подготовки спецификаций и handoff
9. Генерация спецификации компонента
Задача: Передать разработчику точные параметры.
Промт:
Составь спецификацию для компонента «Кнопка» в формате Markdown: состояния (default, hover, active, disabled), размеры, отступы, цвета, типографика, поведение при нажатии. Используй токены дизайн-системы.
Пример результата: подробная спецификация, которую можно приложить к задаче в Jira.
10. Чек-лист для передачи макета в разработку
Задача: Избежать типичных ошибок при handoff.
Промт:
Создай чек-лист для проверки макета перед передачей разработчику. Включи пункты: все ли состояния проработаны, указаны ли отступы, есть ли адаптивные версии, проверена ли доступность. Выведи в виде списка с краткими пояснениями.
Пример результата: чек-лист из 10–15 пунктов.
11. Генерация CSS-переменных из токенов
Задача: Автоматически создать CSS на основе дизайн-токенов.
Промт:
Преобразуй JSON с дизайн-токенами (приведён ниже) в CSS-переменные. Сгруппируй по категориям: цвета, типографика, отступы. Добавь комментарии.
Пример результата: готовый CSS-файл.
12. Написание документации для дизайн-системы
Задача: Создать руководство по использованию компонентов.
Промт:
Напиши раздел документации для дизайн-системы, описывающий компонент «Модальное окно». Включи: назначение, анатомию, правила использования, примеры кода (HTML/CSS), рекомендации по доступности.
Пример результата: структурированный текст с примерами.
Как внедрить промты в рабочий процесс
Эти промты можно использовать по отдельности или объединять в цепочки. Например, сначала сгенерировать палитру, затем проверить контраст, потом создать компоненты и спецификации. Главное — давать LLM контекст: описывайте проект, целевую аудиторию, ограничения.
Помните: LLM может ошибаться, поэтому проверяйте результаты, особенно числовые значения. Используйте промты как черновик, который ускоряет работу, но требует финальной проверки человеком.
Начните с одного-двух промтов, которые решают вашу самую болезненную задачу. Постепенно расширяйте набор. Со временем вы выработаете свои формулировки, которые будут давать наилучший результат именно для вашего проекта.
Дизайн-система без дизайнера — реальность. С правильными промтами вы сможете создать интерфейс, который будет удобным, доступным и красивым.