เอเจนต์ AI มีความพร้อมในการช่วยให้วิสัยทัศน์เกี่ยวกับ UI ของแอป Android ของคุณเป็นจริง โดยใช้ Jetpack Compose และปฏิบัติตามแนวทางปฏิบัติแนะนำของ Android หน้านี้จะอธิบายวิธีสร้างและทำซ้ำ UI ของแอปด้วย AI
หากต้องการสร้าง UI ด้วย AI ให้ทำตามขั้นตอนทั่วไปต่อไปนี้
สร้างภาพจำลอง UI ของแอปที่คุณต้องการ คุณสามารถส่งออก PNG จาก เครื่องมือออกแบบหรือแม้แต่ใช้รูปภาพที่วาดด้วยมือก็ได้
รูปที่ 1: โครงร่างของอินเทอร์เฟซผู้ใช้แอป แนบรูปภาพไปกับคำค้นหาโดยคลิกปุ่มแนบไฟล์รูปภาพ
นอกจากนี้ คุณยังคลิกสร้างโค้ดจากภาพหน้าจอได้โดยตรงจากแผงแสดงตัวอย่าง
ในไฟล์ที่ไม่มีตัวอย่างอยู่
รูปที่ 2: สร้างโค้ดจากภาพหน้าจอในแผงแสดงตัวอย่างที่ว่างเปล่า ในช่องแชท ให้ขอเอเจนต์ AI สร้างโค้ด UI เช่น "สร้างโค้ด Jetpack Compose สำหรับรูปภาพที่ให้มา" เมื่อคุณส่งคำค้นหาและ รูปภาพ Agent AI จะแนะนำโค้ดเพื่อสร้าง UI ที่เสนอ โดยปกติแล้วเอเจนต์ AI จะ ให้โค้ดสำหรับตัวอย่าง Compose ด้วย คุณจึง เห็นภาพ UI ได้อย่างรวดเร็วเมื่อนำเข้าลงในโปรเจ็กต์ หากไม่เป็นเช่นนั้น ให้ขอให้เอเจนต์ สร้างตัวอย่าง Compose
รูปที่ 2: Gemini สร้างโค้ด Jetpack Compose จากรูปภาพที่แนบมา เมื่อนำเข้าโค้ดและเห็นตัวอย่าง Compose ในแผงแสดงตัวอย่างแล้ว คุณจะทำซ้ำ UI ได้โดยคลิกที่ตัวอย่างโดยตรงและขอให้ Gemini เปลี่ยนรูปแบบ หากมีรูปภาพของสิ่งที่คุณต้องการ คุณยังสามารถทำซ้ำใน UI ได้โดยคลิกขวาที่ตัวอย่าง แล้วเลือก การทำงานของ AI > จับคู่ UI กับรูปภาพเป้าหมาย
รูปที่ 5: การใช้ Gemini เพื่อเปลี่ยนองค์ประกอบ UI โดยตรงจากตัวอย่าง Compose 
รูปที่ 6: ตัวอย่างการใช้ "จับคู่ UI กับรูปภาพเป้าหมาย"
ค้นหาและแก้ไขปัญหาคุณภาพของ UI
นอกจากนี้ เอเจนต์ AI ยังช่วยให้มั่นใจได้ว่า UI มีคุณภาพสูงและเข้าถึงได้ คลิกขวาที่ตัวอย่างการเขียน แล้วเลือกการดำเนินการของ AI > แก้ไขปัญหาการตรวจสอบ UI ทั้งหมด เอเจนต์จะตรวจสอบ UI เพื่อหาปัญหาที่พบบ่อย เช่น ปัญหาด้านการช่วยเหลือพิเศษ และ เสนอการแก้ไขโค้ดเพื่อแก้ปัญหาเหล่านั้น
