ให้ AI เห็นตัวอย่างหน้าจอที่คุณต้องการ

เมื่อสั่ง AI ให้ทำแอพหรือเว็บไซต์ การบอกเพียงว่าอยากได้งานสวยอาจทำให้หน้าตาที่ได้ยังไม่ตรงใจ ลองเริ่มจากภาพหน้าจอจริงที่คุณชอบ แล้วแนบให้ AI เห็นว่าต้องการรูปแบบการจัดวางและการใช้งานอย่างไร Mobbin เป็นคลังตัวอย่าง UI ของแอพและเว็บไซต์ที่ช่วยให้หาภาพเหล่านี้ได้ง่ายขึ้น

1. เข้า Mobbin แล้วเลือกแอพที่อยากศึกษา

เปิด mobbin.com แล้วเลือกหมวด Apps หรือ Sites ตามงานที่จะทำ ในคลิปโมชิเปิดตัวอย่าง Airbnb เพื่อดูว่าหน้าจอแต่ละส่วนจัดวางอย่างไร รวมทั้งยกตัวอย่าง Duolingo และเว็บไซต์อื่น ๆ ที่อยู่ในคลัง

ตัวอย่างหน้าจอ Airbnb และรายการ Flows ใน Mobbin จากคลิปจริง
หน้าจอจริงจากตัวอย่างในคลิป MOSHIKUB

2. ดูทั้งหน้าจอและขั้นตอนการใช้งาน

อย่าดูเพียงหน้าที่สวยที่สุด ลองดูว่าคนใช้เดินจากหน้าหนึ่งไปอีกหน้าอย่างไร ตัวอย่าง Airbnb ในคลิปมีทั้งการค้นหาที่พัก แผนที่ และรายการ Flows ให้เห็นกระบวนการใช้งาน เลือกส่วนที่ตรงกับแอพของคุณเพื่อใช้เป็นแนวทาง

3. Save หรือ Copy ภาพที่ต้องการ

คลิปแสดงปุ่ม Save และ Copy บนภาพตัวอย่าง ใช้ภาพที่เลือกเป็นข้อมูลอ้างอิงสำหรับคุยกับ AI แทนการพยายามอธิบายทุกตำแหน่งด้วยข้อความ หรือเปิดแต่ละแอพเพื่อถ่ายหน้าจอเองทั้งหมด

4. แนบภาพให้ AI แล้วบอกสิ่งที่จะนำมาใช้

นำภาพอ้างอิงไปแนบในเครื่องมือ AI ที่คุณใช้พัฒนาแอพ อธิบายว่าต้องการส่วนไหน เช่น รูปแบบหน้าค้นหา การจัดรายการ หรือขั้นตอนเลือกวันที่ พร้อมบอกข้อมูลและการใช้งานของแอพคุณเอง ภาพช่วยให้สื่อสารหน้าตางานได้ชัดขึ้น แต่ยังต้องตรวจผลลัพธ์และทดลองกดใช้งานจริง

เริ่มจากภาพอ้างอิงที่เกี่ยวกับงานของคุณ

Mobbin ระบุว่ามีตัวอย่างหน้าจอมากกว่า 600,000 หน้าจอ และมีทั้งตัวอย่างแอพกับเว็บไซต์ เริ่มสำรวจได้จากการสมัครใช้งานฟรี ส่วนขอบเขตการเข้าถึงและฟีเจอร์เพิ่มเติมให้ตรวจจากแพ็กเกจปัจจุบันบนเว็บ เลือกภาพที่ช่วยอธิบายงานของคุณ แทนการเก็บทุกภาพโดยยังไม่รู้ว่าจะใช้กับหน้าจอไหน

ไม่มี Prompt

บทความนี้ไม่มี Prompt แจก

อยากเห็นวิธีทำทีละขั้น?

ถ้าอ่านแล้วยังไม่เข้าใจ ดูวิธีทำในคลิป YouTube Shorts นี้ แล้วลองทำตามไปพร้อมกันได้เลย