Skip to content

Automated design review with Playwright MCP + Claude Code

Insight: An open-source Claude Code workflow combines Playwright MCP browser automation with specialized Claude Code agents to perform automated design reviews on front-end code changes. The system checks UI/UX consistency, accessibility compliance, and adherence to design standards before code reaches production — positioning visual review as an automated CI step alongside code and security review.

Detail: Part of a three-workflow suite (code review, security review, design review) from an "AI-native startup." The design review uses Microsoft's open-source Playwright MCP server to drive browser automation and inspect rendered output. Includes slash commands for on-demand scanning and GitHub Actions for automated PR checks. This represents an emerging pattern: using MCP not for context retrieval but for programmatic verification of visual output — aligning with Shrivu Shankar's Pattern 6 (programmatic verification beyond unit tests).

Sources