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