AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Kiểm tra tuân thủ Design System

Đọc computed style của ứng dụng đang chạy để phát hiện màu lệch design token, control vô hình và animation không hề chạy.

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

Làm được gì

Mã nguồn chỉ cho biết component yêu cầu gì, không cho biết trình duyệt đã resolve thành gì. Skill này dùng Reticle để đọc computed style trong app đang chạy và so sánh với design token mà dự án khai báo.

  • offTheme: màu đục không khớp token nào trong palette — vi phạm thật sự
  • colorTokens/backgroundTokens: danh sách token khớp màu; rỗng nghĩa là lệch palette
  • tokenCount: bằng 0 nghĩa là app chưa khai báo palette → phải báo sự thật đó chứ không báo "đạt"
  • occluded, box 0×0, opacity, cursor: phát hiện nút "có trong DOM mà không ai bấm được"
  • reticle_animations: xem animation có thực sự chạy và duration có đúng token
  • Mọi vi phạm được báo kèm vị trí file:line

Phù hợp với ai

  • Đội đã có design token/theme nhưng không có gì kiểm tra code có tuân thủ hay không
  • Lập trình viên frontend, design engineer, người phụ trách design review
  • Người thường gặp UI "trông hơi sai mà không ai nói được sai ở đâu"

Ví dụ sử dụng

  1. Sau khi style lại một button: báo Button.tsx:42 — background #3b82f6 không khớp token nào, palette có --color-primary là #2563eb.
  2. Sau khi bật dark theme: kiểm tra themeScope có đúng .dark và tìm phần tử không nhận scope tối.
  3. Sau khi thêm animation cho modal: nếu reticle_animations không trả về nó thì animation chưa hề chạy.

· · · 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 AI 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.
  2. Clone repo: git clone https://github.com/reticlehq/reticle.git
  3. Copy skill vào thư mục skill của Claude: mkdir -p ~/.claude/skills && cp -r reticle/skills/design-system-compliance ~/.claude/skills/
  4. Khởi tạo Reticle MCP server: RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init
  5. Làm theo skill install-and-verify trong repo để xác nhận cài đặt thành công.
  6. Chạy web app cần kiểm tra (ví dụ npm run dev), khởi động lại Claude Code rồi 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