การออกแบบด้วย AI ทำงานได้ดีที่สุดแบบวนซ้ำ: คุณอธิบาย, แบบร่างของ AI, คุณตัดสินและปรับแต่ง และคุณทำซ้ำ AI รวดเร็วในการสร้างทางเลือก คุณมีหน้าที่รับผิดชอบในการเลือกสิ่งที่ถูกต้อง
ขั้นตอนที่ 1: เขียนบทสรุป อธิบายผู้ใช้ งาน เนื้อหา และข้อจำกัดใดๆ "หน้าจอการตั้งค่าสำหรับแอปจัดทำงบประมาณ สำหรับผู้ใช้โทรศัพท์ พร้อมส่วนบัญชี การแจ้งเตือน และความเป็นส่วนตัว โดยใช้ส่วนประกอบที่มีอยู่ของเรา" จะให้ผลลัพธ์ที่ดีกว่า "สร้างหน้าการตั้งค่า" มาก
ขั้นตอนที่ 2: สร้างแบบร่าง เครื่องมือแจ้งเตือนไปยัง UI เช่น Google Stitch หรือผู้ช่วย AI ของ UXPin เปลี่ยนคำอธิบายหรือภาพร่างเป็นหน้าจอ สอบถามตัวเลือกหลายรายการแล้วเปรียบเทียบ แทนที่จะยอมรับตัวเลือกแรก
ขั้นตอนที่ 3: ปรับแต่งเครื่องมือออกแบบ นำฉบับร่างที่ดีที่สุดมาสู่ Figma, Penpot หรือโปรแกรมแก้ไขอื่น แก้ไขลำดับชั้น การเว้นวรรค และการคัดลอก และออกแบบสถานะที่ AI มักจะข้าม: กำลังโหลด ว่างเปล่า ผิดพลาด และปิดใช้งาน
ขั้นตอนที่ 4: เชื่อมต่อกับรหัส เครื่องมือเข้ารหัส AI เช่น Claude Code และ Cursor สามารถสร้างอินเทอร์เฟซได้ ผลลัพธ์จะดีขึ้นมากเมื่อพวกเขาสามารถอ่านการออกแบบของคุณผ่านเซิร์ฟเวอร์ MCP Figma และ Penpot ต่างก็มีหนึ่งอัน สำหรับชิ้นส่วนแบบโต้ตอบและภาพเคลื่อนไหว ExodeUI ที่เราสร้างขึ้นมีเซิร์ฟเวอร์ MCP ที่ช่วยให้ AI สร้างและแก้ไขภาพเคลื่อนไหวด้วยสถานะและฟิสิกส์สปริงจากข้อความแจ้งภาษาธรรมดา โดยจัดเก็บไว้ในไฟล์ .exode แบบเปิดที่แอปของคุณเล่น
ขั้นตอนที่ 5: ตรวจสอบก่อนจัดส่ง ตรวจสอบการใช้แป้นพิมพ์และโปรแกรมอ่านหน้าจอ คอนทราสต์ การเคลื่อนไหวที่ลดลง หน้าจอขนาดเล็กและขนาดใหญ่ และข้อความที่ยาวหรือแปลแล้ว ปฏิบัติต่อผลลัพธ์ของ AI เหมือนงานจากเพื่อนร่วมทีมที่รวดเร็วแต่ใหม่: มีประโยชน์แต่ได้รับการตรวจสอบอยู่เสมอ