Web Design Guidelines skill từ Vercel Labs là một trong những công cụ web design mạnh mẽ nhất dành cho AI agent. Nếu bạn làm frontend và muốn kiểm tra chất lượng giao diện, skill này là thứ bạn cần. Bài viết sẽ hướng dẫn bạn áp dụng chuẩn của Vercel vào dự án thực tế.

Phát triển bởi Vercel Labs — công ty đứng sau Next.js — skill cho phép AI audit giao diện theo quy tắc web design của họ. Với gần 400.000 lượt cài và hơn 28K sao GitHub, đây là skill phổ biến trên skills.sh. Kết hợp với Frontend-Design Skill từ Anthropic, bạn có bộ đôi hoàn chỉnh cho frontend.

Web-Design-Guidelines Skill là gì?

Đây là skill AI cho phép agent kiểm tra mã nguồn frontend. Kết quả xuất dưới dạng file:line — lý tưởng cho UI audit hàng loạt file. Skill tự động tải guidelines mới nhất, đảm bảo quy tắc luôn cập nhật.

Câu lệnh cài đặt siêu đơn giản — chỉ cần chạy một dòng trong terminal:

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

Sau khi cài, AI agent sẽ tự động kiểm tra code của bạn dựa trên hơn 50 quy tắc về web design chia thành 13 lĩnh vực — từ accessibility, forms, animation đến typography. Bạn không cần nhớ từng quy tắc, chỉ cần chạy audit và sửa lỗi theo báo cáo.

13 lĩnh vực kiểm tra — Hơn 50 quy tắc

Skill bao trùm mọi khía cạnh của web design hiện đại. Dưới đây là các nhóm quy tắc chính:

1. Accessibility (10 quy tắc)

Accessibility là ưu tiên hàng đầu. Skill kiểm tra các lỗi phổ biến:

Nút chỉ có icon cần aria-label — nếu thiếu, người dùng screen reader không biết nút làm gì
Form controls cần <label> hoặc aria-label — mọi input đều phải có nhãn
Element tương tác cần keyboard handler — không ai chỉ dùng chuột
Dùng <button> cho hành động, <a> cho điều hướng — đừng dùng <div onClick>
Ảnh cần alt (hoặc alt="" nếu ảnh trang trí)
Icon trang trí cần aria-hidden="true"
Cập nhật bất đồng bộ cần aria-live="polite" — cho screen reader biết có nội dung mới
Ưu tiên HTML ngữ nghĩa trước khi dùng ARIA
Heading phân cấp từ <h1> đến <h6>, có skip link
scroll-margin-top trên heading anchors để tránh bị che khi scroll

2. Focus States (4 quy tắc)

Focus states rất quan trọng cho người dùng bàn phím:

Element tương tác cần focus-visible:ring-* — vòng ring khi focus bằng bàn phím
Không dùng outline-none nếu không có focus replacement
Dùng :focus-visible thay vì :focus — chỉ hiển thị focus khi dùng bàn phím
Dùng :focus-within cho compound controls như combobox, datepicker

3. Forms (11 quy tắc)

Forms là nơi dễ mắc lỗi nhất khi kiểm tra giao diện. Skill sẽ rà soát từng input, label và button:

Inputs cần autocomplete và name có ý nghĩa
Dùng đúng type: email, tel, url để mobile hiển thị bàn phím phù hợp
Không chặn paste — người dùng có quyền paste thông tin của họ
Labels phải click được (dùng htmlFor hoặc wrap control)
Tắt spellcheck trên email, code, username
Lỗi hiển thị inline cạnh field; focus vào lỗi đầu tiên khi submit

4. Animation (5 quy tắc)

Animation làm giao diện sống động nhưng cần đúng chuẩn:

Tôn trọng prefers-reduced-motion — người dùng bị chóng mặt có quyền tắt animation
Chỉ animate transform và opacity — không animate layout properties
Không dùng transition: all — liệt kê thuộc tính cụ thể
Đặt đúng transform-origin cho animation chính xác
Animation phải có thể ngắt giữa chừng — không force user chờ

5-13. Các nhóm quy tắc còn lại

Ngoài 4 nhóm chính, skill còn bao phủ thêm 9 lĩnh vực quan trọng khác:

Typography — dấu ngoặc cong, non-breaking spaces, font scaling
Content Handling — truncate, line-clamp, empty states
Images — width/height bắt buộc, lazy loading, responsive
Performance — virtualize list lớn, preconnect CDN
Navigation & State — URL phản ánh state, deep-link
Touch & Interaction — touch-action, overscroll behavior
Safe Areas — safe-area-inset cho thiết bị notched
Dark Mode & Theming — color-scheme, theme-color meta
Locale & i18n — Intl.DateTimeFormat, Intl.NumberFormat

Anti-patterns mà UI audit sẽ phát hiện

Khi bạn chạy kiểm tra giao diện, skill phát hiện 12 anti-patterns phổ biến mà developer giàu kinh nghiệm cũng thường mắc:

user-scalable=no — chặn zoom trên mobile, gây khó khăn cho người khiếm thị
transition: all — ảnh hưởng hiệu năng, không kiểm soát được thuộc tính nào đang chuyển động
outline-none không kèm focus-visible — tệ cho accessibility
<div> có click handler — phải là <button>
Ảnh không kích thước — gây Cumulative Layout Shift (CLS)
.map() mảng lớn không virtualize — chậm khi render hàng trăm item
Form input không label — screen reader không đọc được
Icon button không aria-label — người dùng không biết nút làm gì

Những anti-patterns này đến từ kinh nghiệm thực tế của đội ngũ tại Vercel, qua hàng ngàn dự án frontend.

Cách hoạt động — 4 bước đơn giản

Quy trình của skill cực kỳ đơn giản, chỉ gồm 4 bước:

Tải guidelines mới nhất từ kho Vercel
Đọc các file code bạn chỉ định
Kiểm tra từng file dựa trên tất cả quy tắc
Xuất kết quả file:line, nhóm theo file, báo pass nếu không lỗi

Tham khảo thêm web.dev/accessibility và MDN Accessibility để hiểu sâu hơn về các chuẩn accessibility mà skill này kiểm tra.

Lợi ích khi dùng Web-Design-Guidelines Skill

Việc áp dụng web design guidelines vào quy trình phát triển mang lại nhiều lợi ích thiết thực:

Tiết kiệm thời gian — AI quét toàn bộ codebase trong vài giây, thay vì hàng giờ review thủ công
Phát hiện lỗi sớm — accessibility, form, animation errors được tìm ra trước khi lên production
Chuẩn hóa chất lượng — mọi dự án đều tuân theo cùng bộ quy tắc chuẩn Vercel
Cập nhật liên tục — guidelines tự động tải mới nhất, không lo lạc hậu
Tích hợp dễ dàng — chỉ cần một câu lệnh npx là xong

So sánh với Frontend-Design Skill từ Anthropic

Cả hai skill đều bổ sung cho nhau. Nếu bạn đang tìm hiểu về web design, nên dùng cả hai:

Tiêu chí	web-design-guidelines	frontend-design
Tác giả	Vercel Labs	Anthropic
Mục đích	Kiểm tra / audit	Tạo giao diện mới
Đầu vào	File code có sẵn	Yêu cầu thiết kế
Đầu ra	Danh sách lỗi	Working code
Số quy tắc	50+	10 phong cách
Lượt cài	398.5K	559.4K

Nói ngắn gọn: frontend-design là kiến trúc sư thiết kế giao diện mới, còn web-design-guidelines là thanh tra chất lượng kiểm tra lại. Dùng cả hai là bộ đôi hoàn hảo. Xem thêm bài viết Frontend-Design Skill từ Anthropic để hiểu rõ hơn.

Kết luận

Web-Design-Guidelines skill là công cụ không thể thiếu cho bất kỳ AI agent nào làm frontend. Thay vì phải nhớ hàng chục quy tắc accessibility, form, animation — AI chỉ cần cài skill này và chạy kiểm tra giao diện. Kết quả là code UI vừa đẹp, vừa đúng chuẩn, và quan trọng nhất — có thể truy cập được cho mọi người dùng.

Nếu bạn làm frontend và muốn code UI đạt chuẩn web design, hãy thử cài skill này. Chỉ một câu lệnh npx là bạn có ngay công cụ UI audit mạnh mẽ — quét codebase, phát hiện lỗi trong vài giây.

Bên cạnh skill này, bạn có thể tham khảo thêm UI-UX Pro Max Skill và Sleek Design Mobile Apps để mở rộng kỹ năng thiết kế web của bạn.

Bạn đã thử skill này chưa? Bạn có hay dùng UI audit cho dự án của mình không? Chia sẻ dưới phần bình luận nhé!