Why I Let Claude Review My UI Before My Designer Does

Description and use

Automating UI QA with Claude’s vision API catches mechanical and accessibility issues in CI/CD, reducing manual designer reviews and speeding up delivery.

Problem

Developers lack tools to reliably catch mechanical UI issues such as spacing, sizing, contrast, and brand guideline adherence, leading to slow, inconsistent manual reviews by designers or QA teams.

Outcome

Design QA becomes a CI step that catches mechanical inconsistencies and accessibility violations before they reach designers or production, reducing manual review time and improving sprint velocity.

Workflow

• Capture screenshots of key pages/components with Playwright
• Send screenshots to Claude with a design spec prompt via Anthropic API
• Receive structured feedback on mechanical and accessibility issues
• Post findings as PR comments
• Fail the build if critical issues (e.g., contrast failures) are found

Evidence

Traditionally, this falls to designers or QA teams doing manual reviews. They'll screenshot your work, mark it up in Figma, send it back. Rinse and repeat.

Source

I've started using Claude's vision API to automate the tedious parts of design QA, and it's genuinely changed how I work.

Source

The real power comes when you treat this as a CI/CD step, not a one-off check. I've built a simple GitHub Action that: 1) Runs Playwright to capture screenshots of key pages/components 2) Sends them to Claude with a design spec prompt 3) Posts findings as PR comments 4) Fails the build if critical issues are found

Source