Your Design System Is Not AI-Ready Yet có gì mới?

• Figma giờ không chỉ để designer nhìn, mà còn có thể được AI “đọc” để tạo code.
• Nếu file thiết kế sắp xếp lộn xộn, AI dễ hiểu sai và sinh ra code kém.
• Bài viết gợi ý cách chia file Figma thành 4 lớp: nền tảng, component, pattern và page.
• Mỗi trang nên có tên rõ ràng, chia theo mục đích để AI tìm nhanh hơn.
• Tổ chức file tốt không chỉ giúp người làm thiết kế, mà còn giúp đội dev và AI làm việc trơn tru hơn.

Trước đây, quy trình quen thuộc là designer bàn giao cho developer. Nay, với sự xuất hiện của các công cụ AI có thể đọc trực tiếp file Figma, quy trình đó đang đổi thành “designer bàn giao cho AI agent”. Nói đơn giản, AI không còn chỉ nhìn ảnh chụp màn hình rồi đoán nữa, mà có thể đọc cấu trúc bên trong file thiết kế.

File Figma phải được tổ chức thật rõ. Nếu file gọn gàng, AI sẽ hiểu nhanh và sinh code sát với thiết kế hơn. Nếu file rối, AI phải dò từng lớp, dễ nhầm, và kết quả cuối cùng thường không tốt.

Cách sắp xếp page trong Figma để AI đọc hiểu design system hiệu quả hơn. “Design system” có thể hiểu đơn giản là bộ quy tắc thiết kế chung của sản phẩm, bao gồm màu sắc, chữ, nút bấm, form, khoảng cách, biểu tượng, và các mẫu giao diện lặp lại. Đây là nền móng để các màn hình trong sản phẩm nhìn đồng nhất. Theo tác giả, AI hiện nay đọc file theo kiểu lần theo từng node, tức là từng phần tử nhỏ trong file. Khi cần hiểu một thành phần, AI sẽ lấy thông tin cấu trúc trước, rồi mới đi sâu vào chi tiết. Vì vậy, cách bạn chia trang, đặt tên frame, và tổ chức nhóm nội dung sẽ ảnh hưởng trực tiếp đến việc AI có hiểu đúng hay không.

File Figma càng “có trật tự”, AI càng ít phải đoán. Và khi AI ít phải đoán, code sinh ra càng đáng tin hơn. Một điểm quan trọng là tác giả không xem design system như một khối duy nhất. Thay vào đó, họ chia thành 3 tầng:

• Component là từng món riêng lẻ như nút bấm, ô nhập liệu, avatar, link.
• Pattern là cụm thành phần ghép lại để giải quyết một việc cụ thể, như form đăng nhập hay bảng dữ liệu.
• Page là màn hình hoàn chỉnh, ví dụ trang dashboard hoặc trang cài đặt.

Cái gì là “mảnh ghép”, cái gì là “công thức”, và cái gì là “màn hình hoàn chỉnh”. Nếu trộn lẫn cả ba trong một trang, file sẽ khó đọc hơn rất nhiều.

• Component: một phần UI dùng đi dùng lại.
• Pattern: một cụm giao diện có sẵn mục đích sử dụng.
• Page: một màn hình đầy đủ của sản phẩm.
• Token/variable: giá trị được đặt tên sẵn, như màu chủ đạo, cỡ chữ, khoảng cách.
• MCP server: có thể hiểu là “cầu nối” để AI đọc dữ liệu trong Figma theo cấu trúc, thay vì chỉ nhìn hình.

Tác giả đề xuất một cách chia page khá rõ ràng. Các trang nên được đặt theo thứ tự và mục đích: 00 cho trang bìa, 01 cho phần nền tảng, 02 cho component, 03 cho pattern, 04 cho page, và 99 cho tài liệu phụ hay thử nghiệm. Cách đánh số này không chỉ giúp người xem dễ tìm, mà còn giúp AI nhận ra đâu là nội dung chính, đâu là nội dung phụ.

Các trang 00 và 99 chủ yếu dành cho con người, không phải cho AI. Nghĩa là trang bìa, changelog, playground hay khu thử nghiệm nên tách riêng để tránh làm AI nhầm lẫn với hệ thống thiết kế thật. Đây là một cách nghĩ khá thực dụng: đừng để phần “ghi chú” lẫn vào phần “bản chính”. Phần nền tảng là nơi nhiều file thiết kế thường bị làm quá dày. Tác giả khuyên nên tách riêng từng trang cho màu sắc, chữ, khoảng cách, lưới, độ nâng bóng, biểu tượng… thay vì gom hết vào một trang lớn. Lý do rất đơn giản: khi AI cần đọc riêng phần chữ, nó không nên phải kéo theo cả rừng màu và icon. Điều này cũng giúp con người đỡ mệt hơn. Khi file chia theo chủ đề, người thiết kế, người phát triển, và cả người quản lý sản phẩm đều dễ kiểm tra hơn.

• Nhóm nền tảng nên tách riêng theo từng loại để dễ tra cứu.
• Màu sắc nên có cả màu gốc lẫn màu theo ý nghĩa, ví dụ màu nền, màu chữ, màu viền.
• Typography nên có kiểu chữ rõ ràng cho tiêu đề, nội dung, chú thích, mã code.
• Khoảng cách và lưới nên có bảng tham chiếu cụ thể cho desktop, tablet, mobile.

Bài viết cũng nhấn mạnh việc đặt tên rất cụ thể cho icon. Thay vì để tên chung chung như “Vector 42”, nên đặt là “IconChevronDown” hoặc tên có nghĩa tương tự. Điều này nghe nhỏ nhưng lại rất quan trọng, vì AI hoặc developer nhìn vào tên sẽ biết đó là icon gì và dùng ở đâu. Ở phần component, tác giả khuyên nên chia theo nhóm chức năng thay vì dồn tất cả vào một trang dài. Ví dụ: nhóm Actions cho button, nhóm Inputs cho ô nhập liệu, nhóm Navigation cho thanh điều hướng. Cách này giống như sắp đồ vào đúng ngăn kéo, cần gì thì mở ngăn đó. Một component tốt không chỉ có hình dáng đẹp, mà còn phải có cấu trúc rõ. Tác giả gợi ý mỗi component nên có:

• Bộ biến thể đầy đủ, như kích thước, trạng thái, kiểu hiển thị.
• Phần giải phẫu, tức là các bộ phận cấu thành bên trong.
• Phần thông số, như khoảng đệm, bo góc, màu sắc theo trạng thái.
• Ví dụ sử dụng trong ngữ cảnh thật, như nằm trong toolbar hay form.

Mục đích của việc này là để AI không chỉ thấy “cái nút”, mà còn hiểu nút đó có những phiên bản nào, đang ở trạng thái gì, và phù hợp với tình huống nào. Nếu cấu trúc tốt, AI có thể sinh ra code gần với logic component thực tế, thay vì chỉ vẽ ra một khối giao diện nhìn giống mà không dùng lại được.

Component giống như một từ, pattern giống như một câu, còn page giống như một đoạn văn. Nghĩa là component là đơn vị nhỏ nhất, pattern là sự ghép nối có ý nghĩa, còn page là bức tranh hoàn chỉnh. Cách nghĩ này giúp tránh việc thiết kế bị rời rạc. Pattern là phần AI tận dụng rất tốt vì nó cho thấy sự kết hợp của nhiều component trong cùng một mục tiêu. Ví dụ như một form đăng nhập gồm ô email, ô mật khẩu, nút đăng nhập, link quên mật khẩu. Một pattern được tổ chức tốt sẽ giúp AI hiểu cách các thành phần “đi với nhau” trong thực tế.

• Pattern nên là khối giao diện có mục đích rõ ràng, không phải tập hợp ngẫu nhiên.
• Chúng phải được tạo từ các component có sẵn, không vẽ lại bằng các hình rời rạc.
• Nên có phần mô tả, thông số và ví dụ sử dụng như với component.
• Pattern giúp đội thiết kế và dev tái sử dụng thay vì làm lại từ đầu.

