UI-промпти для GPT Image 2.5: макет для розробки

Корисна підказка інтерфейсу читається як специфікація продукту. Він називає полотно, ієрархію, реальний вміст, компоненти, стани, адаптивні правила та перевірки прийняття. Візуальний стиль приходить після цих рішень. Цей порядок надає зображенню GPT 2.5 достатню структуру для створення макета, який дизайнер може переглянути, а розробник – інтерпретувати.

Почніть із Домашня сторінка Image3, відкрийте Робоча область Flare GPT Image 2.5 і тримайте Сторінка моделі GPT Image 2.5 поблизу, поки перевірятимете підказки нижче. Flare — це практичний перший прохід для швидкої ітерації. Sunburst — це варіант для пізнішої рамки перегляду з вищою точністю. Перевірте обидва на власних екранах, а не розглядайте цю різницю як універсальний еталон.

Зображення та коротке відео вище є редакційними ілюстраціями цього робочого процесу. Вони не є результатами тестування чи знімками екрана відвантаженого продукту.

Швидка відповідь: підказка системи за екраном

Не починайте зі «зробіть сучасну фінансову панель». Цей запит залишає модель винаходити продукт, дані, навігацію та визначення сучасного. Натомість дайте йому екранний контракт:

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

Ця підказка робить важливі рішення перевіреними. Якщо діаграма домінує на сторінці, ви можете змінити ієрархію. Якщо порожній стан відсутній, ви можете запитати його безпосередньо. Підказка лише про настрій дає вам менше ручок для ремонту.

Чому привабливі макети інтерфейсу користувача зазнають невдачі під час передачі

Згенерований екран може виглядати закінченим, залишаючи його поведінку невизначеною. Навігація може містити п’ять пунктів призначення на комп’ютері та сім на мобільному пристрої. Картка може відображати стан успішного виконання, але не завантажувати чи помилку. Таблиця даних може використовувати правдоподібні числа, яких ніхто не надав. Ці прогалини стають рішеннями про продукт під час впровадження, коли їх вирішення повільніше та дорожче.

Зображення також є сплощеним артефактом. Він не містить імен компонентів, токенів, точок зупину, семантичної структури, порядку клавіатури або контрактів даних. Поставтеся до цього як до візуальної пропозиції. Пакет передачі має містити правила, невидимі в пікселях.

Використовуйте макет, щоб відповісти на візуальні запитання: чи має сенс порядок інформації? Основна дія очевидна? Чи може дихати густий край? Використовуйте письмові вимоги до поведінки: що відбувається під час завантаження даних? Які стовпці зникають нижче 768 пікселів? Де відображається текст перевірки? Що залишається доступним без кольору?

Сім полів у контракті екрану

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

Напишіть вміст окремим блоком. Якщо модель може винайти наповнювач, скажіть де. Якщо кожна мітка контролюється, цитуйте кожну мітку. Зберігайте діаграми якісними, якщо ви не надаєте перевірені цифри. Реалістична діаграма все ще підтверджує факти.

ПОЛІТИКА ВМІСТУ
Використовуйте саме ці мітки навігації: Дім, Подорожі, Збережено, Профіль.
Використовуйте саме цю назву сторінки: Плануйте свою наступну подорож.
Використовуйте ці зразки карток: Втеча з узбережжя, Дослідник міста, Гірські стежки.
Не додавайте ціни, рейтинги, кількість відгуків, значки, пункти призначення чи рекламну копію.
Якщо область тексту не вказана, залиште її пустою, а не створюйте текст.

Виберіть Flare або Sunburst наступним рішенням

Вибір моделі повинен йти за рішенням, яке вам необхідно прийняти. Використовуйте Flare, коли макет ще рухається: порядок екрану, масштаб компонентів, щільність, навігація та адаптивна структура. Швидші ітерації мають значення, оскільки більшість ранніх чернеток слід відкинути.

Спробуйте Sunburst після завершення контракту на екран, і вам допоможе детальний огляд. Це може включати відшліфоване презентаційне зображення, деталізований візуальний напрямок або складне редагування, яке потребує більш ретельного вивчення. Вища візуальна точність не виправляє неповну вимогу до продукту. Розпливчаста підказка Sunburst все одно може призвести до нечіткого зображення екрана.

