Дизайнеры всё чаще используют LLM не для генерации картинок, а для рутины: собрать токены, проверить контраст, описать компонент, составить handoff. Но модели не видят ваш макет и путают пиксели с процентами. В этой подборке — 10 промтов, которые реально экономят время, с примерами входа и выхода и честным разбором, где LLM ошибается.
Каждый промт — это диалог, а не магия. Чем точнее вы опишете контекст (платформа, брейкпоинты, ограничения), тем полезнее ответ. Мы собрали промты по трём уровням: базовые (для быстрого старта), продвинутые (с анализом и критикой) и экспертные (для сложных задач вроде аудита доступности или генерации спецификаций). Все примеры проверены на ChatGPT (GPT-4) и Claude 3.5 Sonnet, но подход работает и с другими моделями.
Базовые промты: токены и простая критика
1. Генерация палитры и типографики для дизайн-системы
Задача: быстро получить набор цветовых и типографических токенов, которые можно перенести в Figma Variables.
Промт:
Ты — UI-дизайнер. Сгенерируй палитру для дизайн-системы мобильного приложения (iOS/Android). Нужны:
- 5 основных цветов (primary, secondary, success, warning, error) с оттенками от 50 до 900 (как в Tailwind)
- 3 нейтральных цвета (background, surface, border)
- типографическая шкала: заголовки H1-H3, body, caption — с размерами в px и line-height
Формат вывода: JSON с полями name, value, type (color/font).
Пример результата:
{
"colors": {
"primary": { "50": "#E3F2FD", "100": "#BBDEFB", "500": "#2196F3", "900": "#0D47A1" },
"neutral": { "background": "#FFFFFF", "surface": "#F5F5F5", "border": "#E0E0E0" }
},
"typography": {
"h1": { "size": 32, "lineHeight": 40, "weight": 700 },
"body": { "size": 16, "lineHeight": 24, "weight": 400 }
}
}
Что проверить: модель может выдать невалидные HEX (например, #FFF вместо #FFFFFF) или несогласованные оттенки. Всегда проверяйте контраст между текстом и фоном — об этом ниже.
2. Критика иерархии и сетки по скриншоту (текстовое описание)
Задача: получить быстрый фидбек по макету, даже если модель не видит картинку.
Промт:
Ты — UX-дизайнер. Опиши, как улучшить иерархию и сетку на экране личного кабинета.
Вот текстовое описание: экран 375x812, три блока — профиль (аватар, имя, email), статистика (три карточки в ряд), список последних действий (5 строк).
Шрифт: заголовки 24px, текст 14px. Отступы: 16px по краям, 8px между блоками.
Что можно улучшить? Дай 3 конкретных совета с обоснованием.
Пример результата:
- Увеличьте отступ между блоками до 24px — сейчас 8px создаёт ощущение слипшихся секций, особенно на маленьком экране.
- Сделайте статистику двухколоночной — три карточки в ряд на 375px будут слишком узкими (около 100px каждая), текст не поместится.
- Добавьте визуальный разделитель (линию или тень) между профилем и статистикой, чтобы усилить группировку.
Ограничение: модель не видит реальных пропорций и может советовать невозможное (например, «увеличьте шрифт до 18px» без учёта, что места мало). Проверяйте в Figma.
Продвинутые промты: аудит и спецификации
3. UX-аудит по эвристикам Нильсена
Задача: проверить интерфейс на соответствие 10 эвристикам Нильсена без ручного перебора.
Промт:
Ты — UX-исследователь. Проведи аудит экрана оформления заказа по эвристикам Нильсена.
Опиши каждую эвристику и укажи, есть ли нарушение. Вот описание экрана:
- Форма с полями: имя, телефон, адрес, способ оплаты (радиокнопки), кнопка «Оплатить».
- Нет индикатора прогресса, нет возможности вернуться назад, ошибки валидации показываются только после нажатия кнопки.
Пример результата (сокращённо):
| Эвристика | Нарушение | Рекомендация |
|---|---|---|
| Видимость состояния системы | Нет индикатора загрузки после нажатия «Оплатить» | Добавить спиннер или скелетон |
| Свобода действий | Нет кнопки «Назад» | Добавить ссылку «Вернуться в корзину» |
| Помощь пользователям в распознавании ошибок | Валидация только по сабмиту | Показывать ошибки по blur поля |
Важно: эвристики — это эвристики, а не строгие правила. Модель может найти нарушения там, где их нет, если описание неполное. Давайте ей больше контекста.
4. Проверка контраста и доступности (WCAG)
Задача: быстро проверить цветовые пары на соответствие WCAG 2.1 AA.
Промт:
Ты — эксперт по доступности. Проверь контраст следующих пар цветов (текст на фоне) по WCAG 2.1 AA:
- #333333 на #FFFFFF
- #2196F3 на #FFFFFF
- #FFFFFF на #2196F3
- #757575 на #F5F5F5
Для каждой пары укажи коэффициент контраста и вердикт (проходит/не проходит). Если не проходит — предложи альтернативу.
Пример результата:
#333333на#FFFFFF— контраст 12.6:1, проходит (AAA).#2196F3на#FFFFFF— 3.1:1, не проходит для обычного текста (нужно 4.5:1). Предложить затемнить до#1976D2(4.6:1).#FFFFFFна#2196F3— 3.1:1, не проходит. Использовать для крупного текста (18px+) или заменить фон на#0D47A1(8.6:1).#757575на#F5F5F5— 4.0:1, не проходит. Заменить текст на#616161(5.3:1).
Ограничение: модель может ошибаться в расчётах, если вы даёте не HEX, а RGB или HSL. Всегда перепроверяйте контраст в инструментах вроде WebAIM Contrast Checker.
5. Спецификация компонента для handoff
Задача: описать компонент так, чтобы разработчик понял, как его верстать.
Промт:
Ты — дизайнер, пишущий handoff. Опиши компонент «Карточка товара» для фронтенда.
Вот что есть в макете: изображение 200x200, заголовок (16px, жирный), цена (18px, зелёная), кнопка «Купить» (фон #2196F3, текст белый, скругление 8px).
Учти состояния: hover, active, disabled. Опиши отступы и поведение на мобильных (ширина < 768px).
Пример результата:
.product-card {
display: flex;
flex-direction: column;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.product-card__image {
width: 200px;
height: 200px;
object-fit: cover;
}
.product-card__title {
font-size: 16px;
font-weight: 700;
margin: 12px 0 4px;
}
.product-card__price {
font-size: 18px;
color: #2E7D32;
margin-bottom: 12px;
}
.product-card__button {
background: #2196F3;
color: white;
border-radius: 8px;
padding: 10px 16px;
border: none;
cursor: pointer;
}
.product-card__button:hover { background: #1976D2; }
.product-card__button:active { background: #0D47A1; }
.product-card__button:disabled { background: #B0BEC5; cursor: not-allowed; }
@media (max-width: 768px) {
.product-card__image { width: 100%; height: auto; }
}
Что проверить: модель может предложить несуществующие CSS-свойства или перепутать единицы. Сверяйте с реальным макетом.
Экспертные промты: глубокая проработка
6. Генерация дизайн-системы с токенами для Figma Variables
Задача: получить полный набор токенов в формате, который можно импортировать в Figma через плагин (например, Tokens Studio).
Промт:
Ты — системный дизайнер. Создай JSON-файл с токенами для Figma Variables (формат Tokens Studio).
Нужны: цвета (primary, neutral, semantic), типографика (размеры, веса, line-height), отступы (4, 8, 12, 16, 24, 32, 48), радиусы (4, 8, 12, 16).
Используй иерархическую структуру: global -> alias -> component.
Пример результата (фрагмент):
{
"global": {
"color": {
"primary": { "value": "#2196F3", "type": "color" },
"neutral-100": { "value": "#F5F5F5", "type": "color" }
},
"spacing": {
"sm": { "value": "8px", "type": "spacing" },
"md": { "value": "16px", "type": "spacing" }
}
},
"alias": {
"button-bg": { "value": "{global.color.primary}", "type": "color" }
}
}
Trade-off: такой JSON удобен для импорта, но модель может наплодить лишних токенов. Импортируйте в Figma, проверяйте, что все значения применились, и удаляйте неиспользуемые.
{global.color.primary}), иначе Tokens Studio не распознает alias.
7. Аудит адаптивности и сетки
Задача: проверить, как макет ведёт себя на разных брейкпоинтах, без ручного ресайза.
Промт:
Ты — UI-дизайнер. Проанализируй адаптивность макета лендинга.
Дано: десктоп 1440px — три колонки, планшет 768px — две колонки, мобильный 375px — одна колонка.
Контент: заголовок, три карточки с преимуществами, форма подписки.
Найди потенциальные проблемы с переносом текста, отступами и переполнением.
Пример результата:
- На 768px три карточки не поместятся в две колонки — третья перенесётся, образуя пустоту. Решение: использовать flex-wrap с выравниванием по центру.
- На 375px заголовок может занять 3 строки — уменьшите размер до 24px или используйте
clamp(). - Форма подписки на мобильных: поле ввода и кнопка должны быть на всю ширину, иначе кнопка будет слишком узкой.
Ограничение: модель не знает точных размеров вашего контента, поэтому советы могут быть общими. Уточняйте длину текстов.
8. Генерация документации для компонента (handoff + Storybook)
Задача: создать описание компонента для дизайнеров и разработчиков, включая пропсы и примеры использования.
Промт:
Ты — техписатель в дизайн-системе. Напиши документацию для компонента Button.
Варианты: primary, secondary, ghost. Размеры: small, medium, large. Состояния: default, hover, active, disabled, loading.
Опиши пропсы (variant, size, disabled, loading, onClick) и приведи пример кода на React с использованием styled-components.
Пример результата:
import styled from 'styled-components';
const StyledButton = styled.button`
padding: ${({ size }) => size === 'small' ? '6px 12px' : size === 'large' ? '14px 24px' : '10px 16px'};
border-radius: 8px;
border: none;
font-weight: 600;
cursor: pointer;
background: ${({ variant }) => variant === 'primary' ? '#2196F3' : variant === 'secondary' ? '#E3F2FD' : 'transparent'};
color: ${({ variant }) => variant === 'primary' ? 'white' : '#2196F3'};
border: ${({ variant }) => variant === 'ghost' ? '1px solid #2196F3' : 'none'};
&:hover { opacity: 0.9; }
&:disabled { opacity: 0.5; cursor: not-allowed; }
`;
export const Button = ({ variant = 'primary', size = 'medium', loading, children, ...props }) => (
<StyledButton variant={variant} size={size} disabled={loading} {...props}>
{loading ? 'Loading...' : children}
</StyledButton>
);
Что проверить: модель может предложить избыточные пропсы или неоптимальный CSS. Убедитесь, что код соответствует вашему стеку.
9. Критика цветовой схемы и типографики с точки зрения бренда
Задача: получить обратную связь по визуальному стилю, не выходя из чата.
Промт:
Ты — арт-директор. Оцени цветовую схему и типографику для бренда «Эко-стартап» (натуральные продукты).
Цвета: primary #4CAF50, secondary #FFC107, background #FAFAFA, text #212121.
Шрифт: заголовки — Montserrat Bold, текст — Open Sans Regular.
Что можно улучшить? Дай 3 рекомендации по усилению бренда.
Пример результата:
- Добавьте природный оттенок — #4CAF50 слишком яркий, попробуйте #2E7D32 (глубокий зелёный) для ассоциации с лесом.
- Используйте акцентный цвет для CTA — жёлтый #FFC107 хорошо работает как вторичный, но для кнопок лучше взять тёплый оранжевый (#FF9800), чтобы повысить контраст.
- Разнообразьте типографику — Montserrat Bold для заголовков и Open Sans Regular для текста — стандартная пара, добавьте рукописный акцент (например, Caveat) для цитат или подписей, чтобы передать «человечность».
Ограничение: вкусовщина. Модель не знает вашу аудиторию, поэтому рекомендации могут быть шаблонными. Используйте как отправную точку.
10. Проверка микротекста и UX-копирайтинга
Задача: улучшить тексты в интерфейсе (кнопки, подсказки, ошибки).
Промт:
Ты — UX-редактор. Проверь микротекст на экране регистрации:
- Заголовок: «Регистрация»
- Поля: «Имя», «Email», «Пароль»
- Кнопка: «Зарегистрироваться»
- Ошибка: «Неверный формат email»
- Подсказка к паролю: «Минимум 8 символов»
Предложи улучшения для ясности и дружелюбности.
Пример результата:
- Заголовок «Регистрация» → «Создайте аккаунт» (более ориентировано на действие).
- Ошибка «Неверный формат email» → «Похоже, в email опечатка. Проверьте, пожалуйста» (мягче).
- Подсказка к паролю → «Придумайте пароль от 8 символов» (добавлено действие).
- Кнопка «Зарегистрироваться» → «Создать аккаунт» (короче и понятнее).
Важно: модель может предлагать слишком разговорный тон, который не подходит для консервативного бренда. Согласуйте tone of voice.
Где LLM экономит время, а где — нет
Экономит: генерация токенов, первичный аудит по эвристикам, проверка контраста (если даны HEX), составление handoff-описаний, критика текстов. Модель быстро выдаёт структурированный результат, который можно доработать.
Не экономит (и даже вредит): анализ реального макета (модель не видит картинку, если вы не используете мультимодальные модели, но и они ошибаются в пикселях), точные расчёты адаптивности без данных, финальные решения по визуалу. Всегда перепроверяйте в Figma.
Попробуйте эти промты в своём следующем проекте. Начните с базовых — они дают быстрый результат. Постепенно переходите к экспертным, добавляя контекст и уточняя ограничения. И помните: LLM — это ассистент, а не замена дизайнеру. Финальное слово всегда за вами и вашей насмотренностью.
Если хотите глубже разобраться в промт-инжиниринге для других задач, загляните в наши статьи про отладку в браузере и оптимизацию DataFrame.