Saat ship app atau SaaS, kalender design sering macet di tiga aset: splash / launch, kartu manfaat fitur, dan ilustrasi empty state. Komponen sudah ada di Figma, tapi screenshot store dan onboarding masih kurang visual; outsourcing butuh seminggu per putaran sementara copy terus berubah.
Image 2 menawarkan jalur lebih baik: anggap kebutuhan sebagai jalur produksi slot visual UI—kunci warna brand dan hierarki tipografi, lalu ship splash → onboarding → feature cards → empty state → mock settings → bingkai store. Post ini berbagi 6 prompt image-2 teruji untuk App / UI screens siap review.
Gunakan sebagai playbook product-design: satu tugas per frame, copy verbatim, cek ejaan tombol dan judul sebelum export.
📌 Prompt di bawah dalam bahasa Inggris (Image 2 menangani bahasa Inggris terstruktur dan teks dalam gambar dengan andal). Verifikasi manual copy UI, merek dagang, dan kontras accessibility; polish akhir tetap sebaiknya di Figma pada grid 8pt dengan komponen nyata.
1. Mengapa Image 2 cocok untuk pekerjaan «App / UI screen»
Dibanding berharap model ilustrasi generik kebetulan berhasil, Image 2 menang karena:
-
Teks dalam gambar tetap terbaca — judul splash, kartu fitur tiga baris, CTA empty state—render teks tier benchmark ~99% mengalahkan «generate lalu tempel tipografi di PS» untuk pengiriman AI interface art.
-
Edit multi-turn mengganti copy tanpa merusak layout — PM mengubah satu baris onboarding; chat-replace baris itu sambil mempertahankan ilustrasi dan bentuk tombol—edit percakapan Image2 unggul di sini.
-
Batasan gaya jadi field design system — HEX brand, radius sudut, kekuatan bayangan, gaya ilustrasi (flat / soft 3D) di setiap prompt membuat seri terasa seperti satu Design System.
Untuk partner product dan design: aset visual UI bisa dihasilkan dari information architecture, bukan menunggu kalender ilustrasi.
2. Alur kerja standar (lima langkah)
-
Daftar slot visual UI — minimal enam: ① splash/launch ② halaman onboarding ③ kartu manfaat fitur (3 poin) ④ empty state ⑤ mock settings/profile ⑥ bingkai App Store / store screenshot. Jangan menjejalkan app interaktif penuh dalam satu gambar.
-
Tulis batasan brand dan tipografi — warna primer/sekunder, latar terang/gelap, batas panjang judul; hindari memalsukan chrome OS bermerek (status bar generik boleh).
-
Satu tugas per frame + copy verbatim — masing-masing menjawab satu pertanyaan pengguna: kesan buka pertama? mengapa tetap? bagaimana jika tidak ada data? tampilannya di store?
-
Seragamkan rasio aspek — splash/store sering 9:16; feature cards 1:1 atau 4:5; pertahankan satu keluarga rasio dalam satu set.
-
Tiga cek sebelum Figma — ejaan, kontras, radius sudut vs DS—perbaiki drift dengan edit multi-turn Image 2 alih-alih generate ulang penuh.
3. Enam prompt UI teruji (copy-paste)
Contoh produk: app produktivitas fiktif «FlowDay.» Ganti nama dan manfaat untuk milik Anda. Pertahankan aksen brand di setiap prompt (contoh: #4F46E5 indigo).
Slot 1: Splash / layar launch
Skenario: kesan brand cold-start—marka di tengah + tagline pendek.
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.
Hasil: visual app splash siap review.
Slot 2: Halaman onboarding tunggal
Skenario: halaman nilai buka pertama—copy + ilustrasi.
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.
Hasil: copy dan art onboarding sebagai satu unit—cepat untuk baris A/B.
Slot 3: Kartu manfaat fitur (tiga poin)
Skenario: baris fitur situs atau header paywall dengan tiga kartu setara.
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.
Hasil: feature cards terstruktur—frame yang paling butuh akurasi teks.
Slot 4: Layar empty state
Skenario: tidak ada task/notifikasi—panduan ramah, bukan «rusak.»
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.
Hasil: empty state jadi actionable alih-alih kosong.
Slot 5: Mock settings / profile
Skenario: tunjukkan IA ke stakeholder—non-interaktif boleh.
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.
Hasil: mock settings cukup untuk rapat tanpa pura-pura bisa disentuh.
Slot 6: Bingkai store screenshot (dengan perangkat)
Skenario: aset listing—chrome ponsel + UI kunci + caption atas.
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.
Hasil: bingkai arah ASO; tukar screenshot nyata nanti di Figma.
4. Template isi universal
Ubah hanya baris tugas dan copy pada gambar per 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. Ilustrasi outsourcing vs jalur slot UI Image 2 vs kolase icon
| Dimensi | Ilustrasi outsourcing penuh | Jalur slot UI Image 2 | Kolase icon / screenshot |
|---|---|---|---|
| Kecepatan revisi copy | Lambat (gambar ulang) | Cepat (multi-turn satu baris) | Cepat tapi terlihat murah |
| Konsistensi design system | Tergantung brief | HEX / field gaya menguncinya | Mudah drift |
| Tahap terbaik | Versi brand besar | Iterasi mingguan, review, draft ASO | Draft internal saja |
| Risiko utama | Jadwal | Harus proof teks & grid manusia | Celah konversi / polish |
6. Siapa yang sebaiknya memakai metode ini?
✅ PM / pemimpin proyek
Isi splash, empty state, dan arah store dengan Image 2 sebelum review—lebih sedikit slide «biarkan kosong».
✅ UI / UX designer
Anggap image-2 sebagai lapisan eksplorasi visual: kunci warna dan tipografi, generate, lalu selaraskan komponen nyata di Figma.
✅ Indie builder / tim kecil
Tidak punya ilustrator khusus? Satu keluarga prompt tetap menghasilkan app splash dan feature cards koheren.
✅ Growth & ASO ops
Caption store sering berubah—edit multi-turn mengalahkan membuat ulang seluruh bingkai perangkat.
7. Tiga mode kegagalan umum
-
❌ Satu gambar memalsukan app penuh yang bisa disentuh — Image 2 jadi UI soup berantakan. Pisah per slot; simpan prototype interaksi di Figma/code.
-
❌ Copy samar seperti «beberapa teks fitur» — drift tipografi membunuh pengiriman UI design. Judul dan tombol harus
exactly: "...". -
❌ Detail merek OS dipalsukan tanpa cek kontras — status bar generik cukup; proof accessibility terang-on-terang sebelum export.
8. Penutup
Image 2 untuk visual App / UI bukan «roll satu gambar lebih flashy»—melainkan kunci brand → slot UI → copy verbatim → polish multi-turn → finish Figma.
Lain kali kurang splash, feature card, atau empty state, jangan kolase stock. Buka workbench Image2 dan jalankan enam slot ini—Anda dapat set AI interface seragam, terbaca, siap review, iterasi, dan awal bingkai store.
Splash menahan brand, kartu menyatakan nilai, empty state menunjukkan langkah berikutnya—itulah loop product-design image-2.
Catatan praktis; prompt bebas disalin dan disesuaikan. Konfirmasi copy, merek dagang, dan aturan store screenshot sebelum ship.
