Как выбрать промпты для генерации UI-элементов в DALL·E и Midjourney

Системные администраторы всё чаще сталкиваются с необходимостью генерировать UI-элементы для внутренних решений. Даже если вы не дизайнер, ИИ может помочь. Но не все промпты одинаково эффективны. DALL·E и Midjourney — два самых популярных инструмента, но подходы к составлению промптов у них разные. В статье — честный разбор, что работает, что нет, и как не попасть в ловушку из-за неправильного описания.

Что такое хороший промпт — и почему это не просто «нарисуй кнопку»

Хороший промпт — это не пожелание, а точная инструкция. Он должен содержать детали по стилю, композиции, освещению, цветовой палитре и, если нужно, техническим ограничениям. Например, если вы хотите сгенерировать элемент управления в стиле Material Design, просто написать «кнопка» — это не сработает. ИИ не знает, что вы подразумеваете под «кнопкой»: плоская, с тенью, с анимацией, в светлой или тёмной теме. Без чётких параметров он будет гадать. Это и есть главная ошибка, которую делают даже опытные пользователи.

Многие думают, что ИИ — это магическая машина, которая понимает намёки. Но это не так. Он работает по принципу «то, что ты написал, то и получил». Если вы напишете «синяя кнопка», он выдаст что-то, что выглядит как кнопка, но вряд ли подойдёт под ваш UI. Системы вроде Midjourney и DALL·E не читают между строк. Они выполняют команды буквально. Поэтому любая неоднозначность приводит к неожиданным результатам.

Даже если вы используете термин «UI-элемент», это не даёт ИИ чёткого представления. Он может выдать вам кнопку, которая выглядит как элемент из 2010-го года, или, что ещё хуже, как часть интерфейса криптовалютного кошелька. Это не потому, что он злой, а потому что он не понимает, что вы хотите. Он не знает, что для вас «UI-элемент» — это не просто графика, а часть системы, которая должна соответствовать определённой дизайнерской системе.

Если вы хотите, чтобы ИИ выдал вам именно то, что нужно, нужно быть максимально конкретным. Укажите, что именно вы хотите: форма, размер, цвет, состояние, контекст. Например, «кнопка с текстом «Сохранить», размер 48x48, фон — #007ACC, текст белый, тень 2px, стиль Material Design, состояние нажатой, в тёмной теме, на панели инструментов, без иконки, без анимации». Это не просто «кнопка», это инструкция.

Иногда даже чёткое описание не помогает. Например, если вы хотите, чтобы ИИ выдал элемент, который будет работать в системе с определённой цветовой схемой, нужно уточнить, что цвета должны соответствовать. Иначе он может выдать элемент, который будет выглядеть как «встроенный» в систему, но на самом деле будет выделяться. Это критично, если вы используете UI-элементы в корпоративных приложениях, где единообразие — важнейшее требование.

DALL·E против Midjourney: где что работает, а где — нет

DALL·E и Midjourney — два разных подхода к генерации изображений. DALL·E, разработанный OpenAI, работает как «чёрный ящик»: вы вводите текст, и он выдаёт изображение. Он хорош для общих задач, но не всегда подходит для точной генерации UI-элементов. Например, при попытке сгенерировать элемент управления с определённой высотой, шириной и состоянием, DALL·E часто выдаёт результаты, которые не соответствуют требованиям. Он не поддерживает сложные параметры, как, например, размеры в пикселях или точные цветовые коды.

Midjourney, в свою очередь, имеет более тонкую настройку. Он позволяет использовать параметры, такие как —v 7, —style raw, —stylize 100, —ar 16:9, и т.д. Эти параметры позволяют точно контролировать внешний вид изображения. Кроме того, Midjourney лучше справляется с деталями: тени, градиенты, прозрачность, иконки. Для UI-элементов это критично. Поэтому, если вам нужно что-то точное, Midjourney — лучший выбор. Но и там не всё просто.

Однако даже в Midjourney не всё так просто. Например, если вы хотите сгенерировать элемент, который должен быть «встроенным» в систему, нужно уточнить, что он не должен выделяться. Это можно сделать, например, с помощью параметра —style raw, который уменьшает «художественность» и делает изображение более реалистичным. Но даже это не гарантирует, что ИИ не добавит лишние элементы, такие как тени или градиенты, которые не соответствуют дизайну.

Если вы используете DALL·E, то лучше всего подходят задачи, где важна идея, а не точность. Например, вы можете сгенерировать макет интерфейса, чтобы показать заказчику, как он будет выглядеть. Но если вы хотите, чтобы каждый элемент соответствовал требованиям, DALL·E — не лучший выбор. Он может выдать элемент, который выглядит как кнопка, но не будет работать в системе из-за неправильных размеров или цветов.

DALL·E — это как «черновик». Midjourney — как «финальный рендер». Если вы хотите, чтобы UI-элемент выглядел так, как вы его представили, используйте Midjourney. Если же вы просто хотите визуализировать идею — DALL·E может подойти. Но не забывайте: если вы хотите, чтобы ИИ работал как инструмент, а не как художник, используйте Midjourney.

• DALL·E: простота, но низкая точность. Подходит для идей, концептов, макетов.
• Midjourney: точность, настройка, контроль. Подходит для реальных UI-элементов, особенно если нужно соблюдать дизайн-систему.

Как писать промпты: что нужно включить в описание

Промпт для генерации UI-элемента должен быть структурированным. Начните с описания самого элемента: что это — кнопка, поле ввода, переключатель, карточка. Затем укажите стиль: Material Design, Fluent UI, iOS, Android, или любой другой. Уточните цветовую схему: например, «тёмная тема, основной цвет — #1E90FF, фон — #121212». Укажите размеры: «размер 48x48 пикселей», «высота 32 пикселя». Если элемент должен быть интерактивным, укажите состояние: «нажатая кнопка», «поле ввода с фокусом», «переключатель в положении «включено»'.

Если вы хотите, чтобы ИИ учёл контекст, укажите, где будет использоваться элемент: «в панели инструментов», «в диалоговом окне», «на главном экране мобильного приложения». Также важно уточнить, что не нужно: «без тени», «без анимации», «без иконки». Чем больше деталей, тем точнее результат. Пример: «Кнопка с текстом «Сохранить», размер 48x48, фон — #007ACC, текст белый, тень 2px, стиль Material Design, состояние нажатой, в тёмной теме, на панели инструментов, без иконки, без анимации». Это не просто «кнопка», это инструкция.

Но даже с чётким описанием могут быть проблемы. Например, если вы хотите, чтобы ИИ выдал элемент, который будет работать в системе с определённой цветовой схемой, нужно уточнить, что цвета должны соответствовать. Иначе он может выдать элемент, который будет выглядеть как «встроенный» в систему, но на самом деле будет выделяться. Это критично, если вы используете UI-элементы в корпоративных приложениях, где единообразие — важнейшее требование.

Если вы хотите, чтобы ИИ выдал элемент, который будет работать в системе, нужно уточнить, что он не должен выделяться. Это можно сделать, например, с помощью параметра —style raw, который уменьшает «художественность» и делает изображение более реалистичным. Но даже это не гарантирует, что ИИ не добавит лишние элементы, такие как тени или градиенты, которые не соответствуют дизайну.

• Описание элемента
• Стиль
• Цветовая схема
• Размеры
• Состояние
• Контекст использования
• Что исключить

Язык и формат: почему на английском и как писать

Рекомендуется писать промпты на английском языке. Это не просто традиция. Языковые модели лучше понимают английские фразы, особенно в техническом контексте. Если вы напишете на русском, ИИ может интерпретировать слова неправильно. Например, «кнопка» может быть переведено как «button», но «светлая тема» — как «light theme» или «light mode», и это может повлиять на результат. Кроме того, большинство параметров в Midjourney написаны на английском, и если вы используете русские названия, ИИ может не распознать их.

Также важно соблюдать структуру. В Midjourney промпт состоит из трёх частей: описание, стиль и технические параметры. Например: «A blue button with white text, size 48x48, Material Design style, dark theme, —v 7 —style raw —stylize 100 —ar 16:9». Здесь всё чётко: что нужно, как выглядит, какие параметры. Без структуры ИИ будет работать в режиме «угадай-что-я-имею-в-виду», и результат будет нестабильным.

Но даже с правильной структурой могут быть проблемы. Например, если вы используете параметр —style raw, он уменьшает «художественность» и делает изображение более реалистичным. Но если вы не укажете, что нужно «реалистичное» изображение, ИИ может добавить элементы, которые не соответствуют дизайну. Например, тени, градиенты, иконки. Это критично, если вы хотите, чтобы UI-элемент выглядел как часть системы, а не как художественное произведение.

Если вы хотите, чтобы ИИ работал как инструмент, а не как художник, пишите на английском, используйте структуру, и не сокращайте детали. Это не значит, что вы должны писать длинные тексты. Просто укажите всё, что нужно. Например, «A blue button with white text, size 48x48, Material Design style, dark theme, —v 7 —style raw —stylize 100 —ar 16:9». Это не 20 строк, это 1 строка. Но она содержит всё, что нужно.

• Использование английского языка
• Структурированная форма: описание, стиль, параметры

Как использовать промпты для генерации кода UI-элементов

Хотя DALL·E и Midjourney генерируют изображения, их можно использовать для создания UI-элементов, которые потом будут реализованы в коде. Например, вы можете сгенерировать изображение кнопки, а затем использовать его как макет для разработчика. Но если вы хотите, чтобы ИИ генерировал код, нужно использовать другие модели, такие как ChatGPT, GigaChat или специализированные инструменты.

Промпты для генерации кода могут использовать подход few-shot, где вы даёте примеры. Например: «Напиши код для кнопки в Material Design, используя React и CSS. Пример: <button style={{ backgroundColor: '#007ACC', color: 'white', padding: '12px 24px', borderRadius: '8px' }}>Сохранить</button>.» Это помогает ИИ понять, что вы хотите. Также важно указать язык, фреймворк, структуру и требования. Без этого ИИ может выдать код, который не будет работать или не соответствует вашим стандартам.

Если вы хотите, чтобы ИИ выдал код, который будет работать в системе, нужно уточнить, что он должен соответствовать определённой структуре. Например, если вы используете React, нужно уточнить, что код должен быть написан на JSX. Если вы используете CSS, нужно уточнить, что цвета должны соответствовать дизайнерской системе. Без этого ИИ может выдать код, который будет выглядеть как «встроенный» в систему, но на самом деле будет выделяться.

Не пытайтесь заставить DALL·E или Midjourney писать код. Это не их задача. Используйте подходящие инструменты для каждой задачи. DALL·E и Midjourney — это инструменты для генерации изображений, а не кода. Если вам нужно генерировать код, используйте модели, которые специально разработаны для этого.

• Промпты для генерации кода используют подход few-shot с примерами
• Важно указать язык, фреймворк, структуру и требования

Порядок действий: как начать с генерации UI-элементов

Первое, что нужно сделать, — определить, что именно вы хотите. Это может быть кнопка, поле ввода, переключатель, карточка, или что-то другое. Уточните, где этот элемент будет использоваться: в панели инструментов, в диалоговом окне, на главном экране мобильного приложения. Это важно, потому что контекст влияет на дизайн.

Второе — выбрать инструмент. Если вам нужно что-то точное, используйте Midjourney. Если вы просто хотите визуализировать идею, DALL·E может подойти. Убедитесь, что вы используете правильную версию модели. Например, в Midjourney v7 лучше справляется с деталями, чем предыдущие версии.

Третье — написать промпт. Используйте структуру: описание, стиль, параметры. Укажите цветовую схему, размеры, состояние, контекст. Уточните, что не нужно: тени, градиенты, иконки. Чем больше деталей, тем точнее результат. Например: «A blue button with white text, size 48x48, Material Design style, dark theme, —v 7 —style raw —stylize 100 —ar 16:9». Это не 20 строк, это 1 строка. Но она содержит всё, что нужно.

Четвёртое — проверить результат. Если результат не соответствует ожиданиям, уточните промпт. Убедитесь, что вы используете правильные параметры. Например, если вы хотите, чтобы ИИ не добавлял тени, укажите «без тени». Если вы хотите, чтобы ИИ не добавлял градиенты, укажите «без градиентов». Чем больше деталей, тем точнее результат.

Пятое — использовать результат. Если вы сгенерировали изображение, используйте его как макет для разработчика. Если вы хотите, чтобы ИИ генерировал код, используйте другие модели, такие как ChatGPT, GigaChat или специализированные инструменты. DALL·E и Midjourney — это инструменты для генерации изображений, а не кода.

• Определить, что нужно
• Выбрать инструмент
• Написать промпт
• Проверить результат
• Использовать результат

Типовые ошибки: что делать, если уже сломалось

Одна из самых распространённых ошибок — использовать неправильный язык. Если вы пишете на русском, ИИ может интерпретировать слова неправильно. Например, «кнопка» может быть переведено как «button», но «светлая тема» — как «light theme» или «light mode», и это может повлиять на результат. Кроме того, большинство параметров в Midjourney написаны на английском, и если вы используете русские названия, ИИ может не распознать их.

Другая типичная ошибка — не использовать структуру. Если вы не разделяете промпт на описание, стиль и параметры, ИИ будет работать в режиме «угадай-что-я-имею-в-виду», и результат будет нестабильным. Например, если вы напишете: «синяя кнопка, размер 48x48, Material Design, тёмная тема», ИИ может не понять, что «синяя кнопка» — это описание, а «размер 48x48» — это параметр. Это приведёт к неправильному результату.

Третья ошибка — не уточнять, что нужно. Например, если вы хотите, чтобы ИИ выдал элемент, который будет работать в системе с определённой цветовой схемой, нужно уточнить, что цвета должны соответствовать. Иначе он может выдать элемент, который будет выглядеть как «встроенный» в систему, но на самом деле будет выделяться. Это критично, если вы используете UI-элементы в корпоративных приложениях, где единообразие — важнейшее требование.

Четвёртая ошибка — не проверять результат. Если результат не соответствует ожиданиям, уточните промпт. Убедитесь, что вы используете правильные параметры. Например, если вы хотите, чтобы ИИ не добавлял тени, укажите «без тени». Если вы хотите, чтобы ИИ не добавлял градиенты, укажите «без градиентов». Чем больше деталей, тем точнее результат.

Пятая ошибка — не использовать подходящие инструменты. DALL·E и Midjourney — это инструменты для генерации изображений, а не кода. Если вам нужно генерировать код, используйте модели, которые специально разработаны для этого. Это не значит, что вы не можете использовать ИИ для UI-дизайна, но нужно понимать, что у каждого инструмента своя задача.

• Использование неправильного языка
• Не использование структуры
• Недоуточнение
• Непроверка результата
• Неправильный инструмент

Как проверить результат: что искать

Проверка результата — это важный шаг. Если результат не соответствует ожиданиям, уточните промпт. Убедитесь, что вы используете правильные параметры. Например, если вы хотите, чтобы ИИ не добавлял тени, укажите «без тени». Если вы хотите, чтобы ИИ не добавлял градиенты, укажите «без градиентов». Чем больше деталей, тем точнее результат.

Проверьте, соответствует ли результат описанию. Например, если вы хотели кнопку, которая будет выглядеть как часть системы, убедитесь, что она не выделяется. Если вы хотели элемент, который будет работать в системе, убедитесь, что он соответствует цветовой схеме. Если вы хотели элемент, который будет работать в системе, убедитесь, что он соответствует дизайнерской системе.

Проверьте, соответствует ли результат стилю. Например, если вы хотели элемент в стиле Material Design, убедитесь, что он выглядит как часть системы. Если вы хотели элемент в стиле Fluent UI, убедитесь, что он выглядит как часть системы. Если вы хотели элемент в стиле iOS, убедитесь, что он выглядит как часть системы.

Проверьте, соответствует ли результат размерам. Например, если вы хотели кнопку размером 48x48, убедитесь, что она действительно 48x48. Если вы хотели элемент, который будет работать в системе, убедитесь, что он соответствует размерам. Если вы хотели элемент, который будет работать в системе, убедитесь, что он соответствует размерам.

Проверьте, соответствует ли результат состоянию. Например, если вы хотели кнопку в состоянии нажатой, убедитесь, что она действительно нажата. Если вы хотели элемент, который будет работать в системе, убедитесь, что он соответствует состоянию. Если вы хотели элемент, который будет работать в системе, убедитесь, что он соответствует состоянию.

• Соответствие описанию
• Соответствие стилю
• Соответствие размерам
• Соответствие состоянию
• Соответствие контексту

Частые вопросы