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

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

Skill kiểm định UI cuối cùng: chạy script quét lỗi motion, a11y, 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★ 763⑂ 55Điểm AI 9/10Cập nhật lần cuối: 6 thg 11, 2026

Làm được gì

  • Chạy script audit.py tự phát hiện thư mục gốc (không phụ thuộc src/), quét JSX, .vue, .svelte, .astro và CSS để tìm thiếu motion, vi phạm accessibility, vấn đề hiệu năng, token không nhất quán.
  • Phân loại kết quả thành findings / clean / not applicable, và bắt buộc báo "không kiểm tra được" thay vì gộp thành "đã đạt".
  • Nhóm tells: 18 dấu hiệu mà AI hay tự thêm (eyebrow có số, ba card bằng nhau, chữ gradient, hiệu ứng glass/glow, animation chạy vô tận, dấu em dash...) được báo riêng để bạn đối chiếu với thesis của dự án.
  • Độ tương phản màu không nằm trong script: bạn phải tự tính từ giá trị token và ghi rõ tỉ lệ, ví dụ #831843 on #FDF2F8 = 9.4:1 (4.5:1 cho body, 3:1 cho chữ lớn/viền UI).
  • Có checklist riêng cho Compose (Layout Inspector, Macrobenchmark, Baseline Profile, Modifier.semantics) và SwiftUI (Instruments, Dynamic Type 200%, Reduce Motion).
  • Đầu ra chia 3 mức: Critical / Important / Nice-to-have.

Phù hợp với ai

  • Lập trình viên frontend cần một "cửa kiểm tra" chất lượng UI trước khi release.
  • Người muốn soát lại code UI do AI sinh ra về mặt accessibility và animation.
  • Dev mobile Compose/SwiftUI muốn kiểm hiệu năng khung hình và TalkBack/VoiceOver.
  • Người đang dùng pipeline genjutsu với lệnh /genjutsu:paint.

Ví dụ sử dụng

  1. "Audit thiết kế trước khi deploy" → chạy audit.py ., báo Critical gồm thiếu prefers-reduced-motion, div clickable không hỗ trợ bàn phím, animate width/height.
  2. "Chỉ kiểm nhóm hygiene" → dùng --group hygiene hoặc --only <check-id>, và ghi rõ check nào không chạy vì không có file tương ứng.
  3. "Kiểm tra token màu và duration" → đối chiếu danh sách màu, radius, font, duration (kèm file:line) với design token, tính tỉ lệ tương phản kèm bằng chứng.

· · · 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 AI 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 và vào thư mục làm việc của bạn.
  2. Tải repo: git clone https://github.com/AThevon/genjutsu.git
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Copy toàn bộ bộ skill: cp -r genjutsu/skills/_jutsu ~/.claude/skills/ (bắt buộc copy cả thư mục vì skill dùng scripts/audit.py và tài nguyên chung trong _jutsu).
  5. Kiểm tra Python: python3 --version. Nếu chưa có, skill sẽ chỉ chạy được chế độ audit thủ công một phần.
  6. Khởi động lại Claude Code rồi yêu cầu: "Dùng skill design-audit để kiểm định UI của project này".
  7. Nếu muốn dùng trọn pipeline, cài thêm các lệnh /genjutsu:* theo hướng dẫn trong README của repo.
Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION