เวลา ship แอปหรือ SaaS ปฏิทิน design มักติดที่ asset สามอย่าง: splash / launch, การ์ดประโยชน์ฟีเจอร์ และ ภาพประกอบ empty state มี component ใน Figma แล้ว แต่ screenshot store และ onboarding ยังขาดภาพ; จ้างภายนอกใช้เวลาหนึ่งสัปดาห์ต่อรอบ ขณะที่ copy เปลี่ยนตลอด
Image 2 เปิดทางที่ดีกว่า: มองความต้องการเป็น สายการผลิต slot ภาพ UI—ล็อกสีแบรนด์และลำดับชั้นตัวอักษร แล้ว ship splash → onboarding → feature cards → empty state → mock settings → เฟรม store โพสต์นี้แชร์ 6 prompt image-2 ที่ทดสอบแล้วสำหรับ App / UI screens พร้อม review
ใช้เป็น playbook product-design: หนึ่งงานต่อเฟรม copy ตามต้นฉบับ ตรวจสอบสะกดปุ่มและหัวข้อก่อน export
📌 Prompt ด้านล่างเป็นภาษาอังกฤษ (Image 2 จัดการภาษาอังกฤษมีโครงสร้างและข้อความบนภาพได้น่าเชื่อถือ) ตรวจสอบ copy UI เครื่องหมายการค้าและความคมชัด accessibility ด้วยตนเอง; polish สุดท้ายควรกลับไป Figma บน grid 8pt ด้วย component จริง
1. ทำไม Image 2 เหมาะกับงาน «App / UI screen»
เทียบกับหวัง model ภาพประกอมทั่วไปโชคดี Image 2 ชนะเพราะ:
-
ข้อความบนภาพยังอ่านได้ — หัว splash, การ์ดฟีเจอร์สามบรรทัด, CTA empty state—การ render ข้อความระดับ benchmark ~99% ชนะ «generate แล้ววางตัวอักษรใน PS» สำหรับส่ง AI interface art
-
แก้หลายรอบสลับ copy โดยไม่พัง layout — PM เปลี่ยนบรรทัด onboarding หนึ่งบรรทัด; chat-replace บรรทัดนั้นคงภาพประกอบและรูปปุ่ม—การแก้แบบสนทนา Image2 เด่นตรงนี้
-
ข้อจำกัดสไตล์กลายเป็นฟิลด์ design system — HEX แบรนด์, มุมโค้ง, ความแรงเงา, สไตล์ภาพ (flat / soft 3D) ในทุก prompt ทำให้ชุดรู้สึกเป็น Design System เดียว
สำหรับ product และ design partner: asset ภาพ UI สร้างจาก information architecture ได้ ไม่ใช่รอปฏิทินภาพประกอบ
2. Workflow มาตรฐาน (ห้าขั้นตอน)
-
รายการ slot ภาพ UI — อย่างน้อยหก: ① splash/launch ② หน้า onboarding ③ การ์ดประโยชน์ฟีเจอร์ (3 จุด) ④ empty state ⑤ mock settings/profile ⑥ เฟรม App Store / store screenshot อย่ายัดแอปโต้ตอบเต็มในรูปเดียว
-
เขียนข้อจำกัดแบรนด์และตัวอักษร — สีหลัก/รอง, พื้น light/dark, จำกัดความยาวหัวข้อ; หลีกเลี่ยงปลอม chrome OS ที่มีเครื่องหมายการค้า (status bar ทั่วไปได้)
-
หนึ่งงานต่อเฟรม + copy ตามต้นฉบับ — แต่ละเฟรมตอบคำถามผู้ใช้หนึ่งข้อ: ความประทับใจเปิดครั้งแรก? ทำไมอยู่ต่อ? ไม่มีข้อมูลแล้วไง? ดูใน store อย่างไร?
-
รวมอัตราส่วนภาพ — splash/store มัก 9:16; feature cards 1:1 หรือ 4:5; คงครอบครัวอัตราส่วนเดียวในชุด
-
สามการตรวจก่อน Figma — สะกด, ความคมชัด, มุมโค้ง vs DS—แก้ drift ด้วยแก้หลายรอบ Image 2 แทน generate ใหม่ทั้งหมด
3. หก prompt UI ที่ทดสอบแล้ว (copy-paste)
ผลิตภัณฑ์ตัวอย่าง: แอป productivity สมมติ «FlowDay.» เปลี่ยนชื่อและประโยชน์เป็นของคุณ คง accent แบรนด์ในทุก prompt (ตัวอย่าง: #4F46E5 indigo)
Slot 1: Splash / หน้า launch
สถานการณ์: ความประทับใจแบรนด์ cold-start—โลโก้กลาง + 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 พร้อม review
Slot 2: หน้า onboarding เดี่ยว
สถานการณ์: หน้าคุณค่าเปิดครั้งแรก—copy + ภาพประกอบ
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.
ผลลัพธ์: copy และ art onboarding เป็นหน่วยเดียว—เร็วสำหรับ A/B บรรทัด
Slot 3: การ์ดประโยชน์ฟีเจอร์ (สามจุด)
สถานการณ์: แถวฟีเจอร์ไซต์หรือ 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
สถานการณ์: ไม่มี task/การแจ้งเตือน—คำแนะนำเป็นมิตร ไม่ใช่ «พังแล้ว»
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 กลายเป็นขั้นตอนที่ทำได้ แทนที่ว่างเปล่า
Slot 5: Mock settings / profile
สถานการณ์: แสดง IA ให้ stakeholder—ไม่โต้ตอบก็ได้
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.
ผลลัพธ์: mock settings พอสำหรับประชุมโดยไม่แกล้งว่าแตะได้
Slot 6: เฟรม store screenshot (มีอุปกรณ์)
สถานการณ์: asset listing—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; เปลี่ยน screenshot จริงทีหลังใน Figma
4. เทมเพลตกรอกทั่วไป
เปลี่ยนเฉพาะบรรทัดงานและ 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 สาย slot UI Image 2 vs collage icon
| มิติ | ภาพประกอบจ้างภายนอกเต็มรูปแบบ | สาย slot UI Image 2 | Collage icon / screenshot |
|---|---|---|---|
| ความเร็วแก้ copy | ช้า (วาดใหม่) | เร็ว (หลายรอบหนึ่งบรรทัด) | เร็วแต่ดูถูก |
| ความสอดคล้อง design system | ขึ้นกับ brief | HEX / ฟิลด์สไตล์ล็อก | drift ง่าย |
| ขั้นที่เหมาะที่สุด | เวอร์ชันแบรนด์ใหญ่ | iteration รายสัปดาห์, review, draft ASO | draft ภายในเท่านั้น |
| ความเสี่ยงหลัก | ตารางเวลา | ต้องตรวจข้อความ & grid ด้วยมือ | ช่องว่าง conversion / polish |
6. ใครควรใช้วิธีนี้?
✅ PM / หัวหน้าโปรเจกต์
เติม splash, empty state และทิศทาง store ด้วย Image 2 ก่อน review—สไลด์ «เว้นว่าง» น้อยลง
✅ UI / UX designer
มอง image-2 เป็นชั้นสำรวจภาพ: ล็อกสีและตัวอักษร generate แล้วจัด component จริงใน Figma
✅ Indie builder / ทีมเล็ก
ไม่มี illustrator เฉพาะ? ครอบครัว prompt เดียวยังได้ app splash และ feature cards ที่สอดคล้อง
✅ Growth & ASO ops
caption store เปลี่ยนบ่อย—แก้หลายรอบชนะการทำเฟรมอุปกรณ์ใหม่ทั้งชุด
7. สามโหมดล้มเหลวที่พบบ่อย
-
❌ รูปเดียวปลอมแอปแตะได้เต็มรูปแบบ — Image 2 กลายเป็น UI soup รก แยกตาม slot; เก็บ prototype โต้ตอบใน Figma/code
-
❌ Copy คลุมเครืออย่าง «ข้อความฟีเจอร์บางอย่าง» — drift ตัวอักษรฆ่าการส่ง UI design หัวข้อและปุ่มต้อง
exactly: "..." -
❌ ปลอมรายละเอียดเครื่องหมายการค้า OS โดยไม่ตรวจความคมชัด — status bar ทั่วไปพอ; ตรวจ accessibility สว่างบนสว่างก่อน export
8. ปิดท้าย
Image 2 สำหรับภาพ App / UI ไม่ใช่ «roll ภาพเดียวฉูดฉาดกว่า»—แต่คือ ล็อกแบรนด์ → slot UI → copy ตามต้นฉบับ → polish หลายรอบ → จบใน Figma
ครั้งหน้าที่ขาด splash, feature card หรือ empty state อย่า collage stock เปิด workbench Image2 แล้วรันหก slot นี้—คุณจะได้ชุด AI interface ที่เป็นเอกภาพ อ่านได้ พร้อม review, iteration และเริ่มเฟรม store
Splash ถือแบรนด์ การ์ดบอกคุณค่า empty state ชี้ขั้นถัดไป—นั่นคือวงจร product-design image-2
หมายเหตุเชิงปฏิบัติ; prompt คัดลอกและปรับได้อิสระ ยืนยัน copy เครื่องหมายการค้าและกฎ store screenshot ก่อน ship
