Khi ship app hoặc SaaS, lịch design thường kẹt ở ba asset: splash / launch, thẻ lợi ích tính năng và minh họa empty state. Component đã có trong Figma, nhưng screenshot store và onboarding vẫn thiếu hình; thuê ngoài mất một tuần mỗi vòng trong khi copy cứ đổi.
Image 2 mở con đường tốt hơn: coi nhu cầu như dây chuyền sản xuất slot hình UI—khóa màu thương hiệu và phân cấp chữ, rồi ship splash → onboarding → feature cards → empty state → mock settings → khung store. Bài này chia sẻ 6 prompt image-2 đã thử nghiệm cho App / UI screens sẵn sàng review.
Dùng như playbook product-design: một nhiệm vụ mỗi khung, copy nguyên văn, kiểm tra chính tả nút và tiêu đề trước khi export.
📌 Prompt bên dưới bằng tiếng Anh (Image 2 xử lý tiếng Anh có cấu trúc và chữ trên ảnh đáng tin cậy). Tự kiểm tra copy UI, nhãn hiệu và độ tương phản accessibility; polish cuối vẫn nên về Figma trên lưới 8pt với component thật.
1. Vì sao Image 2 phù hợp công việc «App / UI screen»
So với hy vọng model minh họa generic may mắn, Image 2 thắng vì:
-
Chữ trên ảnh vẫn đọc được — tiêu đề splash, thẻ tính năng ba dòng, CTA empty state—render chữ mức benchmark ~99% vượt «generate rồi dán chữ trong PS» cho giao AI interface art.
-
Chỉnh sửa đa lượt đổi copy không phá layout — PM đổi một dòng onboarding; chat-replace dòng đó giữ minh họa và hình nút—chỉnh sửa hội thoại Image2 tỏa sáng ở đây.
-
Ràng buộc style thành trường design system — HEX thương hiệu, bo góc, độ đậm bóng, style minh họa (flat / soft 3D) trong mọi prompt khiến series cảm giác như một Design System.
Với product và design partner: tài sản hình UI có thể sinh từ kiến trúc thông tin, không phải chờ lịch minh họa.
2. Quy trình chuẩn (năm bước)
-
Liệt kê slot hình UI — tối thiểu sáu: ① splash/launch ② trang onboarding ③ thẻ lợi ích tính năng (3 điểm) ④ empty state ⑤ mock settings/profile ⑥ khung App Store / store screenshot. Không nhét cả app tương tác vào một ảnh.
-
Viết ràng buộc thương hiệu và chữ — màu chính/phụ, nền sáng/tối, giới hạn độ dài tiêu đề; tránh giả mạo chrome OS có nhãn hiệu (thanh trạng thái generic được).
-
Một nhiệm vụ mỗi khung + copy nguyên văn — mỗi khung trả lời một câu hỏi người dùng: ấn tượng mở đầu? vì sao ở lại? không có dữ liệu thì sao? trông thế nào trên store?
-
Thống nhất tỷ lệ khung hình — splash/store thường 9:16; feature cards 1:1 hoặc 4:5; giữ một họ tỷ lệ trong một bộ.
-
Ba kiểm tra trước Figma — chính tả, tương phản, bo góc vs DS—sửa lệch bằng chỉnh sửa đa lượt Image 2 thay vì generate lại toàn bộ.
3. Sáu prompt UI đã thử (copy-paste)
Sản phẩm ví dụ: app năng suất giả định «FlowDay.» Đổi tên và lợi ích cho của bạn. Giữ accent thương hiệu trong mọi prompt (mẫu: #4F46E5 indigo).
Slot 1: Splash / màn hình launch
Kịch bản: ấn tượng thương hiệu cold-start—logo giữa + tagline ngắn.
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.
Kết quả: hình app splash sẵn sàng review.
Slot 2: Trang onboarding đơn
Kịch bản: trang giá trị lần mở đầu—copy + minh họa.
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.
Kết quả: copy và art onboarding như một khối—nhanh cho A/B dòng chữ.
Slot 3: Thẻ lợi ích tính năng (ba điểm)
Kịch bản: hàng tính năng site hoặc header paywall với ba thẻ bằng nhau.
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.
Kết quả: feature cards có cấu trúc—khung cần độ chính xác chữ nhất.
Slot 4: Màn hình empty state
Kịch bản: không task/thông báo—hướng dẫn thân thiện, không phải «hỏng rồi.»
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.
Kết quả: empty state trở thành hành động được thay vì trống rỗng.
Slot 5: Mock settings / profile
Kịch bản: trình bày IA cho stakeholder—không tương tác vẫn được.
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.
Kết quả: mock settings đủ cho họp mà không giả vờ có thể chạm.
Slot 6: Khung store screenshot (có thiết bị)
Kịch bản: asset listing—khung điện thoại + UI chính + caption trên.
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.
Kết quả: khung hướng ASO; đổi screenshot thật sau trong Figma.
4. Mẫu điền chung
Chỉ đổi dòng nhiệm vụ và copy trên ảnh theo từng 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. Minh họa thuê ngoài vs dây slot UI Image 2 vs collage icon
| Chiều | Minh họa thuê ngoài toàn bộ | Dây slot UI Image 2 | Collage icon / screenshot |
|---|---|---|---|
| Tốc độ sửa copy | Chậm (vẽ lại) | Nhanh (đa lượt một dòng) | Nhanh nhưng trông rẻ |
| Nhất quán design system | Tùy brief | HEX / trường style khóa | Dễ lệch |
| Giai đoạn phù hợp nhất | Phiên bản thương hiệu lớn | Lặp hàng tuần, review, bản nháp ASO | Chỉ bản nháp nội bộ |
| Rủi ro chính | Lịch trình | Phải kiểm tra chữ & lưới thủ công | Khoảng cách chuyển đổi / polish |
6. Ai nên dùng phương pháp này?
✅ PM / trưởng dự án
Lấp splash, empty state và hướng store bằng Image 2 trước review—ít slide «để trống» hơn.
✅ UI / UX designer
Coi image-2 như lớp khám phá hình ảnh: khóa màu và chữ, generate, rồi căn component thật trong Figma.
✅ Indie builder / team nhỏ
Không có illustrator riêng? Một họ prompt vẫn cho app splash và feature cards nhất quán.
✅ Growth & ASO ops
Caption store đổi thường xuyên—chỉnh sửa đa lượt thắng làm lại cả khung thiết bị.
7. Ba lỗi thường gặp
-
❌ Một ảnh giả cả app có thể chạm — Image 2 thành UI soup lộn xộn. Tách theo slot; giữ prototype tương tác trong Figma/code.
-
❌ Copy mơ hồ kiểu «một số text tính năng» — lệch chữ giết giao UI design. Tiêu đề và nút phải
exactly: "...". -
❌ Giả chi tiết nhãn hiệu OS không kiểm tra tương phản — thanh trạng thái generic là đủ; kiểm tra accessibility sáng-trên-sáng trước export.
8. Kết luận
Image 2 cho hình App / UI không phải «roll một ảnh đẹp hơn»—mà là khóa thương hiệu → slot UI → copy nguyên văn → polish đa lượt → hoàn thiện Figma.
Lần sau thiếu splash, feature card hay empty state, đừng collage stock. Mở workbench Image2 và chạy sáu slot này—bạn sẽ có bộ AI interface thống nhất, đọc được, sẵn sàng review, lặp và khởi đầu khung store.
Splash giữ thương hiệu, thẻ nói giá trị, empty state chỉ bước tiếp theo—đó là vòng lặp product-design image-2.
Ghi chú thực chiến; prompt tự do copy và chỉnh. Xác nhận copy, nhãn hiệu và quy tắc store screenshot trước khi ship.
