🎨 UI Mockup Generation Prompts (พร็อมต์สำหรับการสร้างภาพหน้าต่างใช้งานแอปพลิเคชัน)
เอกสารฉบับนี้รวบรวมข้อมูลและพร็อมต์ (Prompts) สำหรับใช้ใน AI Image Generator เช่น Midjourney หรือ DALL-E 3 เพื่อสร้างรูปภาพต้นแบบหน้าจอ (UI Mockups) ของแอปพลิเคชัน SplitDee โดยคงแนวคิดสไตล์ที่สม่ำเสมอและมีความพรีเมียม
🇹🇭 ภาษาไทย (สำหรับผู้ใช้งาน)
🔮 1. แนวทางการออกแบบหลัก (Core Design System)
เพื่อให้รูปภาพหน้าจอทุกหน้าอยู่ในธีมเดียวกัน (Visual Consistency) แนะนำให้ใช้คีย์เวิร์ดควบคุมสไตล์ดังนี้:
- ธีมสี (Color Palette): Sleek Dark Mode พื้นหลังสีม่วงเข้ม/ดำน้ำเงิน (#120824, 1b0f33) ตัดด้วยสีนีออนม่วงอ่อนลาเวนเดอร์ (#C084FC) และสีนีออนสะท้อนแสง เช่น ฟ้าไอซ์บลู หรือชมพูพาสเทลเพื่อบ่งบอกสถานะการเงิน
- สไตล์ของแอป (UI Style): Glassmorphism (การ์ดกระจกโปร่งแสงมีเงาสะท้อน), แสงฟุ้งเรืองรองแบบนีออน (Glow effect), ดีไซน์โค้งมน (Rounded corners) แบบพรีเมียมสไตล์ iOS/Android สมัยใหม่
- อารมณ์และโทน (Mood & Tone): “Cozy Gamification” ผสมผสานระหว่างความน่าเชื่อถือเรื่องเงินทองเข้ากับความน่ารักขี้เล่นของเกม Tamagotchi (มีภาพสัตว์เลี้ยงหน้าตาน่ารัก ๆ และไอคอนการ์ตูนประกอบ)
🇬🇧 English (For AI Agents)
🔮 1. Master Style Guide (สำหรับก๊อปปี้ไปผสมพร็อมต์)
Copy this master style block and append it to any screen prompt to keep visual coherence:
Style Block:
Sleek mobile app UI design, dark violet and deep navy blue background, neon lavender and soft magenta accents, glassmorphic translucent panels, glowing neon highlights, clean modern sans-serif typography, cozy gamification details, cute kawaii companion game elements, Dribbble style, Behance showcase, Figma mockup, high resolution, detailed layout, user-friendly interface
📱 2. รายละเอียดพร็อมต์แบ่งตามหน้าจอ (Prompts by Screen)
หน้าจอที่ 1: หน้าจอเข้าสู่ระบบและสมัครสมาชิก (Authentication Screen)
- รายละเอียด: หน้าจอล็อกอินที่มีสไตล์ โชว์โลโก้กระเป๋าเงินเรืองแสง ช่องกรอกอีเมล/รหัสผ่าน และปุ่มล็อกอินสีนีออนม่วง
- Midjourney Prompt:
A mobile app login screen UI UX design, SplitDee, sleek dark violet and midnight blue background, a glowing neon wallet logo at the top, email and password glassmorphic text fields, vibrant neon lavender login button, clean minimalist design, modern typography, Figma, high fidelity mockup --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
A premium mobile app login interface on a smartphone screen. The app name is "SplitDee". The design features a sleek dark violet and deep navy background. At the top, there is a glowing neon icon of a digital wallet. Below it, two glassmorphic, translucent input fields for email and password. A prominent glowing neon lavender button at the bottom labeled "LOG IN". The overall style is clean, modern, and high-tech, showcasing a mockup for iOS and Android.
หน้าจอที่ 2: หน้าจอ Dashboard สรุปยอดและกลุ่ม (Dashboard Screen)
- รายละเอียด: หน้าหลักแสดงยอดเงินคงค้างภาพรวมแบบเด่นชัด (Net Balance การ์ดกระจก) และรายชื่อกลุ่มการหารเงินต่าง ๆ ที่มีเลเวลสัตว์เลี้ยงโมจิตัวเล็ก ๆ กำกับอยู่ตรงการ์ด
- Midjourney Prompt:
A mobile app dashboard screen UI, SplitDee, showing user net balance card at the top with glowing green text, list of group cards below, one card labeled "Roommates" with a small cute kawaii pet avatar (level 3 Mochi), glassmorphism design, sleek dark violet theme, neon highlights, user interface layout --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
A mobile application home dashboard screen UI design. The app shows a user's net financial balance at the top inside a translucent glassmorphic card with a glowing green neon amount. Below, a scrollable list of active expense sharing group cards. One card is named "Roommates" and displays a small cute animated pet mascot (Mochi, level 3). The theme is dark mode, dominated by deep purple and neon violet highlights. Extremely clean layout with modern typography.
หน้าจอที่ 3: หน้าจอรายละเอียดกลุ่มแชร์เงิน (Group Detail Screen)
- รายละเอียด: หน้าจอศูนย์กลางกลุ่ม มีแถบ Tab เมนู 3 ส่วน (Bills, Pet, Chat) ที่ส่วนหัวโชว์ภาพสัตว์เลี้ยงโมจิกำลังขยับดุ๊กดิ๊ก สเตตัสแถบ HP/XP และรายการยอดบิลล่าสุด
- Midjourney Prompt:
Mobile app UI design of a group expense detail screen, showing tabs for "Bills", "Pet Mochi", and "Group Chat". A cute round white pet character Mochi is smiling in a status area at the top with health and XP progress bars. List of recent bills below with translucent panels, dark violet theme, glowing neon elements --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
Mobile UI UX design of a group details page. The header features "Pet Mochi Status" displaying a cute, round, white digital pet mascot with colorful progress bars for HP (Red) and XP (Blue). Below, there is a tab bar showing icons for "Bills", "Pet Mochi", and "Chat". Underneath, a modern feed of group bills with translucent background cards, showing title, amount, and paid/unpaid status in green and red badges. Sleek dark purple theme.
หน้าจอที่ 4: หน้าต่างตั้งค่าตัวเลือกหารเงินแบบละเอียด (Split Configurator Page/Dialog)
- รายละเอียด: หน้าจอเลือกตั้งค่าว่าจะแบ่งบิลยังไง (หารเท่ากัน, แบ่งตามบาทจริง, แบ่งเป็น %, หรือบวกส่วนต่าง) หน้าจอมีกล่องตัวเลขปุ่มกดสีสันสดใสแบบโมเดิร์น
- Midjourney Prompt:
Mobile app screen UI UX for split expense configurator, showing four tabs: "Equal", "Exact", "Percent", "Adjustment". Slider bars and input fields for adjusting friend shares, glassmorphism panels, interactive dark mode purple UI, sleek buttons with neon glowing borders, functional calculator layout --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
A mobile interface showing an expense split configurator screen. It features tab selectors at the top for splitting modes: "Equally", "Exact Amount", "Percentage", and "Adjustment". Underneath, a list of group members with input fields and slide controllers to adjust each person's share. Transparent glass cards on a dark violet background, neon purple buttons, clean input elements, and modern numeric keyboard at the bottom.
หน้าจอที่ 5: หน้าจอรายละเอียดบิลและสแกนจ่ายเงิน (Bill Detail & PromptPay Payment)
- รายละเอียด: โชว์ยอดบิลที่ผู้ใช้ต้องจ่าย มี PromptPay QR Code เรืองแสงสีน้ำเงิน/ขาว พร้อมจำนวนเงินฝังอยู่ใต้คิวอาร์อย่างเด่นชัด และมีปุ่มกดอัปโหลดรูปภาพสลิปสีนีออน
- Midjourney Prompt:
Mobile app screen UI, bill detail page, showing a dynamic PromptPay QR code with payment amount embedded, glassmorphism card, bold white typography, neon cyan and violet highlights, "Upload Transfer Slip" action button at the bottom, dark purple theme, premium layout --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
Mobile application UI for paying a bill share. At the top, details of the bill: "Electricity Bill" and amount "฿600.00" in bold neon purple text. In the center, a highly detailed PromptPay QR code on a light white glassmorphic plate. Below the QR code, a large glowing violet button with the label "Upload Transfer Slip". The background is dark purple, looking very premium, sleek, and modern.
หน้าจอที่ 6: หน้าต่างสแกนสลิปอัจฉริยะด้วย AI (AI Slip Verification Interface)
- รายละเอียด: แสดงสเตตัสการสแกนสลิป โดยแสดงตัวโหลดดิ้งเรืองแสงสไตล์ไซไฟกำลังวิเคราะห์สลิป และหน้าจอผลลัพธ์ผ่านที่มีเอฟเฟกต์พลุกระดาษโปรย (Confetti) ล้อมกรอบสีเขียวสำเร็จ
- Midjourney Prompt:
Mobile app UI design showing AI scanning a bank receipt slip, circular sci-fi neon loader analysis overlay, glassmorphic slip preview, confetti celebration on successful verification, green tick mark, dark violet tech background, dynamic visual effects --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
A mobile application interface showing the progress of an AI slip scanning system. It displays a semi-transparent bank transfer slip card in the center with a glowing neon cyan scanning laser effect over it. In another state, it shows a large green glowing tick mark with colorful paper confetti exploding around it to celebrate a successful payment check. Cozy dark purple background.
หน้าจอที่ 7: หน้าจอสัตว์เลี้ยงโมจิและตู้เสื้อผ้าร้านค้า (Mochi Pet & Cosmetics Screen)
- รายละเอียด: น้องโมจิยืนอยู่ตรงกลางจอแบบน่ารักตัวโต ๆ มีเกจสถานะ และมีตู้เสื้อผ้าด้านล่างให้เลือกจิ้มซื้อหมวก แว่นตา เสื้อผ้าเพื่อสวมใส่ให้น้อง โดยแสดงแต้มสะสมที่มีอยู่
- Midjourney Prompt:
Mobile app UI of a virtual pet shop game screen, cute round white hamster mascot Mochi in the center, wardrobe item slots below with sunglasses, party hats, and crowns, price tags showing points, cute pastel buttons, cozy dark violet background with neon stars --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
A mobile game UI screen for a pet care and accessory shop. In the upper half, a large, cute, fluffy white round pet character (Mochi) is bouncing happily with status bars. In the lower half, a sliding grid grid of wardrobe accessories (crowns, cool glasses, tiny caps, scarves) locked behind points badges. The design utilizes modern dark-mode violet with cute cartoon buttons and glowing highlights.
หน้าจอที่ 8: หน้าต่างทวงเงินอัจฉริยะและสร้างมีม (AI Reminder & Meme Generator)
- รายละเอียด: หน้าต่าง Pop-up แสดงภาพมีมทวงเงินตลก ๆ (เช่น สุนัขหน้าเคร่งเครียดชูป้ายทวงเงิน) มีปุ่มเลือกโทนเสียงส่งข้อความทวงเพื่อน “สุภาพ / เป็นกันเอง” และปุ่มกดส่งเข้าห้องแชท
- Midjourney Prompt:
Mobile app popup window UI, AI Meme generator for reminders, funny dog meme picture showing payment sign, selector buttons for "Polite" and "Funny" tones, glassmorphism design overlay, dark violet app background, bright green and lavender buttons --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
A mobile user interface showing an AI payment reminder dialog. In the center, there is a popup displaying a funny meme of a cat pointing at a calendar. Above the meme are toggles to select the tone of voice: "Polite/Formal" and "Casual/Friendly". At the bottom, a prominent button labeled "Send to Chat Group". The background is dark purple, and the popup has glassmorphism translucent borders.
หน้าจอที่ 9: หน้าจอสรุปประเมินเงินรายเดือน (Monthly Summary & Analytics Screen)
- รายละเอียด: หน้าจอแสดงสถิติรายเดือน มีกราฟวงกลม (Donut Chart) โชว์หมวดหมู่ค่าใช้จ่าย และบทสรุปข้อความสั้น ๆ จาก AI ประเมินประวัติการชำระเงินของเพื่อน ๆ ในกลุ่ม
- Midjourney Prompt:
Mobile app screen UI showing expense analytics dashboard, glowing colorful donut chart representing food, travel, and shopping, short paragraph of AI analysis text, glassmorphism cards, dark violet theme, neon highlights, modern charts layout --ar 9:16 --v 6.0 - DALL-E 3 Prompt:
Mobile app analytics report screen. The screen displays a glowing donut chart dividing expenses into categories (Food, Travel, Fun) with neon green, blue, and yellow segments. Below the chart, there is a glass card containing a text box labeled "AI Summary" with a cute assistant icon, offering friendly insights about the monthly spending. Dark purple UI, modern look.
💡 3. คำแนะนำสำหรับการทดลองนำไปใช้ (Tips for Best Results)
- การคุมสี (Consistency): เมื่อป้อนพร็อมต์ใน Midjourney ให้ใส่เลขโค้ดเมล็ดพันธุ์เดียวกัน เช่น
--seed [number]หรือแนบรูปหน้าแรกที่ชอบเข้าในระบบเป็น Image Reference เสมอ - การปรับสัดส่วนรูปภาพ: ใช้คำสั่งสากลของ Midjourney
--ar 9:16เสมอ เพื่อให้ได้สเกลหน้าจอมือถือพอดี - สำหรับการใช้งาน DALL-E 3: แนะนำให้ใช้พร็อมต์ภาษาอังกฤษที่อธิบายรายละเอียด UI ให้ยาวและเห็นพฤติกรรมรูปชัดเจน เช่นการบอกตำแหน่งของปุ่ม การจัดวาง และการตั้งชื่อข้อความบนแอป