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

Design Audit (Kiểm định thiết kế)

Skill kiểm tra cuối cùng trước khi phát hành: quét codebase tìm lỗi motion, accessibility, màu sắc, responsive và hiệu năng rồi báo cáo theo mức độ nghiêm trọng.

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

Nó làm được gì

  • Chạy scripts/audit.py để quét toàn bộ codebase: thiếu xử lý motion, vi phạm a11y, vấn đề hiệu năng và thiếu nhất quán. Hỗ trợ --json để xử lý tiếp và --only <check-id> để chạy một kiểm tra.
  • Phân biệt rõ ba trạng thái: findings (có bằng chứng kèm file:line), clean (đã kiểm và không có lỗi), not applicable (không có file loại đó nên chưa kiểm). Quy tắc bắt buộc: không bao giờ báo "chưa kiểm" thành "đạt".
  • Tỉ lệ tương phản màu phải tự tính từ giá trị token và báo kèm số liệu, ví dụ #831843 on #FDF2F8 = 9.4:1 (chuẩn 4.5:1 cho chữ thường, 3:1 cho chữ lớn và đường viền UI).
  • Có checklist riêng cho Compose (Layout Inspector, recomposition counts, Macrobenchmark, Baseline Profiles) và SwiftUI (Time Profiler, Hitches, Dynamic Type 200%, Reduce Motion), ngoài phần Web.
  • Kết quả cuối được sắp xếp theo Critical / Important / Nice-to-have.

Phù hợp với ai

  • Lập trình viên frontend/mobile cần một cổng kiểm định chất lượng trước khi release.
  • Design engineer quản lý tính nhất quán của design system (quá nhiều giá trị duration, inline style...).
  • Đội nhóm cần rà soát accessibility ở mức code một cách lặp lại.
  • Dự án Next.js/Nuxt/Vue/Svelte/Astro có cấu trúc thư mục không cố định.

Ví dụ sử dụng

  1. "Audit toàn bộ UI trước khi deploy" → báo cáo Critical: thiếu prefers-reduced-motion, outline: none không có :focus-visible, animate width/height.
  2. "Chỉ kiểm tra lại phần accessibility" → dùng --only để chạy riêng các check về focus và div có onClick.
  3. "Bộ màu thương hiệu mới có đạt chuẩn tương phản không?" → tính tỉ lệ cho từng cặp token và đối chiếu 4.5:1 / 3:1.

· · · 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/AThevon/genjutsu/HEAD/skills/_jutsu/design-audit/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/_jutsu/design-audit từ repo GitHub AThevon/genjutsu vào ~/.claude/skills/design-audit/ 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/AThevon/genjutsu.git && mkdir -p ~/.claude/skills && cp -r genjutsu/skills/_jutsu ~/.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. Tải mã nguồn: git clone https://github.com/AThevon/genjutsu.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Sao chép bộ skill: cp -r genjutsu/skills/_jutsu ~/.claude/skills/
  5. Kiểm tra file ~/.claude/skills/_jutsu/design-audit/scripts/audit.py có tồn tại không.
  6. Chạy python3 --version để chắc chắn đã có Python 3 (nếu không, skill chỉ audit được một phần).
  7. Khởi động lại Claude Code và yêu cầu: "Dùng skill design-audit kiểm tra dự án này".
  8. Nếu muốn dùng trọn pipeline, cài thêm lệnh /genjutsu:paint theo README của repo.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION