Промпты UI для GPT Image 2.5: макет для передачи

Полезная подсказка пользовательского интерфейса читается как спецификация продукта. Он называет холст, иерархию, реальный контент, компоненты, состояния, адаптивные правила и приемочные проверки. Визуальный стиль приходит после этих решений. Этот порядок дает GPT Image 2.5 достаточную структуру для создания макета, который дизайнер может просмотреть, а разработчик — интерпретировать.

Начните с Домашняя страница изображения3, откройте Изображение GPT 2.5. Рабочая область Flare и держите Страница модели изображения GPT 2.5 поблизости, пока вы проверяете подсказки ниже. Flare — это практический первый проход для быстрой итерации. Sunburst — это вариант для более позднего обзора с более высокой точностью. Протестируйте оба варианта на своих собственных экранах, а не рассматривайте это различие как универсальный эталон.

Изображение и короткое видео выше являются редакционными иллюстрациями этого рабочего процесса. Они не являются результатами тестов или скриншотами поставляемого продукта.

Быстрый ответ: подскажите системе за экраном

Не начинайте с «создать современную финансовую панель». Этот запрос оставляет модели изобретать продукт, данные, навигацию и определение современного. Вместо этого дайте ему экранный контракт:

ПРОДУКТ: аналитика подписки для небольшой компании-разработчика программного обеспечения.
ЗАДАНИЕ ПОЛЬЗОВАТЕЛЯ: найдите причину ежемесячного падения доходов менее чем за 30 секунд.
CANVAS: настольное веб-приложение, 1440 x 1024, ширина контента 1200.
ИЕРАРХИЯ: заголовок страницы, диапазон дат, четыре сводных показателя, диаграмма тенденций, таблица изменений.
НАВИГАЦИЯ: левый рельс с выбранным обзором; Платежи, клиенты и настройки ниже.
ТОЧНАЯ КОПИЯ: используйте только метки и значения, указанные в блоке ДАННЫЕ.
КОМПОНЕНТЫ: метрическая карточка, сегментированный контроль даты, линейная диаграмма, сортируемая таблица, чип состояния.
СОСТОЯНИЯ: включите видимый шаблон загрузки и вариант пустой таблицы на небольшой лист состояний.
СТИЛЬ: строгий пользовательский интерфейс продукта B2B, нейтральный фон, синий акцент, компактное пространство.
ИЗБЕГАЙТЕ: вымышленных логотипов, поддельных отзывов, декоративных стеклянных эффектов, мелкого нечитаемого текста.
ВЫВОД: один главный экран плюс узкая полоска состояний компонентов.

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

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

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

Изображение также является сплющенным артефактом. Он не содержит имен компонентов, токенов, точек останова, семантической структуры, порядка клавиатуры или контрактов данных. Относитесь к этому как к визуальному предложению. В пакете передачи обслуживания должны быть указаны правила, невидимые в пикселях.

Используйте макет, чтобы ответить на визуальные вопросы: имеет ли смысл порядок информации? Основное действие очевидно? Может ли плотная область дышать? Используйте письменные требования к поведению: что происходит во время загрузки данных? Какие столбцы исчезают ниже 768 пикселей? Где появляется текст проверки? Что остается доступным без цвета?

Семь полей в контракте экрана

Каждое приглашение пользовательского интерфейса, ориентированное на производство, должно охватывать семь полей. Они могут поместиться на одной странице текста.

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

КОНТЕНТНАЯ ПОЛИТИКА
Используйте именно эти навигационные метки: Домой, Путешествия, Сохраненные, Профиль.
Используйте именно этот заголовок страницы: Планируйте свою следующую поездку.
Используйте эти образцы карточек: Побег с побережья, Исследователь города, Горные тропы.
Не добавляйте цены, рейтинги, количество отзывов, значки, пункты назначения или рекламные материалы.
Если текстовая область не указана, оставьте ее пустой, а не придумывайте текст.

Выберите Flare или Sunburst следующим решением.

Выбор модели должен соответствовать решению, которое вам нужно принять. Используйте Flare, пока макет все еще движется: порядок экранов, масштаб компонентов, плотность, навигация и адаптивная структура. Более быстрые итерации имеют значение, поскольку большинство ранних черновиков следует отбросить.

Попробуйте Sunburst после того, как будет заключен контракт на экранизацию, и вам поможет подробный обзор. Это может включать в себя идеальное изображение для презентации, тонкое визуальное направление или сложное редактирование, требующее более тщательного изучения. Более высокая визуальная точность не устраняет неполные требования к продукту. Расплывчатое приглашение Sunburst все равно может привести к нечеткому экрану.

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

Запрос на мобильную регистрацию

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

Создайте трехэкранный процесс адаптации мобильного помощника по календарю.

