design-review

Automated UI design reviews compare live web pages against design specs and accessibility standards, surfacing visual discrepancies and generating annotated screenshots. This Skill uses Playwright to load pages and Pillow to annotate issues directly onto captured visuals.

Accessibility checks generate actionable task lists by scanning web app pages for standards violations and exporting the findings into a markdown file. The Skill produces a DESIGN-REVIEW-TASKS.md output that engineers and designers can follow to fix identified issues.

Annotating screenshots for UI QA involves capturing full-page web visuals and overlaying issue markers where the implementation deviates from the design spec. This Skill leverages Python and Pillow to programmatically draw annotations onto screenshots for clear visual feedback.

Playwright and Python are required dependencies to run these automated web page accessibility checks. Playwright handles browser automation to load and render the target URL, while Python executes the review logic, with optional axe-core integration for deeper standards validation.

This design review tool works with local development servers by pointing the review script at a localhost URL. Running the Python script against http://localhost:3000 executes a full-page audit, analyzing the locally served UI against the provided design spec.

Spec-driven visual reviews using Playwright are limited to checking what renders in the browser DOM and visually on the captured screenshot. Complex interactive states requiring specific user authentication flows or dynamic animations may not be fully captured in a single automated audit pass.