Генератор зображень ШІ дає ширшу точку входу, тоді як Бібліотека запитів GPT Image 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 хв.
Категорії: Billing 71, Login 48, Generation 39, Export 26.
Не додавайте відсотки або тенденції.

ВЗАЄМОДІЯ
- Вибрано платіжний рядок і фільтрує погодинний графік.
- Над діаграмою з’являється один видимий елемент керування «Очистити фільтр».
- Індикатор сортування відображається лише в стовпці Backlog.

СТИЛЬ
Компактний операційний інтерфейс користувача, біле полотно, текст темним чорнилом, виділення синім.
Уникайте декоративних ілюстрацій, великих карток, ефектів скла та фальшивих сповіщень.

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

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

Сторінки з цінами дають збій, коли візуальний акцент мовчки змінює пропозицію. Керуйте назвами планів, цінами, включеними елементами, виключеннями та мітками CTA.

Створіть адаптивну цінову сторінку для командного додатка для створення нотаток.

ПЛАНИ
Безкоштовно: $0, 3 проекти, 1 ГБ пам’яті, підтримка спільноти. CTA: «Почати безкоштовно».
Команда: 12 доларів США на учасника щомісяця, необмежена кількість проектів, 50 ГБ пам’яті, підтримка електронною поштою.
CTA: «Почати командне випробування». Позначте цей план «Найбільш вибраним».
Бізнес: 28 доларів США на учасника щомісяця, система єдиного входу, журнал аудиту, пріоритетна підтримка.
CTA: «Зв'язатися з відділом продажів».

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

МОБІЛЬНИЙ
- 390-піксельне полотно, складені плани Вільний, Командний, Бізнес.
- Тримайте кожну ціну та CTA видимими без горизонтальної каруселі.

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

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

Порожнє, завантаження та повідомлення про помилку

Генеруйте стани після того, як еталонний екран матиме стабільну систему компонентів. Повторно використовуйте ті самі розміри контейнера, щоб макет не переходив між станами.

Використовуючи екран затвердженого списку проектів як візуальне посилання, створіть аркуш стану.

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

ЗБЕРЕГТИ
Розмір панелі, положення заголовка, вирівнювання стовпців, фон, рамка, радіус,
масштаб шрифту, інтервал і розташування дії.

ПОКАЗКИ ДОСТУПНОСТІ
Не повідомляйте про помилку або стан завантаження лише кольором.
Тримайте контури фокуса видимими в проекті «Повторити спробу та створити».
Не розміщуйте єдине пояснення всередині значка.

Ілюстрація вище є посиланням на QA для цього посібника. Він показує категорії для перевірки, а не бібліотеку робочих компонентів.

Чуйне повідомлення для мобільних пристроїв і комп’ютерів

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

Створіть спарені екрани мобільного та робочого столу для одного продукту для планування подорожей.

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

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

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

НЕ РОБИТЬ
Змініть копію картки, додайте пункти призначення, приховайте дію пошуку або створіть окрему візуальну тему.

Цей парний запит робить відмінності навмисними. Під час передачі обслуговування перетворюйте кожне перетворення на правило: нижня навігація стає верхньою навігацією в точці зупинки на робочому столі; перелік карт змінюється з одного на три стовпці; елемент керування пошуком переміщується, але зберігає те саме завдання та мітку.

Запит на налаштування та дозволи

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

Створіть сторінку налаштувань робочого столу для спільного робочого простору.

РОЗДІЛИ
Профіль: ім'я, роль, дія зображення профілю.
Сповіщення: вибір дайджесту електронної пошти, перемикач оновлень продукту, перемикач сповіщень про згадки.
Безпека: посилання на активні сесії, кнопка зміни пароля, двофакторний статус.
Небезпечна зона робочого простору: кнопка виходу з робочого простору.

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

МАКЕТ
1440 x 1024, 240-піксельна ліва панель, 720-піксельна колонка налаштувань, великі проміжки між розділами.
Використовуйте звичайний інтерфейс продукту, а не маркетингову цільову сторінку.

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

Відновіть одну область без втрати екрана

Корисна підказка редагування називає один дефект, одну область, заміну та інваріанти. Не змішуйте ремонт типографіки з редизайном кольору та зміною макета.

