AI-assisted UI pipeline · 2026 - hiện tại
Figma → Unity AI Workflow
Tự xây một workflow nối Figma với Unity bằng archive cache, component mapping, query helper và validation gate để AI dựng UI nhanh hơn mà vẫn bám design system.
Bài toán
Khi UI của Lunacia chuyển từ các file Photoshop rời sang một design system trong Figma, cách dựng từng màn hình bằng tay trong Unity bắt đầu tốn quá nhiều effort và vẫn có nguy cơ lệch thiết kế. Mình muốn AI xử lý phần công việc lặp lại này, nhưng không muốn đổi tốc độ lấy một đống prefab khó bảo trì hoặc một workflow burn token mất kiểm soát.
Mình đã xây gì
Thay vì làm một nút bấm biến Figma thành Unity, mình xây một đường ray để AI làm việc trong phạm vi rõ ràng: archive thiết kế về local một lần, trace component đã có, tra cứu đúng phần dữ liệu cần dùng, triển khai qua Unity MCP rồi đi qua các gate về source metric, visual, responsive và localization.
Đây là project cá nhân nhưng được dùng trên một bài toán production thật. Lunacia là nơi mình phát hiện vấn đề, thử các phiên bản đầu tiên và đo xem workflow có thực sự giảm thời gian cùng chi phí hay không.
Một module NPC Shop sau khi đi qua workflow
Technical deep dive
Cách workflow hoạt động và những lần mình làm sai
Phần đọc sâu đi từ archive cache, mapping và Unity MCP tới image diff, TMP padding, localization cùng bài toán giảm token.
Vai trò & trách nhiệm
- Tách bài toán Figma to Unity thành archive cache, component mapping, query layer, execution boundary và validation gate.
- Xây plugin để lưu document cùng assets từ Figma về local thay vì bắt AI đọc lại toàn bộ file trong mỗi task.
- Xây helper tra cứu node, semantic name và quan hệ component để giảm context phải đưa vào AI.
- Đặt rule trace component, source metric, typography, responsive và localization trước khi AI được phép triển khai trên Unity.
Kết quả đạt được
- Giảm loại task UI từng cần khoảng 2–3 ngày xuống còn khoảng 4–8 tiếng trong các lần đo của mình.
- Giảm mức sử dụng cho một task từ khoảng 120–140% xuống còn 40–70% weekly usage sau khi bổ sung query layer.
- Dùng workflow để dựng UI theo prefab và design system, sau đó tiếp tục nối controller, data binding cùng runtime state thay vì chỉ tạo ảnh tĩnh.