Під час випуску застосунку або SaaS дизайн-календар застрягає на трьох ассетах: splash / launch, feature benefit cards і empty-state illustrations. Компоненти вже є в Figma, але скріншоти для стору та онбординг досі без візуалу; аутсорс — тиждень на раунд, а копірайт постійно змінюється.
Image 2 пропонує кращий шлях: розглядайте потребу як конвеєр UI visual slots — зафіксуйте колір бренду та типографічну ієрархію, потім випускайте splash → onboarding → feature cards → empty state → settings mock → store frame. У цьому пості — 6 перевірених image-2 промптів для App / UI screens, готових до ревʼю.
Використовуйте як playbook для product-design: одна задача на кадр, копірайт дослівно, перед експортом перевірте орфографію кнопок і заголовків.
📌 Промпти нижче англійською (Image 2 надійно обробляє структуровану англійську та текст у зображенні). Вручну перевірте UI-копірайт, торгові марки та доступний контраст; фінальна поліровка все одно має лягти в Figma на 8pt-сітці з реальними компонентами.
1. Чому Image 2 підходить для роботи «App / UI screen»
Порівняно з надією, що універсальна ілюстраційна модель «влучить», Image 2 перемагає тому що:
-
Текст у зображенні залишається читабельним — заголовки splash, трирядкові feature cards, CTA empty state — бенчмарк-рівень ~99% text rendering краще, ніж «згенерувати і потім вставити тип у PS» для поставки AI interface art.
-
Багатходові правки міняють копірайт, не ламаючи layout — PM змінює один рядок онбордингу; у чаті замініть лише цей рядок, зберігши ілюстрацію та форму кнопки — тут сяють conversational edits Image2.
-
Обмеження стилю стають полями design system — brand HEX, corner radius, сила тіні, стиль ілюстрації (flat / soft 3D) у кожному промпті роблять серію схожою на один Design System.
Для product і design партнерів: UI visual assets можна генерувати з information architecture, а не чекати ілюстраційний календар.
2. Стандартний workflow (пʼять кроків)
-
Складіть список UI visual slots — мінімум шість: ① splash/launch ② onboarding page ③ feature benefit cards (3 пункти) ④ empty state ⑤ settings/profile mock ⑥ App Store / store screenshot frame. Ніколи не вміщуйте повноцінний інтерактивний застосунок в одне зображення.
-
Запишіть обмеження бренду та типографіки — primary/secondary colors, light/dark ground, ліміти довжини заголовків; уникайте підробки торгових OS chrome (generic status bars — норм).
-
Одна задача на кадр + дослівний копірайт — кожен відповідає на одне питання користувача: враження при першому відкритті? навіщо залишатися? що якщо немає даних? як це виглядає в сторі?
-
Уніфікуйте aspect ratios — splash/store часто 9:16; feature cards 1:1 або 4:5; тримайте одне сімейство ratio всередині набору.
-
Три перевірки перед Figma — орфографія, контраст, corner radius vs DS — виправляйте drift багатходовими правками Image 2, а не повним re-roll.
3. Шість перевірених UI-промптів (копіювати-вставити)
Приклад продукту: вигаданий productivity-застосунок «FlowDay». Замініть імʼя та переваги на свої. Тримайте brand accent у кожному промпті (приклад: #4F46E5 indigo).
Slot 1: Splash / launch screen
Сценарій: враження бренду при cold start — центрований mark + короткий tagline.
App splash / launch screen mock with Image 2 for mobile UI.
Vertical 9:16, clean modern iOS-like frame (generic status bar, no trademarked icons).
Centered app mark: simple indigo rounded-square icon with white "F" monogram.
Headline exactly: "FlowDay"
Subline exactly: "Plan less. Finish more."
Background: soft indigo-to-white gradient, subtle geometric glow, ample padding.
Sharp legible type, Image2 text accuracy, premium SaaS look.
Do not clutter with fake notifications. No watermark.
Результат: app splash visual, готовий до ревʼю.
Slot 2: Onboarding single page
Сценарій: сторінка цінності при першому відкритті — копірайт + ілюстрація.
Mobile onboarding screen UI mock using Image 2.
Vertical 9:16, light mode, generous bottom padding for a primary button.
Top illustration: soft 3D calendar and checkmarks, brand color #4F46E5 accents.
Title exactly: "Your day, in one timeline"
Body exactly: "Drag tasks into focus blocks. FlowDay keeps priorities visible."
Primary button label exactly: "Continue"
Keep layout airy, 8pt rhythm feel, Image 2 commercial UI quality.
Do not invent extra menus. Do not misspell.
Результат: onboarding copy і art як єдине ціле — швидко для A/B рядків.
Slot 3: Feature benefit cards (three points)
Сценарій: ряд feature на сайті або header paywall з трьома рівними картками.
App feature benefit cards board with Image 2 (UI marketing).
1:1 or 4:5, white background, three equal cards in a row with soft shadow.
Card icons in #4F46E5. Exact English labels:
Card1 title: "Focus Blocks" / line: "Timeboxed deep work"
Card2 title: "Smart Reminders" / line: "Nudge only what matters"
Card3 title: "Weekly Review" / line: "See progress at a glance"
Modern SaaS marketing UI, crisp type, Image2 text accuracy.
No fake App Store badges. No overcrowded icons.
Результат: структуровані feature cards — кадр, де найбільше потрібна точність тексту.
Slot 4: Empty-state screen
Сценарій: немає задач/сповіщень — дружній підказ, а не «усе зламалося».
Empty-state mobile screen with Image 2 for product UI.
Vertical 9:16, light gray background, large friendly illustration center:
soft 3D empty inbox with a single indigo plus badge.
Title exactly: "Nothing here yet"
Body exactly: "Create your first focus block to start the day."
Secondary text button exactly: "Create task"
Clean, calm, accessible contrast, Image 2 UI illustration quality.
Do not make it look like an error. No scary red alerts.
Результат: empty state стає actionable, а не порожнім.
Slot 5: Settings / profile mock
Сценарій: показати IA стейкхолдерам — non-interactive допустимо.
Settings / profile screen mock with Image 2 (non-interactive UI visual).
Vertical 9:16, light mode list UI, rounded group cells.
Header: avatar circle + name "Alex Chen" + plan chip "Pro".
List rows with exact labels: "Notifications" / "Calendars" / "Appearance" / "Export Data".
Accent switches and chevrons in #4F46E5, generous spacing, SF-like but generic typography.
Image2 clean UI mock quality. Do not copy real iOS glyphs trademarked details.
No tiny unreadable text.
Результат: settings mock достатньо хороший для зустрічей, без вдавання, що це tappable.
Slot 6: Store screenshot frame (with device)
Сценарій: listing asset — phone chrome + ключовий UI + верхній caption.
App Store screenshot composition with Image 2.
Vertical 9:16 marketing frame: large caption on top, phone device mock below.
Caption exactly: "Focus blocks that actually stick"
Inside the phone: a clean task timeline UI using brand #4F46E5, legible list titles.
Soft studio shadow under device, light gray backdrop, premium DTC style.
Image 2 commercial ASO visual. Exact text, no gibberish.
Do not invent fake star ratings. Do not overcrowded stickers.
Результат: ASO direction frame; пізніше підмініть реальні скріншоти в Figma.
4. Універсальний fill-in template
Змінюйте лише job line та on-image copy для кожного slot:
Image 2 App / UI visual slot.
Brand lock: primary #[HEX], [light|dark] mode, [flat|soft-3D] illustration style.
Frame job (ONE only): [splash / onboarding / feature cards / empty state / settings mock / store screenshot].
Aspect: [9:16 | 1:1 | 4:5].
On-image copy exactly: "[titles/buttons]" — verbatim, no extra claims.
Do not: [fake OS trademarks / unreadable microcopy / cluttered chrome].
Output: review-ready UI visual, Image2 quality.
5. Аутсорс-ілюстрація vs Image 2 UI slots vs icon collage
| Вимір | Повний аутсорс ілюстрації | Image 2 UI slot line | Icon / screenshot collage |
|---|---|---|---|
| Швидкість правки копірайту | Повільно (перемальовування) | Швидко (multi-turn один рядок) | Швидко, але виглядає дешево |
| Узгодженість design system | Залежить від brief | HEX / style fields фіксують | Легко drift |
| Найкраща стадія | Великі версії бренду | Щотижнева ітерація, ревʼю, ASO drafts | Лише внутрішні чернетки |
| Головний ризик | Розклад | Потрібна ручна перевірка type & grid | Розрив conversion / polish |
6. Кому підходить цей метод?
✅ PM / project leads
Заповніть splash, empty states і store direction з Image 2 до ревʼю — менше слайдів «залишити порожнім».
✅ UI / UX designers
Вважайте image-2 шаром visual exploration: зафіксуйте color і type, згенеруйте, потім вирівняйте реальні компоненти в Figma.
✅ Indie builders / small teams
Немає dedicated illustrator? Одне prompt family все одно дає coherent app splash і feature cards.
✅ Growth & ASO ops
Store captions часто змінюються — multi-turn edits краще, ніж переробляти весь device frame.
7. Три типові failure mode
-
❌ Одне зображення, що імітує повноцінний tappable app — Image 2 перетворюється на cluttered UI soup. Діліть по slot; інтерактивні прототипи залишайте в Figma/code.
-
❌ Розмитий копірайт на кшталт «some feature text» — type drift вбиває поставку UI design. Заголовки та кнопки мають бути
exactly: "...". -
❌ Підробка торгових OS details без contrast checks — generic status bars достатньо; перед export перевірте light-on-light accessibility.
8. Висновок
Image 2 для App / UI visuals — не «крутити flashier single», а brand lock → UI slots → verbatim copy → multi-turn polish → Figma finish.
Наступного разу, коли бракує splash, feature card або empty state, не робіть stock collage. Відкрийте Image2 workbench і прогоніть ці шість slots — отримаєте unified, readable AI interface set, готовий до ревʼю, ітерації та store-frame starts.
Splash тримає бренд, cards формулюють цінність, empty state показує наступний крок — це image-2 product-design loop.
Практичні нотатки; промпти можна вільно копіювати та адаптувати. Перед релізом перевірте копірайт, торгові марки та правила store screenshots.
