Настройки куки

Файлы cookie, необходимые для корректной работы сайта, всегда включены.
Другие файлы cookie можно настроить.

Основные файлы cookie

Всегда включены. Эти файлы cookie необходимы для работы веб-сайта и его функций. Их нельзя отключить. Они устанавливаются в ответ на ваши запросы, например, при настройке параметров конфиденциальности, входе в систему или заполнении форм.

Аналитические файлы cookie

Disabled

Эти файлы cookie собирают информацию, которая помогает нам понять, как используются наши веб-сайты, насколько эффективны наши маркетинговые кампании, а также помогает нам персонализировать наши веб-сайты для вас. Список используемых нами аналитических файлов cookie можно посмотреть здесь.

Рекламные файлы cookie

Disabled

Эти файлы cookie предоставляют рекламным компаниям информацию о вашей активности в интернете, чтобы помочь им показывать вам более релевантную рекламу или ограничивать количество показов рекламы. Эта информация может быть передана другим рекламным компаниям. Список используемых нами рекламных файлов cookie можно посмотреть здесь.

ИИ для UX/UI-дизайнера
/
Урок 8 из 11

Модуль 3. ИИ в UI-дизайне, контенте и визуале

Генерация визуальных референсов

01/08

Как ИИ меняет процесс сбора визуальных референсов

Ещё 3 года назад дизайнер тратил 2-3 часа на поиск референсов в Pinterest, Dribbble и Behance. Сегодня ИИ генерирует уникальные визуальные концепции за минуты — прямо под ваш продукт и стиль.

Что даёт ИИ-генерация референсов:

Скорость. 10 вариантов экрана за 5 минут вместо 2 часов поиска.
Уникальность. Можно сгенерировать стиль, которого ещё нет на рынке — а не копировать чужие решения.
Точность под задачу. Промпт описывает именно ваш продукт, аудиторию и настроение — не нужно фильтровать тысячи чужих работ.
Быстрая итерация. Не нравится результат? Меняете одно слово в промпте и получаете новую версию.

В этом уроке будет разобрано, как составлять промпты для генерации UI-референсов в Midjourney, DALL-E 3 и Kandinsky, и как избегать типичных артефактов.

02/08

Анатомия промпта для генерации UI

Промпт для генерации изображений отличается от текстового. Здесь важна визуальная конкретика: стиль, композиция, освещение, технические параметры.

Формула идеального промпта для UI:

Тип экрана

Что именно генерируем

mobile app onboarding screen

Стиль и настроение

Визуальный язык

minimalist, clean, airy, soft shadows

Цветовая палитра

Основные цвета

pastel blue and white, accent yellow

Композиция и детали

Расположение элементов

large hero image, rounded corners, subtle gradients

Технические параметры

Качество и формат

high fidelity, dribbble style, 4k, --ar 9:16

💡 Совет: начинайте с простого промпта и добавляйте детали итерациями. Слишком длинный запрос с первого раза часто даёт непредсказуемый результат.

03/08

Стоп-слова и триггеры для чистых интерфейсов

ИИ часто добавляет в UI-референсы артефакты: непонятные символы вместо текста, лишние элементы, «грязный» дизайн. Правильные слова в промпте помогают этого избежать.

⚠️ ЧТО ДОБАВИТЬ В ПРОМПТ

Триггеры качества: «clean UI», «no text artifacts», «realistic interface», «professional design», «high fidelity», «dribbble style», «behance featured».

Стоп-слова (чего избегать): ИИ часто добавляет «gibberish text» (бессмысленные буквы), «blurry elements», «cluttered layout», «low quality». Указывайте в промпте: «no blurry text», «sharp details», «minimalist layout».

Пример хорошего промпта для Linear (трекер задач):

ПРОМПТ mobile app dashboard screen for task management, clean minimalist style, dark mode with subtle gradients, soft blue and purple palette, large cards with rounded corners, subtle shadows, no text artifacts, sharp details, high fidelity, dribbble style, 4k, --ar 9:16

