Semasa ship app atau SaaS, kalendar design sering tersekat pada tiga aset: splash / launch, kad manfaat ciri, dan ilustrasi empty state. Komponen wujud dalam Figma, tetapi screenshot store dan onboarding masih kekurangan visual; outsourcing ambil seminggu setiap pusingan sementara copy terus berubah.
Image 2 menawarkan laluan lebih baik: anggap keperluan sebagai talian pengeluaran slot visual UI—kunci warna jenama dan hierarki tipografi, kemudian ship splash → onboarding → feature cards → empty state → mock settings → bingkai store. Post ini kongsi 6 prompt image-2 diuji untuk App / UI screens sedia review.
Guna sebagai playbook product-design: satu tugas setiap bingkai, copy verbatim, semak ejaan butang dan tajuk sebelum export.
📌 Prompt di bawah dalam bahasa Inggeris (Image 2 mengendalikan bahasa Inggeris berstruktur dan teks dalam imej dengan boleh dipercayai). Semak manual copy UI, tanda dagangan, dan kontras accessibility; polish akhir masih patut ke Figma pada grid 8pt dengan komponen sebenar.
1. Mengapa Image 2 sesuai untuk kerja «App / UI screen»
Berbanding harap model ilustrasi generik bernasib baik, Image 2 menang kerana:
-
Teks dalam imej kekal boleh dibaca — tajuk splash, kad ciri tiga baris, CTA empty state—render teks peringkat benchmark ~99% mengatasi «jana kemudian tampal tipografi dalam PS» untuk penghantaran AI interface art.
-
Edit multi-turn tukar copy tanpa rosakkan layout — PM ubah satu baris onboarding; chat-replace baris itu sambil kekalkan ilustrasi dan bentuk butang—edit perbualan Image2 cemerlang di sini.
-
Kekangan gaya jadi medan design system — HEX jenama, radius sudut, kekuatan bayangan, gaya ilustrasi (flat / soft 3D) dalam setiap prompt menjadikan siri terasa seperti satu Design System.
Untuk rakan product dan design: aset visual UI boleh dijana daripada information architecture, bukan menunggu kalendar ilustrasi.
2. Aliran kerja standard (lima langkah)
-
Senaraikan slot visual UI — minimum enam: ① splash/launch ② halaman onboarding ③ kad manfaat ciri (3 mata) ④ empty state ⑤ mock settings/profile ⑥ bingkai App Store / store screenshot. Jangan sumbat app interaktif penuh dalam satu imej.
-
Tulis kekangan jenama dan tipografi — warna primer/sekunder, latar terang/gelap, had panjang tajuk; elak palsukan chrome OS berjenama (status bar generik dibenarkan).
-
Satu tugas setiap bingkai + copy verbatim — setiap satu jawab satu soalan pengguna: kesan buka pertama? mengapa kekal? bagaimana jika tiada data? rupa di store?
-
Seragamkan nisbah aspek — splash/store selalunya 9:16; feature cards 1:1 atau 4:5; kekalkan satu keluarga nisbah dalam set.
-
Tiga semakan sebelum Figma — ejaan, kontras, radius sudut vs DS—betulkan drift dengan edit multi-turn Image 2 bukannya jana semula penuh.
3. Enam prompt UI diuji (copy-paste)
Contoh produk: app produktiviti fiksyen «FlowDay.» Tukar nama dan manfaat untuk milik anda. Kekalkan aksen jenama dalam setiap prompt (contoh: #4F46E5 indigo).
Slot 1: Splash / skrin launch
Senario: kesan jenama 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.
Keputusan: visual app splash sedia review.
Slot 2: Halaman onboarding tunggal
Senario: 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.
Keputusan: copy dan art onboarding sebagai satu unit—pantas untuk baris A/B.
Slot 3: Kad manfaat ciri (tiga mata)
Senario: baris ciri laman atau header paywall dengan tiga kad 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.
Keputusan: feature cards berstruktur—bingkai yang paling perlukan ketepatan teks.
Slot 4: Skrin empty state
Senario: tiada task/notifikasi—panduan mesra, bukan «rosak.»
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.
Keputusan: empty state jadi boleh diambil tindakan bukannya kosong.
Slot 5: Mock settings / profile
Senario: tunjuk IA kepada stakeholder—bukan interaktif pun 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.
Keputusan: mock settings cukup untuk mesyuarat tanpa pura-pura boleh sentuh.
Slot 6: Bingkai store screenshot (dengan peranti)
Senario: aset listing—chrome telefon + UI utama + 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.
Keputusan: bingkai arah ASO; tukar screenshot sebenar kemudian dalam Figma.
4. Templat isi universal
Tukar hanya baris tugas dan copy pada imej setiap 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 outsource vs talian slot UI Image 2 vs kolaj icon
| Dimensi | Ilustrasi outsource penuh | Talian slot UI Image 2 | Kolaj icon / screenshot |
|---|---|---|---|
| Kelajuan semakan copy | Perlahan (lukis semula) | Pantas (multi-turn satu baris) | Pantas tetapi kelihatan murah |
| Konsistensi design system | Bergantung brief | HEX / medan gaya kuncinya | Mudah drift |
| Peringkat terbaik | Versi jenama utama | Iterasi mingguan, review, draf ASO | Draf dalaman sahaja |
| Risiko utama | Jadual | Mesti proof teks & grid manusia | Jurang conversion / polish |
6. Siapa patut guna kaedah ini?
✅ PM / ketua projek
Isi splash, empty state, dan arah store dengan Image 2 sebelum review—kurang slaid «biarkan kosong».
✅ UI / UX designer
Anggap image-2 sebagai lapisan penerokaan visual: kunci warna dan tipografi, jana, kemudian selaraskan komponen sebenar dalam Figma.
✅ Indie builder / pasukan kecil
Tiada ilustrator khusus? Satu keluarga prompt tetap hasilkan app splash dan feature cards koheren.
✅ Growth & ASO ops
Caption store kerap berubah—edit multi-turn mengatasi buat semula seluruh bingkai peranti.
7. Tiga mod kegagalan biasa
-
❌ Satu imej palsukan app penuh boleh sentuh — Image 2 jadi UI soup berserabut. Pisah mengikut slot; simpan prototype interaksi dalam Figma/code.
-
❌ Copy kabur seperti «sesetengah teks ciri» — drift tipografi bunuh penghantaran UI design. Tajuk dan butang mesti
exactly: "...". -
❌ Butiran jenama OS dipalsukan tanpa semak kontras — status bar generik cukup; proof accessibility terang-on-terang sebelum export.
8. Penutup
Image 2 untuk visual App / UI bukan «roll satu imej lebih flashy»—ia kunci jenama → slot UI → copy verbatim → polish multi-turn → kemas Figma.
Lain kali kurang splash, feature card, atau empty state, jangan kolaj stock. Buka workbench Image2 dan jalankan enam slot ini—anda dapat set AI interface seragam, boleh dibaca, sedia review, iterasi, dan permulaan bingkai store.
Splash pegang jenama, kad nyatakan nilai, empty state tunjuk langkah seterusnya—itulah gelung product-design image-2.
Nota praktikal; prompt bebas disalin dan disesuaikan. Sahkan copy, tanda dagangan, dan peraturan store screenshot sebelum ship.
