Quy trình
Từ Figma đến màn hình dự án với AI
Vì sao không thể bảo AI làm một phát từ Figma thành màn hình dự án thật, và quy trình 4 bước nhanh nhất mình dùng: config design system, UI guideline, screenshot + MCP, copy CSS & refactor — đạt ~95%+ so với design.
22/06/2026 · 4 phút đọc · Lê Huy Thái
Nói thật, mình chưa tìm ra cách (hoặc do mình ngu) để bảo AI làm một phát từ Figma bay thẳng vào thành màn hình dự án với các công cụ AI hiện tại. Mình không nói page chơi chơi hay dự án nhỏ — mà ở một dự án công ty thật, teamwork. Quy trình thực tế
Vì sao không thể "một phát" Figma → code?
- Gen không giống hẳn — kể cả dùng MCP giỏi cũng chỉ cỡ 40–60%; 30–40% còn lại làm tay rất mệt.
- Ít tái sử dụng code — thấy gì làm nấy, không biết cái này cái kia đã có sẵn chưa.
- Lệch config/style sẵn có — có những cái nhỏ nhỏ lệch là nhìn ra ngay.
Sau khi thử đủ kiểu, mình thấy quy trình dưới đây là nhanh nhất với mình.
- 011. Config style & design system
Dự án cần có config style chuẩn chỉ theo Figma: primary color, secondary color, background, các loại font size, spacing… Cơ bản thì designer vẫn phải dựng, mình mang về thiết lập (hoặc bảo AI thiết lập theo). Hoặc cùng đi từ một bộ style để đồng bộ luôn.
Những component nhỏ dạng design system (input, button, card…) cũng cố gắng thiết lập từ đầu, config theo style tổng.
Nếu xem một design mà mấy cái nút mỗi chỗ mỗi kiểu không liên quan, thì có thể chính design đang sai.
- 022. UI Guideline (Skill / Rule)
Có những thứ ở design trông rất quy tắc nhưng không thể đưa vào component/config — thì đưa vào đây. Ví dụ:
- Spacing của các card luôn là 2rem.
- Sau title lớn luôn là subtitle.
- Không dùng shadow trong toàn dự án.
- Mọi thứ click được đều phải có con trỏ pointer khi hover.
Ngoài ra liệt kê component nào làm gì để tránh "có rồi vẫn tạo mới". Thêm rule: phải check xem đã có sẵn chưa — có thì dùng, hoặc custom cái cũ để giảm hard-code, dễ maintain.
Cái này giúp AI code đi đúng style hiện tại; khi cần sáng tạo thì vẫn sáng tạo trong khuôn khổ.
- 033. Screenshot, MCP, mô tả ngắn
Figma có MCP, cấu hình qua Dev Mode hoặc Personal Access Token (nhưng limit khá đau). Mình chụp ảnh + cho đọc qua MCP + mô tả ngắn bố cục. Kết hợp với 2 bước trên sẽ ra một màn hình đạt khoảng 80–90% so với design.
Tất nhiên vẫn chưa ăn ngay được đâu — thị giác của AI thật sự chưa thông minh cho lắm.
- 044. Copy CSS & refactor
Vì AI đọc ảnh + MCP chỉ hiểu được phần nào, những chỗ cần chính xác cao hay bị sai chi tiết nhỏ. Lúc này mỗi node ở Figma có thể copy CSS: chuột phải một node ở sidebar > Copy/Paste as > Copy as code > CSS (all layers). Chỉ nên ưu tiên copy node đang lệch / từng node — copy cả màn sẽ rất lớn.
Paste cho AI, bảo nó tham khảo cái này: không được hard-code mà phải convert sang component, các quy tắc đã đóng gói, config sẵn có của dự án. Cái nào không có thì báo lại để mình confirm — hard-code hay tạo mới/config mới.
Đến đây đạt khoảng 95%+ so với design. Còn lại prompt tiếp hoặc chỉnh tay nốt vài %.
Bước 1 làm một lần. Bước 2 — khi thấy AI làm "ngu" quá hoặc mình chưa định nghĩa, thì giải thích/hướng dẫn, xong bảo nó update vào guideline để lần sau không bị lại.