ХОЛСТ
— Три монтажных области в стиле iPhone с разрешением 390 x 844, показанные рядом.
- Соблюдайте безопасные зоны. Используйте одну последовательную систему интервалов из 8 пунктов.

ЭКРАН 1: ПОДКЛЮЧЕНИЕ
- Рубрика: «Подключите свой календарь»
- Вспомогательная линия: «Увидеть открытое время, не меняя существующие события».
- Основная кнопка: «Подключить календарь»
- Вторичная текстовая ссылка: «Не сейчас».

ЭКРАН 2: ВЫБЕРИТЕ
- Рубрика: «Когда нам напомнить?»
- Три варианта радио: за 10 минут, за 30 минут, за 1 час.
- Выберите «За 30 минут до».

ЭКРАН 3: ГОТОВО
- Рубрика: «Вы готовы»
- Покажите компактный образец программы с двумя мероприятиями.
- Основная кнопка: «Открыть мой день»

СИСТЕМНЫЕ ПРАВИЛА
- Сохраняйте положение кнопок стабильным на всех трех экранах.
- Используйте один стиль иллюстрации и одно семейство значков.
- Показывать прогресс как 1 из 3, 2 из 3, 3 из 3.
- Никаких отзывов, цен, градиентов, логотипов или дополнительных шагов по настройке.

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

Приглашение на панель управления SaaS

Для подсказки на панели управления нужен вопрос, а не просто список виджетов. Приведенное ниже задание пользователя определяет иерархию страниц.

Разработайте настольную панель мониторинга SaaS для руководителя операций поддержки.
Пользователь должен определить, какая категория заявок вызвала сегодняшнюю задержку.

ПЛАНИРОВКА
- Холст 1440 x 1024 с левой навигационной полосой размером 240 пикселей.
- Заголовок: «Обзор поддержки», местная дата, выбор команды.
- Первый ряд: открыто, ожидание, решено сегодня, средний первый ответ.
- Основной регион: график отставания по часам слева, таблица категорий справа.
- Нижняя область: пять самых старых открытых билетов с указанием владельца и возраста.

ДАННЫЕ
Открыть 184; Ожидание 36; Решено сегодня 92; Медиана первого ответа 18 мин.
Категории: Биллинг 71, Логин 48, Генерация 39, Экспорт 26.
Не добавляйте проценты или заявления о тенденциях.

ПОДСКАЗКИ ВЗАИМОДЕЙСТВИЯ
- Выбрана строка выставления счетов, которая фильтрует почасовой график.
- Над диаграммой появляется один видимый элемент управления «Очистить фильтр».
- Индикатор сортировки отображается только в столбце Невыполненные работы.

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

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

Подсказка на странице цен

Страницы с ценами терпят неудачу, когда визуальный акцент незаметно меняет предложение. Управляйте названиями планов, ценами, включенными элементами, исключениями и метками CTA.

Создайте адаптивную страницу цен для приложения для командных заметок.

ПЛАНЫ
Бесплатно: 0 долларов США, 3 проекта, 1 ГБ хранилища, поддержка сообщества. Призыв к действию: «Начните бесплатно».
Команда: 12 долларов США на участника в месяц, неограниченное количество проектов, 50 ГБ хранилища, поддержка по электронной почте.
Призыв к действию: «Начать командное испытание». Отметьте этот план как «Самый выбранный».
Бизнес: 28 долларов США на участника в месяц, единый вход, журнал аудита, приоритетная поддержка.
Призыв к действию: «Связаться с отделом продаж».

НАСТОЛЬНЫЙ СТОЛ
- Холст размером 1440 пикселей, три столбца одинакового плана, по центру группы.
- Размещайте примечание к ежемесячному счету рядом с ценой, а не в дальнем нижнем колонтитуле.

МОБИЛЬНЫЙ
- Холст 390 пикселей, планы складываются: Бесплатно, Команда, Бизнес.
- Держите каждую цену и призыв к действию видимыми без горизонтальной карусели.

ПРАВИЛА
- Не изобретайте скидки, годовые цены, гарантии, количество клиентов или особенности.
- Используйте флажки только для включенных элементов. Записывайте исключения в виде обычного текста.
- Увеличьте контраст границ команды, не увеличивая ее цену.

После генерации сравните планы построчно. Отсутствие исключения или придуманная скидка — это ошибка продукта, даже если страница выглядит заслуживающей доверия. Перестройте точный текст цен в коде, а не рассматривайте созданную типографику как производственное произведение.

Подсказка о пустом, загрузке и ошибке

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

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

Показать четыре версии одной и той же панели контента размером 720 x 420:
1. ПО УМОЛЧАНИЮ: три строки проекта с именем, владельцем, статусом и датой обновления.
2. ЗАГРУЗКА: три нейтральных скелетных ряда без поддельных слов и цифр.
3. ПУСТОЙ: заголовок «Проектов пока нет», одно предложение, кнопка «Создать проект».
4. ОШИБКА: заголовок «Не удалось загрузить проекты», сообщение «Проверьте подключение и повторите попытку».
   основная кнопка «Повторить попытку», дополнительная текстовая ссылка «Просмотреть статус».

СОХРАНИТЬ
Размер панели, положение заголовка, выравнивание столбца, фон, граница, радиус,
масштаб шрифта, интервал и размещение действий.

ПОДСКАЗКИ ДОСТУПНОСТИ
Не сообщайте об ошибке или состоянии загрузки только по цвету.
Сохраняйте контуры фокуса видимыми при повторной попытке и создании проекта.
Не размещайте единственное объяснение внутри значка.

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

Адаптивная подсказка для мобильных и настольных компьютеров

Два несвязанных артборда не определяют адаптивное поведение. Сначала укажите инварианты, а затем перечислите разрешенные преобразования.

Создайте парные экраны мобильного и настольного компьютеров для одного и того же продукта по планированию путешествий.

ИНВАРИАНТЫ
- Тот же порядок содержимого: поиск, фильтр по категориям, рекомендуемая поездка, оставшиеся поездки.
- Одни и те же названия карт и места назначения на обоих полотнах.
— Тот же синий акцент, обработка изображения, семейство шрифтов и радиус карты.
- Поиск — основное действие при обеих ширинах.

МОБИЛЬНЫЙ С РАЗРЕШЕНИЕМ 390 ПИКСЕЛЕЙ
- Нижняя навигация: «Домой», «Поиск», «Сохранено», «Профиль».
- Карточки поездок в один столбец с заполнением страниц размером 16 пикселей.
- Фишки категорий прокручиваются горизонтально по одной строке.

ДЕСКТОП С РАЗРЕШЕНИЕМ 1440 ПИКСЕЛЕЙ
- Верхняя навигация с разделами «Поездки», «Исследование», «Сохраненные», «Профиль».
- Сетка поездок из трех столбцов внутри области содержимого размером 1200 пикселей.
- Поле поиска находится в заголовке; Фишки категорий располагаются над сеткой.

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

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

Запрос настроек и разрешений

Страницы настроек показывают, понимает ли макет поведение системы. Группируйте контроль по последствиям и затрудняйте случайное инициирование деструктивных действий.

Создайте страницу настроек рабочего стола для общего рабочего пространства.

РАЗДЕЛЫ
Профиль: имя, роль, действие с изображением профиля.
Уведомления: выбор дайджеста электронной почты, переключатель обновлений продукта, переключатель оповещений об упоминаниях.
Безопасность: ссылка на активные сеансы, кнопка смены пароля, двухфакторный статус.
Опасная зона рабочего пространства: кнопка выхода из рабочего пространства.

ПОДСКАЗКИ ПОВЕДЕНИЯ
- Показывать сохраненное состояние рядом с профилем после редактирования.
— Показывать неактивную кнопку «Сохранить», если ни одно поле не изменилось.
- Присвойте переключателям отдельные состояния включения и выключения с помощью текстовых меток.
- Поместите команду «Покинуть рабочее место» в отдельную опасную зону с поясняющей надписью.
- Не показывать деструктивное модальное окно подтверждения на том же главном экране.

ПЛАНИРОВКА
1440 x 1024, левая полоса 240 пикселей, столбец настроек 720 пикселей, большие промежутки между разделами.
Используйте обычный пользовательский интерфейс продукта, а не маркетинговую целевую страницу.

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

Восстановить один регион без потери экрана

Полезная подсказка редактирования называет один дефект, одну область, замену и инварианты. Не смешивайте ремонт типографики с изменением цвета и изменением макета.

РЕДАКТИРУЙТЕ ТОЛЬКО ЗАГОЛОВОК ПАНЕЛИ РАБОЧЕГО СРЕДСТВА.
Замените заголовок страницы «Обзор поддержки» на «Обзор поддержки».
Держите заголовок на одной строке и сохраняйте его текущее положение, размер, толщину и цвет шрифта.
Сохраняйте дату, выбор команды, шкалу навигации, метрики, диаграмму, таблицу, интервалы,
фон, границы и все остальные видимые слова.
Не добавляйте новые метки или значки.

Проверяйте весь вывод после каждого редактирования. Исправленный заголовок не поможет, если в модели также были изменены две метрики. Если появятся сопутствующие изменения, вернитесь к самой чистой предыдущей версии и еще больше сузьте запрос на редактирование. Для обеспечения единообразия изображения на последующих экранах в рабочий процесс справочного материала в фирменном стиле объясняется, как сохранить фиксированными правила идентификации, палитры, освещения и композиции. Для плотной визуальной иерархии используйте Инфографический быстрый рабочий процесс.

