Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Kiểm tra tuân thủ Design System

Đọc computed style trong ứng dụng đang chạy để kiểm chứng UI có thực sự dùng design token hay không.

Thiết kế · UITrung cấp★ 803⑂ 140Điểm AI 9/10Cập nhật lần cuối: 21 thg 9, 2026

Làm được gì

  • Dùng Reticle MCP để đọc computed style của trang đang chạy và đối chiếu với bảng token của dự án.
  • Các trường offTheme, colorTokens, backgroundTokens, tokenCount, themeScope giúp phát hiện màu hardcode như #3b82f6 hoặc nền ngoài palette.
  • Ngoài màu sắc: occluded (bị lớp phủ che), box 0×0 (có trong DOM nhưng vô hình), opacity/cursor để biết nút thật sự bị disable hay chỉ trông như vậy.
  • reticle_animations liệt kê animation đang chạy/vừa kết thúc, phát hiện animation không hề chạy hoặc sai duration so với token.
  • Mọi vi phạm được báo kèm file:line thay vì nhận xét cảm tính.

Phù hợp với ai

  • Đội ngũ có design system/token nhưng không có công cụ tự động kiểm tra code có tuân thủ không.
  • Lập trình viên frontend vừa xây hoặc restyle component và muốn một vòng design review.
  • Người review UI hay gặp tình huống "nhìn hơi sai nhưng không chỉ ra được sai ở đâu".

Ví dụ sử dụng

  1. Sau khi bật dark theme, kiểm tra nền nút: báo offTheme: true và gợi ý --color-primary đúng giá trị.
  2. Nút đóng modal "có trong DOM mà không thấy": inspect cho thấy box 0×0 hoặc bị occluded.
  3. Animation mới thêm không xuất hiện trong kết quả reticle_animations → nó chưa từng chạy.

Lưu ý: tokenCount = 0 nghĩa là app chưa khai báo palette, không được coi là "đạt". Skill này không thay thế kiểm tra accessibility (độ tương phản, thứ tự focus, screen reader).

· · · Hướng dẫn cài đặt · · ·

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/reticlehq/reticle/HEAD/skills/design-system-compliance/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/design-system-compliance từ repo GitHub reticlehq/reticle vào ~/.claude/skills/design-system-compliance/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/reticlehq/reticle.git /tmp/reticle && mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/design-system-compliance ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Mở terminal và clone repo: git clone https://github.com/reticlehq/reticle.git /tmp/reticle
  2. Chép skill vào thư mục skill của Claude Code: mkdir -p ~/.claude/skills && cp -r /tmp/reticle/skills/design-system-compliance ~/.claude/skills/
  3. Khởi tạo Reticle: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
  4. Tham khảo skill install-and-verify trong cùng repo để xác nhận MCP đã kết nối.
  5. Chạy ứng dụng web cần kiểm tra (ví dụ npm run dev).
  6. Khởi động lại Claude Code và yêu cầu: "Kiểm tra component này có tuân thủ design system không".
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION