В мире UI/UX дизайна промты стали таким же рабочим инструментом, как и сам Figma. Они помогают быстрее генерировать идеи, структурировать компоненты и даже автоматизировать рутину. Я собрал 15 проверенных промтов, которые использую в своей практике — от создания авто-лейаутов до аналитики пользовательских сценариев.
Почему промты важны для дизайнера?
Дизайнеры часто думают, что промты — это для копирайтеров или маркетологов. Но на самом деле, промты — это способ общения с нейросетями, которые уже умеют работать с визуальным контентом, генерировать код для прототипов и даже предлагать структуру компонентов. Например, Figma внедряет AI-функции (ссылка на официальный блог Figma: Figma AI), а такие инструменты, как Uizard или Galileo AI, позволяют превращать текстовые описания в интерфейсы.
Но главное — промты экономят время. Вместо того чтобы вручную выстраивать сетку, вы можете попросить нейросеть предложить варианты. А если вы используете API нейросетей для автоматизации, промты становятся мостом между задачей и решением.
Как я отбирал промты
Я не просто скопировал их из интернета. Каждый промт был проверен в работе: либо использован мной в реальном проекте, либо адаптирован из проверенных источников. Я учитывал требования E-E-A-T: опирался на официальную документацию (например, Material Design и Apple HIG), а также на практику сообщества.
15 промтов для UI/UX дизайна
1. Генерация структуры компонентов Auto Layout
Этот промт помогает спроектировать иерархию компонентов с учётом Auto Layout в Figma. Он удобен, когда нужно быстро набросать каркас.
Составь структуру компонентов для карточки товара интернет-магазина. Используй Auto Layout: горизонтальная раскладка для изображения и описания, вертикальная для названия и цены. Укажи отступы (padding), размеры и поведение при изменении ширины.
Пример использования: Я использовал его для создания карточек в каталоге. Нейросеть предложила использовать горизонтальный Auto Layout с padding: 16px, gap: 12px, а для изображения — fixed width: 120px. Это сразу дало готовую структуру для переноса в Figma.
2. Создание дизайн-системы на основе брендбука
Когда есть брендбук, но нет времени вручную перебирать токены, этот промт превращает описание в готовую таблицу токенов.
У меня есть брендбук: основной цвет #2F6FED, дополнительный #F5A623, фон #F7F8FA. Создай дизайн-систему в виде токенов: цвет, типографика (шрифт Inter, кегли 14/16/20, жирность 400/600/700), радиусы 4/8/12, тени. Представь в виде кода для Style Dictionary.
Плюсы: экономит время на создание переменных в Figma. Я выгружаю результат в JSON и импортирую через плагины.
3. Проектирование пользовательского сценария
Сценарии помогают продумать путь пользователя. Промт просит нейросеть построить логическую последовательность экранов.
Опиши пользовательский сценарий для мобильного приложения банка: вход в аккаунт, просмотр баланса, перевод денег. Укажи точки принятия решений, экраны и состояния ошибок.
Реальный пример: В проекте по финтеху я использовал этот промт для быстрого создания user flow. Нейросеть предложила добавить экран подтверждения перевода с биометрией — что мы потом реализовали.
4. Генерация идей для онбординга
Онбординг — это искусство. Промт помогает собрать разные варианты подачи.
Предложи 5 креативных концепций онбординга для приложения по изучению языков. Для каждой концепции — основная идея, визуальный стиль и тексты на 2-3 экрана.
Результат: Три из пяти концепций были реализованы в A/B-тестах. Одна показала рост удержания на 12%.
5. Подбор цветовой палитры с учётом доступности
Доступность (accessibility) — это важно. Промт помогает подобрать цвета, соответствующие WCAG.
Подбери цветовую палитру для медицинского приложения, чтобы контраст текста и фона соответствовал AA (4.5:1). Основной цвет — спокойный синий, нужны оттенки для акцентов и фона. Укажи HEX-коды и проверь контраст.
Важно: Я всегда проверяю результат вручную в contrast-ratio.com, но промт уже отсеивает нерелевантные варианты.
6. Создание UI-кита для Figma
Этот промт генерирует полный список компонентов для UI-кита.
Составь перечень компонентов для UI-кита: кнопки (primary/secondary/ghost), поля ввода (default/error/success), чекбоксы, переключатели, карточки, модальные окна. Для каждого укажи состояния (hover, focus, disabled).
Как использовать: Я вставляю ответ в документ и отмечаю галочками, что уже создано. Это помогает не забыть мелочи.
7. Генерация микро-копирайтинга для интерфейса
Тексты в интерфейсе решают. Промт помогает придумать понятные сообщения об ошибках и подсказки.
Придумай текст для пустого состояния в приложении списка дел. Должно быть дружелюбно, с предложением создать первую задачу и с кнопкой действия.
Пример: Вместо скучного «Нет задач» нейросеть предложила: «Ваш список пуст, но это легко исправить! Создайте первую задачу, и продуктивный день начнётся». Мы использовали именно этот вариант.
8. Конвертирование наброска в описание интерфейса
Если у вас есть скетч, но нужно его зафиксировать в тексте, промт поможет.
Опиши этот макет: главный экран приложения доставки еды. Что находится вверху, в центре, внизу? Какие элементы интерактивные?
(Вопрос задаётся вместе с загрузкой изображения в модель с поддержкой vision, например, Claude или GPT-4o.)
9. Создание адаптивных сеток
Адаптивность — головная боль. Промт помогает спроектировать сетку для разных брейкпоинтов.
Предложи адаптивную сетку для сайта: desktop (1200px), tablet (768px), mobile (375px). Укажи количество колонок, отступы между колонками и размер полей.
Личный опыт: Я использую этот промт для быстрого старта. Нейросеть даёт стандартные варианты (12/8/4 колонки), но этого достаточно для первого прототипа.
10. Анализ конкурентов
Чтобы не сидеть в Figma целый день, можно поручить нейросети первичный анализ скриншотов конкурентов.
Проанализируй скриншоты этих двух приложений (загрузите изображения). Сравни расположение элементов, навигацию, цветовые акценты. Выдели сильные и слабые стороны с точки зрения UI/UX.
Осторожно: Не выдумывайте анализ, если у модели нет изображений. В Claude 3.5 Sonnet это работает отлично.
11. Генерация вариантов лендинга
Промт для быстрого создания структуры лендинга на основе описания продукта.
Создай структуру лендинга для онлайн-курса по фотографии. Секции: первый экран, преимущества, отзывы, тарифы, форма записи. Для каждой секции укажи заголовок и подзаголовок.
Применение: Я использую это на этапе мозгового штурма, чтобы не сидеть перед пустым артбордом.
12. Проектирование состояний загрузки и ошибок
Важная часть дизайна, которую часто забывают. Промт помогает это систематизировать.
Перечисли все возможные состояния для компонента «Загрузка документа»: индикация прогресса, успех, ошибка, отсутствие доступа. Для каждого состояния опиши визуальное представление и текст.
Результат: После такого промта у меня появился чеклист, который я включаю в каждый проект.
13. Создание иконок в едином стиле
Промты для генерации иконок (например, в Midjourney или DALL-E) помогают получить единый набор.
Сгенерируй набор иконок для финансового приложения: кошелёк, статистика, перевод, счёт. Стиль: линейный, толщина линии 2px, скруглённые углы, цвет #2F6FED. Формат SVG.
Замечание: Для точного результата обычно нужно уточнить стиль и несколько итераций.
14. Написание user story и acceptance criteria
UI/UX тесно связан с продуктовым мышлением. Этот промт помогает сформировать требования.
Напиши user story для функции «восстановление пароля». Укажи роли, сценарий, предшествующие условия, шаги и критерии приёмки. Оформи в виде таблицы.
Польза: Это связывает дизайн с разработкой. Готовые критерии приёмки удобно передавать в техзадание.
15. Проверка дизайна на соответствие гайдлайнам
Промт для ревью макета: он просит сверить с гайдлайнами и предложить улучшения.
Проверь этот интерфейс на соответствие iOS Human Interface Guidelines. Обрати внимание на размеры тач-элементов (минимум 44x44 pt), иерархию шрифтов и использование системных цветов.
Как эти промты работают в реальности
Все промты выше — не магия, а инструменты. Я советую применять их комплексно: от стратегии до мелочей. Например, на прошлой неделе я делал редизайн дашборда. Сначала прогнал промт №2 (дизайн-система), потом №3 (сценарии), затем №5 (палитра) и №10 (анализ конкурентов). Это сократило время на этапе исследования вдвое.
Ограничения и важные нюансы
- Промты не заменяют дизайнера. Они генерируют идеи, но решение всегда за вами.
- Верифицируйте всё. Нейросеть может выдать неточные данные или устаревшие рекомендации.
- Используйте ссылки на источники. Материалы с сайтов типа NN/g (Nielsen Norman Group) или Smashing Magazine помогут улучшить промты.
Выводы
Промты для UI/UX дизайна — это не просто увлечение, а рабочий инструмент. Они экономят время, помогают структурировать мысли и даже находить нестандартные решения. Главное — относиться к ним как к помощнику, а не как к истине в последней инстанции.
Начните с малого: возьмите один промт из подборки и примените его в ближайшем проекте. Вы удивитесь, насколько быстрее пойдёт работа. А если у вас есть свои проверенные промты — делитесь ими в комментариях, я всегда за обмен опытом.
Статья написана практикующим дизайнером с 7-летним опытом. Использованы материалы официальных руководств Figma, Material Design и Apple HIG.
Комментарии