Создайте пакет передачи разработчику

Окончательный макет — это один элемент в пакете передачи, а не весь пакет. Прикрепите принятый экран и запишите решения, которые не могут нести пиксели.

1. Назовите каждый экран и его задание пользователя.
2. Перечислите точные данные утвержденной копии и образца. Отметьте каждый заполнитель.
3. Сопоставьте повторяющиеся визуальные части с предлагаемыми компонентами.
4. Запишите маркеры расстояния, типа, цвета, радиуса и высоты в качестве значений реализации.
5. Определите состояния загрузки, пустого, ошибки, отключенного, успешного и разрешения.
6. Правила точки останова состояния как инварианты и преобразования.
7. Добавьте проверки клавиатуры, фокуса, метки, контрастности, целевого размера, уменьшения движения и устранения ошибок.
8. Составляйте список нерешенных вопросов по продукту владельцу, а не позволяйте коду молча отвечать на них.

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

Аудит экрана перед реализацией

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

При полном разрешении ищите орфографию, несоответствующие интервалы, искаженные значки, случайные перекрытия и вымышленные данные. При разрешении 390 пикселей убедитесь, что заголовок, основное действие и сообщение о состоянии остаются читаемыми. Дизайн, который работает только с размером презентации, не готов к реализации.

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

Многоразовое финальное приглашение

В приведенном ниже шаблоне требования к продукту важнее визуального оформления. Удалите неприменимые поля, но не заменяйте их прилагательными.

Создайте [пару мобильных/компьютерных/адаптивных] интерфейсов для [продукта].

РАБОТА ПОЛЬЗОВАТЕЛЯ
[Одна задача, которую должен выполнить пользователь.]

ХОЛСТ
[Точные размеры, ширина контента, безопасные области, сетка и внешние отступы.]

ЗАКАЗ ИНФОРМАЦИИ
1. [Первый регион и его цель]
2. [Второй регион и его цель]
3. [Третий регион и его цель]

ТОЧНОЕ СОДЕРЖАНИЕ
[Утвержденная навигация, заголовки, метки, значения, сообщения и текст призыва к действию.]
Не придумывайте текст или данные за пределами этого блока.

КОМПОНЕНТЫ
[Именованные элементы управления, карточки, таблицы, навигация, диаграммы, формы и повторяющиеся шаблоны.]

ШТАТЫ
[По умолчанию, наведение, фокус, загрузка, пусто, ошибка, отключено, успех, разрешение.]

ОТВЕТСТВЕННЫЕ ПРАВИЛА
Сохранять: [инварианты содержания, порядка, действия и зрительной системы].
Преобразование: [навигация, столбцы, перенос, скрытие или изменение порядка разрешены для каждой ширины].

ВИЗУАЛЬНОЕ НАПРАВЛЕНИЕ
[Конкретный стиль продукта, роли типа, роли палитры, плотность, границы и изображения.]

ПРОВЕРКА КАЧЕСТВА
Никаких придуманных логотипов, данных, характеристик, отзывов, значков, водяных знаков, неразборчивых микрокопий,
непоследовательные стили компонентов или сигналы состояния только цвета.

Запустите шаблон в Изображение GPT 2.5. Рабочая область Flare. Вернитесь к Домашняя страница изображения3, если хотите сравнить другие рабочие процессы с изображениями, и используйте Страница модели изображения GPT 2.5, чтобы выбрать маршрут следующего поколения. Сохраните вместе выигрышное приглашение, принятое изображение, историю ремонта и письменные правила передачи. Именно этот пакет превращает сгенерированный экран в проверяемое решение о продукте.

Часто задаваемые вопросы

Какую модель GPT Image 2.5 следует использовать для макетов пользовательского интерфейса?

Начните с Flare, когда макет и контент все еще меняются. Тестируйте Sunburst, когда кадр обзора с более высокой точностью может изменить решение. Запишите модель и настройки, поскольку результаты зависят от фактической рабочей нагрузки.

Может ли образ GPT 2.5 генерировать готовый к использованию код пользовательского интерфейса?

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

Как обеспечить точность текста в макете пользовательского интерфейса?

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

Как мне подсказать мобильную и настольную версии?

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

Должен ли я создавать каждое состояние приложения в одном изображении?

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

Доказывает ли отточенный макет доступность?

Нет. Проверьте семантику, порядок клавиатуры, фокус, метки, контрастность, целевой размер, настройки движения и устранение ошибок во реализованном интерфейсе.