Frontend visual QA

Treat visual QA as an implementation loop, not a written review:

DESIGN → IMPLEMENT → RUN → SCREENSHOT → CRITIQUE → FIX → SCREENSHOT AGAIN → FINAL REVIEW

Workflow

1. Establish the target

Read the brief, intended art direction, existing design system, and relevant references. Run the actual page. Preserve deliberate choices unless rendered evidence shows they fail. If implementation changes are outside the request, stop after the evidence-backed critique.

For directional comparison, review isolated prototypes with the same content, states, and viewport set; report their visual philosophies and tradeoffs without selecting a winner unless asked. After selection, perform detailed QA and fixes inside the refined prototype before production integration.

2. Capture representative evidence

Read browser evidence, then inspect at least one wide desktop, one intermediate/tablet width, and one narrow mobile width. Add relevant states: menu open, hover, focus, long content, empty/error, reduced motion, or animation mid-sequence. Capture full-page context and focused crops when needed. Read visual review and responsive review.