Пример плохого промпта:

ПЛОХО app interface for tasks, nice design, good colors

Слишком абстрактно. ИИ выдаст случайный результат без контроля над стилем и качеством.

04/08

🎯 Практика 1: выбор правильного промпта

Дизайнер Figma хочет сгенерировать референс для экрана «Совместное редактирование документа» в стиле бренда (чистый, профессиональный, с акцентом на коллаборацию). Какой промпт даст наиболее качественный результат?

05/08

Шпаргалка: 5 готовых промптов для UI-стилей

Вот 5 проверенных шаблонов промптов для популярных UI-стилей. Копируйте, подставляйте свою тему и меняйте цвета.

✨

Clean Minimal

Для SaaS, финтех, продуктивных приложений

[тип экрана], clean minimalist style, white background, subtle gray accents, large typography, generous whitespace, soft shadows, no text artifacts, high fidelity, dribbble style, 4k

🌙

Dark Mode FinTech

Для банков, крипто, трейдинга

[тип экрана], dark mode fintech, deep navy background, neon green and blue accents, data visualization, glowing charts, subtle gradients, no text artifacts, sharp details, high fidelity, 4k

🎨

Playful EdTech

Для обучения, детских приложений, геймификации

[тип экрана], playful edtech style, bright pastel colors, rounded shapes, friendly illustrations, gamification elements, progress bars, no text artifacts, clean layout, high fidelity, 4k

💎

Glassmorphism

Для премиум-продуктов, лайфстайла

[тип экрана], glassmorphism style, frosted glass cards, blurred background, soft gradients, translucent elements, subtle borders, no text artifacts, high fidelity, dribbble style, 4k

⚡

Neobrutalism

Для креативных студий, молодёжных брендов

[тип экрана], neobrutalism style, bold black borders, bright contrasting colors, raw typography, asymmetric layout, no shadows, no text artifacts, high fidelity, 4k

06/08

Как использовать референсы, а не копировать их

ИИ-генерации — это вдохновение, а не готовый макет. Их нельзя просто перерисовать 1-в-1. Задача дизайнера — извлечь принципы и адаптировать под свой продукт.

Что брать из референса:

Композицию. Как расположены элементы, какие пропорции, где акценты.
Цветовые сочетания. Какие цвета работают вместе, какие создают контраст.
Типографику. Размеры шрифтов, иерархия, межстрочные интервалы.
Настроение. Какое ощущение создаёт дизайн (лёгкость, надёжность, игривость).

Что НЕ делать:

Копировать конкретные иконки, иллюстрации или логотипы
Перерисовывать экран 1-в-1 без адаптации под свой контекст
Использовать сгенерированный текст (он часто бессмысленный)
Показывать референс заказчику как «готовый дизайн»

Пример из практики Spotify: команда дизайнеров генерирует 20-30 референсов для новой фичи, выбирает 3-5 лучших, анализирует общие паттерны и создаёт свой уникальный вариант, вдохновлённый этими паттернами.

07/08

🎯 Практика 2: распознавание артефактов ИИ

Дизайнер Duolingo сгенерировал референс экрана онбординга. На изображении видны: красивые иллюстрации, приятная цветовая палитра, но в текстовых блоках — непонятные символы вместо букв (например, «Wlcme to Dᴜolingо» вместо «Welcome to Duolingo»). Какое действие дизайнера будет наиболее профессиональным?

Отлично! Урок пройден!

Навык генерации визуальных референсов освоен

ИИ генерирует уникальные UI-референсы за минуты через промпты с чёткой структурой (тип экрана + стиль + цвета + детали + техпараметры), но дизайнер использует их только как вдохновение для композиции и настроения, заменяя артефактный текст на реалистичный контент и адаптируя решения под свой продукт.

Начать следующий урок