Khi đi tới page, tác giả lưu ý rằng một màn hình hoàn chỉnh thường quá lớn để AI đọc một lần. Vì vậy, page nên được chia thành các section rõ ràng, rồi trong mỗi section có các frame cho desktop, tablet, mobile. Nhờ vậy, AI có thể chọn đúng phần cần đọc thay vì xử lý cả trang cùng lúc. Ví dụ, với trang dashboard, nên tách thành các phần như overview, analytics, và phần ghi chú tương tác. Trong mỗi phần, bạn lại tách theo kích thước màn hình. Điều này giúp AI hiểu được cả nội dung lẫn cách hiển thị ở từng thiết bị. Một điểm rất thực dụng khác là nên dùng nội dung mẫu có ý nghĩa thật thay vì Lorem Ipsum. “Lorem ipsum” là đoạn chữ giả thường dùng khi chưa có nội dung thật, nhưng nó không cho AI nhiều manh mối. Còn ví dụ như tên người, chức danh, công ty giả lập sẽ giúp AI hiểu đây là dạng dữ liệu gì. Nói cách khác, nội dung mẫu càng gần với thực tế, AI càng dễ học đúng ngữ cảnh.

Đây là mẹo nhỏ nhưng rất hữu ích khi làm dashboard, bảng danh sách, hồ sơ người dùng, hay các màn hình có dữ liệu động. Bài viết cũng nhấn mạnh rằng phần ghi chú và mô tả trong Figma không hề vô nghĩa. Nếu bạn chú thích rõ điều gì xảy ra khi bấm, khi hover, khi bị lỗi, hay khi đổi trạng thái, AI sẽ có thêm dữ liệu để dựng code chính xác hơn. Những ghi chú này giống như “luật chơi” cho giao diện.

• Đừng xem Figma chỉ là nơi vẽ đẹp; nó giờ còn là nguồn dữ liệu cho AI.
• File càng có cấu trúc, AI càng đọc dễ.
• Nên tách rõ nền tảng, component, pattern và page.
• Đặt tên rõ ràng và chia trang theo logic sẽ giúp cả người lẫn máy.
• Nội dung mẫu và ghi chú tốt cũng góp phần làm đầu ra chính xác hơn.

Điều đáng chú ý là tác giả không nói AI sẽ thay thế designer. Trái lại, ý chính là designer cần thiết kế file theo cách AI có thể hiểu được. Nói đơn giản: trước đây mình làm file để người khác đọc, giờ còn phải làm file để máy đọc tốt nữa. Đây là một thay đổi khá quan trọng trong cách làm design system. Nếu tổ chức file tốt từ đầu, đội ngũ sẽ tiết kiệm nhiều thời gian khi chuyển từ thiết kế sang code. Còn nếu file rối, AI cũng không “cứu” được quá nhiều.

Nếu bạn không làm trong ngành công nghệ, đọc nguyên bài gốc thường khá tốn thời gian vì có nhiều thuật ngữ và chi tiết kỹ thuật. Insight giúp rút gọn phần khó đọc đó thành ý chính dễ hiểu, để bạn nắm được vấn đề nhanh mà không bị ngợp. Lợi ích lớn nhất là tiết kiệm thời gian. Thay vì phải đọc một bài dài hàng ngàn chữ, bạn có thể biết ngay tác giả đang nói gì, vì sao nó quan trọng, và nó ảnh hưởng thế nào tới công việc thực tế. Insight cũng giúp lọc nhiễu. Nhiều bài công nghệ dùng quá nhiều từ chuyên môn hoặc quá nhiều ví dụ phụ; bản tóm tắt sẽ chắt lại phần đáng nhớ nhất, để bạn không bị lạc trong chi tiết. Quan trọng hơn, các bài tóm tắt được viết theo kiểu gần gũi, dễ hiểu, nên người làm thiết kế, sản phẩm, vận hành hay quản lý đều có thể đọc nhanh và nắm ý chính. Bạn không cần phải là dân kỹ thuật vẫn hiểu được bức tranh lớn và biết điều gì đáng chú ý cho công việc của mình.