Как писать промпты GPT Image для UI-мокапов
Как составлять промпты для GPT Image 2, чтобы получать дашборды, экраны приложений и мокапы устройств с предсказуемой компоновкой и читаемыми надписями.
Хорошие промпты GPT Image для UI-мокапов называют продукт, экран и его основные компоненты, устройство или рамку, в которой он показан, визуальный стиль и точный текст, который должен читаться. Перечисляйте компоненты в порядке чтения и делайте текст на экране коротким: несколько крупных надписей модель отрисовывает гораздо надёжнее, чем абзацы интерфейсного текста.
Описывайте экран как вайрфрейм
Начните с того, для чего нужен экран и что на нём есть, в том порядке, в каком его читает пользователь: навигация, шапка, основной контент, дополнительные панели и действия. Модель располагает компоненты предсказуемее, когда они перечислены, а не подразумеваются стилевым словом вроде «современный дашборд».
- Назовите продукт и экран: «аналитический дашборд для SaaS-сервиса биллинга» или «экран онбординга для приложения медитаций».
- Перечислите области по порядку: боковая навигация, верхняя панель с поиском, три карточки KPI, линейный график и таблица последних транзакций.
- Укажите плотность: просторные отступы, одинаковые размеры карточек, чёткое выравнивание.
Выберите подачу: плоский экран, устройство или сцена
Решите, что вам нужно: плоский снимок интерфейса для кейса, мокап устройства для лендинга или постановочная фотосцена для маркетинга. Для каждого варианта нужны свои формулировки.
- Плоский экран: «плоский скриншот UI, без рамки устройства, 16:9».
- Устройство: «на тонком ноутбуке под небольшим углом, экран обращён к камере, мягкие блики».
- Сцена: «ноутбук на деревянном столе при естественном дневном свете, малая глубина резкости»; интерфейс при этом получится мельче и будет хуже читаться.
Текст интерфейса: коротко и точно
Нечитаемый текст — самая частая проблема сгенерированных интерфейсов. Возьмите в кавычки несколько важных надписей, а остальное пусть обозначается строками-заполнителями.
- Указывайте заголовки и кнопки дословно в кавычках: «Выручка», «Улучшить тариф».
- Для основного текста просите строки-заполнители.
- Избегайте длинных таблиц с реальными данными; вместо этого попросите пять строк с примерами транзакций.
Задайте визуальную систему
Стилевые слова вроде «глассморфизм» помогают, но короткое описание визуальной системы даёт более стабильный результат на нескольких экранах.
- Цвет: фон, поверхности, основной акцент и цвета статусов.
- Шрифт: гарнитура без засечек, чёткая иерархия начертаний и контраст размеров между заголовками и подписями.
- Компоненты: радиус скругления, тени, обводки и стиль иконок.
Чек-лист промпта
- Указаны продукт, назначение экрана и аудитория.
- Компоненты перечислены в порядке чтения.
- Выбрана подача: плоский снимок, устройство или сцена.
- Читаемым должен быть только короткий текст в кавычках.
- Заданы цвета, шрифты и стиль компонентов.
- Соотношение сторон соответствует задаче: 16:9 для десктопа, 9:16 для телефона.
Частые вопросы
Может ли GPT Image 2 создать пригодный к работе дизайн интерфейса?
Он создаёт убедительные визуальные концепты и мокапы для презентаций, лендингов и мудбордов. Воспринимайте результат как визуальный референс, а не как готовый дизайн для продакшена: отступы, иконки и мелкий текст недостаточно точны, чтобы передавать их в разработку как спецификацию.
Как получить читаемый текст в UI-мокапе?
Ограничьте читаемый текст несколькими надписями в кавычках, сделайте их крупными, а всё остальное опишите как строки-заполнители. Короткие слова, набранные чистым шрифтом без засечек, отрисовываются надёжнее всего.
Как сохранить единый стиль на нескольких экранах?
Вставляйте один и тот же абзац с описанием визуальной системы в каждый промпт и меняйте только описание экрана. Экраны, сгенерированные по одному шаблону, получаются ближе друг к другу, чем экраны, каждый раз описанные с нуля.
Похожие шаблоны промптов
Примените гайд на реальных промптах
Посмотрите шаблоны промптов из соответствующей категории библиотеки и адаптируйте их структуру под свой процесс работы с изображениями.