РЕДАГУВАЙТЕ ЛИШЕ ЗАГОЛОВОК ІНФОРМАЦІЙНОЇ ПАНЕЛІ НАСТОЛЬНИКА.
Замініть назву сторінки «Огляд підтримки» на «Огляд підтримки».
Зберігайте назву в одному рядку та зберігайте її поточну позицію, розмір шрифту, вагу та колір.
Зберігати дату, селектор команд, навігаційну панель, показники, діаграму, таблицю, інтервали,
фон, межі та будь-яке інше видиме слово.
Не додавайте нові мітки чи значки.

Перевіряйте повний результат після кожного редагування. Виправлена ​​назва не допомагає, якщо модель також змінила два показники. Якщо з’являються супутні зміни, поверніться до найчистішої попередньої версії та ще більше звузіть запит на редагування. Для візуальної узгодженості на наступних екранах довідковий робочий процес у стилі бренду пояснює, як зберегти фіксовані правила ідентичності, палітри, освітлення та композиції. Для щільної візуальної ієрархії використовуйте швидкий робочий процес інфографіки.

Створіть пакет передачі розробника

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

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

Розробники повинні мати право виправляти неможливу геометрію, недоступні взаємодії та умовності платформи. Макет встановлює намір. Він не замінює робоче програмне забезпечення.

Перевірте екран перед впровадженням

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

У повній роздільній здатності подивіться на орфографію, непослідовні інтервали, спотворені значки, випадкові накладання та вигадані дані. При 390 пікселях переконайтеся, що заголовок, основна дія та повідомлення про стан залишаються читабельними. Дизайн, який працює лише в розмірі презентації, не готовий до реалізації.

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

Остаточна підказка для багаторазового використання

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

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

РОБОТА КОРИСТУВАЧА
[Одне завдання, яке користувач повинен виконати.]

ПОЛОТНО
[Точні розміри, ширина вмісту, безпечні зони, сітка та зовнішнє покриття.]

ІНФОРМАЦІЙНИЙ НАКАЗ
1. [Перший регіон і його призначення]
2. [Другий регіон і його призначення]
3. [Третій регіон та його призначення]

ТОЧНИЙ ЗМІСТ
[Схвалена навігація, заголовки, мітки, значення, повідомлення та копія CTA.]
Не придумуйте текст або дані за межами цього блоку.

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

ДЕРЖАВИ
[За умовчанням, наведення, фокус, завантаження, порожній, помилка, вимкнено, успіх, дозвіл.]

ЧУЙНІ ПРАВИЛА
Зберігати: [зміст, порядок, дії та інваріанти візуальної системи].
Трансформація: [навігація, стовпці, обгортання, приховування або зміна порядку дозволені для кожної ширини].

ВІЗУАЛЬНЕ НАПРАВЛЕННЯ
[Конкретний стиль продукту, ролі типів, ролі палітри, щільність, межі та зображення.]

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

Запустіть шаблон у Робоча область Flare GPT Image 2.5. Поверніться до Домашня сторінка Image3, якщо хочете порівняти інші робочі процеси зображень, і використовуйте Сторінка моделі GPT Image 2.5, щоб вибрати маршрут наступного покоління. Зберігайте виграшну підказку, прийняте зображення, історію ремонту та письмові правила передачі разом. Цей пакет перетворює згенерований екран на рішення про продукт, яке можна перевірити.

Часті запитання

Яку модель GPT Image 2.5 слід використовувати для макетів інтерфейсу користувача?

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

Чи може GPT Image 2.5 генерувати готовий для виробництва код інтерфейсу користувача?

Ні. Результатом є візуальне посилання, а не дерево компонентів або специфікація поведінки. Створіть інтерфейс у коді та перевірте його на відповідність письмовим критеріям прийняття.

Як зберегти точність тексту в макеті інтерфейсу?

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

Як підказувати мобільну та настільну версії?

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

Чи генерувати кожен стан програми в одному зображенні?

Спочатку стабілізуйте один контрольний екран. Потім надішліть запит на компактний аркуш стану, який повторно використовує його розміри, тип, інтервали, кольори та елементи керування.

Чи перевірений макет підтверджує доступність?

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