| name | visual-qa-rubric |
| description | Visual QA, screenshot review, browser review, Playwright, responsive QA, accessibility QA, UI polish, design review, visual regression, anti-AI UI rubric. Use when validating frontend visuals or reviewing screenshots. |
Visual QA Rubric
Gunakan untuk mengecek apakah UI layak ship secara visual, aksesibilitas, responsive, dan tidak terlihat generated AI.
Browser/Screenshot Workflow
Jika browser tool tersedia:
- Buka halaman target.
- Ambil snapshot DOM/accessibility.
- Ambil screenshot desktop.
- Resize mobile/tablet, ambil screenshot lagi.
- Cek console error dan request gagal.
- Bandingkan state: loading, empty, error, success jika bisa direproduksi.
- Tulis visual QA report dengan risiko tersisa.
Jika browser tool tidak tersedia:
- Jelaskan blocker.
- Lakukan static review dari komponen/CSS.
- Minta screenshot atau URL lokal jika perlu.
Rubrik Skor 0-2
Skor tiap kategori:
- 0 = gagal / terlihat broken.
- 1 = cukup tapi perlu polish.
- 2 = siap ship.
Kategori wajib:
- Hierarchy — primary action, title, content, metadata jelas.
- Spacing Rhythm — spacing konsisten, tidak terlalu simetris/generic.
- Typography — scale, weight, line-height, measure nyaman.
- Color/Contrast — WCAG AA, status color tidak ambigu.
- Layout Density — cocok domain, tidak terlalu kosong atau padat.
- Responsive — mobile/tablet bukan desktop dipaksa mengecil.
- Interaction States — hover, focus, disabled, loading, success, error.
- Backend Reality — empty/error/permission/validation/pagination nyata.
- Anti-AI Smell — tidak memakai pola generik tanpa alasan.
- Brand Fit — terasa konsisten dengan produk existing.
Skor interpretasi:
- 18-20: ship-ready.
- 14-17: usable, polish needed.
- 10-13: risky visual quality.
- <10: redesign needed.
Anti-AI Smell Checks
- Apakah hero/copy terlalu umum?
- Apakah card grid terlalu seragam?
- Apakah warna/gradient tidak punya makna produk?
- Apakah ikon/ilustrasi cuma filler?
- Apakah semua state memakai kalimat default?
- Apakah layout bisa dipakai di produk apa pun tanpa perubahan?
Jika “ya” untuk 2+ item, UI perlu product-specific polish.
Output Contract
## Visual QA Report
**Surface:** ...
**Evidence:** screenshot/browser/static review
| Category | Score | Finding | Fix |
|----------|-------|---------|-----|
**Total:** x/20
**Verdict:** ship-ready | polish-needed | risky | redesign-needed
## Browser Evidence
- Desktop:
- Tablet:
- Mobile:
- Console/network:
## Required Fixes
1. ...
