Bạn bảo Claude Code “thiết kế cho mình cái dashboard”, và nhận về đúng thứ quen thuộc: thanh tiêu đề gradient tím hồng, bốn thẻ số liệu to bằng nhau, emoji làm biểu tượng, một độ bo góc và một kiểu đổ bóng dùng khắp nơi, chữ xám nhạt trên nền trắng, còn nút “Xóa tài khoản” thì lại màu xanh. Cái nào riêng lẻ cũng không sai hẳn, nhưng gộp lại thì nhìn là biết ngay “AI vẽ”.
Lý do khá đơn giản: khi không có ràng buộc gì, mô hình chọn những lựa chọn phổ biến nhất trong dữ liệu nó đã học. Muốn khác đi, bạn phải đưa cho nó luật chơi và một thứ để đo kết quả. Đó chính là ý tưởng của UX/UI Agent Skills (tên gọi tắt là XIAS), một bộ plugin mã nguồn mở của tác giả Thientan Soparat. Bài này mình đi qua nó làm được gì, cài thế nào, và đâu là chỗ quảng cáo nói hơi quá so với thực tế.
XIAS nó là gì, nói cho dễ hiểu
Đây không phải một ứng dụng hay một mô hình mới. Nó là một bộ hướng dẫn và công cụ kiểm tra mà bạn nạp vào Claude Code. Bên trong có các design token theo chuẩn DTCG (màu, chữ, khoảng cách, đổ bóng… chia ba tầng: nguyên thủy, ngữ nghĩa, thành phần), 52 đặc tả thành phần giao diện đi từ nhỏ nhất đến cả trang mẫu, thư viện 138 hệ thống thiết kế để tham khảo phong cách, và 25 kỹ năng chạy theo yêu cầu. Về đầu ra, nó có 16 bộ chuyển đổi cho các nền tảng như React, Next.js, Vue, SwiftUI, Flutter, và có bảng đối chiếu với Material 3, Apple HIG, shadcn/ui hay Fluent nếu bạn muốn bám theo một hệ thống có sẵn.
Phần đáng chú ý nhất là 52 cổng kiểm tra (gate). Thay vì nhờ AI tự nhận xét “trông ổn đấy”, các cổng này đo thật. Trong đó 34 cổng mở trình duyệt thật để dựng trang rồi đo, 18 cổng còn lại đọc thẳng file để soát token, giá trị cứng, emoji và các quy tắc khác. Tác giả cũng phân biệt rõ hai chuyện: cổng kiểm tra trả lời “có đúng không”, còn “có đẹp không” thì để một tác tử phản biện riêng (lệnh /critique) soi, và kết quả đó không chấm điểm.
Bộ công cụ XIAS ux-ui-agent-skills làm được những gì
Để bạn nắm nhanh toàn cảnh, đây là các nhóm chức năng chính theo mô tả của tác giả:
| Chức năng | Nó làm gì |
|---|---|
| Tạo design token | Xuất token dạng JSON theo chuẩn DTCG (màu, chữ, khoảng cách, đổ bóng, viền, điểm ngắt responsive, chuyển động), chia ba tầng: Nguyên thủy → Ngữ nghĩa → Thành phần |
| Thiết kế component | Thiết kế từ thành phần nhỏ nhất đến mẫu trang theo Atomic Design, kèm cấu tạo, biến thể, trạng thái, ánh xạ token và đặc tả truy cập |
| Sinh mã cho mọi nền tảng | Dùng bộ chuyển đổi cho React + Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, CSS thuần, CSS-in-JS, hoặc tạo bộ chuyển đổi mới theo yêu cầu |
| Đối chiếu hệ thống thiết kế | Chuyển qua lại với Material 3, Apple HIG, Fluent, Carbon, shadcn/ui, Radix… thông qua bảng đối chiếu theo vai trò |
| Kỹ năng gọi bằng lệnh | Các lệnh / như /gate, /critique, /redesign; hiện bộ có tổng cộng 25 kỹ năng (xem ghi chú biên tập) |
| Kiểm tra truy cập | Đánh giá theo WCAG 2.2 mức AA/AAA, xếp lỗi theo mức ưu tiên P0/P1/P2 |
| Đánh giá thiết kế | Chấm theo 6 tiêu chí với 10 nguyên tắc dễ dùng của Nielsen, trả về bảng phát hiện có cấu trúc |
| Làm mẫu thử và nghiên cứu | Hướng dẫn qua 5 mức độ hoàn thiện của mẫu thử, vẽ hành trình người dùng, viết kịch bản kiểm thử với người dùng |
| Thiết kế chuyển động | Token hóa thời lượng, đường cong chuyển động, mẫu chuyển cảnh và cách xử lý khi người dùng bật giảm chuyển động |
| Viết nội dung giao diện | Hệ thống giọng điệu, công thức viết thông báo lỗi và trạng thái rỗng, mẫu vi nội dung, nguyên tắc ngôn ngữ bao trùm |
| Gu thẩm mỹ | Bộ nguyên tắc chống giao diện “AI vẽ”, các kiểu thẩm mỹ mẫu và thư viện 138 hệ thống thiết kế để tham khảo bố cục, chữ biên tập và hướng thị giác cao cấp |
Trang “AI vẽ” bị bắt lỗi ra sao
Repo có sẵn một trang mẫu đúng kiểu hay gặp (gradient tím, bốn thẻ bằng nhau, emoji, nút xóa màu xanh) để thử cho các cổng. Kết quả rất cụ thể, và đây là lý do mình thấy cách tiếp cận này đáng tin hơn lời hứa suông:
Chữ tiêu đề trắng trên nền gradient cho độ tương phản đo được là 1.00:1 (tiêu chuẩn cần tối thiểu 3). Các nút biểu tượng nhỏ chỉ 15.3×16 px trong khi WCAG 2.2 yêu cầu ít nhất 24×24. Ở khung rộng 280 px, trang tràn ngang thêm 820 px. Nút “Delete Account” được tô màu chàm, không nằm trong dải màu nguy hiểm nên bị coi là sai ý nghĩa. Trong tiêu đề còn lọt một biểu tượng emoji, và có tới 63 giá trị bị gõ cứng thay vì lấy từ token. Tổng cộng trang này trượt 10 cổng, còn trang tham chiếu của repo qua đủ 52.
Cài đặt XIAS
Trong Claude Code, bạn gõ hai dòng:
/plugin marketplace add plugin87/ux-ui-agent-skills
/plugin install ux-ui-agent-skills@ux-ui-agent-skills
Xong là có 25 kỹ năng và một Critic Agent design-critic dùng được ở mọi dự án. Nếu chưa thấy hiện ra, mở phiên mới. Sau đó bạn chỉ cần nói tự nhiên, ví dụ “Thiết kế component thông báo đủ các trạng thái và đạt chuẩn truy cập”, và kỹ năng phù hợp sẽ tự nạp. Mười một kỹ năng khác như /gate, /critique, /redesign thì bạn phải tự gọi, vì chúng làm những việc nên do bạn quyết định.
Lưu ý: hai dòng trên chỉ cài phần hướng dẫn. 34 gates cần trình duyệt sẽ báo lỗi nếu máy bạn chưa có Playwright và Chrome. Bạn cần chạy thêm
npm installvànpx playwright install chrometrong thư mục của bộ công cụ. Không làm bước này thì đừng mong con số 52/52.
Nếu chỉ muốn xem thử mà không cài gì, lệnh npx ux-ui-agent-skills demo sẽ chép các trang template mẫu ra và mở lên, hoặc bạn vào bản demo trực tuyến của tác giả tại plugin87.github.io/ux-ui-agent-skills.
Chỗ cần tỉnh táo
Có vài điều bạn nên biết trước khi kỳ vọng quá cao.
Thứ nhất, đừng đọc “qua 52 cổng” thành “thiết kế đẹp như designer lâu năm”. Chính README thừa nhận cổng kiểm tra không đo được gu thẩm mỹ. Khi tác giả cho hai Agent chạy “mù” (chỉ có yêu cầu và bộ công cụ, không gợi ý gì thêm), cả hai đều đạt 14/14 trên các cổng khách quan, nhưng bản phản biện vẫn kết luận “làm lại”: trạng thái rỗng trông như trang bị lỗi, thông báo thành công hiện ra dù danh sách không đổi, trạng thái đang tải trông giống nút bị khóa. Tức là bộ công cụ đẩy chất lượng nền lên rất rõ, nhưng vẫn cần con mắt con người.
Thứ hai, việc ép luật tự động phụ thuộc vào nền tảng bạn dùng. Trên Claude Code, có các hook chạy bất kể mô hình có nhớ hay không: chặn giá trị cứng và emoji mỗi lần ghi file, và từ chối kết thúc phiên nếu bạn đã sửa giao diện mà chưa đo gì. Với Codex, Cursor hay Copilot (qua file AGENTS.md), các luật chỉ là lời đề nghị, và bạn phải tự chạy cổng kiểm tra.
Thứ ba, độ phủ chưa đều. Mã React được biên dịch và dựng thật để kiểm tra, còn file Vue và Swift mới chỉ được soát bằng cách đọc file, chưa được dựng lên đo. Nếu bạn làm SwiftUI hay Vue, hãy xem phần sinh mã như điểm khởi đầu, không phải kết quả đã kiểm chứng.
Cuối cùng, dự án này do một người duy trì, tác giả ghi rõ không nhận pull request, chỉ nhận báo lỗi, bản tái hiện hoặc đề xuất. Lúc mình xem, repo ở phiên bản 2.9.8, giấy phép MIT, khoảng 2,3 nghìn sao và 250 bản fork, nên dùng thoải mái nhưng đừng trông chờ cộng đồng đóng góp mã.
Có nên thử XIAS?
Nếu bạn hay nhờ Claude Code dựng giao diện và phát chán cảnh “tím hồng bốn thẻ”, thì đây là một cách khá bài bản để nâng mặt bằng chung lên: tương phản đạt chuẩn, kích thước nút đủ lớn, màu theo ý nghĩa, không tràn màn hình nhỏ. Cứ cài thử trên một dự án nhỏ, nhờ nó dựng một component, rồi chạy /gate và /critique xem nó chê gì. Bạn thử rồi thấy khác biệt thế nào thì kể mình nghe ở phần bình luận nhé.
Để lại một bình luận