Table Of Content
- ปัญหาจริงของ AI-Generated UI
- Make Kits: ยัด Design System เข้าไปตั้งแต่ต้น
- Make Attachments: ใช้ข้อมูลจริงแทน Placeholder
- Key Takeaway
ปัญหาจริงของ AI-Generated UI
ปัจจุบัน AI สร้าง UI ได้เร็วมาก แต่สิ่งที่ได้มาจะพบว่า components ไม่ตรงกับ codebase, ข้อความเป็น placeholder ทั้งหมด, และ edge cases สำคัญๆ ก็หายไป
ปัญหาไม่ได้อยู่ที่คุณภาพของ draft แต่อยู่ที่ว่า draft นั้นไม่รู้จัก context ที่ทีมใช้จริงในงาน สิ่งที่ตามมาคือต้องนั่ง rewrite ซ้ำแทนที่จะ refine ต่อได้เลย ทำให้เสียเวลา
นี่คือสิ่งที่ Figma พยายามแก้ด้วย Make Kits และ Make Attachments
Make Kits: ยัด Design System เข้าไปตั้งแต่ต้น ⚡
Make Kits คือวิธีที่ให้ทีม design system สร้าง "ชุดคู่มือ" สำหรับ Make โดยเฉพาะ — รวม components และ styles จาก library เข้ากับ guidelines ที่บอกว่าควรใช้ยังไง
พอใช้ Make Kits ตัว Make จะเริ่มต้นด้วย components ที่ตรงกับ production ทันที ไม่ต้องมานั่ง align โครงสร้างทีหลัง
ยิ่งนิยามชัดว่าแต่ละชิ้นส่วนใช้งานยังไง ผลที่ได้ก็ยิ่งแม่นขึ้น ที่เห็นผลชัดสุดคือพวก shared surfaces อย่าง forms, dashboards, settings หรือ onboarding flows ที่หลายทีมต้องใช้ร่วมกัน — ทำให้มีความ consistent ขึ้น และเสียเวลาในการ review น้อยลง
และเวลาที่ต้องเสียไปกับการ fix context ก่อน review ก็น้อยลงชัดเจน
Make Attachments: ข้อมูลจริงแทน Placeholder 🎯
Make Attachments แก้อีกปัญหาหนึ่ง — แทนที่จะต้องพิมพ์สรุป context ทั้งหมดลงใน prompt ก็แค่แนบต้นฉบับมาเลย ไม่ว่าจะเป็น PDF, dataset, screenshot หรืออื่นๆ แล้วปล่อยให้ Make ไป reference โดยตรง
ผลที่ได้คือข้อมูลจริงทำให้เห็น layout constraints และ edge cases ตั้งแต่ต้น ตัว prototype ที่ได้เลยเป็น working draft จริงๆ ไม่ใช่แค่ภาพประกอบที่ข้อมูลยังว่างเปล่า
นอกจากนั้นยังเอาไปใช้กับงานประจำวันได้ด้วย — แนบ brand guidelines, tone-of-voice docs, screenshots ของ surface เดิม หรือ real data เข้ามาแทน placeholder สิ่งที่ stakeholders เห็นก็เลยใกล้เคียงกับสิ่งที่จะ ship จริงมากขึ้น ตัดสินใจได้เร็วขึ้น
Key Takeaway
สองฟีเจอร์นี้ไม่ได้ทำให้ AI เก่งขึ้น — แค่ให้ AI มี context ที่ถูกต้องตั้งแต่เริ่ม
Make Kits ดูแลเรื่อง design system context, Make Attachments ดูแลเรื่อง project context รวมกันแล้วทำให้ output ที่ได้ไม่ต้องผ่านการ rewrite รอบใหญ่ก่อนถึง review
pattern นี้ชัดขึ้นเรื่อยๆ — AI generate เร็วได้อยู่แล้ว แต่คุณภาพขึ้นอยู่กับ context ที่ใส่เข้าไป ยิ่ง context ตรงและครบ ยิ่ง draft ที่ได้นำไปต่อได้เลยโดยไม่ต้องแก้มาก
PS. Make Kits มี detailed guidelines สำหรับสอน Make ว่าใช้ component แต่ละตัวยังไง — ควรค่าแก่ทีมที่กำลังจะ scale design system ในการศึกษาข้อมูล
References
