The Rise of the AI-Readable Design System có gì mới?

• AI giờ có thể đọc được một phần hệ thống thiết kế, nhưng chưa hiểu nó giống con người.
• Nếu tên màu, kiểu chữ, và biến trong Figma đặt không đúng “cách AI quen đọc”, AI dễ bỏ qua.
• AI thường nghiêng về các quy ước phổ biến trong code, nhất là kiểu đặt tên của shadcn hoặc Tailwind.
• Muốn AI dùng đúng design system, designer cần làm cho file gọn hơn, thống nhất hơn, và dễ hiểu hơn với máy.
• Sau khi import vào công cụ AI, vẫn phải kiểm tra lại vì AI hay tự sửa theo ý nó, không bám chặt vào thiết kế gốc.

Trong thế giới thiết kế sản phẩm, design system là bộ “luật chơi” giúp giao diện nhất quán. Nó thường gồm màu sắc, kiểu chữ, khoảng cách, nút bấm, biểu tượng và nhiều thành phần dùng lặp lại. Nhờ đó, đội thiết kế và đội lập trình làm việc nhanh hơn, ít sai lệch hơn. Nhưng khi AI bước vào quy trình này, mọi thứ không còn đơn giản như trước. AI có thể hỗ trợ tạo giao diện, nhưng nó không phải lúc nào cũng hiểu design system theo cách con người hiểu. Nói ngắn gọn: con người nhìn một thư viện thiết kế và thấy “đây là bộ quy chuẩn của thương hiệu”, còn AI lại nhìn nhiều phần tử rời rạc và cố gán chúng vào những mẫu mà nó đã học. Điểm khó nhất nằm ở chỗ ngôn ngữ đặt tên trong design system. Designer thường đặt tên biến theo cách dễ hiểu với con người, ví dụ như “Text/Disabled” để chỉ chữ bị vô hiệu hóa. Nhưng AI lại thường quen với những tên mang tính kỹ thuật hơn, như “muted-foreground” hay các cách gọi phổ biến trong framework code.

Cùng một thông tin, nhưng nếu tên gọi không đúng “ngôn ngữ” mà AI quen đọc thì nó có thể bỏ qua. Khi đó, AI sẽ tự chọn một giải pháp khác theo suy đoán của nó, thay vì dùng đúng thành phần bạn đã chuẩn bị. Với designer, đây là cảm giác rất khó chịu vì hệ thống mình làm kỹ lại không được máy tôn trọng. Tác giả bài gốc cũng chỉ ra rằng AI hiện vẫn chưa thật sự hiểu khái niệm “tính nhất quán” ở mức như con người. Design system tồn tại để mọi màn hình nhìn cùng một ngôn ngữ, cùng một logic. Nhưng AI thường ưu tiên tạo ra thứ nó thấy “hợp lý” cho từng tình huống riêng lẻ, thay vì giữ nguyên quy tắc chung. Vì vậy, nếu muốn dùng design system với công cụ AI như Figma Make, người làm thiết kế cần chuẩn bị file theo cách thân thiện hơn với máy. Không phải chỉ “import là xong”, mà phải xem AI như một người dùng đặc biệt: nó cần tài liệu rõ ràng, tên gọi rõ ràng, và cấu trúc rõ ràng.

• Dọn lại file thiết kế cho gọn và nhất quán.
• Đổi tên biến và style sang cách gọi mà AI dễ hiểu hơn.
• Giảm bớt các lớp trung gian không cần thiết.
• Đảm bảo không dùng quá nhiều thư viện ngoài nếu AI dễ bị rối.
• Sau khi đưa vào công cụ AI, phải kiểm tra và sửa lại thủ công.

Bạn đang dạy một người mới học việc, chứ không phải đưa cho một đồng nghiệp kỳ cựu. Người đó có thể làm được việc, nhưng chỉ khi bạn viết nhãn rõ ràng, sắp xếp ngăn nắp, và nhắc lại nhiều lần điều quan trọng. Tác giả khuyên nên bắt đầu bằng việc sao chép file design system gốc rồi chỉnh thành bản “AI-friendly”, tức là thân thiện với AI. Việc này gồm đổi tên các biến, style, và cả cách nhóm các phần trong file. Thay vì để quá nhiều tầng trung gian, tác giả giữ lại các nhóm chính như Theme, Typography và Primitives để AI dễ đọc hơn. Nếu đang làm dự án mới, tốt nhất là xây luôn theo hướng này ngay từ đầu. Làm vậy sẽ đỡ phải sửa về sau, vì càng về sau file càng lớn, càng nhiều thành phần, việc chỉnh tên và cấu trúc sẽ rất tốn công. Sau đó, file được biến thành một thư viện để import vào Figma Make. Khi đã vào công cụ AI, designer cần prompt rõ ràng, tức là viết yêu cầu thật cụ thể.

Ví dụ, yêu cầu AI hiển thị đầy đủ màu sắc, style chữ và các thành phần giao diện lên màn hình để dễ kiểm tra. Tác giả còn gợi ý đính kèm ảnh chụp màn hình component thật. Cách này giúp AI có thêm “mẫu tham chiếu” để bám theo, thay vì tự đoán. Đây không phải bảo đảm tuyệt đối, nhưng thường cho kết quả sát hơn so với chỉ dùng mô tả bằng chữ. Một điểm đáng chú ý là có thể copy trực tiếp một số frame từ Figma sang Figma Make. Tuy nhiên, theo kinh nghiệm của tác giả, cách này không hẳn chính xác hơn, nhất là nếu phải làm từng component một. Nghĩa là không nên kỳ vọng AI sẽ hiểu đúng chỉ vì ta đã đưa nó đúng file nguồn.

Rà soát lại toàn bộ. Tác giả khuyên kiểm tra xem biến nào bị thiếu, style nào bị gán sai, component nào bị lệch so với bản gốc. Nhiều lúc AI sẽ bỏ sót những biến mà nó không quen, chẳng hạn các biến liên quan đến “success” hay trạng thái thành công. Đây là lý do AI chưa thể thay thế hoàn toàn vai trò kiểm soát chất lượng của designer. Nó rất nhanh, nhưng không tự biết đâu là “đúng theo hệ thống” nếu hệ thống đó không được dạy theo cách nó hiểu. Do đó, con người vẫn phải là người chốt cuối cùng. Một số bài học thực tế từ bài viết có thể tóm gọn như sau:

• Tên biến và style phải dễ đoán, dễ map sang cách AI quen đọc.
• Cấu trúc file nên đơn giản, ít tầng trung gian.
• Cần loại bỏ sự lẫn lộn giữa nhiều thư viện ngoài.
• Prompt phải cụ thể, không nói chung chung.
• Luôn xem AI là bản nháp, không phải bản hoàn thiện.

Tác giả cũng nhấn mạnh rằng cách làm này không chỉ dành riêng cho Figma Make. Bất kỳ công cụ AI nào đọc được file thiết kế đều có thể gặp cùng vấn đề: máy cần tên gọi nhất quán và cấu trúc sạch sẽ. Nói cách khác, “AI-readable design system” là một design system được viết sao cho máy dễ hiểu, chứ không chỉ đẹp với người. Dù vậy, bài viết cũng khá thực tế khi thừa nhận mọi thứ đang thay đổi rất nhanh. Có thể vài tháng nữa, các công cụ mới sẽ giải quyết tốt hơn việc kết nối giữa AI và design system. Nhưng ở thời điểm hiện tại, nhiều designer vẫn đang làm việc chủ yếu trong Figma, nên cách tối ưu file cho AI vẫn là việc rất đáng làm. Điều quan trọng nhất không phải là chạy theo trào lưu AI, mà là giữ cho quy trình của mình không bị đứt gãy. Nếu AI có thể đọc đúng design system, designer sẽ tiết kiệm được thời gian dựng khung, thử layout và tạo bản nháp.

Nhưng để đạt được điều đó, hệ thống thiết kế phải được chuẩn bị kỹ như một “ngôn ngữ chung” cho cả người lẫn máy.

Insight giúp bạn nắm ý chính rất nhanh, بدون phải đọc hết một bài dài và nhiều thuật ngữ. Với người bận, đây là cách tiết kiệm thời gian rõ rệt: chỉ vài phút là biết bài đang nói gì, quan trọng ở đâu, và có đáng để đọc sâu thêm hay không. Các bản tóm tắt trên Insight cũng giúp lọc bớt nhiễu. Thay vì bị cuốn vào ví dụ dài, câu chữ vòng vo hay các chi tiết kỹ thuật khó hiểu, bạn chỉ nhận phần cốt lõi, được viết lại bằng ngôn ngữ gần gũi hơn. Điều này đặc biệt hữu ích nếu bạn không làm trong ngành công nghệ nhưng vẫn muốn theo kịp xu hướng sản phẩm, AI, thiết kế, và công cụ làm việc mới. Với mỗi bài, Insight cố gắng giữ đúng ý chính nhưng diễn đạt dễ hiểu hơn. Nhờ vậy, bạn có thể cập nhật nhanh trước khi quyết định có nên đọc bản gốc, chia sẻ cho đồng nghiệp, hay áp dụng vào công việc của mình. Nói đơn giản: đọc Insight để hiểu nhanh, hiểu đúng, và đỡ mất thời gian vào những phần không cần thiết.