Thế giới thiết kế và phát triển đang chứng kiến sự bùng nổ của Trí tuệ Nhân tạo (AI), và việc kết hợp sức mạnh của AI với các công cụ thiết kế quen thuộc như Figma mở ra những khả năng vô tận. Nền tảng 9learning tự hào mang đến những kiến thức và công cụ tiên tiến nhất để giúp bạn làm chủ sự giao thoa đầy tiềm năng này, biến những bản thiết kế Figma tĩnh thành các dự án AI tương tác và thông minh.
Tại sao tích hợp AI vào quy trình thiết kế từ Figma?
Việc tích hợp AI không chỉ là một xu hướng mà còn là một bước tiến chiến lược trong phát triển sản phẩm. AI có thể tự động hóa nhiều tác vụ lặp đi lặp lại trong thiết kế, phân tích hành vi người dùng để tối ưu hóa giao diện, thậm chí tạo ra các trải nghiệm cá nhân hóa. Khi bắt đầu từ Figma, một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) hàng đầu, bạn đã đặt nền móng vững chắc cho việc xây dựng các ứng dụng AI mạnh mẽ.
Quy trình chuyển đổi từ Figma sang dự án AI
Với cá nhân mình sau khi thử các solution thì mình thấy quy trình hiện tại như thế này là nhanh nhất với mình1. 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ái này 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ừ 1 bộ style thì đồng bộ loại.
Những cái component nhỏ dạng design system cũng cố gắng thiết lập từ đầu, ví dụ mấy cái input, button, card, ... config theo style tổng nốt. Nếu xem 1 cái design mà mấy cái nút mỗi chỗ mỗi kiểu không liên quan thì có thể design đang sai.
2. Ui Guideline Skill/Rule
Có những thứ chúng ta thấy ở Design trông nó khá là quy tắc nhưng không thể đưa vào component, config được thì nên đưa vào đây.
Ví dụ spacing của các card luôn là 2rem, đi sau title lớn luôn là subtitle, không được dùng shadow trong toàn dự án, mọi thứ click được đều phải có pointer khi hover, ...
Ngoài ra các component nào làm gì cũng có thể liệt kê để tránh có rồi tạo mới, thêm các rule phải check xem có sẵn chưa, có thì nên dùng, hoặc custom cái cũ để giảm hard code, dễ maintain hơn.
Cái này giúp AI lúc code nó sẽ đi được theo style hiện tại, hoặc khi cần nó sáng tạo thì nó vẫn sáng tạo theo khuôn khổ.
3. Screenshot, MCP, mô tả ngắn
Figmg 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. Tới đây kết hợp với những cái trên sẽ cho ra được 1 màn hình đạt khoảng 8-90% so với design. Tất nhiên vẫn chưa ăn ngay được đâu. Vì thị giác của AI thật sự là không được thông minh cho lắm
4. Copy css và refactor
Vì AI nó đọc ảnh, MCP thì nó cũng chỉ hiểu được phần nào thôi, những cái cần chính xác cao, những chi tiết nhỏ hay bị sai nhỏ. Lúc này mỗi node ở Figma có khả năng copy css (Chuột phải 1 node ở sidebar > Copy/Paste as > Copy as code > CSS (all layer). Phần này là css của node đó, chỉ nên ưu tiên copy node đang lệch hoặc từng node thôi. Copy cả màn thì sẽ rất lớn
Paste lại cho AI bảo nó tham khảo cái này, không được hard code mà phải convert sang các component, những quy tắc đã được đóng gói, những config có sẵn ở dự án. Cái nào không có thì báo lại để mình confirm xem hardcode hay tạo mới/config mới.
Đến đây đạt khoảng 95+% so với design. Còn đâu prompt tiếp hoặc chỉnh tay nốt vài % còn lại.
Bước 1 làm 1 lần, bước 2 khi thấy nó làm ngu quá hoặc mình chưa định nghĩa thì giải thích, hướng sau xong bảo nó update để sau không bị lại.
Nguồn: Lê Huy Thái
